manyi_review/templates/base.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}错题本{% endblock %}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366f1',
            secondary: '#8b5cf6',
            accent: '#f43f5e',
          }
        }
      }
    }
  </script>
  <style>
    body { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
    .sidebar-link.active { background: rgba(99,102,241,0.10); color: #6366f1; border-right: 3px solid #6366f1; }
    .image-card:hover .image-actions { opacity: 1; }
    .image-actions { opacity: 0; transition: opacity 0.2s; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .modal-overlay { backdrop-filter: blur(6px); }
    /* Lightbox */
    #lightbox { cursor: zoom-out; }
    #lightbox img { max-height: 85vh; max-width: 90vw; object-fit: contain; }
    .date-chip { transition: all 0.15s; }
    .date-chip:hover { transform: translateY(-1px); }
  </style>
  {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50 min-h-screen">
  <div class="flex min-h-screen">
    <!-- Sidebar -->
    <aside class="w-56 bg-white shadow-lg fixed h-full z-20 flex flex-col">
      <div class="p-5 border-b border-gray-100">
        <div class="flex items-center gap-3">
          <div class="w-9 h-9 rounded-xl bg-primary flex items-center justify-center text-white text-base">
            <i class="fa-solid fa-book-open"></i>
          </div>
          <div>
            <h1 class="font-bold text-gray-800 text-sm leading-tight">满意错题本</h1>
            <p class="text-[10px] text-gray-400 mt-0.5">在线复习助手</p>
          </div>
        </div>
      </div>
      <nav class="flex-1 py-3">
        <a href="/" class="sidebar-link flex items-center gap-3 px-5 py-2.5 text-gray-500 hover:bg-gray-50 transition {% if request.url.path == '/' %}active{% endif %}">
          <i class="fa-solid fa-house w-5 text-center text-base"></i><span class="text-sm font-medium">首页</span>
        </a>
        <a href="/subjects" class="sidebar-link flex items-center gap-3 px-5 py-2.5 text-gray-500 hover:bg-gray-50 transition {% if '/subjects' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-folder w-5 text-center text-base"></i><span class="text-sm font-medium">科目管理</span>
        </a>
        <a href="/timeline" class="sidebar-link flex items-center gap-3 px-5 py-2.5 text-gray-500 hover:bg-gray-50 transition {% if '/timeline' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-clock-rotate-left w-5 text-center text-base"></i><span class="text-sm font-medium">时间线</span>
        </a>
        <a href="/review" class="sidebar-link flex items-center gap-3 px-5 py-2.5 text-gray-500 hover:bg-gray-50 transition {% if '/review' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-graduation-cap w-5 text-center text-base"></i><span class="text-sm font-medium">复习汇总</span>
        </a>
        <a href="/evaluations" class="sidebar-link flex items-center gap-3 px-5 py-2.5 text-gray-500 hover:bg-gray-50 transition {% if '/evaluations' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-clipboard-check w-5 text-center text-base"></i><span class="text-sm font-medium">知识评价</span>
        </a>
      </nav>
      <div class="p-4 border-t border-gray-100">
        <p class="text-[10px] text-gray-300 text-center">© 2025 满意错题本</p>
      </div>
    </aside>

    <!-- Main content -->
    <main class="flex-1 ml-56">
      <header class="bg-white/80 backdrop-blur border-b border-gray-100 px-8 py-3.5 flex items-center justify-between sticky top-0 z-10">
        <h2 class="text-base font-semibold text-gray-700">{% block page_title %}{% endblock %}</h2>
        <div class="text-xs text-gray-400" id="current-date"></div>
      </header>
      <div class="p-8">
        {% block content %}{% endblock %}
      </div>
    </main>
  </div>

  <!-- Lightbox -->
  <div id="lightbox" class="fixed inset-0 z-50 hidden items-center justify-center modal-overlay bg-black/70" onclick="closeLightbox(event)">
    <button class="absolute top-4 right-4 text-white/80 hover:text-white text-2xl z-10" onclick="closeLightbox(event)">
      <i class="fa-solid fa-xmark"></i>
    </button>
    <button id="lb-prev" class="absolute left-4 text-white/80 hover:text-white text-2xl hidden" onclick="navigateLightbox(-1,event)">
      <i class="fa-solid fa-chevron-left"></i>
    </button>
    <button id="lb-next" class="absolute right-4 text-white/80 hover:text-white text-2xl hidden" onclick="navigateLightbox(1,event)">
      <i class="fa-solid fa-chevron-right"></i>
    </button>
    <img id="lb-img" src="" alt="" class="rounded-lg shadow-2xl max-h-[85vh] max-w-[90vw] object-contain">
    <p id="lb-caption" class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/80 text-sm bg-black/40 px-4 py-1.5 rounded-full"></p>
  </div>

  <script>
    document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN', {year:'numeric',month:'long',day:'numeric',weekday:'long'});

    // Lightbox
    let lbImages = [];
    let lbIndex = 0;
    function openLightbox(src, caption, allImages, index) {
      lbImages = allImages || [src];
      lbIndex = index || 0;
      updateLightbox();
      const lb = document.getElementById('lightbox');
      lb.classList.remove('hidden');
      lb.classList.add('flex');
      document.body.style.overflow = 'hidden';
    }
    function closeLightbox(e) {
      if (e && e.target.tagName === 'IMG') return;
      const lb = document.getElementById('lightbox');
      lb.classList.add('hidden');
      lb.classList.remove('flex');
      document.body.style.overflow = '';
    }
    function navigateLightbox(dir, e) {
      if (e) e.stopPropagation();
      if (lbImages.length <= 1) return;
      lbIndex = (lbIndex + dir + lbImages.length) % lbImages.length;
      updateLightbox();
    }
    function updateLightbox() {
      document.getElementById('lb-img').src = lbImages[lbIndex];
      document.getElementById('lb-caption').textContent = lbImages[lbIndex + 1] ? `${lbIndex+1}/${lbImages.length} · ${document.getElementById('lb-img').dataset.caption || ''}` : '';
      document.getElementById('lb-prev').classList.toggle('hidden', lbImages.length <= 1);
      document.getElementById('lb-next').classList.toggle('hidden', lbImages.length <= 1);
    }
    document.addEventListener('keydown', e => {
      if (document.getElementById('lightbox').classList.contains('hidden')) return;
      if (e.key === 'ArrowLeft') navigateLightbox(-1);
      else if (e.key === 'ArrowRight') navigateLightbox(1);
      else if (e.key === 'Escape') closeLightbox(e);
    });
  </script>
  {% block extra_js %}{% endblock %}
</body>
</html>