Spaces:

hammadkhswati
/

hii

Running

App Files Files Community

hammadkhswati commited on May 3, 2025

Commit

f84d56e

verified ·

1 Parent(s): e2505bb

Add 2 files

Browse files

Files changed (2) hide show

index.html +535 -39
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -7,6 +7,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;600;800&family=Orbitron:wght@400;700&display=swap');
@@ -191,6 +193,107 @@
             transform: translate(-50%, -50%);
             mix-blend-mode: screen;
         }
     </style>
 </head>
 <body class="bg-gritty">
@@ -203,6 +306,62 @@
     <!-- Smoke Overlay -->
     <div class="smoke-effect"></div>
     <!-- Navigation -->
     <nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-gray-800">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
@@ -211,12 +370,26 @@
                 <span class="ml-2 text-xl red-glow hidden md:inline">SYNDICATES</span>
             </div>
-            <div class="hidden md:flex space-x-8">
                 <a href="#home" class="text-white hover:text-green-400 transition duration-300">HOME</a>
                 <a href="#syndicate" class="text-white hover:text-green-400 transition duration-300">THE SYNDICATE</a>
                 <a href="#tracks" class="text-white hover:text-green-400 transition duration-300">TRACKS</a>
                 <a href="#diaries" class="text-white hover:text-green-400 transition duration-300">PINDI DIARIES</a>
                 <a href="#contact" class="text-white hover:text-green-400 transition duration-300">CONTACT</a>
             </div>
             <div class="md:hidden">
@@ -234,10 +407,40 @@
                 <a href="#tracks" class="text-white hover:text-green-400 py-2">TRACKS</a>
                 <a href="#diaries" class="text-white hover:text-green-400 py-2">PINDI DIARIES</a>
                 <a href="#contact" class="text-white hover:text-green-400 py-2">CONTACT</a>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
     <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
         <div class="container mx-auto px-4 py-20 text-center">
@@ -466,6 +669,35 @@
                 </div>
             </div>
             <div class="text-center mt-12">
                 <a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-green-400 to-blue-500 rounded-lg font-bold text-white hover:from-green-500 hover:to-blue-600 transition duration-300">
                     VIEW ALL TRACKS
@@ -484,7 +716,7 @@
                 <div class="gallery-item relative rounded-lg overflow-hidden h-64">
                     <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd81b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="MMK in studio" class="w-full h-full object-cover">
                     <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 hover:opacity-80 transition duration-300 flex flex-col justify-end p-6">
-                        <h3 class="text-xl font-bold text-white mb-2">Studio Sessions</h3>
                         <p class="text-gray-300">Behind the scenes of our latest track</p>
                     </div>
                 </div>
@@ -535,6 +767,33 @@
                 </div>
             </div>
             <div class="text-center mt-12">
                 <a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg font-bold text-white hover:from-red-600 hover:to-yellow-600 transition duration-300">
                     MORE FROM THE DIARIES
@@ -572,6 +831,40 @@
                     </div>
                 </form>
                 <div class="mt-12 text-center">
                     <h3 class="text-2xl font-bold text-green-400 mb-4">OR FIND US HERE</h3>
                     <div class="flex justify-center space-x-6">
@@ -586,6 +879,61 @@
         </div>
     </section>
     <!-- Footer -->
     <footer class="bg-black py-12 border-t border-gray-900">
         <div class="container mx-auto px-4">
@@ -619,6 +967,190 @@
     </footer>
     <script>
         // Mobile Menu Toggle
         document.getElementById('menu-toggle').addEventListener('click', function() {
             const menu = document.getElementById('mobile-menu');
@@ -745,41 +1277,5 @@
             gsap.utils.toArray('.member-card, .track-card, .gallery-item').forEach(element => {
                 gsap.from(element, {
                     scrollTrigger: {
-                        trigger: element,
-                        start: "top 80%",
-                        toggleActions: "play none none none"
-                    },
-                    opacity: 0,
-                    y: 50,
-                    duration: 0.8,
-                    ease: "power2.out"
-                });
-            });
-            // Hero text animation
-            gsap.from("#home h1", {
-                duration: 1.5,
-                opacity: 0,
-                y: 50,
-                ease: "power3.out"
-            });
-            gsap.from("#home p", {
-                duration: 1.5,
-                opacity: 0,
-                y: 50,
-                delay: 0.3,
-                ease: "power3.out"
-            });
-            gsap.from("#home a", {
-                duration: 1.5,
-                opacity: 0,
-                y: 50,
-                delay: 0.6,
-                ease: "power3.out"
-            });
-        }
-    </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hammadkhswati/hii" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Changa:wght@400;600;800&family=Orbitron:wght@400;700&display=swap');
             transform: translate(-50%, -50%);
             mix-blend-mode: screen;
         }
+        /* Auth Modal Styles */
+        .auth-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            backdrop-filter: blur(5px);
+        }
+        .auth-content {
+            background: linear-gradient(135deg, #111 0%, #000 100%);
+            border: 1px solid var(--neon-green);
+            box-shadow: 0 0 20px rgba(0, 255, 157, 0.3);
+            width: 90%;
+            max-width: 400px;
+            margin: 100px auto;
+            padding: 30px;
+            border-radius: 10px;
+            position: relative;
+        }
+        .close-auth {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            color: var(--neon-green);
+            font-size: 24px;
+            cursor: pointer;
+        }
+        .auth-tabs {
+            display: flex;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #333;
+        }
+        .auth-tab {
+            padding: 10px 20px;
+            cursor: pointer;
+            color: #777;
+            font-weight: bold;
+        }
+        .auth-tab.active {
+            color: var(--neon-green);
+            border-bottom: 2px solid var(--neon-green);
+        }
+        .auth-form {
+            display: none;
+        }
+        .auth-form.active {
+            display: block;
+        }
+        /* Exclusive Content Styles */
+        .exclusive-content {
+            display: none;
+            background: rgba(0, 0, 0, 0.7);
+            border: 2px solid var(--blood-red);
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 10px;
+            box-shadow: 0 0 15px rgba(255, 0, 60, 0.3);
+        }
+        .user-avatar {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 2px solid var(--neon-green);
+            object-fit: cover;
+        }
+        /* Dashboard Styles */
+        .dashboard-nav {
+            background: rgba(20, 20, 20, 0.8);
+            border-bottom: 1px solid #333;
+            padding: 15px 0;
+        }
+        .dashboard-nav a {
+            color: #ccc;
+            margin-right: 20px;
+            transition: color 0.3s;
+        }
+        .dashboard-nav a:hover {
+            color: var(--neon-green);
+        }
+        .dashboard-nav a.active {
+            color: var(--neon-green);
+            border-bottom: 2px solid var(--neon-green);
+        }
     </style>
 </head>
 <body class="bg-gritty">
     <!-- Smoke Overlay -->
     <div class="smoke-effect"></div>
+    <!-- Auth Modal -->
+    <div id="auth-modal" class="auth-modal">
+        <div class="auth-content">
+            <span class="close-auth">&times;</span>
+            <div class="auth-tabs">
+                <div class="auth-tab active" data-tab="login">LOGIN</div>
+                <div class="auth-tab" data-tab="signup">SIGN UP</div>
+            </div>
+            <form id="login-form" class="auth-form active">
+                <div class="mb-4">
+                    <label for="login-email" class="block text-gray-300 mb-2">EMAIL</label>
+                    <input type="email" id="login-email" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Enter your email" required>
+                </div>
+                <div class="mb-6">
+                    <label for="login-password" class="block text-gray-300 mb-2">PASSWORD</label>
+                    <input type="password" id="login-password" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Enter your password" required>
+                </div>
+                <button type="submit" class="w-full btn-neon py-3 rounded-lg font-bold text-white focus:outline-none">
+                    ENTER THE SYNDICATE
+                </button>
+                <div class="text-center mt-4 text-gray-400">
+                    <a href="#" id="forgot-password" class="text-sm hover:text-green-400">Forgot password?</a>
+                </div>
+                <div id="login-error" class="mt-4 text-red-500 text-center hidden"></div>
+            </form>
+            <form id="signup-form" class="auth-form">
+                <div class="mb-4">
+                    <label for="signup-username" class="block text-gray-300 mb-2">USERNAME</label>
+                    <input type="text" id="signup-username" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Choose a username" required>
+                </div>
+                <div class="mb-4">
+                    <label for="signup-email" class="block text-gray-300 mb-2">EMAIL</label>
+                    <input type="email" id="signup-email" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Enter your email" required>
+                </div>
+                <div class="mb-6">
+                    <label for="signup-password" class="block text-gray-300 mb-2">PASSWORD</label>
+                    <input type="password" id="signup-password" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Create a password" required>
+                </div>
+                <button type="submit" class="w-full btn-neon py-3 rounded-lg font-bold text-white focus:outline-none">
+                    JOIN THE SYNDICATE
+                </button>
+                <div id="signup-error" class="mt-4 text-red-500 text-center hidden"></div>
+            </form>
+        </div>
+    </div>
     <!-- Navigation -->
     <nav class="fixed top-0 left-0 right-0 z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-gray-800">
         <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                 <span class="ml-2 text-xl red-glow hidden md:inline">SYNDICATES</span>
             </div>
+            <div class="hidden md:flex space-x-8 items-center">
                 <a href="#home" class="text-white hover:text-green-400 transition duration-300">HOME</a>
                 <a href="#syndicate" class="text-white hover:text-green-400 transition duration-300">THE SYNDICATE</a>
                 <a href="#tracks" class="text-white hover:text-green-400 transition duration-300">TRACKS</a>
                 <a href="#diaries" class="text-white hover:text-green-400 transition duration-300">PINDI DIARIES</a>
                 <a href="#contact" class="text-white hover:text-green-400 transition duration-300">CONTACT</a>
+                <div id="auth-buttons">
+                    <button id="login-btn" class="px-4 py-2 border border-green-400 text-green-400 rounded-lg hover:bg-green-400 hover:text-black transition duration-300">
+                        LOGIN
+                    </button>
+                </div>
+                <div id="user-menu" class="hidden flex items-center">
+                    <img id="user-avatar" src="https://via.placeholder.com/40" alt="User" class="w-8 h-8 rounded-full mr-2">
+                    <span id="username" class="text-white"></span>
+                    <button id="logout-btn" class="ml-4 text-red-400 hover:text-red-300">
+                        <i class="fas fa-sign-out-alt"></i>
+                    </button>
+                </div>
             </div>
             <div class="md:hidden">
                 <a href="#tracks" class="text-white hover:text-green-400 py-2">TRACKS</a>
                 <a href="#diaries" class="text-white hover:text-green-400 py-2">PINDI DIARIES</a>
                 <a href="#contact" class="text-white hover:text-green-400 py-2">CONTACT</a>
+                <div id="mobile-auth-buttons" class="pt-2 border-t border-gray-700">
+                    <button id="mobile-login-btn" class="w-full px-4 py-2 border border-green-400 text-green-400 rounded-lg hover:bg-green-400 hover:text-black transition duration-300">
+                        LOGIN
+                    </button>
+                </div>
+                <div id="mobile-user-menu" class="hidden pt-2 border-t border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <img id="mobile-user-avatar" src="https://via.placeholder.com/40" alt="User" class="w-8 h-8 rounded-full mr-2">
+                            <span id="mobile-username" class="text-white"></span>
+                        </div>
+                        <button id="mobile-logout-btn" class="text-red-400 hover:text-red-300">
+                            <i class="fas fa-sign-out-alt"></i>
+                        </button>
+                    </div>
+                </div>
             </div>
         </div>
     </nav>
+    <!-- Dashboard Navigation (Visible when logged in) -->
+    <div id="dashboard-nav" class="dashboard-nav hidden">
+        <div class="container mx-auto px-4">
+            <div class="flex">
+                <a href="#exclusive" class="active">EXCLUSIVE</a>
+                <a href="#profile">PROFILE</a>
+                <a href="#notifications">NOTIFICATIONS</a>
+                <a href="#merch">MERCH</a>
+            </div>
+        </div>
+    </div>
     <!-- Hero Section -->
     <section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden pt-20">
         <div class="container mx-auto px-4 py-20 text-center">
                 </div>
             </div>
+            <!-- Exclusive Content (Visible when logged in) -->
+            <div id="exclusive-tracks" class="exclusive-content">
+                <h3 class="text-2xl font-bold text-red-500 mb-6 text-center">SYNDICATE VAULT (EXCLUSIVE TRACKS)</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Exclusive Track 1 -->
+                    <div class="track-card bg-black bg-opacity-70 rounded-lg overflow-hidden border border-red-500 p-4 hover:border-red-400 transition duration-300">
+                        <div class="h-40 bg-cover bg-center mb-4 rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd81b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
+                        <h3 class="text-xl font-bold text-white mb-2">Underground Kingz</h3>
+                        <p class="text-gray-400 mb-4">MMK Syndicates</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-red-400"><i class="fas fa-lock-open mr-2"></i> EXCLUSIVE</span>
+                            <button class="text-red-400 hover:text-white"><i class="fas fa-play"></i></button>
+                        </div>
+                    </div>
+                    <!-- Exclusive Track 2 -->
+                    <div class="track-card bg-black bg-opacity-70 rounded-lg overflow-hidden border border-red-500 p-4 hover:border-red-400 transition duration-300">
+                        <div class="h-40 bg-cover bg-center mb-4 rounded-lg" style="background-image: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
+                        <h3 class="text-xl font-bold text-white mb-2">Pindi Don</h3>
+                        <p class="text-gray-400 mb-4">MMK Syndicates</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-red-400"><i class="fas fa-lock-open mr-2"></i> EXCLUSIVE</span>
+                            <button class="text-red-400 hover:text-white"><i class="fas fa-play"></i></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="text-center mt-12">
                 <a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-green-400 to-blue-500 rounded-lg font-bold text-white hover:from-green-500 hover:to-blue-600 transition duration-300">
                     VIEW ALL TRACKS
                 <div class="gallery-item relative rounded-lg overflow-hidden h-64">
                     <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd81b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="MMK in studio" class="w-full h-full object-cover">
                     <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 hover:opacity-80 transition duration-300 flex flex-col justify-end p-6">
+                        <h3 class="text-xl font-bold text-white mb-2">Studio Sessions</3>
                         <p class="text-gray-300">Behind the scenes of our latest track</p>
                     </div>
                 </div>
                 </div>
             </div>
+            <!-- Exclusive Gallery Content (Visible when logged in) -->
+            <div id="exclusive-gallery" class="exclusive-content mt-12">
+                <h3 class="text-2xl font-bold text-red-500 mb-6 text-center">SYNDICATE EYES ONLY</h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                    <!-- Exclusive Gallery Item 1 -->
+                    <div class="gallery-item relative rounded-lg overflow-hidden h-64">
+                        <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Exclusive content" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 hover:opacity-80 transition duration-300 flex flex-col justify-end p-6">
+                            <h3 class="text-xl font-bold text-white mb-2">Behind Bars</h3>
+                            <p class="text-gray-300">Recording the next banger</p>
+                            <span class="text-red-400 text-sm mt-2"><i class="fas fa-lock-open mr-1"></i> EXCLUSIVE</span>
+                        </div>
+                    </div>
+                    <!-- Exclusive Gallery Item 2 -->
+                    <div class="gallery-item relative rounded-lg overflow-hidden h-64">
+                        <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd81b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Exclusive content" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 hover:opacity-80 transition duration-300 flex flex-col justify-end p-6">
+                            <h3 class="text-xl font-bold text-white mb-2">Next Level</h3>
+                            <p class="text-gray-300">Planning the next move</p>
+                            <span class="text-red-400 text-sm mt-2"><i class="fas fa-lock-open mr-1"></i> EXCLUSIVE</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="text-center mt-12">
                 <a href="#" class="inline-block px-6 py-3 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg font-bold text-white hover:from-red-600 hover:to-yellow-600 transition duration-300">
                     MORE FROM THE DIARIES
                     </div>
                 </form>
+                <!-- Join Gang Form (Visible when logged in) -->
+                <div id="join-gang-form" class="exclusive-content mt-12">
+                    <h3 class="text-2xl font-bold text-red-500 mb-6 text-center">INITIATION REQUEST</h3>
+                    <form class="space-y-6">
+                        <div>
+                            <label for="gang-role" class="block text-gray-300 mb-2">WHAT'S YOUR ROLE?</label>
+                            <select id="gang-role" class="w-full px-4 py-3 input-field text-white focus:outline-none">
+                                <option value="">Select your role</option>
+                                <option value="producer">Producer</option>
+                                <option value="rapper">Rapper</option>
+                                <option value="videographer">Videographer</option>
+                                <option value="graphics">Graphics Designer</option>
+                                <option value="street-team">Street Team</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="gang-skills" class="block text-gray-300 mb-2">YOUR SKILLS</label>
+                            <textarea id="gang-skills" rows="3" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="What skills do you bring to the syndicate?"></textarea>
+                        </div>
+                        <div>
+                            <label for="gang-links" class="block text-gray-300 mb-2">LINKS TO YOUR WORK</label>
+                            <input type="text" id="gang-links" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="SoundCloud, YouTube, Instagram, etc.">
+                        </div>
+                        <div class="pt-4">
+                            <button type="submit" class="w-full bg-gradient-to-r from-red-500 to-yellow-500 py-3 rounded-lg font-bold text-white hover:from-red-600 hover:to-yellow-600 transition duration-300">
+                                SUBMIT INITIATION
+                            </button>
+                        </div>
+                    </form>
+                </div>
                 <div class="mt-12 text-center">
                     <h3 class="text-2xl font-bold text-green-400 mb-4">OR FIND US HERE</h3>
                     <div class="flex justify-center space-x-6">
         </div>
     </section>
+    <!-- User Profile Section (Visible when logged in) -->
+    <section id="profile" class="exclusive-content py-20 bg-black bg-opacity-80 hidden">
+        <div class="container mx-auto px-4">
+            <h2 class="text-4xl font-bold text-center mb-16 neon-text">YOUR PROFILE</h2>
+            <div class="max-w-3xl mx-auto bg-black bg-opacity-70 rounded-lg border border-gray-800 p-8 shadow-lg">
+                <div class="flex flex-col md:flex-row items-center mb-8">
+                    <div class="w-32 h-32 rounded-full border-4 border-green-400 mb-4 md:mb-0 md:mr-8 overflow-hidden">
+                        <img id="profile-avatar" src="https://via.placeholder.com/150" alt="Profile" class="w-full h-full object-cover">
+                    </div>
+                    <div class="text-center md:text-left">
+                        <h3 id="profile-username" class="text-2xl font-bold text-green-400 mb-2">USERNAME</h3>
+                        <p id="profile-email" class="text-gray-400">user@example.com</p>
+                        <button id="change-avatar" class="mt-4 text-sm text-gray-400 hover:text-green-400">Change Avatar</button>
+                    </div>
+                </div>
+                <form id="profile-form" class="space-y-6">
+                    <div>
+                        <label for="profile-bio" class="block text-gray-300 mb-2">YOUR BIO</label>
+                        <textarea id="profile-bio" rows="3" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Tell us about yourself"></textarea>
+                    </div>
+                    <div>
+                        <label for="profile-location" class="block text-gray-300 mb-2">LOCATION</label>
+                        <input type="text" id="profile-location" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Where are you from?">
+                    </div>
+                    <div>
+                        <label for="profile-links" class="block text-gray-300 mb-2">SOCIAL LINKS</label>
+                        <input type="text" id="profile-links" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Your social media links">
+                    </div>
+                    <div class="pt-4">
+                        <button type="submit" class="w-full btn-neon py-3 rounded-lg font-bold text-white focus:outline-none">
+                            UPDATE PROFILE
+                        </button>
+                    </div>
+                </form>
+                <div class="mt-8 pt-8 border-t border-gray-800">
+                    <h3 class="text-xl font-bold text-red-500 mb-4">ACCOUNT SETTINGS</h3>
+                    <div class="space-y-4">
+                        <button id="change-password" class="block w-full text-left px-4 py-2 bg-gray-900 rounded-lg hover:bg-gray-800 transition duration-300">
+                            Change Password
+                        </button>
+                        <button id="delete-account" class="block w-full text-left px-4 py-2 bg-red-900 rounded-lg hover:bg-red-800 transition duration-300 text-red-300">
+                            Delete Account
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
     <!-- Footer -->
     <footer class="bg-black py-12 border-t border-gray-900">
         <div class="container mx-auto px-4">
     </footer>
     <script>
+        // Firebase Configuration
+        const firebaseConfig = {
+            apiKey: "AIzaSyDEXAMPLEEXAMPLEEXAMPLEEXAMPLE",
+            authDomain: "mmk-syndicates.firebaseapp.com",
+            projectId: "mmk-syndicates",
+            storageBucket: "mmk-syndicates.appspot.com",
+            messagingSenderId: "123456789012",
+            appId: "1:123456789012:web:EXAMPLEEXAMPLEEXAMPLE"
+        };
+        // Initialize Firebase
+        firebase.initializeApp(firebaseConfig);
+        const auth = firebase.auth();
+        // Auth State Listener
+        auth.onAuthStateChanged(user => {
+            if (user) {
+                // User is signed in
+                console.log("User logged in:", user);
+                document.getElementById('auth-buttons').classList.add('hidden');
+                document.getElementById('user-menu').classList.remove('hidden');
+                document.getElementById('mobile-auth-buttons').classList.add('hidden');
+                document.getElementById('mobile-user-menu').classList.remove('hidden');
+                document.getElementById('username').textContent = user.displayName || user.email.split('@')[0];
+                document.getElementById('mobile-username').textContent = user.displayName || user.email.split('@')[0];
+                // Show exclusive content
+                document.querySelectorAll('.exclusive-content').forEach(el => {
+                    el.classList.remove('hidden');
+                });
+                // Show dashboard nav
+                document.getElementById('dashboard-nav').classList.remove('hidden');
+            } else {
+                // User is signed out
+                console.log("User logged out");
+                document.getElementById('auth-buttons').classList.remove('hidden');
+                document.getElementById('user-menu').classList.add('hidden');
+                document.getElementById('mobile-auth-buttons').classList.remove('hidden');
+                document.getElementById('mobile-user-menu').classList.add('hidden');
+                // Hide exclusive content
+                document.querySelectorAll('.exclusive-content').forEach(el => {
+                    el.classList.add('hidden');
+                });
+                // Hide dashboard nav
+                document.getElementById('dashboard-nav').classList.add('hidden');
+            }
+        });
+        // Auth Modal Toggle
+        const authModal = document.getElementById('auth-modal');
+        const loginBtn = document.getElementById('login-btn');
+        const mobileLoginBtn = document.getElementById('mobile-login-btn');
+        const closeAuth = document.querySelector('.close-auth');
+        const authTabs = document.querySelectorAll('.auth-tab');
+        const authForms = document.querySelectorAll('.auth-form');
+        loginBtn.addEventListener('click', () => {
+            authModal.style.display = 'block';
+        });
+        mobileLoginBtn.addEventListener('click', () => {
+            authModal.style.display = 'block';
+        });
+        closeAuth.addEventListener('click', () => {
+            authModal.style.display = 'none';
+        });
+        window.addEventListener('click', (e) => {
+            if (e.target === authModal) {
+                authModal.style.display = 'none';
+            }
+        });
+        // Tab Switching
+        authTabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabName = tab.getAttribute('data-tab');
+                authTabs.forEach(t => t.classList.remove('active'));
+                authForms.forEach(f => f.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(`${tabName}-form`).classList.add('active');
+            });
+        });
+        // Login Form
+        document.getElementById('login-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const email = document.getElementById('login-email').value;
+            const password = document.getElementById('login-password').value;
+            const errorElement = document.getElementById('login-error');
+            auth.signInWithEmailAndPassword(email, password)
+                .then((userCredential) => {
+                    // Signed in
+                    authModal.style.display = 'none';
+                    errorElement.classList.add('hidden');
+                })
+                .catch((error) => {
+                    errorElement.textContent = error.message;
+                    errorElement.classList.remove('hidden');
+                });
+        });
+        // Signup Form
+        document.getElementById('signup-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const username = document.getElementById('signup-username').value;
+            const email = document.getElementById('signup-email').value;
+            const password = document.getElementById('signup-password').value;
+            const errorElement = document.getElementById('signup-error');
+            auth.createUserWithEmailAndPassword(email, password)
+                .then((userCredential) => {
+                    // Signed up
+                    return userCredential.user.updateProfile({
+                        displayName: username
+                    });
+                })
+                .then(() => {
+                    authModal.style.display = 'none';
+                    errorElement.classList.add('hidden');
+                })
+                .catch((error) => {
+                    errorElement.textContent = error.message;
+                    errorElement.classList.remove('hidden');
+                });
+        });
+        // Logout
+        document.getElementById('logout-btn').addEventListener('click', () => {
+            auth.signOut();
+        });
+        document.getElementById('mobile-logout-btn').addEventListener('click', () => {
+            auth.signOut();
+        });
+        // Forgot Password
+        document.getElementById('forgot-password').addEventListener('click', (e) => {
+            e.preventDefault();
+            const email = prompt("Please enter your email address:");
+            if (email) {
+                auth.sendPasswordResetEmail(email)
+                    .then(() => {
+                        alert("Password reset email sent!");
+                    })
+                    .catch((error) => {
+                        alert(error.message);
+                    });
+            }
+        });
+        // Dashboard Navigation
+        document.querySelectorAll('.dashboard-nav a').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                document.querySelectorAll('.dashboard-nav a').forEach(l => {
+                    l.classList.remove('active');
+                });
+                link.classList.add('active');
+                // Hide all sections
+                document.querySelectorAll('section').forEach(section => {
+                    section.classList.add('hidden');
+                });
+                // Show selected section
+                const target = link.getAttribute('href').substring(1);
+                document.getElementById(target).classList.remove('hidden');
+            });
+        });
         // Mobile Menu Toggle
         document.getElementById('menu-toggle').addEventListener('click', function() {
             const menu = document.getElementById('mobile-menu');
             gsap.utils.toArray('.member-card, .track-card, .gallery-item').forEach(element => {
                 gsap.from(element, {
                     scrollTrigger: {
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Build a cinematic, immersive 3D website for a Pakistani rap group called MMK Syndicates, inspired by a mafia underworld aesthetic, with a modern dark cyber-urban theme, infused with Rawalpindi street culture and underground hip-hop energy. This should feel like stepping into a digital turf — MMK’s virtual headquarters. 🎨 Visual Aesthetic & Mood: Dark theme UI with deep blacks, gritty textures, and neon accents (electric green, blood red, brass gold) Atmosphere should feel intense, raw, mysterious, and powerful — like a blend of GTA loading screens, Spotify style, and mafia movie intros Add animated smoke, flickering neon lights, and grunge overlays for realism Incorporate Pindi street elements: graffiti in Urdu calligraphy, chai hotel signs, worn-out walls, steel shutters, bullet holes, and alleyway backdrops Use 3D elements and motion effects (with Three.js, GSAP, Framer Motion) for transitions, hover animations, and floating elements Cursor interactions should feel tactile and immersive — e.g., drag-to-rotate cards, parallax depth effects, glowing mouse trails 🧩 Website Structure: 1. Home / Landing Page: Dramatic intro animation (e.g. a slow zoom-in on a neon-lit alley, with MMK emerging from shadows) Animated 3D logo reveal of MMK Syndicates (could be metallic, smoke-wrapped, or burning neon) Background music or sound effects (optional): distant sirens, bass thump, static radio buzz 2. The Syndicate (About Page): Profiles of the 3 members — Maan, Maaddu, and Khan Each artist shown like a “mafia card” with 3D flip or slide-in effect, featuring: High-res photo Nickname tag (e.g. “The Boss”, “The Brains”, “The Streets”) Bio + links to Spotify/YouTube/Instagram Background styled like police files or criminal dossiers 3. Tracks (Music Page): Interactive music player with animated sound waves, glowing track cards Option to embed from Spotify, YouTube or SoundCloud “Now playing” section with live visualizer background 4. Pindi Diaries (Gallery/Blog): Showcase of behind-the-scenes street life — chai hotels, recording sessions, graffiti walls, concerts Mixed media format: short clips, photos, urban sketches Dynamic grid with hover reveal effects, blur-to-clear animations 5. Contact / Join the Gang: Urban-themed contact form set against a brick wall or alley backdrop Form fields glow or shake on error Optional: “Join the Syndicate” signup section (for fans, collabs, etc.) 🛠️ Tech Stack & Features: React.js for SPA structure Tailwind CSS for utility-first styling Three.js or Spline for 3D elements Framer Motion / GSAP for animations Fully responsive, smooth scroll-based animations Optimized for both desktop & mobile 🧠 Inspiration / Keywords: GTA loading screen, Spotify dark mode, Pakistani street culture, mafia rap, underground hip-hop, 3D gang profiles, neon crime noir, Rawalpindi alleyway energy


1	+ Build a cinematic, immersive 3D website for a Pakistani rap group called MMK Syndicates, inspired by a mafia underworld aesthetic, with a modern dark cyber-urban theme, infused with Rawalpindi street culture and underground hip-hop energy. This should feel like stepping into a digital turf — MMK’s virtual headquarters. 🎨 Visual Aesthetic & Mood: Dark theme UI with deep blacks, gritty textures, and neon accents (electric green, blood red, brass gold) Atmosphere should feel intense, raw, mysterious, and powerful — like a blend of GTA loading screens, Spotify style, and mafia movie intros Add animated smoke, flickering neon lights, and grunge overlays for realism Incorporate Pindi street elements: graffiti in Urdu calligraphy, chai hotel signs, worn-out walls, steel shutters, bullet holes, and alleyway backdrops Use 3D elements and motion effects (with Three.js, GSAP, Framer Motion) for transitions, hover animations, and floating elements Cursor interactions should feel tactile and immersive — e.g., drag-to-rotate cards, parallax depth effects, glowing mouse trails 🧩 Website Structure: 1. Home / Landing Page: Dramatic intro animation (e.g. a slow zoom-in on a neon-lit alley, with MMK emerging from shadows) Animated 3D logo reveal of MMK Syndicates (could be metallic, smoke-wrapped, or burning neon) Background music or sound effects (optional): distant sirens, bass thump, static radio buzz 2. The Syndicate (About Page): Profiles of the 3 members — Maan, Maaddu, and Khan Each artist shown like a “mafia card” with 3D flip or slide-in effect, featuring: High-res photo Nickname tag (e.g. “The Boss”, “The Brains”, “The Streets”) Bio + links to Spotify/YouTube/Instagram Background styled like police files or criminal dossiers 3. Tracks (Music Page): Interactive music player with animated sound waves, glowing track cards Option to embed from Spotify, YouTube or SoundCloud “Now playing” section with live visualizer background 4. Pindi Diaries (Gallery/Blog): Showcase of behind-the-scenes street life — chai hotels, recording sessions, graffiti walls, concerts Mixed media format: short clips, photos, urban sketches Dynamic grid with hover reveal effects, blur-to-clear animations 5. Contact / Join the Gang: Urban-themed contact form set against a brick wall or alley backdrop Form fields glow or shake on error Optional: “Join the Syndicate” signup section (for fans, collabs, etc.) 🛠️ Tech Stack & Features: React.js for SPA structure Tailwind CSS for utility-first styling Three.js or Spline for 3D elements Framer Motion / GSAP for animations Fully responsive, smooth scroll-based animations Optimized for both desktop & mobile 🧠 Inspiration / Keywords: GTA loading screen, Spotify dark mode, Pakistani street culture, mafia rap, underground hip-hop, 3D gang profiles, neon crime noir, Rawalpindi alleyway energy
2	+ Design and develop a cinematic, 3D dynamic website for a Pakistani rap crew named MMK Syndicates, styled like a mafia gang headquarters, infused with Rawalpindi street culture and modern underground hip-hop energy. The site must include a secure user account system to allow fans and collaborators to sign up, log in, and access exclusive content. 🎨 Visual Aesthetic: Dark theme with neon green/red/gold mafia accents Smoke animations, flickering graffiti-style Urdu elements 3D transitions using Three.js, GSAP, Framer Motion Inspired by GTA loading screens, Spotify UI, and Rawalpindi alley vibes 🧩 Website Structure: 1. Landing Page: Cinematic intro animation with MMK Syndicates emerging from shadows 3D animated MMK logo reveal “Enter the Syndicate” button leading into main site 2. The Syndicate: Mafia-style artist profiles (Maan, Maaddu, Khan) 3D flip cards with bio, roles, and social links 3. Tracks: Interactive embedded player Live sound bars and animated track cards 4. Pindi Diaries: Visual blog / gallery of street life, music grind, behind-the-scenes Hover effects, blur-ins, and graffiti-styled Urdu captions 5. Contact / Collab: Neon-outlined contact form Optional "Join the Gang" form 6. Accounts System: Sign up / Log in flow using email and password Authentication system (JWT, Firebase Auth, or NextAuth recommended) Logged-in users can: Access exclusive tracks, unreleased videos, or merch Comment on blog/gallery posts Receive updates via email or in-site notifications Join a private “MMK Syndicate Members” section (optional dashboard) Add user profile page with avatar, location, bio 🛠️ Tech Stack: React + TailwindCSS Three.js / Spline for 3D effects Framer Motion + GSAP for animations Firebase / Supabase / Next.js + Auth for account system Fully responsive, SEO-friendly, and fast-loading 🎯 Keywords: Mafia rap, GTA x Spotify, Rawalpindi vibes, 3D animated UI, desi gangsta website, fan login, exclusive music vault