add this on top of the Header Banner <!-- Navbar --> <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel"> <div class="flex items-center"> <div class="w-10 h-10 flex items-center justify-center bg-niogold rounded-full"> <span class="text-xl font-bold text-white">N</span> </div> <span class="ml-2 text-xl font-bold text-niogold">Nioplay</span> </div> <div class="flex-1 mx-4"> <div class="relative glass-panel"> <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-nioglass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-niogold"> <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> </div> </div> <div class="glass-panel px-4 py-1 flex items-center"> <i class="fas fa-coins text-niogold mr-2"></i> <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span> <div class="h-5 w-px bg-gray-600 mx-2"></div> <i class="fas fa-trophy text-niogold mr-2"></i> <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span> <div class="h-5 w-px bg-gray-600 mx-2"></div> <div class="group relative"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-niogold hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> </svg> <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div> <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> Shopping Cart </div> </div> </div> <div class="ml-4 flex items-center"> <div class="relative group"> <!-- Profile Avatar with animated border --> <div class="w-12 h-12 rounded-full bg-gradient-to-br from-niogold via-amber-200 to-niopurple p-0.5 animate-spin-slow"> <div class="w-full h-full rounded-full bg-gradient flex items-center justify-center relative overflow-hidden"> <i class="fas fa-crown text-niogold text-xl z-10"></i> <!-- Shimmer effect --> <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> </div> </div> <!-- VIP Badge with glow --> <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-niogold to-amber-200 flex items-center justify-center shadow-glow animate-pulse"> <span class="text-xs font-bold text-black">5</span> </div> <!-- VIP Level Indicator with animation --> <div class="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-niopurple to-niogold px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap transform -translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300"> <span class="text-white">Diamond Tier</span> <div class="absolute bottom-0 left-1/2 w-2 h-2 bg-gradient-to-r from-niopurple to-niogold transform -translate-x-1/2 translate-y-1/2 rotate-45"></div> </div> </div> <!-- Notification Bell --> <div class="relative ml-3 group"> <i class="fas fa-bell text-xl text-niogold cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i> <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div> <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"> Notifications </div> </div> </div> </header> - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Store Ui 2
-emoji: 👀
-colorFrom: red
-colorTo: gray
+title: store-ui-2
+emoji: 🐳
+colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,669 @@
-<!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>🛒 Nioplay Coin Store</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        dark: '#0C0C0C',
+                        glow: {
+                            100: '#FFD700',
+                            500: '#FFA500',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #0C0C0C;
+            background-image: 
+                radial-gradient(circle at 15% 50%, rgba(255, 215, 0, 0.05) 0%, rgba(0,0,0,0) 20%),
+                radial-gradient(circle at 85% 30%, rgba(255, 165, 0, 0.06) 0%, rgba(0,0,0,0) 25%);
+            color: white;
+            min-height: 100vh;
+        }
+        
+        .glass-panel {
+            background: rgba(20, 20, 20, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 215, 0, 0.1);
+            border-radius: 12px;
+        }
+
+        .glass-card {
+            background: rgba(20, 20, 20, 0.4);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 215, 0, 0.1);
+            border-radius: 16px;
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .glow-border {
+            position: relative;
+        }
+        
+        .glow-border::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: inherit;
+            box-shadow: 0 0 12px 2px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.1);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .glow-border:hover::before {
+            opacity: 1;
+        }
+        
+        .pulse {
+            animation: pulse 2s infinite;
+            box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
+            transform: scale(1);
+        }
+        
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
+            }
+        }
+        
+        .coin-glow {
+            text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
+        }
+        
+        .glow-text {
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+        }
+        
+        .btn-gradient {
+            background: linear-gradient(45deg, #FFD700, #FFA500);
+            color: #0C0C0C;
+            font-weight: 600;
+            border-radius: 9999px;
+            transition: all 0.3s ease;
+        }
+        
+        .btn-gradient:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 165, 0, 0.5);
+        }
+        
+        .tab-active {
+            color: #FFD700;
+            position: relative;
+        }
+        
+        .tab-active::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 20%;
+            width: 60%;
+            height: 2px;
+            background: linear-gradient(90deg, #FFD700, #FFA500);
+            border-radius: 2px;
+        }
+        
+        .spinning {
+            animation: spin 3s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .coin-flip {
+            animation: coin-flip 3s ease-in-out infinite;
+            transform-style: preserve-3d;
+        }
+        
+        @keyframes coin-flip {
+            0% { transform: rotateY(0deg); }
+            50% { transform: rotateY(180deg); }
+            100% { transform: rotateY(360deg); }
+        }
+        
+        .progress-bar {
+            height: 8px;
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.1);
+            overflow: hidden;
+        }
+        
+        .progress-fill {
+            height: 100%;
+            border-radius: 4px;
+            background: linear-gradient(90deg, #FFD700, #FFA500);
+        }
+        
+        .shake {
+            animation: shake 0.5s ease;
+        }
+        
+        @keyframes iconBounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        
+        @keyframes iconGlow {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
+        }
+        
+        @keyframes spin-slow {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            75% { transform: translateX(5px); }
+        }
+    </style>
+</head>
+<body class="pt-20">
+    <!-- Navbar -->
+    <header class="fixed top-0 left-0 right-0 z-50 flex justify-between items-center px-4 py-3 glass-panel">
+        <div class="flex items-center">
+            <div class="w-10 h-10 flex items-center justify-center bg-yellow-500 rounded-full">
+                <span class="text-xl font-bold text-white">N</span>
+            </div>
+            <span class="ml-2 text-xl font-bold text-yellow-500">Nioplay</span>
+        </div>
+        
+        <div class="flex-1 mx-4">
+            <div class="relative glass-panel">
+                <input type="text" placeholder="Search games..." class="w-full py-2 px-4 bg-gray-800/50 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500">
+                <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i>
+            </div>
+        </div>
+        
+        <div class="glass-panel px-4 py-1 flex items-center">
+            <i class="fas fa-coins text-yellow-500 mr-2"></i>
+            <span class="mr-2 text-white" style="text-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700;">GC: 25,000</span>
+            <div class="h-5 w-px bg-gray-600 mx-2"></div>
+            <i class="fas fa-trophy text-yellow-500 mr-2"></i>
+            <span class="mr-2 text-white" style="text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00;">SC: 450</span>
+            <div class="h-5 w-px bg-gray-600 mx-2"></div>
+            <div class="group relative">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-500 hover:animate-[iconBounce_0.5s_ease-in-out] animate-[iconGlow_2s_ease-in-out_infinite]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                </svg>
+                <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs animate-pulse">3</div>
+                <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+                    Shopping Cart
+                </div>
+            </div>
+        </div>
+        
+        <div class="ml-4 flex items-center">
+            <div class="relative group">
+                <!-- Profile Avatar with animated border -->
+                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-500 via-amber-200 to-purple-500 p-0.5 animate-[spin-slow_5s_linear_infinite]">
+                    <div class="w-full h-full rounded-full bg-gray-800 flex items-center justify-center relative overflow-hidden">
+                        <i class="fas fa-crown text-yellow-500 text-xl z-10"></i>
+                        <!-- Shimmer effect -->
+                        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    </div>
+                </div>
+                
+                <!-- VIP Badge with glow -->
+                <div class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full bg-gradient-to-br from-yellow-500 to-amber-200 flex items-center justify-center shadow-lg animate-pulse">
+                    <span class="text-xs font-bold text-black">5</span>
+                </div>
+                
+                <!-- VIP Level Indicator with animation -->
+                <div class="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-500 to-yellow-500 px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap transform -translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
+                    <span class="text-white">Diamond Tier</span>
+                    <div class="absolute bottom-0 left-1/2 w-2 h-2 bg-gradient-to-r from-purple-500 to-yellow-500 transform -translate-x-1/2 translate-y-1/2 rotate-45"></div>
+                </div>
+            </div>
+            
+            <!-- Notification Bell -->
+            <div class="relative ml-3 group">
+                <i class="fas fa-bell text-xl text-yellow-500 cursor-pointer hover:animate-[iconBounce_0.5s_ease-in-out]"></i>
+                <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-xs">3</div>
+                <div class="absolute left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">
+                    Notifications
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Header Banner -->
+    <header class="pt-8 pb-4 px-4">
+        <div class="container mx-auto">
+            <div class="glass-card glow-border relative overflow-hidden">
+                <div class="absolute -top-24 -right-24 w-48 h-48 bg-yellow-500 rounded-full filter blur-[60px] opacity-20"></div>
+                <div class="relative z-10 p-6 md:p-8 flex flex-col md:flex-row items-center justify-between">
+                    <div class="mb-4 md:mb-0 text-center md:text-left">
+                        <div class="flex items-center justify-center md:justify-start gap-2 mb-1">
+                            <h1 class="text-2xl md:text-3xl font-bold glow-text">FIRST PURCHASE PACK</h1>
+                            <div class="w-4 h-4 rounded-full bg-yellow-500 animate-pulse"></div>
+                        </div>
+                        <p class="text-sm text-gray-300">Start strong and secure your wins with an extra 400%!</p>
+                    </div>
+                    
+                    <div class="flex flex-col items-center sm:flex-row gap-4">
+                        <div class="glass-card px-4 py-3 flex items-center gap-2">
+                            <i class="fas fa-coins text-yellow-400"></i>
+                            <div>
+                                <span class="text-xs text-gray-400">400% EXTRA</span>
+                                <div class="font-bold text-lg coin-glow">$19.99</div>
+                            </div>
+                        </div>
+                        
+                        <button class="glass-card glow-border px-4 py-3 flex items-center gap-2 hover:bg-yellow-600/10 transition-all">
+                            <i class="fas fa-fire"></i>
+                            <span>CLAIM NOW</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+    
+    <!-- Dual Coin Toggle -->
+    <section class="py-4 px-4">
+        <div class="container mx-auto">
+            <div class="glass-card p-1">
+                <div class="flex">
+                    <button class="tab tab-active flex-1 py-3 font-medium text-center" onclick="toggleCoin('sweeps')">
+                        Standard Packages
+                    </button>
+                    <button class="tab flex-1 py-3 font-medium text-center text-gray-400" onclick="toggleCoin('bonus')">
+                        Flash Sale Packages
+                    </button>
+                </div>
+            </div>
+            <div class="mt-4 text-center text-xs text-gray-500">* Bonus Coins are non-redeemable</div>
+        </div>
+    </section>
+    
+    <!-- Coin Package Cards Grid -->
+    <section class="py-6 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                <!-- Coin Package 1 -->
+                <div class="glass-card glow-border p-6 flex flex-col hover:scale-[1.03] transition-transform duration-300">
+                    <div class="flex justify-between items-start mb-2">
+                        <div>
+                            <div class="text-lg font-bold text-gray-400">Package</div>
+                            <div class="text-3xl font-bold text-white">500<span class="coin-glow"> SC</span></div>
+                        </div>
+                        <i class="fas fa-box text-yellow-500 text-xl"></i>
+                    </div>
+                    <div class="text-sm text-gray-400 mb-5">Perfect for beginners</div>
+                    <div class="mt-auto">
+                        <div class="text-2xl font-bold mb-3">$4.99</div>
+                        <button class="btn-gradient w-full py-3">Buy Now</button>
+                    </div>
+                </div>
+                
+                <!-- Coin Package 2 -->
+                <div class="glass-card glow-border p-6 flex flex-col hover:scale-[1.03] transition-transform duration-300">
+                    <div class="flex justify-between items-start mb-2">
+                        <div>
+                            <div class="text-lg font-bold text-gray-400">Package</div>
+                            <div class="text-3xl font-bold text-white">1,500<span class="coin-glow"> SC</span></div>
+                        </div>
+                        <i class="fas fa-gift text-yellow-500 text-xl"></i>
+                    </div>
+                    <div class="text-sm text-yellow-500 mb-5">+10% Bonus</div>
+                    <div class="mt-auto">
+                        <div class="text-2xl font-bold mb-3">$12.99</div>
+                        <button class="btn-gradient w-full py-3">Buy Now</button>
+                    </div>
+                </div>
+                
+                <!-- Coin Package 3 (Best Value) -->
+                <div class="glass-card glow-border relative pulse overflow-hidden hover:scale-[1.03] transition-transform duration-300">
+                    <div class="absolute -top-6 -right-6 w-24 h-24 bg-yellow-500 rounded-full filter blur-[50px]"></div>
+                    <div class="relative z-10 p-6 flex flex-col h-full">
+                        <div class="flex justify-between items-start mb-2">
+                            <div>
+                                <div class="flex items-center gap-2">
+                                    <span class="text-lg font-bold text-yellow-500">⭐ Best Value</span>
+                                    <span class="text-sm bg-gradient-to-r from-yellow-500 to-orange-500 text-black font-bold px-2 py-0.5 rounded">NEW!</span>
+                                </div>
+                                <div class="text-3xl font-bold text-white">5,000<span class="coin-glow"> SC</span></div>
+                            </div>
+                            <div class="coin-flip">
+                                <i class="fas fa-coins text-yellow-500 text-2xl"></i>
+                            </div>
+                        </div>
+                        <div class="text-sm text-yellow-500 mb-5">+25% Bonus! That's 6,250 SC</div>
+                        <div class="mt-auto">
+                            <div class="text-2xl font-bold mb-3">$19.99</div>
+                            <button class="btn-gradient w-full py-3">Buy Now</button>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Coin Package 4 -->
+                <div class="glass-card glow-border p-6 flex flex-col hover:scale-[1.03] transition-transform duration-300">
+                    <div class="flex justify-between items-start mb-2">
+                        <div>
+                            <div class="text-lg font-bold text-gray-400">Package</div>
+                            <div class="text-3xl font-bold text-white">10,000<span class="coin-glow"> SC</span></div>
+                        </div>
+                        <i class="fas fa-crown text-yellow-500 text-xl"></i>
+                    </div>
+                    <div class="text-sm text-yellow-500 mb-5">+30% Bonus!</div>
+                    <div class="mt-auto">
+                        <div class="text-2xl font-bold mb-3">$34.99</div>
+                        <button class="btn-gradient w-full py-3">Buy Now</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Promotional Offers / Flash Deals -->
+    <section class="py-6 px-4">
+        <div class="container mx-auto">
+            <div class="glass-card glow-border relative overflow-hidden">
+                <div class="absolute -top-16 -right-16 w-32 h-32 bg-red-500 rounded-full filter blur-[50px] opacity-30"></div>
+                <div class="absolute -bottom-16 -left-16 w-32 h-32 bg-yellow-500 rounded-full filter blur-[50px] opacity-30"></div>
+                
+                <div class="relative z-10 p-6 flex flex-col md:flex-row items-center justify-between gap-6">
+                    <div class="flex items-center gap-4">
+                        <div class="bg-gradient-to-br from-red-500 to-yellow-500 p-2 rounded-xl text-xl">
+                            <i class="fas fa-fire"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold">🔥 Flash Deal – Double Coins!</h3>
+                            <p class="text-sm text-gray-300">Limited time offer - get double coins on all purchases!</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex flex-col items-center">
+                        <div class="flex gap-2 mb-2">
+                            <div id="hours" class="bg-yellow-900/30 text-yellow-400 py-1 px-2 rounded text-sm font-bold">03</div>
+                            <div class="text-yellow-400 py-1">:</div>
+                            <div id="minutes" class="bg-yellow-900/30 text-yellow-400 py-1 px-2 rounded text-sm font-bold">12</div>
+                            <div class="text-yellow-400 py-1">:</div>
+                            <div id="seconds" class="bg-yellow-900/30 text-yellow-400 py-1 px-2 rounded text-sm font-bold">59</div>
+                        </div>
+                        <div class="text-xs text-gray-400">Ends in:</div>
+                    </div>
+                    
+                    <button class="btn-gradient px-6 py-3 font-bold">
+                        Claim Now
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- VIP Store Section -->
+    <section class="py-6 px-4">
+        <div class="container mx-auto">
+            <h2 class="text-xl md:text-2xl font-bold mb-6 flex items-center gap-3">
+                <i class="fas fa-crown text-yellow-500"></i>
+                <span>VIP-Only Offers</span>
+            </h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Locked VIP Package -->
+                <div class="glass-card glow-border opacity-60 relative overflow-hidden">
+                    <div class="blur-[1px] p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <div>
+                                <div class="text-lg font-bold text-gray-400">VIP Gold Package</div>
+                                <div class="text-3xl font-bold text-white">25,000<span class="coin-glow"> SC</span></div>
+                            </div>
+                        </div>
+                        <div class="text-sm text-yellow-500 mb-5">+50% Bonus!</div>
+                        
+                        <div class="h-16 flex justify-center items-center">
+                            <div class="absolute">
+                                <i class="fas fa-lock text-3xl text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="text-center">
+                            <div class="text-gray-300 font-medium">Unlock at NioGold Tier</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Locked VIP Package -->
+                <div class="glass-card glow-border opacity-60 relative overflow-hidden">
+                    <div class="blur-[1px] p-6">
+                        <div class="flex justify-between items-start mb-2">
+                            <div>
+                                <div class="text-lg font-bold text-gray-400">VIP Platinum Package</div>
+                                <div class="text-3xl font-bold text-white">50,000<span class="coin-glow"> SC</span></div>
+                            </div>
+                        </div>
+                        <div class="text-sm text-yellow-500 mb-5">+70% Bonus!</div>
+                        
+                        <div class="h-16 flex justify-center items-center">
+                            <div class="absolute">
+                                <i class="fas fa-lock text-3xl text-white"></i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="text-center">
+                            <div class="text-gray-300 font-medium">Unlock at NioGold Tier</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Unlocked VIP Package -->
+                <div class="glass-card glow-border relative overflow-hidden border-yellow-500 group">
+                    <div class="absolute -inset-0.5 bg-gradient-to-r from-yellow-500 to-orange-500 blur group-hover:blur-lg transition duration-300 rounded-2xl opacity-60"></div>
+                    <div class="relative z-10 bg-dark p-6 h-full rounded-2xl">
+                        <div class="flex justify-between items-start mb-2">
+                            <div>
+                                <div class="text-lg font-bold text-yellow-500">VIP Diamond Package</div>
+                                <div class="text-3xl font-bold text-white">100,000<span class="coin-glow"> SC</span></div>
+                            </div>
+                            <div class="spinning">
+                                <i class="fas fa-gem text-yellow-500 text-xl"></i>
+                            </div>
+                        </div>
+                        <div class="text-sm text-yellow-500 mb-5">+100% Bonus!</div>
+                        <div class="mt-auto">
+                            <div class="text-2xl font-bold mb-3">$299.99</div>
+                            <button class="btn-gradient w-full py-3">Buy Now</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="mt-6 text-center">
+                <button class="glass-card glow-border px-6 py-3 flex items-center gap-2 mx-auto">
+                    <i class="fas fa-star text-yellow-500"></i>
+                    <span>View VIP Benefits</span>
+                </button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- How Coins Work -->
+    <section class="py-6 px-4">
+        <div class="container mx-auto">
+            <div class="glass-card glow-border p-6">
+                <button id="accordionBtn" class="w-full text-left flex justify-between items-center">
+                    <div class="text-lg font-bold">How SC & BSC work</div>
+                    <i id="accordionIcon" class="fas fa-chevron-down text-yellow-500 transition-transform"></i>
+                </button>
+                
+                <div id="accordionContent" class="overflow-hidden max-h-0 transition-all duration-300">
+                    <div class="pt-6 border-t border-gray-700/50 mt-6">
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <h3 class="font-bold text-yellow-500 mb-2">Sweeps Coins (SC)</h3>
+                                <p class="text-gray-300 text-sm">
+                                    SC are used for playing casino games and can be redeemed for cash prizes.
+                                    No purchase is necessary to obtain SC.
+                                </p>
+                            </div>
+                            <div>
+                                <h3 class="font-bold text-yellow-500 mb-2">Bonus Coins (BSC)</h3>
+                                <p class="text-gray-300 text-sm">
+                                    BSC are complimentary coins that cannot be redeemed. They're awarded
+                                    for bonuses and promotions and can be used to play games.
+                                </p>
+                            </div>
+                        </div>
+                        <div class="mt-6 text-center">
+                            <button class="text-yellow-500 hover:text-yellow-400 font-medium text-sm">
+                                View complete terms and conditions
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Referral CTA Banner -->
+    <section class="py-10 px-4 pb-16">
+        <div class="container mx-auto">
+            <div class="glass-card glow-border relative overflow-hidden">
+                <div class="absolute top-0 right-0 w-24 h-24 bg-yellow-500 rounded-full filter blur-[60px] opacity-10"></div>
+                <div class="relative z-10 p-8 flex flex-col md:flex-row items-center justify-between gap-8">
+                    <div class="relative">
+                        <div class="absolute -top-4 -left-4 text-yellow-500 animate-pulse">
+                            <i class="fas fa-sparkles text-xl"></i>
+                        </div>
+                        <div class="text-2xl md:text-3xl font-bold mb-2">Invite Friends & Earn Bonus Coins</div>
+                        <p class="text-gray-300 max-w-md">Earn 100 Coins each time your friend makes a purchase</p>
+                        
+                        <div class="mt-6">
+                            <div class="flex justify-between text-xs text-gray-400 mb-1">
+                                <span>3 of 5 referrals completed</span>
+                                <span>60%</span>
+                            </div>
+                            <div class="progress-bar">
+                                <div class="progress-fill w-3/5"></div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="shrink-0 flex flex-col items-center">
+                        <div class="relative">
+                            <div class="coin-flip mb-4">
+                                <i class="fas fa-coins text-4xl text-yellow-500"></i>
+                            </div>
+                            <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-yellow-500 text-black font-bold flex items-center justify-center text-xs">+100</div>
+                        </div>
+                        <button class="btn-gradient px-8 py-3 font-bold">
+                            Refer & Earn
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <script>
+        // Toggle coin tabs
+        function toggleCoin(type) {
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => tab.classList.remove('tab-active', 'text-yellow-500', 'glow-text'));
+            tabs.forEach(tab => tab.classList.add('text-gray-400'));
+            
+            const activeTab = type === 'sweeps' ? tabs[0] : tabs[1];
+            activeTab.classList.remove('text-gray-400');
+            activeTab.classList.add('tab-active', 'text-yellow-500', 'glow-text');
+        }
+        
+        // Countdown timer for flash deal
+        function startCountdown() {
+            let seconds = 59;
+            let minutes = 12;
+            let hours = 3;
+            
+            const timer = setInterval(() => {
+                seconds--;
+                
+                if (seconds < 0) {
+                    seconds = 59;
+                    minutes--;
+                    
+                    if (minutes < 0) {
+                        minutes = 59;
+                        hours--;
+                        
+                        if (hours < 0) {
+                            clearInterval(timer);
+                            document.querySelector('#hours').textContent = '00';
+                            document.querySelector('#minutes').textContent = '00';
+                            document.querySelector('#seconds').textContent = '00';
+                            return;
+                        }
+                    }
+                }
+                
+                document.querySelector('#hours').textContent = hours.toString().padStart(2, '0');
+                document.querySelector('#minutes').textContent = minutes.toString().padStart(2, '0');
+                document.querySelector('#seconds').textContent = seconds.toString().padStart(2, '0');
+            }, 1000);
+        }
+        
+        // Accordion for "How Coins Work" section
+        document.getElementById('accordionBtn').addEventListener('click', function() {
+            const content = document.getElementById('accordionContent');
+            const icon = document.getElementById('accordionIcon');
+            
+            if (content.style.maxHeight) {
+                content.style.maxHeight = null;
+                icon.classList.remove('fa-chevron-up');
+                icon.classList.add('fa-chevron-down');
+            } else {
+                content.style.maxHeight = content.scrollHeight + "px";
+                icon.classList.remove('fa-chevron-down');
+                icon.classList.add('fa-chevron-up');
+            }
+        });
+        
+        // Start the countdown on page load
+        window.addEventListener('load', startCountdown);
+        
+        // Hover effects for coin cards
+        const cards = document.querySelectorAll('.glass-card');
+        cards.forEach(card => {
+            card.addEventListener('mouseenter', () => {
+                card.classList.add('ring-1', 'ring-yellow-500/30');
+            });
+            
+            card.addEventListener('mouseleave', () => {
+                card.classList.remove('ring-1', 'ring-yellow-500/30');
+            });
+        });
+    </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=ProjectGenesis/store-ui-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>