Add comprehensive website functionality with enhanced navigation and sharing
- 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
parent
97ea973de0
commit
25f453e3d9
8 changed files with 1649 additions and 0 deletions
157
create-favicon.html
Normal file
157
create-favicon.html
Normal 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>
|
||||
77
create_favicon.py
Normal file
77
create_favicon.py
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
#!/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()
|
||||
59
create_simple_favicon.py
Normal file
59
create_simple_favicon.py
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
#!/usr/bin/env python3
|
||||
"""
|
||||
Create a simple favicon using basic drawing
|
||||
"""
|
||||
|
||||
def create_favicon_data():
|
||||
"""Create a simple 16x16 favicon as a data URL"""
|
||||
# Create a simple pattern for 16x16 favicon
|
||||
# This will be a simplified version of our design
|
||||
|
||||
favicon_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>'''
|
||||
|
||||
with open('favicon_generator.html', 'w') as f:
|
||||
f.write(favicon_html)
|
||||
|
||||
print("Created favicon_generator.html - open this in a browser to download the favicon")
|
||||
|
||||
if __name__ == "__main__":
|
||||
create_favicon_data()
|
||||
24
favicon.svg
Normal file
24
favicon.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 930 B |
41
favicon_generator.html
Normal file
41
favicon_generator.html
Normal 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>
|
||||
100
index.html
Normal file
100
index.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Top 500 Albums of All Time</title>
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<h1 class="title">Top 500 Albums of All Time</h1>
|
||||
<p class="subtitle">The Greatest Albums Ever Made - 2023 Edition</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main">
|
||||
<div class="container">
|
||||
<div class="controls">
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" placeholder="Search albums, artists..." class="search-input">
|
||||
<button id="searchButton" class="search-button">🔍</button>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<select id="statusFilter" class="filter-select">
|
||||
<option value="">All Albums</option>
|
||||
<option value="New in 2023">New in 2023</option>
|
||||
<option value="improved">Improved Ranking</option>
|
||||
<option value="dropped">Dropped Ranking</option>
|
||||
<option value="No change">No Change</option>
|
||||
</select>
|
||||
|
||||
<select id="sortBy" class="filter-select">
|
||||
<option value="rank">Sort by Rank</option>
|
||||
<option value="artist">Sort by Artist</option>
|
||||
<option value="album">Sort by Album</option>
|
||||
<option value="year">Sort by Year</option>
|
||||
</select>
|
||||
|
||||
<button id="reverseButton" class="reverse-button" title="Reverse order">
|
||||
<span id="reverseIcon">↕️</span>
|
||||
<span id="reverseText">Reverse</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="bookmark-controls">
|
||||
<div class="jump-to-rank">
|
||||
<input type="number" id="jumpToRank" placeholder="Jump to rank (default: 1)..." min="1" max="500" class="rank-input">
|
||||
<button id="jumpButton" class="jump-button" title="Jump to rank">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" id="stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="totalAlbums">500</span>
|
||||
<span class="stat-label">Total Albums</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="newAlbums">192</span>
|
||||
<span class="stat-label">New in 2023</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="improvedAlbums">164</span>
|
||||
<span class="stat-label">Improved</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" id="droppedAlbums">113</span>
|
||||
<span class="stat-label">Dropped</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="albums-grid" id="albumsGrid">
|
||||
<!-- Albums will be loaded here by JavaScript -->
|
||||
</div>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading albums...</p>
|
||||
</div>
|
||||
|
||||
<div class="error" id="error" style="display: none;">
|
||||
<p>Error loading albums. Please try again later.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© 2023 Top 500 Albums. Data sourced from Rolling Stone and Wikipedia.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
635
script.js
Normal file
635
script.js
Normal file
|
|
@ -0,0 +1,635 @@
|
|||
// Global variables
|
||||
let albumsData = [];
|
||||
let filteredData = [];
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 50;
|
||||
let isReversed = false;
|
||||
|
||||
// DOM elements
|
||||
const albumsGrid = document.getElementById('albumsGrid');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const statusFilter = document.getElementById('statusFilter');
|
||||
const sortBy = document.getElementById('sortBy');
|
||||
const reverseButton = document.getElementById('reverseButton');
|
||||
const jumpToRank = document.getElementById('jumpToRank');
|
||||
const jumpButton = document.getElementById('jumpButton');
|
||||
const loading = document.getElementById('loading');
|
||||
const error = document.getElementById('error');
|
||||
const stats = document.getElementById('stats');
|
||||
|
||||
// Initialize the application
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadAlbumsData();
|
||||
setupEventListeners();
|
||||
handleUrlParams();
|
||||
});
|
||||
|
||||
// Setup event listeners
|
||||
function setupEventListeners() {
|
||||
searchInput.addEventListener('input', debounce(handleSearch, 300));
|
||||
statusFilter.addEventListener('change', handleFilter);
|
||||
sortBy.addEventListener('change', handleSort);
|
||||
reverseButton.addEventListener('click', handleReverse);
|
||||
jumpButton.addEventListener('click', handleJumpToRank);
|
||||
jumpToRank.addEventListener('keypress', handleRankKeypress);
|
||||
|
||||
// Add scroll listener for infinite scroll
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
}
|
||||
|
||||
// Load albums data from CSV
|
||||
async function loadAlbumsData() {
|
||||
try {
|
||||
const response = await fetch('top_500_albums_2023.csv');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load data');
|
||||
}
|
||||
|
||||
const csvText = await response.text();
|
||||
albumsData = parseCSV(csvText);
|
||||
filteredData = [...albumsData];
|
||||
|
||||
hideLoading();
|
||||
renderAlbums();
|
||||
updateStats();
|
||||
|
||||
} catch (err) {
|
||||
console.error('Error loading data:', err);
|
||||
showError();
|
||||
}
|
||||
}
|
||||
|
||||
// Parse CSV data
|
||||
function parseCSV(csvText) {
|
||||
const lines = csvText.split('\n');
|
||||
const headers = lines[0].split(',').map(h => h.trim().replace(/"/g, ''));
|
||||
const albums = [];
|
||||
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
if (!line) continue;
|
||||
|
||||
// Handle CSV parsing with proper quote handling
|
||||
const values = parseCSVLine(line);
|
||||
if (values.length < headers.length) continue;
|
||||
|
||||
const album = {};
|
||||
headers.forEach((header, index) => {
|
||||
album[header] = values[index] ? values[index].replace(/"/g, '').trim() : '';
|
||||
});
|
||||
|
||||
// Convert rank to number
|
||||
album.Rank = parseInt(album.Rank) || 0;
|
||||
|
||||
// Extract year from Info field
|
||||
const yearMatch = album.Info ? album.Info.match(/\b(19|20)\d{2}\b/) : null;
|
||||
album.Year = yearMatch ? parseInt(yearMatch[0]) : null;
|
||||
|
||||
albums.push(album);
|
||||
}
|
||||
|
||||
return albums;
|
||||
}
|
||||
|
||||
// Parse a single CSV line handling quotes and commas
|
||||
function parseCSVLine(line) {
|
||||
const values = [];
|
||||
let current = '';
|
||||
let inQuotes = false;
|
||||
|
||||
for (let i = 0; i < line.length; i++) {
|
||||
const char = line[i];
|
||||
|
||||
if (char === '"') {
|
||||
inQuotes = !inQuotes;
|
||||
} else if (char === ',' && !inQuotes) {
|
||||
values.push(current);
|
||||
current = '';
|
||||
} else {
|
||||
current += char;
|
||||
}
|
||||
}
|
||||
|
||||
values.push(current);
|
||||
return values;
|
||||
}
|
||||
|
||||
// Render albums
|
||||
function renderAlbums() {
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
const albumsToShow = filteredData.slice(0, endIndex);
|
||||
|
||||
if (currentPage === 1) {
|
||||
albumsGrid.innerHTML = '';
|
||||
}
|
||||
|
||||
albumsToShow.slice(startIndex).forEach(album => {
|
||||
const albumCard = createAlbumCard(album);
|
||||
albumsGrid.appendChild(albumCard);
|
||||
});
|
||||
}
|
||||
|
||||
// Create album card element
|
||||
function createAlbumCard(album) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'album-card';
|
||||
card.setAttribute('data-rank', album.Rank);
|
||||
|
||||
const statusClass = getStatusClass(album.Status);
|
||||
const statusText = formatStatus(album.Status);
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="album-rank">#${album.Rank}</div>
|
||||
<div class="album-content">
|
||||
<div class="album-title">${escapeHtml(album.Album)}</div>
|
||||
<div class="album-artist">${escapeHtml(album.Artist)}</div>
|
||||
${album.Info ? `<div class="album-info">${escapeHtml(album.Info)}</div>` : ''}
|
||||
<div class="album-status ${statusClass}">${statusText}</div>
|
||||
${album.Description ? `<div class="album-description">${escapeHtml(album.Description)}</div>` : ''}
|
||||
</div>
|
||||
<div class="album-cover">
|
||||
<div class="album-cover-icon">🎵</div>
|
||||
</div>
|
||||
<button class="album-share" title="Share this album" data-rank="${album.Rank}">🔗</button>
|
||||
`;
|
||||
|
||||
// Add click handler to expand description
|
||||
const description = card.querySelector('.album-description');
|
||||
if (description) {
|
||||
description.addEventListener('click', function() {
|
||||
this.classList.toggle('expanded');
|
||||
});
|
||||
}
|
||||
|
||||
// Add click handler for share button
|
||||
const shareBtn = card.querySelector('.album-share');
|
||||
shareBtn.addEventListener('click', function(e) {
|
||||
e.stopPropagation(); // Prevent card click
|
||||
const rank = this.getAttribute('data-rank');
|
||||
handleAlbumShare(rank, this);
|
||||
});
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// Get CSS class for status
|
||||
function getStatusClass(status) {
|
||||
if (status === 'New in 2023') return 'status-new';
|
||||
if (status === 'No change') return 'status-no-change';
|
||||
if (status.startsWith('+')) return 'status-improved';
|
||||
if (status.startsWith('-')) return 'status-dropped';
|
||||
return 'status-no-change';
|
||||
}
|
||||
|
||||
// Format status text
|
||||
function formatStatus(status) {
|
||||
if (status === 'New in 2023') return 'New in 2023';
|
||||
if (status === 'No change') return 'No Change';
|
||||
if (status.startsWith('+')) return `↗ ${status}`;
|
||||
if (status.startsWith('-')) return `↘ ${status}`;
|
||||
return status;
|
||||
}
|
||||
|
||||
// Handle search
|
||||
function handleSearch(event) {
|
||||
const query = event.target.value.toLowerCase().trim();
|
||||
|
||||
if (!query) {
|
||||
filteredData = [...albumsData];
|
||||
} else {
|
||||
filteredData = albumsData.filter(album =>
|
||||
album.Artist.toLowerCase().includes(query) ||
|
||||
album.Album.toLowerCase().includes(query) ||
|
||||
(album.Description && album.Description.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
// Reset reverse state when searching
|
||||
resetReverse();
|
||||
|
||||
currentPage = 1;
|
||||
renderAlbums();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
// Handle filter
|
||||
function handleFilter(event) {
|
||||
const filterValue = event.target.value;
|
||||
|
||||
if (!filterValue) {
|
||||
filteredData = [...albumsData];
|
||||
} else if (filterValue === 'improved') {
|
||||
filteredData = albumsData.filter(album => album.Status.startsWith('+'));
|
||||
} else if (filterValue === 'dropped') {
|
||||
filteredData = albumsData.filter(album => album.Status.startsWith('-'));
|
||||
} else {
|
||||
filteredData = albumsData.filter(album => album.Status === filterValue);
|
||||
}
|
||||
|
||||
// Reset reverse state when filtering
|
||||
resetReverse();
|
||||
|
||||
currentPage = 1;
|
||||
renderAlbums();
|
||||
updateStats();
|
||||
}
|
||||
|
||||
// Handle sort
|
||||
function handleSort(event) {
|
||||
const sortValue = event.target.value;
|
||||
|
||||
filteredData.sort((a, b) => {
|
||||
let result;
|
||||
switch (sortValue) {
|
||||
case 'rank':
|
||||
result = a.Rank - b.Rank;
|
||||
break;
|
||||
case 'artist':
|
||||
result = a.Artist.localeCompare(b.Artist);
|
||||
break;
|
||||
case 'album':
|
||||
result = a.Album.localeCompare(b.Album);
|
||||
break;
|
||||
case 'year':
|
||||
const yearA = a.Year || 0;
|
||||
const yearB = b.Year || 0;
|
||||
result = yearB - yearA; // Most recent first
|
||||
break;
|
||||
default:
|
||||
result = 0;
|
||||
}
|
||||
|
||||
// Apply reverse if needed
|
||||
return isReversed ? -result : result;
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
renderAlbums();
|
||||
}
|
||||
|
||||
// Handle reverse
|
||||
function handleReverse() {
|
||||
isReversed = !isReversed;
|
||||
|
||||
// Update button appearance
|
||||
reverseButton.classList.toggle('reversed', isReversed);
|
||||
|
||||
// Reverse the current filtered data
|
||||
filteredData.reverse();
|
||||
|
||||
currentPage = 1;
|
||||
renderAlbums();
|
||||
}
|
||||
|
||||
// Reset reverse state
|
||||
function resetReverse() {
|
||||
if (isReversed) {
|
||||
isReversed = false;
|
||||
reverseButton.classList.remove('reversed');
|
||||
}
|
||||
}
|
||||
|
||||
// Handle infinite scroll
|
||||
function handleScroll() {
|
||||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000) {
|
||||
if (currentPage * itemsPerPage < filteredData.length) {
|
||||
currentPage++;
|
||||
renderAlbums();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update statistics
|
||||
function updateStats() {
|
||||
const total = filteredData.length;
|
||||
const newAlbums = filteredData.filter(album => album.Status === 'New in 2023').length;
|
||||
const improved = filteredData.filter(album => album.Status.startsWith('+')).length;
|
||||
const dropped = filteredData.filter(album => album.Status.startsWith('-')).length;
|
||||
|
||||
document.getElementById('totalAlbums').textContent = total;
|
||||
document.getElementById('newAlbums').textContent = newAlbums;
|
||||
document.getElementById('improvedAlbums').textContent = improved;
|
||||
document.getElementById('droppedAlbums').textContent = dropped;
|
||||
}
|
||||
|
||||
// Utility functions
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
loading.style.display = 'none';
|
||||
albumsGrid.style.display = 'grid';
|
||||
}
|
||||
|
||||
function showError() {
|
||||
loading.style.display = 'none';
|
||||
error.style.display = 'block';
|
||||
}
|
||||
|
||||
// Bookmark and navigation functions
|
||||
function handleUrlParams() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const hash = window.location.hash.slice(1);
|
||||
|
||||
// Handle rank from hash (#rank123) or query parameter (?rank=123)
|
||||
const rankFromHash = hash.match(/^rank(\d+)$/);
|
||||
const rankFromQuery = urlParams.get('rank');
|
||||
const targetRank = rankFromHash ? parseInt(rankFromHash[1]) :
|
||||
rankFromQuery ? parseInt(rankFromQuery) : null;
|
||||
|
||||
// Handle other URL parameters for filters/search first
|
||||
const search = urlParams.get('search');
|
||||
const status = urlParams.get('status');
|
||||
const sort = urlParams.get('sort');
|
||||
const reversed = urlParams.get('reversed') === 'true';
|
||||
|
||||
// Set up the state based on URL parameters
|
||||
let delay = 1000;
|
||||
|
||||
if (search) {
|
||||
searchInput.value = search;
|
||||
setTimeout(() => handleSearch({target: searchInput}), delay);
|
||||
delay += 100;
|
||||
}
|
||||
|
||||
if (status) {
|
||||
statusFilter.value = status;
|
||||
setTimeout(() => handleFilter({target: statusFilter}), delay);
|
||||
delay += 100;
|
||||
}
|
||||
|
||||
if (sort) {
|
||||
sortBy.value = sort;
|
||||
setTimeout(() => handleSort({target: sortBy}), delay);
|
||||
delay += 100;
|
||||
}
|
||||
|
||||
if (reversed) {
|
||||
setTimeout(() => handleReverse(), delay);
|
||||
delay += 100;
|
||||
}
|
||||
|
||||
// Finally, jump to the rank if specified
|
||||
if (targetRank) {
|
||||
setTimeout(() => jumpToRankWithCurrentState(targetRank), delay);
|
||||
}
|
||||
}
|
||||
|
||||
function handleJumpToRank() {
|
||||
const inputValue = jumpToRank.value.trim();
|
||||
let rank;
|
||||
|
||||
if (inputValue === '') {
|
||||
// Default to rank 1 if no input
|
||||
rank = 1;
|
||||
jumpToRank.value = '1';
|
||||
} else {
|
||||
rank = parseInt(inputValue);
|
||||
if (isNaN(rank) || rank < 1 || rank > 500) {
|
||||
alert('Please enter a valid rank between 1 and 500');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
jumpToRankNumber(rank);
|
||||
}
|
||||
|
||||
function handleRankKeypress(event) {
|
||||
if (event.key === 'Enter') {
|
||||
handleJumpToRank();
|
||||
}
|
||||
}
|
||||
|
||||
function jumpToRankNumber(rank) {
|
||||
if (!albumsData.length) return;
|
||||
|
||||
// Reset filters to show all albums by rank
|
||||
searchInput.value = '';
|
||||
statusFilter.value = '';
|
||||
sortBy.value = 'rank';
|
||||
isReversed = false;
|
||||
reverseButton.classList.remove('reversed');
|
||||
|
||||
// Reset data and apply rank sorting
|
||||
filteredData = [...albumsData];
|
||||
filteredData.sort((a, b) => a.Rank - b.Rank);
|
||||
|
||||
// Update URL - clear all params if jumping to rank 1, otherwise set rank
|
||||
if (rank === 1) {
|
||||
clearUrl();
|
||||
} else {
|
||||
updateUrl({rank});
|
||||
}
|
||||
|
||||
// Find the album card and scroll to it
|
||||
currentPage = Math.ceil(rank / itemsPerPage);
|
||||
renderAlbums();
|
||||
|
||||
// Wait for render then scroll
|
||||
setTimeout(() => scrollToRank(rank), 100);
|
||||
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function jumpToRankWithCurrentState(rank) {
|
||||
if (!albumsData.length) return;
|
||||
|
||||
// Don't reset filters - preserve current state
|
||||
// Just ensure the target album is visible in current filtered data
|
||||
|
||||
// Find the album card and scroll to it
|
||||
// First, make sure enough albums are loaded
|
||||
const albumInFiltered = filteredData.find(album => album.Rank === rank);
|
||||
if (albumInFiltered) {
|
||||
const indexInFiltered = filteredData.indexOf(albumInFiltered);
|
||||
currentPage = Math.ceil((indexInFiltered + 1) / itemsPerPage);
|
||||
renderAlbums();
|
||||
}
|
||||
|
||||
// Wait for render then scroll
|
||||
setTimeout(() => scrollToRank(rank), 100);
|
||||
|
||||
updateStats();
|
||||
}
|
||||
|
||||
function scrollToRank(rank) {
|
||||
const albumCard = document.querySelector(`[data-rank="${rank}"]`);
|
||||
if (albumCard) {
|
||||
albumCard.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
|
||||
// Highlight the album briefly
|
||||
albumCard.style.boxShadow = '0 0 20px rgba(102, 126, 234, 0.5)';
|
||||
albumCard.style.transform = 'scale(1.02)';
|
||||
|
||||
setTimeout(() => {
|
||||
albumCard.style.boxShadow = '';
|
||||
albumCard.style.transform = '';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function handleAlbumShare(rank, buttonElement) {
|
||||
const albumUrl = generateAlbumUrl(rank);
|
||||
|
||||
// Copy to clipboard
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(albumUrl).then(() => {
|
||||
showAlbumShareFeedback(buttonElement);
|
||||
}).catch(() => {
|
||||
fallbackCopyToClipboard(albumUrl, buttonElement);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyToClipboard(albumUrl, buttonElement);
|
||||
}
|
||||
}
|
||||
|
||||
function generateAlbumUrl(rank) {
|
||||
const baseUrl = window.location.origin + window.location.pathname;
|
||||
const params = new URLSearchParams();
|
||||
|
||||
// Add current state parameters
|
||||
if (statusFilter.value) {
|
||||
params.set('status', statusFilter.value);
|
||||
}
|
||||
|
||||
if (sortBy.value !== 'rank') {
|
||||
params.set('sort', sortBy.value);
|
||||
}
|
||||
|
||||
if (isReversed) {
|
||||
params.set('reversed', 'true');
|
||||
}
|
||||
|
||||
// Add search if present
|
||||
if (searchInput.value.trim()) {
|
||||
params.set('search', searchInput.value.trim());
|
||||
}
|
||||
|
||||
// Always add the rank for direct navigation
|
||||
params.set('rank', rank);
|
||||
|
||||
const queryString = params.toString();
|
||||
return queryString ? `${baseUrl}?${queryString}` : `${baseUrl}#rank${rank}`;
|
||||
}
|
||||
|
||||
function generateShareableUrl() {
|
||||
const baseUrl = window.location.origin + window.location.pathname;
|
||||
const params = new URLSearchParams();
|
||||
|
||||
// Add current filters/search
|
||||
if (searchInput.value.trim()) {
|
||||
params.set('search', searchInput.value.trim());
|
||||
}
|
||||
|
||||
if (statusFilter.value) {
|
||||
params.set('status', statusFilter.value);
|
||||
}
|
||||
|
||||
if (sortBy.value !== 'rank') {
|
||||
params.set('sort', sortBy.value);
|
||||
}
|
||||
|
||||
if (isReversed) {
|
||||
params.set('reversed', 'true');
|
||||
}
|
||||
|
||||
// If we're viewing a specific rank area, add it
|
||||
const visibleCards = document.querySelectorAll('.album-card');
|
||||
if (visibleCards.length > 0 && sortBy.value === 'rank' && !isReversed) {
|
||||
const firstVisibleRank = visibleCards[0].getAttribute('data-rank');
|
||||
if (firstVisibleRank) {
|
||||
params.set('rank', firstVisibleRank);
|
||||
}
|
||||
}
|
||||
|
||||
const queryString = params.toString();
|
||||
return queryString ? `${baseUrl}?${queryString}` : baseUrl;
|
||||
}
|
||||
|
||||
function updateUrl(options = {}) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (options.rank) {
|
||||
window.location.hash = `rank${options.rank}`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Update query parameters based on current state
|
||||
if (searchInput.value.trim()) {
|
||||
params.set('search', searchInput.value.trim());
|
||||
}
|
||||
|
||||
if (statusFilter.value) {
|
||||
params.set('status', statusFilter.value);
|
||||
}
|
||||
|
||||
if (sortBy.value !== 'rank') {
|
||||
params.set('sort', sortBy.value);
|
||||
}
|
||||
|
||||
if (isReversed) {
|
||||
params.set('reversed', 'true');
|
||||
}
|
||||
|
||||
const queryString = params.toString();
|
||||
const newUrl = queryString ?
|
||||
`${window.location.pathname}?${queryString}` :
|
||||
window.location.pathname;
|
||||
|
||||
window.history.replaceState({}, '', newUrl);
|
||||
}
|
||||
|
||||
function clearUrl() {
|
||||
// Clear both query parameters and hash
|
||||
window.history.replaceState({}, '', window.location.pathname);
|
||||
}
|
||||
|
||||
function showAlbumShareFeedback(buttonElement) {
|
||||
const originalText = buttonElement.innerHTML;
|
||||
buttonElement.innerHTML = '✓';
|
||||
buttonElement.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
buttonElement.innerHTML = originalText;
|
||||
buttonElement.classList.remove('copied');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function fallbackCopyToClipboard(text, buttonElement) {
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
if (buttonElement) {
|
||||
showAlbumShareFeedback(buttonElement);
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Unable to copy to clipboard. URL: ' + text);
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
556
styles.css
Normal file
556
styles.css
Normal file
|
|
@ -0,0 +1,556 @@
|
|||
/* Reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 2rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin-bottom: 0.5rem;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main {
|
||||
padding: 2rem 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.controls {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px 0 0 8px;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 0.75rem 1rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.search-button:hover {
|
||||
background: #5a6fd8;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.reverse-button {
|
||||
padding: 0.75rem 1rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reverse-button:hover {
|
||||
background: #5a6fd8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.reverse-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.reverse-button.reversed {
|
||||
background: #764ba2;
|
||||
}
|
||||
|
||||
.reverse-button.reversed:hover {
|
||||
background: #6a4190;
|
||||
}
|
||||
|
||||
#reverseIcon {
|
||||
font-size: 1.2rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.reverse-button.reversed #reverseIcon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* Bookmark controls */
|
||||
.bookmark-controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.jump-to-rank {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rank-input {
|
||||
width: 140px;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid #e1e5e9;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.rank-input:focus {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.jump-button {
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.jump-button:hover {
|
||||
background: #5a6fd8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.jump-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
/* Stats */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Albums grid */
|
||||
.albums-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.album-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: 300;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-cover::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(255,255,255,0.1) 2px,
|
||||
rgba(255,255,255,0.1) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.album-cover-icon {
|
||||
font-size: 4rem;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.album-share {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(102, 126, 234, 0.9);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.album-card:hover .album-share {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.album-share:hover {
|
||||
background: rgba(102, 126, 234, 1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.album-share:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.album-share.copied {
|
||||
background: rgba(23, 162, 184, 0.9);
|
||||
}
|
||||
|
||||
.album-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.album-rank {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.album-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.album-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.album-artist {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.album-info {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.album-status {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.status-new {
|
||||
background: #e8f5e8;
|
||||
color: #2d8f47;
|
||||
}
|
||||
|
||||
.status-improved {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.status-dropped {
|
||||
background: #ffeaea;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.status-no-change {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.album-description {
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-description.expanded {
|
||||
-webkit-line-clamp: unset;
|
||||
}
|
||||
|
||||
/* Loading and error states */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 3px solid rgba(255,255,255,0.3);
|
||||
border-top: 3px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 3rem 0;
|
||||
color: #ff6b6b;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: rgba(0,0,0,0.1);
|
||||
color: rgba(255,255,255,0.8);
|
||||
text-align: center;
|
||||
padding: 1.5rem 0;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filters {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reverse-button {
|
||||
min-width: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#reverseText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bookmark-controls {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rank-input {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.album-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.album-rank {
|
||||
min-width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.album-cover-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.album-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue