generate random track descriptions via an animated dice button, with suggestions taken from using Deepseeks API
edb69f0
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Performance Analytics - Algorithmic Harmony Maestro</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8 pt-20"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white text-center mb-8"> | |
| Performance Analytics | |
| </h1> | |
| <p class="text-gray-300 text-center mb-12"> | |
| Track performance metrics and optimize your future creations | |
| </p> | |
| <!-- Platform Metrics --> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div class="glass rounded-2xl p-6"> | |
| <h2 class="text-2xl font-semibold text-white mb-6">Platform Performance</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Spotify Streams</span> | |
| <span class="text-green-400 font-semibold">12,458</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">SoundCloud Plays</span> | |
| <span class="text-blue-400 font-semibold">8,923</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Playlist Adds</span> | |
| <span class="text-purple-400 font-semibold">156</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass rounded-2xl p-6"> | |
| <h2 class="text-2xl font-semibold text-white mb-6">Engagement Metrics</h2> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Completion Rate</span> | |
| <span class="text-yellow-400 font-semibold">78%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Skip Rate</span> | |
| <span class="text-red-400 font-semibold">12%</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-300">Save Rate</span> | |
| <span class="text-green-400 font-semibold">8%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="glass rounded-2xl p-8 mb-8"> | |
| <h2 class="text-2xl font-semibold text-white mb-6">Performance Trends</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-800/30 rounded-lg p-4"> | |
| <canvas id="streamsChart" width="400" height="300"></canvas> | |
| </div> | |
| <div class="bg-gray-800/30 rounded-lg p-4"> | |
| <canvas id="engagementChart" width="400" height="300"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Algorithm Compatibility History --> | |
| <div class="glass rounded-2xl p-8"> | |
| <h2 class="text-2xl font-semibold text-white mb-6">Algorithm Fit Evolution</h2> | |
| <div class="bg-gray-800/30 rounded-lg p-4"> | |
| <canvas id="algorithmChart" width="400" height="300"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Streams Chart | |
| const streamsCtx = document.getElementById('streamsChart').getContext('2d'); | |
| new Chart(streamsCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'), | |
| datasets: [{ | |
| label: 'Spotify Streams', | |
| data: [3200, 4500, 3800, 5200, 6100, 7800], | |
| borderColor: '#8b5cf6', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1), | |
| tension: 0.4 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| labels: { color: 'white' } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { color: 'white' }, | |
| grid: { color: 'rgba(255, 255, 255, 0.1) | |
| }, | |
| x: { | |
| ticks: { color: 'white' }, | |
| grid: { color: 'rgba(255, 255, 255, 0.1) | |
| } | |
| } | |
| } | |
| }); | |
| // Engagement Chart | |
| const engagementCtx = document.getElementById('engagementChart').getContext('2d'); | |
| new Chart(engagementCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Track 1', 'Track 2', 'Track 3', 'Track 4'], | |
| datasets: [{ | |
| label: 'Completion Rate %', | |
| data: [72, 85, 78, 91], | |
| backgroundColor: [ | |
| 'rgba(139, 92, 246, 0.6), | |
| 'rgba(59, 130, 246, 0.6), | |
| 'rgba(236, 72, 153, 0.6), | |
| 'rgba(16, 185, 129, 0.6) | |
| ], | |
| borderColor: [ | |
| 'rgb(139, 92, 246)', | |
| 'rgb(59, 130, 246)', | |
| 'rgb(236, 72, 153)', | |
| 'rgb(16, 185, 129)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| labels: { color: 'white' } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100, | |
| ticks: { color: 'white' }, | |
| grid: { color: 'rgba(255, 255, 255, 0.1) | |
| }, | |
| x: { | |
| ticks: { color: 'white' }, | |
| grid: { color: 'rgba(255, 255, 255, 0.1) | |
| } | |
| } | |
| } | |
| }); | |
| // Algorithm Chart | |
| const algorithmCtx = document.getElementById('algorithmChart').getContext('2d'); | |
| new Chart(algorithmCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Skip Resistance', 'Replay Value', 'Playlist Fit', 'Loudness', 'Energy Curve'], | |
| datasets: [ | |
| { | |
| label: 'Current Track', | |
| data: [88, 92, 84, 95, 87], | |
| backgroundColor: 'rgba(139, 92, 246, 0.2), | |
| borderColor: '#8b5cf6', | |
| pointBackgroundColor: '#8b5cf6' | |
| }, | |
| { | |
| label: 'Platform Average', | |
| data: [72, 68, 61, 78, 65], | |
| backgroundColor: 'rgba(59, 130, 246, 0.2), | |
| borderColor: '#3b82f6', | |
| pointBackgroundColor: '#3b82f6' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| labels: { color: 'white' } | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { color: 'rgba(255, 255, 255, 0.1) | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { color: 'rgba(255, 255, 255, 0.1), | |
| grid: { color: 'rgba(255, 255, 255, 0.1), | |
| pointLabels: { color: 'white' }, | |
| ticks: { color: 'white', backdropColor: 'transparent' } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |