Hugging Face's logo

Spaces:
ProjectGenesis
/
tournament-ui-redesign
Running

App Files Community
ProjectGenesis commited on
Commit
3aab449
·
verified ·
1 Parent(s): bd0e5b8

Generate a online casino Tournament Page UI using a modern, dark-themed neon yellow/orange and black color palette, with a glassmorphism design system. Use glowing highlights, translucent cards, rounded components, and bold clean typography throughout. 🔲 Page Layout Structure (Top to Bottom): 1. 🔥 Current Tournament Banner Full-width glass panel at the top Includes tournament title, prize pool (e.g. “$5,000”), countdown timer, and a primary CTA button: "Join Tournament" or "Continue Playing" depending on user status Display tournament type (e.g. Free / 100 Coins / Invite Only) 2. 📊 User Stats Panel Show the user’s current tournament progress: Rank, points earned, games played, estimated prize Optional tracker showing progress toward next reward tier Layout as 3 or 4 horizontally stacked info cards with glowing icons 3. 🏅 Leaderboard Module List of top 10 players in the current tournament Columns: Rank | Username | Score | Prize Top 3 rows: gold/silver/bronze styling Current user’s rank always displayed (even if not in top 10), with a highlight or border 4. 🎮 Tournament Carousel Section Horizontal scrollable section of active and upcoming tournaments Tabs or filters: Live, Upcoming, Completed Each card shows: Tournament name Prize pool Entry fee (Free / Coins) Timer or “LIVE” badge Join or Watch button 5. 📄 Tournament Details Modal (on click) Triggered by clicking a tournament card Show detailed info: Description, start/end time, payout structure, eligible games Scoring rules (e.g. “1 point = $1 wagered”), entry fee “Join Tournament” CTA and Terms link 6. 🏆 Hall of Fame Section Showcase of past winners from completed tournaments Winner’s avatar, username, prize won, date Add trophy icons or VIP badges to top winners 7. 🤝 Invite Friends & Earn Rewards Section Card block or sticky button labeled: "🎁 Invite Friends – Earn 100 Coins Each" Opens a modal with: Referral link copy button Share options: WhatsApp, Facebook, Email Tracker: “You’ve invited 3 / 5 friends” 🧬 Design System Requirements: Color Theme: Background: Black or dark charcoal (#0C0C0C) Accent glow: Neon Yellow/Gold (#FFD700), Orange (#FFA500) Glassmorphism Components: Blurred backgrounds, semi-transparent dark panels, glowing borders Typography: Rounded bold sans-serif (e.g., Poppins) Font color: white or gold with high contrast Buttons: Rounded-pill shape Gradient fill (yellow/orange or purple/pink), glowing hover animation Card Spacing: Consistent vertical spacing, padding between sections Rounded corners on all cards (20px+) Do not generate unrelated UI sections (e.g. login, game thumbnails, or unrelated banners). Maintain this structure as a consistent, scrollable, vertical layout. - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +577 -529
index.html CHANGED
@@ -3,679 +3,711 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Neon Casino - Tournament Hub</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&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
- dark: '#0C0C0C',
16
  neon: '#FFD700',
17
- orange: '#FFA500',
18
- glass: 'rgba(20, 20, 20, 0.6)',
19
- 'glow-yellow': 'rgba(255, 215, 0, 0.3)',
20
- 'glow-orange': 'rgba(255, 165, 0, 0.3)'
 
21
  },
22
  boxShadow: {
23
- 'glow': '0 0 15px rgba(255, 215, 0, 0.7)',
24
- 'glow-hover': '0 0 25px rgba(255, 215, 0, 0.9)'
 
25
  }
26
  }
27
  }
28
  }
29
  </script>
30
  <style>
31
- * {
32
- margin: 0;
33
- padding: 0;
34
- box-sizing: border-box;
35
- }
36
-
37
  body {
 
 
38
  font-family: 'Poppins', sans-serif;
39
- background-color: #0C0C0C;
40
  color: white;
41
  overflow-x: hidden;
42
  }
43
 
44
- .glass-card {
45
- background: rgba(20, 20, 20, 0.6);
46
  backdrop-filter: blur(10px);
47
  -webkit-backdrop-filter: blur(10px);
48
- border-radius: 24px;
49
  border: 1px solid rgba(255, 215, 0, 0.2);
 
 
50
  }
51
 
52
- .neon-glow {
53
- box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
54
- }
55
-
56
- .glow-border {
57
- border: 1px solid transparent;
58
- background:
59
- linear-gradient(#0C0C0C, #0C0C0C) padding-box,
60
- linear-gradient(45deg, #FFD700, #FFA500) border-box;
61
- border-radius: 24px;
62
  }
63
 
64
- .gradient-bg {
65
- background: linear-gradient(135deg, #FFD700, #FFA500);
66
  }
67
 
68
- .gradient-text {
69
- background: linear-gradient(135deg, #FFD700, #FFA500);
70
- -webkit-background-clip: text;
71
- -webkit-text-fill-color: transparent;
72
  }
73
 
74
- .countdown-digit {
75
- background: rgba(0, 0, 0, 0.5);
76
- border-radius: 12px;
77
- padding: 8px 12px;
78
- min-width: 60px;
 
 
79
  }
80
 
81
- .tab-active {
82
- background: rgba(255, 215, 0, 0.2);
83
- border-bottom: 3px solid #FFD700;
84
  }
85
 
86
- .leaderboard-rank-1 {
87
- background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2));
 
88
  }
89
 
90
- .leaderboard-rank-2 {
91
- background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(169, 169, 169, 0.2));
 
92
  }
93
 
94
- .leaderboard-rank-3 {
95
- background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(160, 82, 45, 0.2));
 
96
  }
97
 
98
- .carousel-card:hover {
99
- transform: translateY(-5px);
100
- box-shadow: 0 15px 30px rgba(255, 165, 0, 0.4);
 
101
  }
102
 
103
- .modal-overlay {
104
- background: rgba(0, 0, 0, 0.8);
105
- backdrop-filter: blur(5px);
106
- -webkit-backdrop-filter: blur(5px);
107
  }
108
 
109
- .modal-content {
110
- animation: modal-appear 0.3s ease-out forwards;
 
 
 
111
  }
112
 
113
- @keyframes modal-appear {
114
- from {
115
- opacity: 0;
116
- transform: translateY(20px);
117
- }
118
- to {
119
- opacity: 1;
120
- transform: translateY(0);
121
- }
122
  }
123
 
124
- .pulse {
125
- animation: pulse 2s infinite;
126
  }
127
 
128
- @keyframes pulse {
129
- 0% {
130
- box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.5);
131
- }
132
- 70% {
133
- box-shadow: 0 0 0 10px rgba(255, 215, 0, 0);
134
- }
135
- 100% {
136
- box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
137
- }
138
  }
139
 
140
- .progress-bar {
141
- height: 10px;
142
- border-radius: 5px;
143
- background: rgba(255, 255, 255, 0.1);
144
  }
145
 
146
- .progress-fill {
147
- height: 100%;
148
- border-radius: 5px;
149
- background: linear-gradient(90deg, #FFD700, #FFA500);
150
  }
151
 
152
- .scroll-container::-webkit-scrollbar {
153
- height: 6px;
154
  }
155
 
156
- .scroll-container::-webkit-scrollbar-track {
157
- background: rgba(255, 255, 255, 0.1);
158
- border-radius: 10px;
159
  }
160
 
161
- .scroll-container::-webkit-scrollbar-thumb {
162
- background: linear-gradient(90deg, #FFD700, #FFA500);
163
- border-radius: 10px;
164
  }
165
 
166
- .avatar-frame {
167
- border: 2px solid transparent;
168
- background:
169
- linear-gradient(#0C0C0C, #0C0C0C) padding-box,
170
- linear-gradient(45deg, #FFD700, #FFA500) border-box;
171
  }
172
 
173
- .highlight-user {
174
- position: relative;
175
- border: 2px solid #FFD700;
176
  }
177
 
178
- .highlight-user::after {
179
- content: "";
180
- position: absolute;
181
- top: -5px;
182
- left: -5px;
183
- right: -5px;
184
- bottom: -5px;
185
- border-radius: 18px;
186
- background: linear-gradient(45deg, #FFD700, #FFA500);
187
- z-index: -1;
188
- filter: blur(10px);
189
  }
190
  </style>
191
  </head>
192
- <body class="min-h-screen bg-dark text-white">
193
- <!-- Header -->
194
- <header class="sticky top-0 z-50 bg-dark/80 backdrop-blur-md border-b border-neon/20">
195
- <div class="container mx-auto px-4 py-3 flex justify-between items-center">
196
- <div class="flex items-center space-x-2">
197
- <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center">
198
- <i class="fas fa-crown text-dark text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  </div>
200
- <h1 class="text-xl font-bold">Neon<span class="gradient-text">Casino</span></h1>
201
  </div>
202
- <div class="flex items-center space-x-3">
203
- <button class="w-10 h-10 glass-card rounded-full flex items-center justify-center">
204
- <i class="fas fa-bell text-neon"></i>
205
- </button>
206
- <div class="w-10 h-10 rounded-full overflow-hidden">
207
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-full h-full object-cover">
 
 
 
 
 
 
 
208
  </div>
209
  </div>
210
- </div>
211
- </header>
212
-
213
- <!-- Main Content -->
214
- <main class="container mx-auto px-4 py-6">
215
- <!-- Current Tournament Banner -->
216
- <section class="glass-card neon-glow mb-8 relative overflow-hidden">
217
- <div class="absolute -top-20 -right-20 w-40 h-40 bg-neon rounded-full filter blur-3xl opacity-20"></div>
218
- <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-orange rounded-full filter blur-3xl opacity-20"></div>
219
 
220
- <div class="p-6 relative z-10">
221
- <div class="flex justify-between items-start mb-4">
222
- <div>
223
- <span class="px-3 py-1 bg-neon/10 rounded-full text-neon text-sm font-medium">Free Entry</span>
224
- <h2 class="text-2xl font-bold mt-2">Grand Fortune Frenzy</h2>
225
- <p class="text-gray-300 mt-1">Spin to win big prizes!</p>
226
- </div>
227
- <div class="text-right">
228
- <span class="text-xs text-gray-400">Prize Pool</span>
229
- <p class="text-3xl font-bold gradient-text">$5,000</p>
230
- </div>
231
  </div>
232
-
233
- <div class="mb-6">
234
- <p class="text-gray-400 text-sm mb-2">Tournament ends in:</p>
235
- <div class="flex space-x-2">
236
- <div class="countdown-digit flex flex-col items-center">
237
- <span class="text-2xl font-bold">12</span>
238
- <span class="text-xs text-gray-400">HOURS</span>
239
- </div>
240
- <div class="countdown-digit flex flex-col items-center">
241
- <span class="text-2xl font-bold">45</span>
242
- <span class="text-xs text-gray-400">MIN</span>
243
- </div>
244
- <div class="countdown-digit flex flex-col items-center">
245
- <span class="text-2xl font-bold">28</span>
246
- <span class="text-xs text-gray-400">SEC</span>
247
- </div>
248
- </div>
249
  </div>
250
-
251
- <button class="w-full py-3 gradient-bg rounded-xl font-bold text-dark text-lg hover:shadow-glow-hover transition-all">
252
- Join Tournament
253
- </button>
254
  </div>
255
- </section>
256
-
257
- <!-- User Stats Panel -->
258
- <section class="mb-8">
259
- <h3 class="text-lg font-bold mb-4 flex items-center">
260
- <i class="fas fa-chart-line text-neon mr-2"></i> Your Tournament Stats
261
- </h3>
262
 
263
- <div class="grid grid-cols-2 gap-4">
264
- <div class="glass-card p-4 rounded-2xl">
265
- <div class="flex items-center">
266
- <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3">
267
- <i class="fas fa-trophy text-neon"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  </div>
269
  <div>
270
- <p class="text-gray-400 text-sm">Current Rank</p>
271
- <p class="text-xl font-bold">#24</p>
272
  </div>
273
  </div>
 
 
 
 
 
274
  </div>
275
 
276
- <div class="glass-card p-4 rounded-2xl">
277
- <div class="flex items-center">
278
- <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3">
279
- <i class="fas fa-coins text-neon"></i>
 
 
 
 
 
 
 
280
  </div>
281
  <div>
282
- <p class="text-gray-400 text-sm">Points</p>
283
- <p class="text-xl font-bold">4,820</p>
284
  </div>
285
  </div>
 
 
 
 
 
286
  </div>
287
 
288
- <div class="glass-card p-4 rounded-2xl">
289
- <div class="flex items-center">
290
- <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3">
291
- <i class="fas fa-dice text-neon"></i>
 
 
 
 
 
 
 
292
  </div>
293
  <div>
294
- <p class="text-gray-400 text-sm">Games Played</p>
295
- <p class="text-xl font-bold">42</p>
296
  </div>
297
  </div>
 
 
 
 
 
298
  </div>
299
 
300
- <div class="glass-card p-4 rounded-2xl">
301
- <div class="flex items-center">
302
- <div class="w-10 h-10 rounded-full bg-neon/10 flex items-center justify-center mr-3">
303
- <i class="fas fa-gift text-neon"></i>
 
 
 
 
 
 
 
304
  </div>
305
  <div>
306
- <p class="text-gray-400 text-sm">Estimated Prize</p>
307
- <p class="text-xl font-bold">$120</p>
308
  </div>
309
  </div>
 
 
 
 
 
310
  </div>
311
  </div>
312
-
313
- <div class="glass-card p-4 rounded-2xl mt-4">
314
- <div class="flex justify-between mb-2">
315
- <p class="text-gray-400 text-sm">Progress to next tier</p>
316
- <p class="text-neon text-sm font-medium">Tier 3 - $200</p>
317
- </div>
318
- <div class="progress-bar">
319
- <div class="progress-fill" style="width: 65%"></div>
320
- </div>
321
- </div>
322
- </section>
323
-
324
- <!-- Leaderboard Module -->
325
- <section class="mb-8">
326
- <div class="flex justify-between items-center mb-4">
327
- <h3 class="text-lg font-bold flex items-center">
328
- <i class="fas fa-medal text-neon mr-2"></i> Top Players
329
- </h3>
330
- <button class="text-neon text-sm flex items-center">
331
- View All <i class="fas fa-chevron-right ml-1 text-xs"></i>
332
- </button>
333
  </div>
334
 
335
- <div class="glass-card rounded-2xl overflow-hidden">
336
- <div class="overflow-x-auto">
337
- <table class="w-full">
338
- <thead>
339
- <tr class="bg-black/30 text-gray-400 text-left">
340
- <th class="py-3 px-4">Rank</th>
341
- <th class="py-3 px-4">Player</th>
342
- <th class="py-3 px-4">Score</th>
343
- <th class="py-3 px-4">Prize</th>
344
- </tr>
345
- </thead>
346
- <tbody>
347
- <tr class="leaderboard-rank-1 border-b border-gray-800/50">
348
- <td class="py-3 px-4">
349
- <div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-300 to-amber-500 flex items-center justify-center">
350
- <i class="fas fa-crown text-dark text-sm"></i>
351
- </div>
352
- </td>
353
- <td class="py-3 px-4 font-medium">LuckyStar77</td>
354
- <td class="py-3 px-4 font-bold text-amber-300">32,450</td>
355
- <td class="py-3 px-4 font-bold">$1,200</td>
356
- </tr>
357
- <tr class="leaderboard-rank-2 border-b border-gray-800/50">
358
- <td class="py-3 px-4">
359
- <div class="w-8 h-8 rounded-full bg-gradient-to-r from-gray-300 to-gray-400 flex items-center justify-center">
360
- <span class="text-dark font-bold">2</span>
361
- </div>
362
- </td>
363
- <td class="py-3 px-4 font-medium">JackpotHunter</td>
364
- <td class="py-3 px-4 font-bold text-gray-300">28,910</td>
365
- <td class="py-3 px-4 font-bold">$800</td>
366
- </tr>
367
- <tr class="leaderboard-rank-3 border-b border-gray-800/50">
368
- <td class="py-3 px-4">
369
- <div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-700 to-amber-900 flex items-center justify-center">
370
- <span class="text-amber-300 font-bold">3</span>
371
- </div>
372
- </td>
373
- <td class="py-3 px-4 font-medium">GoldenSpinner</td>
374
- <td class="py-3 px-4 font-bold text-amber-500">25,670</td>
375
- <td class="py-3 px-4 font-bold">$500</td>
376
- </tr>
377
- <!-- Additional rows -->
378
- <tr class="border-b border-gray-800/50">
379
- <td class="py-3 px-4">
380
- <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
381
- <span class="font-bold">4</span>
382
- </div>
383
- </td>
384
- <td class="py-3 px-4">DiamondDice</td>
385
- <td class="py-3 px-4">22,350</td>
386
- <td class="py-3 px-4">$350</td>
387
- </tr>
388
- <tr class="border-b border-gray-800/50">
389
- <td class="py-3 px-4">
390
- <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
391
- <span class="font-bold">5</span>
392
- </div>
393
- </td>
394
- <td class="py-3 px-4">NeonNinja</td>
395
- <td class="py-3 px-4">19,820</td>
396
- <td class="py-3 px-4">$250</td>
397
- </tr>
398
- </tbody>
399
- </table>
400
  </div>
401
 
402
- <!-- Current User Row -->
403
- <div class="highlight-user p-4 bg-gray-900/50 m-4 rounded-xl">
404
- <div class="flex items-center justify-between">
405
- <div class="flex items-center">
406
- <div class="w-8 h-8 rounded-full bg-neon flex items-center justify-center mr-3">
407
- <span class="font-bold text-dark">24</span>
 
 
 
408
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
409
  <div>
410
- <p class="font-bold">You</p>
411
- <p class="text-gray-400 text-sm">JohnDoe123</p>
412
  </div>
413
  </div>
414
- <div>
415
- <p class="font-bold text-neon">4,820</p>
416
- <p class="text-right text-sm text-gray-400">$120</p>
417
  </div>
418
  </div>
419
  </div>
420
  </div>
421
- </section>
422
-
423
- <!-- Tournament Carousel -->
424
- <section class="mb-8">
425
- <div class="flex justify-between items-center mb-4">
426
- <h3 class="text-lg font-bold flex items-center">
427
- <i class="fas fa-fire text-neon mr-2"></i> Active Tournaments
428
- </h3>
429
- <div class="flex space-x-1">
430
- <button class="px-3 py-1 rounded-lg text-sm font-medium tab-active">Live</button>
431
- <button class="px-3 py-1 rounded-lg text-sm font-medium bg-gray-800">Upcoming</button>
432
- <button class="px-3 py-1 rounded-lg text-sm font-medium bg-gray-800">Completed</button>
433
  </div>
 
434
  </div>
435
-
436
- <div class="scroll-container overflow-x-auto pb-4">
437
- <div class="flex space-x-4" style="min-width: 900px;">
438
- <!-- Tournament Card 1 -->
439
- <div class="carousel-card glass-card w-64 flex-shrink-0 rounded-2xl overflow-hidden transition-all duration-300">
440
- <div class="p-5">
441
- <div class="flex justify-between items-start mb-3">
442
- <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs">LIVE</span>
443
- <span class="px-2 py-1 bg-neon/10 text-neon rounded text-xs">Free</span>
444
- </div>
445
- <h4 class="font-bold text-lg mb-2">Mega Slots Showdown</h4>
446
- <p class="text-gray-400 text-sm mb-4">Spin your way to victory</p>
447
- <div class="flex justify-between items-center mb-4">
448
- <div>
449
- <p class="text-xs text-gray-400">Prize Pool</p>
450
- <p class="font-bold text-neon">$2,500</p>
451
- </div>
452
- <div>
453
- <p class="text-xs text-gray-400">Players</p>
454
- <p class="font-bold">1,240</p>
455
- </div>
456
- </div>
457
- <button class="w-full py-2 bg-neon/10 text-neon rounded-lg font-medium hover:bg-neon/20 transition">
458
- Join Now
459
- </button>
460
  </div>
 
461
  </div>
462
 
463
- <!-- Tournament Card 2 -->
464
- <div class="carousel-card glass-card w-64 flex-shrink-0 rounded-2xl overflow-hidden transition-all duration-300">
465
- <div class="p-5">
466
- <div class="flex justify-between items-start mb-3">
467
- <span class="px-2 py-1 bg-green-500/20 text-green-400 rounded text-xs">LIVE</span>
468
- <span class="px-2 py-1 bg-purple-500/20 text-purple-400 rounded text-xs">100 Coins</span>
469
- </div>
470
- <h4 class="font-bold text-lg mb-2">Blackjack Blitz</h4>
471
- <p class="text-gray-400 text-sm mb-4">21 or bust challenge</p>
472
- <div class="flex justify-between items-center mb-4">
473
- <div>
474
- <p class="text-xs text-gray-400">Prize Pool</p>
475
- <p class="font-bold text-neon">$3,200</p>
476
  </div>
477
- <div>
478
- <p class="text-xs text-gray-400">Players</p>
479
- <p class="font-bold">890</p>
480
  </div>
481
- </div>
482
- <button class="w-full py-2 bg-neon/10 text-neon rounded-lg font-medium hover:bg-neon/20 transition">
483
- Join Now
484
- </button>
485
- </div>
486
- </div>
487
-
488
- <!-- Tournament Card 3 -->
489
- <div class="carousel-card glass-card w-64 flex-shrink-0 rounded-2xl overflow-hidden transition-all duration-300">
490
- <div class="p-5">
491
- <div class="flex justify-between items-start mb-3">
492
- <span class="px-2 py-1 bg-amber-500/20 text-amber-400 rounded text-xs">Starts in 2h</span>
493
- <span class="px-2 py-1 bg-blue-500/20 text-blue-400 rounded text-xs">Invite Only</span>
494
- </div>
495
- <h4 class="font-bold text-lg mb-2">VIP Roulette Royale</h4>
496
- <p class="text-gray-400 text-sm mb-4">Exclusive high roller event</p>
497
- <div class="flex justify-between items-center mb-4">
498
- <div>
499
- <p class="text-xs text-gray-400">Prize Pool</p>
500
- <p class="font-bold text-neon">$10,000</p>
501
  </div>
502
- <div>
503
- <p class="text-xs text-gray-400">Players</p>
504
- <p class="font-bold">24/50</p>
 
 
 
 
505
  </div>
506
  </div>
507
- <button class="w-full py-2 bg-gray-700 rounded-lg font-medium">
508
- Request Invite
509
- </button>
510
- </div>
511
- </div>
512
- </div>
513
- </div>
514
- </section>
515
-
516
- <!-- Hall of Fame -->
517
- <section class="mb-8">
518
- <h3 class="text-lg font-bold mb-4 flex items-center">
519
- <i class="fas fa-trophy text-neon mr-2"></i> Hall of Fame
520
- </h3>
521
-
522
- <div class="grid grid-cols-2 gap-4">
523
- <!-- Winner 1 -->
524
- <div class="glass-card p-4 rounded-2xl">
525
- <div class="flex items-center mb-3">
526
- <div class="avatar-frame w-14 h-14 rounded-full overflow-hidden mr-3">
527
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Winner" class="w-full h-full object-cover">
528
  </div>
 
529
  <div>
530
- <p class="font-bold">RubyRacer</p>
531
- <p class="text-xs text-gray-400">Last Week</p>
532
- </div>
533
- <div class="ml-auto">
534
- <i class="fas fa-crown text-amber-300 text-xl"></i>
 
 
 
535
  </div>
536
  </div>
537
- <div class="flex justify-between items-center">
538
- <div>
539
- <p class="text-xs text-gray-400">Tournament</p>
540
- <p class="text-sm font-medium">Slots Championship</p>
541
- </div>
542
- <div class="text-right">
543
- <p class="text-xs text-gray-400">Won</p>
544
- <p class="text-neon font-bold">$2,800</p>
545
- </div>
546
- </div>
547
- </div>
548
-
549
- <!-- Winner 2 -->
550
- <div class="glass-card p-4 rounded-2xl">
551
- <div class="flex items-center mb-3">
552
- <div class="avatar-frame w-14 h-14 rounded-full overflow-hidden mr-3">
553
- <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Winner" class="w-full h-full object-cover">
554
- </div>
555
- <div>
556
- <p class="font-bold">DiceMaster</p>
557
- <p class="text-xs text-gray-400">2 Days Ago</p>
558
- </div>
559
- <div class="ml-auto">
560
- <i class="fas fa-medal text-gray-300 text-xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
561
  </div>
562
  </div>
 
563
  <div class="flex justify-between items-center">
564
- <div>
565
- <p class="text-xs text-gray-400">Tournament</p>
566
- <p class="text-sm font-medium">Crazy Dice</p>
567
- </div>
568
- <div class="text-right">
569
- <p class="text-xs text-gray-400">Won</p>
570
- <p class="text-neon font-bold">$1,500</p>
571
- </div>
572
  </div>
573
  </div>
574
  </div>
575
- </section>
576
-
577
- <!-- Invite Friends -->
578
- <section class="glass-card neon-glow p-6 rounded-2xl relative overflow-hidden">
579
- <div class="absolute -top-10 -right-10 w-32 h-32 bg-neon rounded-full filter blur-3xl opacity-10"></div>
580
-
581
- <div class="relative z-10 text-center">
582
- <div class="w-16 h-16 gradient-bg rounded-xl flex items-center justify-center mx-auto mb-4">
583
- <i class="fas fa-gift text-2xl text-dark"></i>
584
- </div>
585
-
586
- <h3 class="text-xl font-bold mb-2">Invite Friends & Earn Rewards</h3>
587
- <p class="text-gray-300 mb-4">Invite friends and get 100 coins for each friend who joins</p>
588
-
589
- <div class="bg-black/30 rounded-xl p-4 mb-4">
590
- <p class="text-sm text-gray-400 mb-1">Your referral progress</p>
591
- <div class="flex items-center justify-between">
592
- <div class="text-left">
593
- <p class="text-2xl font-bold gradient-text">3<span class="text-gray-400 text-base">/5</span></p>
594
- <p class="text-xs text-gray-400">Friends invited</p>
595
- </div>
596
- <div class="text-right">
597
- <p class="text-xl font-bold text-neon">300</p>
598
- <p class="text-xs text-gray-400">Coins earned</p>
599
- </div>
600
- </div>
601
- </div>
602
-
603
- <button id="inviteBtn" class="w-full py-3 gradient-bg rounded-xl font-bold text-dark text-lg hover:shadow-glow-hover transition-all">
604
- Invite Friends Now
605
- </button>
606
- </div>
607
- </section>
608
- </main>
609
-
610
- <!-- Footer Navigation -->
611
- <footer class="fixed bottom-0 left-0 right-0 bg-dark/80 backdrop-blur-lg border-t border-neon/10">
612
- <div class="container mx-auto">
613
- <div class="flex justify-around py-3">
614
- <button class="flex flex-col items-center text-neon">
615
- <i class="fas fa-home text-lg"></i>
616
- <span class="text-xs mt-1">Home</span>
617
- </button>
618
- <button class="flex flex-col items-center">
619
- <i class="fas fa-trophy text-lg"></i>
620
- <span class="text-xs mt-1">Tournaments</span>
621
- </button>
622
- <button class="flex flex-col items-center">
623
- <i class="fas fa-wallet text-lg"></i>
624
- <span class="text-xs mt-1">Wallet</span>
625
- </button>
626
- <button class="flex flex-col items-center">
627
- <i class="fas fa-user text-lg"></i>
628
- <span class="text-xs mt-1">Profile</span>
629
- </button>
630
- </div>
631
  </div>
632
- </footer>
633
 
634
  <!-- Invite Friends Modal -->
635
  <div id="inviteModal" class="fixed inset-0 z-50 hidden">
636
  <div class="modal-overlay absolute inset-0"></div>
637
- <div class="flex items-center justify-center min-h-screen p-4">
638
- <div class="modal-content glass-card w-full max-w-md rounded-2xl overflow-hidden">
639
  <div class="p-6">
640
- <div class="flex justify-between items-center mb-4">
641
- <h3 class="text-xl font-bold">Invite Friends</h3>
642
- <button id="closeModal" class="text-gray-400 hover:text-white">
643
- <i class="fas fa-times"></i>
644
- </button>
645
  </div>
646
 
647
- <p class="text-gray-300 mb-6">Share your referral link and earn 100 coins for each friend who signs up and deposits.</p>
648
-
649
  <div class="mb-6">
650
- <p class="text-sm text-gray-400 mb-2">Your unique referral link:</p>
651
  <div class="flex">
652
- <input type="text" value="https://neon.casino/ref/johndoe123" class="flex-1 bg-gray-800 border border-gray-700 rounded-l-lg py-3 px-4 text-sm" readonly>
653
- <button class="bg-neon text-dark font-bold py-3 px-4 rounded-r-lg">
654
- Copy
655
- </button>
656
  </div>
657
  </div>
658
 
659
- <p class="text-sm text-gray-400 mb-3">Share via:</p>
660
- <div class="flex space-x-3">
661
- <button class="flex-1 py-3 bg-blue-600 rounded-lg">
662
- <i class="fab fa-facebook-f"></i>
663
- </button>
664
- <button class="flex-1 py-3 bg-green-500 rounded-lg">
665
- <i class="fab fa-whatsapp"></i>
666
- </button>
667
- <button class="flex-1 py-3 bg-red-500 rounded-lg">
668
- <i class="fab fa-google"></i>
669
- </button>
670
- <button class="flex-1 py-3 bg-gray-700 rounded-lg">
671
- <i class="fas fa-ellipsis-h"></i>
672
- </button>
 
 
673
  </div>
674
 
675
- <div class="mt-6 pt-4 border-t border-gray-800">
676
- <p class="text-center text-sm text-gray-400">
677
- <i class="fas fa-shield-alt mr-1"></i> All transactions are secure and encrypted
678
- </p>
 
 
 
 
 
679
  </div>
680
  </div>
681
  </div>
@@ -684,20 +716,38 @@
684
 
685
  <script>
686
  // Modal functionality
687
- const inviteBtn = document.getElementById('inviteBtn');
688
  const inviteModal = document.getElementById('inviteModal');
689
  const closeModal = document.getElementById('closeModal');
 
 
690
 
 
 
 
 
 
 
 
 
691
  inviteBtn.addEventListener('click', () => {
692
  inviteModal.classList.remove('hidden');
693
  });
694
 
 
695
  closeModal.addEventListener('click', () => {
 
 
 
 
696
  inviteModal.classList.add('hidden');
697
  });
698
 
699
  // Close modal when clicking outside
700
- inviteModal.addEventListener('click', (e) => {
 
 
 
701
  if (e.target === inviteModal) {
702
  inviteModal.classList.add('hidden');
703
  }
@@ -705,15 +755,13 @@
705
 
706
  // Simulate countdown timer
707
  function updateCountdown() {
708
- // This would be replaced with real countdown logic
709
- console.log('Countdown updated');
710
  }
711
 
712
  // Initialize
713
- document.addEventListener('DOMContentLoaded', () => {
714
- // Start countdown timer
715
- setInterval(updateCountdown, 1000);
716
- });
717
  </script>
718
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/tournament-ui-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
719
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Neon Casino Tournament</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 
9
  <script>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
  colors: {
14
+ primary: '#0C0C0C',
15
  neon: '#FFD700',
16
+ neonOrange: '#FFA500',
17
+ glass: 'rgba(15, 15, 15, 0.7)',
18
+ },
19
+ fontFamily: {
20
+ poppins: ['Poppins', 'sans-serif'],
21
  },
22
  boxShadow: {
23
+ 'neon': '0 0 15px rgba(255, 215, 0, 0.5)',
24
+ 'neon-orange': '0 0 15px rgba(255, 165, 0, 0.5)',
25
+ 'glow': '0 0 20px rgba(255, 215, 0, 0.7)',
26
  }
27
  }
28
  }
29
  }
30
  </script>
31
  <style>
 
 
 
 
 
 
32
  body {
33
+ background: linear-gradient(135deg, #080808 0%, #0C0C0C 100%);
34
+ min-height: 100vh;
35
  font-family: 'Poppins', sans-serif;
 
36
  color: white;
37
  overflow-x: hidden;
38
  }
39
 
40
+ .glass-panel {
41
+ background: rgba(20, 20, 20, 0.4);
42
  backdrop-filter: blur(10px);
43
  -webkit-backdrop-filter: blur(10px);
 
44
  border: 1px solid rgba(255, 215, 0, 0.2);
45
+ border-radius: 20px;
46
+ transition: all 0.3s ease;
47
  }
48
 
49
+ .glass-panel:hover {
50
+ box-shadow: 0 0 25px rgba(255, 215, 0, 0.4);
51
+ border: 1px solid rgba(255, 215, 0, 0.4);
 
 
 
 
 
 
 
52
  }
53
 
54
+ .neon-glow {
55
+ text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
56
  }
57
 
58
+ .neon-text {
59
+ color: #FFD700;
60
+ text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
 
61
  }
62
 
63
+ .neon-button {
64
+ background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
65
+ color: #0C0C0C;
66
+ font-weight: 700;
67
+ border-radius: 50px;
68
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
69
+ transition: all 0.3s ease;
70
  }
71
 
72
+ .neon-button:hover {
73
+ box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
74
+ transform: translateY(-2px);
75
  }
76
 
77
+ .top-rank-1 {
78
+ background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
79
+ border: 1px solid rgba(255, 215, 0, 0.3);
80
  }
81
 
82
+ .top-rank-2 {
83
+ background: linear-gradient(90deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%);
84
+ border: 1px solid rgba(192, 192, 192, 0.3);
85
  }
86
 
87
+ .top-rank-3 {
88
+ background: linear-gradient(90deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%);
89
+ border: 1px solid rgba(205, 127, 50, 0.3);
90
  }
91
 
92
+ .user-highlight {
93
+ background: rgba(255, 215, 0, 0.1);
94
+ border: 1px solid rgba(255, 215, 0, 0.4);
95
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
96
  }
97
 
98
+ .progress-bar {
99
+ height: 8px;
100
+ border-radius: 4px;
101
+ background: rgba(255, 255, 255, 0.1);
102
  }
103
 
104
+ .progress-fill {
105
+ height: 100%;
106
+ border-radius: 4px;
107
+ background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
108
+ box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
109
  }
110
 
111
+ .carousel-container {
112
+ scrollbar-width: none;
 
 
 
 
 
 
 
113
  }
114
 
115
+ .carousel-container::-webkit-scrollbar {
116
+ display: none;
117
  }
118
 
119
+ .carousel-item {
120
+ flex: 0 0 auto;
121
+ scroll-snap-align: start;
 
 
 
 
 
 
 
122
  }
123
 
124
+ .trophy-icon {
125
+ text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
 
 
126
  }
127
 
128
+ .modal-overlay {
129
+ background: rgba(0, 0, 0, 0.8);
130
+ backdrop-filter: blur(5px);
131
+ -webkit-backdrop-filter: blur(5px);
132
  }
133
 
134
+ .modal-content {
135
+ animation: modalAppear 0.3s ease-out;
136
  }
137
 
138
+ @keyframes modalAppear {
139
+ from { opacity: 0; transform: translateY(20px); }
140
+ to { opacity: 1; transform: translateY(0); }
141
  }
142
 
143
+ .payout-table tr:nth-child(odd) {
144
+ background: rgba(255, 255, 255, 0.05);
 
145
  }
146
 
147
+ .payout-table tr:nth-child(even) {
148
+ background: rgba(255, 255, 255, 0.02);
 
 
 
149
  }
150
 
151
+ .invite-card {
152
+ background: linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(15, 15, 15, 0.6) 100%);
153
+ border: 1px solid rgba(255, 215, 0, 0.3);
154
  }
155
 
156
+ @media (max-width: 768px) {
157
+ .stats-grid {
158
+ grid-template-columns: repeat(2, 1fr);
159
+ }
 
 
 
 
 
 
 
160
  }
161
  </style>
162
  </head>
163
+ <body class="bg-primary min-h-screen font-poppins">
164
+ <!-- Main Container -->
165
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
166
+ <!-- 🔥 Current Tournament Banner -->
167
+ <div class="glass-panel p-6 mb-8 relative overflow-hidden">
168
+ <div class="absolute inset-0 bg-gradient-to-r from-transparent via-black/20 to-transparent"></div>
169
+ <div class="flex flex-col md:flex-row justify-between items-center relative z-10">
170
+ <div class="mb-4 md:mb-0">
171
+ <div class="flex items-center mb-2">
172
+ <span class="bg-black/40 text-neonOrange px-3 py-1 rounded-full text-sm font-semibold">Free Entry</span>
173
+ <span class="ml-3 text-sm text-gray-300">Slot Masters Tournament</span>
174
+ </div>
175
+ <h1 class="text-3xl font-bold neon-glow mb-2">Mega Jackpot Showdown</h1>
176
+ <div class="flex items-center">
177
+ <div class="mr-6">
178
+ <p class="text-gray-400 text-sm">Prize Pool</p>
179
+ <p class="text-2xl font-bold neon-text">$5,000</p>
180
+ </div>
181
+ <div>
182
+ <p class="text-gray-400 text-sm">Ends In</p>
183
+ <div id="countdown" class="flex space-x-2">
184
+ <div class="text-center">
185
+ <div class="text-xl font-bold neon-text">02</div>
186
+ <div class="text-xs text-gray-400">HRS</div>
187
+ </div>
188
+ <div class="text-xl font-bold neon-text">:</div>
189
+ <div class="text-center">
190
+ <div class="text-xl font-bold neon-text">45</div>
191
+ <div class="text-xs text-gray-400">MIN</div>
192
+ </div>
193
+ <div class="text-xl font-bold neon-text">:</div>
194
+ <div class="text-center">
195
+ <div class="text-xl font-bold neon-text">18</div>
196
+ <div class="text-xs text-gray-400">SEC</div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
  </div>
202
+ <button class="neon-button px-8 py-3 font-bold text-lg">Continue Playing</button>
203
  </div>
204
+ </div>
205
+
206
+ <!-- 📊 User Stats Panel -->
207
+ <div class="grid stats-grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
208
+ <div class="glass-panel p-5 flex items-center">
209
+ <div class="mr-4 text-neon">
210
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
211
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
212
+ </svg>
213
+ </div>
214
+ <div>
215
+ <p class="text-gray-400 text-sm">Your Rank</p>
216
+ <p class="text-xl font-bold">#27<span class="text-neon ml-2">↑3</span></p>
217
  </div>
218
  </div>
 
 
 
 
 
 
 
 
 
219
 
220
+ <div class="glass-panel p-5 flex items-center">
221
+ <div class="mr-4 text-neon">
222
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
223
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
224
+ </svg>
 
 
 
 
 
 
225
  </div>
226
+ <div>
227
+ <p class="text-gray-400 text-sm">Points Earned</p>
228
+ <p class="text-xl font-bold">1,250</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
229
  </div>
 
 
 
 
230
  </div>
 
 
 
 
 
 
 
231
 
232
+ <div class="glass-panel p-5 flex items-center">
233
+ <div class="mr-4 text-neon">
234
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
235
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
236
+ </svg>
237
+ </div>
238
+ <div>
239
+ <p class="text-gray-400 text-sm">Games Played</p>
240
+ <p class="text-xl font-bold">48</p>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="glass-panel p-5 flex flex-col">
245
+ <div class="flex justify-between mb-2">
246
+ <p class="text-gray-400 text-sm">Estimated Prize</p>
247
+ <p class="text-neon font-bold">$85</p>
248
+ </div>
249
+ <div class="progress-bar">
250
+ <div class="progress-fill" style="width: 65%"></div>
251
+ </div>
252
+ <div class="flex justify-between mt-1">
253
+ <span class="text-xs text-gray-400">Tier 2</span>
254
+ <span class="text-xs text-gray-400">65% to next tier</span>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- 🏅 Leaderboard Module -->
260
+ <div class="glass-panel p-6 mb-8">
261
+ <div class="flex justify-between items-center mb-6">
262
+ <h2 class="text-2xl font-bold neon-glow">Leaderboard</h2>
263
+ <div class="flex items-center">
264
+ <span class="text-gray-400 mr-3">Time Left: 2h 45m</span>
265
+ <button class="bg-black/40 text-neonOrange px-4 py-2 rounded-full text-sm font-semibold">Refresh</button>
266
+ </div>
267
+ </div>
268
+
269
+ <div class="overflow-x-auto">
270
+ <table class="w-full">
271
+ <thead>
272
+ <tr class="text-gray-400 text-left border-b border-gray-700">
273
+ <th class="pb-3">Rank</th>
274
+ <th class="pb-3">Username</th>
275
+ <th class="pb-3 text-right">Score</th>
276
+ <th class="pb-3 text-right">Prize</th>
277
+ </tr>
278
+ </thead>
279
+ <tbody>
280
+ <tr class="top-rank-1 h-16">
281
+ <td class="font-bold text-xl">🥇</td>
282
+ <td>
283
+ <div class="flex items-center">
284
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8 mr-3"></div>
285
+ <span class="font-bold">LuckyStar77</span>
286
+ </div>
287
+ </td>
288
+ <td class="text-right font-bold">12,480</td>
289
+ <td class="text-right font-bold text-neon">$1,200</td>
290
+ </tr>
291
+ <tr class="top-rank-2 h-16">
292
+ <td class="font-bold text-xl">🥈</td>
293
+ <td>
294
+ <div class="flex items-center">
295
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8 mr-3"></div>
296
+ <span class="font-bold">DiamondDuke</span>
297
+ </div>
298
+ </td>
299
+ <td class="text-right font-bold">10,750</td>
300
+ <td class="text-right font-bold text-neon">$800</td>
301
+ </tr>
302
+ <tr class="top-rank-3 h-16">
303
+ <td class="font-bold text-xl">🥉</td>
304
+ <td>
305
+ <div class="flex items-center">
306
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8 mr-3"></div>
307
+ <span class="font-bold">JackpotJill</span>
308
+ </div>
309
+ </td>
310
+ <td class="text-right font-bold">9,340</td>
311
+ <td class="text-right font-bold text-neon">$500</td>
312
+ </tr>
313
+ <tr class="h-12">
314
+ <td class="font-bold">4</td>
315
+ <td>HighRoller99</td>
316
+ <td class="text-right">8,910</td>
317
+ <td class="text-right">$350</td>
318
+ </tr>
319
+ <tr class="h-12">
320
+ <td class="font-bold">5</td>
321
+ <td>GoldenAce</td>
322
+ <td class="text-right">7,650</td>
323
+ <td class="text-right">$250</td>
324
+ </tr>
325
+ <tr class="h-12">
326
+ <td class="font-bold">6</td>
327
+ <td>FortuneSeeker</td>
328
+ <td class="text-right">6,780</td>
329
+ <td class="text-right">$200</td>
330
+ </tr>
331
+ <tr class="h-12">
332
+ <td class="font-bold">7</td>
333
+ <td>SlotMaster</td>
334
+ <td class="text-right">5,920</td>
335
+ <td class="text-right">$150</td>
336
+ </tr>
337
+ <tr class="h-12">
338
+ <td class="font-bold">8</td>
339
+ <td>NeonKnight</td>
340
+ <td class="text-right">4,860</td>
341
+ <td class="text-right">$100</td>
342
+ </tr>
343
+ <tr class="h-12">
344
+ <td class="font-bold">9</td>
345
+ <td>RoyalFlush</td>
346
+ <td class="text-right">3,950</td>
347
+ <td class="text-right">$80</td>
348
+ </tr>
349
+ <tr class="h-12">
350
+ <td class="font-bold">10</td>
351
+ <td>WildCardWilly</td>
352
+ <td class="text-right">3,120</td>
353
+ <td class="text-right">$50</td>
354
+ </tr>
355
+ <tr class="user-highlight h-14">
356
+ <td class="font-bold text-neon">27</td>
357
+ <td class="text-neon font-bold">You</td>
358
+ <td class="text-right text-neon font-bold">1,250</td>
359
+ <td class="text-right text-neon font-bold">$85</td>
360
+ </tr>
361
+ </tbody>
362
+ </table>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- 🎮 Tournament Carousel Section -->
367
+ <div class="mb-8">
368
+ <div class="flex justify-between items-center mb-6">
369
+ <h2 class="text-2xl font-bold neon-glow">Active Tournaments</h2>
370
+ <div class="flex space-x-2">
371
+ <button class="bg-neon text-black px-4 py-2 rounded-full font-bold">Live</button>
372
+ <button class="bg-black/40 text-white px-4 py-2 rounded-full font-bold">Upcoming</button>
373
+ <button class="bg-black/40 text-white px-4 py-2 rounded-full font-bold">Completed</button>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="carousel-container flex space-x-5 overflow-x-auto pb-4">
378
+ <!-- Tournament Card 1 -->
379
+ <div class="carousel-item glass-panel p-5 w-72 flex-shrink-0">
380
+ <div class="flex justify-between items-start mb-4">
381
+ <span class="bg-black/40 text-neonOrange px-3 py-1 rounded-full text-xs font-semibold">Free Entry</span>
382
+ <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-bold">LIVE</span>
383
+ </div>
384
+ <h3 class="text-lg font-bold mb-2">Rapid Roulette Rush</h3>
385
+ <div class="flex justify-between text-sm mb-3">
386
+ <div>
387
+ <p class="text-gray-400">Prize Pool</p>
388
+ <p class="font-bold text-neon">$2,500</p>
389
  </div>
390
  <div>
391
+ <p class="text-gray-400">Players</p>
392
+ <p class="font-bold">1,248</p>
393
  </div>
394
  </div>
395
+ <div class="mb-4">
396
+ <p class="text-gray-400 text-sm mb-1">Ends In</p>
397
+ <p class="font-bold">1h 22m</p>
398
+ </div>
399
+ <button class="neon-button w-full py-2 font-bold">Join Now</button>
400
  </div>
401
 
402
+ <!-- Tournament Card 2 -->
403
+ <div class="carousel-item glass-panel p-5 w-72 flex-shrink-0">
404
+ <div class="flex justify-between items-start mb-4">
405
+ <span class="bg-black/40 text-neonOrange px-3 py-1 rounded-full text-xs font-semibold">100 Coins</span>
406
+ <span class="bg-gray-500 text-white px-2 py-1 rounded text-xs font-bold">UPCOMING</span>
407
+ </div>
408
+ <h3 class="text-lg font-bold mb-2">Blackjack Blitz</h3>
409
+ <div class="flex justify-between text-sm mb-3">
410
+ <div>
411
+ <p class="text-gray-400">Prize Pool</p>
412
+ <p class="font-bold text-neon">$3,800</p>
413
  </div>
414
  <div>
415
+ <p class="text-gray-400">Players</p>
416
+ <p class="font-bold">982</p>
417
  </div>
418
  </div>
419
+ <div class="mb-4">
420
+ <p class="text-gray-400 text-sm mb-1">Starts In</p>
421
+ <p class="font-bold">3h 15m</p>
422
+ </div>
423
+ <button class="neon-button w-full py-2 font-bold">Register</button>
424
  </div>
425
 
426
+ <!-- Tournament Card 3 -->
427
+ <div class="carousel-item glass-panel p-5 w-72 flex-shrink-0">
428
+ <div class="flex justify-between items-start mb-4">
429
+ <span class="bg-black/40 text-neonOrange px-3 py-1 rounded-full text-xs font-semibold">Invite Only</span>
430
+ <span class="bg-gray-500 text-white px-2 py-1 rounded text-xs font-bold">UPCOMING</span>
431
+ </div>
432
+ <h3 class="text-lg font-bold mb-2">VIP Slots Championship</h3>
433
+ <div class="flex justify-between text-sm mb-3">
434
+ <div>
435
+ <p class="text-gray-400">Prize Pool</p>
436
+ <p class="font-bold text-neon">$10,000</p>
437
  </div>
438
  <div>
439
+ <p class="text-gray-400">Players</p>
440
+ <p class="font-bold">150</p>
441
  </div>
442
  </div>
443
+ <div class="mb-4">
444
+ <p class="text-gray-400 text-sm mb-1">Starts In</p>
445
+ <p class="font-bold">1d 4h</p>
446
+ </div>
447
+ <button class="bg-black/40 text-white w-full py-2 rounded-full font-bold">Request Invite</button>
448
  </div>
449
 
450
+ <!-- Tournament Card 4 -->
451
+ <div class="carousel-item glass-panel p-5 w-72 flex-shrink-0">
452
+ <div class="flex justify-between items-start mb-4">
453
+ <span class="bg-black/40 text-neonOrange px-3 py-1 rounded-full text-xs font-semibold">50 Coins</span>
454
+ <span class="bg-red-500 text-white px-2 py-1 rounded text-xs font-bold">LIVE</span>
455
+ </div>
456
+ <h3 class="text-lg font-bold mb-2">Poker Power Hour</h3>
457
+ <div class="flex justify-between text-sm mb-3">
458
+ <div>
459
+ <p class="text-gray-400">Prize Pool</p>
460
+ <p class="font-bold text-neon">$1,500</p>
461
  </div>
462
  <div>
463
+ <p class="text-gray-400">Players</p>
464
+ <p class="font-bold">576</p>
465
  </div>
466
  </div>
467
+ <div class="mb-4">
468
+ <p class="text-gray-400 text-sm mb-1">Ends In</p>
469
+ <p class="font-bold">45m</p>
470
+ </div>
471
+ <button class="neon-button w-full py-2 font-bold">Join Now</button>
472
  </div>
473
  </div>
474
+ </div>
475
+
476
+ <!-- 🏆 Hall of Fame Section -->
477
+ <div class="glass-panel p-6 mb-8">
478
+ <div class="flex justify-between items-center mb-6">
479
+ <h2 class="text-2xl font-bold neon-glow">Hall of Fame</h2>
480
+ <button class="text-neonOrange font-semibold">View All</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
481
  </div>
482
 
483
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
484
+ <!-- Winner 1 -->
485
+ <div class="glass-panel p-5 flex items-center">
486
+ <div class="mr-4 text-3xl trophy-icon">🥇</div>
487
+ <div>
488
+ <div class="flex items-center mb-1">
489
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3"></div>
490
+ <div>
491
+ <p class="font-bold">LuckyStar77</p>
492
+ <p class="text-xs text-gray-400">Slot Masters Tournament</p>
493
+ </div>
494
+ </div>
495
+ <div class="flex justify-between mt-2">
496
+ <span class="text-neon font-bold">$1,200</span>
497
+ <span class="text-gray-400 text-sm">Jun 15, 2023</span>
498
+ </div>
499
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
500
  </div>
501
 
502
+ <!-- Winner 2 -->
503
+ <div class="glass-panel p-5 flex items-center">
504
+ <div class="mr-4 text-3xl trophy-icon">🥇</div>
505
+ <div>
506
+ <div class="flex items-center mb-1">
507
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3"></div>
508
+ <div>
509
+ <p class="font-bold">DiamondDuke</p>
510
+ <p class="text-xs text-gray-400">Blackjack Championship</p>
511
  </div>
512
+ </div>
513
+ <div class="flex justify-between mt-2">
514
+ <span class="text-neon font-bold">$2,500</span>
515
+ <span class="text-gray-400 text-sm">May 28, 2023</span>
516
+ </div>
517
+ </div>
518
+ </div>
519
+
520
+ <!-- Winner 3 -->
521
+ <div class="glass-panel p-5 flex items-center">
522
+ <div class="mr-4 text-3xl trophy-icon">🥇</div>
523
+ <div>
524
+ <div class="flex items-center mb-1">
525
+ <div class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10 mr-3"></div>
526
  <div>
527
+ <p class="font-bold">GoldenAce</p>
528
+ <p class="text-xs text-gray-400">Roulette Royale</p>
529
  </div>
530
  </div>
531
+ <div class="flex justify-between mt-2">
532
+ <span class="text-neon font-bold">$1,800</span>
533
+ <span class="text-gray-400 text-sm">Apr 30, 2023</span>
534
  </div>
535
  </div>
536
  </div>
537
  </div>
538
+ </div>
539
+
540
+ <!-- 🤝 Invite Friends Section -->
541
+ <div class="invite-card rounded-2xl p-6 mb-8">
542
+ <div class="flex flex-col md:flex-row justify-between items-center">
543
+ <div class="flex items-center mb-4 md:mb-0">
544
+ <div class="text-4xl mr-4 text-neon">🎁</div>
545
+ <div>
546
+ <h3 class="text-xl font-bold">Invite Friends & Earn Rewards</h3>
547
+ <p class="text-gray-300">Get 100 coins for each friend who joins</p>
548
+ </div>
 
549
  </div>
550
+ <button id="inviteBtn" class="neon-button px-6 py-3 font-bold">Invite Friends Now</button>
551
  </div>
552
+ <div class="mt-4 flex items-center">
553
+ <div class="w-full bg-black/30 rounded-full h-2.5 mr-3">
554
+ <div class="bg-neon h-2.5 rounded-full" style="width: 60%"></div>
555
+ </div>
556
+ <span class="text-sm">3/5 friends invited</span>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <!-- Tournament Details Modal -->
562
+ <div id="tournamentModal" class="fixed inset-0 z-50 hidden">
563
+ <div class="modal-overlay absolute inset-0"></div>
564
+ <div class="flex items-center justify-center min-h-screen">
565
+ <div class="modal-content glass-panel w-full max-w-2xl mx-4">
566
+ <div class="p-6">
567
+ <div class="flex justify-between items-start mb-4">
568
+ <div>
569
+ <span class="bg-black/40 text-neonOrange px-3 py-1 rounded-full text-sm font-semibold">100 Coins</span>
570
+ <h2 class="text-2xl font-bold mt-2">Blackjack Blitz Tournament</h2>
 
 
 
 
 
 
571
  </div>
572
+ <button id="closeModal" class="text-gray-400 hover:text-white text-2xl">&times;</button>
573
  </div>
574
 
575
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
576
+ <div>
577
+ <h3 class="font-bold text-lg mb-2">Tournament Details</h3>
578
+ <div class="space-y-2">
579
+ <div class="flex">
580
+ <span class="text-gray-400 w-32">Start Time:</span>
581
+ <span>Jun 25, 2023 18:00 UTC</span>
 
 
 
 
 
 
582
  </div>
583
+ <div class="flex">
584
+ <span class="text-gray-400 w-32">End Time:</span>
585
+ <span>Jun 25, 2023 22:00 UTC</span>
586
  </div>
587
+ <div class="flex">
588
+ <span class="text-gray-400 w-32">Entry Fee:</span>
589
+ <span class="text-neon font-bold">100 Coins</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
590
  </div>
591
+ <div class="flex">
592
+ <span class="text-gray-400 w-32">Prize Pool:</span>
593
+ <span class="text-neon font-bold">$3,800</span>
594
+ </div>
595
+ <div class="flex">
596
+ <span class="text-gray-400 w-32">Players:</span>
597
+ <span>982 registered</span>
598
  </div>
599
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
600
  </div>
601
+
602
  <div>
603
+ <h3 class="font-bold text-lg mb-2">Scoring Rules</h3>
604
+ <ul class="list-disc pl-5 space-y-1">
605
+ <li>1 point = $1 wagered</li>
606
+ <li>Blackjack wins: +10 bonus points</li>
607
+ <li>Perfect Pairs: +5 bonus points</li>
608
+ <li>5+ card wins: +3 bonus points</li>
609
+ <li>Each tournament level completed: +50 points</li>
610
+ </ul>
611
  </div>
612
  </div>
613
+
614
+ <div class="mb-6">
615
+ <h3 class="font-bold text-lg mb-2">Payout Structure</h3>
616
+ <div class="overflow-x-auto">
617
+ <table class="w-full payout-table">
618
+ <thead>
619
+ <tr class="bg-black/30">
620
+ <th class="py-2 px-4 text-left">Position</th>
621
+ <th class="py-2 px-4 text-right">Prize</th>
622
+ <th class="py-2 px-4 text-right">% of Pool</th>
623
+ </tr>
624
+ </thead>
625
+ <tbody>
626
+ <tr>
627
+ <td class="py-2 px-4">1st</td>
628
+ <td class="py-2 px-4 text-right text-neon font-bold">$800</td>
629
+ <td class="py-2 px-4 text-right">21%</td>
630
+ </tr>
631
+ <tr>
632
+ <td class="py-2 px-4">2nd</td>
633
+ <td class="py-2 px-4 text-right text-neon font-bold">$500</td>
634
+ <td class="py-2 px-4 text-right">13.2%</td>
635
+ </tr>
636
+ <tr>
637
+ <td class="py-2 px-4">3rd</td>
638
+ <td class="py-2 px-4 text-right text-neon font-bold">$350</td>
639
+ <td class="py-2 px-4 text-right">9.2%</td>
640
+ </tr>
641
+ <tr>
642
+ <td class="py-2 px-4">4th-10th</td>
643
+ <td class="py-2 px-4 text-right">$200-$100</td>
644
+ <td class="py-2 px-4 text-right">28.6%</td>
645
+ </tr>
646
+ <tr>
647
+ <td class="py-2 px-4">11th-50th</td>
648
+ <td class="py-2 px-4 text-right">$50-$20</td>
649
+ <td class="py-2 px-4 text-right">28%</td>
650
+ </tr>
651
+ </tbody>
652
+ </table>
653
  </div>
654
  </div>
655
+
656
  <div class="flex justify-between items-center">
657
+ <a href="#" class="text-neonOrange hover:underline">Terms & Conditions</a>
658
+ <button class="neon-button px-8 py-3 font-bold">Join Tournament</button>
 
 
 
 
 
 
659
  </div>
660
  </div>
661
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
662
  </div>
663
+ </div>
664
 
665
  <!-- Invite Friends Modal -->
666
  <div id="inviteModal" class="fixed inset-0 z-50 hidden">
667
  <div class="modal-overlay absolute inset-0"></div>
668
+ <div class="flex items-center justify-center min-h-screen">
669
+ <div class="modal-content glass-panel w-full max-w-md mx-4">
670
  <div class="p-6">
671
+ <div class="flex justify-between items-center mb-6">
672
+ <h2 class="text-2xl font-bold">Invite Friends</h2>
673
+ <button id="closeInviteModal" class="text-gray-400 hover:text-white text-2xl">&times;</button>
 
 
674
  </div>
675
 
 
 
676
  <div class="mb-6">
677
+ <p class="text-gray-300 mb-3">Share your referral link and earn 100 coins for each friend who joins!</p>
678
  <div class="flex">
679
+ <input type="text" value="https://neoncasino.com/ref/yourusername" class="bg-black/30 text-white rounded-l-lg px-4 py-3 w-full" readonly>
680
+ <button class="bg-neon text-black font-bold px-4 rounded-r-lg">Copy</button>
 
 
681
  </div>
682
  </div>
683
 
684
+ <div class="mb-6">
685
+ <h3 class="font-bold mb-3">Share via</h3>
686
+ <div class="flex space-x-3">
687
+ <button class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl">
688
+ <span>📱</span>
689
+ </button>
690
+ <button class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl">
691
+ <span>f</span>
692
+ </button>
693
+ <button class="bg-blue-400 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl">
694
+ <span>✉️</span>
695
+ </button>
696
+ <button class="bg-gray-700 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl">
697
+ <span>📋</span>
698
+ </button>
699
+ </div>
700
  </div>
701
 
702
+ <div class="bg-black/30 rounded-lg p-4">
703
+ <div class="flex justify-between items-center mb-2">
704
+ <span class="font-bold">Your Progress</span>
705
+ <span class="text-neon font-bold">3/5 friends</span>
706
+ </div>
707
+ <div class="w-full bg-black/50 rounded-full h-2.5">
708
+ <div class="bg-neon h-2.5 rounded-full" style="width: 60%"></div>
709
+ </div>
710
+ <p class="text-gray-300 text-sm mt-2">Invite 2 more friends to unlock bonus rewards!</p>
711
  </div>
712
  </div>
713
  </div>
 
716
 
717
  <script>
718
  // Modal functionality
719
+ const tournamentModal = document.getElementById('tournamentModal');
720
  const inviteModal = document.getElementById('inviteModal');
721
  const closeModal = document.getElementById('closeModal');
722
+ const closeInviteModal = document.getElementById('closeInviteModal');
723
+ const inviteBtn = document.getElementById('inviteBtn');
724
 
725
+ // Tournament card click event
726
+ document.querySelectorAll('.carousel-item').forEach(card => {
727
+ card.addEventListener('click', () => {
728
+ tournamentModal.classList.remove('hidden');
729
+ });
730
+ });
731
+
732
+ // Invite button click event
733
  inviteBtn.addEventListener('click', () => {
734
  inviteModal.classList.remove('hidden');
735
  });
736
 
737
+ // Close modals
738
  closeModal.addEventListener('click', () => {
739
+ tournamentModal.classList.add('hidden');
740
+ });
741
+
742
+ closeInviteModal.addEventListener('click', () => {
743
  inviteModal.classList.add('hidden');
744
  });
745
 
746
  // Close modal when clicking outside
747
+ window.addEventListener('click', (e) => {
748
+ if (e.target === tournamentModal) {
749
+ tournamentModal.classList.add('hidden');
750
+ }
751
  if (e.target === inviteModal) {
752
  inviteModal.classList.add('hidden');
753
  }
 
755
 
756
  // Simulate countdown timer
757
  function updateCountdown() {
758
+ // This would be replaced with actual countdown logic
759
+ console.log("Updating countdown...");
760
  }
761
 
762
  // Initialize
763
+ updateCountdown();
764
+ setInterval(updateCountdown, 1000);
 
 
765
  </script>
766
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/tournament-ui-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
767
  </html>