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>
24 lines
No EOL
930 B
XML
24 lines
No EOL
930 B
XML
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background circle -->
|
|
<circle cx="16" cy="16" r="15" fill="url(#grad1)" />
|
|
|
|
<!-- Vinyl record -->
|
|
<circle cx="16" cy="16" r="12" fill="#1a1a1a" />
|
|
|
|
<!-- Record grooves -->
|
|
<circle cx="16" cy="16" r="9" fill="none" stroke="#333" stroke-width="0.5" />
|
|
<circle cx="16" cy="16" r="7" fill="none" stroke="#333" stroke-width="0.5" />
|
|
|
|
<!-- Center hole -->
|
|
<circle cx="16" cy="16" r="3" fill="url(#grad1)" />
|
|
|
|
<!-- "500" text -->
|
|
<text x="16" y="28" font-family="Arial, sans-serif" font-size="5" font-weight="bold" text-anchor="middle" fill="white">500</text>
|
|
</svg> |