25f453e3d9
- Create responsive HTML/CSS/JS website for Top 500 Albums - Add modern design with gradient background and glassmorphism effects - Implement search, filtering, and sorting functionality - Add reverse button for toggling sort order - Create bookmark system with jump-to-rank functionality - Add individual album share buttons with state preservation - Implement URL parameter handling for shareable links - Add favicon with vinyl record design - Create mobile-responsive layout with larger album covers - Add smooth animations and visual feedback throughout - Smart URL management: clean URLs for rank 1, parameterized for others 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
100 lines
No EOL
4.2 KiB
HTML
100 lines
No EOL
4.2 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">
|
|
<h1 class="title">Top 500 Albums of All Time</h1>
|
|
<p class="subtitle">The Greatest Albums Ever Made - 2023 Edition</p>
|
|
</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">🔍</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">↕️</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">
|
|
<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> |