fce2c6ff1e
- 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>
123 lines
No EOL
5.6 KiB
HTML
123 lines
No EOL
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Top 500 Albums of All Time</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<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>
|
|
|
|
<main class="main">
|
|
<div class="container">
|
|
<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">
|
|
<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">
|
|
<select id="statusFilter" class="filter-select">
|
|
<option value="">All Albums</option>
|
|
<option value="New in 2023">New in 2023</option>
|
|
<option value="improved">Improved Ranking</option>
|
|
<option value="dropped">Dropped Ranking</option>
|
|
<option value="No change">No Change</option>
|
|
</select>
|
|
|
|
<select id="sortBy" class="filter-select">
|
|
<option value="rank">Sort by Rank</option>
|
|
<option value="artist">Sort by Artist</option>
|
|
<option value="album">Sort by Album</option>
|
|
<option value="year">Sort by Year</option>
|
|
</select>
|
|
|
|
<button id="reverseButton" class="reverse-button" title="Reverse order">
|
|
<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..." min="1" max="500" class="rank-input">
|
|
<button id="jumpButton" class="jump-button" title="Jump to rank">Go</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats" id="stats">
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="totalAlbums">500</span>
|
|
<span class="stat-label">Total Albums</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="newAlbums">192</span>
|
|
<span class="stat-label">New in 2023</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="improvedAlbums">164</span>
|
|
<span class="stat-label">Improved</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-number" id="droppedAlbums">113</span>
|
|
<span class="stat-label">Dropped</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="albums-grid" id="albumsGrid">
|
|
<!-- Albums will be loaded here by JavaScript -->
|
|
</div>
|
|
|
|
<div class="loading" id="loading">
|
|
<div class="loading-spinner"></div>
|
|
<p>Loading albums...</p>
|
|
</div>
|
|
|
|
<div class="error" id="error" style="display: none;">
|
|
<p>Error loading albums. Please try again later.</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2023 Top 500 Albums. Data sourced from Rolling Stone and Wikipedia.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |