add this to the left side <!-- 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> - Follow Up Deployment
fa2eeae
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neon Casino Tournament</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&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-bg': '#0C0C0C', | |
| 'neon-yellow': '#FFD700', | |
| 'neon-orange': '#FFA500', | |
| 'glass-bg': 'rgba(20, 20, 20, 0.65)', | |
| 'card-bg': 'rgba(30, 30, 30, 0.7)' | |
| }, | |
| boxShadow: { | |
| 'glow-yellow': '0 0 15px rgba(255, 215, 0, 0.7)', | |
| 'glow-orange': '0 0 15px rgba(255, 165, 0, 0.7)', | |
| 'inner-glow': 'inset 0 0 10px rgba(255, 215, 0, 0.5)' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'glow': 'glow 1.5s ease-in-out infinite alternate' | |
| }, | |
| keyframes: { | |
| glow: { | |
| 'from': { 'box-shadow': '0 0 5px rgba(255, 215, 0, 0.5)' }, | |
| 'to': { 'box-shadow': '0 0 20px rgba(255, 215, 0, 0.8)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0C0C0C; | |
| background-image: radial-gradient(circle at 20% 30%, rgba(255, 165, 0, 0.1) 0%, transparent 40%), | |
| radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 40%); | |
| color: #fff; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .glass-panel { | |
| background: rgba(20, 20, 20, 0.65); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 215, 0, 0.2); | |
| border-radius: 24px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); | |
| } | |
| .glow-border { | |
| position: relative; | |
| } | |
| .glow-border::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border-radius: 24px; | |
| border: 2px solid transparent; | |
| background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700) border-box; | |
| -webkit-mask: | |
| linear-gradient(#fff 0 0) padding-box, | |
| linear-gradient(#fff 0 0); | |
| mask: | |
| linear-gradient(#fff 0 0) padding-box, | |
| linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: destination-out; | |
| mask-composite: exclude; | |
| animation: glow 1.5s ease-in-out infinite alternate; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5); | |
| } | |
| .neon-orange-glow { | |
| color: white; | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #FFA500, 0 0 20px #FFA500; | |
| animation: neon-orange-pulse 1.5s ease-in-out infinite alternate; | |
| } | |
| @keyframes neon-orange-pulse { | |
| from { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #FFA500, 0 0 20px #FFA500; | |
| } | |
| to { | |
| text-shadow: 0 0 10px #fff, 0 0 15px #FFA500, 0 0 20px #FFA500, 0 0 25px #FFA500; | |
| } | |
| } | |
| .gradient-btn { | |
| background: linear-gradient(45deg, #FFA500, #FFD700); | |
| box-shadow: 0 0 15px rgba(255, 165, 0, 0.7); | |
| transition: all 0.3s ease; | |
| } | |
| .gradient-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 25px rgba(255, 215, 0, 0.8); | |
| } | |
| .progress-track { | |
| height: 10px; | |
| border-radius: 5px; | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 5px; | |
| background: linear-gradient(90deg, #FFA500, #FFD700); | |
| box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); | |
| } | |
| .carousel-item { | |
| flex: 0 0 auto; | |
| width: 300px; | |
| scroll-snap-align: start; | |
| transition: transform 0.3s ease; | |
| } | |
| .carousel-item:hover { | |
| transform: translateY(-10px); | |
| } | |
| .trophy-gold { | |
| background: linear-gradient(145deg, #FFD700, #FFA500); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7)); | |
| } | |
| .trophy-silver { | |
| background: linear-gradient(145deg, #C0C0C0, #808080); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .trophy-bronze { | |
| background: linear-gradient(145deg, #CD7F32, #8B4513); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .leaderboard-row { | |
| transition: all 0.3s ease; | |
| } | |
| .leaderboard-row:hover { | |
| background: rgba(255, 215, 0, 0.1); | |
| transform: scale(1.02); | |
| } | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(10px); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| .modal-content { | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .referral-badge { | |
| animation: pulse-slow 2s infinite; | |
| } | |
| .avatar-placeholder { | |
| background: linear-gradient(45deg, #FFA500, #FFD700); | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-weight: bold; | |
| color: #0C0C0C; | |
| } | |
| @media (max-width: 768px) { | |
| .stats-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 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> | |
| <!-- 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> | |
| <!-- Main Container --> | |
| <div class="min-h-screen w-full max-w-7xl mx-auto px-4 pt-24 pb-8 ml-16"> | |
| <!-- Current Tournament Banner --> | |
| <section class="glass-panel glow-border mb-8 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full z-0 opacity-20" style="background: radial-gradient(circle at top right, rgba(255, 165, 0, 0.5) 0%, transparent 70%);"></div> | |
| <div class="relative z-10 p-6 md:p-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <span class="px-3 py-1 bg-neon-orange text-dark-bg rounded-full text-sm font-bold mr-3">5SC ENTRY</span> | |
| <span class="px-3 py-1 bg-neon-yellow text-dark-bg rounded-full text-sm font-bold">100 PLAYERS</span> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mb-2 neon-text">MEGA WEEKEND SLOTS BATTLE</h2> | |
| <p class="text-xl text-gray-300 mb-4">Compete for the grand prize and exclusive rewards!</p> | |
| <div class="flex items-center"> | |
| <i class="fas fa-trophy text-neon-yellow mr-2 text-xl"></i> | |
| <span class="text-2xl font-bold text-white">$5,000</span> | |
| <span class="mx-4 text-gray-400">|</span> | |
| <i class="fas fa-clock text-neon-orange mr-2 text-xl"></i> | |
| <span class="text-xl font-bold text-white" id="countdown">23:48:12</span> | |
| </div> | |
| </div> | |
| <button class="gradient-btn px-8 py-4 rounded-full text-dark-bg font-bold text-lg transform transition duration-300 hover:scale-105"> | |
| JOIN TOURNAMENT | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- User Stats Panel --> | |
| <section class="mb-10"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-chart-line text-neon-yellow mr-3"></i> | |
| <span class="text-white neon-text">YOUR TOURNAMENT STATS</span> | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 stats-grid"> | |
| <!-- Rank Card --> | |
| <div class="glass-panel p-4 relative"> | |
| <div class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> | |
| <i class="fas fa-crown text-dark-bg text-sm"></i> | |
| </div> | |
| <h4 class="text-gray-400 text-xs mb-1">Current Rank</h4> | |
| <p class="text-2xl font-bold text-white mb-2">#27</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <i class="fas fa-arrow-up text-green-400 mr-1"></i> | |
| <span>Up 3 positions</span> | |
| </div> | |
| </div> | |
| <!-- Points Card --> | |
| <div class="glass-panel p-4 relative"> | |
| <div class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> | |
| <i class="fas fa-bolt text-dark-bg text-sm"></i> | |
| </div> | |
| <h4 class="text-gray-400 text-xs mb-1">Points Earned</h4> | |
| <p class="text-2xl font-bold text-white mb-2">1,850</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <span>Next tier at 2,000 points</span> | |
| </div> | |
| </div> | |
| <!-- Games Card --> | |
| <div class="glass-panel p-4 relative"> | |
| <div class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> | |
| <i class="fas fa-dice-d20 text-dark-bg text-sm"></i> | |
| </div> | |
| <h4 class="text-gray-400 text-xs mb-1">Games Played</h4> | |
| <p class="text-2xl font-bold text-white mb-2">42</p> | |
| <div class="flex items-center text-xs text-gray-400"> | |
| <i class="fas fa-check-circle text-green-400 mr-1"></i> | |
| <span>Qualified for rewards</span> | |
| </div> | |
| </div> | |
| <!-- Prize Card --> | |
| <div class="glass-panel p-4 relative"> | |
| <div class="absolute top-3 right-3 w-8 h-8 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center"> | |
| <i class="fas fa-coins text-dark-bg text-sm"></i> | |
| </div> | |
| <h4 class="text-gray-400 text-xs mb-1">Prizes Won</h4> | |
| <p class="text-2xl font-bold text-white mb-2">$120</p> | |
| <div class="progress-track w-full h-2"> | |
| <div class="progress-fill w-3/4"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leaderboard Module --> | |
| <section class="mb-10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-neon-yellow flex items-center"> | |
| <i class="fas fa-trophy text-neon-yellow mr-3"></i> | |
| <span class="text-white neon-text">LEADERBOARD</span> | |
| </h3> | |
| <div class="flex items-center"> | |
| <span class="text-gray-400 mr-3">Your position: #27</span> | |
| <button class="px-4 py-2 rounded-full bg-glass-bg text-white flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="glass-panel overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="py-4 px-6 text-left text-gray-400 font-semibold">RANK</th> | |
| <th class="py-4 px-6 text-left text-gray-400 font-semibold">USERNAME</th> | |
| <th class="py-4 px-6 text-left text-gray-400 font-semibold">SCORE</th> | |
| <th class="py-4 px-6 text-left text-gray-400 font-semibold">PRIZE</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Gold --> | |
| <tr class="leaderboard-row border-b border-gray-800 hover:border-neon-yellow"> | |
| <td class="py-4 px-6"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-yellow-300 to-yellow-500 flex items-center justify-center"> | |
| <span class="font-bold text-dark-bg">1</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> | |
| <img src="https://i.pravatar.cc/150?img=12" alt="Player"> | |
| </div> | |
| <div> | |
| <p class="font-bold">LuckyStar77</p> | |
| <p class="text-xs text-gray-400">VIP Platinum</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6 font-bold text-xl">9,850</td> | |
| <td class="py-4 px-6 font-bold text-neon-yellow">$1,500</td> | |
| </tr> | |
| <!-- Silver --> | |
| <tr class="leaderboard-row border-b border-gray-800 hover:border-gray-500"> | |
| <td class="py-4 px-6"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-gray-300 to-gray-500 flex items-center justify-center"> | |
| <span class="font-bold text-dark-bg">2</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> | |
| <img src="https://i.pravatar.cc/150?img=23" alt="Player"> | |
| </div> | |
| <div> | |
| <p class="font-bold">JackpotKing</p> | |
| <p class="text-xs text-gray-400">VIP Gold</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6 font-bold text-xl">8,920</td> | |
| <td class="py-4 px-6 font-bold text-gray-300">$1,000</td> | |
| </tr> | |
| <!-- Bronze --> | |
| <tr class="leaderboard-row border-b border-gray-800 hover:border-amber-800"> | |
| <td class="py-4 px-6"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-700 to-amber-900 flex items-center justify-center"> | |
| <span class="font-bold text-white">3</span> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3"> | |
| <img src="https://i.pravatar.cc/150?img=45" alt="Player"> | |
| </div> | |
| <div> | |
| <p class="font-bold">DiamondDice</p> | |
| <p class="text-xs text-gray-400">VIP Silver</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="py-4 px-6 font-bold text-xl">7,640</td> | |
| <td class="py-4 px-6 font-bold text-amber-600">$750</td> | |
| </tr> | |
| <!-- Other ranks --> | |
| <tr class="leaderboard-row border-b border-gray-800"> | |
| <td class="py-4 px-6">4</td> | |
| <td class="py-4 px-6">WildCardWilly</td> | |
| <td class="py-4 px-6">6,980</td> | |
| <td class="py-4 px-6">$500</td> | |
| </tr> | |
| <tr class="leaderboard-row border-b border-gray-800"> | |
| <td class="py-4 px-6">5</td> | |
| <td class="py-4 px-6">RouletteRider</td> | |
| <td class="py-4 px-6">6,420</td> | |
| <td class="py-4 px-6">$400</td> | |
| </tr> | |
| <!-- Current User --> | |
| <tr class="leaderboard-row bg-gradient-to-r from-orange-900 to-dark-bg border-t-2 border-black"> | |
| <td class="py-4 px-6 font-bold">27</td> | |
| <td class="py-4 px-6 font-bold flex items-center"> | |
| <div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-neon-yellow"> | |
| <img src="https://i.pravatar.cc/150?img=32" alt="You"> | |
| </div> | |
| You (Player32) | |
| </td> | |
| <td class="py-4 px-6 font-bold text-neon-yellow">1,850</td> | |
| <td class="py-4 px-6 font-bold text-neon-yellow">$120</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Tournament Carousel --> | |
| <section class="mb-10"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-neon-yellow flex items-center"> | |
| <i class="fas fa-fire text-neon-orange mr-3"></i> | |
| <span class="text-white neon-text">ACTIVE TOURNAMENTS</span> | |
| </h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 rounded-full bg-neon-yellow text-dark-bg font-bold">LIVE</button> | |
| <button class="px-4 py-2 rounded-full bg-glass-bg text-white">UPCOMING</button> | |
| <button class="px-4 py-2 rounded-full bg-glass-bg text-white">COMPLETED</button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-6 overflow-x-auto pb-4 scrollbar-hide" style="scrollbar-width: none;"> | |
| <!-- Tournament Card 1 --> | |
| <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://i.postimg.cc/wTrQ9LWM/temp-Imaged-FKu-Ss.avif')] bg-cover bg-center opacity-20 z-0"></div> | |
| <div class="flex justify-between items-start mb-4 relative z-10"> | |
| <span class="px-3 py-1 bg-neon-orange text-white rounded-full text-sm font-bold">FREE</span> | |
| <span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm font-bold flex items-center"> | |
| <span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span> | |
| LIVE | |
| </span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2 relative z-10">Slots Mania Rush</h4> | |
| <p class="text-gray-400 text-sm mb-4 relative z-10">Fast-paced slots competition</p> | |
| <div class="flex justify-between items-center mb-4 relative z-10"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Prize Pool</p> | |
| <p class="text-xl font-bold text-neon-yellow">$1,200</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Players</p> | |
| <p class="text-xl font-bold text-white">87/100</p> | |
| </div> | |
| </div> | |
| <button class="w-full gradient-btn py-3 rounded-full text-dark-bg font-bold mt-2 relative z-10"> | |
| JOIN NOW | |
| </button> | |
| </div> | |
| <!-- Tournament Card 2 --> | |
| <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://i.postimg.cc/wTrQ9LWM/temp-Imaged-FKu-Ss.avif')] bg-cover bg-center opacity-20 z-0"></div> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-neon-yellow text-white rounded-full text-sm font-bold">50 SC</span> | |
| <span class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-bold">STARTING SOON</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Blackjack Showdown</h4> | |
| <p class="text-gray-400 text-sm mb-4">Master the tables</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Prize Pool</p> | |
| <p class="text-xl font-bold text-neon-yellow">$2,500</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Starts In</p> | |
| <p class="text-xl font-bold text-white">12:34:22</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2"> | |
| NOTIFY ME | |
| </button> | |
| </div> | |
| <!-- Tournament Card 3 --> | |
| <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://i.postimg.cc/wTrQ9LWM/temp-Imaged-FKu-Ss.avif')] bg-cover bg-center opacity-20 z-0"></div> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm font-bold">10 SC</span> | |
| <span class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-bold">VIP</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">High Roller Roulette</h4> | |
| <p class="text-gray-400 text-sm mb-4">For the elite players</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Prize Pool</p> | |
| <p class="text-xl font-bold text-neon-yellow">$10,000</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Entry</p> | |
| <p class="text-xl font-bold text-white">500 Coins</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2"> | |
| PRE-REGISTER | |
| </button> | |
| </div> | |
| <!-- Tournament Card 4 --> | |
| <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://i.postimg.cc/wTrQ9LWM/temp-Imaged-FKu-Ss.avif')] bg-cover bg-center opacity-20 z-0"></div> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm font-bold">25 SC</span> | |
| <span class="px-3 py-1 bg-orange-500 text-white rounded-full text-sm font-bold">VIP</span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Poker Night Fever</h4> | |
| <p class="text-gray-400 text-sm mb-4">Texas Hold'em tournament</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Prize Pool</p> | |
| <p class="text-xl font-bold text-neon-yellow">$3,000</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Starts In</p> | |
| <p class="text-xl font-bold text-white">06:45:18</p> | |
| </div> | |
| </div> | |
| <button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2"> | |
| PRE-REGISTER | |
| </button> | |
| </div> | |
| <!-- Tournament Card 5 --> | |
| <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('https://i.postimg.cc/wTrQ9LWM/temp-Imaged-FKu-Ss.avif')] bg-cover bg-center opacity-20 z-0"></div> | |
| <div class="flex justify-between items-start mb-4"> | |
| <span class="px-3 py-1 bg-yellow-500 text-white rounded-full text-sm font-bold">100 SC</span> | |
| <span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm font-bold flex items-center"> | |
| <span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span> | |
| LIVE | |
| </span> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-2">Baccarat Blitz</h4> | |
| <p class="text-gray-400 text-sm mb-4">High-stakes baccarat</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <p class="text-gray-400 text-sm">Prize Pool</p> | |
| <p class="text-xl font-bold text-neon-yellow">$5,000</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-400 text-sm">Players</p> | |
| <p class="text-xl font-bold text-white">32/50</p> | |
| </div> | |
| </div> | |
| <button class="w-full gradient-btn py-3 rounded-full text-dark-bg font-bold mt-2"> | |
| JOIN NOW | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hall of Fame --> | |
| <section class="mb-10"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-medal text-neon-yellow mr-3"></i> | |
| <span class="text-white neon-text">HALL OF FAME</span> | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Winner 1 --> | |
| <div class="p-6 flex flex-col items-center text-center"> | |
| <div class="mb-4"> | |
| <i class="fas fa-trophy text-5xl trophy-gold"></i> | |
| </div> | |
| <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-neon-yellow mb-4"> | |
| <img src="https://i.pravatar.cc/150?img=8" alt="Winner"> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-1">LuckyStar77</h4> | |
| <p class="text-gray-400 mb-2">Slot Master Tournament</p> | |
| <p class="text-2xl font-bold text-neon-yellow mb-4">$2,800</p> | |
| <p class="text-gray-400 text-sm">Dec 15, 2023</p> | |
| </div> | |
| <!-- Winner 2 --> | |
| <div class="p-6 flex flex-col items-center text-center"> | |
| <div class="mb-4"> | |
| <i class="fas fa-trophy text-5xl trophy-silver"></i> | |
| </div> | |
| <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-gray-400 mb-4"> | |
| <img src="https://i.pravatar.cc/150?img=19" alt="Winner"> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-1">BlackjackPro</h4> | |
| <p class="text-gray-400 mb-2">Card Masters Championship</p> | |
| <p class="text-2xl font-bold text-gray-300 mb-4">$1,950</p> | |
| <p class="text-gray-400 text-sm">Nov 28, 2023</p> | |
| </div> | |
| <!-- Winner 3 --> | |
| <div class="p-6 flex flex-col items-center text-center"> | |
| <div class="mb-4"> | |
| <i class="fas fa-trophy text-5xl trophy-bronze"></i> | |
| </div> | |
| <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-amber-700 mb-4"> | |
| <img src="https://i.pravatar.cc/150?img=27" alt="Winner"> | |
| </div> | |
| <h4 class="text-xl font-bold text-white mb-1">RouletteRoyal</h4> | |
| <p class="text-gray-400 mb-2">Spin to Win Challenge</p> | |
| <p class="text-2xl font-bold text-amber-600 mb-4">$1,200</p> | |
| <p class="text-gray-400 text-sm">Nov 12, 2023</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Invite Friends --> | |
| <section class="glass-panel p-8 mb-10 relative overflow-hidden"> | |
| <div class="absolute top-0 right-0 w-1/2 h-full opacity-20" style="background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 70%);"></div> | |
| <div class="relative z-10 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0 text-center md:text-left"> | |
| <h3 class="text-2xl font-bold text-white mb-2">Invite Friends & Earn Rewards</h3> | |
| <p class="text-gray-300 max-w-md">Get 100 coins for every friend who joins and plays their first tournament!</p> | |
| </div> | |
| <div class="flex flex-col items-center"> | |
| <div class="referral-badge bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-6 py-3 rounded-full mb-3"> | |
| <i class="fas fa-gift mr-2"></i> You've invited 3 / 5 friends | |
| </div> | |
| <button id="inviteBtn" class="gradient-btn px-8 py-3 rounded-full text-dark-bg font-bold flex items-center"> | |
| <i class="fas fa-user-plus mr-2"></i> INVITE FRIENDS NOW | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="py-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 NeonCasino. All rights reserved. Gambling can be addictive. Please play responsibly.</p> | |
| <p class="mt-2">Minimum age 18+. Terms and conditions apply.</p> | |
| </footer> | |
| <!-- Invite Modal --> | |
| <div id="inviteModal" class="modal-overlay hidden"> | |
| <div class="glass-panel p-8 max-w-md w-full relative"> | |
| <button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <div class="text-center mb-6"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-gift text-2xl text-dark-bg"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-white mb-2">Invite Friends & Earn</h3> | |
| <p class="text-gray-300">Share your referral link and earn 100 coins per friend!</p> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-2">Your Referral Link</label> | |
| <div class="flex"> | |
| <input type="text" value="https://neoncasino.com/ref/player32" class="flex-grow bg-glass-bg border border-gray-700 rounded-l-lg py-3 px-4 text-white focus:outline-none focus:border-neon-yellow" readonly> | |
| <button class="gradient-btn px-4 rounded-r-lg font-bold"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-400 mb-3">Share via</label> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fab fa-facebook-f text-white"></i> | |
| </button> | |
| <button class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center"> | |
| <i class="fab fa-whatsapp text-white"></i> | |
| </button> | |
| <button class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </button> | |
| <button class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fab fa-discord text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="glass-panel p-4 rounded-lg"> | |
| <h4 class="font-bold text-neon-yellow mb-2">Your Referral Progress</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="flex-grow h-3 bg-gray-800 rounded-full"> | |
| <div class="h-3 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full" style="width: 60%"></div> | |
| </div> | |
| <span class="ml-3 font-bold">3/5</span> | |
| </div> | |
| <p class="text-sm text-gray-400">Invite 2 more friends to unlock a 500 coin bonus!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Countdown Timer | |
| function updateCountdown() { | |
| const now = new Date(); | |
| const tomorrow = new Date(now); | |
| tomorrow.setDate(tomorrow.getDate() + 1); | |
| tomorrow.setHours(0, 0, 0, 0); | |
| const diff = tomorrow - now; | |
| const hours = Math.floor(diff / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| document.getElementById('countdown').textContent = | |
| `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Modal functionality | |
| const inviteBtn = document.getElementById('inviteBtn'); | |
| const inviteModal = document.getElementById('inviteModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| inviteBtn.addEventListener('click', () => { | |
| inviteModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| inviteModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', (event) => { | |
| if (event.target === inviteModal) { | |
| inviteModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Add animation to cards on scroll | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '0px', | |
| threshold: 0.1 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.glass-panel').forEach(panel => { | |
| panel.style.opacity = 0; | |
| panel.style.transform = 'translateY(20px)'; | |
| panel.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| observer.observe(panel); | |
| }); | |
| </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/tournament-ui-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |