Spaces:

hammadkhswati
/

hii

Running

App Files Files Community

hammadkhswati commited on May 3, 2025

Commit

e2505bb

verified ·

1 Parent(s): 52e45be

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +785 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Hii
-emoji: 🐠
-colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: hii
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,785 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+    <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;
+        }
+    </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>
+    <!-- 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">
+                <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">
+                <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>
+        </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">
+            <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>
+            <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</h3>
+                        <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>
+            <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>
+                <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>
+    <!-- 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>
+        // 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: {
+                        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>

prompts.txt ADDED Viewed

	@@ -0,0 +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