guoziyun
/
artsite


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="Find answers to frequently asked questions about our coloring pages, online coloring tools, downloads, and more at Yay! Coloring Pages.">
    <title>FAQ - Art Color</title>
    <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/stylesheets/v2/styles.css">
    <style>
        .page-title {
            color: var(--secondary-color);
            font-size: 2.2rem;
            margin: 40px 0 20px;
            text-align: center;
        }

        .page-description {
            color: var(--light-text);
            max-width: 800px;
            margin: 0 auto 50px;
            text-align: center;
        }

        /* FAQ 搜索框 */
        .faq-search {
            max-width: 600px;
            margin: 0 auto 40px;
            position: relative;
        }

        .faq-search input {
            width: 100%;
            padding: 12px 40px 12px 20px;
            border-radius: 30px;
            border: 1px solid #ddd;
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
        }

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

        .faq-search i {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--light-text);
        }

        /* FAQ 分类导航 */
        .faq-categories {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 40px;
        }

        .faq-category {
            padding: 10px 20px;
            margin: 5px;
            border-radius: 30px;
            background-color: white;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .faq-category:hover {
            background-color: #f0f0f0;
        }

        .faq-category.active {
            background-color: var(--primary-color);
            color: white;
        }

        /* FAQ 部分样式 */
        .faq-section {
            margin: 40px 0;
        }

        .faq-category-title {
            color: var(--secondary-color);
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        .faq-item {
            background-color: white;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .faq-question {
            padding: 20px;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

        .faq-question:hover {
            background-color: #f8f9fa;
            padding-left: 25px;
        }

        .faq-question::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--primary-color);
            transition: transform 0.5s ease;
            margin-left: 10px;
        }

        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }

        .faq-answer {
            padding: 0 20px 0 40px;
            color: var(--light-text);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease, padding-top 0.3s ease, padding-bottom 0.3s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
            padding-top: 10px;
            padding-bottom: 20px;
        }

        /* 联系我们提示 */
        .faq-contact {
            background-color: var(--secondary-color);
            color: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            margin: 60px 0;
        }

        .faq-contact h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: white;
        }

        .faq-contact p {
            margin-bottom: 20px;
            color: white;
        }

        .faq-contact a {
            display: inline-block;
            background-color: white;
            color: var(--secondary-color);
            padding: 10px 24px;
            border-radius: 30px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .faq-contact a:hover {
            background-color: var(--accent-color);
            color: white;
        }


        @media (max-width: 768px) {
            .page-title {
                font-size: 1.8rem;
            }

            .faq-category-title {
                font-size: 1.5rem;
            }

            .faq-question {
                font-size: 1rem;
                padding: 15px;
            }

            .faq-answer {
                padding: 0 15px 0 30px;
            }

            .faq-question:hover {
                padding-left: 20px;
            }

            .faq-contact h3 {
                font-size: 1.3rem;
            }
        }
    </style>
</head>

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

        <div class="container">
            <div class="breadcrumb">
                <a href="/">Home</a> &gt; FAQ
            </div>

            <h1 class="page-title">Frequently Asked Questions</h1>
            <p class="page-description">Can't find what you're looking for? Check out our most frequently asked
                questions below. If you still have questions, feel free to <a href="/contact"
                    style="color: var(--primary-color);">contact us</a>.</p>

            <!-- FAQ 搜索框 -->
            <div class="faq-search">
                <input type="text" id="faq-search" placeholder="Search for answers...">
                <i class="fa fa-search"></i>
            </div>

            <!-- FAQ 分类导航 -->
            <div class="faq-categories">
                <div class="faq-category active" data-category="all">All Categories</div>
                <div class="faq-category" data-category="finding">Finding Pages</div>
                <div class="faq-category" data-category="downloading">Downloading & Printing</div>
                <div class="faq-category" data-category="online">Online Coloring</div>
                <div class="faq-category" data-category="account">Account & Registration</div>
                <div class="faq-category" data-category="commercial">Commercial Use</div>
                <div class="faq-category" data-category="app">Mobile App</div>
            </div>

            <!-- FAQ 内容 -->
            <div class="faq-content">
                <!-- 查找页面分类 -->
                <div class="faq-section" data-category="finding">
                    <h2 class="faq-category-title">Finding Coloring Pages</h2>

                    <div class="faq-item">
                        <div class="faq-question">How to find my favorite coloring page?</div>
                        <div class="faq-answer">
                            <p>You can use our <a href="/coloring-page-gallery"
                                    style="color: var(--primary-color);">Gallery</a> page, which features over 20,000
                                coloring pages. It supports searching by various themes, or you can use the search box
                                at the top of the page to look for specific topics.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">Do you have coloring pages for specific holidays or seasons?</div>
                        <div class="faq-answer">
                            <p>Yes! We have a wide selection of holiday and seasonal coloring pages, including
                                Christmas, Halloween, Easter, Valentine's Day, summer, winter, and more. You can find
                                them by using the category filters in our gallery or by searching for the specific
                                holiday or season.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">How often do you add new coloring pages?</div>
                        <div class="faq-answer">
                            <p>Our team adds new coloring pages daily! We're constantly expanding our collection with
                                fresh designs across various themes. To stay updated with our latest additions, you can
                                subscribe to our newsletter or follow us on social media.</p>
                        </div>
                    </div>
                </div>

                <!-- 下载和打印分类 -->
                <div class="faq-section" data-category="downloading">
                    <h2 class="faq-category-title">Downloading & Printing</h2>

                    <div class="faq-item">
                        <div class="faq-question">How to download a coloring page?</div>
                        <div class="faq-answer">
                            <p>On any coloring page detail page, click the "Download" button. You can choose between
                                different formats (PDF or PNG) depending on your needs. The download will start
                                automatically.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">How to print a coloring page?</div>
                        <div class="faq-answer">
                            <p>After downloading the coloring page, open the file (PDF or PNG). Use your browser's print
                                function (usually Ctrl+P on Windows/Linux or Command+P on Mac) to print the page. Make
                                sure to select the appropriate printer settings for the best results.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">The downloaded file is not opening. What should I do?</div>
                        <div class="faq-answer">
                            <p>If you're having trouble opening the downloaded file, try the following:</p>
                            <ul>
                                <li>Make sure you have the appropriate software installed (Adobe Reader for PDF files or
                                    an image viewer for PNG files).</li>
                                <li>Try downloading the file again.</li>
                                <li>Check if your internet connection was stable during the download.</li>
                                <li>Try using a different browser to download the file.</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 在线填色分类 -->
                <div class="faq-section" data-category="online">
                    <h2 class="faq-category-title">Online Coloring</h2>

                    <div class="faq-item">
                        <div class="faq-question">How to color online?</div>
                        <div class="faq-answer">
                            <p>On any coloring page detail page, click the "Paint Now!" button. This will take you to
                                our online coloring studio. Here, you can color digitally using your mouse or
                                touchscreen. Each section is numbered, and you just need to select the corresponding
                                color from the palette and click on the sections to fill them in.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">Can I save my online coloring progress?</div>
                        <div class="faq-answer">
                            <p>Yes! In the online coloring studio, click the "Save" button at any time to save your
                                progress. All your saved projects can be found in your "My Works" section. You can
                                return to them later to continue coloring.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">How to share my colored artwork?</div>
                        <div class="faq-answer">
                            <p>Once you've completed your artwork in the online studio, click the "Share" button. You
                                can share your creation directly to social media platforms like Facebook, Twitter, or
                                Pinterest, or generate a shareable link to send to friends and family.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">I see you support numbered coloring. Do you also support free coloring
                            with custom brushes and colors?</div>
                        <div class="faq-answer">
                            <p>Yes! In addition to our numbered coloring pages, we also offer a free coloring mode that
                                allows you to choose any brush and color you like. This feature is currently available
                                on our iOS app. You can download it from the <a
                                    href="itms-apps://itunes.apple.com/app/id1626214585"
                                    style="color: var(--primary-color);">App Store</a> to start creating freely.</p>
                        </div>
                    </div>
                </div>

                <!-- 账户和注册分类 -->
                <div class="faq-section" data-category="account">
                    <h2 class="faq-category-title">Account & Registration</h2>

                    <div class="faq-item">
                        <div class="faq-question">Do I need to create an account to use the site?</div>
                        <div class="faq-answer">
                            <p>You don't need an account to browse and download coloring pages. However, creating an
                                account allows you to save your online coloring progress, access your colored artwork
                                anytime, and participate in community features like sharing your creations.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">How do I reset my password?</div>
                        <div class="faq-answer">
                            <p>Click on the "Forgot Password?" link on the login page. Enter the email address
                                associated with your account, and we'll send you a password reset link. Follow the
                                instructions in the email to reset your password.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">Can I delete my account?</div>
                        <div class="faq-answer">
                            <p>Yes, you can delete your account at any time. Log in to your account, go to your profile
                                settings, and click on the "Delete Account" option. Please note that deleting your
                                account will permanently remove all your saved artwork and account information.</p>
                        </div>
                    </div>
                </div>

                <!-- 商业使用分类 -->
                <div class="faq-section" data-category="commercial">
                    <h2 class="faq-category-title">Commercial Use</h2>

                    <div class="faq-item">
                        <div class="faq-question">Can I use your coloring pages commercially?</div>
                        <div class="faq-answer">
                            <p>Our coloring pages are for personal and non-commercial use only. You can print, color,
                                and share them for personal enjoyment. However, you may not sell or redistribute our
                                coloring pages in any form without prior written permission.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">How can I get permission for commercial use?</div>
                        <div class="faq-answer">
                            <p>For commercial use inquiries, please <a href="/contact"
                                    style="color: var(--primary-color);">contact us</a> with details about your intended
                                use. We offer licensing options for businesses, publishers, and organizations. Our team
                                will review your request and provide you with the necessary information and pricing.</p>
                        </div>
                    </div>
                </div>

                <!-- 移动应用分类 -->
                <div class="faq-section" data-category="app">
                    <h2 class="faq-category-title">Mobile App</h2>

                    <div class="faq-item">
                        <div class="faq-question">Do you have a mobile app?</div>
                        <div class="faq-answer">
                            <p>Yes! We have a dedicated mobile app available for both Android and iOS devices. The app
                                offers all the features of our web platform with additional benefits like offline
                                coloring and enhanced touch controls. You can download it from the <a
                                    href="itms-apps://itunes.apple.com/app/id1575480118?utm_source=share"
                                    style="color: var(--primary-color);">App Store</a> or <a
                                    href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&utm_source=share"
                                    style="color: var(--primary-color);">Google Play</a>.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">Can I sync my progress between the app and the website?</div>
                        <div class="faq-answer">
                            <p>Yes, if you log in to your account on both the app and the website, your saved projects
                                and progress will be synced automatically. This allows you to start coloring on one
                                device and continue on another.</p>
                        </div>
                    </div>

                    <div class="faq-item">
                        <div class="faq-question">Is the app free to download?</div>
                        <div class="faq-answer">
                            <p>Yes, our mobile app is free to download and use. There are also in-app purchases
                                available for additional coloring pages and premium features.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 联系我们提示 -->
            <div class="faq-contact">
                <h3>Still have questions?</h3>
                <p>Our support team is here to help. Contact us if you can't find the answer to your question in our
                    FAQ.</p>
                <a href="/contact">Contact Support</a>
            </div>
        </div>

        <%- include('footer') %>

            <script src="/scripts/script.js"></script>

            <script>
                // FAQ 折叠功能
                const faqQuestions = document.querySelectorAll('.faq-question');
                faqQuestions.forEach(question => {
                    question.addEventListener('click', () => {
                        const faqItem = question.parentElement;
                        faqItem.classList.toggle('active');

                        // 关闭其他打开的FAQ项
                        document.querySelectorAll('.faq-item.active').forEach(item => {
                            if (item !== faqItem) {
                                item.classList.remove('active');
                            }
                        });
                    });
                });

                // FAQ 分类筛选
                const faqCategories = document.querySelectorAll('.faq-category');
                const faqSections = document.querySelectorAll('.faq-section');

                faqCategories.forEach(category => {
                    category.addEventListener('click', () => {
                        // 更新活动分类样式
                        faqCategories.forEach(cat => cat.classList.remove('active'));
                        category.classList.add('active');

                        const selectedCategory = category.getAttribute('data-category');

                        // 显示匹配的FAQ部分
                        faqSections.forEach(section => {
                            if (selectedCategory === 'all' || section.getAttribute('data-category') === selectedCategory) {
                                section.style.display = 'block';
                            } else {
                                section.style.display = 'none';
                            }
                        });
                    });
                });

                // FAQ 搜索功能
                const searchInput = document.getElementById('faq-search');

                searchInput.addEventListener('input', () => {
                    const searchTerm = searchInput.value.toLowerCase().trim();
                    const faqItems = document.querySelectorAll('.faq-item');

                    faqItems.forEach(item => {
                        const question = item.querySelector('.faq-question').textContent.toLowerCase();
                        const answer = item.querySelector('.faq-answer').textContent.toLowerCase();

                        if (question.includes(searchTerm) || answer.includes(searchTerm)) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            </script>
</body>

</html>