File size: 13,336 Bytes
1930fd7 d5859d0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 | <!DOCTYPE html>
<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>
|