guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596
							<!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 property="og:image" content="<%= detail.poster %>">
  <meta property="og:type" content="website">

  <!-- MARK: Universal Link / Android App Link 的核心配置 -->
  <!-- 这些 meta 标签的值应该是完整的 HTTPS 链接，Facebook 会识别并尝试拉起 App -->
  <meta property="og:url" content="<%= applink %>" />
  <!-- **Universal Link 路径** -->
  <meta property="al:ios:url" content="<%= applink %>" />
  <!-- **Universal Link 路径** -->
  <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
  <meta property="al:ios:app_name" content="Art Color Book" /> <!-- **iOS 应用名称** -->

  <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number.debug" /> <!-- **Android 包名** -->
  <meta property="al:android:url" content="<%= applink %>" />
  <!-- ** Universal Link 路径** -->
  <meta property="al:android:app_name" content="Art Color Book" /> <!-- **Android 应用名称** -->

  <meta name="apple-itunes-app" content="app-id=1575480118">

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

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

    .detail-tag:hover {
      background-color: var(--secondary-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 Color",
            "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>


  <!-- <script>
    const baseUniversalLink = 'https://art.pcoloring.com';
    const currentPageLink = baseUniversalLink + window.location.pathname + window.location.search;
    const appDeeplink = baseUniversalLink + window.location.pathname.replace('coloring-page', 'share') + window.location.search;

    const linkDownloadCommon = 'https://pcoloring.com/anc/'; // 通用下载页
    const linkDownloadAppStore = 'itms-apps://itunes.apple.com/app/id1575480118?utm_source=share'; // ios app下载链接
    const linkDownloadPlayMarket = 'https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&utm_source=share';  // android app 下载链接
    const ua = window.navigator.userAgent.toLowerCase();

    // 动态更新 Open Graph 和 App Links 的 URL 为 Universal Link
    document.querySelector('meta[property="og:url"]').content = currentPageLink;
    document.querySelector('meta[property="al:ios:url"]').content = currentPageLink;
    document.querySelector('meta[property="al:android:url"]').content = currentPageLink;

    function functionDownload() {
      if (ua.search("iphone") > -1 || ua.search("ipad") > -1 || ua.search("ipod") > -1) {
        // 对于 iOS 设备，尝试直接打开 Universal Link
        // 如果 Universal Link 配置正确，浏览器会尝试拉起 App
        // 否则会降级到网页或 App Store
        window.location.href = appDeeplink; // 尝试 Universal Link
        // 如果 Universal Link 失败，可以设置一个延时跳转到 App Store
        setTimeout(function () {
          window.location.href = linkDownloadAppStore;
        }, 250); // 250ms 延迟，给 Universal Link 尝试拉起 App 的时间
      } else if (ua.search("android") > -1) {
        // 对于 Android 设备，尝试直接打开 App Link
        window.location.href = appDeeplink; // 尝试 App Link
        setTimeout(function () {
          window.location.href = linkDownloadPlayMarket;
        }, 250); // 250ms 延迟
      } else {
        // 对于其他设备，直接跳转到 Android 下载链接（或通用下载页）
        window.location.href = linkDownloadCommon;
      }
    }

  </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="detail-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" href="<%= downlink %>" 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 class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>">
                    <%= item.user.username %>
                  </a></div>
                <div class="coloring-meta">
                  <div class="date">
                    <%= item.publishTime %>
                  </div>
                  <div class="views">
                    <%= item.totalStartCount %>
                  </div>
                </div>
                <div class="coloring-tags">
                  <% item.tags.forEach(tag=> { %>
                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>">
                        <%= tag %>
                      </span></a>
                    <% }); %>
                </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()
        // });


        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>