guoziyun
/
artsite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842
							<!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>
    <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;
        }

        .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-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 {
            width: 160px;
            height: auto;
            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 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            /* 初始隐藏视频，加载完成后显示 */
            transition: opacity 0.3s ease;
        }

        .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;
        }

        /* 视频加载指示器 */
        .video-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1.2rem;
            z-index: 5;
        }

        /* 视频加载失败提示 */
        .video-error {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1rem;
            text-align: center;
            padding: 10px;
            display: none;
            z-index: 5;
        }

        .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);
        }

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

        .footer-content {
            max-width: 600px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .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;
            }

            .video-container {
                max-width: 250px;
            }
        }
    </style>
</head>

<body>
    <!-- APP 头部 -->
    <div class="app-header">
        <div class="container">
            <div class="app-title">🎨 Art Color - Color by Number 🎨</div>
            <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="#" class="app-badge">
                    <img src="https://picsum.photos/200/60?random=1" alt="Download on the App Store" style="width:100%">
                </a>
                <a href="#" class="app-badge">
                    <img src="https://picsum.photos/200/60?random=2" 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="https://picsum.photos/600/1200?random=10" alt="App Screenshot 1">
                </div>
                <div class="screenshot">
                    <img src="https://picsum.photos/600/1200?random=11" alt="App Screenshot 2">
                </div>
                <div class="screenshot">
                    <img src="https://picsum.photos/600/1200?random=12" alt="App Screenshot 3">
                </div>
                <div class="screenshot">
                    <img src="https://picsum.photos/600/1200?random=13" 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">
                <video id="appVideo" poster="https://picsum.photos/300/533?random=50" muted playsinline>
                    <source src="https://example.com/app-demo.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="play-button" onclick="toggleVideo()"></div>
                <div class="video-loading">
                    <i class="fa fa-circle-o-notch fa-spin"></i> Loading...
                </div>
                <div class="video-error">
                    <p>Failed to load video</p>
                    <p>Please check your connection</p>
                </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">100K+</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">5K+</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="#" class="app-badge">
                    <img src="https://picsum.photos/200/60?random=3" alt="Download on the App Store" style="width:100%">
                </a>
                <a href="#" class="app-badge">
                    <img src="https://picsum.photos/200/60?random=4" alt="Get it on Google Play" style="width:100%">
                </a>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container footer-content">
            <p>Art Color - The Best Color by Number App</p>
            <p>© 2025 All Rights Reserved</p>
        </div>
    </footer>

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

    <script>
        // 视频控制
        const video = document.getElementById('appVideo');
        const playButton = document.querySelector('.play-button');
        const loadingIndicator = document.querySelector('.video-loading');
        const errorMessage = document.querySelector('.video-error');

        // 视频加载完成后显示
        video.addEventListener('loadeddata', function () {
            video.style.opacity = '1';
            loadingIndicator.style.display = 'none';
        });

        // 视频加载失败处理
        video.addEventListener('error', function () {
            loadingIndicator.style.display = 'none';
            errorMessage.style.display = 'block';
        });

        // 视频播放/暂停控制
        function toggleVideo() {
            if (video.paused) {
                video.play()
                    .then(() => {
                        playButton.style.display = 'none';
                    })
                    .catch(error => {
                        console.error('Error playing video:', error);
                        errorMessage.style.display = 'block';
                    });
            } else {
                video.pause();
                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>