simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add modern UI enhancements over the classic redesign

Browse Source 
Layered progressive polish on the warm classic + brass theme:
- Card entrance animation on first mount (virtualizer-aware)
- Cursor-tracking brass spotlight border on cards
- Thumbnail skeleton shimmer until the poster paints
- Hover video preview after a short dwell (only when formats resolved)
- View Transition + blurred-poster ambient backdrop on player open
- Favorite heart pop + expanding ring on add
- ⌘K command palette (search, theme, density, reels, source/channel)
- Scroll-progress bar + back-to-top FAB
- Grid density toggle (comfortable/compact)
- Reels HUD: serif title, brass scrubber, muted-state pulse

All new motion respects prefers-reduced-motion; no JS/HTML structure
changes to the core grid/feed. New glue lives in frontend/js/enhance.js.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simon
2026-06-30 08:25:37 +00:00
parent 382a637b95
commit 138c3224de
11 changed files with 715 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/index.html
View File

@@ -7,10 +7,11 @@
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<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=Lobster&family=Space+Grotesk:wght@500;600&family=Sora:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Sora:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<div id="scroll-progress" class="scroll-progress" aria-hidden="true"></div>
<header class="top-bar">
<div class="logo">Jacuzzi</div>
<div class="search-container">
@@ -90,6 +91,13 @@
<option value="360">360p</option>
</select>
</div>
<div class="setting-item">
<label for="density-select">Grid Density</label>
<select id="density-select">
<option value="comfortable">Comfortable</option>
<option value="compact">Compact</option>
</select>
</div>
<div class="setting-item">
<label for="feed-end-select">Reels: On Video End</label>
<select id="feed-end-select">
@@ -166,6 +174,15 @@
<button id="update-banner-btn" type="button">Refresh</button>
</div>
<button id="back-to-top" class="back-to-top" type="button" title="Back to top" aria-label="Back to top">↑</button>
<div id="command-palette" class="command-palette" aria-hidden="true">
<div class="cmdk-box" role="dialog" aria-modal="true" aria-label="Command palette">
<input id="cmdk-input" class="cmdk-input" type="text" placeholder="Type a command or search… (⌘K)" autocomplete="off" spellcheck="false">
<div id="cmdk-list" class="cmdk-list" role="listbox"></div>
</div>
</div>
<script src="static/js/state.js"></script>
<script src="static/js/storage.js"></script>
<script src="static/js/player.js"></script>
@@ -174,6 +191,7 @@
<script src="static/js/feed.js"></script>
<script src="static/js/ui.js"></script>
<script src="static/js/version.js"></script>
<script src="static/js/enhance.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>