Hugging Face's logo

Spaces:
hammadkhswati
/
hii
Running

App Files Community
hii / index.html
hammadkhswati's picture
hammadkhswati
Add 2 files
f84d56e verified
raw
history blame contribute delete
67.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>MMK Syndicates | Pindi's Underground Rap Mafia</title>
 <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');
:root {
 --neon-green: #00ff9d;
 --blood-red: #ff003c;
 --brass-gold: #ffd700;
 --dark-bg: #0a0a0a;
 }
body {
 font-family: 'Changa', sans-serif;
 background-color: var(--dark-bg);
 color: white;
 overflow-x: hidden;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2300ff9d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>'), auto;
 }
.neon-text {
 text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green), 0 0 20px var(--neon-green);
 }
.red-glow {
 text-shadow: 0 0 5px var(--blood-red), 0 0 10px var(--blood-red);
 }
.gold-glow {
 text-shadow: 0 0 5px var(--brass-gold), 0 0 10px var(--brass-gold);
 }
.bg-gritty {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%230a0a0a"/><path d="M0 0 L100 100 M0 100 L100 0" stroke="%23111111" stroke-width="0.5"/></svg>');
 background-size: 200px;
 }
.bg-bricks {
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50" viewBox="0 0 100 50"><rect width="100" height="50" fill="%23101010"/><rect x="0" y="0" width="100" height="10" fill="%231a1a1a"/><rect x="0" y="10" width="50" height="10" fill="%23151515"/><rect x="50" y="10" width="50" height="10" fill="%23121212"/><rect x="0" y="20" width="100" height="10" fill="%231a1a1a"/><rect x="0" y="30" width="50" height="10" fill="%23151515"/><rect x="50" y="30" width="50" height="10" fill="%23121212"/><rect x="0" y="40" width="100" height="10" fill="%231a1a1a"/></svg>');
 }
.bullet-hole {
 position: relative;
 }
.bullet-hole::after {
 content: '';
 position: absolute;
 width: 8px;
 height: 8px;
 background: radial-gradient(circle, transparent 30%, black 70%);
 border-radius: 50%;
 box-shadow: 0 0 0 1px rgba(255, 0, 60, 0.3);
 }
.smoke-effect {
 position: absolute;
 width: 100%;
 height: 100%;
 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><filter id="smoke"><feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="5" seed="1"/><feDisplacementMap in="SourceGraphic" scale="10"/></filter><rect width="500" height="500" fill="%230a0a0a" filter="url(%23smoke)"/></svg>');
 opacity: 0.1;
 pointer-events: none;
 animation: smoke 15s infinite linear;
 }
@keyframes smoke {
 0% { background-position: 0 0; }
 100% { background-position: 500px 500px; }
 }
.neon-flicker {
 animation: flicker 3s infinite alternate;
 }
@keyframes flicker {
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
 opacity: 1;
 text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green), 0 0 20px var(--neon-green);
 }
 20%, 24%, 55% {
 opacity: 0.7;
 text-shadow: none;
 }
 }
.member-card {
 perspective: 1000px;
 transform-style: preserve-3d;
 transition: transform 0.8s;
 }
.member-card:hover {
 transform: rotateY(15deg) scale(1.05);
 }
.member-card-inner {
 transition: transform 0.8s;
 transform-style: preserve-3d;
 }
.member-card:hover .member-card-inner {
 transform: rotateY(180deg);
 }
.member-card-front, .member-card-back {
 backface-visibility: hidden;
 position: absolute;
 width: 100%;
 height: 100%;
 }
.member-card-back {
 transform: rotateY(180deg);
 }
.track-card {
 transition: all 0.3s;
 box-shadow: 0 0 10px rgba(0, 255, 157, 0);
 }
.track-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 0 20px rgba(0, 255, 157, 0.5);
 }
.gallery-item {
 transition: all 0.3s;
 filter: grayscale(80%) brightness(0.7);
 }
.gallery-item:hover {
 filter: grayscale(0%) brightness(1);
 transform: scale(1.03);
 z-index: 10;
 }
.input-field {
 background: rgba(20, 20, 20, 0.7);
 border-bottom: 2px solid var(--neon-green);
 transition: all 0.3s;
 }
.input-field:focus {
 background: rgba(30, 30, 30, 0.7);
 border-bottom: 2px solid var(--blood-red);
 box-shadow: 0 0 10px rgba(255, 0, 60, 0.5);
 }
.btn-neon {
 background: linear-gradient(45deg, var(--neon-green), var(--blood-red));
 box-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
 transition: all 0.3s;
 }
.btn-neon:hover {
 box-shadow: 0 0 20px rgba(0, 255, 157, 0.8), 0 0 30px rgba(255, 0, 60, 0.5);
 transform: translateY(-2px);
 }
#canvas-container {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
 opacity: 0.3;
 }
.urdu-text {
 font-family: 'Noto Nastaliq Urdu', serif;
 direction: rtl;
 }
.mouse-trail {
 position: fixed;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: radial-gradient(circle, var(--neon-green), transparent 70%);
 pointer-events: none;
 z-index: 9999;
 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">
 <!-- Mouse Trail -->
 <div class="mouse-trail" id="mouse-trail"></div>
<!-- 3D Background Canvas -->
 <div id="canvas-container"></div>
<!-- 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">
 <div class="flex items-center">
 <span class="text-2xl font-bold neon-text">MMK</span>
 <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">
 <button id="menu-toggle" class="text-white focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="hidden md:hidden bg-black bg-opacity-90 px-4 py-2 border-t border-gray-800">
 <div class="flex flex-col space-y-3">
 <a href="#home" class="text-white hover:text-green-400 py-2">HOME</a>
 <a href="#syndicate" class="text-white hover:text-green-400 py-2">THE SYNDICATE</a>
 <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 class="max-w-4xl mx-auto">
 <h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text neon-flicker">MMK SYNDICATES</h1>
 <p class="text-xl md:text-2xl mb-8 text-gray-300">Rawalpindi's Underground Rap Mafia</p>
<div class="relative inline-block">
 <div class="absolute inset-0 bg-gradient-to-r from-green-400 to-red-500 rounded-lg blur opacity-75"></div>
 <a href="#syndicate" class="relative px-8 py-3 bg-black rounded-lg font-bold text-white hover:text-green-400 transition duration-300">
 ENTER THE UNDERGROUND
 </a>
 </div>
 </div>
<div class="mt-16 flex justify-center">
 <div class="w-full max-w-2xl bg-black bg-opacity-50 border border-gray-800 rounded-lg p-6 backdrop-blur-sm">
 <div class="flex justify-center space-x-8">
 <a href="#" class="text-3xl text-white hover:text-green-400 transition duration-300"><i class="fab fa-spotify"></i></a>
 <a href="#" class="text-3xl text-white hover:text-red-500 transition duration-300"><i class="fab fa-youtube"></i></a>
 <a href="#" class="text-3xl text-white hover:text-pink-600 transition duration-300"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-3xl text-white hover:text-blue-400 transition duration-300"><i class="fab fa-soundcloud"></i></a>
 </div>
 </div>
 </div>
<div class="absolute bottom-10 left-0 right-0 text-center">
 <a href="#syndicate" class="text-white animate-bounce inline-block">
 <i class="fas fa-chevron-down text-2xl"></i>
 </a>
 </div>
 </div>
<!-- Urdu Graffiti -->
 <div class="absolute top-20 right-10 text-4xl text-green-400 opacity-50 rotate-12 hidden lg:block urdu-text">م ایم کے</div>
 <div class="absolute bottom-20 left-10 text-4xl text-red-500 opacity-50 -rotate-12 hidden lg:block urdu-text">راولپنڈی</div>
 </section>
<!-- The Syndicate Section -->
 <section id="syndicate" class="py-20 bg-black bg-opacity-70 relative">
 <div class="container mx-auto px-4">
 <h2 class="text-4xl font-bold text-center mb-16 neon-text">THE SYNDICATE</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
 <!-- Member 1 -->
 <div class="member-card">
 <div class="member-card-inner">
 <div class="member-card-front bg-gray-900 rounded-lg overflow-hidden border border-gray-800 shadow-lg">
 <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <div class="p-6">
 <h3 class="text-2xl font-bold mb-2 text-green-400">MAAN</h3>
 <p class="text-red-500 font-bold mb-4">THE BOSS</p>
 <p class="text-gray-300">Founder and leader of MMK Syndicates. The visionary behind the movement.</p>
 </div>
 </div>
 <div class="member-card-back bg-gray-800 rounded-lg overflow-hidden border border-green-400 p-6 flex flex-col justify-center items-center">
 <h3 class="text-2xl font-bold mb-4 text-green-400">MAAN</h3>
 <p class="text-center text-gray-300 mb-6">Lyrical assassin with a flow sharper than a Pindi street razor.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fab fa-spotify"></i></a>
 <a href="#" class="text-white hover:text-red-500 text-xl"><i class="fab fa-youtube"></i></a>
 <a href="#" class="text-white hover:text-pink-600 text-xl"><i class="fab fa-instagram"></i></a>
 </div>
 </div>
 </div>
 </div>
<!-- Member 2 -->
 <div class="member-card">
 <div class="member-card-inner">
 <div class="member-card-front bg-gray-900 rounded-lg overflow-hidden border border-gray-800 shadow-lg">
 <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <div class="p-6">
 <h3 class="text-2xl font-bold mb-2 text-green-400">MAADDU</h3>
 <p class="text-red-500 font-bold mb-4">THE BRAINS</p>
 <p class="text-gray-300">Producer and strategist. Crafts the beats that fuel the syndicate.</p>
 </div>
 </div>
 <div class="member-card-back bg-gray-800 rounded-lg overflow-hidden border border-green-400 p-6 flex flex-col justify-center items-center">
 <h3 class="text-2xl font-bold mb-4 text-green-400">MAADDU</h3>
 <p class="text-center text-gray-300 mb-6">Sound architect who builds Pindi's sonic landscape.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fab fa-spotify"></i></a>
 <a href="#" class="text-white hover:text-red-500 text-xl"><i class="fab fa-youtube"></i></a>
 <a href="#" class="text-white hover:text-pink-600 text-xl"><i class="fab fa-instagram"></i></a>
 </div>
 </div>
 </div>
 </div>
<!-- Member 3 -->
 <div class="member-card">
 <div class="member-card-inner">
 <div class="member-card-front bg-gray-900 rounded-lg overflow-hidden border border-gray-800 shadow-lg">
 <div class="h-64 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <div class="p-6">
 <h3 class="text-2xl font-bold mb-2 text-green-400">KHAN</h3>
 <p class="text-red-500 font-bold mb-4">THE STREETS</p>
 <p class="text-gray-300">Voice of the people. Keeps the syndicate rooted in Pindi's soil.</p>
 </div>
 </div>
 <div class="member-card-back bg-gray-800 rounded-lg overflow-hidden border border-green-400 p-6 flex flex-col justify-center items-center">
 <h3 class="text-2xl font-bold mb-4 text-green-400">KHAN</h3>
 <p class="text-center text-gray-300 mb-6">Raw energy and unfiltered truth from Pindi's backstreets.</p>
 <div class="flex space-x-4">
 <a href="#" class="text-white hover:text-green-400 text-xl"><i class="fab fa-spotify"></i></a>
 <a href="#" class="text-white hover:text-red-500 text-xl"><i class="fab fa-youtube"></i></a>
 <a href="#" class="text-white hover:text-pink-600 text-xl"><i class="fab fa-instagram"></i></a>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-16 text-center">
 <p class="text-gray-400 max-w-3xl mx-auto">
 <span class="text-green-400 font-bold">MMK SYNDICATES</span> emerged from the backstreets of Rawalpindi,
a trio united by their love for hip-hop and their city's raw energy.
Their music blends Urdu lyricism with streetwise storytelling,
creating a sound that's unmistakably Pindi.
 </p>
 </div>
 </div>
<!-- Bullet Hole Decorations -->
 <div class="bullet-hole hidden lg:block" style="top: 20%; left: 10%;"></div>
 <div class="bullet-hole hidden lg:block" style="top: 30%; right: 15%;"></div>
 <div class="bullet-hole hidden lg:block" style="bottom: 25%; left: 20%;"></div>
 </section>
<!-- Tracks Section -->
 <section id="tracks" class="py-20 relative bg-bricks">
 <div class="container mx-auto px-4">
 <h2 class="text-4xl font-bold text-center mb-16 neon-text">TRACKS</h2>
<div class="max-w-4xl mx-auto mb-16">
 <div class="bg-black bg-opacity-70 rounded-lg p-6 border border-gray-800">
 <div class="flex items-center mb-6">
 <div class="w-16 h-16 bg-cover bg-center rounded-lg mr-4" style="background-image: url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <div>
 <h3 class="text-xl font-bold text-green-400">Pindi Nights</h3>
 <p class="text-gray-400">MMK Syndicates</p>
 </div>
 <div class="ml-auto flex items-center">
 <button class="text-2xl text-green-400 mx-4"><i class="fas fa-play"></i></button>
 <button class="text-xl text-gray-400"><i class="fas fa-ellipsis-h"></i></button>
 </div>
 </div>
<div class="w-full bg-gray-800 rounded-full h-1.5 mb-2">
 <div class="bg-green-400 h-1.5 rounded-full" style="width: 45%"></div>
 </div>
<div class="flex justify-between text-xs text-gray-500">
 <span>1:23</span>
 <span>3:45</span>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Track 1 -->
 <div class="track-card bg-black bg-opacity-50 rounded-lg overflow-hidden border border-gray-800 p-4 hover:border-green-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">Alleyway Anthem</h3>
 <p class="text-gray-400 mb-4">MMK Syndicates</p>
 <div class="flex justify-between items-center">
 <span class="text-green-400"><i class="fas fa-headphones mr-2"></i> 1.2M</span>
 <button class="text-green-400 hover:text-white"><i class="fas fa-play"></i></button>
 </div>
 </div>
<!-- Track 2 -->
 <div class="track-card bg-black bg-opacity-50 rounded-lg overflow-hidden border border-gray-800 p-4 hover:border-green-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-1496293455970-f8581aae0e3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <h3 class="text-xl font-bold text-white mb-2">Steel Shutters</h3>
 <p class="text-gray-400 mb-4">MMK Syndicates</p>
 <div class="flex justify-between items-center">
 <span class="text-green-400"><i class="fas fa-headphones mr-2"></i> 980K</span>
 <button class="text-green-400 hover:text-white"><i class="fas fa-play"></i></button>
 </div>
 </div>
<!-- Track 3 -->
 <div class="track-card bg-black bg-opacity-50 rounded-lg overflow-hidden border border-gray-800 p-4 hover:border-green-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">Chai Hotel Chronicles</h3>
 <p class="text-gray-400 mb-4">MMK Syndicates</p>
 <div class="flex justify-between items-center">
 <span class="text-green-400"><i class="fas fa-headphones mr-2"></i> 1.5M</span>
 <button class="text-green-400 hover:text-white"><i class="fas fa-play"></i></button>
 </div>
 </div>
<!-- Track 4 -->
 <div class="track-card bg-black bg-opacity-50 rounded-lg overflow-hidden border border-gray-800 p-4 hover:border-green-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">Rooftop Rebels</h3>
 <p class="text-gray-400 mb-4">MMK Syndicates</p>
 <div class="flex justify-between items-center">
 <span class="text-green-400"><i class="fas fa-headphones mr-2"></i> 890K</span>
 <button class="text-green-400 hover:text-white"><i class="fas fa-play"></i></button>
 </div>
 </div>
<!-- Track 5 -->
 <div class="track-card bg-black bg-opacity-50 rounded-lg overflow-hidden border border-gray-800 p-4 hover:border-green-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-1493225457124-a3eb161ffa5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <h3 class="text-xl font-bold text-white mb-2">Midnight in Pindi</h3>
 <p class="text-gray-400 mb-4">MMK Syndicates</p>
 <div class="flex justify-between items-center">
 <span class="text-green-400"><i class="fas fa-headphones mr-2"></i> 2.1M</span>
 <button class="text-green-400 hover:text-white"><i class="fas fa-play"></i></button>
 </div>
 </div>
<!-- Track 6 -->
 <div class="track-card bg-black bg-opacity-50 rounded-lg overflow-hidden border border-gray-800 p-4 hover:border-green-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-1501612780327-45045538702b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div>
 <h3 class="text-xl font-bold text-white mb-2">Syndicate Rules</h3>
 <p class="text-gray-400 mb-4">MMK Syndicates</p>
 <div class="flex justify-between items-center">
 <span class="text-green-400"><i class="fas fa-headphones mr-2"></i> 1.7M</span>
 <button class="text-green-400 hover:text-white"><i class="fas fa-play"></i></button>
 </div>
 </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
 </a>
 </div>
 </div>
 </section>
<!-- Pindi Diaries Section -->
 <section id="diaries" class="py-20 bg-black bg-opacity-80 relative">
 <div class="container mx-auto px-4">
 <h2 class="text-4xl font-bold text-center mb-16 neon-text">PINDI DIARIES</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Gallery Item 1 -->
 <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>
<!-- Gallery Item 2 -->
 <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="Live performance" 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">Live at Pindi</h3>
 <p class="text-gray-300">Energy that shook the city</p>
 </div>
 </div>
<!-- Gallery Item 3 -->
 <div class="gallery-item relative rounded-lg overflow-hidden h-64">
 <img src="https://images.unsplash.com/photo-1496293455970-f8581aae0e3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Street art" 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">Street Canvas</h3>
 <p class="text-gray-300">Our graffiti across Pindi's walls</p>
 </div>
 </div>
<!-- Gallery Item 4 -->
 <div class="gallery-item relative rounded-lg overflow-hidden h-64">
 <img src="https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Chai break" 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">Chai & Rhymes</h3>
 <p class="text-gray-300">Where ideas brew like Pindi's tea</p>
 </div>
 </div>
<!-- Gallery Item 5 -->
 <div class="gallery-item relative rounded-lg overflow-hidden h-64">
 <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Crowd" 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">The Movement</h3>
 <p class="text-gray-300">Our people, our energy</p>
 </div>
 </div>
<!-- Gallery Item 6 -->
 <div class="gallery-item relative rounded-lg overflow-hidden h-64">
 <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Alleyway" 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">Our Streets</h3>
 <p class="text-gray-300">Where it all began</p>
 </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
 </a>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-20 relative bg-bricks">
 <div class="container mx-auto px-4">
 <h2 class="text-4xl font-bold text-center mb-16 neon-text">JOIN THE SYNDICATE</h2>
<div class="max-w-3xl mx-auto bg-black bg-opacity-70 rounded-lg border border-gray-800 p-8 shadow-lg">
 <form id="contact-form" class="space-y-6">
 <div>
 <label for="name" class="block text-gray-300 mb-2">YOUR NAME</label>
 <input type="text" id="name" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Enter your name">
 </div>
<div>
 <label for="email" class="block text-gray-300 mb-2">YOUR EMAIL</label>
 <input type="email" id="email" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="Enter your email">
 </div>
<div>
 <label for="message" class="block text-gray-300 mb-2">YOUR MESSAGE</label>
 <textarea id="message" rows="5" class="w-full px-4 py-3 input-field text-white focus:outline-none" placeholder="What's your message to the syndicate?"></textarea>
 </div>
<div class="pt-4">
 <button type="submit" class="w-full btn-neon py-3 rounded-lg font-bold text-white focus:outline-none">
 SEND MESSAGE
 </button>
 </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">
 <a href="#" class="text-3xl text-white hover:text-green-400 transition duration-300"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-3xl text-white hover:text-blue-400 transition duration-300"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-3xl text-white hover:text-red-500 transition duration-300"><i class="fab fa-youtube"></i></a>
 <a href="#" class="text-3xl text-white hover:text-green-400 transition duration-300"><i class="fab fa-spotify"></i></a>
 <a href="#" class="text-3xl text-white hover:text-orange-500 transition duration-300"><i class="fab fa-soundcloud"></i></a>
 </div>
 </div>
 </div>
 </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">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="mb-6 md:mb-0">
 <span class="text-2xl font-bold neon-text">MMK</span>
 <span class="ml-2 text-xl red-glow">SYNDICATES</span>
 </div>
<div class="flex space-x-6 mb-6 md:mb-0">
 <a href="#home" class="text-gray-400 hover:text-green-400 transition duration-300">HOME</a>
 <a href="#syndicate" class="text-gray-400 hover:text-green-400 transition duration-300">THE SYNDICATE</a>
 <a href="#tracks" class="text-gray-400 hover:text-green-400 transition duration-300">TRACKS</a>
 <a href="#diaries" class="text-gray-400 hover:text-green-400 transition duration-300">PINDI DIARIES</a>
 <a href="#contact" class="text-gray-400 hover:text-green-400 transition duration-300">CONTACT</a>
 </div>
<div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-green-400 text-xl transition duration-300"><i class="fab fa-instagram"></i></a>
 <a href="#" class="text-gray-400 hover:text-blue-400 text-xl transition duration-300"><i class="fab fa-twitter"></i></a>
 <a href="#" class="text-gray-400 hover:text-red-500 text-xl transition duration-300"><i class="fab fa-youtube"></i></a>
 <a href="#" class="text-gray-400 hover:text-green-400 text-xl transition duration-300"><i class="fab fa-spotify"></i></a>
 </div>
 </div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
 <p>&copy; 2023 MMK SYNDICATES. ALL RIGHTS RESERVED.</p>
 <p class="mt-2">RAWALPINDI'S UNDERGROUND RAP MAFIA</p>
 </div>
 </div>
 </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');
 menu.classList.toggle('hidden');
 });
// Smooth Scrolling for Anchor Links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function(e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 const targetElement = document.querySelector(targetId);
if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
// Close mobile menu if open
 const mobileMenu = document.getElementById('mobile-menu');
 if (!mobileMenu.classList.contains('hidden')) {
 mobileMenu.classList.add('hidden');
 }
 }
 });
 });
// Mouse Trail Effect
 const mouseTrail = document.getElementById('mouse-trail');
 let mouseX = 0, mouseY = 0;
 let trailX = 0, trailY = 0;
 const speed = 0.2;
document.addEventListener('mousemove', function(e) {
 mouseX = e.clientX;
 mouseY = e.clientY;
 });
function animateTrail() {
 const dx = mouseX - trailX;
 const dy = mouseY - trailY;
trailX += dx * speed;
 trailY += dy * speed;
mouseTrail.style.left = trailX + 'px';
 mouseTrail.style.top = trailY + 'px';
requestAnimationFrame(animateTrail);
 }
animateTrail();
// Simple 3D Background with Three.js
 function initThreeJS() {
 const container = document.getElementById('canvas-container');
 const width = container.clientWidth;
 const height = container.clientHeight;
const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
 const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
 renderer.setSize(width, height);
 container.appendChild(renderer.domElement);
// Create floating elements
 const geometry = new THREE.BoxGeometry(1, 1, 1);
 const material = new THREE.MeshBasicMaterial({
color: 0x00ff9d,
 wireframe: true
});
const cubes = [];
 const cubeCount = 10;
for (let i = 0; i < cubeCount; i++) {
 const cube = new THREE.Mesh(geometry, material);
 cube.position.x = Math.random() * 20 - 10;
 cube.position.y = Math.random() * 20 - 10;
 cube.position.z = Math.random() * 20 - 10;
 cube.rotation.x = Math.random() * Math.PI;
 cube.rotation.y = Math.random() * Math.PI;
 cubes.push(cube);
 scene.add(cube);
 }
camera.position.z = 5;
function animate() {
 requestAnimationFrame(animate);
cubes.forEach(cube => {
 cube.rotation.x += 0.01;
 cube.rotation.y += 0.01;
// Float up and down
 cube.position.y += Math.sin(Date.now() * 0.001 + cube.position.x) * 0.005;
 });
renderer.render(scene, camera);
 }
animate();
window.addEventListener('resize', function() {
 const width = container.clientWidth;
 const height = container.clientHeight;
 camera.aspect = width / height;
 camera.updateProjectionMatrix();
 renderer.setSize(width, height);
 });
 }
// Initialize Three.js if available
 if (typeof THREE !== 'undefined') {
 initThreeJS();
 }
// GSAP Animations
 if (typeof gsap !== 'undefined') {
 // Animate elements on scroll
 gsap.utils.toArray('.member-card, .track-card, .gallery-item').forEach(element => {
 gsap.from(element, {
 scrollTrigger: {
</html>