diff --git a/static/app.js b/static/app.js index 83fc4a6..da718b2 100644 --- a/static/app.js +++ b/static/app.js @@ -168,29 +168,22 @@ function showHome() { const cont = shows.filter(x => histClass(x) === "watching").slice(0, 6); const hold = shows.filter(x => histClass(x) === "hold").slice(0, 4); const done = shows.filter(x => histClass(x) === "done").slice(0, 6); - showSec("Continue watching", cont, [link("stats \u2192", "?stats"), - link("history \u2192", "?history")]); + showSec("Continue watching", cont, [link("history \u2192", "?history")]); showSec("On hold", hold, hold.length ? [link("history \u2192", "?history")] : []); showSec("Recently finished", done, done.length ? [link("history \u2192", "?history")] : []); - // 5. stats widget (compact, drill-down to ?stats) - const sw = el("div", null); + // 5. stats line (compact; full breakdown at ?stats) const sh = el("div", "sec-head"); - sh.append(el("h2", null, "Stats \u00b7 30d"), link("see all \u2192", "?stats")); - const load = el("p", "muted", "loading\u2026"); - sw.append(sh, load); - main.append(sw); + sh.append(el("h2", null, "Stats \u00b7 30d"), link("see all \u2192", "?stats"), + link("history \u2192", "?history")); + const sl = el("div", "muted", "loading\u2026"); + main.append(sh, sl); api("/api/stats?days=30").then(d => { - load.remove(); - sw.append(statsCards(d)); - const ta = topAnime(d, 3); - if (ta) sw.append(ta); - }).catch(() => load.remove()); + sl.textContent = `${fmtMin(d.watch_minutes)} watched \u00b7 ${d.episodes.started} eps` + + ` (${d.episodes.completed} finished) \u00b7 ${d.days_active} active days \u00b7` + + ` best streak ${d.best_streak}d \u00b7 ${d.on_hold} on hold`; + }).catch(() => sl.remove()); // 5b. watch-time heatmap (past year, shared with ?stats) main.append(heatSection()); - // 6. history widget (data already loaded, capped at 6) - const hh = el("div", "sec-head"); - hh.append(el("h2", null, "History"), link(`all ${history.length} \u2192`, "?history")); - main.append(hh, ...histBoard(history, 6)); } // ---------- search ---------- diff --git a/static/style.css b/static/style.css index 7bbdbcf..d62297e 100644 --- a/static/style.css +++ b/static/style.css @@ -56,7 +56,8 @@ h2 { margin: 0.4rem 0; } .grid.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .card.stat { padding: .8rem; gap: .2rem; } .stat-value { font-size: 1.3rem; font-weight: 700; } -.heat-wrap { overflow-x: auto; margin: .5rem 0 .3rem; } +.heat-wrap { overflow-x: auto; margin: .5rem 0 .3rem; background: var(--card); + border: 1px solid var(--bd); border-radius: 10px; padding: .7rem .8rem .5rem; } .heat-lbl { display: flex; gap: 3px; margin-bottom: 2px; } .heat-lbl .heat-lab { width: 14px; font-size: .65rem; color: var(--muted); white-space: nowrap; } .heat { display: flex; gap: 3px; } @@ -139,6 +140,8 @@ button.tiny.on { border-color: var(--acc); color: var(--acc); } .crumb { display: inline-block; font-size: .85rem; color: var(--muted); margin-bottom: .2rem; } .crumb:hover { color: var(--acc); } .sec-head { display: flex; align-items: baseline; gap: .8rem; } +.sec-head h2 { font-size: .95rem; font-weight: 600; text-transform: uppercase; + letter-spacing: .06em; color: var(--muted); margin: 1.2rem 0 .4rem; } .card.hist { position: relative; cursor: pointer; } .del { position: absolute; top: .35rem; right: .35rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--bd); background: rgba(14, 15, 19, .8);