Spaces:

ProjectGenesis
/

jackpot-ui

Running

App Files Files Community

ProjectGenesis commited on Aug 27, 2025

Commit

e4bd0f3

verified ·

1 Parent(s): b3b97e5

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

Browse files

Files changed (1) hide show

index.html +317 -384

index.html CHANGED Viewed

@@ -3,532 +3,465 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nioplay Jackpot - Win Big!</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Poppins:wght@300;400;500;600&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: {
-                        gold: '#FFD700',
-                        gold2: '#FF6A00',
-                        darkbg: '#0a0a0a',
                     },
                     fontFamily: {
-                        orbitron: ['Orbitron', 'sans-serif'],
-                        poppins: ['Poppins', 'sans-serif'],
                     },
                     boxShadow: {
                         'gold-glow': '0 0 15px rgba(255, 215, 0, 0.7)',
-                        'gold-glow-md': '0 0 20px rgba(255, 215, 0, 0.8)',
                     },
                     animation: {
-                        'pulse-slow': 'pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-                        'float': 'float 3s ease-in-out infinite',
-                        'shine': 'shine 2s infinite',
-                        'twinkle': 'twinkle 4s linear infinite',
                     },
                     keyframes: {
-                        shine: {
-                            '0%': { 'background-position': 'left' },
-                            '100%': { 'background-position': 'right' }
-                        },
-                        float: {
-                            '0%, 100%': { transform: 'translateY(0)' },
-                            '50%': { transform: 'translateY(-10px)' },
-                        },
                         twinkle: {
-                            '0%, 100%': { opacity: 0.2 },
-                            '50%': { opacity: 0.8 },
                         }
                     }
                 }
             }
         }
     </script>
-    <style type="text/css">
         body {
             background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
-            background-attachment: fixed;
-            font-family: 'Poppins', sans-serif;
             color: #fff;
             min-height: 100vh;
         }
-        .glass-bg {
-            background: rgba(15, 15, 15, 0.5);
             backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 215, 0, 0.2);
             border-radius: 16px;
-            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
         }
-        .jackpot-glow {
-            text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
             position: relative;
-            display: inline-block;
         }
-        .jackpot-glow::after {
-            content: "";
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.3) 50%, rgba(255,215,0,0) 100%);
-            animation: shine 3s infinite;
-            pointer-events: none;
         }
-        .neon-border {
-            box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.4);
-        }
-        .toggle:checked + .dot {
-            transform: translateX(100%);
         }
-        .win-feed {
-            animation: scroll 15s linear infinite;
         }
-        @keyframes scroll {
-            0% { transform: translateX(100%); }
-            100% { transform: translateX(-100%); }
-        }
-        .fade-in {
-            animation: fadeIn 0.5s ease-in;
         }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        .number-flip {
-            display: inline-block;
-            position: relative;
-            overflow: hidden;
-            height: 1.5em;
         }
         .sparkle {
             position: absolute;
-            background-color: rgba(255, 215, 0, 0.7);
             border-radius: 50%;
-            pointer-events: none;
-            z-index: 10;
-            animation: sparkleAnim 2s forwards;
         }
         @keyframes sparkleAnim {
-            0% { opacity: 1; transform: scale(0) translate(0, 0); }
-            50% { opacity: 1; transform: scale(1) translate(var(--tx), var(--ty)); }
-            100% { opacity: 0; transform: scale(0) translate(var(--tx2), var(--ty2)); }
         }
     </style>
 </head>
-<body class="relative overflow-x-hidden">
-    <!-- Casino Symbols Background -->
-    <div class="fixed inset-0 z-0 overflow-hidden">
-        <i class="fas fa-dice absolute top-[10%] left-[5%] text-white opacity-5 animate-float" style="font-size: 2rem;"></i>
-        <i class="fas fa-coins absolute top-[25%] right-[8%] text-white opacity-5 animate-float" style="font-size: 3rem; animation-delay: 0.5s"></i>
-        <i class="fas fa-diamond absolute bottom-[30%] left-[15%] text-white opacity-5 animate-float" style="font-size: 2rem; animation-delay: 1s"></i>
-        <i class="fas fa-heart absolute bottom-[15%] right-[10%] text-white opacity-5 animate-float" style="font-size: 2rem; animation-delay: 1.5s"></i>
-        <i class="fas fa-crown absolute top-[40%] left-[10%] text-yellow-300 opacity-10 animate-twinkle" style="font-size: 4rem;"></i>
     </div>
-    <div class="relative z-10 max-w-5xl mx-auto px-4 pb-20">
-        <!-- Header Section -->
-        <header class="py-10 text-center">
-            <h1 class="text-5xl md:text-7xl font-bold mb-6">
-                <span class="font-orbitron text-gold jackpot-glow">JACKPOT</span>
             </h1>
-            <div class="relative flex flex-col items-center justify-center my-8">
-                <div class="relative bg-black bg-opacity-50 px-8 py-4 rounded-xl neon-border">
-                    <div class="relative overflow-hidden inline-block">
-                        <span id="total-jackpot" class="font-orbitron text-4xl md:text-6xl bg-gradient-to-b from-gold to-white bg-clip-text text-transparent">3,198,392.30</span>
-                        <span class="font-orbitron text-4xl md:text-6xl ml-2 bg-gradient-to-b from-gold to-white bg-clip-text text-transparent">SC</span>
-                    </div>
-                    <div class="absolute -inset-4 rounded-full bg-gradient-to-r from-transparent via-gold to-transparent opacity-50 blur-md -z-10"></div>
-                </div>
-                <div class="mt-3 text-xs text-gray-300 tracking-wider font-poppins">Updates live as players spin in Jackpot Mode</div>
             </div>
-            <!-- Toggle -->
-            <div class="flex flex-col items-center my-6">
-                <div class="flex items-center space-x-3">
-                    <span class="font-semibold text-white">Jackpot Mode</span>
-                    <div class="relative inline-block w-16 mr-2 align-middle select-none">
-                        <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block h-6 w-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked>
-                        <label for="toggle" class="toggle-label block h-6 overflow-hidden rounded-full bg-gray-300 cursor-pointer"></label>
                     </div>
                 </div>
-                <div class="text-xs text-gray-400 mt-2">0.05 SC per spin while active</div>
             </div>
-        </header>
-        <!-- How to Enter Section -->
-        <section class="my-16">
-            <h2 class="text-xl text-center font-orbitron text-gold mb-8">HOW TO ENTER</h2>
-            <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 justify-items-center max-w-4xl mx-auto">
                 <!-- Step 1 -->
-                <div class="step-entry flex flex-col items-center text-center">
-                    <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
-                        <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
-                        <div class="w-16 h-16 rounded-full flex items-center justify-center bg-black bg-opacity-50 border-2 border-gold text-gold text-2xl">
-                            <i class="fas fa-toggle-on"></i>
-                        </div>
                     </div>
-                    <div class="font-bold text-white">Enable Jackpot Mode</div>
-                    <div class="text-xs text-gray-400 mt-1">Turn on the toggle</div>
                 </div>
                 <!-- Step 2 -->
-                <div class="step-entry flex flex-col items-center text-center">
-                    <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
-                        <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
-                        <div class="w-16 h-16 rounded-full flex items-center justify-center bg-black bg-opacity-50 border-2 border-gold text-gold text-2xl">
-                            <i class="fas fa-receipt"></i>
-                        </div>
                     </div>
-                    <div class="font-bold text-white">Spin Any Game</div>
-                    <div class="text-xs text-gray-400 mt-1">Cards, slots, and more</div>
                 </div>
                 <!-- Step 3 -->
-                <div class="step-entry flex flex-col items-center text-center">
-                    <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
-                        <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
-                        <div class="w-16 h-16 rounded-full flex items-center justify-center bg-black bg-opacity-50 border-2 border-gold text-gold text-2xl">
-                            <i class="fas fa-coins"></i>
-                        </div>
                     </div>
-                    <div class="font-bold text-white">Pay Entry Fee</div>
-                    <div class="text-xs text-gray-400 mt-1">0.05 SC automatically</div>
                 </div>
                 <!-- Step 4 -->
-                <div class="step-entry flex flex-col items-center text-center">
-                    <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
-                        <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
-                        <div class="w-16 h-16 rounded-full flex items-center justify-center bg-black bg-opacity-50 border-2 border-gold text-gold text-2xl">
-                            <i class="fas fa-trophy"></i>
-                        </div>
                     </div>
-                    <div class="font-bold text-white">Win Big</div>
-                    <div class="text-xs text-gray-400 mt-1">Life-changing prizes</div>
                 </div>
             </div>
         </section>
-        <!-- Countdown Timer -->
-        <section class="my-16">
-            <div class="glass-bg max-w-lg mx-auto p-6 relative z-10">
-                <div class="absolute -inset-0.5 bg-gradient-to-r from-gold to-gold2 rounded-xl opacity-30 blur-md -z-10"></div>
-                <div class="text-center">
-                    <div class="text-gray-300 text-sm mb-3">Next Jackpot Drops In:</div>
-                    <div id="countdown" class="font-orbitron text-4xl text-gold mb-4">
-                        <span>01</span>:<span>23</span>:<span>52</span>
-                    </div>
-                    <div class="text-xs text-gray-400">Jackpot drops every 6 hours or when pot cap is hit.</div>
                 </div>
             </div>
         </section>
-        <!-- Jackpot Tiers -->
-        <section class="my-16 text-center">
-            <h2 class="text-xl font-orbitron text-gold mb-8">JACKPOT TIERS</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                 <!-- Mini Tier -->
-                <div class="tier-card flex flex-col items-center">
-                    <div class="w-24 h-24 rounded-full flex items-center justify-center mb-4 bg-gradient-to-br from-gold to-gray-900 opacity-90 text-white">
-                        <i class="fas fa-gem text-4xl"></i>
                     </div>
-                    <h3 class="font-bold text-xl text-gold">Mini</h3>
-                    <p class="text-lg font-semibold">500 - 1,999 SC</p>
-                    <div class="mt-4 text-xs text-gray-300">Win every hour</div>
                 </div>
                 <!-- Mega Tier -->
-                <div class="tier-card flex flex-col items-center">
-                    <div class="w-24 h-24 rounded-full flex items-center justify-center mb-4 bg-gradient-to-br from-orange-500 to-gray-900 opacity-90 text-white">
-                        <i class="fas fa-coins text-4xl"></i>
                     </div>
-                    <h3 class="font-bold text-xl text-orange-400">Mega</h3>
-                    <p class="text-lg font-semibold">2,000 - 9,999 SC</p>
-                    <div class="mt-4 text-xs text-gray-300">Daily winners</div>
                 </div>
                 <!-- Legendary Tier -->
-                <div class="tier-card flex flex-col items-center">
-                    <div class="w-24 h-24 rounded-full flex items-center justify-center mb-4 bg-gradient-to-br from-red-600 to-gray-900 opacity-90 text-white">
-                        <i class="fas fa-crown text-4xl"></i>
                     </div>
-                    <h3 class="font-bold text-xl text-red-400">Legendary</h3>
-                    <p class="text-lg font-semibold">10,000+ SC</p>
-                    <div class="mt-4 text-xs text-gray-300">Life-changing payouts</div>
                 </div>
             </div>
-            <div class="opacity-50 w-32 h-px bg-gradient-to-r from-transparent via-gold to-transparent mx-auto my-8"></div>
         </section>
-        <!-- Recent Winners -->
-        <section class="my-16">
-            <h2 class="text-xl font-orbitron text-gold mb-6 text-center">RECENT NIOPLAY JACKPOT WINNERS</h2>
-            <div class="glass-bg overflow-hidden">
-                <div class="overflow-x-auto">
-                    <table class="w-full">
-                        <thead class="bg-black bg-opacity-30 border-b border-gray-700">
-                            <tr class="text-left">
-                                <th class="py-3 px-4 text-gray-300 font-semibold">Username</th>
-                                <th class="py-3 px-4 text-gray-300 font-semibold">Prize</th>
-                                <th class="py-3 px-4 text-gray-300 font-semibold">Game</th>
-                                <th class="py-3 px-4 text-gray-300 font-semibold">Date</th>
-                            </tr>
-                        </thead>
-                        <tbody id="winners-container" class="divide-y divide-gray-800">
-                            <!-- Dynamic content added by script -->
-                        </tbody>
-                    </table>
-                </div>
             </div>
         </section>
-        <!-- Live Win Feed -->
-        <section class="my-10">
-            <div class="relative w-full h-12 bg-black bg-opacity-30 rounded-lg overflow-hidden neon-border">
-                <div class="win-feed whitespace-nowrap flex items-center h-full text-gold">
-                    <div class="flex space-x-6 py-2 px-4">
-                        <div>🎉 <span class="font-semibold">LuckyRoller88</span> won <span class="text-gold2 font-bold">4,200 SC</span> on Super Panda!</div>
-                        <div>🏆 <span class="font-semibold">MidasTouch55</span> scored <span class="text-gold2 font-bold">8,750 SC</span> on Diamond Fortune!</div>
-                        <div>⭐ <span class="font-semibold">JackpotQueen20</span> hit <span class="text-gold2 font-bold">15,300 SC</span> on Pharaoh's Gold!</div>
-                        <div>💫 <span class="font-semibold">SpinMaster99</span> cashed <span class="text-gold2 font-bold">5,820 SC</span> on Wild West!</div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Jackpot Stats Badges -->
-        <section class="my-16">
-            <div class="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
-                <div class="stat-badge flex items-center bg-black bg-opacity-30 px-5 py-3 rounded-xl neon-border">
-                    <i class="fas fa-sync-alt text-gold text-xl mr-3"></i>
                     <div>
-                        <div class="text-xs text-gray-400">Spins Today</div>
-                        <div class="text-xl font-bold">182,390</div>
                     </div>
                 </div>
-                <div class="stat-badge flex items-center bg-black bg-opacity-30 px-5 py-3 rounded-xl neon-border">
-                    <i class="fas fa-users text-gold2 text-xl mr-3"></i>
                     <div>
-                        <div class="text-xs text-gray-400">Players in Jackpot Mode</div>
-                        <div class="text-xl font-bold">982</div>
                     </div>
                 </div>
-                <div class="stat-badge flex items-center bg-black bg-opacity-30 px-5 py-3 rounded-xl neon-border">
-                    <i class="fas fa-trophy text-gold text-xl mr-3"></i>
                     <div>
-                        <div class="text-xs text-gray-400">Biggest Jackpot Ever</div>
-                        <div class="text-xl font-bold">41,200 SC</div>
                     </div>
                 </div>
             </div>
         </section>
-        <!-- Top Contributors -->
-        <section class="my-16 max-w-lg mx-auto">
-            <h2 class="text-xl font-orbitron text-gold mb-6 text-center">TOP CONTRIBUTORS</h2>
-            <div class="space-y-3">
-                <div class="bg-black bg-opacity-20 py-3 px-4 rounded-lg flex justify-between items-center hover:bg-opacity-40 transition-all border border-transparent hover:border-gold">
-                    <div class="flex items-center">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-b from-gold to-gray-700 mr-3 flex items-center justify-center">🥇</div>
-                        <span class="font-semibold">GoldHunter21</span>
                     </div>
-                    <span class="text-gold font-bold">23,420 SC</span>
-                </div>
-                <div class="bg-black bg-opacity-20 py-3 px-4 rounded-lg flex justify-between items-center hover:bg-opacity-40 transition-all border border-transparent hover:border-gold2">
-                    <div class="flex items-center">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-b from-silver to-gray-700 mr-3 flex items-center justify-center">🥈</div>
-                        <span class="font-semibold">FortuneFinder</span>
                     </div>
-                    <span class="text-gold font-bold">18,650 SC</span>
-                </div>
-                <div class="bg-black bg-opacity-20 py-3 px-4 rounded-lg flex justify-between items-center hover:bg-opacity-40 transition-all border border-transparent hover:border-orange-600">
-                    <div class="flex items-center">
-                        <div class="w-8 h-8 rounded-full bg-gradient-to-b from-yellow-700 to-gray-700 mr-3 flex items-center justify-center">🥉</div>
-                        <span class="font-semibold">SpinMaster</span>
                     </div>
-                    <span class="text-gold font-bold">14,340 SC</span>
                 </div>
             </div>
         </section>
-        <!-- Terms Section -->
-        <section class="mt-12 pt-6 border-t border-gray-700">
-            <div
-                id="termsHeader"
-                class="cursor-pointer flex justify-between items-center group"
-                onclick="document.getElementById('termsContent').classList.toggle('hidden')"
-            >
-                <h3 class="font-orbitron text-lg text-gold">NIOPLAY JACKPOT TERMS & DETAILS</h3>
-                <i id="toggleIcon" class="fas fa-chevron-down text-gold2 transform group-hover:scale-110"></i>
-            </div>
-            <div id="termsContent" class="hidden mt-4 text-sm text-gray-300 space-y-3">
-                <p>1. Jackpot Mode must be enabled to participate. Each spin with this mode active costs 0.05 SC.</p>
-                <p>2. Jackpot tiers have specific prize ranges: Mini (500-1,999 SC), Mega (2,000-9,999 SC), Legendary (10,000+ SC).</p>
-                <p>3. Jackpot winner selection occurs through an audited random algorithm after each qualifying spin.</p>
-                <p>4. Jackpot drops every 6 hours or when reaching the pot cap of 50,000 SC.</p>
-                <p>5. Winners are automatically notified and funds are deposited into their Nioplay accounts immediately.</p>
-                <p>6. Nioplay reserves the right to void entries and suspend accounts in case of suspicious activities.</p>
-                <p class="text-xs mt-6 text-gray-400">© 2023 Nioplay Casino. All rights reserved.</p>
             </div>
         </section>
     </div>
     <script>
-        // Create sparks animation for jackpot counter
-        function createSparks() {
-            const sparks = ['💎', '✨', '⭐', '🔥'];
-            for (let i = 0; i < 15; i++) {
-                const spark = document.createElement('div');
-                spark.className = 'sparkle';
-                spark.innerHTML = sparks[Math.floor(Math.random() * sparks.length)];
-                spark.style.setProperty('--tx', `${Math.random() * 200 - 100}px`);
-                spark.style.setProperty('--ty', `${Math.random() * 200 - 100}px`);
-                spark.style.setProperty('--tx2', `${Math.random() * 200 - 100}px`);
-                spark.style.setProperty('--ty2', `${Math.random() * 200 - 100}px`);
-                spark.style.left = `${Math.random() * 100}%`;
-                spark.style.top = `${Math.random() * 100}%`;
-                spark.style.fontSize = `${Math.random() * 0.8 + 0.5}rem`;
-                document.body.appendChild(spark);
-                setTimeout(() => {
-                    spark.remove();
-                }, 2000);
-            }
-        }
-        // Simulate jackpot counter incrementing
-        function increaseJackpot() {
-            const jackpotElement = document.getElementById('total-jackpot');
-            const currentValue = parseFloat(jackpotElement.innerText.replace(/,/g, ''));
-            const increaseAmount = Math.random() * 100 + 10;
-            const newValue = currentValue + increaseAmount;
-            jackpotElement.innerText = newValue.toLocaleString('en-US', {
-                maximumFractionDigits: 2,
-                minimumFractionDigits: 2
-            });
-            createSparks();
-        }
-        // Countdown timer functionality
-        function startCountdown() {
-            let hours = 1;
-            let minutes = 23;
-            let seconds = 52;
-            setInterval(() => {
-                seconds--;
-                if (seconds < 0) {
-                    seconds = 59;
-                    minutes--;
-                    if (minutes < 0) {
-                        minutes = 59;
-                        hours--;
-                        if (hours < 0) {
-                            hours = 6;
-                        }
-                    }
-                }
-                document.querySelectorAll('#countdown span')[0].textContent = hours.toString().padStart(2, '0');
-                document.querySelectorAll('#countdown span')[1].textContent = minutes.toString().padStart(2, '0');
-                document.querySelectorAll('#countdown span')[2].textContent = seconds.toString().padStart(2, '0');
-            }, 1000);
-        }
-        // Add winner to the table with animation
-        function addWinnerRow(username, prize, game, date) {
-            const table = document.getElementById('winners-container');
-            const newRow = document.createElement('tr');
-            newRow.className = 'opacity-0 fade-in'
-            newRow.innerHTML = `
-                <td class="py-3 px-4"><span class="text-gold">${username}</span></td>
-                <td class="py-3 px-4"><span class="font-semibold text-gold2">${prize} SC</span></td>
-                <td class="py-3 px-4">${game}</td>
-                <td class="py-3 px-4 text-gray-400">${date}</td>
-            `;
-            table.insertBefore(newRow, table.firstChild);
-            // Limit table to 6 rows
-            if (table.children.length > 6) {
-                table.removeChild(table.lastChild);
-            }
-        }
-        // Sample recent winners data
-        const winnersData = [
-            { username: 'SpinKing77', prize: '2,480', game: 'Lucky Wheel', date: '5 mins ago' },
-            { username: 'GoldRush23', prize: '5,670', game: 'Golden Dragon', date: '12 mins ago' },
-            { username: 'FortuneFinder', prize: '7,220', game: 'Paulopatra', date: '24 mins ago' },
-            { username: 'JackpotJill', prize: '1,380', game: 'Cats Royal', date: '42 mins ago' },
-            { username: 'LuckyDice99', prize: '9,540', game: 'Viking Quest', date: '1 hr ago' },
-        ];
-        // Initialize elements
-        document.addEventListener('DOMContentLoaded', function() {
-            // Simulate jackpot increasing
-            setInterval(increaseJackpot, 3000);
-            // Start countdown timer
-            startCountdown();
-            // Add winners with animation delay
-            let delay = 0;
-            winnersData.forEach(winner => {
-                setTimeout(() => {
-                    addWinnerRow(winner.username, winner.prize, winner.game, winner.date);
-                }, delay);
-                delay += 1500;
-            });
-            // Add new winner periodically
-            setInterval(() => {
-                const newWinner = winnersData[Math.floor(Math.random() * winnersData.length)];
-                addWinnerRow(newWinner.username, newWinner.prize, newWinner.game, 'just now');
-            }, 10000);
-            // Toggle switch styling
-            document.getElementById('toggle').addEventListener('change', function() {
-                const label = document.querySelector('label[for="toggle"]');
-                if (this.checked) {
-                    label.classList.remove('bg-gray-600');
-                    label.classList.add('bg-green-500');
-                } else {
-                    label.classList.remove('bg-green-500');
-                    label.classList.add('bg-gray-600');
-                }
             });
-            // Trigger the toggle to appear "on" by default on load
-            document.getElementById('toggle').dispatchEvent(new Event('change'));
-        });
     </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>

 <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>