guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - Art Color</title>
    <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/stylesheets/v2/styles.css">
    <style>
        /* 联系表单样式 */
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 30px;
        }

        @media (max-width: 768px) {
            .contact-grid {
                grid-template-columns: 1fr;
            }
        }

        .contact-form {
            background-color: var(--background-color);
            border-radius: 10px;
            padding: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--secondary-color);
        }

        .form-group textarea {
            min-height: 150px;
            resize: vertical;
        }

        .contact-info {
            background-color: var(--background-color);
            border-radius: 10px;
            padding: 30px;
        }

        .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .info-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
        }

        .info-text h4 {
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .info-text p {
            margin-bottom: 0;
        }

        /* 社交媒体链接样式 */
        .social-links {
            margin-top: 30px;
        }

        .social-links h3 {
            margin-bottom: 15px;
        }

        .social-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            transition: all 0.3s ease;
        }

        .social-icon:hover {
            transform: scale(1.1);
        }

        .social-text a {
            color: var(--text-color);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .social-text a:hover {
            color: var(--primary-color);
        }

        .facebook-icon {
            background-color: #1877f2;
            /* Facebook颜色 */
        }

        .twitter-icon {
            background-color: #1da1f2;
            /* Twitter颜色 */
        }


        /* 响应消息 */
        .alert {
            padding: 12px;
            margin-top: 15px;
            border-radius: 4px;
            font-size: 14px;
        }

        .alert-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-danger {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        @media (max-width: 768px) {}
    </style>
</head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-JBGGVGLHTP');
</script>

<body>
    <%- include('header') %>

        <main class="container">
            <section>
                <h1>Contact Us</h1>
                <p>We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel
                    free to reach out to our team using the form below or through our contact information.</p>

                <div class="contact-grid">
                    <div class="contact-form">
                        <h2>Send Us a Message</h2>
                        <form id="contact-form">
                            <div class="form-group">
                                <label for="name">Your Name</label>
                                <input type="text" id="name" name="name" required>
                            </div>

                            <div class="form-group">
                                <label for="email">Your Email</label>
                                <input type="email" id="email" name="email" required>
                            </div>

                            <div class="form-group">
                                <label for="subject">Subject</label>
                                <input type="text" id="subject" name="subject" required>
                            </div>

                            <div class="form-group">
                                <label for="message">Message</label>
                                <textarea id="message" name="message" required></textarea>
                            </div>

                            <button type="submit" class="btn">Send Message</button>
                        </form>
                    </div>

                    <div class="contact-info">
                        <h2>Contact Information</h2>

                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path d="M1.5 8.5A.5.5 0 0 1 2 8h12a.5.5 0 0 1 0 1H2a.5.5 0 0 1-.5-.5z" />
                                    <path
                                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                                    <path fill-rule="evenodd"
                                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-8a.5.5 0 0 0-1 0v8z" />
                                </svg>
                            </div>
                            <div class="info-text">
                                <h4>Email</h4>
                                <p><a
                                        href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a>
                                </p>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M12.792 3.953a.5.5 0 0 0-.59.04l-3.5 2.5a.5.5 0 0 0-.162.633l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5zm-3.5 1.617L11 5.633l-1 2.5-2.5-1.5zm-5.5 2.171L3 9.071l1 2.5a.5.5 0 0 0 .764.35l3.5-2.5a.5.5 0 0 0 .04-.59l-1-2.5a.5.5 0 0 0-.59-.04l-3.5 2.5zm3.5 1.617L7 9.633l-1 2.5-2.5-1.5z" />
                                    <path d="M8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                                    <path
                                        d="M8 1a2 2 0 0 0-2 2v2H3.5a.5.5 0 0 0 0 1H6v1.5a.5.5 0 0 0 1 0V6h2.5a.5.5 0 0 0 0-1H8V3a2 2 0 0 0-2-2zm6 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                                </svg>
                            </div>
                            <div class="info-text">
                                <h4>Phone</h4>
                                <p><a href="tel:+8601062387471">+86 (010) 6238-7471</a></p>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" />
                                </svg>
                            </div>
                            <div class="info-text">
                                <h4>Address</h4>
                                <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing, China
                                </p>
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    viewBox="0 0 16 16">
                                    <path
                                        d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.993zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789zm1.834 1.79a7.01 7.01 0 0 0-1.034-.265l.596-.767a8.02 8.02 0 0 1 1.07.85z" />
                                    <path
                                        d="M14.5 8a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0zm-1 0a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0zM5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z" />
                                </svg>
                            </div>
                            <div class="info-text">
                                <h4>Business Hours</h4>
                                <p>Monday - Friday: 9:00 AM - 6:00 PM</p>
                                <p>Saturday: 10:00 AM - 4:00 PM</p>
                                <p>Sunday: Closed</p>
                            </div>
                        </div>

                        <!-- 社交媒体链接 -->
                        <div class="social-links">
                            <h3>Follow on Social</h3>
                            <div class="social-item">
                                <div class="social-icon facebook-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
                                    </svg>
                                </div>
                                <div class="social-text">
                                    <a href="https://www.facebook.com/artcoloring" target="_blank">Facebook
                                        Community</a>
                                </div>
                            </div>

                            <div class="social-item">
                                <div class="social-icon twitter-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                        viewBox="0 0 16 16">
                                        <path
                                            d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
                                    </svg>
                                </div>
                                <div class="social-text">
                                    <a href="#" target="_blank">Twitter</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <%- include('footer') %>

            <script src="/scripts/script.js"></script>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const contactForm = document.getElementById('contact-form');

                    if (contactForm) {
                        contactForm.addEventListener('submit', function (e) {
                            e.preventDefault();

                            // 显示加载状态
                            const submitButton = contactForm.querySelector('button[type="submit"]');
                            const originalText = submitButton.innerHTML;
                            submitButton.disabled = true;
                            submitButton.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 发送中...';

                            // 收集表单数据
                            const formData = {
                                name: contactForm.querySelector('#name').value,
                                email: contactForm.querySelector('#email').value,
                                subject: contactForm.querySelector('#subject').value,
                                message: contactForm.querySelector('#message').value
                            };

                            // 发送数据到后端
                            fetch('/api/contact', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify(formData)
                            })
                                .then(response => response.json())
                                .then(data => {
                                    // 恢复按钮状态
                                    submitButton.disabled = false;
                                    submitButton.innerHTML = originalText;

                                    // 显示响应消息
                                    const messageContainer = document.createElement('div');
                                    messageContainer.className = data.success ? 'alert alert-success' : 'alert alert-danger';
                                    messageContainer.textContent = data.message;

                                    // 添加到表单之前
                                    contactForm.parentNode.insertBefore(messageContainer, contactForm);

                                    // 如果成功，清空表单
                                    if (data.success) {
                                        contactForm.reset();

                                        // 5秒后移除消息
                                        setTimeout(() => {
                                            messageContainer.remove();
                                        }, 5000);
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    submitButton.disabled = false;
                                    submitButton.innerHTML = originalText;

                                    const errorContainer = document.createElement('div');
                                    errorContainer.className = 'alert alert-danger';
                                    errorContainer.textContent = '发送失败，请稍后再试';
                                    contactForm.parentNode.insertBefore(errorContainer, contactForm);

                                    setTimeout(() => {
                                        errorContainer.remove();
                                    }, 5000);
                                });
                        });
                    }
                });
            </script>
</body>

</html>