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>
41 lines
No EOL
867 B
HTML
41 lines
No EOL
867 B
HTML
|
|
<!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> |