Spaces:

BurAndBY
/

melodymetrics-groove-guru

Running

App Files Files Community

BurAndBY commited on Oct 5, 2025

Commit

6e297a7

verified ·

1 Parent(s): 183d52c

Redesign

Browse files

Files changed (1) hide show

index.html +75 -88

index.html CHANGED Viewed

@@ -7,83 +7,73 @@
     <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>
 <style>
-        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap');
         body {
             font-family: 'Space Grotesk', sans-serif;
-            background-color: #0f0f0f;
             color: #fff;
         }
         .gradient-text {
-            background: linear-gradient(90deg, #8A2BE2, #FF1493);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
         }
-        .glass-card {
-            background: rgba(20, 20, 20, 0.5);
             backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            transition: all 0.3s ease;
         }
-        .glass-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
         }
-        .modern-button {
-            background: linear-gradient(90deg, #8A2BE2, #FF1493);
             border: none;
-            border-radius: 50px;
             font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 1px;
             transition: all 0.3s;
         }
-        .modern-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
-        }
-        .pulse-animation {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.7); }
-            70% { box-shadow: 0 0 0 10px rgba(138, 43, 226, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); }
         }
-        .title-font {
-            font-weight: 700;
-            letter-spacing: -1px;
         }
     </style>
 </head>
-<body class="min-h-screen">
-    <div id="vanta-bg" class="fixed inset-0 -z-10 bg-gradient-to-b from-[#0f0f0f] to-[#1a1a2e]"></div>
-<header class="container mx-auto px-4 py-8">
         <div class="flex justify-between items-center">
-            <h1 class="text-5xl title-font gradiant-text flex items-center gap-4">
-                <i data-feather="music" class="text-[#FF1493]"></i>
-                <span class="gradient-text">MelodyMetrics</span>
             </h1>
-            <nav class="flex items-center gap-6">
-                <a href="#" class="text-white hover:text-[#8A2BE2] transition">Dashboard</a>
-                <a href="#" class="text-white hover:text-[#8A2BE2] transition">Discover</a>
-                <a href="#" class="text-white hover:text-[#8A2BE2] transition">Library</a>
-                <button class="flex items-center gap-2 px-8 py-3 modern-button">
-                    <i data-feather="user" class="text-white"></i>
-                    <span>Profile</span>
-                </button>
-            </nav>
-        </div>
     </header>
-<main class="container mx-auto px-4 py-8">
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
             <!-- Profile Section -->
             <div class="lg:col-span-1">
-                <div class="glass-card p-8 flex flex-col items-center">
-                    <img src="http://static.photos/music/320x240/42" alt="Profile" class="w-40 h-40 object-cover rounded-full mb-6 border-4 border-[#8A2BE2] pulse-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">
@@ -100,20 +90,20 @@
                             <p class="text-sm text-gray-300">Albums</p>
                         </div>
                     </div>
-                    <button class="flex items-center gap-2 px-8 py-3 modern-button mt-4">
-                        <i data-feather="plus"></i>
                         <span>Follow</span>
                     </button>
-</div>
-                <div class="glass-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-yellow-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>
@@ -141,13 +131,13 @@
             <!-- Main Content -->
             <div class="lg:col-span-2 space-y-6">
-                <div class="glass-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="bg-black border border-red-500 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>
@@ -155,16 +145,16 @@
                             <p class="text-lg font-semibold">The Weeknd</p>
                             <p class="text-sm text-gray-400">42 plays</p>
                         </div>
-                        <div class="bg-indigo-900/50 p-4 rounded-lg">
-                            <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="bg-indigo-900/50 p-4 rounded-lg">
-                            <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>
@@ -173,7 +163,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="glass-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>
@@ -217,14 +207,14 @@
                         <i data-feather="arrow-right" class="w-4 h-4"></i>
                     </button>
                 </div>
-                <div class="glass-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-red-500">
 <p class="font-medium">The Weeknd</p>
                             <p class="text-sm text-gray-400">1,042 plays</p>
                         </div>
@@ -250,32 +240,29 @@
     </main>
     <footer class="container mx-auto px-4 py-8 mt-12 text-center text-gray-400">
-        <div class="flex justify-center gap-8 mb-6">
-            <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
-            <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
-            <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
-            <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
-        </div>
-        <p class="text-gray-500">MelodyMetrics is not affiliated with Last.fm. Powered by the Last.fm API.</p>
-        <p class="mt-2 text-gray-500">© 2023 MelodyMetrics. All rights reserved.</p>
-</footer>
     <script>
-        // Initialize Vanta.js background
-        VANTA.NET({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x8a2be2,
-            backgroundColor: 0x0f0f0f,
-            points: 12.00,
-            maxDistance: 24.00,
-            spacing: 18.00
         });
 // Initialize feather icons
         feather.replace();

     <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">
             <!-- Profile Section -->
             <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">
                             <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>
             <!-- Main Content -->
             <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>
                             <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>
                         </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>
                         <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>
     </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>
+        // Initialize particles.js
+        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" }
+                }
+            }
         });
 // Initialize feather icons
         feather.replace();