134 lines
No EOL
6.8 KiB
HTML
134 lines
No EOL
6.8 KiB
HTML
<!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>
|
|
<a href="#albumsGrid" class="skip-link">Skip to albums</a>
|
|
<header class="header">
|
|
<div class="container">
|
|
<p class="supertitle">Rolling Stone Magazine's</p>
|
|
<h1 class="title">Top 500 Albums of All Time</h1>
|
|
<p class="subtitle">The Greatest Albums Ever Made - 2023 Edition</p>
|
|
<div class="header-theme-selector">
|
|
<label for="themeSelect" class="sr-only">Color theme</label>
|
|
<select id="themeSelect" class="theme-select-header" aria-label="Color theme">
|
|
<option value="">Gruvbox</option>
|
|
<option value="purple">Basic Blue</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="gruvbox-dark">Gruvbox Dark</option>
|
|
<option value="dracula">Dracula</option>
|
|
<option value="nord">Nord</option>
|
|
<option value="solarized">Solarized</option>
|
|
<option value="arc">Arc</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
<div class="container">
|
|
<div class="controls">
|
|
<div class="search-container">
|
|
<label for="searchInput" class="sr-only">Search albums and artists</label>
|
|
<input type="text" id="searchInput" placeholder="Search albums, artists..." class="search-input">
|
|
<button id="searchButton" class="search-button" aria-label="Search">
|
|
<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<label for="statusFilter" class="sr-only">Filter by status</label>
|
|
<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>
|
|
|
|
<div class="sort-controls">
|
|
<label for="sortBy" class="sr-only">Sort albums by</label>
|
|
<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" aria-label="Reverse sort order" aria-pressed="false">
|
|
<span id="reverseIcon" aria-hidden="true">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 6h18M3 12h18M3 18h18"></path>
|
|
<path d="M21 6l-2-2-2 2M21 18l-2 2-2 2"></path>
|
|
</svg>
|
|
</span>
|
|
<span id="reverseText">Reverse</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bookmark-controls">
|
|
<div class="jump-to-rank">
|
|
<label for="jumpToRank" class="sr-only">Jump to rank number</label>
|
|
<input type="number" id="jumpToRank" placeholder="Jump to..." min="1" max="500" class="rank-input">
|
|
<button id="jumpButton" class="jump-button" aria-label="Jump to rank">Go</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats" id="stats" role="region" aria-label="Album statistics">
|
|
<button type="button" class="stat-item" data-filter="">
|
|
<span class="stat-number" id="totalAlbums">500</span>
|
|
<span class="stat-label">Total Albums</span>
|
|
</button>
|
|
<button type="button" class="stat-item" data-filter="New in 2023">
|
|
<span class="stat-number" id="newAlbums">192</span>
|
|
<span class="stat-label">New in 2023</span>
|
|
</button>
|
|
<button type="button" class="stat-item" data-filter="improved">
|
|
<span class="stat-number" id="improvedAlbums">164</span>
|
|
<span class="stat-label">Improved</span>
|
|
</button>
|
|
<button type="button" class="stat-item" data-filter="dropped">
|
|
<span class="stat-number" id="droppedAlbums">113</span>
|
|
<span class="stat-label">Dropped</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Live region for screen reader announcements -->
|
|
<div aria-live="polite" aria-atomic="true" class="sr-only" id="resultsAnnouncement"></div>
|
|
|
|
<div class="albums-grid" id="albumsGrid" role="region" aria-label="Album list" tabindex="-1">
|
|
<!-- Albums will be loaded here by JavaScript -->
|
|
</div>
|
|
|
|
<div class="loading" id="loading" role="status" aria-live="polite">
|
|
<div class="loading-spinner" aria-hidden="true"></div>
|
|
<p>Loading albums...</p>
|
|
</div>
|
|
|
|
<div class="error" id="error" role="alert" 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> |