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

41
favicon_generator.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head><title>Favicon Creator</title></head>
<body>
<canvas id="favicon" width="16" height="16"></canvas>
<script>
const canvas = document.getElementById('favicon');
const ctx = canvas.getContext('2d');
// Fill background with gradient-like color
ctx.fillStyle = '#667eea';
ctx.fillRect(0, 0, 16, 16);
// Draw record
ctx.fillStyle = '#1a1a1a';
ctx.beginPath();
ctx.arc(8, 8, 6, 0, 2 * Math.PI);
ctx.fill();
// Center hole
ctx.fillStyle = '#667eea';
ctx.beginPath();
ctx.arc(8, 8, 2, 0, 2 * Math.PI);
ctx.fill();
// Download as PNG
function download() {
const link = document.createElement('a');
link.download = 'favicon-16x16.png';
link.href = canvas.toDataURL();
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Auto download
setTimeout(download, 100);
</script>
</body>
</html>