Hugging Face's logo

Spaces:
ProjectGenesis
/
tournament-ui-redesign
Running

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

Generate a mobile-first 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 +552 -554
index.html CHANGED
@@ -3,719 +3,717 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NEON DICE | Tournament Arena</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  colors: {
15
- 'neon-yellow': '#ffd300',
16
- 'neon-orange': '#ff6800',
17
- 'dark-bg': '#0c0e1d',
18
- 'dark-card': '#121729',
19
- 'glass': 'rgba(18, 23, 41, 0.75)'
 
20
  },
21
- fontFamily: {
22
- 'sans': ['Rajdhani', 'sans-serif'],
 
23
  }
24
  }
25
  }
26
  }
27
  </script>
28
  <style>
29
- :root {
30
- --neon-glow: 0 0 15px rgba(255, 211, 0, 0.8),
31
- 0 0 30px rgba(255, 104, 0, 0.4);
 
32
  }
33
 
34
  body {
35
- background: radial-gradient(ellipse at top, #0c0e1d, #04060f);
36
- min-height: 100vh;
37
- color: #e0e0e0;
 
38
  }
39
 
40
- .neon-border {
41
- border: 1px solid rgba(255, 211, 0, 0.3);
42
- box-shadow: inset 0 0 10px rgba(255, 211, 0, 0.2),
43
- var(--neon-glow);
 
 
44
  }
45
 
46
  .neon-glow {
47
- box-shadow: var(--neon-glow);
48
  }
49
 
50
- .neon-text {
51
- text-shadow: 0 0 10px rgba(255, 211, 0, 0.7),
52
- 0 0 20px rgba(255, 104, 0, 0.5);
 
 
 
53
  }
54
 
55
- .glass-card {
56
- background: rgba(18, 23, 41, 0.65);
57
- backdrop-filter: blur(14px);
58
- -webkit-backdrop-filter: blur(14px);
 
 
 
 
 
 
 
 
59
  border-radius: 12px;
 
 
60
  }
61
 
62
- .tournament-card:hover {
63
- transform: translateY(-5px) scale(1.03);
 
64
  }
65
 
66
- .dice {
67
- animation: rotate 15s infinite linear;
68
  }
69
 
70
- .glow-button {
71
- position: relative;
72
- overflow: hidden;
73
- transition: all 0.3s;
74
  }
75
 
76
- .glow-button::before {
77
- content: '';
78
- position: absolute;
79
- top: -50%;
80
- left: -60%;
81
- width: 20px;
82
- height: 200%;
83
- background: rgba(255,255,255,0.3);
84
- transform: rotate(30deg);
85
- transition: all 0.8s;
86
  }
87
 
88
- .glow-button:hover::before {
89
- left: 120%;
 
90
  }
91
 
92
- @keyframes rotate {
93
- 0% { transform: rotate(0); }
94
- 100% { transform: rotate(360deg); }
 
95
  }
96
 
97
- @keyframes pulse {
98
- 0% { box-shadow: 0 0 0 0 rgba(255, 211, 0, 0.6); }
99
- 70% { box-shadow: 0 0 0 12px rgba(255, 211, 0, 0); }
100
- 100% { box-shadow: 0 0 0 0 rgba(255, 211, 0, 0); }
101
  }
102
 
103
- .blink {
104
- animation: blink 1.5s ease-in-out infinite;
 
 
 
 
 
 
 
105
  }
106
 
107
- @keyframes blink {
108
- 0%, 100% { opacity: 1; }
109
- 50% { opacity: 0.5; }
110
  }
111
 
112
- .leaderboard-item:nth-child(1) .rank {
113
- background: linear-gradient(to bottom, #ffd300, #e87700);
114
- color: #121729;
 
 
 
 
 
 
 
115
  }
116
 
117
- .card-hover {
118
- transition: all 0.3s ease;
 
 
119
  }
120
 
121
- .card-hover:hover {
122
- box-shadow: 0 0 20px rgba(255, 104, 0, 0.8);
 
 
123
  }
124
 
125
- #modal-overlay {
126
- opacity: 0;
127
- pointer-events: none;
128
- transition: opacity 0.3s ease-in-out;
129
  }
130
 
131
- #modal-overlay.active {
132
- opacity: 1;
133
- pointer-events: all;
134
  }
135
 
136
- .carousel-item {
137
- transform-style: preserve-3d;
138
- transition: transform 0.5s;
139
- min-width: 250px;
140
  }
141
 
142
- .carousel-inner {
143
- scroll-snap-type: x mandatory;
144
- scroll-behavior: smooth;
 
 
145
  }
146
 
147
- .circle-bg {
148
- background: radial-gradient(circle, rgba(255,104,0,0.15) 0%, rgba(18,23,41,0) 70%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  }
150
  </style>
151
  </head>
152
- <body class="font-sans overflow-x-hidden">
153
- <!-- Header Navigation -->
154
- <header class="sticky top-0 z-50 bg-dark-card border-b border-neon-orange/30">
155
- <div class="container mx-auto px-4">
156
- <div class="flex justify-between items-center py-4">
157
- <div class="flex items-center space-x-2">
158
- <div class="dice w-8 h-8 rounded-lg bg-gradient-to-br from-neon-yellow to-neon-orange transform rotate-45 flex items-center justify-center">
159
- <div class="w-1 h-1 rounded-full bg-dark-bg"></div>
160
- </div>
161
- <h1 class="text-xl font-bold text-neon-yellow tracking-wider">NEON<span class="text-white">DICE</span></h1>
162
  </div>
163
-
164
- <nav class="hidden md:flex space-x-8 text-lg font-semibold">
165
- <a href="#" class="text-white hover:text-neon-yellow transition duration-300">Tournaments</a>
166
- <a href="#" class="text-white hover:text-neon-yellow transition duration-300">Leaderboards</a>
167
- <a href="#" class="text-white hover:text-neon-yellow transition duration-300">How to Play</a>
168
- <a href="#" class="text-white hover:text-neon-yellow transition duration-300">VIP Club</a>
169
- </nav>
170
-
171
- <div class="flex items-center space-x-4">
172
- <div class="flex items-center space-x-2">
173
- <i class="fas fa-coins text-neon-yellow"></i>
174
- <span class="text-white font-bold">12,450</span>
175
- </div>
176
- <div class="avatar w-10 h-10 rounded-full glass-card flex items-center justify-center text-neon-yellow border border-neon-yellow/20">
177
- <i class="fas fa-user"></i>
178
- </div>
179
- <button class="md:hidden text-neon-yellow">
180
- <i class="fas fa-bars text-xl"></i>
181
- </button>
182
  </div>
183
  </div>
184
  </div>
185
  </header>
186
 
187
  <!-- Main Content -->
188
- <main class="container mx-auto px-4 py-8">
189
  <!-- Current Tournament Banner -->
190
- <section class="mb-16">
191
- <div class="relative glass-card neon-border rounded-xl overflow-hidden">
192
- <div class="absolute inset-0 circle-bg" style="top: -30%; left: 50%;"></div>
193
- <div class="p-8 relative z-10 md:p-12">
194
- <div class="flex flex-col md:flex-row justify-between gap-8">
195
- <div class="flex-1">
196
- <div class="inline-block px-4 py-1 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full mb-4">
197
- <span class="text-dark-bg font-bold uppercase text-sm tracking-wider">Live Now</span>
198
- </div>
199
- <h2 class="text-3xl md:text-5xl font-bold mb-4 neon-text">Mega Fortune Clash</h2>
200
- <p class="text-xl mb-6">Compete for a prize pool of <span class="font-bold text-neon-yellow">$250,000</span> and exclusive rewards!</p>
201
-
202
- <div class="mb-8">
203
- <div class="mb-4 flex items-center">
204
- <div class="h-1 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full flex-1"></div>
205
- <span class="ml-4 font-bold">72% Filled</span>
206
- </div>
207
- <div class="flex justify-between text-sm">
208
- <span>Entry: $10</span>
209
- <span>150/200 Players</span>
210
- <span>Registration closes in</span>
211
- </div>
212
- </div>
213
-
214
- <div class="mb-8 flex items-center">
215
- <div class="mr-8">
216
- <div class="text-xs text-neutral-400">Prize Pool</div>
217
- <div class="text-2xl font-bold text-neon-yellow">$250,000</div>
218
- </div>
219
- <div>
220
- <div class="text-xs text-neutral-400">Your Rank</div>
221
- <div class="text-2xl font-bold">#36</div>
222
- </div>
223
- </div>
224
-
225
- <div class="flex flex-wrap gap-4">
226
- <button class="glow-button bg-gradient-to-r from-neon-orange to-neon-yellow hover:from-yellow-600 hover:to-orange-600 text-dark-bg font-bold py-3 px-6 rounded-lg">
227
- JOIN TOURNAMENT <i class="ml-2 fas fa-play"></i>
228
- </button>
229
- <button class="glass-card neon-border text-neon-yellow hover:bg-neon-yellow/10 font-bold py-3 px-6 rounded-lg">
230
- VIEW DETAILS
231
- </button>
232
- </div>
233
  </div>
234
-
235
- <div class="flex flex-col items-center justify-center">
236
- <div class="relative">
237
- <div class="animate-pulse w-48 h-48 md:w-64 md:h-64 rounded-full bg-gradient-to-br from-neon-yellow/10 to-neon-orange/10 border border-neon-yellow/20 flex items-center justify-center">
238
- <div class="w-40 h-40 md:w-56 md:h-56 rounded-full bg-gradient-to-br from-neon-yellow/15 to-neon-orange/15 border border-neon-yellow/20 flex items-center justify-center">
239
- <div class="text-4xl font-bold blink text-neon-yellow">
240
- 04:18:33
241
- </div>
242
- </div>
243
- </div>
244
- <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-dark-card px-4 py-2 rounded-full border border-neon-orange/30">
245
- <span class="text-neon-yellow">Time Remaining</span>
246
- </div>
247
- </div>
248
  </div>
249
  </div>
250
  </div>
 
 
 
 
251
  </div>
252
  </section>
253
-
254
- <!-- Tournament Carousel -->
255
- <section class="mb-16">
256
- <div class="flex justify-between items-center mb-6">
257
- <h2 class="text-2xl font-bold text-white">Ongoing Tournaments</h2>
258
- <div>
259
- <button class="glass-card neon-border text-neon-yellow hover:bg-neon-yellow/10 w-10 h-10 rounded-full mr-2">
260
- <i class="fas fa-chevron-left"></i>
261
- </button>
262
- <button class="glass-card neon-border text-neon-yellow hover:bg-neon-yellow/10 w-10 h-10 rounded-full">
263
- <i class="fas fa-chevron-right"></i>
264
- </button>
265
- </div>
266
- </div>
267
 
268
- <div class="carousel-inner flex gap-6 py-4 overflow-x-auto pb-6" style="scroll-snap-type: x mandatory;">
269
- <!-- Item 1 -->
270
- <div class="glass-card neon-border carousel-item scroll-snap-align:center flex-shrink-0 rounded-xl overflow-hidden w-72 card-hover">
271
- <div class="p-6">
272
- <div class="flex justify-between mb-4">
273
- <span class="px-3 py-1 bg-opacity-20 bg-red-700 rounded-full text-sm text-red-300">High Roller</span>
274
- <span class="bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full py-0.5 px-3 text-dark-bg font-bold text-sm">Live</span>
275
  </div>
276
- <h3 class="text-xl font-bold mb-2">Blackjack Masters</h3>
277
- <div class="mb-4">
278
- <div class="h-2 bg-dark-card rounded-full mb-1">
279
- <div class="h-2 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full" style="width: 45%"></div>
280
- </div>
281
- <div class="text-xs">85/200 Players</div>
282
  </div>
283
- <div class="text-lg text-neon-yellow font-bold mb-4">$120,000</div>
284
- <button class="glass-card neon-border text-neon-yellow hover:bg-neon-yellow/10 w-full py-2 rounded-lg transition">
285
- Register Now
286
- </button>
287
  </div>
288
  </div>
289
 
290
- <!-- Item 2 -->
291
- <div class="glass-card neon-border carousel-item scroll-snap-align:center flex-shrink-0 rounded-xl overflow-hidden w-72 card-hover">
292
- <div class="p-6">
293
- <div class="flex justify-between mb-4">
294
- <span class="px-3 py-1 bg-opacity-20 bg-yellow-700 rounded-full text-sm text-yellow-300">Beginner</span>
295
- <span class="px-3 py-0.5 bg-white/5 rounded-full border border-white/10 text-sm">Starting Soon</span>
296
  </div>
297
- <h3 class="text-xl font-bold mb-2">Lucky Spins</h3>
298
- <div class="mb-4">
299
- <div class="h-2 bg-dark-card rounded-full mb-1">
300
- <div class="h-2 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full" style="width: 85%"></div>
301
- </div>
302
- <div class="text-xs">170/200 Players</div>
303
  </div>
304
- <div class="text-lg text-neon-yellow font-bold mb-4">$75,000</div>
305
- <button class="glass-card neon-border text-neon-yellow hover:bg-neon-yellow/10 w-full py-2 rounded-lg transition">
306
- Register Now
307
- </button>
308
  </div>
309
  </div>
310
 
311
- <!-- Item 3 -->
312
- <div class="glass-card neon-border carousel-item scroll-snap-align:center flex-shrink-0 rounded-xl overflow-hidden w-72 card-hover">
313
- <div class="p-6">
314
- <div class="flex justify-between mb-4">
315
- <span class="px-3 py-1 bg-opacity-20 bg-blue-700 rounded-full text-sm text-blue-300">Slot</span>
316
- <span class="bg-gradient-to-br from-purple-500 to-blue-400 rounded-full py-0.5 px-3 text-dark-bg font-bold text-sm">VIP</span>
317
  </div>
318
- <h3 class="text-xl font-bold mb-2">Diamond Slots Showdown</h3>
319
- <div class="mb-4">
320
- <div class="h-2 bg-dark-card rounded-full mb-1">
321
- <div class="h-2 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full" style="width: 22%"></div>
322
- </div>
323
- <div class="text-xs">44/200 Players</div>
324
  </div>
325
- <div class="text-lg text-neon-yellow font-bold mb-4">$300,000</div>
326
- <button class="glass-card neon-border text-neon-yellow hover:bg-neon-yellow/10 w-full py-2 rounded-lg transition">
327
- Register Now
328
- </button>
329
  </div>
330
  </div>
331
 
332
- <!-- Item 4 -->
333
- <div class="glass-card neon-border carousel-item scroll-snap-align:center flex-shrink-0 rounded-xl overflow-hidden w-72 card-hover">
334
- <div class="p-6">
335
- <div class="flex justify-between mb-4">
336
- <span class="px-3 py-1 bg-opacity-20 bg-green-700 rounded-full text-sm text-green-300">Tournament</span>
337
- <span class="px-3 py-0.5 bg-white/5 rounded-full border border-white/10 text-sm">Completed</span>
338
  </div>
339
- <h3 class="text-xl font-bold mb-2">Roulette Royale</h3>
340
- <div class="mb-4">
341
- <div class="h-2 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full"></div>
342
- <div class="text-xs text-gray-500">Tournament Ended</div>
343
  </div>
344
- <div class="text-lg text-gray-400 font-bold mb-4">$210,000</div>
345
- <button class="glass-card neon-border text-gray-400 w-full py-2 rounded-lg cursor-not-allowed" disabled>
346
- 200/200 Players
347
- </button>
348
  </div>
349
  </div>
350
  </div>
 
 
 
 
 
 
 
 
 
 
351
  </section>
352
-
353
- <!-- User Stats & Leaderboard -->
354
- <section class="flex flex-col lg:flex-row gap-8 mb-16">
355
- <!-- User Stats -->
356
- <div class="glass-card neon-border rounded-xl p-6 w-full lg:w-2/5">
357
- <h2 class="text-xl font-bold mb-6 text-white">My Tournament Stats</h2>
358
-
359
- <div class="mb-8">
360
- <div class="flex items-center justify-between mb-4">
361
- <h3 class="font-semibold text-neon-yellow">Current Position</h3>
362
- <span class="bg-neon-yellow/10 px-3 py-1 rounded-full">#36 of 150</span>
363
- </div>
364
-
365
- <div class="flex justify-center mb-8">
366
- <div class="relative">
367
- <div class="w-32 h-32 rounded-full border-4 border-neon-orange/30 flex items-center justify-center">
368
- <div class="text-2xl font-bold text-neon-yellow">TOP <span class="block text-3xl">24%</span></div>
369
- </div>
370
- <div class="absolute top-0 left-0 w-32 h-32 rounded-full border-t-4 border-r-4 border-b-4 border-neon-yellow" style="clip-path: polygon(50% 50%, 0 0, 0 50%); transform: rotate(87deg);"></div>
371
- </div>
372
- </div>
373
-
374
- <div class="grid grid-cols-3 gap-4 mb-8">
375
- <div class="glass-card neon-border rounded-lg p-3 text-center">
376
- <div class="text-2xl font-bold text-neon-yellow">37</div>
377
- <div class="text-xs">Wins</div>
378
- </div>
379
- <div class="glass-card neon-border rounded-lg p-3 text-center">
380
- <div class="text-2xl font-bold text-neon-yellow">$6,850</div>
381
- <div class="text-xs">Won</div>
382
- </div>
383
- <div class="glass-card neon-border rounded-lg p-3 text-center">
384
- <div class="text-2xl font-bold text-neon-yellow">92</div>
385
- <div class="text-xs">Played</div>
386
- </div>
387
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
388
  </div>
389
 
390
- <div>
391
- <h3 class="font-semibold text-neon-yellow mb-3">Recent Tournaments</h3>
392
- <div class="space-y-3">
393
- <div class="flex items-center justify-between border-b border-neon-orange/10 pb-2 text-sm">
394
- <div>
395
- <div>Blackjack Event</div>
396
- <div class="text-xs text-gray-500">20 min ago</div>
397
  </div>
398
- <div class="text-neon-yellow">+$420</div>
399
- </div>
400
- <div class="flex items-center justify-between border-b border-neon-orange/10 pb-2 text-sm">
401
  <div>
402
- <div>Roulette Challenge</div>
403
- <div class="text-xs text-gray-500">1 hour ago</div>
404
  </div>
405
- <div class="text-gray-500">-$100</div>
406
  </div>
407
- <div class="flex items-center justify-between pb-2 text-sm">
408
- <div>
409
- <div>Slots Showdown</div>
410
- <div class="text-xs text-gray-500">3 hours ago</div>
411
- </div>
412
- <div class="text-neon-yellow">+$1,150</div>
413
  </div>
414
  </div>
415
  </div>
416
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
 
418
- <!-- Leaderboard Section -->
419
- <div class="glass-card neon-border rounded-xl p-6 w-full lg:w-3/5">
420
- <h2 class="text-xl font-bold mb-6 text-white">Top Players Leaderboard</h2>
421
-
422
- <div class="mb-6">
423
- <div class="grid grid-cols-12 py-3 text-xs uppercase tracking-wider text-gray-500">
424
- <div class="col-span-1">#</div>
425
- <div class="col-span-5">Player</div>
426
- <div class="col-span-3">Score</div>
427
- <div class="col-span-3">Winnings</div>
428
- </div>
429
-
430
- <div class="space-y-2">
431
- <!-- Leaderboard Item 1 -->
432
- <div class="leaderboard-item glass-card neon-border rounded-lg p-3">
433
- <div class="grid grid-cols-12 items-center">
434
- <div class="col-span-1">
435
- <div class="rank w-8 h-8 rounded-full font-bold flex items-center justify-center bg-gradient-to-b from-yellow-300 to-yellow-500">
436
- 1
437
- </div>
438
- </div>
439
- <div class="col-span-5 font-semibold flex items-center">
440
- <div class="w-8 h-8 rounded-full bg-white/5 mr-3 flex items-center justify-center">
441
- <i class="fas fa-crown text-neon-yellow"></i>
442
- </div>
443
- <div>CasinoKing77</div>
444
- </div>
445
- <div class="col-span-3 font-bold text-xl">9,850</div>
446
- <div class="col-span-3 text-neon-yellow font-bold text-xl">$12,500</div>
447
  </div>
448
- </div>
449
-
450
- <!-- Leaderboard Item 2 -->
451
- <div class="leaderboard-item glass-card neon-border rounded-lg p-3">
452
- <div class="grid grid-cols-12 items-center">
453
- <div class="col-span-1">
454
- <div class="rank w-8 h-8 rounded-full font-bold flex items-center justify-center bg-gradient-to-b from-gray-400 to-gray-600">
455
- 2
456
- </div>
457
- </div>
458
- <div class="col-span-5 font-semibold flex items-center">
459
- <div class="w-8 h-8 rounded-full bg-white/5 mr-3 flex items-center justify-center text-sm bg-gradient-to-br from-blue-500 to-purple-500">
460
- JR
461
- </div>
462
- <div>JackpotRider</div>
463
- </div>
464
- <div class="col-span-3 font-bold text-xl">9,210</div>
465
- <div class="col-span-3 text-neon-yellow font-bold text-xl">$9,800</div>
466
- </div>
467
- </div>
468
-
469
- <!-- Leaderboard Item 3 -->
470
- <div class="leaderboard-item glass-card neon-border rounded-lg p-3">
471
- <div class="grid grid-cols-12 items-center">
472
- <div class="col-span-1">
473
- <div class="rank w-8 h-8 rounded-full font-bold flex items-center justify-center bg-gradient-to-b from-amber-700 to-amber-600">
474
- 3
475
- </div>
476
  </div>
477
- <div class="col-span-5 font-semibold flex items-center">
478
- <div class="w-8 h-8 rounded-full bg-white/5 mr-3 flex items-center justify-center">
479
- <i class="fas fa-dice text-green-400"></i>
480
- </div>
481
- <div>LuckyDice99</div>
482
  </div>
483
- <div class="col-span-3 font-bold text-xl">8,750</div>
484
- <div class="col-span-3 text-neon-yellow font-bold text-xl">$8,125</div>
485
  </div>
 
 
 
486
  </div>
487
-
488
- <!-- Items 4-10 -->
489
- <div class="text-sm">
490
- <!-- Item 4 -->
491
- <div class="grid grid-cols-12 py-2 border-b border-neon-orange/10">
492
- <div class="col-span-1">4</div>
493
- <div class="col-span-5">HighRoller_X</div>
494
- <div class="col-span-3 font-bold">8,425</div>
495
- <div class="col-span-3 text-neon-yellow font-bold">$6,750</div>
496
- </div>
497
-
498
- <!-- Item 5 -->
499
- <div class="grid grid-cols-12 py-2 border-b border-neon-orange/10">
500
- <div class="col-span-1">5</div>
501
- <div class="col-span-5">GoldenCard</div>
502
- <div class="col-span-3 font-bold">8,120</div>
503
- <div class="col-span-3 text-neon-yellow font-bold">$5,250</div>
504
- </div>
505
-
506
- <!-- Item 6 -->
507
- <div class="grid grid-cols-12 py-2 border-b border-neon-orange/10">
508
- <div class="col-span-1">6</div>
509
- <div class="col-span-5">SpinMaster</div>
510
- <div class="col-span-3 font-bold">7,900</div>
511
- <div class="col-span-3 text-neon-yellow font-bold">$4,850</div>
512
- </div>
513
-
514
- <!-- Item 7 -->
515
- <div class="grid grid-cols-12 py-2 border-b border-neon-orange/10">
516
- <div class="col-span-1">7</div>
517
- <div class="col-span-5">BetQueen</div>
518
- <div class="col-span-3 font-bold">7,550</div>
519
- <div class="col-span-3 text-neon-yellow font-bold">$4,125</div>
520
- </div>
521
-
522
- <!-- Item 8 -->
523
- <div class="grid grid-cols-12 py-2 border-b border-neon-orange/10">
524
- <div class="col-span-1">8</div>
525
- <div class="col-span-5">FortuneFinder</div>
526
- <div class="col-span-3 font-bold">7,225</div>
527
- <div class="col-span-3 text-neon-yellow font-bold">$3,750</div>
528
- </div>
529
-
530
- <!-- Item 9 -->
531
- <div class="grid grid-cols-12 py-2 border-b border-neon-orange/10">
532
- <div class="col-span-1">9</div>
533
- <div class="col-span-5">RoulettePro</div>
534
- <div class="col-span-3 font-bold">7,050</div>
535
- <div class="col-span-3 text-neon-yellow font-bold">$3,225</div>
536
- </div>
537
-
538
- <!-- Item 10 -->
539
- <div class="grid grid-cols-12 py-2">
540
- <div class="col-span-1">10</div>
541
- <div class="col-span-5">SlotWhisper</div>
542
- <div class="col-span-3 font-bold">6,850</div>
543
- <div class="col-span-3 text-neon-yellow font-bold">$2,950</div>
544
  </div>
545
-
546
- <!-- You -->
547
- <div class="grid grid-cols-12 py-2 mt-4 bg-dark-card rounded-lg neon-border">
548
- <div class="col-span-1">
549
- <div class="bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg w-6 h-6 rounded-full flex items-center justify-center text-xs">
550
- 36
551
- </div>
552
  </div>
553
- <div class="col-span-5">
554
- <span class="text-neon-yellow font-bold">You</span>
 
555
  </div>
556
- <div class="col-span-3 font-bold">4,225</div>
557
- <div class="col-span-3 text-neon-yellow font-bold">$1,420</div>
558
  </div>
 
 
 
559
  </div>
560
  </div>
561
- </div>
562
- </div>
563
- </section>
564
-
565
- <!-- Share & Invite Section -->
566
- <section class="glass-card neon-border rounded-xl p-8 mb-16 bg-gradient-to-br from-dark-card/50 to-amber-900/20">
567
- <div class="flex flex-col md:flex-row gap-8 items-center">
568
- <div class="flex-1 text-center md:text-left">
569
- <h2 class="text-2xl font-bold mb-3 text-white">Invite Friends & Earn Rewards!</h2>
570
- <p class="mb-4">Get exclusive bonuses for every friend you invite that signs up and plays in tournaments!</p>
571
-
572
- <ul class="mb-6 space-y-2 text-left inline-block">
573
- <li class="flex items-center">
574
- <i class="fas fa-check-circle text-green-400 mr-2"></i>
575
- <span>Earn <span class="font-bold text-neon-yellow">$10</span> for each friend that registers</span>
576
- </li>
577
- <li class="flex items-center">
578
- <i class="fas fa-check-circle text-green-400 mr-2"></i>
579
- <span>Get <span class="font-bold text-neon-yellow">15%</span> from their first tournament entry</span>
580
- </li>
581
- <li class="flex items-center">
582
- <i class="fas fa-check-circle text-green-400 mr-2"></i>
583
- <span>Unlock exclusive referral rewards</span>
584
- </li>
585
- </ul>
586
 
587
- <button class="glow-button bg-gradient-to-r from-neon-orange to-neon-yellow hover:from-yellow-600 hover:to-orange-600 text-dark-bg font-bold py-3 px-8 rounded-lg inline-flex items-center">
588
- INVITE FRIENDS <i class="fas fa-share ml-2"></i>
589
- </button>
590
- </div>
591
- <div class="flex-1 flex justify-center">
592
- <div class="relative">
593
- <div class="w-48 h-48 rounded-lg neon-glow glass-card border-neon-orange flex items-center justify-center transform rotate-6">
594
- <div class="text-xl font-bold text-neon-yellow">$10 + BONUS</div>
595
- </div>
596
- <div class="absolute -top-5 -right-5 w-32 h-32 rounded-lg glass-card border-neon-orange flex flex-col items-center justify-center transform -rotate-6">
597
- <div class="text-xl font-bold text-neon-yellow text-center">
598
- +15% <span class="block text-sm">Reward</span>
599
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
600
  </div>
601
  </div>
602
  </div>
603
  </div>
604
  </section>
605
-
606
  <!-- Hall of Fame -->
607
- <section class="mb-16">
608
- <h2 class="text-2xl font-bold mb-8 text-white text-center">Hall of Fame</h2>
 
 
609
 
610
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
611
- <!-- Player 1 -->
612
- <div class="glass-card neon-border rounded-xl overflow-hidden">
613
- <div class="relative">
614
- <div class="h-44 bg-gradient-to-b from-black to-orange-800"></div>
615
- <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 w-20 h-20 rounded-full border-4 border-dark-card overflow-hidden">
616
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="VIP Player" class="w-full h-full object-cover">
 
 
 
 
 
 
617
  </div>
618
  </div>
619
- <div class="pt-12 pb-6 px-6 text-center">
620
- <h3 class="text-xl font-bold">GoldenTouch99</h3>
621
- <div class="text-neon-yellow mb-4">Tournaments Won: 12</div>
622
- <p class="text-gray-400 text-sm">
623
- Won the Grand Jackpot Tournament 3 times consecutively last season
624
- </p>
625
- <div class="flex justify-center mt-4 space-x-2">
626
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Slots</div>
627
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Roulette</div>
628
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Poker</div>
629
  </div>
630
  </div>
631
  </div>
632
 
633
- <!-- Player 2 -->
634
- <div class="glass-card neon-border rounded-xl overflow-hidden">
635
- <div class="relative">
636
- <div class="h-44 bg-gradient-to-b from-black to-indigo-900"></div>
637
- <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 w-20 h-20 rounded-full border-4 border-dark-card overflow-hidden">
638
- <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="VIP Player" class="w-full h-full object-cover">
 
 
 
 
 
 
639
  </div>
640
  </div>
641
- <div class="pt-12 pb-6 px-6 text-center">
642
- <h3 class="text-xl font-bold">AceQueen</h3>
643
- <div class="text-neon-yellow mb-4">Tournaments Won: 8</div>
644
- <p class="text-gray-400 text-sm">
645
- Blackjack champion with highest ROI percentage in platform history
646
- </p>
647
- <div class="flex justify-center mt-4 space-x-2">
648
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Blackjack</div>
649
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Baccarat</div>
650
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Poker</div>
651
  </div>
652
  </div>
653
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
654
 
655
- <!-- Player 3 -->
656
- <div class="glass-card neon-border rounded-xl overflow-hidden">
657
- <div class="relative">
658
- <div class="h-44 bg-gradient-to-b from-black to-yellow-800"></div>
659
- <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 w-20 h-20 rounded-full border-4 border-dark-card overflow-hidden">
660
- <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="VIP Player" class="w-full h-full object-cover">
661
  </div>
662
- </div>
663
- <div class="pt-12 pb-6 px-6 text-center">
664
- <h3 class="text-xl font-bold">HighRoller007</h3>
665
- <div class="text-neon-yellow mb-4">Tournaments Won: 6</div>
666
- <p class="text-gray-400 text-sm">
667
- Largest single tournament win of $142,000 in Mega Fortune tournament
668
- </p>
669
- <div class="flex justify-center mt-4 space-x-2">
670
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Roulette</div>
671
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Poker</div>
672
- <div class="bg-dark-card text-xs px-2 py-1 rounded">Baccarat</div>
673
  </div>
674
  </div>
675
  </div>
 
 
 
 
676
  </div>
677
  </section>
678
  </main>
679
 
680
- <!-- Footer -->
681
- <footer class="bg-dark-card border-t border-neon-orange/30 py-12">
682
- <div class="container mx-auto px-4">
683
- <div class="flex flex-col md:flex-row justify-between items-center">
684
- <div class="mb-6 md:mb-0">
685
- <div class="flex items-center space-x-2">
686
- <div class="dice w-8 h-8 rounded-lg bg-gradient-to-br from-neon-yellow to-neon-orange transform rotate-45 flex items-center justify-center">
687
- <div class="w-1 h-1 rounded-full bg-dark-bg"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
688
  </div>
689
- <h1 class="text-xl font-bold text-neon-yellow tracking-wider">NEON<span class="text-white">DICE</span></h1>
690
  </div>
691
- <p class="text-gray-500 text-sm mt-2">The premier online casino tournament platform</p>
692
- </div>
693
-
694
- <div class="flex flex-col items-center md:items-end">
695
- <div class="flex space-x-4 mb-4">
696
- <a href="#" class="glass-card neon-border text-white w-10 h-10 rounded-full flex items-center justify-center">
697
  <i class="fab fa-facebook-f"></i>
698
- </a>
699
- <a href="#" class="glass-card neon-border text-white w-10 h-10 rounded-full flex items-center justify-center">
700
- <i class="fab fa-twitter"></i>
701
- </a>
702
- <a href="#" class="glass-card neon-border text-white w-10 h-10 rounded-full flex items-center justify-center">
703
- <i class="fab fa-instagram"></i>
704
- </a>
 
 
 
 
 
 
 
 
 
705
  </div>
706
- <p class="text-gray-600 text-sm">© 2023 NeonDice. All rights reserved.</p>
707
  </div>
708
  </div>
709
  </div>
710
- </footer>
711
-
712
  <script>
713
- // Simple timer animation
714
- const timerElement = document.querySelector('.blink');
715
- setInterval(() => {
716
- timerElement.classList.toggle('text-neon-yellow');
717
- timerElement.classList.toggle('text-orange-400');
718
- }, 1000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
719
  </script>
720
  <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>
721
  </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 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>
682
  </div>
683
+ </div>
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
+ }
704
+ });
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>