guoziyun
/
artsite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
							<!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 Number Coloring</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?action=write-review" 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&pcampaignid=web_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>