- 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>
77 lines
No EOL
2.3 KiB
Python
77 lines
No EOL
2.3 KiB
Python
#!/usr/bin/env python3
|
|
"""
|
|
Create a favicon for the Top 500 Albums website
|
|
"""
|
|
|
|
from PIL import Image, ImageDraw, ImageFont
|
|
import os
|
|
|
|
def create_favicon():
|
|
# Create a new image with transparent background
|
|
size = 32
|
|
img = Image.new('RGBA', (size, size), (0, 0, 0, 0))
|
|
draw = ImageDraw.Draw(img)
|
|
|
|
# Create gradient background (simulate with filled circle)
|
|
# Purple/blue gradient colors
|
|
colors = [(102, 126, 234), (118, 75, 162)] # #667eea to #764ba2
|
|
|
|
# Draw background circle
|
|
margin = 1
|
|
draw.ellipse([margin, margin, size-margin, size-margin],
|
|
fill=(102, 126, 234), outline=None)
|
|
|
|
# Draw vinyl record
|
|
record_margin = 4
|
|
draw.ellipse([record_margin, record_margin, size-record_margin, size-record_margin],
|
|
fill=(26, 26, 26), outline=None)
|
|
|
|
# Draw center hole
|
|
center = size // 2
|
|
hole_radius = 3
|
|
draw.ellipse([center-hole_radius, center-hole_radius,
|
|
center+hole_radius, center+hole_radius],
|
|
fill=(102, 126, 234), outline=None)
|
|
|
|
# Draw grooves
|
|
for r in range(6, 12, 2):
|
|
draw.ellipse([center-r, center-r, center+r, center+r],
|
|
fill=None, outline=(51, 51, 51), width=1)
|
|
|
|
# Try to add "500" text
|
|
try:
|
|
# Use default font, small size
|
|
font = ImageFont.load_default()
|
|
text = "500"
|
|
|
|
# Get text size
|
|
bbox = draw.textbbox((0, 0), text, font=font)
|
|
text_width = bbox[2] - bbox[0]
|
|
text_height = bbox[3] - bbox[1]
|
|
|
|
# Center text at bottom
|
|
x = (size - text_width) // 2
|
|
y = size - text_height - 2
|
|
|
|
draw.text((x, y), text, fill=(255, 255, 255), font=font)
|
|
except:
|
|
# If font fails, just add a music note
|
|
draw.text((center-4, size-10), "♫", fill=(255, 255, 255))
|
|
|
|
# Save as PNG first
|
|
img.save('favicon-32x32.png', 'PNG')
|
|
|
|
# Create 16x16 version
|
|
img16 = img.resize((16, 16), Image.Resampling.LANCZOS)
|
|
img16.save('favicon-16x16.png', 'PNG')
|
|
|
|
# Create ICO file with multiple sizes
|
|
img.save('favicon.ico', format='ICO', sizes=[(16, 16), (32, 32)])
|
|
|
|
print("Favicon files created:")
|
|
print("- favicon.ico")
|
|
print("- favicon-16x16.png")
|
|
print("- favicon-32x32.png")
|
|
|
|
if __name__ == "__main__":
|
|
create_favicon() |