guoziyun
/
artsite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<!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 Number Coloring</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>