Spaces:

BurAndBY
/

melodymetrics-groove-guru

Running

App Files Files Community

BurAndBY commited on Oct 5, 2025

Commit

183d52c

verified ·

1 Parent(s): e505666

Redesign

Browse files

Files changed (1) hide show

index.html +78 -60

index.html CHANGED Viewed

@@ -8,74 +8,82 @@
     <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=Rubik+Mono+One&family=Permanent+Marker&display=swap');
         body {
-            font-family: 'Permanent Marker', cursive;
-            background-color: #000;
             color: #fff;
         }
         .gradient-text {
-            background: linear-gradient(45deg, #ff0000, #ff4d00);
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
-            text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
         }
-        .punk-card {
-            background: #111;
-            border: 3px solid #ff0000;
-            border-radius: 0;
-            box-shadow: 5px 5px 0 #ff4d00;
         }
-        .wave-animation {
-            animation: headbang 0.5s ease-in-out infinite alternate;
         }
-        @keyframes headbang {
-            0% { transform: rotate(-5deg); }
-            100% { transform: rotate(5deg); }
-        }
-        .punk-button {
-            background: #ff0000;
-            border: 2px solid #000;
-            border-radius: 0;
-            font-weight: bold;
             text-transform: uppercase;
             letter-spacing: 1px;
             transition: all 0.3s;
         }
-        .punk-button:hover {
-            background: #000;
-            color: #ff0000;
-            border-color: #ff0000;
             transform: translateY(-2px);
         }
         .title-font {
-            font-family: 'Rubik Mono One', sans-serif;
         }
     </style>
 </head>
-<body class="bg-black text-white min-h-screen">
-    <div id="waves-bg" class="fixed inset-0 -z-10 bg-black"></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 punk-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="punk-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-red-500 mb-4 wave-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">
@@ -92,12 +100,12 @@
                             <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="punk-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>
@@ -133,7 +141,7 @@
             <!-- Main Content -->
             <div class="lg:col-span-2 space-y-6">
-                <div class="punk-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>
@@ -165,7 +173,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="punk-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>
@@ -209,7 +217,7 @@
                         <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>
@@ -242,22 +250,32 @@
     </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 Vanta.js waves background with red theme
-        VANTA.WAVES({
-            el: "#waves-bg",
             mouseControls: true,
             touchControls: true,
             gyroControls: false,
-            color: 0xff0000,
-            shininess: 80.00,
-            waveHeight: 20.00,
-            waveSpeed: 1.00,
-            zoom: 0.65
         });
 // Initialize feather icons
         feather.replace();

     <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">
                             <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>
             <!-- 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>
                         </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>
                         <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>
     </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();