| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MelodyMetrics | Your Music Profile</title> |
| <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/particles.js/2.0.0/particles.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Rubik+Mono+One&display=swap'); |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| background-color: #0a0a0a; |
| color: #fff; |
| } |
| .gradient-text { |
| background: linear-gradient(90deg, #8a2be2, #00bfff); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .cyber-card { |
| background: rgba(20, 20, 30, 0.6); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(138, 43, 226, 0.3); |
| border-radius: 12px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.36); |
| } |
| .glow-animation { |
| animation: glow 2s ease-in-out infinite alternate; |
| } |
| @keyframes glow { |
| from { box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); } |
| to { box-shadow: 0 0 20px rgba(0, 191, 255, 0.7); } |
| } |
| .cyber-button { |
| background: linear-gradient(90deg, #8a2be2, #00bfff); |
| border: none; |
| border-radius: 8px; |
| font-weight: 500; |
| letter-spacing: 0.5px; |
| transition: all 0.3s; |
| color: white; |
| } |
| .cyber-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 20px rgba(138, 43, 226, 0.4); |
| } |
| .title-font { |
| font-family: 'Rubik Mono One', sans-serif; |
| } |
| </style> |
| </head> |
| <body class="bg-black text-white min-h-screen"> |
| <div id="particles-js" class="fixed inset-0 -z-10 bg-gradient-to-b from-black to-gray-900"></div> |
| <header class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <h1 class="text-4xl title-font gradiant-text flex items-center gap-2"> |
| <i data-feather="volume-2" class="text-red-500"></i> |
| <span class="gradient-text">MELODY<br>METRICS</span> |
| </h1> |
| <button class="flex items-center gap-2 px-6 py-3 cyber-button"> |
| <i data-feather="user" class="text-black"></i> |
| <span>ROCK ON</span> |
| </button> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-1"> |
| <div class="cyber-card p-6 flex flex-col items-center"> |
| <img src="http://static.photos/music/320x240/42" alt="Profile" class="w-32 h-32 object-cover border-4 border-purple-500 mb-4 rounded-full glow-animation"> |
| <h2 class="text-2xl font-bold mb-1">GrooveGuru</h2> |
| <p class="text-indigo-300 mb-4">Music Explorer Since 2018</p> |
| <div class="flex gap-4 mb-6"> |
| <div class="text-center"> |
| <p class="text-3xl font-bold">1,247</p> |
| <p class="text-sm text-gray-300">Scrobbles</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-3xl font-bold">428</p> |
| <p class="text-sm text-gray-300">Artists</p> |
| </div> |
| <div class="text-center"> |
| <p class="text-3xl font-bold">89</p> |
| <p class="text-sm text-gray-300">Albums</p> |
| </div> |
| </div> |
| <button class="flex items-center gap-2 px-6 py-3 punk-button"> |
| <i data-feather="plus"></i> |
| <span>Follow</span> |
| </button> |
| </div> |
| <div class="cyber-card p-6 mt-6"> |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> |
| <i data-feather="award"></i> |
| <span>Badges</span> |
| </h3> |
| <div class="grid grid-cols-3 gap-3"> |
| <div class="bg-black border border-red-500 p-2 flex flex-col items-center"> |
| <i data-feather="star" class="text-purple-400"></i> |
| <span class="text-xs mt-1">Golden Ear</span> |
| </div> |
| <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center"> |
| <i data-feather="trending-up" class="text-green-400"></i> |
| <span class="text-xs mt-1">Trendsetter</span> |
| </div> |
| <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center"> |
| <i data-feather="clock" class="text-blue-400"></i> |
| <span class="text-xs mt-1">Night Owl</span> |
| </div> |
| <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center"> |
| <i data-feather="headphones" class="text-purple-400"></i> |
| <span class="text-xs mt-1">Listener</span> |
| </div> |
| <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center"> |
| <i data-feather="zap" class="text-orange-400"></i> |
| <span class="text-xs mt-1">Power User</span> |
| </div> |
| <div class="bg-indigo-900 rounded-lg p-2 flex flex-col items-center"> |
| <i data-feather="heart" class="text-pink-400"></i> |
| <span class="text-xs mt-1">Loyal Fan</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-2 space-y-6"> |
| <div class="cyber-card p-6"> |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> |
| <i data-feather="bar-chart-2"></i> |
| <span>Your Weekly Stats</span> |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="cyber-card p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm text-gray-300">Top Artist</span> |
| <i data-feather="mic" class="text-pink-400"></i> |
| </div> |
| <p class="text-lg font-semibold">The Weeknd</p> |
| <p class="text-sm text-gray-400">42 plays</p> |
| </div> |
| <div class="cyber-card p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm text-gray-300">Top Track</span> |
| <i data-feather="music" class="text-blue-400"></i> |
| </div> |
| <p class="text-lg font-semibold">Blinding Lights</p> |
| <p class="text-sm text-gray-400">18 plays</p> |
| </div> |
| <div class="cyber-card p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm text-gray-300">Top Album</span> |
| <i data-feather="disc" class="text-purple-400"></i> |
| </div> |
| <p class="text-lg font-semibold">After Hours</p> |
| <p class="text-sm text-gray-400">36 plays</p> |
| </div> |
| </div> |
| </div> |
| <div class="cyber-card p-6"> |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> |
| <i data-feather="list"></i> |
| <span>Recently Played</span> |
| </h3> |
| <div class="space-y-4"> |
| <div class="flex items-center gap-4 p-3 hover:bg-red-900/20 border-b border-gray-800 transition"> |
| <img src="http://static.photos/music/200x200/1" alt="Track" class="w-12 h-12 rounded-lg"> |
| <div class="flex-1"> |
| <p class="font-medium">Save Your Tears</p> |
| <p class="text-sm text-gray-400">The Weeknd • After Hours</p> |
| </div> |
| <div class="text-sm text-gray-400">3 hours ago</div> |
| </div> |
| <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition"> |
| <img src="http://static.photos/music/200x200/2" alt="Track" class="w-12 h-12 rounded-lg"> |
| <div class="flex-1"> |
| <p class="font-medium">Levitating</p> |
| <p class="text-sm text-gray-400">Dua Lipa • Future Nostalgia</p> |
| </div> |
| <div class="text-sm text-gray-400">5 hours ago</div> |
| </div> |
| <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition"> |
| <img src="http://static.photos/music/200x200/3" alt="Track" class="w-12 h-12 rounded-lg"> |
| <div class="flex-1"> |
| <p class="font-medium">Stay</p> |
| <p class="text-sm text-gray-400">The Kid LAROI, Justin Bieber</p> |
| </div> |
| <div class="text-sm text-gray-400">Yesterday</div> |
| </div> |
| <div class="flex items-center gap-4 p-3 hover:bg-indigo-900/30 rounded-lg transition"> |
| <img src="http://static.photos/music/200x200/4" alt="Track" class="w-12 h-12 rounded-lg"> |
| <div class="flex-1"> |
| <p class="font-medium">good 4 u</p> |
| <p class="text-sm text-gray-400">Olivia Rodrigo • SOUR</p> |
| </div> |
| <div class="text-sm text-gray-400">Yesterday</div> |
| </div> |
| </div> |
| <button class="mt-4 flex items-center gap-2 text-indigo-300 hover:text-indigo-200 transition"> |
| <span>View All History</span> |
| <i data-feather="arrow-right" class="w-4 h-4"></i> |
| </button> |
| </div> |
| <div class="punk-card p-6"> |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-2"> |
| <i data-feather="heart"></i> |
| <span>Your Top Artists</span> |
| </h3> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="text-center"> |
| <img src="http://static.photos/music/200x200/5" alt="Artist" class="w-full aspect-square mb-2 mx-auto border-2 border-purple-500 rounded-lg"> |
| <p class="font-medium">The Weeknd</p> |
| <p class="text-sm text-gray-400">1,042 plays</p> |
| </div> |
| <div class="text-center"> |
| <img src="http://static.photos/music/200x200/6" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto"> |
| <p class="font-medium">Dua Lipa</p> |
| <p class="text-sm text-gray-400">873 plays</p> |
| </div> |
| <div class="text-center"> |
| <img src="http://static.photos/music/200x200/7" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto"> |
| <p class="font-medium">Billie Eilish</p> |
| <p class="text-sm text-gray-400">756 plays</p> |
| </div> |
| <div class="text-center"> |
| <img src="http://static.photos/music/200x200/8" alt="Artist" class="w-full aspect-square rounded-full mb-2 mx-auto"> |
| <p class="font-medium">Post Malone</p> |
| <p class="text-sm text-gray-400">689 plays</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="container mx-auto px-4 py-8 mt-12 text-center text-gray-400"> |
| <p>MelodyMetrics is not affiliated with Last.fm. Powered by the Last.fm API.</p> |
| <p class="mt-2">© 2023 MelodyMetrics. All rights reserved.</p> |
| </footer> |
|
|
| <script> |
| |
| particlesJS("particles-js", { |
| particles: { |
| number: { value: 80, density: { enable: true, value_area: 800 } }, |
| color: { value: ["#8a2be2", "#00bfff"] }, |
| shape: { type: "circle" }, |
| opacity: { value: 0.5, random: true }, |
| size: { value: 3, random: true }, |
| line_linked: { enable: true, distance: 150, color: "#8a2be2", opacity: 0.4, width: 1 }, |
| move: { enable: true, speed: 2, direction: "none", random: false, straight: false, out_mode: "out" } |
| }, |
| interactivity: { |
| detect_on: "canvas", |
| events: { |
| onhover: { enable: true, mode: "repulse" }, |
| onclick: { enable: true, mode: "push" } |
| } |
| } |
| }); |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
