Hugging Face's logo

Spaces:
ProjectGenesis
/
jackpot-ui
Running

App Files Community
ProjectGenesis commited on
Commit
b3b97e5
·
verified ·
1 Parent(s): b932cdc

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
  1. index.html +389 -375
index.html CHANGED
@@ -3,28 +3,46 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Nioplay Jackpot</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
 
 
 
 
 
14
  fontFamily: {
15
  orbitron: ['Orbitron', 'sans-serif'],
16
- poppins: ['Poppins', 'sans-serif']
17
- },
18
- colors: {
19
- 'gold': '#FFD700',
20
- 'neon-orange': '#FF6A00',
21
- 'dark-bg': '#0a0a0a',
22
- 'glass': 'rgba(255, 255, 255, 0.05)'
23
  },
24
  boxShadow: {
25
  'gold-glow': '0 0 15px rgba(255, 215, 0, 0.7)',
26
- 'gold-glow-lg': '0 0 25px rgba(255, 215, 0, 0.8)',
27
- 'neon-glow': '0 0 10px rgba(255, 106, 0, 0.7)'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
  }
30
  }
@@ -33,487 +51,483 @@
33
  <style type="text/css">
34
  body {
35
  background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
36
- min-height: 100vh;
37
- color: white;
38
  font-family: 'Poppins', sans-serif;
 
 
39
  }
40
 
41
- .jackpot-text {
42
- font-family: 'Orbitron', sans-serif;
43
- text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
44
- position: relative;
45
- overflow: hidden;
46
- }
47
-
48
- .jackpot-text::after {
49
- content: '';
50
- position: absolute;
51
- top: -50%;
52
- left: -60%;
53
- width: 20px;
54
- height: 200%;
55
- background: rgba(255, 255, 255, 0.3);
56
- transform: rotate(25deg);
57
- animation: shine 3s infinite;
58
- }
59
-
60
- @keyframes shine {
61
- 0% { left: -60%; }
62
- 20% { left: 100%; }
63
- 100% { left: 100%; }
64
- }
65
-
66
- .jackpot-amount {
67
- font-family: 'Orbitron', sans-serif;
68
- animation: pulse 2s infinite;
69
- }
70
-
71
- @keyframes pulse {
72
- 0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
73
- 50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.9); }
74
- 100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
75
- }
76
-
77
- .glass-card {
78
- background: rgba(255, 255, 255, 0.05);
79
  backdrop-filter: blur(10px);
80
- border: 1px solid rgba(255, 255, 255, 0.1);
81
- border-radius: 12px;
82
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
83
- }
84
-
85
- .toggle-bg {
86
- background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
87
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
88
- }
89
-
90
- .toggle-switch {
91
- transition: all 0.3s ease;
92
- box-shadow: 0 0 10px rgba(0, 200, 0, 0.5);
93
- }
94
-
95
- .step-icon {
96
- transition: all 0.3s ease;
97
- filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
98
- }
99
-
100
- .step-icon:hover {
101
- transform: translateY(-5px);
102
- filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
103
- }
104
-
105
- .countdown-digit {
106
- font-family: 'Orbitron', sans-serif;
107
- text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
108
- animation: digitGlow 1.5s infinite alternate;
109
  }
110
 
111
- @keyframes digitGlow {
112
- 0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
113
- 100% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.9); }
114
- }
115
-
116
- .tier-icon {
117
- filter: drop-shadow(0 0 8px currentColor);
118
- transition: all 0.3s ease;
119
- }
120
-
121
- .tier-icon:hover {
122
- transform: scale(1.1);
123
- }
124
-
125
- .winner-row {
126
- transition: all 0.3s ease;
127
- }
128
-
129
- .winner-row:hover {
130
- background: rgba(255, 215, 0, 0.05);
131
- box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.1);
132
- }
133
-
134
- .new-winner {
135
- animation: highlight 3s ease;
136
  }
137
 
138
- @keyframes highlight {
139
- 0% { background: rgba(0, 200, 0, 0.3); }
140
- 100% { background: transparent; }
 
 
 
 
 
 
 
141
  }
142
 
143
- .stat-badge {
144
- background: rgba(30, 30, 30, 0.7);
145
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3);
146
- transition: all 0.3s ease;
147
  }
148
 
149
- .stat-badge:hover {
150
- transform: translateY(-3px);
151
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.5);
152
  }
153
 
154
  .win-feed {
155
- overflow: hidden;
156
- white-space: nowrap;
157
- }
158
-
159
- .win-item {
160
- display: inline-block;
161
- padding-right: 50px;
162
- animation: ticker 20s linear infinite;
163
  }
164
 
165
- @keyframes ticker {
166
  0% { transform: translateX(100%); }
167
  100% { transform: translateX(-100%); }
168
  }
169
-
170
- .floating {
171
- animation: floating 3s ease-in-out infinite;
172
  }
173
 
174
- @keyframes floating {
175
- 0% { transform: translateY(0px); }
176
- 50% { transform: translateY(-10px); }
177
- 100% { transform: translateY(0px); }
 
 
 
 
 
 
178
  }
179
 
180
- .twinkle {
181
- animation: twinkle 2s infinite alternate;
 
 
 
 
 
182
  }
183
 
184
- @keyframes twinkle {
185
- 0% { opacity: 0.3; }
186
- 100% { opacity: 1; }
 
187
  }
188
  </style>
189
  </head>
190
- <body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
191
- <div class="max-w-6xl mx-auto">
192
- <!-- SECTION 1: JACKPOT HEADER -->
193
- <section class="text-center mb-12 relative">
194
- <div class="absolute inset-0 overflow-hidden pointer-events-none">
195
- <div class="absolute top-10 left-1/4 floating twinkle">
196
- <i class="fas fa-dice text-gold opacity-20 text-4xl"></i>
197
- </div>
198
- <div class="absolute top-5 right-1/4 floating twinkle" style="animation-delay: 0.5s;">
199
- <i class="fas fa-coins text-gold opacity-20 text-5xl"></i>
200
- </div>
201
- <div class="absolute top-20 left-1/3 floating twinkle" style="animation-delay: 1s;">
202
- <i class="fas fa-gem text-gold opacity-20 text-3xl"></i>
203
- </div>
204
- <div class="absolute top-16 right-1/3 floating twinkle" style="animation-delay: 1.5s;">
205
- <i class="fas fa-crown text-gold opacity-20 text-4xl"></i>
206
- </div>
207
- </div>
208
-
209
- <h1 class="jackpot-text text-5xl sm:text-6xl md:text-7xl font-bold mb-6 text-gold">
210
- JACKPOT
211
  </h1>
212
 
213
- <div class="relative inline-block mb-4">
214
- <div class="absolute inset-0 rounded-full bg-gold opacity-20 blur-lg"></div>
215
- <div class="jackpot-amount text-4xl sm:text-5xl md:text-6xl font-bold relative z-10">
216
- 3,198,392.30 <span class="text-xl">SC</span>
 
 
 
217
  </div>
 
218
  </div>
219
 
220
- <p class="text-gray-300 mb-8 text-sm">
221
- Updates live as players spin in Jackpot Mode.
222
- </p>
223
-
224
- <div class="flex items-center justify-center space-x-4">
225
- <div class="text-lg font-semibold">Jackpot Mode</div>
226
- <div class="toggle-bg w-20 h-10 rounded-full p-1 cursor-pointer relative">
227
- <div class="toggle-switch bg-green-500 w-8 h-8 rounded-full absolute left-1 top-1"></div>
228
  </div>
229
- <div class="text-green-400 font-semibold">ON</div>
230
  </div>
231
- <p class="text-gray-400 mt-2 text-sm">
232
- 0.05 SC per spin while active
233
- </p>
234
- </section>
235
-
236
- <!-- SECTION 2: HOW TO ENTER -->
237
- <section class="mb-16">
238
- <h2 class="text-2xl font-bold text-center mb-8 text-gold">How to Enter</h2>
239
- <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4">
240
- <div class="step-icon text-center">
241
- <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
242
- <i class="fas fa-toggle-on text-2xl text-gold"></i>
 
243
  </div>
244
- <div class="font-bold text-gold">Enable Jackpot Mode</div>
245
- <div class="text-xs text-gray-400 mt-1">Toggle on in settings</div>
246
  </div>
247
 
248
- <div class="step-icon text-center">
249
- <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
250
- <i class="fas fa-dice text-2xl text-gold"></i>
 
 
 
 
251
  </div>
252
- <div class="font-bold text-gold">Spin Any Game</div>
253
- <div class="text-xs text-gray-400 mt-1">Slots, table games, etc.</div>
254
  </div>
255
 
256
- <div class="step-icon text-center">
257
- <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
258
- <i class="fas fa-coins text-2xl text-gold"></i>
 
 
 
 
259
  </div>
260
- <div class="font-bold text-gold">Pay Entry Fee</div>
261
- <div class="text-xs text-gray-400 mt-1">Small fee per spin</div>
262
  </div>
263
 
264
- <div class="step-icon text-center">
265
- <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
266
- <i class="fas fa-trophy text-2xl text-gold"></i>
 
 
 
 
267
  </div>
268
- <div class="font-bold text-gold">Win Big</div>
269
- <div class="text-xs text-gray-400 mt-1">Massive prizes!</div>
270
  </div>
271
  </div>
272
  </section>
273
 
274
- <!-- SECTION 3: COUNTDOWN TIMER -->
275
- <section class="mb-16">
276
- <div class="glass-card max-w-md mx-auto p-6 relative overflow-hidden">
277
- <div class="absolute -top-4 -right-4 w-8 h-8 rounded-full bg-gold opacity-20 blur-md"></div>
278
- <div class="absolute -bottom-4 -left-4 w-10 h-10 rounded-full bg-gold opacity-20 blur-md"></div>
279
-
280
  <div class="text-center">
281
- <div class="text-gray-300 mb-4">Next Jackpot Drops In:</div>
282
- <div class="flex justify-center items-center space-x-2 mb-4">
283
- <div class="countdown-digit bg-gray-900 rounded-lg py-2 px-4 text-3xl">01</div>
284
- <div class="text-gold text-xl">:</div>
285
- <div class="countdown-digit bg-gray-900 rounded-lg py-2 px-4 text-3xl">23</div>
286
- <div class="text-gold text-xl">:</div>
287
- <div class="countdown-digit bg-gray-900 rounded-lg py-2 px-4 text-3xl">52</div>
288
- </div>
289
- <div class="text-sm text-gray-400">
290
- Jackpot drops every 6 hours or when pot cap is hit.
291
  </div>
 
292
  </div>
293
  </div>
294
  </section>
295
 
296
- <!-- SECTION 4: JACKPOT TIERS -->
297
- <section class="mb-16">
298
- <h2 class="text-2xl font-bold text-center mb-8 text-gold">Jackpot Tiers</h2>
299
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
300
- <div class="text-center">
301
- <div class="tier-icon mx-auto mb-4 text-5xl text-gold">
302
- <i class="fas fa-medal"></i>
 
303
  </div>
304
- <h3 class="font-bold text-xl text-gold mb-2">Mini</h3>
305
- <div class="text-lg">500–1,999 SC</div>
306
- <div class="text-sm text-gray-400 mt-2">Frequent smaller wins</div>
307
  </div>
308
 
309
- <div class="text-center">
310
- <div class="tier-icon mx-auto mb-4 text-5xl text-neon-orange">
311
- <i class="fas fa-star"></i>
 
312
  </div>
313
- <h3 class="font-bold text-xl text-neon-orange mb-2">Mega</h3>
314
- <div class="text-lg">2,000–9,999 SC</div>
315
- <div class="text-sm text-gray-400 mt-2">Life-changing amounts</div>
316
  </div>
317
 
318
- <div class="text-center">
319
- <div class="tier-icon mx-auto mb-4 text-5xl text-red-500">
320
- <i class="fas fa-crown"></i>
 
321
  </div>
322
- <h3 class="font-bold text-xl text-red-400 mb-2">Legendary</h3>
323
- <div class="text-lg">10,000+ SC</div>
324
- <div class="text-sm text-gray-400 mt-2">Ultimate jackpot prizes</div>
325
  </div>
326
  </div>
 
327
  </section>
328
 
329
- <!-- SECTION 5: RECENT WINNERS TABLE -->
330
- <section class="mb-12">
331
- <div class="glass-card p-6">
332
- <h2 class="text-2xl font-bold mb-6 text-gold text-center">Recent Nioplay Jackpot Winners</h2>
333
  <div class="overflow-x-auto">
334
  <table class="w-full">
335
- <thead>
336
- <tr class="border-b border-gray-700">
337
- <th class="py-3 text-left text-gold">Username</th>
338
- <th class="py-3 text-left text-gold">Prize</th>
339
- <th class="py-3 text-left text-gold">Game</th>
340
- <th class="py-3 text-left text-gold">Date</th>
341
  </tr>
342
  </thead>
343
- <tbody>
344
- <tr class="winner-row border-b border-gray-800 hover:border-gold">
345
- <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>LuckyDice88</td>
346
- <td class="text-gold font-bold">12,450 SC</td>
347
- <td>Diamond Slots</td>
348
- <td>Today 14:32</td>
349
- </tr>
350
- <tr class="winner-row border-b border-gray-800 hover:border-gold">
351
- <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>GoldRush99</td>
352
- <td class="text-gold font-bold">8,120 SC</td>
353
- <td>Fortune Wheel</td>
354
- <td>Today 12:15</td>
355
- </tr>
356
- <tr class="winner-row new-winner border-b border-gray-800 hover:border-gold">
357
- <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>SpinMaster</td>
358
- <td class="text-gold font-bold">5,670 SC</td>
359
- <td>Pharaoh's Gold</td>
360
- <td>Today 11:48</td>
361
- </tr>
362
- <tr class="winner-row border-b border-gray-800 hover:border-gold">
363
- <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>CasinoKing</td>
364
- <td class="text-gold font-bold">3,210 SC</td>
365
- <td>Blackjack Pro</td>
366
- <td>Today 10:22</td>
367
- </tr>
368
- <tr class="winner-row">
369
- <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>SlotQueen</td>
370
- <td class="text-gold font-bold">1,980 SC</td>
371
- <td>Jungle Jackpot</td>
372
- <td>Today 09:45</td>
373
- </tr>
374
  </tbody>
375
  </table>
376
  </div>
377
  </div>
378
  </section>
379
 
380
- <!-- SECTION 6: LIVE WIN FEED -->
381
- <section class="mb-16">
382
- <div class="win-feed py-3 px-4 bg-black bg-opacity-50 rounded-lg overflow-hidden">
383
- <div class="win-item text-gold">
384
- <span class="mr-2">🎉</span> LuckyRoller88 won 4,200 SC on Super Panda!
385
- </div>
386
- <div class="win-item text-gold">
387
- <span class="mr-2">🎉</span> DiceMaster won 2,150 SC on Royal Dice!
388
- </div>
389
- <div class="win-item text-gold">
390
- <span class="mr-2">🎉</span> SlotPro won 7,800 SC on Diamond Mine!
391
  </div>
392
  </div>
393
  </section>
394
 
395
- <!-- SECTION 7: JACKPOT STATS -->
396
- <section class="mb-16">
397
- <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">
398
- <div class="stat-badge flex items-center p-4 rounded-lg">
399
- <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-4">
400
- <i class="fas fa-sync-alt text-xl text-gold"></i>
401
- </div>
402
  <div>
403
- <div class="text-2xl font-bold text-gold">182,390</div>
404
- <div class="text-sm text-gray-400">Spins Today</div>
405
  </div>
406
  </div>
407
 
408
- <div class="stat-badge flex items-center p-4 rounded-lg">
409
- <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-4">
410
- <i class="fas fa-users text-xl text-gold"></i>
411
- </div>
412
  <div>
413
- <div class="text-2xl font-bold text-gold">982</div>
414
- <div class="text-sm text-gray-400">Players in Jackpot Mode</div>
415
  </div>
416
  </div>
417
 
418
- <div class="stat-badge flex items-center p-4 rounded-lg">
419
- <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-4">
420
- <i class="fas fa-trophy text-xl text-gold"></i>
421
- </div>
422
  <div>
423
- <div class="text-2xl font-bold text-gold">41,200 SC</div>
424
- <div class="text-sm text-gray-400">Biggest Jackpot Ever</div>
425
  </div>
426
  </div>
427
  </div>
428
  </section>
429
 
430
- <!-- SECTION 8: TOP CONTRIBUTORS -->
431
- <section class="mb-16">
432
- <h2 class="text-2xl font-bold text-center mb-6 text-gold">Top Contributors</h2>
433
- <div class="max-w-2xl mx-auto">
434
- <div class="flex justify-between items-center py-3 border-b border-gray-800">
435
  <div class="flex items-center">
436
- <span class="text-2xl mr-3">🥇</span>
437
- <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
438
- <span>HighRollerX</span>
439
  </div>
440
- <div class="text-gold font-bold">8,250 SC</div>
441
  </div>
442
- <div class="flex justify-between items-center py-3 border-b border-gray-800">
 
443
  <div class="flex items-center">
444
- <span class="text-2xl mr-3">🥈</span>
445
- <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
446
- <span>DiceMasterPro</span>
447
  </div>
448
- <div class="text-gold font-bold">6,890 SC</div>
449
  </div>
450
- <div class="flex justify-between items-center py-3 border-b border-gray-800">
 
451
  <div class="flex items-center">
452
- <span class="text-2xl mr-3">🥉</span>
453
- <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
454
- <span>SlotQueen</span>
455
- </div>
456
- <div class="text-gold font-bold">5,420 SC</div>
457
- </div>
458
- <div class="flex justify-between items-center py-3">
459
- <div class="flex items-center pl-10">
460
- <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
461
- <span>GoldDigger99</span>
462
  </div>
463
- <div class="text-gold font-bold">4,830 SC</div>
464
  </div>
465
  </div>
466
  </section>
467
 
468
- <!-- SECTION 9: TERMS COLLAPSE -->
469
- <section class="max-w-3xl mx-auto">
470
- <div class="border-t border-gray-800 pt-6">
471
- <div class="cursor-pointer flex justify-between items-center">
472
- <h2 class="text-xl font-bold text-gold">Nioplay Jackpot Terms & Details</h2>
473
- <i class="fas fa-chevron-down text-gold"></i>
474
- </div>
475
- <div class="mt-4 text-gray-300 hidden">
476
- <p class="mb-3">• Jackpot Mode must be enabled to participate in jackpot draws.</p>
477
- <p class="mb-3">• Each spin contributes 0.05 SC to the jackpot pool.</p>
478
- <p class="mb-3">• Jackpots are awarded every 6 hours or when the pool cap is reached.</p>
479
- <p class="mb-3">• Winners are selected randomly from all eligible spins during the jackpot period.</p>
480
- <p class="mb-3">• Prizes are distributed within 24 hours of winning.</p>
481
- <p class="mb-3">• Players must have completed KYC verification to claim prizes over 5,000 SC.</p>
482
- <p>• Nioplay reserves the right to modify or cancel the jackpot promotion at any time.</p>
483
- </div>
 
 
484
  </div>
485
  </section>
486
  </div>
487
-
488
- <footer class="text-center text-gray-500 text-sm mt-16">
489
- © 2023 Nioplay Casino. All rights reserved. Gambling can be addictive. Play responsibly.
490
- </footer>
491
-
492
  <script>
493
- // Initialize animations and interactions
494
- document.addEventListener('DOMContentLoaded', function() {
495
- // Terms collapse toggle
496
- const termsToggle = document.querySelector('section:last-of-type > div');
497
- const termsContent = termsToggle.querySelector('.hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
498
 
499
- termsToggle.addEventListener('click', function() {
500
- termsContent.classList.toggle('hidden');
501
- const icon = termsToggle.querySelector('i');
502
- icon.classList.toggle('fa-chevron-down');
503
- icon.classList.toggle('fa-chevron-up');
504
  });
505
 
506
- // Simulate new winner animation
507
- setInterval(function() {
508
- const rows = document.querySelectorAll('.winner-row');
509
- const randomRow = Math.floor(Math.random() * rows.length);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
510
 
511
- rows[randomRow].classList.add('new-winner');
512
- setTimeout(() => {
513
- rows[randomRow].classList.remove('new-winner');
514
- }, 3000);
515
 
516
- }, 15000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
517
  });
518
  </script>
519
  <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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Nioplay Jackpot - Win Big!</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <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">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
+ colors: {
15
+ gold: '#FFD700',
16
+ gold2: '#FF6A00',
17
+ darkbg: '#0a0a0a',
18
+ },
19
  fontFamily: {
20
  orbitron: ['Orbitron', 'sans-serif'],
21
+ poppins: ['Poppins', 'sans-serif'],
 
 
 
 
 
 
22
  },
23
  boxShadow: {
24
  'gold-glow': '0 0 15px rgba(255, 215, 0, 0.7)',
25
+ 'gold-glow-md': '0 0 20px rgba(255, 215, 0, 0.8)',
26
+ },
27
+ animation: {
28
+ 'pulse-slow': 'pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
29
+ 'float': 'float 3s ease-in-out infinite',
30
+ 'shine': 'shine 2s infinite',
31
+ 'twinkle': 'twinkle 4s linear infinite',
32
+ },
33
+ keyframes: {
34
+ shine: {
35
+ '0%': { 'background-position': 'left' },
36
+ '100%': { 'background-position': 'right' }
37
+ },
38
+ float: {
39
+ '0%, 100%': { transform: 'translateY(0)' },
40
+ '50%': { transform: 'translateY(-10px)' },
41
+ },
42
+ twinkle: {
43
+ '0%, 100%': { opacity: 0.2 },
44
+ '50%': { opacity: 0.8 },
45
+ }
46
  }
47
  }
48
  }
 
51
  <style type="text/css">
52
  body {
53
  background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
54
+ background-attachment: fixed;
 
55
  font-family: 'Poppins', sans-serif;
56
+ color: #fff;
57
+ min-height: 100vh;
58
  }
59
 
60
+ .glass-bg {
61
+ background: rgba(15, 15, 15, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  backdrop-filter: blur(10px);
63
+ border: 1px solid rgba(255, 215, 0, 0.2);
64
+ border-radius: 16px;
65
+ box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  }
67
 
68
+ .jackpot-glow {
69
+ text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
70
+ position: relative;
71
+ display: inline-block;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  }
73
 
74
+ .jackpot-glow::after {
75
+ content: "";
76
+ position: absolute;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ background: linear-gradient(90deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.3) 50%, rgba(255,215,0,0) 100%);
82
+ animation: shine 3s infinite;
83
+ pointer-events: none;
84
  }
85
 
86
+ .neon-border {
87
+ box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.6), 0 0 12px rgba(255, 215, 0, 0.4);
 
 
88
  }
89
 
90
+ .toggle:checked + .dot {
91
+ transform: translateX(100%);
 
92
  }
93
 
94
  .win-feed {
95
+ animation: scroll 15s linear infinite;
 
 
 
 
 
 
 
96
  }
97
 
98
+ @keyframes scroll {
99
  0% { transform: translateX(100%); }
100
  100% { transform: translateX(-100%); }
101
  }
102
+
103
+ .fade-in {
104
+ animation: fadeIn 0.5s ease-in;
105
  }
106
 
107
+ @keyframes fadeIn {
108
+ from { opacity: 0; }
109
+ to { opacity: 1; }
110
+ }
111
+
112
+ .number-flip {
113
+ display: inline-block;
114
+ position: relative;
115
+ overflow: hidden;
116
+ height: 1.5em;
117
  }
118
 
119
+ .sparkle {
120
+ position: absolute;
121
+ background-color: rgba(255, 215, 0, 0.7);
122
+ border-radius: 50%;
123
+ pointer-events: none;
124
+ z-index: 10;
125
+ animation: sparkleAnim 2s forwards;
126
  }
127
 
128
+ @keyframes sparkleAnim {
129
+ 0% { opacity: 1; transform: scale(0) translate(0, 0); }
130
+ 50% { opacity: 1; transform: scale(1) translate(var(--tx), var(--ty)); }
131
+ 100% { opacity: 0; transform: scale(0) translate(var(--tx2), var(--ty2)); }
132
  }
133
  </style>
134
  </head>
135
+ <body class="relative overflow-x-hidden">
136
+ <!-- Casino Symbols Background -->
137
+ <div class="fixed inset-0 z-0 overflow-hidden">
138
+ <i class="fas fa-dice absolute top-[10%] left-[5%] text-white opacity-5 animate-float" style="font-size: 2rem;"></i>
139
+ <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>
140
+ <i class="fas fa-diamond absolute bottom-[30%] left-[15%] text-white opacity-5 animate-float" style="font-size: 2rem; animation-delay: 1s"></i>
141
+ <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>
142
+ <i class="fas fa-crown absolute top-[40%] left-[10%] text-yellow-300 opacity-10 animate-twinkle" style="font-size: 4rem;"></i>
143
+ </div>
144
+
145
+ <div class="relative z-10 max-w-5xl mx-auto px-4 pb-20">
146
+
147
+ <!-- Header Section -->
148
+ <header class="py-10 text-center">
149
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
150
+ <span class="font-orbitron text-gold jackpot-glow">JACKPOT</span>
 
 
 
 
 
151
  </h1>
152
 
153
+ <div class="relative flex flex-col items-center justify-center my-8">
154
+ <div class="relative bg-black bg-opacity-50 px-8 py-4 rounded-xl neon-border">
155
+ <div class="relative overflow-hidden inline-block">
156
+ <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>
157
+ <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>
158
+ </div>
159
+ <div class="absolute -inset-4 rounded-full bg-gradient-to-r from-transparent via-gold to-transparent opacity-50 blur-md -z-10"></div>
160
  </div>
161
+ <div class="mt-3 text-xs text-gray-300 tracking-wider font-poppins">Updates live as players spin in Jackpot Mode</div>
162
  </div>
163
 
164
+ <!-- Toggle -->
165
+ <div class="flex flex-col items-center my-6">
166
+ <div class="flex items-center space-x-3">
167
+ <span class="font-semibold text-white">Jackpot Mode</span>
168
+ <div class="relative inline-block w-16 mr-2 align-middle select-none">
169
+ <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>
170
+ <label for="toggle" class="toggle-label block h-6 overflow-hidden rounded-full bg-gray-300 cursor-pointer"></label>
171
+ </div>
172
  </div>
173
+ <div class="text-xs text-gray-400 mt-2">0.05 SC per spin while active</div>
174
  </div>
175
+ </header>
176
+
177
+ <!-- How to Enter Section -->
178
+ <section class="my-16">
179
+ <h2 class="text-xl text-center font-orbitron text-gold mb-8">HOW TO ENTER</h2>
180
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 justify-items-center max-w-4xl mx-auto">
181
+ <!-- Step 1 -->
182
+ <div class="step-entry flex flex-col items-center text-center">
183
+ <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
184
+ <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
185
+ <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">
186
+ <i class="fas fa-toggle-on"></i>
187
+ </div>
188
  </div>
189
+ <div class="font-bold text-white">Enable Jackpot Mode</div>
190
+ <div class="text-xs text-gray-400 mt-1">Turn on the toggle</div>
191
  </div>
192
 
193
+ <!-- Step 2 -->
194
+ <div class="step-entry flex flex-col items-center text-center">
195
+ <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
196
+ <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
197
+ <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">
198
+ <i class="fas fa-receipt"></i>
199
+ </div>
200
  </div>
201
+ <div class="font-bold text-white">Spin Any Game</div>
202
+ <div class="text-xs text-gray-400 mt-1">Cards, slots, and more</div>
203
  </div>
204
 
205
+ <!-- Step 3 -->
206
+ <div class="step-entry flex flex-col items-center text-center">
207
+ <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
208
+ <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
209
+ <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">
210
+ <i class="fas fa-coins"></i>
211
+ </div>
212
  </div>
213
+ <div class="font-bold text-white">Pay Entry Fee</div>
214
+ <div class="text-xs text-gray-400 mt-1">0.05 SC automatically</div>
215
  </div>
216
 
217
+ <!-- Step 4 -->
218
+ <div class="step-entry flex flex-col items-center text-center">
219
+ <div class="w-20 h-20 rounded-full flex items-center justify-center mb-4 relative">
220
+ <div class="absolute inset-0 rounded-full bg-gold opacity-20 animate-pulse"></div>
221
+ <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">
222
+ <i class="fas fa-trophy"></i>
223
+ </div>
224
  </div>
225
+ <div class="font-bold text-white">Win Big</div>
226
+ <div class="text-xs text-gray-400 mt-1">Life-changing prizes</div>
227
  </div>
228
  </div>
229
  </section>
230
 
231
+ <!-- Countdown Timer -->
232
+ <section class="my-16">
233
+ <div class="glass-bg max-w-lg mx-auto p-6 relative z-10">
234
+ <div class="absolute -inset-0.5 bg-gradient-to-r from-gold to-gold2 rounded-xl opacity-30 blur-md -z-10"></div>
 
 
235
  <div class="text-center">
236
+ <div class="text-gray-300 text-sm mb-3">Next Jackpot Drops In:</div>
237
+ <div id="countdown" class="font-orbitron text-4xl text-gold mb-4">
238
+ <span>01</span>:<span>23</span>:<span>52</span>
 
 
 
 
 
 
 
239
  </div>
240
+ <div class="text-xs text-gray-400">Jackpot drops every 6 hours or when pot cap is hit.</div>
241
  </div>
242
  </div>
243
  </section>
244
 
245
+ <!-- Jackpot Tiers -->
246
+ <section class="my-16 text-center">
247
+ <h2 class="text-xl font-orbitron text-gold mb-8">JACKPOT TIERS</h2>
248
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
249
+ <!-- Mini Tier -->
250
+ <div class="tier-card flex flex-col items-center">
251
+ <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">
252
+ <i class="fas fa-gem text-4xl"></i>
253
  </div>
254
+ <h3 class="font-bold text-xl text-gold">Mini</h3>
255
+ <p class="text-lg font-semibold">500 - 1,999 SC</p>
256
+ <div class="mt-4 text-xs text-gray-300">Win every hour</div>
257
  </div>
258
 
259
+ <!-- Mega Tier -->
260
+ <div class="tier-card flex flex-col items-center">
261
+ <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">
262
+ <i class="fas fa-coins text-4xl"></i>
263
  </div>
264
+ <h3 class="font-bold text-xl text-orange-400">Mega</h3>
265
+ <p class="text-lg font-semibold">2,000 - 9,999 SC</p>
266
+ <div class="mt-4 text-xs text-gray-300">Daily winners</div>
267
  </div>
268
 
269
+ <!-- Legendary Tier -->
270
+ <div class="tier-card flex flex-col items-center">
271
+ <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">
272
+ <i class="fas fa-crown text-4xl"></i>
273
  </div>
274
+ <h3 class="font-bold text-xl text-red-400">Legendary</h3>
275
+ <p class="text-lg font-semibold">10,000+ SC</p>
276
+ <div class="mt-4 text-xs text-gray-300">Life-changing payouts</div>
277
  </div>
278
  </div>
279
+ <div class="opacity-50 w-32 h-px bg-gradient-to-r from-transparent via-gold to-transparent mx-auto my-8"></div>
280
  </section>
281
 
282
+ <!-- Recent Winners -->
283
+ <section class="my-16">
284
+ <h2 class="text-xl font-orbitron text-gold mb-6 text-center">RECENT NIOPLAY JACKPOT WINNERS</h2>
285
+ <div class="glass-bg overflow-hidden">
286
  <div class="overflow-x-auto">
287
  <table class="w-full">
288
+ <thead class="bg-black bg-opacity-30 border-b border-gray-700">
289
+ <tr class="text-left">
290
+ <th class="py-3 px-4 text-gray-300 font-semibold">Username</th>
291
+ <th class="py-3 px-4 text-gray-300 font-semibold">Prize</th>
292
+ <th class="py-3 px-4 text-gray-300 font-semibold">Game</th>
293
+ <th class="py-3 px-4 text-gray-300 font-semibold">Date</th>
294
  </tr>
295
  </thead>
296
+ <tbody id="winners-container" class="divide-y divide-gray-800">
297
+ <!-- Dynamic content added by script -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  </tbody>
299
  </table>
300
  </div>
301
  </div>
302
  </section>
303
 
304
+ <!-- Live Win Feed -->
305
+ <section class="my-10">
306
+ <div class="relative w-full h-12 bg-black bg-opacity-30 rounded-lg overflow-hidden neon-border">
307
+ <div class="win-feed whitespace-nowrap flex items-center h-full text-gold">
308
+ <div class="flex space-x-6 py-2 px-4">
309
+ <div>🎉 <span class="font-semibold">LuckyRoller88</span> won <span class="text-gold2 font-bold">4,200 SC</span> on Super Panda!</div>
310
+ <div>🏆 <span class="font-semibold">MidasTouch55</span> scored <span class="text-gold2 font-bold">8,750 SC</span> on Diamond Fortune!</div>
311
+ <div>⭐ <span class="font-semibold">JackpotQueen20</span> hit <span class="text-gold2 font-bold">15,300 SC</span> on Pharaoh's Gold!</div>
312
+ <div>💫 <span class="font-semibold">SpinMaster99</span> cashed <span class="text-gold2 font-bold">5,820 SC</span> on Wild West!</div>
313
+ </div>
 
314
  </div>
315
  </div>
316
  </section>
317
 
318
+ <!-- Jackpot Stats Badges -->
319
+ <section class="my-16">
320
+ <div class="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
321
+ <div class="stat-badge flex items-center bg-black bg-opacity-30 px-5 py-3 rounded-xl neon-border">
322
+ <i class="fas fa-sync-alt text-gold text-xl mr-3"></i>
 
 
323
  <div>
324
+ <div class="text-xs text-gray-400">Spins Today</div>
325
+ <div class="text-xl font-bold">182,390</div>
326
  </div>
327
  </div>
328
 
329
+ <div class="stat-badge flex items-center bg-black bg-opacity-30 px-5 py-3 rounded-xl neon-border">
330
+ <i class="fas fa-users text-gold2 text-xl mr-3"></i>
 
 
331
  <div>
332
+ <div class="text-xs text-gray-400">Players in Jackpot Mode</div>
333
+ <div class="text-xl font-bold">982</div>
334
  </div>
335
  </div>
336
 
337
+ <div class="stat-badge flex items-center bg-black bg-opacity-30 px-5 py-3 rounded-xl neon-border">
338
+ <i class="fas fa-trophy text-gold text-xl mr-3"></i>
 
 
339
  <div>
340
+ <div class="text-xs text-gray-400">Biggest Jackpot Ever</div>
341
+ <div class="text-xl font-bold">41,200 SC</div>
342
  </div>
343
  </div>
344
  </div>
345
  </section>
346
 
347
+ <!-- Top Contributors -->
348
+ <section class="my-16 max-w-lg mx-auto">
349
+ <h2 class="text-xl font-orbitron text-gold mb-6 text-center">TOP CONTRIBUTORS</h2>
350
+ <div class="space-y-3">
351
+ <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">
352
  <div class="flex items-center">
353
+ <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>
354
+ <span class="font-semibold">GoldHunter21</span>
 
355
  </div>
356
+ <span class="text-gold font-bold">23,420 SC</span>
357
  </div>
358
+
359
+ <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">
360
  <div class="flex items-center">
361
+ <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>
362
+ <span class="font-semibold">FortuneFinder</span>
 
363
  </div>
364
+ <span class="text-gold font-bold">18,650 SC</span>
365
  </div>
366
+
367
+ <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">
368
  <div class="flex items-center">
369
+ <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>
370
+ <span class="font-semibold">SpinMaster</span>
 
 
 
 
 
 
 
 
371
  </div>
372
+ <span class="text-gold font-bold">14,340 SC</span>
373
  </div>
374
  </div>
375
  </section>
376
 
377
+ <!-- Terms Section -->
378
+ <section class="mt-12 pt-6 border-t border-gray-700">
379
+ <div
380
+ id="termsHeader"
381
+ class="cursor-pointer flex justify-between items-center group"
382
+ onclick="document.getElementById('termsContent').classList.toggle('hidden')"
383
+ >
384
+ <h3 class="font-orbitron text-lg text-gold">NIOPLAY JACKPOT TERMS & DETAILS</h3>
385
+ <i id="toggleIcon" class="fas fa-chevron-down text-gold2 transform group-hover:scale-110"></i>
386
+ </div>
387
+ <div id="termsContent" class="hidden mt-4 text-sm text-gray-300 space-y-3">
388
+ <p>1. Jackpot Mode must be enabled to participate. Each spin with this mode active costs 0.05 SC.</p>
389
+ <p>2. Jackpot tiers have specific prize ranges: Mini (500-1,999 SC), Mega (2,000-9,999 SC), Legendary (10,000+ SC).</p>
390
+ <p>3. Jackpot winner selection occurs through an audited random algorithm after each qualifying spin.</p>
391
+ <p>4. Jackpot drops every 6 hours or when reaching the pot cap of 50,000 SC.</p>
392
+ <p>5. Winners are automatically notified and funds are deposited into their Nioplay accounts immediately.</p>
393
+ <p>6. Nioplay reserves the right to void entries and suspend accounts in case of suspicious activities.</p>
394
+ <p class="text-xs mt-6 text-gray-400">© 2023 Nioplay Casino. All rights reserved.</p>
395
  </div>
396
  </section>
397
  </div>
398
+
 
 
 
 
399
  <script>
400
+ // Create sparks animation for jackpot counter
401
+ function createSparks() {
402
+ const sparks = ['💎', '✨', '⭐', '🔥'];
403
+ for (let i = 0; i < 15; i++) {
404
+ const spark = document.createElement('div');
405
+ spark.className = 'sparkle';
406
+ spark.innerHTML = sparks[Math.floor(Math.random() * sparks.length)];
407
+ spark.style.setProperty('--tx', `${Math.random() * 200 - 100}px`);
408
+ spark.style.setProperty('--ty', `${Math.random() * 200 - 100}px`);
409
+ spark.style.setProperty('--tx2', `${Math.random() * 200 - 100}px`);
410
+ spark.style.setProperty('--ty2', `${Math.random() * 200 - 100}px`);
411
+ spark.style.left = `${Math.random() * 100}%`;
412
+ spark.style.top = `${Math.random() * 100}%`;
413
+ spark.style.fontSize = `${Math.random() * 0.8 + 0.5}rem`;
414
+
415
+ document.body.appendChild(spark);
416
+
417
+ setTimeout(() => {
418
+ spark.remove();
419
+ }, 2000);
420
+ }
421
+ }
422
+
423
+ // Simulate jackpot counter incrementing
424
+ function increaseJackpot() {
425
+ const jackpotElement = document.getElementById('total-jackpot');
426
+ const currentValue = parseFloat(jackpotElement.innerText.replace(/,/g, ''));
427
+ const increaseAmount = Math.random() * 100 + 10;
428
+ const newValue = currentValue + increaseAmount;
429
 
430
+ jackpotElement.innerText = newValue.toLocaleString('en-US', {
431
+ maximumFractionDigits: 2,
432
+ minimumFractionDigits: 2
 
 
433
  });
434
 
435
+ createSparks();
436
+ }
437
+
438
+ // Countdown timer functionality
439
+ function startCountdown() {
440
+ let hours = 1;
441
+ let minutes = 23;
442
+ let seconds = 52;
443
+
444
+ setInterval(() => {
445
+ seconds--;
446
+ if (seconds < 0) {
447
+ seconds = 59;
448
+ minutes--;
449
+ if (minutes < 0) {
450
+ minutes = 59;
451
+ hours--;
452
+ if (hours < 0) {
453
+ hours = 6;
454
+ }
455
+ }
456
+ }
457
 
458
+ document.querySelectorAll('#countdown span')[0].textContent = hours.toString().padStart(2, '0');
459
+ document.querySelectorAll('#countdown span')[1].textContent = minutes.toString().padStart(2, '0');
460
+ document.querySelectorAll('#countdown span')[2].textContent = seconds.toString().padStart(2, '0');
 
461
 
462
+ }, 1000);
463
+ }
464
+
465
+ // Add winner to the table with animation
466
+ function addWinnerRow(username, prize, game, date) {
467
+ const table = document.getElementById('winners-container');
468
+ const newRow = document.createElement('tr');
469
+ newRow.className = 'opacity-0 fade-in'
470
+ newRow.innerHTML = `
471
+ <td class="py-3 px-4"><span class="text-gold">${username}</span></td>
472
+ <td class="py-3 px-4"><span class="font-semibold text-gold2">${prize} SC</span></td>
473
+ <td class="py-3 px-4">${game}</td>
474
+ <td class="py-3 px-4 text-gray-400">${date}</td>
475
+ `;
476
+
477
+ table.insertBefore(newRow, table.firstChild);
478
+
479
+ // Limit table to 6 rows
480
+ if (table.children.length > 6) {
481
+ table.removeChild(table.lastChild);
482
+ }
483
+ }
484
+
485
+ // Sample recent winners data
486
+ const winnersData = [
487
+ { username: 'SpinKing77', prize: '2,480', game: 'Lucky Wheel', date: '5 mins ago' },
488
+ { username: 'GoldRush23', prize: '5,670', game: 'Golden Dragon', date: '12 mins ago' },
489
+ { username: 'FortuneFinder', prize: '7,220', game: 'Paulopatra', date: '24 mins ago' },
490
+ { username: 'JackpotJill', prize: '1,380', game: 'Cats Royal', date: '42 mins ago' },
491
+ { username: 'LuckyDice99', prize: '9,540', game: 'Viking Quest', date: '1 hr ago' },
492
+ ];
493
+
494
+ // Initialize elements
495
+ document.addEventListener('DOMContentLoaded', function() {
496
+ // Simulate jackpot increasing
497
+ setInterval(increaseJackpot, 3000);
498
+
499
+ // Start countdown timer
500
+ startCountdown();
501
+
502
+ // Add winners with animation delay
503
+ let delay = 0;
504
+ winnersData.forEach(winner => {
505
+ setTimeout(() => {
506
+ addWinnerRow(winner.username, winner.prize, winner.game, winner.date);
507
+ }, delay);
508
+ delay += 1500;
509
+ });
510
+
511
+ // Add new winner periodically
512
+ setInterval(() => {
513
+ const newWinner = winnersData[Math.floor(Math.random() * winnersData.length)];
514
+ addWinnerRow(newWinner.username, newWinner.prize, newWinner.game, 'just now');
515
+ }, 10000);
516
+
517
+ // Toggle switch styling
518
+ document.getElementById('toggle').addEventListener('change', function() {
519
+ const label = document.querySelector('label[for="toggle"]');
520
+ if (this.checked) {
521
+ label.classList.remove('bg-gray-600');
522
+ label.classList.add('bg-green-500');
523
+ } else {
524
+ label.classList.remove('bg-green-500');
525
+ label.classList.add('bg-gray-600');
526
+ }
527
+ });
528
+
529
+ // Trigger the toggle to appear "on" by default on load
530
+ document.getElementById('toggle').dispatchEvent(new Event('change'));
531
  });
532
  </script>
533
  <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>