progress.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进度 - 词根词缀记忆工坊</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/minimal.css">
</head>
<body>

  <!-- 极简导航 -->
  <nav class="nav">
    <div class="nav-container">
      <a href="index.html" class="nav-logo">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
          <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
        </svg>
        词根词缀记忆工坊
      </a>
      <div class="nav-links">
        <a href="learn.html" class="nav-link">学习</a>
        <a href="flashcard.html" class="nav-link">闪卡</a>
        <a href="roots.html" class="nav-link">索引</a>
        <a href="progress.html" class="nav-link active">进度</a>
      </div>
    </div>
  </nav>

  <!-- 主内容 -->
  <main style="padding-top: 80px; min-height: 100vh;">
    <div class="container" style="padding-top: 48px; padding-bottom: 48px;">

      <h1 style="font-size: 3rem; font-weight: 700; text-align: center; margin-bottom: 48px; letter-spacing: -0.02em;">
        我的进度
      </h1>

      <!-- 统计卡片 -->
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 48px;">

        <!-- 已掌握词根 -->
        <div class="card" style="text-align: center;">
          <div style="font-size: 3rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px;">
            <span id="masteredDisplay">0</span><span style="font-size: 1.5rem; color: var(--color-text-secondary);">/300</span>
          </div>
          <div style="color: var(--color-text-secondary); font-size: 0.9375rem;">已掌握词根</div>
        </div>

        <!-- 当前等级 -->
        <div class="card" style="text-align: center;">
          <div style="font-size: 3rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px;" id="levelDisplay">
            Lv.1
          </div>
          <div style="color: var(--color-text-secondary); font-size: 0.9375rem;">当前等级</div>
        </div>

        <!-- 连续学习天数 -->
        <div class="card" style="text-align: center;">
          <div style="font-size: 3rem; font-weight: 700; color: var(--color-text); margin-bottom: 8px;" id="streakDisplay">
            0
          </div>
          <div style="color: var(--color-text-secondary); font-size: 0.9375rem;">连续学习天数</div>
        </div>
      </div>

      <!-- 进度条 -->
      <div class="card" style="margin-bottom: 48px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
          <h2 style="font-size: 1.125rem; font-weight: 600; margin: 0;">整体进度</h2>
          <span style="font-weight: 600;" id="progressPercentage">0%</span>
        </div>
        <div style="width: 100%; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; margin-bottom: 12px;">
          <div id="overallProgressBar" style="height: 100%; background: var(--color-accent); transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1); width: 0%;"></div>
        </div>
        <p style="font-size: 0.875rem; color: var(--color-text-secondary); margin: 0;">
          距离下一级还需掌握 <span id="toNextLevel" style="font-weight: 600; color: var(--color-text);">10</span> 个词根
        </p>
      </div>

      <!-- 成就墙 -->
      <div class="card" style="margin-bottom: 48px;">
        <h2 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 24px;">成就</h2>
        <div id="achievementsList" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
          <!-- 动态生成 -->
        </div>
        <div id="noAchievements" style="text-align: center; color: var(--color-text-secondary); padding: 48px 0; display: none;">
          还没有解锁任何成就，继续加油！
        </div>
      </div>

      <!-- 学习统计 -->
      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 48px;">

        <!-- 学习记录 -->
        <div class="card">
          <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 20px;">学习记录</h3>
          <div style="display: flex; flex-direction: column; gap: 16px;">
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--color-text-secondary);">上次学习</span>
              <span style="font-weight: 600;" id="lastStudyDate">-</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--color-text-secondary);">学习次数</span>
              <span style="font-weight: 600;" id="sessionCount">0</span>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span style="color: var(--color-text-secondary);">总积分</span>
              <span style="font-weight: 600; color: var(--color-accent);" id="totalScore">0</span>
            </div>
          </div>
        </div>

        <!-- 数据管理 -->
        <div class="card">
          <h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 20px;">数据管理</h3>
          <div style="display: flex; flex-direction: column; gap: 12px;">
            <button onclick="exportProgress()" class="btn" style="width: 100%; justify-content: flex-start;">
              导出学习数据
            </button>
            <button onclick="importProgress()" class="btn" style="width: 100%; justify-content: flex-start;">
              导入学习数据
            </button>
            <button onclick="confirmClearData()" class="btn" style="width: 100%; justify-content: flex-start; color: #DC2626; border-color: #FEE2E2;">
              清除所有数据
            </button>
          </div>
        </div>
      </div>

    </div>
  </main>

  <script src="js/storage.js"></script>
  <script src="js/wordData.js"></script>
  <script>
    // 进度页面逻辑
    document.addEventListener('DOMContentLoaded', () => {
      loadProgress();
    });

    function loadProgress() {
      const progress = StorageManager.getProgress();
      const achievements = StorageManager.getAchievements();

      // 已掌握词根
      const masteredCount = progress.masteredRoots.length;
      document.getElementById('masteredDisplay').textContent = masteredCount;

      // 当前等级
      const level = progress.level || 1;
      document.getElementById('levelDisplay').textContent = `Lv.${level}`;

      // 连续学习天数
      document.getElementById('streakDisplay').textContent = progress.studyStreak || 0;

      // 进度百分比
      const percentage = Math.floor((masteredCount / WordRoots.length) * 100);
      document.getElementById('progressPercentage').textContent = `${percentage}%`;
      document.getElementById('overallProgressBar').style.width = `${percentage}%`;

      // 距离下一级
      const nextLevelRequirement = level * 10;
      const toNextLevel = Math.max(0, nextLevelRequirement - masteredCount);
      document.getElementById('toNextLevel').textContent = toNextLevel;

      // 上次学习时间
      if (progress.lastStudyDate) {
        const lastDate = new Date(progress.lastStudyDate);
        const now = new Date();
        const diffDays = Math.floor((now - lastDate) / (1000 * 60 * 60 * 24));

        let dateText;
        if (diffDays === 0) {
          dateText = '今天';
        } else if (diffDays === 1) {
          dateText = '昨天';
        } else {
          dateText = `${diffDays} 天前`;
        }
        document.getElementById('lastStudyDate').textContent = dateText;
      } else {
        document.getElementById('lastStudyDate').textContent = '尚未学习';
      }

      // 学习次数和积分
      document.getElementById('sessionCount').textContent = progress.sessionCount || 0;
      document.getElementById('totalScore').textContent = progress.totalScore || 0;

      // 成就列表
      renderAchievements(achievements);
    }

    function renderAchievements(achievements) {
      const container = document.getElementById('achievementsList');
      const noAchievements = document.getElementById('noAchievements');

      if (!achievements || achievements.length === 0) {
        container.style.display = 'none';
        noAchievements.style.display = 'block';
        return;
      }

      container.style.display = 'grid';
      noAchievements.style.display = 'none';

      container.innerHTML = achievements.map(achievement => `
        <div style="background: var(--color-bg-secondary); border: 2px solid var(--color-border); border-radius: 12px; padding: 20px;">
          <div style="font-size: 2rem; margin-bottom: 12px;">${achievement.icon}</div>
          <div style="font-size: 1.125rem; font-weight: 600; margin-bottom: 8px;">${achievement.title}</div>
          <div style="font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 12px;">${achievement.description}</div>
          <div style="font-size: 0.75rem; color: var(--color-text-tertiary);">
            ${new Date(achievement.unlockedAt).toLocaleDateString('zh-CN')}
          </div>
        </div>
      `).join('');
    }

    function exportProgress() {
      const progress = StorageManager.getProgress();
      const achievements = StorageManager.getAchievements();

      const data = {
        progress,
        achievements,
        exportDate: new Date().toISOString()
      };

      const dataStr = JSON.stringify(data, null, 2);
      const dataBlob = new Blob([dataStr], { type: 'application/json' });
      const url = URL.createObjectURL(dataBlob);

      const link = document.createElement('a');
      link.href = url;
      link.download = `word-roots-progress-${Date.now()}.json`;
      link.click();

      URL.revokeObjectURL(url);
      alert('学习数据已导出！');
    }

    function importProgress() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.json';

      input.onchange = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (event) => {
          try {
            const data = JSON.parse(event.target.result);

            if (data.progress) {
              StorageManager.saveProgress(data.progress);
            }

            if (data.achievements) {
              localStorage.setItem('wordRootAchievements', JSON.stringify(data.achievements));
            }

            alert('学习数据已导入！');
            location.reload();
          } catch (error) {
            alert('导入失败：文件格式错误');
            console.error('Import error:', error);
          }
        };

        reader.readAsText(file);
      };

      input.click();
    }

    function confirmClearData() {
      if (confirm('确定要清除所有学习数据吗？此操作不可恢复！')) {
        if (confirm('真的确定吗？这将清除您的所有学习进度和成就！')) {
          localStorage.removeItem('wordRootProgress');
          localStorage.removeItem('wordRootAchievements');
          alert('所有数据已清除');
          location.reload();
        }
      }
    }
  </script>

</body>
</html>