Spaces:
Running
Running
Design a modern, mobile-optimized Jackpot page for the online sweepstakes casino Nioplay. Use selective glassmorphism, neon gold accents, animated jackpot counters, and lightweight iconography. Avoid overusing glass cards — use glow icons, badge counters, and infographic layouts where possible. Visual hierarchy should guide players step-by-step without overwhelming them. 🌌 BACKGROUND & AESTHETIC FOUNDATION Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%) Font: Orbitron or Poppins Accent Glow: Primary: #FFD700 (golden yellow) Secondary: #FF6A00 (neon orange) UI Style: Use glass cards only for important interactive blocks (e.g., toggles, leaderboards, tables). Use icon rows or highlight badges for supportive info. 🥇 SECTION 1: JACKPOT HEADER Header Text: Glowing neon yellow “JACKPOT” headline with dice, coins, or slot symbols faintly floating behind. Add light shimmer or slow twinkle animation. Jackpot Total Display: Large number (e.g., 3,198,392.30 SC) with pulsing animated increase. Slight radial glow around the number. Below: Small text: "Updates live as players spin in Jackpot Mode." Jackpot Mode Toggle: Pill-shaped toggle (green ON/OFF) with glowing outline. Label: "Jackpot Mode" Subtext: "0.05 SC per spin while active" 💡 This section should be bold and attention-grabbing, but not overly boxed-in. No need for glass cards — just let it breathe. 🎯 SECTION 2: HOW TO ENTER (USE ICON ROW) Use a horizontal icon row (no glass cards), each with: Circle icon (minimal glow) Bold label underneath Optional short subtext below 4 Steps: Enable Jackpot Mode (Toggle Icon) Spin Any Game (Slot Reel Icon) Pay Entry Fee (Coin Drop Icon) Win Big (Treasure Icon) 🧠 Use responsive layout: Stack into two rows on mobile. Icons should be color-coded with soft shadows — no need for borders or backgrounds here. ⏳ SECTION 3: COUNTDOWN TIMER (MINIMAL GLASS CARD) Use a single thin glass card for the countdown block. Inside: Label: "Next Jackpot Drops In:" Countdown Timer: 01:23:52 (animated glow digits) Small gold sparkles around timer. Caption: "Jackpot drops every 6 hours or when pot cap is hit." ✂️ Don't overdesign — treat this as a divider between top and mid sections. 💰 SECTION 4: JACKPOT TIERS (ICON GRID) Replace full cards with an infographic-style 3-tier layout: 3 vertical icons, each with: Tier Name (Mini / Mega / Legendary) Range Text (e.g., 500–1,999 SC) Pot Icon (styled differently per tier) Tier glow color: Mini = Gold Mega = Orange Legendary = Red Pulse ✅ Avoid using separate cards. Use subtle line dividers or just space them evenly. Think “slot game infographic.” 📊 SECTION 5: RECENT WINNERS TABLE (GLASS CARD — ONE OF THE FEW) One wide glassmorphism card Title: "Recent Nioplay Jackpot Winners" Table format: Columns: Username | Prize | Game | Date Each row glows green briefly when added (animated). Hover glow on row: soft neon outline. ✅ This is one of the few places glass works — use it to frame player wins clearly. 🔔 SECTION 6: LIVE WIN FEED (TICKER STYLE) Create a thin horizontal scroll bar under the winner table (not inside a card). Scrolls recent wins: "🎉 LuckyRoller88 won 4,200 SC on Super Panda!" Auto-scrolls or fades between each win every 5 seconds. 💡 Keep it sleek — small text on black background with gold glow. 📈 SECTION 7: JACKPOT STATS (BADGE STYLE) Instead of cards, use horizontal glowing badges with icons: Spins Today: 182,390 Players in Jackpot Mode: 982 Biggest Jackpot Ever: 41,200 SC Each badge has: Icon on the left Bold glowing number No background card — just floating with light drop shadow 🧍♂️ SECTION 8: TOP CONTRIBUTORS (OPTIONAL) If used, limit to a simple scroll list, no card Each row: Avatar Username Amount contributed Use crown emojis 🥇🥈🥉 for top 3. Minimalistic, not boxed. 📃 SECTION 9: TERMS COLLAPSE Dropdown-style collapsible block titled: "Nioplay Jackpot Terms & Details" Show hidden block on click with clean text. No need for a card — just a thin line separator and dropdown. - Follow Up Deployment
e4bd0f3
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nioplay Jackpot</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'neon-gold': '#FFD700', | |
| 'neon-orange': '#FF6A00', | |
| 'dark-bg': '#0a0a0a', | |
| 'glass': 'rgba(30, 15, 0, 0.25)' | |
| }, | |
| fontFamily: { | |
| 'orbitron': ['Orbitron', 'sans-serif'], | |
| 'poppins': ['Poppins', 'sans-serif'] | |
| }, | |
| boxShadow: { | |
| 'gold-glow': '0 0 15px rgba(255, 215, 0, 0.7)', | |
| 'orange-glow': '0 0 15px rgba(255, 106, 0, 0.7)', | |
| 'inner-gold': 'inset 0 0 10px rgba(255, 215, 0, 0.5)' | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'twinkle': 'twinkle 2s ease-in-out infinite', | |
| 'glow': 'glow 1.5s ease-in-out infinite alternate' | |
| }, | |
| keyframes: { | |
| twinkle: { | |
| '0%, 100%': { opacity: '0.6' }, | |
| '50%': { opacity: '1' } | |
| }, | |
| glow: { | |
| '0%': { 'box-shadow': '0 0 5px rgba(255, 215, 0, 0.5)' }, | |
| '100%': { 'box-shadow': '0 0 20px rgba(255, 215, 0, 0.9)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%); | |
| color: #fff; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .glass-card { | |
| background: rgba(30, 15, 0, 0.25); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 215, 0, 0.1); | |
| border-radius: 16px; | |
| } | |
| .neon-gold { | |
| color: #FFD700; | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); | |
| } | |
| .neon-orange { | |
| color: #FF6A00; | |
| text-shadow: 0 0 10px rgba(255, 106, 0, 0.7); | |
| } | |
| .jackpot-counter { | |
| font-size: clamp(2rem, 6vw, 4rem); | |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); | |
| position: relative; | |
| } | |
| .jackpot-counter::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%); | |
| z-index: -1; | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| .tier-mini { background: linear-gradient(45deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05)); } | |
| .tier-mega { background: linear-gradient(45deg, rgba(255,106,0,0.1), rgba(255,106,0,0.05)); } | |
| .tier-legend { background: linear-gradient(45deg, rgba(255,50,50,0.1), rgba(255,50,50,0.05)); } | |
| .winner-row { | |
| transition: all 0.3s ease; | |
| } | |
| .winner-row:hover { | |
| box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3); | |
| transform: scale(1.01); | |
| } | |
| .new-winner { | |
| animation: highlight 3s ease; | |
| } | |
| @keyframes highlight { | |
| 0% { background: rgba(0, 255, 0, 0.3); } | |
| 100% { background: transparent; } | |
| } | |
| .sparkle { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| background: #FFD700; | |
| border-radius: 50%; | |
| box-shadow: 0 0 10px 2px #FFD700; | |
| animation: sparkleAnim 2s infinite; | |
| } | |
| @keyframes sparkleAnim { | |
| 0% { opacity: 0; transform: scale(0); } | |
| 50% { opacity: 1; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(0) translate(20px, -20px); } | |
| } | |
| .floating { | |
| animation: floating 4s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .ticker-item { | |
| animation: ticker 20s linear infinite; | |
| display: inline-block; | |
| padding-left: 100%; | |
| white-space: nowrap; | |
| } | |
| @keyframes ticker { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-poppins"> | |
| <!-- Background Elements --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <i class="fas fa-dice absolute text-white opacity-5 text-6xl top-[10%] left-[10%] floating" style="animation-delay: 0.5s;"></i> | |
| <i class="fas fa-coins absolute text-yellow-400 opacity-5 text-6xl top-[15%] right-[15%] floating" style="animation-delay: 1.5s;"></i> | |
| <i class="fas fa-gem absolute text-yellow-400 opacity-5 text-6xl bottom-[20%] left-[15%] floating" style="animation-delay: 2.5s;"></i> | |
| <i class="fab fa-bitcoin absolute text-yellow-400 opacity-5 text-6xl bottom-[15%] right-[10%] floating" style="animation-delay: 3.5s;"></i> | |
| </div> | |
| <div class="max-w-5xl mx-auto px-4 py-8 relative z-10"> | |
| <!-- Section 1: Jackpot Header --> | |
| <section class="text-center mb-12"> | |
| <h1 class="font-orbitron text-5xl md:text-7xl font-bold neon-gold mb-4 relative"> | |
| JACKPOT | |
| <span class="absolute top-0 left-0 right-0 opacity-30 text-6xl md:text-8xl animate-pulse-slow">JACKPOT</span> | |
| </h1> | |
| <div class="relative inline-block my-6"> | |
| <div class="jackpot-counter font-orbitron neon-gold">3,198,392.30 SC</div> | |
| <div class="text-sm text-gray-400 mt-2">Updates live as players spin in Jackpot Mode.</div> | |
| <!-- Sparkles --> | |
| <div class="sparkle" style="top: -10px; left: 20px; animation-delay: 0.2s;"></div> | |
| <div class="sparkle" style="top: 30px; right: 40px; animation-delay: 0.8s;"></div> | |
| <div class="sparkle" style="bottom: 0; left: 50%; animation-delay: 1.4s;"></div> | |
| </div> | |
| <div class="mt-8 flex flex-col items-center"> | |
| <div class="flex items-center mb-2"> | |
| <span class="font-orbitron text-lg mr-4">Jackpot Mode</span> | |
| <div class="relative inline-block w-16 h-8 rounded-full bg-gray-700 cursor-pointer"> | |
| <div class="absolute left-1 top-1 w-6 h-6 bg-green-400 rounded-full transition-all duration-300 shadow-lg shadow-green-500/50"></div> | |
| <div class="absolute inset-0 rounded-full border-2 border-green-500 opacity-70 animate-pulse-slow"></div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-400">0.05 SC per spin while active</div> | |
| </div> | |
| </section> | |
| <!-- Section 2: How to Enter --> | |
| <section class="mb-12"> | |
| <h2 class="font-orbitron text-2xl text-center mb-8 neon-gold">HOW TO ENTER</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Step 1 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-yellow-700 to-gray-900 flex items-center justify-center mb-3 shadow-lg shadow-yellow-500/20"> | |
| <i class="fas fa-toggle-on text-3xl neon-gold"></i> | |
| </div> | |
| <h3 class="font-orbitron text-lg mb-1">Enable Jackpot Mode</h3> | |
| <p class="text-xs text-gray-400">Toggle the switch above</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-yellow-700 to-gray-900 flex items-center justify-center mb-3 shadow-lg shadow-yellow-500/20"> | |
| <i class="fas fa-dice text-3xl neon-orange"></i> | |
| </div> | |
| <h3 class="font-orbitron text-lg mb-1">Spin Any Game</h3> | |
| <p class="text-xs text-gray-400">Play your favorite slots</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-yellow-700 to-gray-900 flex items-center justify-center mb-3 shadow-lg shadow-yellow-500/20"> | |
| <i class="fas fa-coins text-3xl neon-gold"></i> | |
| </div> | |
| <h3 class="font-orbitron text-lg mb-1">Pay Entry Fee</h3> | |
| <p class="text-xs text-gray-400">0.05 SC per spin</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-br from-yellow-700 to-gray-900 flex items-center justify-center mb-3 shadow-lg shadow-yellow-500/20"> | |
| <i class="fas fa-trophy text-3xl neon-orange"></i> | |
| </div> | |
| <h3 class="font-orbitron text-lg mb-1">Win Big</h3> | |
| <p class="text-xs text-gray-400">Massive prizes await</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 3: Countdown Timer --> | |
| <section class="glass-card p-6 mb-12 relative overflow-hidden"> | |
| <!-- Sparkles --> | |
| <div class="sparkle" style="top: 15px; left: 30px;"></div> | |
| <div class="sparkle" style="bottom: 20px; right: 40px; animation-delay: 1s;"></div> | |
| <div class="text-center"> | |
| <div class="font-orbitron text-lg mb-3">Next Jackpot Drops In:</div> | |
| <div class="flex justify-center items-center space-x-2 md:space-x-4"> | |
| <div class="font-orbitron text-3xl md:text-4xl bg-gray-900 rounded-lg py-3 px-4 min-w-[70px] text-center neon-gold glow-animation">01</div> | |
| <div class="text-2xl neon-gold">:</div> | |
| <div class="font-orbitron text-3xl md:text-4xl bg-gray-900 rounded-lg py-3 px-4 min-w-[70px] text-center neon-gold glow-animation">23</div> | |
| <div class="text-2xl neon-gold">:</div> | |
| <div class="font-orbitron text-3xl md:text-4xl bg-gray-900 rounded-lg py-3 px-4 min-w-[70px] text-center neon-gold glow-animation">52</div> | |
| </div> | |
| <div class="text-sm text-gray-400 mt-3">Jackpot drops every 6 hours or when pot cap is hit.</div> | |
| </div> | |
| </section> | |
| <!-- Section 4: Jackpot Tiers --> | |
| <section class="mb-12"> | |
| <h2 class="font-orbitron text-2xl text-center mb-8 neon-gold">JACKPOT TIERS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Mini Tier --> | |
| <div class="tier-mini rounded-xl p-6 text-center border border-yellow-500/30 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at center, #FFD700 0%, transparent 70%);"></div> | |
| <div class="relative z-10"> | |
| <i class="fas fa-crown text-4xl neon-gold mb-3"></i> | |
| <h3 class="font-orbitron text-xl mb-1">Mini</h3> | |
| <div class="text-lg neon-gold mb-3">500 - 1,999 SC</div> | |
| <div class="text-sm text-gray-400">Frequent wins</div> | |
| </div> | |
| </div> | |
| <!-- Mega Tier --> | |
| <div class="tier-mega rounded-xl p-6 text-center border border-orange-500/30 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at center, #FF6A00 0%, transparent 70%);"></div> | |
| <div class="relative z-10"> | |
| <i class="fas fa-gem text-4xl neon-orange mb-3"></i> | |
| <h3 class="font-orbitron text-xl mb-1">Mega</h3> | |
| <div class="text-lg neon-orange mb-3">2,000 - 9,999 SC</div> | |
| <div class="text-sm text-gray-400">Life-changing</div> | |
| </div> | |
| </div> | |
| <!-- Legendary Tier --> | |
| <div class="tier-legend rounded-xl p-6 text-center border border-red-500/30 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at center, #FF4040 0%, transparent 70%);"></div> | |
| <div class="relative z-10"> | |
| <i class="fas fa-fire text-4xl text-red-400 mb-3" style="text-shadow: 0 0 10px rgba(255, 64, 64, 0.7);"></i> | |
| <h3 class="font-orbitron text-xl mb-1">Legendary</h3> | |
| <div class="text-lg text-red-400 mb-3" style="text-shadow: 0 0 10px rgba(255, 64, 64, 0.7);">10,000+ SC</div> | |
| <div class="text-sm text-gray-400">Ultimate prize</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 5: Recent Winners Table --> | |
| <section class="glass-card p-6 mb-8"> | |
| <h2 class="font-orbitron text-2xl text-center mb-6 neon-gold">Recent Nioplay Jackpot Winners</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-yellow-500/30"> | |
| <th class="py-3 text-left font-orbitron">Username</th> | |
| <th class="py-3 text-left font-orbitron">Prize</th> | |
| <th class="py-3 text-left font-orbitron">Game</th> | |
| <th class="py-3 text-left font-orbitron">Date</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="winner-row border-b border-gray-700/50 hover:neon-gold"> | |
| <td class="py-3"><span class="font-semibold">LuckyDice23</span></td> | |
| <td class="py-3 neon-gold">8,240 SC</td> | |
| <td class="py-3">Diamond Fortunes</td> | |
| <td class="py-3">Today, 14:23</td> | |
| </tr> | |
| <tr class="winner-row border-b border-gray-700/50 hover:neon-gold"> | |
| <td class="py-3"><span class="font-semibold">SpinMaster99</span></td> | |
| <td class="py-3 neon-gold">5,120 SC</td> | |
| <td class="py-3">Golden Pharaoh</td> | |
| <td class="py-3">Today, 11:45</td> | |
| </tr> | |
| <tr class="winner-row border-b border-gray-700/50 hover:neon-gold new-winner"> | |
| <td class="py-3"><span class="font-semibold">GoldRush77</span></td> | |
| <td class="py-3 neon-gold">12,800 SC</td> | |
| <td class="py-3">Wild West Wins</td> | |
| <td class="py-3">Today, 09:18</td> | |
| </tr> | |
| <tr class="winner-row border-b border-gray-700/50 hover:neon-gold"> | |
| <td class="py-3"><span class="font-semibold">FortuneSeeker</span></td> | |
| <td class="py-3 neon-gold">3,450 SC</td> | |
| <td class="py-3">Mystic Dragons</td> | |
| <td class="py-3">Yesterday, 22:37</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Section 6: Live Win Feed --> | |
| <section class="mb-8 relative overflow-hidden"> | |
| <div class="w-full h-10 bg-black/50 rounded-lg flex items-center px-4"> | |
| <div class="whitespace-nowrap overflow-hidden w-full"> | |
| <div class="ticker-item"> | |
| <span class="mr-8">🎉 LuckyRoller88 won 4,200 SC on Super Panda!</span> | |
| <span class="mr-8">🎊 JackpotWinner won 15,000 SC on Diamond Mine!</span> | |
| <span class="mr-8">✨ MegaSpin won 7,500 SC on Pharaoh's Gold!</span> | |
| <span class="mr-8">🏆 FortuneHunter won 9,800 SC on Wild Safari!</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 7: Jackpot Stats --> | |
| <section class="mb-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="flex items-center p-4 bg-gradient-to-r from-yellow-900/30 to-gray-900/30 rounded-lg border border-yellow-500/20 shadow-lg shadow-yellow-500/10"> | |
| <i class="fas fa-sync-alt text-2xl neon-gold mr-3"></i> | |
| <div> | |
| <div class="text-sm text-gray-400">Spins Today</div> | |
| <div class="font-orbitron text-xl neon-gold">182,390</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-4 bg-gradient-to-r from-yellow-900/30 to-gray-900/30 rounded-lg border border-yellow-500/20 shadow-lg shadow-yellow-500/10"> | |
| <i class="fas fa-users text-2xl neon-orange mr-3"></i> | |
| <div> | |
| <div class="text-sm text-gray-400">Players in Jackpot</div> | |
| <div class="font-orbitron text-xl neon-orange">982</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-4 bg-gradient-to-r from-yellow-900/30 to-gray-900/30 rounded-lg border border-yellow-500/20 shadow-lg shadow-yellow-500/10"> | |
| <i class="fas fa-trophy text-2xl text-red-400 mr-3" style="text-shadow: 0 0 8px rgba(255, 64, 64, 0.7);"></i> | |
| <div> | |
| <div class="text-sm text-gray-400">Biggest Jackpot</div> | |
| <div class="font-orbitron text-xl" style="color: #FF4040; text-shadow: 0 0 8px rgba(255, 64, 64, 0.7);">41,200 SC</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 8: Top Contributors --> | |
| <section class="mb-10"> | |
| <h2 class="font-orbitron text-xl text-center mb-4 neon-gold">TOP CONTRIBUTORS</h2> | |
| <div class="glass-card p-4 max-w-md mx-auto"> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between items-center p-2 hover:bg-yellow-500/10 rounded"> | |
| <div class="flex items-center"> | |
| <span class="text-yellow-400 mr-2">🥇</span> | |
| <span class="font-semibold">HighRollerX</span> | |
| </div> | |
| <div class="neon-gold">8,240 SC</div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-yellow-500/10 rounded"> | |
| <div class="flex items-center"> | |
| <span class="text-gray-300 mr-2">🥈</span> | |
| <span class="font-semibold">DiceMaster</span> | |
| </div> | |
| <div class="neon-gold">7,120 SC</div> | |
| </div> | |
| <div class="flex justify-between items-center p-2 hover:bg-yellow-500/10 rounded"> | |
| <div class="flex items-center"> | |
| <span class="text-amber-700 mr-2">🥉</span> | |
| <span class="font-semibold">GoldDigger</span> | |
| </div> | |
| <div class="neon-gold">5,980 SC</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 9: Terms Collapse --> | |
| <section class="mb-10"> | |
| <div class="border-t border-b border-yellow-500/30 py-4 cursor-pointer"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-orbitron neon-gold">Nioplay Jackpot Terms & Details</h3> | |
| <i class="fas fa-chevron-down text-yellow-500"></i> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-400 hidden"> | |
| <p class="mb-2">• Jackpot Mode costs 0.05 SC per spin when activated</p> | |
| <p class="mb-2">• Jackpot drops every 6 hours or when reaching the cap of 5,000,000 SC</p> | |
| <p class="mb-2">• All spins in any game contribute to the jackpot when Jackpot Mode is active</p> | |
| <p class="mb-2">• Winners are selected randomly from all active players in Jackpot Mode</p> | |
| <p class="mb-2">• Minimum prize: 500 SC, maximum prize: 100,000 SC</p> | |
| <p>• Nioplay reserves the right to modify terms at any time</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| // Toggle terms visibility | |
| document.querySelector('#terms-toggle').addEventListener('click', function() { | |
| const termsContent = document.querySelector('#terms-content'); | |
| const icon = this.querySelector('i'); | |
| termsContent.classList.toggle('hidden'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('fa-chevron-up'); | |
| }); | |
| // Simulate jackpot counter animation | |
| const jackpotElement = document.querySelector('.jackpot-counter'); | |
| let jackpotValue = 3198392.30; | |
| setInterval(() => { | |
| jackpotValue += Math.random() * 100; | |
| jackpotElement.textContent = jackpotValue.toLocaleString('en-US', { | |
| minimumFractionDigits: 2, | |
| maximumFractionDigits: 2 | |
| }); | |
| }, 3000); | |
| // Simulate new winner highlight | |
| setInterval(() => { | |
| const winnerRows = document.querySelectorAll('.winner-row'); | |
| winnerRows.forEach(row => row.classList.remove('new-winner')); | |
| setTimeout(() => { | |
| const randomRow = Math.floor(Math.random() * winnerRows.length); | |
| winnerRows[randomRow].classList.add('new-winner'); | |
| }, 100); | |
| }, 10000); | |
| </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/jackpot-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |