guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289
							<!DOCTYPE html>
<html lang="<%= lang %>">

<head>
    <%- include('common-meta') %>
    <meta property="og:image" content="<%= imageUrl %>" />

    <link rel="stylesheet" href="/stylesheets/styles.css">
    <link rel="stylesheet" href="/stylesheets/header.css">
    <link rel="stylesheet" href="/stylesheets/detail.css">

    <script type="text/javascript"
        src="https://platform-api.sharethis.com/js/sharethis.js#property=67e0d66a54a3d000192a4615&product=inline-share-buttons&source=platform"
        async="async"></script>

    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "CreativeWork",
        "name": "<%= translate.printableColoringPage[lang] %>: <%= detail.title %>",
        "description": "<%= detail.desc %>",
        "url": "https://art.pcoloring.com<%= uri %>",
        "image": "<%= detail.thumb %>",
        "category": "<%= detail.tags[0] %>",
        "keywords": "coloring page, <%= detail.title %>, color by number, paint by number, free, printable,  <%= detail.tags.join() %>",
        "contentRating": "General Audience",
        "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
        "publisher": {
            "@type": "Organization",
            "name": "JCCY",
            "logo": {
                "@type": "ImageObject",
                "url": "https://art.pcoloring.com/assets/icon/icon.webp"
            }
        },
        "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "0.00",
            "eligibleRegion": {
            "@type": "Place",
            "name": "Worldwide"
            },
            "url": "https://art.pcoloring.com<%= uri %>"
        },
        "author": {
            "@type": "Person",
            "name": "<%= detail.user.username %>"
        },
        "datePublished": "<%= detail.publishTime %>"
    }
    </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>
    <%- include('header') %>
        <div class="details">
            <div id="poster" class="poster" data-content-id="<%= detail._id %>"><img src="<%= detail.thumb %>"
                    alt="<%= detail.title %>"></div>
            <div class="description">
                <div style="display: flex; justify-content: space-between;">
                    <h1>
                        <%= detail.title %>
                    </h1>
                    <div class="sharethis-inline-share-buttons"></div>
                </div>
                <% if (detail.totalStartCount> 0) { %>
                    <div style="color:gray;">
                        <%=detail.totalStartCount%>
                            <%= translate.interested[lang] %>
                    </div>
                    <% } %>
                        <p>
                            <%= translate.artist[lang] %>: <a href="/<%= lang %>/artist/<%= detail.user._id %>"
                                    class="tag-button">
                                    <%= detail.user.username %>
                                </a>
                        </p>
                        <p>
                            <%= translate.publishTime[lang] %>: <%= detail.publishTime %>
                        </p>
                        <p>
                            <%= translate.tag[lang] %>:
                                <% detail.tags.forEach(tag=> { %>
                                    <a href="/<%= lang %>/tag/<%= tag %>" class="tag-button">
                                        <%= tag %>
                                    </a>
                                    <% }); %>
                        </p>
                        <p>
                            <%= detail.copy ?? detail.desc %>
                        </p>
                        <div class="button-wrapper">
                            <a id="playBtn" href="/play/<%= detail._id %>" class="play-button">
                                <%= translate.play[lang] %>
                            </a>
                            <a id="continueBtn" href="/play/<%= detail._id %>" class="play-button"
                                style="display: none;">
                                <%= translate.continuex[lang] %>
                            </a>
                            <a id="repaintBtn" onclick="onRepaint('<%= detail._id %>')" class="play-button"
                                style="display: none;">
                                <%= translate.repaint[lang] %>
                            </a>
                            <a id="reviewBtn" href="/play/<%= detail._id %>" class="play-button"
                                style="background-color: orange; display: none;">
                                <%= translate.view[lang] %>
                            </a>
                            <a id="appBtn" class="play-button" style="background-color: darkolivegreen;">
                                <%= translate.playOnApp[lang] %>
                            </a>
                            <a href="/download/pdf/page/<%= detail._id %>" class="play-button"
                                style="background-color: lightseagreen;">
                                <%= translate.download[lang] %>
                            </a>
                            <a id="printBtn" onclick="printImage('<%= detail._id %>')" class="play-button"
                                style="background-color: black;">
                                <%= translate.print[lang] %>
                            </a>
                            <a id="deleteBtn" onclick="onDelete('<%= detail._id %>')" class="play-button"
                                style="background-color: grey; display: none;">
                                <%= translate.deletex[lang] %>
                            </a>
                        </div>
            </div>
        </div>

        <p style=" display: flex; justify-content: center; color: #777; font-size: 18px; font-weight: 500;">
            <%= translate.mayYouLike[lang] %>:
        </p>

        <div class="content" style="margin-bottom: 40px;">
            <div class="image-grid">
                <% relates.forEach(item=> { %>
                    <div data-content-id="<%= item._id %>" class="image-card">
                        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
                        <div class="card-title">
                            <%= item.title %>
                        </div>
                    </div>
                    <% }); %>
            </div>
        </div>

        <!-- <%- include('pagination') %> -->


        <script>
            // 重新进入或返回，强制刷新
            window.addEventListener('pageshow', function (event) {
                if (event.persisted) {
                    window.location.reload();
                }
            });

            function isMobileDevice() {
                return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
            }

            window.onload = function () {
                if (isMobileDevice()) {
                    const printBtn = document.getElementById('printBtn');
                    printBtn.style.display = 'none'; // 移动端隐藏打印按钮
                }
            };

            document.getElementById('appBtn').addEventListener('click', function () {
                const userAgent = navigator.userAgent || navigator.vendor || window.opera;

                // Android 检测
                if (/android/i.test(userAgent)) {
                    window.open('https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number', '_blank');
                }
                // iOS 检测
                else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
                    window.open('https://apps.apple.com/gb/app/art-number-coloring-book/id1575480118', '_blank');
                }
                // 其他操作系统（例如桌面）
                else {
                    // 可以显示一个提示，或者跳转到通用的下载页面
                    console.log('无法确定操作系统，或者为桌面操作系统');
                    window.open('https://pcoloring.com/anc/', '_blank');
                }
            });

            async function printImage(id) {
                try {
                    const response = await fetch(`/download/pdf/page/${id}`);

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const pdfBlob = await response.blob();
                    const pdfUrl = URL.createObjectURL(pdfBlob);

                    const printWindow = window.open(pdfUrl, '_blank');
                    printWindow.onload = () => {
                        printWindow.print();
                    };

                    URL.revokeObjectURL(pdfUrl); // 释放 URL 对象
                } catch (error) {
                    console.error('Error printing image:', error);
                }
            }

            function onDelete(id) {
                if (confirm('确定要删除游戏进度吗？')) {
                    // 删除本地存储
                    localStorage.removeItem(id);

                    const METADATA_KEY = '__storage_metadata__';
                    const metadata = JSON.parse(localStorage.getItem(METADATA_KEY) || '{}');
                    delete metadata[id];
                    localStorage.setItem(METADATA_KEY, JSON.stringify(metadata));
                    location.reload(); // 刷新页面恢复初始状态
                }
            }

            function onRepaint(id) {
                // 删除本地存储
                localStorage.removeItem(id);

                const METADATA_KEY = '__storage_metadata__';
                const metadata = JSON.parse(localStorage.getItem(METADATA_KEY) || '{}');
                delete metadata[id];
                localStorage.setItem(METADATA_KEY, JSON.stringify(metadata));

                window.open(`/play/${id}`, '_self');
            }

            // 页面加载完成后执行
            document.addEventListener('DOMContentLoaded', () => {
                const METADATA_KEY = '__storage_metadata__';

                const container = document.getElementById('poster');
                const contentId = container.dataset.contentId;

                // 获取本地存储数据
                const metaData = JSON.parse(localStorage.getItem(METADATA_KEY)) || {};

                if (metaData[contentId]) {
                    const progress = Math.round(metaData[contentId].progress);
                    // 创建进度角标
                    const badge = document.createElement('div');
                    badge.className = 'progress-badge';
                    badge.innerHTML = `<span>${progress >= 100 ? '✓' : progress + '%'}</span>`;
                    badge.style.backgroundColor = progress >= 100 ? '#4CAF50' : '#FF5252';
                    // 添加渐变动画
                    badge.style.transition = 'background-color 0.3s ease';
                    // 插入到缩略图容器内
                    container.appendChild(badge);

                    // 添加删除按钮
                    const deleteBtn = document.getElementById('deleteBtn');
                    deleteBtn.style.display = 'block';

                    // 开始填色按钮便成继续填色或重新填色
                    const playBtn = document.getElementById('playBtn');
                    const continueBtn = document.getElementById('continueBtn');
                    const repaintBtn = document.getElementById('repaintBtn');
                    const reviewBtn = document.getElementById('reviewBtn');
                    playBtn.style.display = 'none';
                    if (progress < 100) {
                        continueBtn.style.display = 'block';
                    } else {
                        repaintBtn.style.display = 'block';
                        reviewBtn.style.display = 'block';

                        const img = document.querySelector('#poster img');
                        img.src = img.src.replace('/page/', '/work/');
                    }
                }
            });
        </script>
        <script src="/scripts/progress.js"></script>
</body>

</html>