lundberg/top500albums
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement comprehensive theme system and modernize UI

Browse source 
- Add 8 themes: Gruvbox (default), Basic Blue, Dark, Gruvbox Dark, Dracula, Nord, Solarized, Arc
- Replace emoji icons with clean SVG icons for search, reverse, and share buttons
- Add Rolling Stone Magazine's supertitle to header
- Implement theme selector in header with localStorage persistence
- Simplify jump-to-rank placeholder text to "Jump to..."
- Update all UI elements to use CSS custom properties for consistent theming
- Improve mobile responsiveness for theme selector and controls

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Johan Lundberg 2025-07-02 00:17:36 +02:00
parent ed8ad3c02a
commit fce2c6ff1e
3 changed files with 401 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

29
index.html
View file

@ -12,8 +12,21 @@
<body>
<header class="header">
<div class="container">
<p class="supertitle">Rolling Stone Magazine's</p>
<h1 class="title">Top 500 Albums of All Time</h1>
<p class="subtitle">The Greatest Albums Ever Made - 2023 Edition</p>
<div class="header-theme-selector">
<select id="themeSelect" class="theme-select-header" title="Choose theme">
<option value="">Gruvbox</option>
<option value="purple">Basic Blue</option>
<option value="dark">Dark</option>
<option value="gruvbox-dark">Gruvbox Dark</option>
<option value="dracula">Dracula</option>
<option value="nord">Nord</option>
<option value="solarized">Solarized</option>
<option value="arc">Arc</option>
</select>
</div>
</div>
</header>
@ -22,7 +35,12 @@
<div class="controls">
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search albums, artists..." class="search-input">
<button id="searchButton" class="search-button">🔍</button>
<button id="searchButton" class="search-button">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
</button>
</div>
<div class="filters">
@ -42,14 +60,19 @@
</select>
<button id="reverseButton" class="reverse-button" title="Reverse order">
<span id="reverseIcon">↕️</span>
<span id="reverseIcon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 6h18M3 12h18M3 18h18"></path>
<path d="M21 6l-2-2-2 2M21 18l-2 2-2 2"></path>
</svg>
</span>
<span id="reverseText">Reverse</span>
</button>
</div>
<div class="bookmark-controls">
<div class="jump-to-rank">
<input type="number" id="jumpToRank" placeholder="Jump to rank (default: 1)..." min="1" max="500" class="rank-input">
<input type="number" id="jumpToRank" placeholder="Jump to..." min="1" max="500" class="rank-input">
<button id="jumpButton" class="jump-button" title="Jump to rank">Go</button>
</div>
</div>