manyi_review/templates/subjects.html

{% extends "base.html" %}
{% block title %}科目管理 - 满意错题本{% endblock %}
{% block page_title %}科目管理{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <div>
    <p class="text-xs text-gray-400">管理你的所有科目</p>
  </div>
  <button onclick="openModal()" class="inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition shadow-sm">
    <i class="fa-solid fa-plus"></i>新建科目
  </button>
</div>

<!-- Subject list -->
{% if subjects %}
<div class="grid grid-cols-3 gap-5">
  {% for subject in subjects %}
  <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition group">
    <div class="flex items-start justify-between mb-4">
      <div class="flex items-center gap-3">
        <span class="w-4 h-4 rounded-full shadow-sm flex-shrink-0" style="background-color:{{ subject.color }};box-shadow:0 0 0 3px {{ subject.color }}20"></span>
        <h3 class="font-bold text-gray-800 text-base">{{ subject.name }}</h3>
      </div>
      <form method="POST" action="/subjects/{{ subject.id }}/delete" onsubmit="return confirm('确定删除「{{ subject.name }}」？将同时删除所有错题记录。')">
        <button type="submit" class="text-gray-300 hover:text-red-400 transition opacity-0 group-hover:opacity-100" title="删除科目">
          <i class="fa-solid fa-trash-can"></i>
        </button>
      </form>
    </div>
    <div class="flex items-center gap-4 text-xs text-gray-400 mb-5">
      <span><i class="fa-solid fa-image mr-1"></i>{{ subject.error_images|length }} 条记录</span>
      <span><i class="fa-solid fa-calendar mr-1"></i>{{ subject.created_at.strftime('%Y-%m-%d') }}</span>
    </div>
    <a href="/subject/{{ subject.id }}" class="block w-full text-center bg-gray-50 hover:bg-indigo-50 text-gray-600 hover:text-primary py-2.5 rounded-xl text-sm font-medium transition">
      <i class="fa-solid fa-arrow-right-to-bracket mr-1"></i>进入科目
    </a>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="bg-white rounded-2xl border border-gray-100 p-16 text-center">
  <div class="text-6xl text-gray-200 mb-4"><i class="fa-solid fa-folder-open"></i></div>
  <p class="text-gray-400 mb-6">还没有科目，先创建一个吧</p>
  <button onclick="openModal()" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">
    <i class="fa-solid fa-plus"></i>新建第一个科目
  </button>
</div>
{% endif %}

<!-- Create modal -->
<div id="createModal" class="fixed inset-0 z-50 items-center justify-center modal-overlay bg-black/40" style="display:none">
  <div class="bg-white rounded-2xl w-full max-w-md mx-4 shadow-2xl">
    <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10 rounded-t-2xl">
      <h3 class="font-bold text-gray-800">新建科目</h3>
      <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-lg"></i></button>
    </div>
    <form method="POST" action="/subjects/create" class="p-6">
      <div class="mb-5">
        <label class="block text-sm font-medium text-gray-600 mb-2">科目名称</label>
        <input type="text" name="name" required placeholder="例如：数学、英语、物理..."
          class="w-full border border-gray-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition">
      </div>
      <div class="mb-6">
        <label class="block text-sm font-medium text-gray-600 mb-2">主题色</label>
        <div class="flex gap-2 flex-wrap">
          {% for c in colors %}
          <label class="cursor-pointer">
            <input type="radio" name="color" value="{{ c }}" {% if loop.first %}checked{% endif %} class="hidden peer">
            <span class="w-8 h-8 rounded-full block peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-gray-400 transition hover:scale-110"
              style="background-color:{{ c }};"></span>
          </label>
          {% endfor %}
        </div>
      </div>
      <div class="flex gap-3">
        <button type="button" onclick="closeModal()" class="flex-1 border border-gray-200 text-gray-600 py-2.5 rounded-xl text-sm font-medium hover:bg-gray-50 transition">取消</button>
        <button type="submit" class="flex-1 bg-primary text-white py-2.5 rounded-xl text-sm font-medium hover:bg-indigo-600 transition">创建</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function openModal(){const m=document.getElementById('createModal');m.style.display='flex';}
function closeModal(){const m=document.getElementById('createModal');m.style.display='none';}
document.querySelectorAll('input[name="color"]').forEach(r=>{
  r.addEventListener('change',function(){
    document.querySelectorAll('input[name="color"]~span').forEach(s=>s.style.boxShadow='none');
    this.nextElementSibling.style.boxShadow='0 0 0 3px '+this.value+'40';
  });
});
// Init color ring
document.querySelector('input[name="color"]:checked')?.nextElementSibling.style.boxShadow='0 0 0 3px '+document.querySelector('input[name="color"]:checked').value+'40';
</script>
{% endblock %}