Hugging Face's logo

Spaces:
ProjectGenesis
/
tournament-ui-redesign
Running

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

Generate an 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 +692 -725
index.html CHANGED
@@ -1,767 +1,734 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
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>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
714
  </div>
715
- </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
- }
754
- });
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>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Premium Casino Tournaments</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: "#FFD700",
15
+ secondary: "#FFA500",
16
+ dark: "#0C0C0C",
17
+ glass: "rgba(20, 20, 20, 0.65)"
18
+ },
19
+ fontFamily: {
20
+ poppins: ['Poppins', 'sans-serif']
21
+ }
 
 
 
 
 
 
 
22
  }
23
+ }
24
+ }
25
+ </script>
26
+ <style type="text/css">
27
+ * {
28
+ margin: 0;
29
+ padding: 0;
30
+ box-sizing: border-box;
31
+ }
32
+
33
+ body {
34
+ background-color: #0C0C0C;
35
+ background-image: radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.05) 0%, transparent 40%);
36
+ color: white;
37
+ font-family: 'Poppins', sans-serif;
38
+ min-height: 100vh;
39
+ overflow-x: hidden;
40
+ }
41
+
42
+ /* Glassmorphism effect */
43
+ .glass-card {
44
+ background: rgba(20, 20, 20, 0.65);
45
+ backdrop-filter: blur(14px);
46
+ -webkit-backdrop-filter: blur(14px);
47
+ border-radius: 24px;
48
+ border: 1px solid rgba(255, 215, 0, 0.15);
49
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
50
+ }
51
+
52
+ /* Glow effect */
53
+ .glow-border {
54
+ position: relative;
55
+ }
56
+
57
+ .glow-border::after {
58
+ content: '';
59
+ position: absolute;
60
+ top: 0;
61
+ left: 0;
62
+ right: 0;
63
+ bottom: 0;
64
+ border-radius: inherit;
65
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
66
+ opacity: 0;
67
+ z-index: -1;
68
+ transition: opacity 0.3s ease-in-out;
69
+ }
70
+
71
+ .glow-border:hover::after {
72
+ opacity: 1;
73
+ }
74
+
75
+ .glow {
76
+ text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
77
+ }
78
+
79
+ /* Custom buttons */
80
+ .cta-button {
81
+ background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
82
+ border-radius: 9999px;
83
+ color: #0C0C0C;
84
+ font-weight: 700;
85
+ position: relative;
86
+ overflow: hidden;
87
+ transition: all 0.3s;
88
+ }
89
+
90
+ .cta-button:hover {
91
+ transform: scale(1.05);
92
+ box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
93
+ }
94
+
95
+ /* Animated timer */
96
+ @keyframes pulse {
97
+ 0% { transform: scale(0.95); }
98
+ 50% { transform: scale(1.05); }
99
+ 100% { transform: scale(0.95); }
100
+ }
101
+
102
+ .pulse-animation {
103
+ animation: pulse 2s infinite;
104
+ }
105
+
106
+ /* Modal styling */
107
+ .modal-overlay {
108
+ position: fixed;
109
+ top: 0;
110
+ left: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ background-color: rgba(0, 0, 0, 0.8);
114
+ display: flex;
115
+ align-items: center;
116
+ justify-content: center;
117
+ z-index: 1000;
118
+ }
119
+
120
+ .modal-content {
121
+ max-height: 90vh;
122
+ overflow-y: auto;
123
+ }
124
+
125
+ /* Card hover effect */
126
+ .tournament-card:hover {
127
+ transform: translateY(-8px);
128
+ transition: all 0.3s ease;
129
+ }
130
+
131
+ /* Progress bar styling */
132
+ .progress-bar-bg {
133
+ height: 8px;
134
+ background: rgba(255, 255, 255, 0.1);
135
+ border-radius: 4px;
136
+ overflow: hidden;
137
+ }
138
+
139
+ .progress-bar-fill {
140
+ height: 100%;
141
+ background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
142
+ border-radius: 4px;
143
+ }
144
+ </style>
 
 
 
 
 
 
 
 
 
 
145
  </head>
146
+ <body class="font-poppins">
147
+ <div class="min-h-screen flex flex-col items-center">
148
+ <!-- Header -->
149
+ <div class="w-full max-w-7xl py-8 flex justify-between items-center px-6">
150
+ <div class="flex items-center space-x-2">
151
+ <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-dark font-bold text-xl">CL</div>
152
+ <h1 class="text-3xl font-bold">Crypto<span class="text-primary">Luck</span></h1>
153
+ </div>
154
+ <div class="flex space-x-6">
155
+ <button class="text-white px-6 py-2 rounded-full bg-transparent hover:bg-glass border border-primary/30 transition-all">
156
+ Tournaments
157
+ </button>
158
+ <button class="text-white px-6 py-2 rounded-full bg-transparent hover:bg-glass border border-primary/30 transition-all">
159
+ Leaderboards
160
+ </button>
161
+ <button class="cta-button px-6 py-2 font-bold">
162
+ Deposit
163
+ </button>
164
+ </div>
165
+ <div class="flex items-center space-x-4">
166
+ <div class="px-4 py-2 glass-card rounded-full">
167
+ <div class="flex items-center">
168
+ <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse mr-2"></div>
169
+ <span class="font-medium">5,420</span>
170
+ <span class="text-primary ml-1">GC</span>
171
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
172
  </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Main content -->
177
+ <main class="w-full max-w-7xl px-4 mb-20">
178
+ <!-- Current Tournament Banner -->
179
+ <section class="glass-card p-8 mb-14 rounded-2xl relative overflow-hidden">
180
+ <span class="absolute top-0 right-0 bg-primary rounded-bl-2xl px-6 py-2 text-dark font-bold text-sm">
181
+ FREE ENTRY
182
+ </span>
183
+
184
+ <div class="flex flex-col md:flex-row justify-between items-center">
185
+ <div class="mb-8 md:mb-0 md:w-7/12">
186
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 glow">
187
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">Weekly Fortune Frenzy</span>
188
+ </h2>
189
+ <p class="text-xl mb-6">Compete against thousands for massive rewards!</p>
190
+ <div class="flex flex-wrap items-center gap-4 mb-6">
191
+ <div class="flex items-center">
192
+ <div class="text-4xl font-bold text-primary mr-2">$5,000</div>
193
+ <div>Prize Pool</div>
194
+ </div>
195
+ <div class="flex items-center">
196
+ <div class="text-2xl font-bold text-primary mr-2">1,250</div>
197
+ <div>Players</div>
198
+ </div>
199
  </div>
200
+ </div>
201
+
202
+ <div class="flex flex-col items-center w-full md:w-5/12">
203
+ <h3 class="text-xl font-bold mb-4">Tournament Ends In:</h3>
204
+ <div class="pulse-animation bg-gradient-to-br from-primary/10 to-transparent p-6 rounded-full mb-6">
205
+ <div class="flex gap-3 md:gap-6 text-center">
206
+ <div class="glass-card p-4 rounded-xl">
207
+ <div class="text-4xl font-bold text-primary" id="days">12</div>
208
+ <div class="text-sm uppercase">Days</div>
 
209
  </div>
210
+ <div class="glass-card p-4 rounded-xl">
211
+ <div class="text-4xl font-bold text-primary" id="hours">22</div>
212
+ <div class="text-sm uppercase">Hours</div>
 
 
 
213
  </div>
214
+ <div class="glass-card p-4 rounded-xl">
215
+ <div class="text-4xl font-bold text-primary" id="minutes">18</div>
216
+ <div class="text-sm uppercase">Mins</div>
217
  </div>
218
+ <div class="glass-card p-4 rounded-xl">
219
+ <div class="text-4xl font-bold text-primary" id="seconds">37</div>
220
+ <div class="text-sm uppercase">Secs</div>
221
  </div>
222
+ </div>
223
  </div>
224
+ <button class="cta-button px-8 py-4 text-xl font-bold">
225
+ JOIN TOURNAMENT
226
+ </button>
227
+ </div>
228
  </div>
229
+ </section>
230
+
231
+ <!-- User Stats Panel -->
232
+ <section class="mb-14">
233
+ <h2 class="text-2xl font-bold mb-6 glow">Your Tournament Status</h2>
234
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
235
+ <div class="glass-card p-6 rounded-xl glow-border flex items-center">
236
+ <div class="rounded-lg bg-primary/20 p-3 mr-4">
237
+ <div class="text-2xl font-bold">🏆</div>
238
  </div>
239
+ <div>
240
+ <div class="text-gray-300 text-sm">Current Rank</div>
241
+ <div class="text-2xl font-bold">#42</div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="glass-card p-6 rounded-xl glow-border flex items-center">
246
+ <div class="rounded-lg bg-primary/20 p-3 mr-4">
247
+ <div class="text-2xl font-bold">⭐</div>
248
+ </div>
249
+ <div>
250
+ <div class="text-gray-300 text-sm">Points</div>
251
+ <div class="text-2xl font-bold">4,850</div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="glass-card p-6 rounded-xl glow-border flex items-center">
256
+ <div class="rounded-lg bg-primary/20 p-3 mr-4">
257
+ <div class="text-2xl font-bold">🎮</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
  </div>
259
+ <div>
260
+ <div class="text-gray-300 text-sm">Games Played</div>
261
+ <div class="text-2xl font-bold">28</div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="glass-card p-6 rounded-xl glow-border flex items-center">
266
+ <div class="rounded-lg bg-primary/20 p-3 mr-4">
267
+ <div class="text-2xl font-bold">💰</div>
268
+ </div>
269
+ <div>
270
+ <div class="text-gray-300 text-sm">Estimated Prize</div>
271
+ <div class="text-2xl font-bold">$420</div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <div class="glass-card p-4 rounded-xl mt-6">
277
+ <div class="flex justify-between text-sm mb-2">
278
+ <span>Progress to Next Tier</span>
279
+ <span>Gold Tier (Top 25) - Rewards: $750</span>
280
+ </div>
281
+ <div class="progress-bar-bg">
282
+ <div class="progress-bar-fill" style="width: 75%"></div>
283
+ </div>
284
+ </div>
285
+ </section>
286
+
287
+ <!-- Leaderboard Module -->
288
+ <section class="glass-card p-6 mb-14 rounded-2xl">
289
+ <div class="flex justify-between items-center mb-6">
290
+ <h2 class="text-2xl font-bold glow">Global Leaderboard</h2>
291
+ <button class="px-4 py-2 rounded-full bg-primary/20 text-primary font-medium">View All</button>
292
+ </div>
293
+
294
+ <div class="overflow-x-auto">
295
+ <table class="w-full">
296
+ <thead>
297
+ <tr class="text-gray-400">
298
+ <th class="py-4 px-4 text-left">Rank</th>
299
+ <th class="py-4 px-4 text-left">Player</th>
300
+ <th class="py-4 px-4 text-left">Score</th>
301
+ <th class="py-4 px-4 text-left">Prize</th>
302
+ </tr>
303
+ </thead>
304
+ <tbody>
305
+ <tr class="bg-yellow-900/20">
306
+ <td class="py-4 px-4 font-bold text-yellow-400"><span class="bg-gradient-to-r from-yellow-500 to-primary text-transparent bg-clip-text">#1</span></td>
307
+ <td class="py-4 px-4 flex items-center">
308
+ <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold mr-3">JD</div>
309
+ <span class="font-bold">JohnDoe</span>
310
+ <span class="ml-2 bg-primary/10 text-primary px-2 py-1 rounded text-xs">Gold Tier</span>
311
+ </td>
312
+ <td class="py-4 px-4 font-bold text-yellow-300">12,450</td>
313
+ <td class="py-4 px-4 font-bold">$1,200</td>
314
+ </tr>
315
+
316
+ <tr class="bg-gray-900/20">
317
+ <td class="py-4 px-4 font-bold text-gray-400">#2</td>
318
+ <td class="py-4 px-4 flex items-center">
319
+ <div class="w-10 h-10 rounded-full bg-gray-400/10 flex items-center justify-center text-gray-400 font-bold mr-3">CS</div>
320
+ <span>CryptoStar</span>
321
+ </td>
322
+ <td class="py-4 px-4 font-bold">11,820</td>
323
+ <td class="py-4 px-4 font-bold">$900</td>
324
+ </tr>
325
+
326
+ <tr class="bg-amber-900/20">
327
+ <td class="py-4 px-4 font-bold text-amber-700">#3</td>
328
+ <td class="py-4 px-4 flex items-center">
329
+ <div class="w-10 h-10 rounded-full bg-amber-700/10 flex items-center justify-center text-amber-700 font-bold mr-3">LL</div>
330
+ <span>LuckyLuciano</span>
331
+ </td>
332
+ <td class="py-4 px-4 font-bold">10,990</td>
333
+ <td class="py-4 px-4 font-bold">$600</td>
334
+ </tr>
335
+
336
+ <!-- Players 4-10 -->
337
+ <tr>
338
+ <td class="py-4 px-4 font-bold">#4</td>
339
+ <td class="py-4 px-4 flex items-center">
340
+ <div class="w-10 h-10 rounded-full bg-gray-600/20 flex items-center justify-center text-gray-300 font-bold mr-3">DG</div>
341
+ <span>DiceGod</span>
342
+ </td>
343
+ <td class="py-4 px-4">10,450</td>
344
+ <td class="py-4 px-4">$450</td>
345
+ </tr>
346
+
347
+ <tr>
348
+ <td class="py-4 px-4 font-bold">#5</td>
349
+ <td class="py-4 px-4 flex items-center">
350
+ <div class="w-10 h-10 rounded-full bg-gray-600/20 flex items-center justify-center text-gray-300 font-bold mr-3">JJ</div>
351
+ <span>JokerJack</span>
352
+ </td>
353
+ <td class="py-4 px-4">9,850</td>
354
+ <td class="py-4 px-4">$350</td>
355
+ </tr>
356
+
357
+ <tr>
358
+ <td class="py-4 px-4 font-bold">#6</td>
359
+ <td class="py-4 px-4 flex items-center">
360
+ <div class="w-10 h-10 rounded-full bg-gray-600/20 flex items-center justify-center text-gray-300 font-bold mr-3">CB</div>
361
+ <span>CryptoBaron</span>
362
+ </td>
363
+ <td class="py-4 px-4">9,120</td>
364
+ <td class="py-4 px-4">$300</td>
365
+ </tr>
366
+
367
+ <!-- Current player highlighted -->
368
+ <tr class="bg-gradient-to-r from-primary/10 to-primary/5 border-l-4 border-primary">
369
+ <td class="py-4 px-4 font-bold text-primary">#42</td>
370
+ <td class="py-4 px-4 flex items-center">
371
+ <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold mr-3">CL</div>
372
+ <span class="text-primary font-bold">YourUsername</span>
373
+ </td>
374
+ <td class="py-4 px-4 text-primary">4,850</td>
375
+ <td class="py-4 px-4 text-primary font-bold">$120</td>
376
+ </tr>
377
+ </tbody>
378
+ </table>
379
+ </div>
380
+ </section>
381
+
382
+ <!-- Tournament Carousel Section -->
383
+ <section class="mb-14">
384
+ <div class="flex justify-between items-center mb-6">
385
+ <h2 class="text-2xl font-bold glow">Active Tournaments</h2>
386
+ <div class="flex">
387
+ <button class="px-5 py-2 bg-primary/20 text-primary font-medium rounded-l-full">Live</button>
388
+ <button class="px-5 py-2 bg-glass font-medium border-l border-black/20">Upcoming</button>
389
+ <button class="px-5 py-2 bg-glass font-medium border-l border-black/20 rounded-r-full">Completed</button>
390
+ </div>
391
  </div>
392
 
393
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
394
+ <div class="tournament-card glass-card rounded-2xl overflow-hidden glow-border transition-transform">
395
+ <div class="p-6 relative">
396
+ <div class="absolute top-4 right-4 bg-gradient-to-r from-primary to-secondary text-dark px-3 py-1 rounded-full font-bold text-sm">LIVE</div>
397
+ <h3 class="text-xl font-bold mb-3">Slot Spectacular</h3>
398
+ <div class="flex mb-4">
399
+ <span class="bg-glass px-3 py-1 rounded-full text-xs mr-2">Slots</span>
400
+ <span class="bg-glass px-3 py-1 rounded-full text-xs">Free Entry</span>
401
+ </div>
402
+
403
+ <div class="mb-4">
404
+ <div class="flex justify-between mb-1">
405
+ <div class="text-gray-300">Prize Pool:</div>
406
+ <div class="font-bold text-primary">$3,250</div>
407
  </div>
408
+ <div class="flex justify-between mb-1">
409
+ <div class="text-gray-300">Players:</div>
410
+ <div class="font-bold">820</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
411
  </div>
412
+ <div class="flex justify-between">
413
+ <div class="text-gray-300">Ends In:</div>
414
+ <div class="font-bold">15h 32m</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
415
  </div>
416
+ </div>
417
+
418
+ <button class="w-full cta-button py-3 mt-3 font-bold">Join Tournament</button>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="tournament-card glass-card rounded-2xl overflow-hidden glow-border transition-transform">
423
+ <div class="p-6 relative">
424
+ <div class="absolute top-4 right-4 bg-gradient-to-r from-primary to-secondary/80 text-dark px-3 py-1 rounded-full font-bold text-sm">LIVE</div>
425
+ <h3 class="text-xl font-bold mb-3">Blackjack Royale</h3>
426
+ <div class="flex mb-4">
427
+ <span class="bg-glass px-3 py-1 rounded-full text-xs mr-2">Table Games</span>
428
+ <span class="bg-glass px-3 py-1 rounded-full text-xs">100 Coins</span>
429
+ </div>
430
+
431
+ <div class="mb-4">
432
+ <div class="flex justify-between mb-1">
433
+ <div class="text-gray-300">Prize Pool:</div>
434
+ <div class="font-bold text-primary">$12,500</div>
 
 
 
 
435
  </div>
436
+ <div class="flex justify-between mb-1">
437
+ <div class="text-gray-300">Players:</div>
438
+ <div class="font-bold">1,420</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
439
  </div>
440
+ <div class="flex justify-between">
441
+ <div class="text-gray-300">Ends In:</div>
442
+ <div class="font-bold">42h 18m</div>
443
+ </div>
444
+ </div>
445
+
446
+ <button class="w-full cta-button py-3 mt-3 font-bold">Join Tournament</button>
447
  </div>
448
+ </div>
449
+
450
+ <div class="tournament-card glass-card rounded-2xl overflow-hidden glow-border transition-transform">
451
+ <div class="p-6 relative">
452
+ <div class="absolute top-4 right-4 bg-glass px-3 py-1 rounded-full font-bold text-sm">Upcoming</div>
453
+ <h3 class="text-xl font-bold mb-3">Crypto Rocket Race</h3>
454
+ <div class="flex mb-4">
455
+ <span class="bg-glass px-3 py-1 rounded-full text-xs mr-2">Crash</span>
456
+ <span class="bg-glass px-3 py-1 rounded-full text-xs">Invite Only</span>
457
+ </div>
458
+
459
+ <div class="mb-4">
460
+ <div class="flex justify-between mb-1">
461
+ <div class="text-gray-300">Prize Pool:</div>
462
+ <div class="font-bold text-primary">$25,000</div>
 
 
 
 
 
 
 
 
 
 
 
463
  </div>
464
+ <div class="flex justify-between mb-1">
465
+ <div class="text-gray-300">Starts In:</div>
466
+ <div class="font-bold">3d 2h</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
467
  </div>
468
+ <div class="flex justify-between">
469
+ <div class="text-gray-300">VIP:</div>
470
+ <div class="font-bold">Level 3+</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
471
  </div>
472
+ </div>
473
+
474
+ <button class="w-full bg-glass py-3 mt-3 font-bold rounded-xl border border-primary/20">Notify Me</button>
475
  </div>
476
+ </div>
477
  </div>
478
+ </section>
479
+
480
+ <!-- Hall of Fame Section -->
481
+ <section class="mb-14">
482
+ <h2 class="text-2xl font-bold mb-6 glow">Hall of Fame</h2>
483
+
484
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
485
+ <div class="glass-card rounded-2xl p-6 flex flex-col items-center glow-border">
486
+ <div class="relative">
487
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-yellow-500 to-primary p-1 mb-4">
488
+ <div class="w-full h-full bg-dark rounded-full flex items-center justify-center">
489
+ <span class="text-2xl font-bold">KW</span>
490
  </div>
491
+ </div>
492
+ <div class="absolute top-0 right-0 w-10 h-10 bg-gradient-to-br from-yellow-500 to-primary rounded-full flex items-center justify-center">
493
+ <span class="text-dark font-bold">1</span>
494
+ </div>
495
  </div>
496
+ <h3 class="font-bold text-xl mb-1">KennyW</h3>
497
+ <p class="text-primary font-bold mb-3">$25,420 Prize</p>
498
+ <p class="text-gray-300 text-sm">Crypto Champions Tournament</p>
499
+ <p class="text-gray-500 text-xs">July 15, 2023</p>
500
+ </div>
501
+
502
+ <div class="glass-card rounded-2xl p-6 flex flex-col items-center glow-border">
503
+ <div class="relative">
504
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-gray-400 to-gray-700 p-1 mb-4">
505
+ <div class="w-full h-full bg-dark rounded-full flex items-center justify-center">
506
+ <span class="text-2xl font-bold">SD</span>
507
  </div>
508
+ </div>
509
+ <div class="absolute top-0 right-0 w-10 h-10 bg-gradient-to-br from-gray-400 to-gray-700 rounded-full flex items-center justify-center">
510
+ <span class="text-dark font-bold">2</span>
511
+ </div>
512
  </div>
513
+ <h3 class="font-bold text-xl mb-1">SlotDiva</h3>
514
+ <p class="text-primary font-bold mb-3">$18,950 Prize</p>
515
+ <p class="text-gray-300 text-sm">Mega Fortune Bash</p>
516
+ <p class="text-gray-500 text-xs">May 30, 2023</p>
517
+ </div>
518
+
519
+ <div class="glass-card rounded-2xl p-6 flex flex-col items-center glow-border">
520
+ <div class="relative">
521
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-amber-800 to-amber-600 p-1 mb-4">
522
+ <div class="w-full h-full bg-dark rounded-full flex items-center justify-center">
523
+ <span class="text-2xl font-bold">LS</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
524
  </div>
525
+ </div>
526
+ <div class="absolute top-0 right-0 w-10 h-10 bg-gradient-to-br from-amber-800 to-amber-600 rounded-full flex items-center justify-center">
527
+ <span class="text-dark font-bold">3</span>
528
+ </div>
529
  </div>
530
+ <h3 class="font-bold text-xl mb-1">LuckyStreak</h3>
531
+ <p class="text-primary font-bold mb-3">$16,800 Prize</p>
532
+ <p class="text-gray-300 text-sm">Week-of-Winnings</p>
533
+ <p class="text-gray-500 text-xs">April 2, 2023</p>
534
+ </div>
535
  </div>
536
+ </section>
537
+
538
+ <!-- Invite Friends Section -->
539
+ <section>
540
+ <div class="glass-card p-8 rounded-2xl relative overflow-hidden">
541
+ <div class="absolute top-0 right-0 w-72 h-72 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-full transform translate-x-1/3 -translate-y-1/3"></div>
542
+
543
+ <div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
544
+ <div class="md:w-2/3 mb-8 md:mb-0">
545
+ <h2 class="text-3xl font-bold mb-3">🎁 Invite Friends & Earn Rewards</h2>
546
+ <p class="text-gray-300 mb-6">Share your referral link and earn 100 Gold Coins for every friend who makes a deposit.</p>
547
+
548
+ <div class="flex flex-wrap items-center gap-3 mb-6">
549
+ <button class="cta-button px-6 py-3 font-bold">
550
+ Copy Referral Link
551
+ </button>
552
+ <button class="bg-glass px-6 py-3 font-bold rounded-xl border border-primary/20">
553
+ Share on Social
554
+ </button>
555
+ </div>
556
+
557
+ <div class="bg-black/30 p-4 rounded-lg inline-block border border-primary/20">
558
+ <p class="font-mono">https://cryptoluck.io/ref?c=CU982SL24</p>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="md:w-1/3 flex justify-center">
563
+ <div class="glass-card p-6 rounded-xl glow-border w-64">
564
+ <div class="text-center">
565
+ <div class="text-5xl mb-3">🎪</div>
566
+ <h4 class="font-bold mb-3">Your Progress</h4>
567
+ <p class="text-primary font-bold mb-4">3/5 Friends Invited</p>
568
+ <div class="progress-bar-bg mb-3">
569
+ <div class="progress-bar-fill" style="width: 60%"></div>
570
+ </div>
571
+ <p class="text-sm">Invite 2 more to unlock VIP status</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
572
  </div>
573
+ </div>
574
  </div>
575
+ </div>
576
+ </div>
577
+ </section>
578
+ </main>
579
+ </div>
580
+
581
+ <!-- Tournament Details Modal (hidden by default) -->
582
+ <div class="modal-overlay hidden" id="tournament-modal">
583
+ <div class="glass-card rounded-2xl p-8 max-w-3xl w-full modal-content">
584
+ <div class="flex justify-between items-start mb-6">
585
+ <div>
586
+ <h2 class="text-3xl font-bold mb-2">Slot Spectacular Tournament</h2>
587
+ <div class="flex">
588
+ <span class="bg-glass px-3 py-1 rounded-full text-xs mr-2">Slots</span>
589
+ <span class="bg-primary/20 text-primary px-3 py-1 rounded-full text-xs">FREE ENTRY</span>
590
+ </div>
591
+ </div>
592
+ <button class="text-2xl" id="close-modal">×</button>
593
+ </div>
594
+
595
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
596
+ <div>
597
+ <h3 class="text-xl font-bold mb-3">Details</h3>
598
+ <ul class="space-y-3">
599
+ <li class="flex">
600
+ <div class="font-bold w-32">Prize Pool:</div>
601
+ <div class="text-primary font-bold">$5,000</div>
602
+ </li>
603
+ <li class="flex">
604
+ <div class="font-bold w-32">Duration:</div>
605
+ <div>5 days</div>
606
+ </li>
607
+ <li class="flex">
608
+ <div class="font-bold w-32">Start:</div>
609
+ <div>July 12, 2023 04:00 UTC</div>
610
+ </li>
611
+ <li class="flex">
612
+ <div class="font-bold w-32">End:</div>
613
+ <div>July 17, 2023 04:00 UTC</div>
614
+ </li>
615
+ <li class="flex">
616
+ <div class="font-bold w-32">Players:</div>
617
+ <div>1,250 enrolled</div>
618
+ </li>
619
+ </ul>
620
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
621
 
622
+ <div>
623
+ <h3 class="text-xl font-bold mb-3">Prizes</h3>
624
+ <ul class="space-y-2">
625
+ <li class="flex justify-between">
626
+ <div>1st Place:</div>
627
+ <div class="text-primary font-bold">$1,200</div>
628
+ </li>
629
+ <li class="flex justify-between">
630
+ <div>2nd Place:</div>
631
+ <div class="text-primary font-bold">$900</div>
632
+ </li>
633
+ <li class="flex justify-between">
634
+ <div>3rd Place:</div>
635
+ <div class="text-primary font-bold">$600</div>
636
+ </li>
637
+ <li class="flex justify-between">
638
+ <div>4th-10th:</div>
639
+ <div>$100-$350</div>
640
+ </li>
641
+ <li class="flex justify-between">
642
+ <div>Top 50:</div>
643
+ <div>$20-$80</div>
644
+ </li>
645
+ </ul>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="mb-8">
650
+ <h3 class="text-xl font-bold mb-3">About This Tournament</h3>
651
+ <p class="text-gray-300 mb-1">All slot games are eligible. For each $1 wagered, you'll earn 1 tournament point. The more you play, the higher your chances of winning big prizes!</p>
652
+ <p class="text-gray-300">Only bets between $0.20 and $100 count toward the tournament score. This tournament is designed for any player level - beginners and VIPs welcome!</p>
653
+ </div>
654
+
655
+ <div class="flex justify-between items-center">
656
+ <button class="text-primary hover:underline">View Full Terms & Conditions</button>
657
+ <button class="cta-button px-8 py-3 font-bold text-lg">Join Tournament Now</button>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <script>
663
+ // Timer functionality
664
+ function updateCountdown() {
665
+ const daysEl = document.getElementById('days');
666
+ const hoursEl = document.getElementById('hours');
667
+ const minutesEl = document.getElementById('minutes');
668
+ const secondsEl = document.getElementById('seconds');
669
+
670
+ let days = parseInt(daysEl.innerText);
671
+ let hours = parseInt(hoursEl.innerText);
672
+ let minutes = parseInt(minutesEl.innerText);
673
+ let seconds = parseInt(secondsEl.innerText);
674
+
675
+ seconds--;
676
+
677
+ if (seconds < 0) {
678
+ seconds = 59;
679
+ minutes--;
680
+
681
+ if (minutes < 0) {
682
+ minutes = 59;
683
+ hours--;
684
+
685
+ if (hours < 0) {
686
+ hours = 23;
687
+ days--;
688
+ }
689
  }
690
+ }
691
+
692
+ daysEl.innerText = days.toString().padStart(2, '0');
693
+ hoursEl.innerText = hours.toString().padStart(2, '0');
694
+ minutesEl.innerText = minutes.toString().padStart(2, '0');
695
+ secondsEl.innerText = seconds.toString().padStart(2, '0');
696
+ }
697
+
698
+ // Update every second
699
+ setInterval(updateCountdown, 1000);
700
+
701
+ // Tournament card interaction
702
+ const tournamentCards = document.querySelectorAll('.tournament-card');
703
+ const modal = document.getElementById('tournament-modal');
704
+ const closeModal = document.getElementById('close-modal');
705
+
706
+ tournamentCards.forEach(card => {
707
+ card.addEventListener('click', () => {
708
+ modal.classList.remove('hidden');
709
+ });
710
+ });
711
+
712
+ closeModal.addEventListener('click', () => {
713
+ modal.classList.add('hidden');
714
+ });
715
+
716
+ modal.addEventListener('click', (e) => {
717
+ if (e.target === modal) {
718
+ modal.classList.add('hidden');
719
+ }
720
+ });
721
+
722
+ // Hover effects for buttons (dynamic glow)
723
+ document.querySelectorAll('button').forEach(btn => {
724
+ btn.addEventListener('mouseenter', () => {
725
+ btn.classList.add('transform', 'transition');
726
+ });
727
+
728
+ btn.addEventListener('mouseleave', () => {
729
+ btn.classList.remove('transform', 'transition');
730
+ });
731
+ });
732
+ </script>
733
  <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>
734
  </html>