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); }
    /* Sidebar collapse */
    .sidebar { transition: width 0.25s ease; }
    .sidebar.collapsed { width: 5rem; }
    .sidebar.collapsed .sidebar-text { display: none; }
    .sidebar.collapsed .sidebar-sub { display: none; }
    .sidebar.collapsed .brand-text { display: none; }
    .sidebar.collapsed .collapse-btn i { transform: rotate(180deg); }
    .sidebar.collapsed main { margin-left: 5rem !important; }
    .sidebar-sub { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s; max-height: 500px; opacity: 1; }
    .sidebar-sub.collapsed { max-height: 0 !important; opacity: 0 !important; }
    .subject-toggle { transition: transform 0.2s; display: inline-block; }
    .subject-toggle.open { transform: rotate(90deg); }
    .subject-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; font-size: 0.8rem; color: #6b7280; text-decoration: none; transition: all 0.15s; cursor: pointer; white-space: nowrap; }
    .subject-item:hover { background: #f3f4f6; color: #374151; }
    .subject-item.active { background: rgba(99,102,241,0.10); color: #6366f1; }
    .sidebar-section-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; padding: 0.5rem 1rem 0.25rem; font-weight: 600; }
    .sidebar.collapsed .sidebar-section-label { display: none; }
  </style>
  {% block extra_css %}{% endblock %}
</head>
<body class="bg-gray-50 min-h-screen">
  <div class="flex min-h-screen">
    <!-- Sidebar -->
    <aside class="sidebar w-56 bg-white shadow-lg fixed h-full z-20 flex flex-col border-r border-gray-100">
      <!-- Header -->
      <div class="px-4 py-4 flex items-center gap-3">
        <div class="w-9 h-9 rounded-xl bg-primary flex items-center justify-center text-white text-base flex-shrink-0">
          <i class="fa-solid fa-book-open"></i>
        </div>
        <div class="brand-text overflow-hidden">
          <h1 class="font-bold text-gray-800 text-sm leading-tight">满意错题本</h1>
          <p class="text-[10px] text-gray-400 mt-0.5">在线复习助手</p>
        </div>
        <button id="collapseBtn" class="collapse-btn ml-auto w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition flex-shrink-0" title="收起/展开">
          <i class="fa-solid fa-angles-left text-xs"></i>
        </button>
      </div>

      <!-- Nav -->
      <nav class="flex-1 py-2 px-3 overflow-y-auto">
        <!-- 首页 -->
        <a href="/" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition mb-1 {% if request.url.path == '/' %}active{% endif %}">
          <i class="fa-solid fa-house w-5 text-center text-base flex-shrink-0"></i>
          <span class="sidebar-text text-sm font-medium">首页</span>
        </a>

        <!-- 全部科目 -->
        <div class="mb-1">
          <a href="javascript:void(0)" id="subjectToggleBtn" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition">
            <i class="fa-solid fa-list-check w-5 text-center text-base flex-shrink-0"></i>
            <span class="sidebar-text text-sm font-medium">全部科目</span>
            <i class="fa-solid fa-chevron-right text-[10px] text-gray-400 ml-auto subject-toggle" id="subjectToggleIcon"></i>
          </a>
          <div id="subjectSubmenu" class="sidebar-sub collapsed mt-1 ml-4 pl-3 border-l border-gray-100">
            <div class="sidebar-section-label sidebar-text px-1">科目列表</div>
            {% for s in subjects %}
            <a href="/subject/{{ s.id }}" class="subject-item {% if request.url.path == '/subject/' ~ s.id|string %}active{% endif %}">
              <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color:{{ s.color }};"></span>
              <span class="sidebar-text truncate">{{ s.name }}</span>
              <span class="sidebar-text ml-auto text-[10px] text-gray-300">{{ s.error_images|length }}</span>
            </a>
            {% endfor %}
            {% if not subjects %}
            <div class="sidebar-text text-xs text-gray-300 px-3 py-2">暂无科目</div>
            {% endif %}
          </div>
        </div>

        <!-- 科目管理 -->
        <a href="/subjects" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition mb-1 {% if '/subjects' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-folder w-5 text-center text-base flex-shrink-0"></i>
          <span class="sidebar-text text-sm font-medium">科目管理</span>
        </a>

        <!-- 知识评价 -->
        <a href="/evaluations" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition mb-1 {% if '/evaluations' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-clipboard-check w-5 text-center text-base flex-shrink-0"></i>
          <span class="sidebar-text text-sm font-medium">知识评价</span>
        </a>

        <!-- 时间线 New -->
        <a href="/timeline-new" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition mb-1 {% if '/timeline-new' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-timeline w-5 text-center text-base flex-shrink-0"></i>
          <span class="sidebar-text text-sm font-medium">时间线 New</span>
        </a>

        <!-- 时间线 -->
        <a href="/timeline" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition mb-1 {% if '/timeline' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-clock-rotate-left w-5 text-center text-base flex-shrink-0"></i>
          <span class="sidebar-text text-sm font-medium">时间线</span>
        </a>

        <!-- 复习汇总 -->
        <a href="/review" class="sidebar-link flex items-center gap-3 px-3 py-2.5 rounded-xl text-gray-500 hover:bg-gray-50 transition mb-1 {% if '/review' in request.url.path %}active{% endif %}">
          <i class="fa-solid fa-graduation-cap w-5 text-center text-base flex-shrink-0"></i>
          <span class="sidebar-text text-sm font-medium">复习汇总</span>
        </a>
      </nav>

      <!-- Footer -->
      <div class="px-4 py-3 border-t border-gray-100">
        <p class="sidebar-text text-[10px] text-gray-300 text-center">© 2025 满意错题本</p>
      </div>
    </aside>

    <!-- Main content -->
    <main class="flex-1 ml-56 transition-margin">
      <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'});

    // Sidebar collapse
    (function(){
      var sidebar = document.querySelector('.sidebar');
      var main = document.querySelector('main');
      var btn = document.getElementById('collapseBtn');
      var icon = btn ? btn.querySelector('i') : null;
      var collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
      if(collapsed){
        sidebar.classList.add('collapsed');
        main.style.marginLeft = '5rem';
        if(icon) icon.className = 'fa-solid fa-angles-right text-xs';
      }
      if(btn){
        btn.addEventListener('click', function(){
          sidebar.classList.toggle('collapsed');
          if(sidebar.classList.contains('collapsed')){
            main.style.marginLeft = '5rem';
            if(icon) icon.className = 'fa-solid fa-angles-right text-xs';
            localStorage.setItem('sidebarCollapsed', 'true');
          } else {
            main.style.marginLeft = '14rem';
            if(icon) icon.className = 'fa-solid fa-angles-left text-xs';
            localStorage.setItem('sidebarCollapsed', 'false');
          }
        });
      }
    })();

    // Subject submenu toggle (collapsed by default)
    (function(){
      var submenu = document.getElementById('subjectSubmenu');
      var icon = document.getElementById('subjectToggleIcon');
      var btn = document.getElementById('subjectToggleBtn');
      var saved = localStorage.getItem('subjectMenuOpen');
      var isOpen = saved === 'true';
      if(isOpen){
        submenu.classList.remove('collapsed');
        if(icon) icon.classList.add('open');
      }
      if(btn){
        btn.addEventListener('click', function(e){
          e.preventDefault();
          e.stopPropagation();
          isOpen = !isOpen;
          if(isOpen){
            submenu.classList.remove('collapsed');
            if(icon) icon.classList.add('open');
          } else {
            submenu.classList.add('collapsed');
            if(icon) icon.classList.remove('open');
          }
          localStorage.setItem('subjectMenuOpen', String(isOpen));
        });
      }
    })();

    // 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.style.display='flex';
      document.body.style.overflow = 'hidden';
    }
    function closeLightbox(e) {
      if (e && e.target.tagName === 'IMG') return;
      const lb = document.getElementById('lightbox');
      lb.style.display='none';
      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-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').style.display === 'none' || document.getElementById('lightbox').style.display === '') 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>