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

Add comprehensive website functionality with enhanced navigation and sharing

Browse source 
- 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>
This commit is contained in:
Johan Lundberg 2025-06-30 21:51:10 +02:00
parent 97ea973de0
commit 25f453e3d9
8 changed files with 1649 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

100
index.html Normal file
View file

@ -0,0 +1,100 @@
<!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>&copy; 2023 Top 500 Albums. Data sourced from Rolling Stone and Wikipedia.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>