guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134
							<!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="Art Color - The best color by number app with daily updated HD pictures, offline coloring, and easy sharing. Free for everyone!">
    <title>Art Color - Color by Number App</title>
    <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #4ecdc4;
            --accent-color: #ffd166;
            --background-color: #f9f9f9;
            --text-color: #333;
            --light-text: #666;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        /* 导航栏基础样式 */
        header {
            background-color: var(--background-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            height: 160px;
            top: 0;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        /* Logo样式 */
        .logo {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        /* 缩小后的header样式 */
        .small-header {
            height: 80px !important;
        }

        .small-header #logo-img {
            width: 70px !important;
            height: 70px !important;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            min-height: 80px;
        }


        /* 桌面端导航菜单样式 */
        .nav-menu {
            display: flex;
            align-items: center;
            list-style: none;
        }

        .nav-menu li {
            margin-left: 30px;
        }

        .nav-menu a {
            text-decoration: none;
            color: var(--text-color);
            font-size: 1.15rem;
            font-weight: bold;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-menu a.active {
            color: var(--secondary-color);
        }

        .nav-menu a:hover {
            color: var(--primary-color);
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-menu a:hover::after {
            width: 100%;
        }

        /* 下拉内容初始隐藏 */
        .dropdown-menu-btn {
            display: none;
            position: absolute;
            background-color: var(--background-color);
            min-width: 200px;
            margin-top: 25px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1000;
        }

        /* 下拉菜单项样式 */
        .dropdown-menu-btn a {
            color: var(--text-color);
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-menu-btn a.selected {
            color: var(--primary-color);
        }

        /* 鼠标悬停时显示下拉菜单 */
        .dropdown-menu:hover .dropdown-menu-btn {
            display: block;
        }

        /* 移动端菜单按钮样式 */
        .menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--text-color);
            cursor: pointer;
        }

        /* 移动端下拉菜单样式 */
        .mobile-menu {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 15px 20px;
            display: none;
            animation: fadeIn 0.3s ease;
        }


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

        .app-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 80px 0 120px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .app-header::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: var(--background-color);
            clip-path: polygon(0 100%, 100% 100%, 100% 0);
        }

        .app-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 30px;
            overflow: hidden;
        }

        .app-icon img {
            width: 140px;
            height: 140px;
            border: 3px solid #eeeeee;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            object-fit: contain;
        }

        .app-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 20px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .app-subtitle {
            font-size: 1.2rem;
            margin-bottom: 40px;
            max-width: 600px;
            margin: 0 auto 40px;
        }

        .app-badge-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }

        .app-badge {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 160px;
            height: auto;
            background-color: black;
            border-radius: 8px;
            margin: 10px;
            transition: transform 0.3s ease;
        }

        .app-badge:hover {
            transform: translateY(-5px);
        }

        .app-features {
            padding: 60px 0;
        }

        .section-title {
            color: var(--secondary-color);
            font-size: 2rem;
            margin-bottom: 60px;
            text-align: center;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 40px;
        }

        .feature-card {
            background-color: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-10px);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background-color: rgba(255, 107, 107, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 20px;
        }

        .feature-icon i {
            font-size: 2.5rem;
            color: var(--primary-color);
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        .feature-desc {
            color: var(--light-text);
        }

        .app-screenshots {
            padding: 60px 0;
            background-color: white;
        }

        .screenshot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 40px;
        }

        .screenshot {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .screenshot:hover {
            transform: scale(1.03);
        }

        .screenshot img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        /* 新增视频展示区域样式 */
        .app-video {
            padding: 60px 0;
            text-align: center;
        }

        .video-container {
            position: relative;
            display: inline-block;
            max-width: 300px;
            /* 竖版视频宽度 */
            margin: 0 auto;
        }

        .video-wrapper {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 177.78%;
            /* 竖版视频比例 9:16 */
            background-color: #000;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .video-wrapper video {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            object-fit: contain;
            display: block;
        }

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: rgba(255, 107, 107, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
        }

        .play-button:hover {
            background-color: rgba(255, 107, 107, 1);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .play-button::after {
            content: '';
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 20px solid white;
            margin-left: 5px;
        }


        .app-testimonials {
            padding: 60px 0;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

        .testimonial-card {
            background-color: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .testimonial-text {
            color: var(--light-text);
            margin-bottom: 20px;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }

        .author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .author-info {
            font-weight: 600;
        }

        /* 新增FAQ部分样式 */
        .app-faq {
            padding: 60px 0;
            background-color: white;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .faq-question {
            background-color: var(--background-color);
            padding: 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        }

        .faq-question:hover {
            background-color: rgba(255, 107, 107, 0.05);
        }

        .faq-question h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
        }

        .faq-question i {
            color: var(--primary-color);
            transition: transform 0.3s ease;
        }

        .faq-answer {
            background-color: white;
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .faq-answer p {
            padding: 20px 0;
            color: var(--light-text);
        }

        .faq-item.active .faq-question {
            background-color: rgba(255, 107, 107, 0.1);
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

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

        .app-download {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
            margin-top: 60px;
        }

        .download-title {
            font-size: 2rem;
            margin-bottom: 30px;
        }

        .download-subtitle {
            font-size: 1.2rem;
            margin-bottom: 40px;
            max-width: 600px;
            margin: 0 auto 40px;
        }

        .app-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .stat-item {
            padding: 20px;
            text-align: center;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 768px) {
            .menu-btn {
                display: block;
            }

            .nav-menu {
                display: none;
            }

            .mobile-menu {
                display: none;
                position: static;
                box-shadow: none;
                border-top: 1px solid #f0f0f0;
            }

            .app-title {
                font-size: 2rem;
            }

            .app-subtitle {
                font-size: 1rem;
            }

            .app-badge {
                width: 140px;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .feature-grid,
            .testimonial-grid,
            .screenshot-grid {
                grid-template-columns: 1fr;
            }

            .download-title {
                font-size: 1.8rem;
            }

            .download-subtitle {
                font-size: 1rem;
            }

            .stat-number {
                font-size: 2rem;
            }
        }

        footer {
            background-color: var(--text-color);
            color: white;
            padding: 60px 0;
        }

        .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 img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .footer-logo span {
            font-size: 1.2rem;
            font-weight: bold;
        }

        .footer-text {
            color: #999;
            font-size: 0.9rem;
        }

        .footer-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin: 10px 0 20px 0;
            color: white;
        }

        .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: 0.8rem;
            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-color);
        }

        .footer-social img {
            width: 20px;
        }
    </style>

    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Is Art Color really free?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes! Art Color is completely free to download and use. There are no hidden costs or subscriptions required. You can color as many pictures as you like without any limitations."
      }
    },
    {
      "@type": "Question",
      "name": "Do I need an internet connection to use the app?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "You need an internet connection to download the app and access new coloring pages. However, once you've downloaded a coloring page, you can color it offline anytime without an internet connection."
      }
    },
    {
      "@type": "Question",
      "name": "How often are new coloring pages added?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We add new coloring pages to our gallery every day! Our team works hard to create a wide variety of designs across different themes to keep our users inspired and engaged."
      }
    },
    {
      "@type": "Question",
      "name": "Can I share my colored pictures with friends?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Absolutely! You can easily share your completed artwork with friends and family through social media platforms, messaging apps, or email directly from the app. Your creations also save to your device's photo gallery."
      }
    },
    {
      "@type": "Question",
      "name": "Is Art Color suitable for kids?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes! Our app is designed to be kid-friendly and is a great way for children to learn about colors, numbers, and develop their creativity. We have many coloring pages specifically designed for children of all ages."
      }
    },
    {
      "@type": "Question",
      "name": "How do I download coloring pages for offline use?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Simply browse our gallery, find a coloring page you like, and tap the download icon. The page will be saved to your device, and you can access it anytime from your MyWorks section, even without an internet connection."
      }
    }
  ]
}
</script>

</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>
    <!-- APP 头部 -->
    <div class="app-header">
        <div class="container">
            <!-- APP 图标 -->
            <div class="app-icon">
                <img src="/assets/icon/logo_640x640.webp" alt="Art Color App Logo">
            </div>
            <h1 class="app-title">🎨 Art Color - Color by Number 🎨</h1>
            <div class="app-subtitle">
                is one of the best paint by number coloring book with various categories of coloring pages.
                Coloring Pages are update everyday, you can always find images suite to you.
                It is 💯 Free! We offer this free coloring book as a color therapy to release your stress.
                Share your artworks to your friends and color anytime & anywhere.
            </div>
            <div class="app-badge-container">
                <a href="itms-apps://itunes.apple.com/app/id1575480118" target="_blank" class="app-badge">
                    <img src="/assets/icon/icon-app-store.svg" alt="Download on the App Store" style="width:100%">
                </a>
                <a href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share"
                    target="_blank" class="app-badge">
                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play" style="width:100%">
                </a>
            </div>
        </div>
    </div>

    <!-- APP 特性 -->
    <div class="app-features container">
        <h2 class="section-title">Why Choose Our App?</h2>
        <div class="feature-grid">
            <!-- 特性1 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fa fa-paint-brush"></i>
                </div>
                <h3 class="feature-title">Great Coloring Experience</h3>
                <p class="feature-desc">Enjoy a smooth and intuitive coloring experience with our advanced number
                    coloring system.</p>
            </div>

            <!-- 特性2 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fa fa-image"></i>
                </div>
                <h3 class="feature-title">Massive HD Pictures</h3>
                <p class="feature-desc">Explore thousands of high-definition coloring pages across various themes and
                    categories.</p>
            </div>

            <!-- 特性3 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fa fa-refresh"></i>
                </div>
                <h3 class="feature-title">Daily Updated Gallery</h3>
                <p class="feature-desc">Our gallery is updated daily with new and exciting coloring pages to keep you
                    inspired.</p>
            </div>

            <!-- 特性4 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fa fa-share-alt"></i>
                </div>
                <h3 class="feature-title">Easy Sharing</h3>
                <p class="feature-desc">Share your masterpieces with friends and family directly from the app to social
                    media.</p>
            </div>

            <!-- 特性5 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fa fa-wifi"></i>
                </div>
                <h3 class="feature-title">Offline Coloring</h3>
                <p class="feature-desc">Download your favorite coloring pages and enjoy them offline anytime, anywhere.
                </p>
            </div>

            <!-- 特性6 -->
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fa fa-palette"></i>
                </div>
                <h3 class="feature-title">Free & Relaxing</h3>
                <p class="feature-desc">Completely free with no hidden costs. A great way to relax and reduce stress.
                </p>
            </div>
        </div>
    </div>

    <!-- APP 截图 -->
    <div class="app-screenshots">
        <div class="container">
            <h2 class="section-title">App Screenshots</h2>
            <div class="screenshot-grid">
                <div class="screenshot">
                    <img src="/assets/app/screenshot-1.webp" alt="App Screenshot 1">
                </div>
                <div class="screenshot">
                    <img src="/assets/app/screenshot-2.webp" alt="App Screenshot 2">
                </div>
                <div class="screenshot">
                    <img src="/assets/app/screenshot-3.webp" alt="App Screenshot 3">
                </div>
                <div class="screenshot">
                    <img src="/assets/app/screenshot-4.webp" alt="App Screenshot 4">
                </div>
            </div>
        </div>
    </div>

    <!-- 视频展示区域 -->
    <div class="app-video container">
        <h2 class="section-title">Watch Our App in Action</h2>
        <div class="video-container">
            <div class="video-wrapper" id="appVideo">
                <video muted playsinline>
                    <source src="/assets/video/paint-by-number.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="play-button"></div>
            </div>
        </div>
    </div>

    <!-- 用户评价 -->
    <div class="app-testimonials container">
        <h2 class="section-title">What Our Users Say</h2>
        <div class="testimonial-grid">
            <!-- 评价1 -->
            <div class="testimonial-card">
                <div class="testimonial-text">
                    "This app is amazing! The quality of the coloring pages is outstanding, and I love that new ones are
                    added daily. It's so relaxing after a long day at work."
                </div>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <img src="https://picsum.photos/100/100?random=20" alt="User Avatar">
                    </div>
                    <div class="author-info">Sarah Johnson</div>
                </div>
            </div>

            <!-- 评价2 -->
            <div class="testimonial-card">
                <div class="testimonial-text">
                    "My kids absolutely love this app! The offline feature is perfect for long car rides, and they've
                    learned so much about colors and numbers while having fun."
                </div>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <img src="https://picsum.photos/100/100?random=21" alt="User Avatar">
                    </div>
                    <div class="author-info">Michael Chen</div>
                </div>
            </div>

            <!-- 评价3 -->
            <div class="testimonial-card">
                <div class="testimonial-text">
                    "I've tried many coloring apps, but this one is by far the best. The interface is intuitive, the
                    colors are vibrant, and sharing my artwork is so easy!"
                </div>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <img src="https://picsum.photos/100/100?random=22" alt="User Avatar">
                    </div>
                    <div class="author-info">Emma Rodriguez</div>
                </div>
            </div>
        </div>
    </div>


    <!-- FAQ -->
    <div class="app-faq">
        <div class="container">
            <h2 class="section-title">Frequently Asked Questions</h2>
            <div class="faq-container">
                <div class="faq-item" onclick="toggleFaq(this)">
                    <div class="faq-question">
                        <h3>Is Art Color really free?</h3>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes! Art Color is completely free to download and use. There are no hidden costs or
                            subscriptions required. You can color as many pictures as you like without any limitations.
                        </p>
                    </div>
                </div>

                <div class="faq-item" onclick="toggleFaq(this)">
                    <div class="faq-question">
                        <h3>Do I need an internet connection to use the app?</h3>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>You need an internet connection to download the app and access new coloring pages. However,
                            once you've downloaded a coloring page, you can color it offline anytime without an internet
                            connection.</p>
                    </div>
                </div>

                <div class="faq-item" onclick="toggleFaq(this)">
                    <div class="faq-question">
                        <h3>How often are new coloring pages added?</h3>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>We add new coloring pages to our gallery every day! Our team works hard to create a wide
                            variety of designs across different themes to keep our users inspired and engaged.</p>
                    </div>
                </div>

                <div class="faq-item" onclick="toggleFaq(this)">
                    <div class="faq-question">
                        <h3>Can I share my colored pictures with friends?</h3>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Absolutely! You can easily share your completed artwork with friends and family through
                            social media platforms, messaging apps, or email directly from the app. Your creations also
                            save to your device's photo gallery.</p>
                    </div>
                </div>

                <div class="faq-item" onclick="toggleFaq(this)">
                    <div class="faq-question">
                        <h3>Is Art Color suitable for kids?</h3>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Yes! Our app is designed to be kid-friendly and is a great way for children to learn about
                            colors, numbers, and develop their creativity. We have many coloring pages specifically
                            designed for children of all ages.</p>
                    </div>
                </div>

                <div class="faq-item" onclick="toggleFaq(this)">
                    <div class="faq-question">
                        <h3>How do I download coloring pages for offline use?</h3>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                    <div class="faq-answer">
                        <p>Simply browse our gallery, find a coloring page you like, and tap the download icon. The page
                            will be saved to your device, and you can access it anytime from your "My Downloads"
                            section, even without an internet connection.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 下载区域 -->
    <div class="app-download">
        <div class="container">
            <h2 class="download-title">Download Art Color Today!</h2>
            <p class="download-subtitle">Join thousands of happy users who have discovered the joy of coloring with
                numbers.</p>

            <div class="app-stats">
                <div class="stat-item">
                    <div class="stat-number">1000K+</div>
                    <div class="stat-label">Downloads</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">4.8</div>
                    <div class="stat-label">Average Rating</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">20K+</div>
                    <div class="stat-label">Coloring Pages</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">100+</div>
                    <div class="stat-label">Countries</div>
                </div>
            </div>

            <div class="app-badge-container">
                <a href="itms-apps://itunes.apple.com/app/id1575480118" target="_blank" class="app-badge">
                    <img src="/assets/icon/icon-app-store.svg" alt="Download on the App Store" style="width:100%">
                </a>
                <a href="https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share"
                    target="_blank" class="app-badge">
                    <img src="/assets/icon/icon-google-play.svg" alt="Get it on Google Play" style="width:100%">
                </a>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <%- include('footer') %>
        <!-- <script src="/scripts/script.js"></script> -->

        <!-- 字体图标库 -->
        <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <script>
            // 视频播放控制
            const videoWrapper = document.getElementById('appVideo');
            const video = videoWrapper.querySelector('video');
            const playButton = videoWrapper.querySelector('.play-button');

            videoWrapper.addEventListener('click', () => {
                if (video.paused) {
                    video.play();
                    playButton.style.display = 'none';
                } else {
                    video.pause();
                    playButton.style.display = 'flex';
                }
            });

            // 视频结束时显示播放按钮
            video.addEventListener('ended', () => {
                playButton.style.display = 'flex';
            });


            // FAQ 折叠面板控制
            function toggleFaq(item) {
                const isActive = item.classList.contains('active');

                // 关闭所有FAQ项
                document.querySelectorAll('.faq-item').forEach(el => {
                    el.classList.remove('active');
                });

                // 切换当前FAQ项
                if (!isActive) {
                    item.classList.add('active');
                }
            }
        </script>
</body>

</html>