Build a private, personal-use app for maintaining weekly music charts. The app should show a “Hot 100”-style chart (number of entries can vary per week).
1930fd7
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChartWave Tracker | Archive</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .animate-fade-in { animation: fadeIn 0.5s ease-in; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .chart-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="mb-8 animate-fade-in"> | |
| <a href="index.html" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mb-4"> | |
| <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back to Current Chart | |
| </a> | |
| <h1 class="text-3xl font-bold text-gray-800">Chart Archive</h1> | |
| <p class="text-gray-600 mt-2">Browse through past weekly charts</p> | |
| </header> | |
| <main class="animate-fade-in"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="archiveGrid"> | |
| <!-- Chart cards will be populated here --> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Sample archive data (would normally come from API/local storage) | |
| const archiveData = [ | |
| { date: "2023-11-20", entries: 10, topSong: "Cruel Summer", topArtist: "Taylor Swift" }, | |
| { date: "2023-11-13", entries: 10, topSong: "Cruel Summer", topArtist: "Taylor Swift" }, | |
| { date: "2023-11-06", entries: 10, topSong: "Paint The Town Red", topArtist: "Doja Cat" }, | |
| { date: "2023-10-30", entries: 10, topSong: "Paint The Town Red", topArtist: "Doja Cat" }, | |
| { date: "2023-10-23", entries: 10, topSong: "What Was I Made For?", topArtist: "Billie Eilish" }, | |
| { date: "2023-10-16", entries: 10, topSong: "Dance The Night", topArtist: "Dua Lipa" }, | |
| { date: "2023-10-09", entries: 10, topSong: "Fast Car", topArtist: "Luke Combs" }, | |
| { date: "2023-10-02", entries: 10, topSong: "Last Night", topArtist: "Morgan Wallen" }, | |
| { date: "2023-09-25", entries: 10, topSong: "vampire", topArtist: "Olivia Rodrigo" }, | |
| { date: "2023-09-18", entries: 10, topSong: "Kill Bill", topArtist: "SZA" } | |
| ]; | |
| // Format date | |
| function formatChartDate(dateStr) { | |
| const date = new Date(dateStr); | |
| return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); | |
| } | |
| // Populate archive grid | |
| function populateArchive() { | |
| const grid = document.getElementById('archiveGrid'); | |
| grid.innerHTML = ''; | |
| archiveData.forEach(chart => { | |
| const card = document.createElement('a'); | |
| card.href = `index.html?date=${chart.date}`; | |
| card.className = 'chart-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300'; | |
| card.innerHTML = ` | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-xl font-semibold text-gray-800">${formatChartDate(chart.date)}</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-3"> | |
| <span>Entries</span> | |
| <span class="font-medium">${chart.entries}</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>#1 Song</span> | |
| <span class="font-medium">${chart.topSong}</span> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-100 text-sm text-gray-500"> | |
| <i data-feather="user" class="w-4 h-4 inline mr-1"></i> ${chart.topArtist} | |
| </div> | |
| </div> | |
| `; | |
| grid.appendChild(card); | |
| }); | |
| } | |
| // Initialize on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| populateArchive(); | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |