guoziyun
/
artsite


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

<head>
  <%- include('common-meta') %>
    <link rel="stylesheet" href="/stylesheets/styles.css">
    <link rel="stylesheet" href="/stylesheets/header.css">
    <link rel="stylesheet" href="/stylesheets/myworks.css">
</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="tab-container">
      <!-- 标签导航 -->
      <nav class="tab-nav">
        <button class="tab-button active" data-tab="ongoing"><%= translate.inProgress[lang] %></button>
        <button class="tab-button" data-tab="completed"><%= translate.completed[lang] %></button>
        <button class="tab-button" data-tab="favorite"><%= translate.favorite[lang] %></button>
      </nav>

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

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

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

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

      // 标签切换功能
      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: `/${lang}/coloring-page/${id}`,
          thumbnail: `${host}/thumbs/coloring-page/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 = 'image-card';
          card.innerHTML = `
                    <a href="${item.uri}"><img src="${item.thumbnail}"></a>
                `;
          if (item.progress) {
            card.innerHTML += `
                <div class="progress-badge" style="background-color: ${item.progress >= 100 ? '#4CAF50' : '#FF5252'}; transition: background-color 0.3s ease; ">
                  <span>${item.progress >= 100 ? '✓' : item.progress + '%'}</span>
                </div>
            `
          }
          container.appendChild(card);
        });
      };


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

    </script>
</body>

</html>