guoziyun
/
artsite


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact - Art Number Coloring</title>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9f9f9;
            color: #333;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        h1,
        h2,
        h3,
        h4 {
            margin: 0;
        }


        a {
            text-decoration: none;
            color: #333;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #ff6b6b;
        }

        /* 颜色定义 */
        :root {
            --primary: #ff6b6b;
            --secondary: #4ecdc4;
            --accent: #ffd166;
            --background: #f9f9f9;
            --text: #333;
            --lightText: #666;
        }

        /* 导航栏 */
        header {
            background-color: var(--primary);
            color: white;
            padding: 20px 0;
        }

        .header-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @media (min-width: 768px) {
            .header-content {
                flex-direction: row;
                justify-content: space-between;
            }
        }

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

        @media (min-width: 768px) {
            .logo {
                margin-bottom: 0;
            }
        }

        .logo svg {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .logo span {
            font-size: 24px;
            font-weight: bold;
        }

        nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        nav li {
            margin: 0 15px;
        }

        nav a {
            color: white;
            font-weight: 500;
        }

        nav a:hover {
            color: var(--accent);
        }

        /* 主要内容 */
        main {
            padding: 40px 0;
        }

        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
        }

        .section-title {
            font-size: clamp(1.8rem, 5vw, 2.5rem);
            font-weight: bold;
            color: var(--primary);
            text-align: center;
            margin-bottom: 20px;
        }

        .section-subtitle {
            color: var(--lightText);
            text-align: center;
            margin-bottom: 40px;
        }

        .contact-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }

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

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

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

        .form-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--secondary);
            box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
        }

        textarea.form-input {
            resize: vertical;
        }

        .btn-primary {
            background-color: var(--secondary);
            color: white;
            padding: 10px 24px;
            border: none;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--primary);
        }

        .btn-primary:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* 联系信息 */
        .contact-info {
            margin-top: 30px;
        }

        .contact-item {
            display: flex;
            margin-bottom: 25px;
        }

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

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

        .contact-details h4 {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 5px;
        }

        .social-links {
            display: flex;
            gap: 10px;
        }

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

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

        .facebook {
            background-color: #1877f2;
        }

        .twitter {
            background-color: #1da1f2;
        }

        .instagram {
            background-color: #e4405f;
        }

        .pinterest {
            background-color: #bd081c;
        }

        /* 响应消息 */
        .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;
        }

        /* 页脚 */
        footer {
            background-color: var(--text);
            color: white;
            padding: 60px 0;
            margin-top: 60px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }

        @media (min-width: 768px) {
            .footer-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .footer-logo {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .footer-logo svg {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .footer-logo span {
            font-size: 20px;
            font-weight: bold;
        }

        .footer-text {
            color: #999;
            font-size: 14px;
        }

        .footer-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 10px;
        }

        .footer-links a {
            color: #999;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .footer-bottom {
            border-top: 1px solid #444;
            margin-top: 40px;
            padding-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @media (min-width: 768px) {
            .footer-bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }

        .copyright {
            color: #777;
            font-size: 14px;
            margin-bottom: 15px;
        }

        @media (min-width: 768px) {
            .copyright {
                margin-bottom: 0;
            }
        }

        .footer-social {
            display: flex;
            gap: 15px;
        }

        .footer-social a {
            color: #999;
        }

        .footer-social a:hover {
            color: var(--primary);
        }
    </style>
</head>

<body>
    <!-- Navigation Bar -->
    <header>
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="50" cy="50" r="45" fill="#ff6b6b" />
                        <circle cx="30" cy="30" r="10" fill="#4ecdc4" />
                        <circle cx="70" cy="30" r="10" fill="#ffd166" />
                        <circle cx="30" cy="70" r="10" fill="#ffd166" />
                        <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
                        <rect x="45" y="45" width="10" height="10" fill="white" />
                    </svg>
                    <span>Art Number Coloring</span>
                </div>
                <nav>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="/coloring-pages">Coloring Pages</a></li>
                        <li><a href="/about">About Us</a></li>
                        <li><a href="/contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <main>
        <div class="container">
            <section class="card max-w-4xl mx-auto">
                <h1 class="section-title">Contact Us</h1>
                <p class="section-subtitle">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-container">
                    <!-- Contact Form -->
                    <div>
                        <h2 style="font-size: 24px; font-weight: 600; color: var(--secondary); margin-bottom: 20px;">
                            Send 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 class="form-input">
                            </div>

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

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

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

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

                    <!-- Contact Information -->
                    <div>
                        <h2 style="font-size: 24px; font-weight: 600; color: var(--secondary); margin-bottom: 20px;">
                            Contact Information</h2>

                        <div class="contact-info">
                            <div class="contact-item">
                                <div class="contact-icon">
                                    <span>📧</span>
                                </div>
                                <div class="contact-details">
                                    <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="contact-item">
                                <div class="contact-icon">
                                    <span>📍</span>
                                </div>
                                <div class="contact-details">
                                    <h4>Address</h4>
                                    <p>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing,
                                        China</p>
                                </div>
                            </div>

                            <!-- Social Media Links -->
                            <div>
                                <h3
                                    style="font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 15px;">
                                    Follow Us</h3>
                                <div class="social-links">
                                    <a href="https://www.facebook.com/artcoloring" target="_blank"
                                        class="social-link facebook">
                                        <span>Facebook</span>
                                    </a>
                                    <a href="https://twitter.com/yourhandle" target="_blank"
                                        class="social-link twitter">
                                        <span>Twitter</span>
                                    </a>
                                    <a href="#" target="_blank" class="social-link instagram">
                                        <span>Instagram</span>
                                    </a>
                                    <a href="#" target="_blank" class="social-link pinterest">
                                        <span>Pinterest</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div>
                    <div class="footer-logo">
                        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="50" cy="50" r="45" fill="#ff6b6b" />
                            <circle cx="30" cy="30" r="10" fill="#4ecdc4" />
                            <circle cx="70" cy="30" r="10" fill="#ffd166" />
                            <circle cx="30" cy="70" r="10" fill="#ffd166" />
                            <circle cx="70" cy="70" r="10" fill="#4ecdc4" />
                            <rect x="45" y="45" width="10" height="10" fill="white" />
                        </svg>
                        <span>Art Number Coloring</span>
                    </div>
                    <p class="footer-text">Free printable coloring pages and digital art resources for all ages.</p>
                </div>

                <div>
                    <h3 class="footer-title">Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="/">Home</a></li>
                        <li><a href="/coloring-pages">Coloring Pages</a></li>
                        <li><a href="/about">About Us</a></li>
                        <li><a href="/contact">Contact</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer-title">Resources</h3>
                    <ul class="footer-links">
                        <li><a href="/faq">FAQ</a></li>
                        <li><a href="/privacy">Privacy Policy</a></li>
                        <li><a href="/terms">Terms of Service</a></li>
                        <li><a href="/app">Download App</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="footer-title">Contact Us</h3>
                    <ul class="footer-links">
                        <li>
                            <div class="flex items-center">
                                <span style="margin-right: 10px;">📧</span>
                                <a href="mailto:art_number_coloring@jccy-tech.com">art_number_coloring@jccy-tech.com</a>
                            </div>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <span style="margin-right: 10px;">📍</span>
                                <span>17th Floor, Shining Building, No. 35 Xueyuan Road, Haidian District, Beijing,
                                    China</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="footer-bottom">
                <p class="copyright">© 2025 Art Number Coloring. All rights reserved.</p>
                <div class="footer-social">
                    <a href="#" aria-label="Facebook">Facebook</a>
                    <a href="#" aria-label="Twitter">Twitter</a>
                    <a href="#" aria-label="Instagram">Instagram</a>
                    <a href="#" aria-label="Pinterest">Pinterest</a>
                </div>
            </div>
        </div>
    </footer>

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

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

                    // Show loading state
                    const submitButton = contactForm.querySelector('button[type="submit"]');
                    const originalText = submitButton.innerHTML;
                    submitButton.disabled = true;
                    submitButton.innerHTML = '<span style="display: inline-block; animation: spin 1s linear infinite;">⟳</span> Sending...';

                    // Collect form data
                    const formData = {
                        name: contactForm.querySelector('#name').value,
                        email: contactForm.querySelector('#email').value,
                        subject: contactForm.querySelector('#subject').value,
                        message: contactForm.querySelector('#message').value
                    };

                    // Send data to backend
                    fetch('/contact', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(formData)
                    })
                        .then(response => response.json())
                        .then(data => {
                            // Restore button state
                            submitButton.disabled = false;
                            submitButton.innerHTML = originalText;

                            // Show response message
                            const messageContainer = document.createElement('div');
                            messageContainer.className = data.success ? 'alert alert-success' : 'alert alert-danger';
                            messageContainer.textContent = data.message;

                            // Add before form
                            contactForm.parentNode.insertBefore(messageContainer, contactForm.nextSibling);

                            // If success, clear form
                            if (data.success) {
                                contactForm.reset();

                                // Remove message after 5 seconds
                                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 = 'Failed to send message. Please try again later.';
                            contactForm.parentNode.insertBefore(errorContainer, contactForm.nextSibling);

                            setTimeout(() => {
                                errorContainer.remove();
                            }, 5000);
                        });
                });
            }

            // Loading animation
            const style = document.createElement('style');
            style.textContent = `
                @keyframes spin {
                    from { transform: rotate(0deg); }
                    to { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
        });
    </script>
</body>

</html>