root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): complete frontend redesign — DECK theme system

Browse source 
Redesigned the entire frontend with a new "DECK" aesthetic:

- 5 distinctive themes: Midnight, Daylight, Neon, Vapor, Matrix
- Compact pill-shaped sound buttons with category color bars
- Tab navigation: All Sounds / Favorites / Recently Added
- Horizontal category filter chips with color coding
- Fixed bottom control bar: Stop, Random, Party, Volume
- Responsive layout optimized for 800+ sounds
- Syne + Outfit typography pairing
- Party mode with animated gradient effects
- Search with clear button, "Now Playing" indicator
- Admin panel as modal overlay
- Subtle dot grid background pattern on dark themes

Replaces the previous Apple Music-style card layout with a dense,
efficient grid that scales properly for large sound libraries.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Bot 2026-03-01 01:39:52 +01:00
parent 1feb7b0836
commit ba8c07f347
4 changed files with 3291 additions and 838 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/index.html
View file

@ -4,10 +4,11 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Soundboard</title>
<!-- No tailwind script injection to avoid collision with our custom CSS structural layout -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet" />
<meta name="theme-color" content="#0b0b0f" />
<title>Jukebox</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=Syne:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script type="module" src="/src/main.tsx"></script>
</head>
@ -16,4 +17,4 @@
<div id="root"></div>
</body>
</html>
</html>