guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!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>My Coloring Page Works | Art Color</title>
  <meta name="description"
    content="Explore our massive collection of over 20,000 free coloring pages! Find endless printable designs from animals to mandalas, cartoons, and more. Perfect for kids and adults – start your creative journey today!">
  <link rel="stylesheet" href="/stylesheets/v2/styles.css">
  <style>
    /* 标签导航样式 */
    .tab-nav {
      display: flex;
      border-bottom: 2px solid #eee;
    }

    .tab-button {
      padding: 1rem 2rem;
      border: none;
      background: none;
      cursor: pointer;
      font-size: 1.2rem;
      color: var(--text-color);
      transition: all 0.3s ease;
      position: relative;
    }

    .tab-button.active {
      color: var(--secondary-color);
      font-weight: 600;
    }

    .tab-button.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--secondary-color);
    }

    /* 内容区域样式 */
    .tab-content {
      display: none;
    }

    .tab-content.active {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 响应式设计, 如果是手机屏幕 */
    @media (max-width: 768px) {
      .tab-button {
        font-size: 1.0rem;
        padding: 1rem 1rem;
      }
    }
  </style>
</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>
        <!-- 标签导航 -->
        <nav class="tab-nav">
          <button class="tab-button active" data-tab="ongoing">In Progress</button>
          <button class="tab-button" data-tab="completed">Completed</button>
          <button class="tab-button" data-tab="favorite">Favorite</button>
        </nav>

        <!-- 进行中内容 -->
        <div id="ongoing" class="tab-content active">
          <div class="coloring-grid">
          </div>
        </div>

        <!-- 已完成内容 -->
        <div id="completed" class="tab-content">
          <div class="coloring-grid">
          </div>
        </div>

        <!-- 收藏内容 -->
        <div id="favorite" class="tab-content">
          <div class="coloring-grid">
          </div>
        </div>
      </section>
    </main>

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

    <script>
      const host = '<%= host %>';

      // 标签切换功能
      const tabButtons = document.querySelectorAll('.tab-button');
      const tabContents = document.querySelectorAll('.tab-content');

      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          const targetTab = button.dataset.tab;

          // 移除所有激活状态
          tabButtons.forEach(btn => btn.classList.remove('active'));
          tabContents.forEach(content => content.classList.remove('active'));

          // 添加当前激活状态
          button.classList.add('active');
          document.getElementById(targetTab).classList.add('active');
        });
      });


      // 加载
      const loadWorks = (tabType) => {
        let data = {};
        if (tabType === 'favorite') {
          const raw = localStorage.getItem('_storage_collection__') || '{}';
          data = JSON.parse(raw);
        } else {
          const rawMeta = localStorage.getItem('__storage_metadata__') || '{}';
          const metaData = JSON.parse(rawMeta);
          data = Object.entries(metaData).filter(([_, item]) =>
            tabType === 'ongoing' ? item.progress < 100 : item.progress >= 100
          ).reduce((acc, [id, item]) => ({ ...acc, [id]: item }), {});
        }

        return Object.entries(data).map(([id, item]) => ({
          id,
          uri: `/coloring-page/${id}`,
          thumbnail: `${host}/thumbs/coloring-page/${item.progress >= 100 ? 'work' : 'page'}/480/${id}.png`, // 缩略图拼接规则‌:ml-citation{ref="7" data="citationList"}
          progress: item.progress,
          timestamp: item.timestamp
        })).sort((a, b) => b.timestamp - a.timestamp); // 时间倒序排列
      };


      // 动态渲染
      const renderWorks = (container, items) => {
        container.innerHTML = '';
        items.forEach(item => {
          const card = document.createElement('div');
          card.className = 'coloring-card';
          card.innerHTML = `
          <div data-content-id="${item.id}" class="coloring-image">
            <a href="${item.uri}"><img src="${item.thumbnail}"></a>
            <div class="progress-badge" style="background-color: ${item.progress >= 100 ? 'var(--secondary-color)' : 'var(--primary-color)'}; transition: background-color 0.3s ease; ">
              <span>${item.progress >= 100 ? '✓' : item.progress + '%'}</span>
            </div>
          </div>
          `;

          container.appendChild(card);
        });
      };


      document.querySelectorAll('.tab-content').forEach(container => {
        const tabType = container.id;
        const works = loadWorks(tabType);
        const grid = container.querySelector('.coloring-grid');
        renderWorks(grid, works);
      });

    </script>
</body>

</html>