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 | Latest Chart</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> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script> | |
| <style> | |
| .movement-up { color: #10B981; } | |
| .movement-down { color: #EF4444; } | |
| .movement-new { color: #3B82F6; } | |
| .movement-re { color: #8B5CF6; } | |
| .movement-same { color: #6B7280; } | |
| .wave-bg { min-height: 100vh; } | |
| .animate-fade-in { animation: fadeIn 0.5s ease-in; } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div id="wave-bg" class="wave-bg"></div> | |
| <div class="relative z-10 container mx-auto px-4 py-8"> | |
| <header class="mb-8 text-center animate-fade-in"> | |
| <h1 class="text-4xl font-bold text-white drop-shadow-lg">ChartWave Tracker</h1> | |
| <p class="text-xl text-white mt-2">Your personal music chart tracker</p> | |
| </header> | |
| <main class="bg-white bg-opacity-90 backdrop-blur-lg rounded-xl shadow-xl overflow-hidden animate-fade-in"> | |
| <div class="p-6 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Current Chart</h2> | |
| <div class="flex space-x-3"> | |
| <button id="editBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center gap-2"> | |
| <i data-feather="edit-3" class="w-4 h-4"></i> Edit | |
| </button> | |
| <button id="newChartBtn" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition flex items-center gap-2"> | |
| <i data-feather="plus" class="w-4 h-4"></i> New Chart | |
| </button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto scrollbar-hide"> | |
| <table class="w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rank</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Song</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Artist(s)</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Peak</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Weeks</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Movement</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="chartTableBody"> | |
| <!-- Chart entries will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 bg-gray-50 border-t border-gray-200"> | |
| <button id="dropoutToggle" class="flex items-center text-gray-600 hover:text-indigo-600"> | |
| <i data-feather="chevron-down" class="w-4 h-4 mr-2"></i> | |
| <span>Show Dropouts</span> | |
| </button> | |
| <div id="dropoutSection" class="hidden mt-3"> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Songs that left the chart this week</h3> | |
| <div class="space-y-1" id="dropoutList"> | |
| <!-- Dropout entries will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <div id="newChartModal" class="fixed inset-0 z-50 hidden flex items-center justify-center bg-black bg-opacity-50"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Create New Chart</h3> | |
| <button id="closeModalBtn"><i data-feather="x" class="text-gray-500"></i></button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Chart Date</label> | |
| <input type="date" id="chartDateInput" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div class="flex justify-end space-x-3 pt-2"> | |
| <button id="cancelNewChartBtn" class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">Cancel</button> | |
| <button id="confirmNewChartBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">Create</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js waves background | |
| VANTA.WAVES({ | |
| el: "#wave-bg", | |
| color: 0x3b82f6, | |
| waveHeight: 20, | |
| shininess: 50, | |
| waveSpeed: 1, | |
| zoom: 0.8 | |
| }); | |
| // Sample chart data (would normally come from API/local storage) | |
| const currentChart = { | |
| date: "2023-11-20", | |
| entries: [ | |
| { rank: 1, song: "Cruel Summer", artists: "Taylor Swift", peak: 1, weeks: 12, movement: { type: "<>", change: 0 } }, | |
| { rank: 2, song: "Paint The Town Red", artists: "Doja Cat", peak: 1, weeks: 14, movement: { type: "<>", change: 0 } }, | |
| { rank: 3, song: "What Was I Made For?", artists: "Billie Eilish", peak: 3, weeks: 5, movement: { type: "+2", change: 2 } }, | |
| { rank: 4, song: "Dance The Night", artists: "Dua Lipa", peak: 2, weeks: 18, movement: { type: "-1", change: -1 } }, | |
| { rank: 5, song: "Fast Car", artists: "Luke Combs", peak: 2, weeks: 20, movement: { type: "-1", change: -1 } }, | |
| { rank: 6, song: "Last Night", artists: "Morgan Wallen", peak: 1, weeks: 32, movement: { type: "<>", change: 0 } }, | |
| { rank: 7, song: "Barbie World", artists: "Nicki Minaj, Ice Spice", peak: 7, weeks: 8, movement: { type: "<>", change: 0 } }, | |
| { rank: 8, song: "vampire", artists: "Olivia Rodrigo", peak: 1, weeks: 16, movement: { type: "<>", change: 0 } }, | |
| { rank: 9, song: "Bad Idea Right?", artists: "Olivia Rodrigo", peak: 7, weeks: 12, movement: { type: "NEW", change: 0 } }, | |
| { rank: 10, song: "Kill Bill", artists: "SZA", peak: 1, weeks: 42, movement: { type: "<>", change: 0 } } | |
| ], | |
| dropouts: [ | |
| { song: "Flowers", artists: "Miley Cyrus", peak: 1, weeks: 35 }, | |
| { song: "Die For You", artists: "The Weeknd", peak: 1, weeks: 30 } | |
| ] | |
| }; | |
| // Populate the chart table | |
| function populateChart() { | |
| const tableBody = document.getElementById('chartTableBody'); | |
| tableBody.innerHTML = ''; | |
| currentChart.entries.forEach(entry => { | |
| const row = document.createElement('tr'); | |
| row.className = 'hover:bg-gray-50'; | |
| // Determine movement class | |
| let movementClass = ''; | |
| let movementSymbol = ''; | |
| if (entry.movement.type === "+X") { | |
| movementClass = 'movement-up'; | |
| movementSymbol = `↑${entry.movement.change}`; | |
| } else if (entry.movement.type === "-X") { | |
| movementClass = 'movement-down'; | |
| movementSymbol = `↓${Math.abs(entry.movement.change)}`; | |
| } else if (entry.movement.type === "NEW") { | |
| movementClass = 'movement-new'; | |
| movementSymbol = 'NEW'; | |
| } else if (entry.movement.type === "RE") { | |
| movementClass = 'movement-re'; | |
| movementSymbol = 'RE'; | |
| } else { | |
| movementClass = 'movement-same'; | |
| movementSymbol = '↔'; | |
| } | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${entry.rank}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${entry.song}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| ${entry.artists.split(',').map(artist => { | |
| const trimmed = artist.trim(); | |
| // Only link main artists (simple check for this demo) | |
| if (trimmed === 'Taylor Swift' || trimmed === 'Doja Cat' || trimmed === 'Billie Eilish' || | |
| trimmed === 'Dua Lipa' || trimmed === 'Olivia Rodrigo' || trimmed === 'SZA') { | |
| return `<a href="artist.html?name=${encodeURIComponent(trimmed)}" class="text-indigo-600 hover:underline">${trimmed}</a>`; | |
| } else { | |
| return `<span>${trimmed}</span>`; | |
| } | |
| }).join(', ')} | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${entry.peak}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${entry.weeks}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium ${movementClass}">${movementSymbol}</td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| // Populate dropouts | |
| const dropoutList = document.getElementById('dropoutList'); | |
| dropoutList.innerHTML = ''; | |
| currentChart.dropouts.forEach(dropout => { | |
| const item = document.createElement('div'); | |
| item.className = 'text-sm text-gray-600'; | |
| item.innerHTML = `<span class="font-medium">${dropout.song}</span> by ${dropout.artists} (Peak: ${dropout.peak}, Weeks: ${dropout.weeks})`; | |
| dropoutList.appendChild(item); | |
| }); | |
| } | |
| // Toggle dropout section | |
| document.getElementById('dropoutToggle').addEventListener('click', function() { | |
| const section = document.getElementById('dropoutSection'); | |
| const icon = this.querySelector('i'); | |
| if (section.classList.contains('hidden')) { | |
| section.classList.remove('hidden'); | |
| feather.replace(); | |
| icon.setAttribute('data-feather', 'chevron-up'); | |
| } else { | |
| section.classList.add('hidden'); | |
| feather.replace(); | |
| icon.setAttribute('data-feather', 'chevron-down'); | |
| } | |
| feather.replace(); | |
| }); | |
| // New chart modal | |
| document.getElementById('newChartBtn').addEventListener('click', function() { | |
| document.getElementById('newChartModal').classList.remove('hidden'); | |
| // Set default date to 7 days after current chart | |
| const nextDate = new Date(currentChart.date); | |
| nextDate.setDate(nextDate.getDate() + 7); | |
| const formattedDate = nextDate.toISOString().split('T')[0]; | |
| document.getElementById('chartDateInput').value = formattedDate; | |
| }); | |
| document.getElementById('closeModalBtn').addEventListener('click', function() { | |
| document.getElementById('newChartModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('cancelNewChartBtn').addEventListener('click', function() { | |
| document.getElementById('newChartModal').classList.add('hidden'); | |
| }); | |
| document.getElementById('confirmNewChartBtn').addEventListener('click', function() { | |
| const selectedDate = document.getElementById('chartDateInput').value; | |
| alert(`New chart for ${selectedDate} would be created here (implementation would save data)`); | |
| document.getElementById('newChartModal').classList.add('hidden'); | |
| }); | |
| // Initialize on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| populateChart(); | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |