guoziyun
/
artsite


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/assets/icon/favicon.ico" type="image/x-icon">
  <title>
    <%= title %>
  </title>
  <meta name="description" content="<%= description %>">
  <meta property="og:title" content="<%= title %>">
  <meta property="og:description" content="<%= description %>">

  <meta name="apple-itunes-app" content="app-id=1575480118, app-argument=https://art.pcoloring.com/play/<%= detail._id %>">

  <link rel="stylesheet" href="/stylesheets/v2/styles.css">
  <style>
    h1 {
      text-align: start;
    }

    .buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      align-items: center;
    }

    .btn {
      display: inline-block;
      flex: 1 0 auto;
      /* 允许伸缩，不收缩，基础尺寸自适应 */
      min-width: max-content;
      /* 最小宽度由内容决定 */
      white-space: nowrap;
      /* 禁止按钮文字换行 */
      padding: 10px 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      background-color: var(--primary-color);
      color: white;
      text-align: center;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      border: none;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .btn:hover {
      transform: translateY(-5px);
      opacity: 0.85;
    }

    .tag {
      display: inline-block;
      background-color: var(--background-color);
      color: var(--light-text);
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 0.9rem;
      margin-right: 10px;
      margin-bottom: 10px;
      transition: background-color 0.3s ease;
    }

    .tag:hover {
      background-color: var(--border-color);
    }

    .poster {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      text-align: center;
    }

    .poster img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      display: block;
      margin: 0 auto;
    }

    .creator-info {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }

    .creator-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      /* background-color: var(--secondary-color); */
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      margin-right: 15px;
    }

    .creator-name {
      font-weight: 600;
    }

    .creator-date {
      color: var(--light-text);
      font-size: 0.9rem;
    }

    .collection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
    }

    .collection-card {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease;
      text-decoration: none;
      display: block;
    }

    .collection-card:hover {
      transform: translateY(-8px);
    }

    .collection-image {
      height: 180px;
      background-color: #f0f0f0;
      overflow: hidden;
    }

    .collection-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .collection-card:hover .collection-image img {
      transform: scale(1.05);
    }

    .collection-info {
      padding: 18px;
    }

    .collection-title {
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: 10px;
      color: var(--primary-color);
    }

    .collection-desc {
      color: var(--light-text);
      font-size: 0.9rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }


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

      h2 {
        font-size: 1.5rem;
      }

      h3 {
        font-size: 1.3rem;
      }

      section {
        padding: 20px;
      }

      .btn {
        width: 90%;
        text-align: center;
      }

      .coloring-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
      }

      .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
      }
    }
  </style>

  <script type='text/javascript'
    src='https://platform-api.sharethis.com/js/sharethis.js#property=685036ce6c1ae8001abaded7&product=sop'
    async='async'></script>
  <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "CreativeWork",
        "name": "Free Printable Coloring Page: <%= 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": "Art Number Coloring",
            "logo": {
              "@type": "ImageObject",
              "url": "https://art.pcoloring.com/assets/icon/icon.webp",
              "width": 180,
              "height": 180
            }
        },
        "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') %>

    <main class="container">
      <section>
        <h1>
          <%= detail.title %>
        </h1>
        <p class="text-light">
          <% if (detail.totalStartCount> 0) { %> <%=detail.totalStartCount%> people have participated in coloring this
              work, and <%=detail.totalDoneCount%> have completed it. Come and take on the challenge! <% } %>
        </p>
        <h3 id="status" data-content-id="<%= detail._id %>" style="display: none;">You have completed 50%—keep going and finish it!</h3>
        <div class="creator-info">
          <div class="creator-avatar">
            <a href="/coloring-page-gallery?author=<%= detail.user.username %>"><img src="<%= detail.user.avatar %>" width="100%", height="100%", style="border-radius: 50%;"></a>
          </div>
          <div>
            <div class="creator-name">
              <a href="/coloring-page-gallery?author=<%= detail.user.username %>" style="color: var(--secondary-color)"><%= detail.user.username %></a>
            </div>
            <div class="creator-date">Published on <%= detail.publishTime %>
            </div>
          </div>
        </div>

        <div class="tags">
          <% detail.tags.forEach(tag=> { %>
            <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag"><%= tag %></span></a>
            <% }); %>
        </div>

        <div id="poster" class="poster" data-content-id="<%= detail._id %>">
          <img src="<%= detail.poster %>" alt="<%= detail.title %>">
        </div>

        <div class="buttons">
          <a id="playBtn" href="/play/<%= detail._id %>" class="btn">Paint Now!</a>
          <a id="continueBtn" href="/play/<%= detail._id %>" class="btn" style="display: none;">Continue</a>
          <a id="repaintBtn" onclick="onRepaint('<%= detail._id %>')" class="btn" style="display: none;">Repaint</a>
          <a id="reviewBtn" href="/play/<%= detail._id %>" class="btn"
            style="background-color: orange; display: none;">Review</a>
          <a id="appBtn" class="btn" style="background-color: darkolivegreen;">Paint on APP</a>
          <a href="/download/pdf/page/<%= detail._id %>" class="btn"
            style="background-color: lightseagreen;">Download</a>
          <a id="printBtn" onclick="printImage('<%= detail._id %>')" class="btn"
            style="background-color: black;">Print</a>
          <a id="deleteBtn" onclick="onDelete('<%= detail._id %>')" class="btn"
            style="background-color: grey; display: none;">Delete</a>
        </div>

        <h2>About This Coloring Page</h2>
        <p>
          <%= detail.desc %>
        </p>
        <p>You can <strong>download it in High-definition PDF format, print it</strong>, or choose to <strong>color online (using our app or directly in a
          browser)</strong>—completely free of charge.</p>
        <p>Coloring this page can help reduce stress, improve focus, and allow you to express your artistic side.
          Whether
          you prefer traditional coloring tools or digital methods, this design will look stunning when complete.</p>
        <p>After coloring, you can share your creation with our community or use it as decorative art for your home or
          workspace. Enjoy the therapeutic benefits of coloring with this beautiful coloring page</p>

      </section>

      <section>
        <h2>You May Also Like</h2>
        <div class="coloring-grid">
          <% relates.forEach(item=> { %>
            <div class="coloring-card">
              <div data-content-id="<%= item._id %>" class="coloring-image">
                <a href="<%= item.uri %>"><img src="<%= item.thumb %>" loading="lazy" alt="<%= item.title %>"></a>
              </div>
              <div class="coloring-content">
                <div class="coloring-title">
                  <%= item.title %>
                </div>
              </div>
            </div>
            <% }); %>

        </div>
      </section>


      <section>
        <h2>Browse More Coloring Collections</h2>
        <div class="collection-grid">
          <% collections.forEach(item=> { %>
          <a href="<%= item.uri %>" class="collection-card">
              <div class="collection-image">
                  <img src="<%= item.image %>" alt="<%= item.title %>">
              </div>
              <div class="collection-info">
                  <div class="collection-title"><%= item.title %></div>
                  <p class="collection-desc"><%= item.description %></p>
              </div>
          </a>
          <% }); %>
        </div>
      </section>

      <%- include('comment') %>
    </main>

    <%- include('footer') %>

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

    <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'; // 移动端隐藏打印按钮
        }
      };

      function jumpToAppDownload() {
        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');
        }
      }

      
      document.getElementById('appBtn').addEventListener('click', function () {
        jumpToAppDownload()
      });
      

      /*
      document.addEventListener('DOMContentLoaded', function() {
        const contentId = document.getElementById('status').dataset.contentId; // 获取当前填色页的ID
        const appScheme = `artcoloringapp://play/${contentId}`; // 自定义 URI Scheme (备用方案)
        const universalLink = window.location.href; // Universal Link / Android App Link 就是当前页面的URL

        // 尝试拉起App的函数
        function tryOpenApp() {
            // 尝试使用 Universal Link / Android App Link
            // 浏览器会自动尝试处理这些链接，如果配置正确，App会直接打开
            // 对于 iOS Safari，如果配置了Universal Links，直接点击分享链接就会拉起App
            // 对于 Android Chrome，如果配置了App Links，直接点击分享链接也会拉起App

            // 处理用户点击页面内按钮的情况，或作为回退机制
            setTimeout(function() {
                // 如果App没有被拉起 (例如，App未安装或Universal Link/App Link未生效)
                // 此时可以判断是否需要跳转到App Store/Google Play
                if (!document.hidden) { // 检查页面是否仍然可见，表示App未被拉起
                    console.log("App not opened, redirecting to store or showing smart banner.");
                    jumpToAppDownload();
                    // 在这里可以实现 Deferred Deep Link 逻辑
                    // 1. 显示一个智能 App 横幅 (Smart App Banner) 引导用户下载
                    // 2. 直接重定向到App Store/Google Play
                    // 例如:
                    // window.location.href = "https://your-app-store-link.com";
                }
            }, 1500); // 给浏览器足够的时间尝试拉起App
        }

        // 绑定到“Paint on APP”按钮
        const appBtn = document.getElementById('appBtn');
        if (appBtn) {
            appBtn.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止默认的链接跳转行为
                window.location.href = appScheme; // 优先尝试自定义 Scheme（在某些旧版系统或浏览器中可能有效）
                tryOpenApp(); // 之后尝试Universal Link/App Link的逻辑
            });
        }

        // **对于社交媒体分享的场景：**
        // Universal Links / Android App Links 的核心在于，当用户点击一个指向您网站的链接时，
        // 操作系统（而不是浏览器）会首先判断是否有匹配的已安装 App。
        // 如果有，就直接打开 App 并传递链接参数；如果没有，才会在浏览器中打开网页。
        // 这意味着，您不需要在页面加载时自动执行 JavaScript 来“拉起”App，
        // 而是依赖操作系统本身的机制。
        //
        // 但是，您可以在页面加载时，根据需要添加一个智能横幅或提示。
        //
        // 智能横幅示例 (iOS Safari):
        // <meta name="apple-itunes-app" content="app-id=YOUR_APP_STORE_ID, app-argument=https://art.pcoloring.com/play/63071db0b4aa5241f192c4c0">
        //
        // Android Chrome 的 App Install Banner 会自动处理。

    });
    */


      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('status');
        const contentId = container.dataset.contentId;

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

        if (metaData[contentId]) {
          const progress = Math.round(metaData[contentId].progress);
          if (progress < 100) {
            container.innerHTML = `You have completed ${progress}%—keep going and finish it!`;
          } else {
            container.innerHTML = `You have completed 100%, Good Job!`;
            container.style  = `color: var(--secondary-color)`
          }
          
          container.style.display = "block";

          // 添加删除按钮
          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>

</body>

</html>