UX: remember sub/dub + filler toggle, hero time-left, next-ep CTA,

history filter chips, per-ep progress bars, stats in user menu

- sub/dub choice persists per anime (localStorage aniweb_lang_<slug>),
  so search/reload no longer drops dub watchers back to sub
- 'hide fillers' toggle persists (aniweb_ff)
- continue-watching hero shows '~Xm left' when position+duration known
- detail page: prominent 'next episode' button when the resumed ep is
  finished (auto-removed on play)
- ?history: all / watching / completed / on-hold filter chips (client-side)
- ep list: thin progress bar on partially-watched episodes
- stats page link moved into the user menu (always reachable)
- search results show a count line
This commit is contained in:
jozamudi committed 2026-08-24 17:38:11 +00:00
1 parent 1be3f4f307
commit 1de58629a0
3 files changed
+52 -11

No files matched your search

+5 -2
View File
@@ -6,15 +6,16 @@ header { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1.2rem;
border-bottom: 1px solid var(--bd); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.logo { font-weight: 700; font-size: 1.2rem; color: var(--acc); }
header form { flex: 1; max-width: 420px; }
button.tiny { padding: .2rem .55rem; font-size: .8rem; border-radius: 6px;
button.tiny, a.tiny { padding: .2rem .55rem; font-size: .8rem; border-radius: 6px;
border: 1px solid var(--bd); background: var(--card); color: var(--fg); cursor: pointer; }
a.tiny:hover { border-color: var(--acc); }
button.tiny.danger { border-color: #7f1d1d; color: #f87171; }
#menubox { position: relative; }
#menu-items { display: none; position: absolute; right: 0; top: calc(100% + 4px);
background: var(--card); border: 1px solid var(--bd); border-radius: 8px;
padding: .35rem; min-width: 160px; z-index: 2; }
#menubox.open #menu-items { display: block; }
#menu-items button { display: block; width: 100%; text-align: left; margin-top: .15rem; }
#menu-items button, #menu-items a { display: block; width: 100%; text-align: left; margin-top: .15rem; }
header #me { margin-left: auto; }
#q { width: 100%; padding: 0.5rem 0.8rem; border-radius: 8px; border: 1px solid var(--bd);
background: var(--card); color: var(--fg); }
@@ -71,6 +72,8 @@ h2 { margin: 0.4rem 0; }
.sa-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-anime .bar { grid-column: 2 / 4; margin-top: 0; }
.card.hold { opacity: .55; }
.chips { display: flex; gap: .4rem; margin: .5rem 0 .8rem; }
.ep .bar { height: 3px; margin-top: .3rem; }
.detail-prog { margin-top: .1rem; font-size: .85rem; }
.mini-info { display: flex; flex-direction: column; padding: .5rem; }
.mini-meta { font-size: .75rem; color: var(--muted); margin-top: .1rem; }