Deploy Daily Reminder Master

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,11 @@
+__pycache__/
+*.pyc
+.env
+.venv/
+data/store.json
+data/preview_store.json
+preview_artifacts/
+server.out
+server.err
+test_artifacts/
+test_artifacts_round3/

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.13-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+ENV PORT=7860
+
+WORKDIR /app
+
+COPY requirements.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p /app/data
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -1,10 +1,19 @@
 ---
 title: DRM
-emoji: 🐠
-colorFrom: gray
+emoji: ⏰
+colorFrom: cyan
 colorTo: blue
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Daily Reminder Master
+
+A polished personal reminder board built with Flask for Hugging Face Spaces.
+
+## Environment variables
+
+- `PASSWORD`: login password for task operations and `/admin`
+- `SECRET_KEY`: Flask session secret
+- `PORT`: server port, defaults to `7860`

app.py

@@ -0,0 +1,249 @@
+import hmac
+import os
+from datetime import datetime
+from pathlib import Path
+from urllib.parse import urlparse
+from zoneinfo import ZoneInfo
+
+from flask import Flask, jsonify, redirect, render_template, request, session, url_for
+
+from storage import ReminderStore, beijing_now
+
+BASE_DIR = Path(__file__).resolve().parent
+STORE_PATH = BASE_DIR / "data" / "store.json"
+TZ = ZoneInfo("Asia/Shanghai")
+DEFAULT_PASSWORD = "123456"
+
+app = Flask(__name__)
+app.config["JSON_AS_ASCII"] = False
+app.secret_key = os.getenv("SECRET_KEY", "daily-reminder-master-secret")
+store = ReminderStore(STORE_PATH)
+
+
+MSG_LOGIN_REQUIRED = "\u8bf7\u5148\u767b\u5f55"
+MSG_WRONG_PASSWORD = "\u5bc6\u7801\u4e0d\u6b63\u786e"
+MSG_ENTER_DUE = "\u8bf7\u8f93\u5165\u622a\u6b62\u65e5\u671f"
+MSG_DUE_AFTER_NOW = "\u622a\u6b62\u65e5\u671f\u9700\u8981\u665a\u4e8e\u5f53\u524d\u5317\u4eac\u65f6\u95f4"
+MSG_CATEGORY_NAME = "\u5206\u7c7b\u540d\u79f0\u81f3\u5c11 2 \u4e2a\u5b57\u7b26"
+MSG_TASK_NAME = "\u4efb\u52a1\u540d\u79f0\u81f3\u5c11 2 \u4e2a\u5b57\u7b26"
+MSG_CATEGORY_NOT_FOUND = "\u5206\u7c7b\u4e0d\u5b58\u5728"
+MSG_TASK_NOT_FOUND = "\u4efb\u52a1\u4e0d\u5b58\u5728"
+WEEKDAYS = [
+    "\u661f\u671f\u4e00",
+    "\u661f\u671f\u4e8c",
+    "\u661f\u671f\u4e09",
+    "\u661f\u671f\u56db",
+    "\u661f\u671f\u4e94",
+    "\u661f\u671f\u516d",
+    "\u661f\u671f\u65e5",
+]
+
+
+def get_password() -> str:
+    return os.getenv("PASSWORD", DEFAULT_PASSWORD)
+
+
+def is_authed() -> bool:
+    return bool(session.get("authenticated"))
+
+
+def safe_next_path(raw_next: str | None) -> str:
+    if not raw_next:
+        return url_for("index")
+    parsed = urlparse(raw_next)
+    if parsed.scheme or parsed.netloc:
+        return url_for("index")
+    if not raw_next.startswith("/"):
+        return url_for("index")
+    return raw_next
+
+
+def require_auth():
+    if not is_authed():
+        return jsonify({"ok": False, "error": MSG_LOGIN_REQUIRED}), 401
+    return None
+
+
+def parse_due_at(raw_value: str) -> datetime:
+    if not raw_value:
+        raise ValueError(MSG_ENTER_DUE)
+
+    normalized = raw_value.strip()
+    if normalized.endswith("Z"):
+        normalized = normalized[:-1] + "+00:00"
+
+    due_at = datetime.fromisoformat(normalized)
+    if due_at.tzinfo is None:
+        due_at = due_at.replace(tzinfo=TZ)
+
+    due_at = due_at.astimezone(TZ).replace(minute=0, second=0, microsecond=0)
+
+    if due_at <= beijing_now():
+        raise ValueError(MSG_DUE_AFTER_NOW)
+
+    return due_at
+
+
+def current_date_payload() -> dict[str, str]:
+    now = beijing_now()
+    return {
+        "iso": now.isoformat(),
+        "weekday": WEEKDAYS[now.weekday()],
+    }
+
+
+@app.context_processor
+def inject_globals():
+    return {
+        "authenticated": is_authed(),
+    }
+
+
+@app.get("/")
+def index():
+    login_required = request.args.get("login") == "required"
+    next_path = safe_next_path(request.args.get("next"))
+    return render_template(
+        "index.html",
+        categories=store.list_categories(),
+        clock_meta=current_date_payload(),
+        login_required=login_required,
+        next_path=next_path,
+    )
+
+
+@app.get("/admin")
+def admin():
+    if not is_authed():
+        return redirect(url_for("index", login="required", next=url_for("admin")))
+    return render_template(
+        "admin.html",
+        categories=store.list_categories(),
+    )
+
+
+@app.post("/api/login")
+def login():
+    payload = request.get_json(silent=True) or {}
+    password = str(payload.get("password", ""))
+    next_path = safe_next_path(payload.get("next"))
+
+    if hmac.compare_digest(password, get_password()):
+        session["authenticated"] = True
+        return jsonify({"ok": True, "next": next_path})
+
+    return jsonify({"ok": False, "error": MSG_WRONG_PASSWORD}), 401
+
+
+@app.post("/api/logout")
+def logout():
+    session.clear()
+    return jsonify({"ok": True})
+
+
+@app.post("/api/categories")
+def create_category():
+    auth_error = require_auth()
+    if auth_error:
+        return auth_error
+
+    payload = request.get_json(silent=True) or {}
+    name = str(payload.get("name", "")).strip()
+    if len(name) < 2:
+        return jsonify({"ok": False, "error": MSG_CATEGORY_NAME}), 400
+
+    category = store.create_category(name)
+    return jsonify({"ok": True, "category": category})
+
+
+@app.patch("/api/categories/<category_id>")
+def rename_category(category_id: str):
+    auth_error = require_auth()
+    if auth_error:
+        return auth_error
+
+    payload = request.get_json(silent=True) or {}
+    name = str(payload.get("name", "")).strip()
+    if len(name) < 2:
+        return jsonify({"ok": False, "error": MSG_CATEGORY_NAME}), 400
+
+    try:
+        category = store.rename_category(category_id, name)
+    except KeyError:
+        return jsonify({"ok": False, "error": MSG_CATEGORY_NOT_FOUND}), 404
+
+    return jsonify({"ok": True, "category": category})
+
+
+@app.delete("/api/categories/<category_id>")
+def delete_category(category_id: str):
+    auth_error = require_auth()
+    if auth_error:
+        return auth_error
+
+    try:
+        store.delete_category(category_id)
+    except KeyError:
+        return jsonify({"ok": False, "error": MSG_CATEGORY_NOT_FOUND}), 404
+
+    return jsonify({"ok": True})
+
+
+@app.post("/api/categories/<category_id>/tasks")
+def create_task(category_id: str):
+    auth_error = require_auth()
+    if auth_error:
+        return auth_error
+
+    payload = request.get_json(silent=True) or {}
+    title = str(payload.get("title", "")).strip()
+    if len(title) < 2:
+        return jsonify({"ok": False, "error": MSG_TASK_NAME}), 400
+
+    try:
+        due_at = parse_due_at(str(payload.get("due_at", "")))
+    except ValueError as exc:
+        return jsonify({"ok": False, "error": str(exc)}), 400
+
+    try:
+        task = store.add_task(category_id, title, due_at.isoformat())
+    except KeyError:
+        return jsonify({"ok": False, "error": MSG_CATEGORY_NOT_FOUND}), 404
+
+    return jsonify({"ok": True, "task": task})
+
+
+@app.patch("/api/tasks/<task_id>")
+def update_task(task_id: str):
+    auth_error = require_auth()
+    if auth_error:
+        return auth_error
+
+    payload = request.get_json(silent=True) or {}
+    completed = bool(payload.get("completed"))
+
+    try:
+        task = store.toggle_task(task_id, completed)
+    except KeyError:
+        return jsonify({"ok": False, "error": MSG_TASK_NOT_FOUND}), 404
+
+    return jsonify({"ok": True, "task": task})
+
+
+@app.delete("/api/tasks/<task_id>")
+def delete_task(task_id: str):
+    auth_error = require_auth()
+    if auth_error:
+        return auth_error
+
+    try:
+        store.delete_task(task_id)
+    except KeyError:
+        return jsonify({"ok": False, "error": MSG_TASK_NOT_FOUND}), 404
+
+    return jsonify({"ok": True})
+
+
+if __name__ == "__main__":
+    port = int(os.getenv("PORT", "7860"))
+    app.run(host="0.0.0.0", port=port, debug=False)

requirements.txt

@@ -0,0 +1,2 @@
+Flask==3.1.2
+gunicorn==23.0.0

static/admin.js

@@ -0,0 +1,86 @@
+(function () {
+  const form = document.getElementById("createCategoryForm");
+  const toastStack = document.getElementById("toastStack");
+  const adminGrid = document.getElementById("adminGrid");
+
+  function showToast(message, kind = "success") {
+    const toast = document.createElement("div");
+    toast.className = `toast ${kind}`;
+    toast.textContent = message;
+    toastStack.appendChild(toast);
+    window.setTimeout(() => toast.remove(), 2600);
+  }
+
+  async function requestJSON(url, options = {}) {
+    const response = await fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      ...options,
+    });
+
+    const payload = await response.json().catch(() => ({ ok: false, error: "请求失败" }));
+    if (!response.ok || !payload.ok) {
+      throw new Error(payload.error || "请求失败");
+    }
+    return payload;
+  }
+
+  function categoryCard(category) {
+    const card = document.createElement("article");
+    card.className = "admin-card";
+    card.dataset.categoryId = category.id;
+    card.innerHTML = `
+      <div class="admin-card-head">
+        <div>
+          <p class="column-label">Category</p>
+          <h2>${category.name}</h2>
+        </div>
+        <span class="task-count">0 项任务</span>
+      </div>
+      <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
+      <button class="danger-button" type="button" data-delete-category="${category.id}">删除此清单</button>
+    `;
+    return card;
+  }
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const nameInput = document.getElementById("newCategoryName");
+    const name = nameInput.value.trim();
+
+    try {
+      const payload = await requestJSON("/api/categories", {
+        method: "POST",
+        body: JSON.stringify({ name }),
+      });
+      const createCard = adminGrid.querySelector(".create-card");
+      adminGrid.insertBefore(categoryCard(payload.category), createCard.nextSibling);
+      nameInput.value = "";
+      showToast("新分类已创建");
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  });
+
+  adminGrid.addEventListener("click", async (event) => {
+    const button = event.target.closest("[data-delete-category]");
+    if (!button) {
+      return;
+    }
+
+    try {
+      await requestJSON(`/api/categories/${button.dataset.deleteCategory}`, {
+        method: "DELETE",
+        body: JSON.stringify({}),
+      });
+      const card = button.closest(".admin-card");
+      if (card) {
+        card.remove();
+      }
+      showToast("分类已删除");
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  });
+})();

static/app.js

@@ -0,0 +1,567 @@
+(function () {
+  const state = {
+    authenticated: document.body.dataset.authenticated === "true",
+    nextPath: (window.__DRM_BOOTSTRAP__ && window.__DRM_BOOTSTRAP__.nextPath) || "/",
+    loginRequired: !!(window.__DRM_BOOTSTRAP__ && window.__DRM_BOOTSTRAP__.loginRequired),
+  };
+
+  const loginModal = document.getElementById("loginModal");
+  const taskModal = document.getElementById("taskModal");
+  const renameModal = document.getElementById("renameModal");
+  const toastStack = document.getElementById("toastStack");
+  const boardGrid = document.getElementById("boardGrid");
+  const loginForm = document.getElementById("loginForm");
+  const taskForm = document.getElementById("taskForm");
+  const renameForm = document.getElementById("renameForm");
+  const openLoginButton = document.getElementById("openLoginButton");
+  const logoutButton = document.getElementById("logoutButton");
+
+  const clockDisplay = document.getElementById("clockDisplay");
+  const dateDisplay = document.getElementById("dateDisplay");
+  const weekdayDisplay = document.getElementById("weekdayDisplay");
+  const lunarDisplay = document.getElementById("lunarDisplay");
+
+  const lunarData = [
+    0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
+    0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
+    0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
+    0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
+    0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
+    0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
+    0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
+    0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
+    0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
+    0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0,
+    0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
+    0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
+    0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
+    0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
+    0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0,
+    0x14b63,
+  ];
+
+  function showToast(message, kind = "success") {
+    const toast = document.createElement("div");
+    toast.className = `toast ${kind}`;
+    toast.textContent = message;
+    toastStack.appendChild(toast);
+    window.setTimeout(() => {
+      toast.remove();
+    }, 2600);
+  }
+
+  function openModal(modal) {
+    if (modal) {
+      modal.classList.add("is-open");
+    }
+  }
+
+  function closeModal(modal) {
+    if (modal) {
+      modal.classList.remove("is-open");
+    }
+  }
+
+  function requireAuth() {
+    if (!state.authenticated) {
+      openModal(loginModal);
+      return false;
+    }
+    return true;
+  }
+
+  async function requestJSON(url, options = {}) {
+    const response = await fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      ...options,
+    });
+
+    const payload = await response.json().catch(() => ({ ok: false, error: "请求失败" }));
+    if (!response.ok || !payload.ok) {
+      throw new Error(payload.error || "请求失败");
+    }
+    return payload;
+  }
+
+  function formatLocalDateTime(isoString) {
+    const date = new Date(isoString);
+    return new Intl.DateTimeFormat("zh-CN", {
+      timeZone: "Asia/Shanghai",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    }).format(date).replace(",", "");
+  }
+
+  function clamp(number, min, max) {
+    return Math.min(Math.max(number, min), max);
+  }
+
+  function mixColor(percent) {
+    if (percent <= 50) {
+      return "#73d883";
+    }
+    if (percent <= 80) {
+      return "#ffc857";
+    }
+    return "#ff6b5c";
+  }
+
+  function renderProgress() {
+    const now = new Date();
+    document.querySelectorAll(".task-card").forEach((card) => {
+      const createdAt = new Date(card.dataset.createdAt);
+      const dueAt = new Date(card.dataset.dueAt);
+      const completed = card.dataset.completed === "true";
+      const total = dueAt.getTime() - createdAt.getTime();
+      const elapsed = now.getTime() - createdAt.getTime();
+      const progress = completed || total <= 0 ? 100 : clamp((elapsed / total) * 100, 0, 100);
+      const dueLabel = card.querySelector("[data-due-label]");
+      const progressText = card.querySelector("[data-progress-text]");
+      const progressBar = card.querySelector("[data-progress-bar]");
+
+      if (dueLabel) {
+        dueLabel.textContent = `截止 ${formatLocalDateTime(card.dataset.dueAt)}`;
+      }
+
+      if (progressText) {
+        progressText.textContent = completed ? "已完成" : `已过去 ${progress.toFixed(0)}%`;
+      }
+
+      if (progressBar) {
+        progressBar.style.width = `${progress}%`;
+        progressBar.style.background = completed
+          ? "linear-gradient(90deg, #66d0ff 0%, #7be7ea 100%)"
+          : mixColor(progress);
+      }
+    });
+  }
+
+  function getBit(year, month) {
+    return (lunarData[year - 1900] & (0x10000 >> month)) !== 0 ? 1 : 0;
+  }
+
+  function leapMonth(year) {
+    return lunarData[year - 1900] & 0xf;
+  }
+
+  function leapDays(year) {
+    if (leapMonth(year)) {
+      return (lunarData[year - 1900] & 0x10000) ? 30 : 29;
+    }
+    return 0;
+  }
+
+  function monthDays(year, month) {
+    return getBit(year, month) ? 30 : 29;
+  }
+
+  function lunarYearDays(year) {
+    let sum = 348;
+    for (let i = 0x8000; i > 0x8; i >>= 1) {
+      sum += (lunarData[year - 1900] & i) ? 1 : 0;
+    }
+    return sum + leapDays(year);
+  }
+
+  function solarToLunar(date) {
+    const baseDate = new Date(Date.UTC(1900, 0, 31));
+    const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    let offset = Math.floor((utcDate - baseDate) / 86400000);
+    let year;
+
+    for (year = 1900; year < 2101 && offset > 0; year += 1) {
+      const temp = lunarYearDays(year);
+      if (offset < temp) {
+        break;
+      }
+      offset -= temp;
+    }
+
+    let month = 1;
+    let isLeap = false;
+    const leap = leapMonth(year);
+
+    while (month <= 12 && offset >= 0) {
+      let temp;
+      if (leap > 0 && month === leap + 1 && !isLeap) {
+        month -= 1;
+        isLeap = true;
+        temp = leapDays(year);
+      } else {
+        temp = monthDays(year, month);
+      }
+
+      if (offset < temp) {
+        break;
+      }
+
+      offset -= temp;
+      if (isLeap && month === leap) {
+        isLeap = false;
+      }
+      month += 1;
+    }
+
+    return {
+      year,
+      month,
+      day: offset + 1,
+      isLeap,
+    };
+  }
+
+  function formatLunar(date) {
+    const lunar = solarToLunar(date);
+    const monthNames = ["正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "冬", "腊"];
+    const dayNames = [
+      "初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十",
+      "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
+      "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十",
+    ];
+    const prefix = lunar.isLeap ? "闰" : "";
+    return `农历 ${prefix}${monthNames[lunar.month - 1]}月${dayNames[lunar.day - 1]}`;
+  }
+
+  function getBeijingDate() {
+    const parts = new Intl.DateTimeFormat("en-CA", {
+      timeZone: "Asia/Shanghai",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    }).formatToParts(new Date());
+
+    const map = {};
+    parts.forEach((part) => {
+      if (part.type !== "literal") {
+        map[part.type] = part.value;
+      }
+    });
+
+    return {
+      year: Number(map.year),
+      month: Number(map.month),
+      day: Number(map.day),
+      hour: map.hour,
+      minute: map.minute,
+      second: map.second,
+    };
+  }
+
+  function renderClock() {
+    const now = getBeijingDate();
+    clockDisplay.textContent = `${now.hour}:${now.minute}:${now.second}`;
+    dateDisplay.textContent = `${now.year} 年 ${String(now.month).padStart(2, "0")} 月 ${String(now.day).padStart(2, "0")} 日`;
+    const currentDate = new Date(now.year, now.month - 1, now.day);
+    const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+    weekdayDisplay.textContent = weekdays[currentDate.getDay()];
+    lunarDisplay.textContent = formatLunar(currentDate);
+  }
+
+  function taskTemplate(task, authenticated) {
+    const card = document.createElement("article");
+    card.className = `task-card ${task.completed ? "task-complete" : ""}`;
+    card.dataset.taskId = task.id;
+    card.dataset.createdAt = task.created_at;
+    card.dataset.dueAt = task.due_at;
+    card.dataset.completed = task.completed ? "true" : "false";
+    card.innerHTML = `
+      <div class="task-main">
+        <label class="check-wrap">
+          <input class="task-check" type="checkbox" ${task.completed ? "checked" : ""} data-toggle-task="${task.id}">
+          <span class="custom-check"></span>
+        </label>
+        <div class="task-copy">
+          <h4>${task.title}</h4>
+          <p class="meta-line">
+            <span class="meta-badge due-time" data-due-label></span>
+            <span class="meta-badge progress-text" data-progress-text></span>
+          </p>
+        </div>
+      </div>
+      <div class="progress-shell">
+        <div class="progress-bar" data-progress-bar></div>
+      </div>
+      ${authenticated ? `<button class="task-delete" type="button" data-delete-task="${task.id}">删除</button>` : ""}
+    `;
+    return card;
+  }
+
+  function ensureEmptyState(column) {
+    const list = column.querySelector(".task-list");
+    if (!list) {
+      return;
+    }
+    const cards = list.querySelectorAll(".task-card");
+    const empty = list.querySelector(".empty-state");
+    if (!cards.length && !empty) {
+      const block = document.createElement("div");
+      block.className = "empty-state";
+      block.innerHTML = "<p>这里还没有任务</p><span>点击右上角的加号，给这个分类加上第一条提醒。</span>";
+      list.appendChild(block);
+    }
+    if (cards.length && empty) {
+      empty.remove();
+    }
+  }
+
+  function setDefaultDueAt() {
+    const input = document.getElementById("taskDueAt");
+    const now = getBeijingDate();
+    const rounded = new Date(now.year, now.month - 1, now.day, Number(now.hour) + 1, 0, 0);
+    const yyyy = rounded.getFullYear();
+    const mm = String(rounded.getMonth() + 1).padStart(2, "0");
+    const dd = String(rounded.getDate()).padStart(2, "0");
+    const hh = String(rounded.getHours()).padStart(2, "0");
+    input.value = `${yyyy}-${mm}-${dd}T${hh}:00`;
+  }
+
+  async function handleLogin(event) {
+    event.preventDefault();
+    const password = document.getElementById("loginPassword").value;
+    try {
+      await requestJSON("/api/login", {
+        method: "POST",
+        body: JSON.stringify({
+          password,
+          next: state.nextPath,
+        }),
+      });
+      showToast("登录成功，已解锁编辑权限");
+      window.location.href = state.nextPath || "/";
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  }
+
+  async function handleLogout() {
+    try {
+      await requestJSON("/api/logout", {
+        method: "POST",
+        body: JSON.stringify({}),
+      });
+      window.location.reload();
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  }
+
+  async function handleTaskSubmit(event) {
+    event.preventDefault();
+    if (!requireAuth()) {
+      return;
+    }
+    const categoryId = document.getElementById("taskCategoryId").value;
+    const title = document.getElementById("taskName").value.trim();
+    const dueAt = document.getElementById("taskDueAt").value;
+    try {
+      const payload = await requestJSON(`/api/categories/${categoryId}/tasks`, {
+        method: "POST",
+        body: JSON.stringify({
+          title,
+          due_at: dueAt,
+        }),
+      });
+      const column = document.querySelector(`[data-category-id="${categoryId}"]`);
+      const list = column.querySelector(".task-list");
+      const card = taskTemplate(payload.task, state.authenticated);
+      list.prepend(card);
+      ensureEmptyState(column);
+      renderProgress();
+      closeModal(taskModal);
+      taskForm.reset();
+      setDefaultDueAt();
+      showToast("任务已添加");
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  }
+
+  async function handleRenameSubmit(event) {
+    event.preventDefault();
+    if (!requireAuth()) {
+      return;
+    }
+    const categoryId = document.getElementById("renameCategoryId").value;
+    const name = document.getElementById("renameCategoryName").value.trim();
+    try {
+      await requestJSON(`/api/categories/${categoryId}`, {
+        method: "PATCH",
+        body: JSON.stringify({ name }),
+      });
+      const column = document.querySelector(`[data-category-id="${categoryId}"]`);
+      if (column) {
+        const title = column.querySelector(".column-title");
+        if (title) {
+          title.textContent = name;
+        }
+      }
+      closeModal(renameModal);
+      showToast("分类名称已更新");
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  }
+
+  async function toggleTask(taskId, checked, input) {
+    if (!requireAuth()) {
+      input.checked = !checked;
+      return;
+    }
+    try {
+      await requestJSON(`/api/tasks/${taskId}`, {
+        method: "PATCH",
+        body: JSON.stringify({ completed: checked }),
+      });
+      const card = document.querySelector(`[data-task-id="${taskId}"]`);
+      if (card) {
+        card.dataset.completed = checked ? "true" : "false";
+        card.classList.toggle("task-complete", checked);
+        renderProgress();
+      }
+      showToast(checked ? "任务已完成" : "任务已恢复");
+    } catch (error) {
+      input.checked = !checked;
+      showToast(error.message, "error");
+    }
+  }
+
+  async function deleteTask(taskId) {
+    if (!requireAuth()) {
+      return;
+    }
+    try {
+      await requestJSON(`/api/tasks/${taskId}`, {
+        method: "DELETE",
+        body: JSON.stringify({}),
+      });
+      const card = document.querySelector(`[data-task-id="${taskId}"]`);
+      const column = card && card.closest(".todo-column");
+      if (card) {
+        card.remove();
+      }
+      if (column) {
+        ensureEmptyState(column);
+      }
+      showToast("��务已删除");
+    } catch (error) {
+      showToast(error.message, "error");
+    }
+  }
+
+  function bindBoardEvents() {
+    boardGrid.addEventListener("click", (event) => {
+      const addButton = event.target.closest("[data-open-add]");
+      if (addButton) {
+        if (!requireAuth()) {
+          return;
+        }
+        document.getElementById("taskCategoryId").value = addButton.dataset.openAdd;
+        const column = addButton.closest(".todo-column");
+        const title = column ? column.querySelector(".column-title").textContent : "添加提醒";
+        document.getElementById("taskModalTitle").textContent = `添加到 ${title}`;
+        openModal(taskModal);
+        setDefaultDueAt();
+        return;
+      }
+
+      const menuTrigger = event.target.closest("[data-menu-trigger]");
+      if (menuTrigger) {
+        const panel = document.querySelector(`[data-menu-panel="${menuTrigger.dataset.menuTrigger}"]`);
+        document.querySelectorAll(".menu-panel").forEach((item) => {
+          if (item !== panel) {
+            item.classList.remove("is-open");
+          }
+        });
+        if (panel) {
+          panel.classList.toggle("is-open");
+        }
+        return;
+      }
+
+      const renameButton = event.target.closest("[data-rename-category]");
+      if (renameButton) {
+        if (!requireAuth()) {
+          return;
+        }
+        const categoryId = renameButton.dataset.renameCategory;
+        const column = document.querySelector(`[data-category-id="${categoryId}"]`);
+        const currentName = column ? column.querySelector(".column-title").textContent.trim() : "";
+        document.getElementById("renameCategoryId").value = categoryId;
+        document.getElementById("renameCategoryName").value = currentName;
+        closeMenus();
+        openModal(renameModal);
+        return;
+      }
+
+      const deleteButton = event.target.closest("[data-delete-task]");
+      if (deleteButton) {
+        deleteTask(deleteButton.dataset.deleteTask);
+      }
+    });
+
+    boardGrid.addEventListener("change", (event) => {
+      const checkbox = event.target.closest("[data-toggle-task]");
+      if (checkbox) {
+        toggleTask(checkbox.dataset.toggleTask, checkbox.checked, checkbox);
+      }
+    });
+  }
+
+  function closeMenus() {
+    document.querySelectorAll(".menu-panel.is-open").forEach((panel) => {
+      panel.classList.remove("is-open");
+    });
+  }
+
+  document.addEventListener("click", (event) => {
+    if (!event.target.closest(".menu-wrap")) {
+      closeMenus();
+    }
+
+    const closeTarget = event.target.closest("[data-close-modal]");
+    if (closeTarget) {
+      const modal = document.getElementById(closeTarget.dataset.closeModal);
+      closeModal(modal);
+    }
+
+    if (event.target.classList.contains("modal-backdrop")) {
+      closeModal(event.target);
+    }
+  });
+
+  loginForm.addEventListener("submit", handleLogin);
+  taskForm.addEventListener("submit", handleTaskSubmit);
+  renameForm.addEventListener("submit", handleRenameSubmit);
+  bindBoardEvents();
+
+  if (openLoginButton) {
+    openLoginButton.addEventListener("click", () => openModal(loginModal));
+  }
+
+  if (logoutButton) {
+    logoutButton.addEventListener("click", handleLogout);
+  }
+
+  if (!state.authenticated) {
+    const promptedKey = "drm-login-prompted";
+    if (state.loginRequired || !window.sessionStorage.getItem(promptedKey)) {
+      openModal(loginModal);
+      window.sessionStorage.setItem(promptedKey, "1");
+    }
+  }
+
+  renderClock();
+  renderProgress();
+  window.setInterval(renderClock, 1000);
+  window.setInterval(renderProgress, 30000);
+  setDefaultDueAt();
+})();

static/styles.css

@@ -0,0 +1,727 @@
+:root {
+  --bg: #081524;
+  --bg-soft: rgba(10, 23, 37, 0.75);
+  --surface: rgba(9, 22, 35, 0.76);
+  --surface-border: rgba(255, 255, 255, 0.08);
+  --surface-strong: rgba(255, 255, 255, 0.08);
+  --text: #eef4fb;
+  --muted: rgba(238, 244, 251, 0.68);
+  --muted-strong: rgba(238, 244, 251, 0.84);
+  --accent: #5ce1e6;
+  --accent-2: #73d883;
+  --warning: #ffc857;
+  --danger: #ff6b5c;
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+  --radius-xl: 30px;
+  --radius-lg: 24px;
+  --radius-md: 18px;
+  --radius-sm: 14px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top left, rgba(92, 225, 230, 0.18), transparent 28%),
+    radial-gradient(circle at 85% 15%, rgba(255, 200, 87, 0.16), transparent 24%),
+    linear-gradient(180deg, #0b1625 0%, #07111d 100%);
+  color: var(--text);
+  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
+}
+
+body {
+  position: relative;
+  overflow-x: hidden;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.page-shell {
+  position: relative;
+  min-height: 100vh;
+  isolation: isolate;
+}
+
+.ambient {
+  position: fixed;
+  inset: auto;
+  width: 42vw;
+  height: 42vw;
+  border-radius: 999px;
+  filter: blur(46px);
+  opacity: 0.34;
+  z-index: -1;
+  animation: floatGlow 18s ease-in-out infinite;
+}
+
+.ambient-one {
+  top: -10vw;
+  left: -12vw;
+  background: rgba(92, 225, 230, 0.3);
+}
+
+.ambient-two {
+  right: -8vw;
+  bottom: -10vw;
+  background: rgba(255, 200, 87, 0.22);
+  animation-delay: -6s;
+}
+
+.layout,
+.admin-layout {
+  width: min(1340px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 28px 0 56px;
+}
+
+.hero-card,
+.card-surface,
+.admin-card,
+.modal-card {
+  border: 1px solid var(--surface-border);
+  background: linear-gradient(180deg, rgba(13, 28, 44, 0.9) 0%, rgba(8, 20, 32, 0.86) 100%);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(18px);
+}
+
+.hero-card {
+  min-height: 31vh;
+  padding: 28px;
+  border-radius: var(--radius-xl);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  position: relative;
+}
+
+.hero-card::after {
+  content: "";
+  position: absolute;
+  inset: auto -12% -28% auto;
+  width: 300px;
+  height: 300px;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(92, 225, 230, 0.18), transparent 72%);
+  pointer-events: none;
+}
+
+.hero-topbar,
+.column-header,
+.section-header,
+.admin-card-head,
+.action-group,
+.column-actions,
+.task-main,
+.form-actions {
+  display: flex;
+  align-items: center;
+}
+
+.hero-topbar,
+.section-header,
+.admin-card-head {
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.brand-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--muted-strong);
+}
+
+.brand-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--accent) 0%, #7effa7 100%);
+  box-shadow: 0 0 18px rgba(92, 225, 230, 0.72);
+}
+
+.ghost-link,
+.pill-button,
+.primary-button,
+.secondary-button,
+.danger-button,
+.icon-button,
+.task-delete {
+  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
+}
+
+.ghost-link,
+.pill-button,
+.primary-button,
+.secondary-button,
+.danger-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 44px;
+  border-radius: 999px;
+  padding: 0 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.ghost-link,
+.pill-button {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text);
+}
+
+.pill-button.accent,
+.primary-button {
+  background: linear-gradient(135deg, #7be7ea 0%, #61d29f 100%);
+  border-color: transparent;
+  color: #082030;
+  font-weight: 700;
+}
+
+.secondary-button {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text);
+}
+
+.danger-button {
+  background: rgba(255, 107, 92, 0.12);
+  border-color: rgba(255, 107, 92, 0.25);
+  color: #ff9388;
+}
+
+.ghost-link:hover,
+.pill-button:hover,
+.primary-button:hover,
+.secondary-button:hover,
+.danger-button:hover,
+.icon-button:hover,
+.task-delete:hover {
+  transform: translateY(-2px);
+}
+
+.clock-wrap {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  text-align: center;
+  padding: 10px 0 8px;
+}
+
+.eyebrow,
+.section-kicker,
+.column-label,
+.modal-kicker {
+  margin: 0;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.clock-display {
+  margin: 0;
+  font-family: "Sora", "Noto Sans SC", sans-serif;
+  font-weight: 800;
+  font-size: clamp(2.8rem, 8vw, 5.2rem);
+  letter-spacing: 0.08em;
+  line-height: 1;
+}
+
+.clock-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 10px 18px;
+  color: var(--muted-strong);
+  font-size: 1rem;
+}
+
+.clock-meta span {
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.board-section {
+  padding-top: 24px;
+}
+
+.section-header {
+  margin-bottom: 18px;
+}
+
+.section-header h2,
+.admin-hero h1,
+.admin-card h2,
+.modal-head h3 {
+  margin: 6px 0 0;
+  font-family: "Sora", "Noto Sans SC", sans-serif;
+}
+
+.section-note,
+.admin-copy,
+.admin-card-copy {
+  color: var(--muted);
+}
+
+.board-grid {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  align-items: start;
+}
+
+.todo-column {
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  min-height: 460px;
+  animation: riseIn 360ms ease both;
+}
+
+.column-title {
+  margin: 6px 0 0;
+  font-size: 1.45rem;
+}
+
+.column-actions {
+  gap: 8px;
+}
+
+.menu-wrap {
+  position: relative;
+}
+
+.menu-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 140px;
+  padding: 8px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(8, 20, 32, 0.98);
+  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-6px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.menu-panel.is-open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.menu-panel button {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  padding: 12px 14px;
+  border-radius: 12px;
+  text-align: left;
+}
+
+.menu-panel button:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.icon-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  background: linear-gradient(180deg, rgba(123, 231, 234, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
+  color: var(--text);
+  font-size: 1.4rem;
+}
+
+.icon-button.muted {
+  font-size: 1.55rem;
+}
+
+.task-list {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.task-card {
+  padding: 16px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  display: grid;
+  gap: 14px;
+  position: relative;
+  overflow: hidden;
+}
+
+.task-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 1px;
+  background: linear-gradient(90deg, rgba(123, 231, 234, 0.6), transparent);
+}
+
+.task-copy {
+  flex: 1;
+}
+
+.task-copy h4 {
+  margin: 0 0 10px;
+  font-size: 1.08rem;
+}
+
+.meta-line {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.meta-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--muted-strong);
+  font-size: 0.88rem;
+}
+
+.progress-shell {
+  height: 10px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.progress-bar {
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #73d883 0%, #ffd166 55%, #ff6b5c 100%);
+  transition: width 360ms ease, filter 360ms ease;
+}
+
+.task-card.task-complete .progress-bar {
+  background: linear-gradient(90deg, #66d0ff 0%, #7be7ea 100%);
+}
+
+.task-card.task-complete h4 {
+  color: rgba(238, 244, 251, 0.66);
+  text-decoration: line-through;
+}
+
+.check-wrap {
+  position: relative;
+}
+
+.task-check {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.custom-check {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  border-radius: 8px;
+  border: 1.5px solid rgba(255, 255, 255, 0.36);
+  background: rgba(255, 255, 255, 0.02);
+  position: relative;
+  flex-shrink: 0;
+}
+
+.task-check:checked + .custom-check {
+  background: linear-gradient(135deg, #7be7ea 0%, #61d29f 100%);
+  border-color: transparent;
+}
+
+.task-check:checked + .custom-check::after {
+  content: "";
+  position: absolute;
+  left: 7px;
+  top: 3px;
+  width: 6px;
+  height: 12px;
+  border-right: 2px solid #082030;
+  border-bottom: 2px solid #082030;
+  transform: rotate(45deg);
+}
+
+body[data-authenticated="false"] .task-check,
+body[data-authenticated="false"] .icon-button,
+body[data-authenticated="false"] [data-rename-category] {
+  cursor: pointer;
+}
+
+body[data-authenticated="false"] .task-delete {
+  display: none;
+}
+
+.task-delete {
+  justify-self: flex-end;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.42);
+  padding: 0;
+}
+
+.empty-state {
+  min-height: 180px;
+  display: grid;
+  place-items: center;
+  text-align: center;
+  gap: 8px;
+  padding: 22px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.03);
+  color: var(--muted);
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(3, 10, 18, 0.64);
+  backdrop-filter: blur(10px);
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+  z-index: 30;
+}
+
+.modal-backdrop.is-open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.modal-card {
+  width: min(500px, 100%);
+  padding: 28px;
+  border-radius: 28px;
+}
+
+.modal-form {
+  display: grid;
+  gap: 14px;
+  margin-top: 18px;
+}
+
+.modal-form.compact {
+  margin-top: 10px;
+}
+
+.modal-form label {
+  display: grid;
+  gap: 8px;
+}
+
+.modal-form span {
+  color: var(--muted-strong);
+}
+
+.modal-form input {
+  width: 100%;
+  min-height: 50px;
+  padding: 0 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  outline: none;
+}
+
+.modal-form input:focus {
+  border-color: rgba(123, 231, 234, 0.7);
+  box-shadow: 0 0 0 3px rgba(123, 231, 234, 0.14);
+}
+
+.form-actions {
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 6px;
+}
+
+.toast-stack {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: grid;
+  gap: 10px;
+  z-index: 40;
+}
+
+.toast {
+  min-width: 220px;
+  max-width: 320px;
+  padding: 14px 16px;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(7, 18, 30, 0.96);
+  box-shadow: var(--shadow);
+  color: var(--text);
+  animation: riseIn 220ms ease both;
+}
+
+.toast.error {
+  border-color: rgba(255, 107, 92, 0.26);
+}
+
+.toast.success {
+  border-color: rgba(115, 216, 131, 0.24);
+}
+
+.admin-hero {
+  border-radius: var(--radius-xl);
+  padding: 28px;
+  margin-bottom: 22px;
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: center;
+}
+
+.admin-grid {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.admin-card {
+  border-radius: 26px;
+  padding: 22px;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.create-card {
+  border-style: dashed;
+  align-items: flex-start;
+}
+
+.create-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: grid;
+  place-items: center;
+  font-size: 2rem;
+  background: linear-gradient(135deg, rgba(123, 231, 234, 0.18) 0%, rgba(97, 210, 159, 0.12) 100%);
+}
+
+.task-count {
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--muted-strong);
+}
+
+@keyframes floatGlow {
+  0%, 100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3vw, 2vw, 0) scale(1.05);
+  }
+}
+
+@keyframes riseIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 840px) {
+  .hero-topbar,
+  .section-header,
+  .admin-hero {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .action-group {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .clock-display {
+    letter-spacing: 0.03em;
+  }
+
+  .clock-meta {
+    gap: 10px;
+  }
+}
+
+@media (max-width: 560px) {
+  .layout,
+  .admin-layout {
+    width: min(100% - 18px, 1340px);
+    padding-top: 18px;
+    padding-bottom: 32px;
+  }
+
+  .hero-card,
+  .todo-column,
+  .modal-card,
+  .admin-card,
+  .admin-hero {
+    padding: 18px;
+    border-radius: 24px;
+  }
+
+  .clock-display {
+    font-size: clamp(2.4rem, 16vw, 4.2rem);
+  }
+
+  .form-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .ghost-link,
+  .pill-button,
+  .primary-button,
+  .secondary-button,
+  .danger-button {
+    width: 100%;
+  }
+}

storage.py

@@ -0,0 +1,179 @@
+import json
+import threading
+import uuid
+from copy import deepcopy
+from datetime import datetime, timedelta
+from pathlib import Path
+from typing import Any
+from zoneinfo import ZoneInfo
+
+TZ = ZoneInfo("Asia/Shanghai")
+
+
+def beijing_now() -> datetime:
+    return datetime.now(TZ)
+
+
+def iso_now() -> str:
+    return beijing_now().isoformat()
+
+
+def make_id(prefix: str) -> str:
+    return f"{prefix}_{uuid.uuid4().hex[:10]}"
+
+
+class ReminderStore:
+    def __init__(self, path: Path):
+        self.path = path
+        self.lock = threading.Lock()
+        self.path.parent.mkdir(parents=True, exist_ok=True)
+        if not self.path.exists():
+            self._write(self._seed_data())
+
+    def _seed_data(self) -> dict[str, Any]:
+        now = beijing_now().replace(minute=0, second=0, microsecond=0)
+
+        def task(title: str, hours_from_now: int) -> dict[str, Any]:
+            created = now - timedelta(hours=max(hours_from_now - 4, 1))
+            due = now + timedelta(hours=hours_from_now)
+            return {
+                "id": make_id("task"),
+                "title": title,
+                "created_at": created.isoformat(),
+                "due_at": due.isoformat(),
+                "completed": False,
+                "completed_at": None,
+            }
+
+        return {
+            "categories": [
+                {
+                    "id": make_id("cat"),
+                    "name": "\u4eca\u65e5\u8282\u594f",
+                    "created_at": iso_now(),
+                    "tasks": [
+                        task("\u6574\u7406\u4eca\u5929\u7684\u91cd\u70b9\u4efb\u52a1", 10),
+                        task("\u665a\u95f4\u590d\u76d8 15 \u5206\u949f", 14),
+                    ],
+                },
+                {
+                    "id": make_id("cat"),
+                    "name": "\u5b66\u4e60\u63a8\u8fdb",
+                    "created_at": iso_now(),
+                    "tasks": [
+                        task("\u5b8c\u6210\u4e00\u8282\u8bfe\u7a0b\u5e76\u8bb0\u7b14\u8bb0", 26),
+                    ],
+                },
+                {
+                    "id": make_id("cat"),
+                    "name": "\u751f\u6d3b\u5b89\u6392",
+                    "created_at": iso_now(),
+                    "tasks": [
+                        task("\u8865\u5145\u4e0b\u5468\u9700\u8981\u91c7\u8d2d\u7684\u6e05\u5355", 40),
+                    ],
+                },
+            ]
+        }
+
+    def _read(self) -> dict[str, Any]:
+        with self.path.open("r", encoding="utf-8") as file:
+            return json.load(file)
+
+    def _write(self, data: dict[str, Any]) -> None:
+        temp_path = self.path.with_suffix(".tmp")
+        with temp_path.open("w", encoding="utf-8") as file:
+            json.dump(data, file, ensure_ascii=False, indent=2)
+        temp_path.replace(self.path)
+
+    def snapshot(self) -> dict[str, Any]:
+        with self.lock:
+            return deepcopy(self._read())
+
+    def list_categories(self) -> list[dict[str, Any]]:
+        data = self.snapshot()
+        categories = data.get("categories", [])
+        for category in categories:
+            category["tasks"] = sorted(
+                category.get("tasks", []),
+                key=lambda item: item.get("due_at", ""),
+            )
+        return categories
+
+    def create_category(self, name: str) -> dict[str, Any]:
+        with self.lock:
+            data = self._read()
+            category = {
+                "id": make_id("cat"),
+                "name": name,
+                "created_at": iso_now(),
+                "tasks": [],
+            }
+            data.setdefault("categories", []).append(category)
+            self._write(data)
+            return deepcopy(category)
+
+    def rename_category(self, category_id: str, name: str) -> dict[str, Any]:
+        with self.lock:
+            data = self._read()
+            for category in data.get("categories", []):
+                if category["id"] == category_id:
+                    category["name"] = name
+                    self._write(data)
+                    return deepcopy(category)
+        raise KeyError("Category not found")
+
+    def delete_category(self, category_id: str) -> None:
+        with self.lock:
+            data = self._read()
+            original_count = len(data.get("categories", []))
+            data["categories"] = [
+                category
+                for category in data.get("categories", [])
+                if category["id"] != category_id
+            ]
+            if len(data["categories"]) == original_count:
+                raise KeyError("Category not found")
+            self._write(data)
+
+    def add_task(self, category_id: str, title: str, due_at: str) -> dict[str, Any]:
+        with self.lock:
+            data = self._read()
+            for category in data.get("categories", []):
+                if category["id"] == category_id:
+                    item = {
+                        "id": make_id("task"),
+                        "title": title,
+                        "created_at": iso_now(),
+                        "due_at": due_at,
+                        "completed": False,
+                        "completed_at": None,
+                    }
+                    category.setdefault("tasks", []).append(item)
+                    self._write(data)
+                    return deepcopy(item)
+        raise KeyError("Category not found")
+
+    def toggle_task(self, task_id: str, completed: bool) -> dict[str, Any]:
+        with self.lock:
+            data = self._read()
+            for category in data.get("categories", []):
+                for task in category.get("tasks", []):
+                    if task["id"] == task_id:
+                        task["completed"] = completed
+                        task["completed_at"] = iso_now() if completed else None
+                        self._write(data)
+                        return deepcopy(task)
+        raise KeyError("Task not found")
+
+    def delete_task(self, task_id: str) -> None:
+        with self.lock:
+            data = self._read()
+            for category in data.get("categories", []):
+                original_count = len(category.get("tasks", []))
+                category["tasks"] = [
+                    task for task in category.get("tasks", []) if task["id"] != task_id
+                ]
+                if len(category["tasks"]) != original_count:
+                    self._write(data)
+                    return
+        raise KeyError("Task not found")

templates/admin.html

@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+{% block title %}DRM | 后台管理{% endblock %}
+{% block body %}
+  <main class="admin-layout">
+    <section class="admin-hero card-surface">
+      <div>
+        <p class="section-kicker">管理后台</p>
+        <h1>维护你的 todolist 分类</h1>
+        <p class="admin-copy">在这里可以新建或删除分类，首页会自动同步更新。</p>
+      </div>
+      <a class="pill-button accent" href="{{ url_for('index') }}">返回主页</a>
+    </section>
+
+    <section class="admin-grid" id="adminGrid">
+      <article class="admin-card create-card">
+        <div class="create-icon">+</div>
+        <h2>新建一个清单</h2>
+        <form id="createCategoryForm" class="modal-form compact">
+          <label>
+            <span>分类名称</span>
+            <input id="newCategoryName" name="name" type="text" maxlength="20" placeholder="例如：健康管理">
+          </label>
+          <button class="primary-button" type="submit">立即创建</button>
+        </form>
+      </article>
+
+      {% for category in categories %}
+        <article class="admin-card" data-category-id="{{ category.id }}">
+          <div class="admin-card-head">
+            <div>
+              <p class="column-label">Category</p>
+              <h2>{{ category.name }}</h2>
+            </div>
+            <span class="task-count">{{ category.tasks|length }} 项任务</span>
+          </div>
+          <p class="admin-card-copy">删除分类会同时移除其下全部任务，请谨慎操作。</p>
+          <button class="danger-button" type="button" data-delete-category="{{ category.id }}">删除此清单</button>
+        </article>
+      {% endfor %}
+    </section>
+  </main>
+
+  <div class="toast-stack" id="toastStack"></div>
+{% endblock %}
+{% block scripts %}
+  <script src="{{ url_for('static', filename='admin.js') }}"></script>
+{% endblock %}

templates/base.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{% block title %}Daily Reminder Master{% endblock %}</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=Noto+Sans+SC:wght@400;500;700;800&family=Sora:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    {% block head %}{% endblock %}
+  </head>
+  <body data-authenticated="{{ 'true' if authenticated else 'false' }}">
+    <div class="page-shell">
+      <div class="ambient ambient-one"></div>
+      <div class="ambient ambient-two"></div>
+      {% block body %}{% endblock %}
+    </div>
+    {% block scripts %}{% endblock %}
+  </body>
+</html>

templates/index.html

@@ -0,0 +1,176 @@
+{% extends "base.html" %}
+{% block title %}DRM | 提醒主页{% endblock %}
+{% block body %}
+  <main class="layout" data-next-path="{{ next_path }}">
+    <section class="hero-card">
+      <div class="hero-topbar">
+        <div class="brand-mark">
+          <span class="brand-dot"></span>
+          <span>Daily Reminder Master</span>
+        </div>
+        <div class="action-group">
+          <a class="ghost-link" href="{{ url_for('admin') }}">后台管理</a>
+          {% if authenticated %}
+            <button class="pill-button" id="logoutButton" type="button">退出登录</button>
+          {% else %}
+            <button class="pill-button accent" id="openLoginButton" type="button">登录后编辑</button>
+          {% endif %}
+        </div>
+      </div>
+      <div class="clock-wrap">
+        <p class="eyebrow">北京时间</p>
+        <h1 class="clock-display" id="clockDisplay">00:00:00</h1>
+        <div class="clock-meta">
+          <span id="dateDisplay">0000 年 00 月 00 日</span>
+          <span id="weekdayDisplay">{{ clock_meta.weekday }}</span>
+          <span id="lunarDisplay">农历加载中</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="board-section">
+      <div class="section-header">
+        <div>
+          <p class="section-kicker">今日待办板</p>
+          <h2>每个分类一列，专注当前最重要的事情</h2>
+        </div>
+        <p class="section-note">
+          {% if authenticated %}
+            已登录，可添加、勾选和重命名。
+          {% else %}
+            当前为只读模式，登录后可进行编辑。
+          {% endif %}
+        </p>
+      </div>
+
+      <div class="board-grid" id="boardGrid">
+        {% for category in categories %}
+          <article class="todo-column card-surface" data-category-id="{{ category.id }}">
+            <header class="column-header">
+              <div>
+                <p class="column-label">Todolist</p>
+                <h3 class="column-title">{{ category.name }}</h3>
+              </div>
+              <div class="column-actions">
+                <button class="icon-button" type="button" data-open-add="{{ category.id }}" aria-label="添加任务">+</button>
+                <div class="menu-wrap">
+                  <button class="icon-button muted" type="button" data-menu-trigger="{{ category.id }}" aria-label="分类设置">⋯</button>
+                  <div class="menu-panel" data-menu-panel="{{ category.id }}">
+                    <button type="button" data-rename-category="{{ category.id }}">重命名清单</button>
+                  </div>
+                </div>
+              </div>
+            </header>
+
+            <div class="task-list">
+              {% if category.tasks %}
+                {% for task in category.tasks %}
+                  <article class="task-card {% if task.completed %}task-complete{% endif %}" data-task-id="{{ task.id }}" data-created-at="{{ task.created_at }}" data-due-at="{{ task.due_at }}" data-completed="{{ 'true' if task.completed else 'false' }}">
+                    <div class="task-main">
+                      <label class="check-wrap">
+                        <input class="task-check" type="checkbox" {% if task.completed %}checked{% endif %} data-toggle-task="{{ task.id }}">
+                        <span class="custom-check"></span>
+                      </label>
+                      <div class="task-copy">
+                        <h4>{{ task.title }}</h4>
+                        <p class="meta-line">
+                          <span class="meta-badge due-time" data-due-label></span>
+                          <span class="meta-badge progress-text" data-progress-text></span>
+                        </p>
+                      </div>
+                    </div>
+                    <div class="progress-shell">
+                      <div class="progress-bar" data-progress-bar></div>
+                    </div>
+                    {% if authenticated %}
+                      <button class="task-delete" type="button" data-delete-task="{{ task.id }}">删除</button>
+                    {% endif %}
+                  </article>
+                {% endfor %}
+              {% else %}
+                <div class="empty-state">
+                  <p>这里还没有任务</p>
+                  <span>点击右上角的加号，给这个分类加上第一条提醒。</span>
+                </div>
+              {% endif %}
+            </div>
+          </article>
+        {% endfor %}
+      </div>
+    </section>
+  </main>
+
+  <div class="toast-stack" id="toastStack"></div>
+
+  <div class="modal-backdrop {% if login_required %}is-open{% endif %}" id="loginModal">
+    <div class="modal-card">
+      <div class="modal-head">
+        <p class="modal-kicker">安全登录</p>
+        <h3>输入密码后即可编辑待办</h3>
+      </div>
+      <form class="modal-form" id="loginForm">
+        <label>
+          <span>访问密码</span>
+          <input id="loginPassword" name="password" type="password" autocomplete="current-password" placeholder="请输入 PASSWORD">
+        </label>
+        <button class="primary-button" type="submit">立即登录</button>
+      </form>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="taskModal">
+    <div class="modal-card">
+      <div class="modal-head">
+        <p class="modal-kicker">新增任务</p>
+        <h3 id="taskModalTitle">添加提醒</h3>
+      </div>
+      <form class="modal-form" id="taskForm">
+        <input type="hidden" id="taskCategoryId" name="category_id">
+        <label>
+          <span>任务名称</span>
+          <input id="taskName" name="title" type="text" maxlength="40" placeholder="例如：准备明天的会议资料">
+        </label>
+        <label>
+          <span>截止日期（北京时间）</span>
+          <input id="taskDueAt" name="due_at" type="datetime-local" step="3600">
+        </label>
+        <div class="form-actions">
+          <button class="secondary-button" type="button" data-close-modal="taskModal">取消</button>
+          <button class="primary-button" type="submit">保存任务</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="renameModal">
+    <div class="modal-card">
+      <div class="modal-head">
+        <p class="modal-kicker">清单设置</p>
+        <h3>重命名当前 todolist</h3>
+      </div>
+      <form class="modal-form" id="renameForm">
+        <input type="hidden" id="renameCategoryId" name="category_id">
+        <label>
+          <span>新的分类名称</span>
+          <input id="renameCategoryName" name="name" type="text" maxlength="20" placeholder="例如：项目推进">
+        </label>
+        <div class="form-actions">
+          <button class="secondary-button" type="button" data-close-modal="renameModal">取消</button>
+          <button class="primary-button" type="submit">确认修改</button>
+        </div>
+      </form>
+    </div>
+  </div>
+{% endblock %}
+{% block scripts %}
+  <script>
+    window.__DRM_BOOTSTRAP__ = {
+      currentDateIso: {{ clock_meta.iso|tojson }},
+      loginRequired: {{ login_required|tojson }},
+      authenticated: {{ authenticated|tojson }},
+      nextPath: {{ next_path|tojson }},
+    };
+  </script>
+  <script src="{{ url_for('static', filename='app.js') }}"></script>
+{% endblock %}
+