Spaces:
Running
Running
generate pulsing animation for the Promotional Offers / Flash Sales section - Follow Up Deployment
4dad867
verified
| <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', | |
| }, | |
| niogold: '#FFD700' | |
| } | |
| } | |
| } | |
| } | |
| </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; | |
| transition: all 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| border-color: rgba(255, 215, 0, 0.3); | |
| box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); | |
| } | |
| .glass-card::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| rgba(255, 215, 0, 0.1), | |
| transparent | |
| ); | |
| transition: none; | |
| } | |
| .glass-card:hover::after { | |
| left: 100%; | |
| transition: left 0.7s ease-in-out; | |
| } | |
| .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, box-shadow 0.3s ease; | |
| } | |
| .glow-border:hover::before { | |
| opacity: 1; | |
| box-shadow: 0 0 20px 4px rgba(255, 215, 0, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.2); | |
| } | |
| .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); } | |
| } | |
| @keyframes flashPulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); } | |
| 50% { box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.2); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); } | |
| } | |
| </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> | |
| <!-- Side Navigation --> | |
| <div class="fixed left-0 top-14 bottom-20 w-16 flex flex-col items-center py-4 z-40"> | |
| <div class="flex flex-col space-y-4 mt-4"> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-home text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Home</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-dice text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Slots</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-chess-queen text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Table Games</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-video text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Live Casino</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-trophy text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Tournaments</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-crown text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">VIP</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-wallet text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Wallet</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-question-circle text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">FAQ</span> | |
| </a> | |
| <a href="#" class="w-12 h-12 flex items-center justify-center glass-panel rounded-xl text-niogold hover:bg-opacity-100 transition-all group"> | |
| <i class="fas fa-headset text-xl group-hover:animate-[iconBounce_0.5s_ease-in-out]"></i> | |
| <span class="absolute left-16 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Support</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Header Banner --> | |
| <header class="pt-8 pb-4 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="glass-card glow-border relative overflow-hidden animate-[flashPulse_2s_ease-in-out_infinite]"> | |
| <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">A bunch of nonsense disclaimer disclaimer disclaimer disclaimer disclaimer*</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-fire 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 hover:animate-[pulse_1.5s_ease-in-out_infinite]"> | |
| 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> |