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

157
create-favicon.html Normal file
View file

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<title>Create Favicon</title>
</head>
<body>
<canvas id="canvas" width="32" height="32" style="border: 1px solid #000; transform: scale(10);"></canvas>
<br><br>
<button onclick="downloadFavicon()">Download Favicon</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create favicon design
function createFavicon() {
// Clear canvas
ctx.clearRect(0, 0, 32, 32);
// Background gradient (purple/blue theme)
const gradient = ctx.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#667eea');
gradient.addColorStop(1, '#764ba2');
// Fill background
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 32, 32);
// Add vinyl record design
ctx.fillStyle = '#1a1a1a';
ctx.beginPath();
ctx.arc(16, 16, 14, 0, 2 * Math.PI);
ctx.fill();
// Center hole
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(16, 16, 4, 0, 2 * Math.PI);
ctx.fill();
// Add grooves
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
for (let r = 6; r <= 12; r += 2) {
ctx.beginPath();
ctx.arc(16, 16, r, 0, 2 * Math.PI);
ctx.stroke();
}
// Add number "500" in small text
ctx.fillStyle = 'white';
ctx.font = 'bold 6px Arial';
ctx.textAlign = 'center';
ctx.fillText('500', 16, 28);
}
function downloadFavicon() {
// Create multiple sizes for ICO file
const sizes = [16, 32, 48];
const images = [];
sizes.forEach(size => {
const tempCanvas = document.createElement('canvas');
tempCanvas.width = size;
tempCanvas.height = size;
const tempCtx = tempCanvas.getContext('2d');
// Scale the design
const scale = size / 32;
tempCtx.scale(scale, scale);
// Redraw for this size
// Background gradient
const gradient = tempCtx.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#667eea');
gradient.addColorStop(1, '#764ba2');
tempCtx.fillStyle = gradient;
tempCtx.fillRect(0, 0, 32, 32);
// Vinyl record
tempCtx.fillStyle = '#1a1a1a';
tempCtx.beginPath();
tempCtx.arc(16, 16, 14, 0, 2 * Math.PI);
tempCtx.fill();
// Center hole
tempCtx.fillStyle = gradient;
tempCtx.beginPath();
tempCtx.arc(16, 16, 4, 0, 2 * Math.PI);
tempCtx.fill();
// Grooves
if (size >= 24) {
tempCtx.strokeStyle = '#333';
tempCtx.lineWidth = 1;
for (let r = 6; r <= 12; r += 2) {
tempCtx.beginPath();
tempCtx.arc(16, 16, r, 0, 2 * Math.PI);
tempCtx.stroke();
}
}
// "500" text (only for larger sizes)
if (size >= 24) {
tempCtx.fillStyle = 'white';
tempCtx.font = 'bold 6px Arial';
tempCtx.textAlign = 'center';
tempCtx.fillText('500', 16, 28);
}
// Convert to blob
const imageData = tempCtx.getImageData(0, 0, size, size);
images.push({size, imageData});
});
// Download as PNG (browsers don't support ICO creation directly)
const link = document.createElement('a');
link.download = 'favicon-32x32.png';
link.href = canvas.toDataURL();
link.click();
// Also create 16x16 version
const canvas16 = document.createElement('canvas');
canvas16.width = 16;
canvas16.height = 16;
const ctx16 = canvas16.getContext('2d');
ctx16.scale(0.5, 0.5);
const gradient16 = ctx16.createLinearGradient(0, 0, 32, 32);
gradient16.addColorStop(0, '#667eea');
gradient16.addColorStop(1, '#764ba2');
ctx16.fillStyle = gradient16;
ctx16.fillRect(0, 0, 32, 32);
ctx16.fillStyle = '#1a1a1a';
ctx16.beginPath();
ctx16.arc(16, 16, 14, 0, 2 * Math.PI);
ctx16.fill();
ctx16.fillStyle = gradient16;
ctx16.beginPath();
ctx16.arc(16, 16, 4, 0, 2 * Math.PI);
ctx16.fill();
const link16 = document.createElement('a');
link16.download = 'favicon-16x16.png';
link16.href = canvas16.toDataURL();
link16.click();
}
// Create the favicon on load
createFavicon();
</script>
</body>
</html>