UI/UX polish: a11y, player controls, undo, stats ranges

- toasts: aria-live region + action button (used for history delete Undo)
- history cards: keyboard-reachable title link; delete = remove + Undo
  (re-POSTs the entry; no full list re-render)
- fail(): home/retry affordances instead of a dead-end error line
- per-view document.title + move focus to the new view on render
- player controls: episode jump (E#), auto-next toggle (persisted),
  picture-in-picture (when supported)
- auto-next off: 'Next: En' toast with Play instead of the countdown
- no-results search + empty home: recent-search chips (shared helper)
- stats: 30d/90d/1y period chips (api already supported days=N)
- search input: autocapitalize/spellcheck off; reduced-motion disables
  shimmer/toast animation; username in the menu on narrow screens
This commit is contained in:
jozamudi committed 2026-08-30 20:53:55 +00:00
1 parent 8f519b0251
commit c2461f8fba
3 files changed
+133 -27

No files matched your search

+2 -2
View File
@@ -12,7 +12,7 @@
<header>
<a class="logo" href="/">ani-web</a>
<form onsubmit="const q=document.getElementById('q').value.trim(); if(q) location='?q='+encodeURIComponent(q); return false">
<input id="q" placeholder="search anime…" autocomplete="off">
<input id="q" placeholder="search anime…" autocomplete="off" autocapitalize="off" spellcheck="false">
</form>
<span id="me" class="muted"></span>
<div id="menubox" style="display:none">
@@ -25,7 +25,7 @@
</div>
</header>
<main id="main"><p class="muted">Search for an anime to get started.</p></main>
<div id="toasts"></div>
<div id="toasts" aria-live="polite"></div>
<script src="hls.min.js"></script>
<script src="app.js"></script>
</body>