Hugging Face's logo

Spaces:
ProjectGenesis
/
tournament-ui-redesign
Running

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

add 2 more Tournament cards - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +737 -695
index.html CHANGED
@@ -1,734 +1,776 @@
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>
 
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
+ <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-bg': '#0C0C0C',
16
+ 'neon-yellow': '#FFD700',
17
+ 'neon-orange': '#FFA500',
18
+ 'glass-bg': 'rgba(20, 20, 20, 0.65)',
19
+ 'card-bg': 'rgba(30, 30, 30, 0.7)'
20
+ },
21
+ boxShadow: {
22
+ 'glow-yellow': '0 0 15px rgba(255, 215, 0, 0.7)',
23
+ 'glow-orange': '0 0 15px rgba(255, 165, 0, 0.7)',
24
+ 'inner-glow': 'inset 0 0 10px rgba(255, 215, 0, 0.5)'
25
+ },
26
+ animation: {
27
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
28
+ 'glow': 'glow 1.5s ease-in-out infinite alternate'
29
+ },
30
+ keyframes: {
31
+ glow: {
32
+ 'from': { 'box-shadow': '0 0 5px rgba(255, 215, 0, 0.5)' },
33
+ 'to': { 'box-shadow': '0 0 20px rgba(255, 215, 0, 0.8)' }
34
+ }
35
+ }
36
+ }
37
+ }
38
+ }
39
+ </script>
40
+ <style>
41
+ * {
42
+ margin: 0;
43
+ padding: 0;
44
+ box-sizing: border-box;
45
+ }
46
+
47
+ body {
48
+ font-family: 'Poppins', sans-serif;
49
+ background-color: #0C0C0C;
50
+ background-image: radial-gradient(circle at 20% 30%, rgba(255, 165, 0, 0.1) 0%, transparent 40%),
51
+ radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.1) 0%, transparent 40%);
52
+ color: #fff;
53
+ min-height: 100vh;
54
+ overflow-x: hidden;
55
+ }
56
+
57
+ .glass-panel {
58
+ background: rgba(20, 20, 20, 0.65);
59
+ backdrop-filter: blur(12px);
60
+ -webkit-backdrop-filter: blur(12px);
61
+ border: 1px solid rgba(255, 215, 0, 0.2);
62
+ border-radius: 24px;
63
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
64
+ }
65
+
66
+ .glow-border {
67
+ position: relative;
68
+ }
69
+
70
+ .glow-border::before {
71
+ content: '';
72
+ position: absolute;
73
+ top: 0;
74
+ left: 0;
75
+ right: 0;
76
+ bottom: 0;
77
+ border-radius: 24px;
78
+ border: 2px solid transparent;
79
+ background: linear-gradient(45deg, #FFD700, #FFA500, #FFD700) border-box;
80
+ -webkit-mask:
81
+ linear-gradient(#fff 0 0) padding-box,
82
+ linear-gradient(#fff 0 0);
83
+ mask:
84
+ linear-gradient(#fff 0 0) padding-box,
85
+ linear-gradient(#fff 0 0);
86
+ -webkit-mask-composite: destination-out;
87
+ mask-composite: exclude;
88
+ animation: glow 1.5s ease-in-out infinite alternate;
89
+ }
90
+
91
+ .neon-text {
92
+ text-shadow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.5);
93
+ }
94
+
95
+ .gradient-btn {
96
+ background: linear-gradient(45deg, #FFA500, #FFD700);
97
+ box-shadow: 0 0 15px rgba(255, 165, 0, 0.7);
98
+ transition: all 0.3s ease;
99
+ }
100
+
101
+ .gradient-btn:hover {
102
+ transform: translateY(-2px);
103
+ box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
104
+ }
105
+
106
+ .progress-track {
107
+ height: 10px;
108
+ border-radius: 5px;
109
+ background: rgba(255, 255, 255, 0.1);
110
+ }
111
+
112
+ .progress-fill {
113
+ height: 100%;
114
+ border-radius: 5px;
115
+ background: linear-gradient(90deg, #FFA500, #FFD700);
116
+ box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
117
+ }
118
+
119
+ .carousel-item {
120
+ flex: 0 0 auto;
121
+ width: 300px;
122
+ scroll-snap-align: start;
123
+ transition: transform 0.3s ease;
124
+ }
125
+
126
+ .carousel-item:hover {
127
+ transform: translateY(-10px);
128
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
 
130
+ .trophy-gold {
131
+ background: linear-gradient(145deg, #FFD700, #FFA500);
132
+ -webkit-background-clip: text;
133
+ -webkit-text-fill-color: transparent;
134
+ filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
135
+ }
136
+
137
+ .trophy-silver {
138
+ background: linear-gradient(145deg, #C0C0C0, #808080);
139
+ -webkit-background-clip: text;
140
+ -webkit-text-fill-color: transparent;
141
+ }
142
+
143
+ .trophy-bronze {
144
+ background: linear-gradient(145deg, #CD7F32, #8B4513);
145
+ -webkit-background-clip: text;
146
+ -webkit-text-fill-color: transparent;
147
+ }
148
+
149
+ .leaderboard-row {
150
+ transition: all 0.3s ease;
151
+ }
152
+
153
+ .leaderboard-row:hover {
154
+ background: rgba(255, 215, 0, 0.1);
155
+ transform: scale(1.02);
156
+ }
157
+
158
+ .modal-overlay {
159
+ position: fixed;
160
+ top: 0;
161
+ left: 0;
162
+ right: 0;
163
+ bottom: 0;
164
+ background: rgba(0, 0, 0, 0.8);
165
+ backdrop-filter: blur(10px);
166
+ display: flex;
167
+ justify-content: center;
168
+ align-items: center;
169
+ z-index: 1000;
170
+ }
171
+
172
+ .modal-content {
173
+ max-height: 90vh;
174
+ overflow-y: auto;
175
+ }
176
+
177
+ .referral-badge {
178
+ animation: pulse-slow 2s infinite;
179
+ }
180
+
181
+ .avatar-placeholder {
182
+ background: linear-gradient(45deg, #FFA500, #FFD700);
183
+ width: 50px;
184
+ height: 50px;
185
+ border-radius: 50%;
186
+ display: flex;
187
+ justify-content: center;
188
+ align-items: center;
189
+ font-weight: bold;
190
+ color: #0C0C0C;
191
+ }
192
+
193
+ @media (max-width: 768px) {
194
+ .stats-grid {
195
+ grid-template-columns: repeat(2, 1fr);
196
+ }
197
+ }
198
+ </style>
199
+ </head>
200
+ <body>
201
+ <!-- Main Container -->
202
+ <div class="min-h-screen w-full max-w-7xl mx-auto px-4 py-8">
203
+ <!-- Header -->
204
+ <header class="flex justify-between items-center py-4 mb-8">
205
+ <div class="flex items-center">
206
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center mr-3">
207
+ <i class="fas fa-dice text-2xl text-dark-bg"></i>
208
+ </div>
209
+ <h1 class="text-3xl font-bold text-white">NEON<span class="text-neon-yellow">CASINO</span></h1>
210
+ </div>
211
+ <div class="flex items-center space-x-4">
212
+ <div class="relative">
213
+ <button class="bg-glass-bg text-white px-4 py-2 rounded-full flex items-center">
214
+ <i class="fas fa-coins text-neon-yellow mr-2"></i>
215
+ <span>5,250</span>
216
+ </button>
217
+ <span class="absolute -top-2 -right-2 bg-neon-orange text-dark-bg text-xs font-bold rounded-full h-6 w-6 flex items-center justify-center">+25</span>
218
+ </div>
219
+ <button class="bg-glass-bg w-10 h-10 rounded-full flex items-center justify-center">
220
+ <i class="fas fa-bell text-neon-yellow"></i>
221
+ </button>
222
+ <button class="bg-glass-bg w-10 h-10 rounded-full flex items-center justify-center">
223
+ <img src="https://i.pravatar.cc/150?img=32" class="rounded-full w-8 h-8" alt="User">
224
+ </button>
225
+ </div>
226
+ </header>
227
+
228
+ <!-- Current Tournament Banner -->
229
+ <section class="glass-panel glow-border mb-8 relative overflow-hidden">
230
+ <div class="absolute top-0 left-0 w-full h-full z-0 opacity-20" style="background: radial-gradient(circle at top right, rgba(255, 165, 0, 0.5) 0%, transparent 70%);"></div>
231
+ <div class="relative z-10 p-6 md:p-8">
232
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
233
+ <div class="mb-6 md:mb-0">
234
+ <div class="flex items-center mb-4">
235
+ <span class="px-3 py-1 bg-neon-orange text-dark-bg rounded-full text-sm font-bold mr-3">FREE ENTRY</span>
236
+ <span class="px-3 py-1 bg-neon-yellow text-dark-bg rounded-full text-sm font-bold">100 PLAYERS</span>
237
+ </div>
238
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-2 neon-text">MEGA WEEKEND SLOTS BATTLE</h2>
239
+ <p class="text-xl text-gray-300 mb-4">Compete for the grand prize and exclusive rewards!</p>
240
+ <div class="flex items-center">
241
+ <i class="fas fa-trophy text-neon-yellow mr-2 text-xl"></i>
242
+ <span class="text-2xl font-bold text-white">$5,000</span>
243
+ <span class="mx-4 text-gray-400">|</span>
244
+ <i class="fas fa-clock text-neon-orange mr-2 text-xl"></i>
245
+ <span class="text-xl font-bold text-white" id="countdown">23:48:12</span>
246
+ </div>
247
+ </div>
248
+ <button class="gradient-btn px-8 py-4 rounded-full text-dark-bg font-bold text-lg transform transition duration-300 hover:scale-105">
249
+ JOIN TOURNAMENT
250
+ <i class="fas fa-arrow-right ml-2"></i>
251
+ </button>
252
+ </div>
253
  </div>
254
+ </section>
255
+
256
+ <!-- User Stats Panel -->
257
+ <section class="mb-10">
258
+ <h3 class="text-2xl font-bold text-white mb-6 flex items-center">
259
+ <i class="fas fa-chart-line text-neon-yellow mr-3"></i>
260
+ YOUR TOURNAMENT STATS
261
+ </h3>
262
+
263
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-5 stats-grid">
264
+ <!-- Rank Card -->
265
+ <div class="glass-panel p-6 relative">
266
+ <div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center">
267
+ <i class="fas fa-crown text-dark-bg"></i>
268
+ </div>
269
+ <h4 class="text-gray-400 mb-1">Current Rank</h4>
270
+ <p class="text-3xl font-bold text-white mb-3">#27</p>
271
+ <div class="flex items-center text-sm text-gray-400">
272
+ <i class="fas fa-arrow-up text-green-400 mr-1"></i>
273
+ <span>Up 3 positions</span>
274
+ </div>
275
  </div>
276
+
277
+ <!-- Points Card -->
278
+ <div class="glass-panel p-6 relative">
279
+ <div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center">
280
+ <i class="fas fa-bolt text-dark-bg"></i>
281
+ </div>
282
+ <h4 class="text-gray-400 mb-1">Points Earned</h4>
283
+ <p class="text-3xl font-bold text-white mb-3">1,850</p>
284
+ <div class="flex items-center text-sm text-gray-400">
285
+ <span>Next tier at 2,000 points</span>
286
+ </div>
287
  </div>
288
+
289
+ <!-- Games Card -->
290
+ <div class="glass-panel p-6 relative">
291
+ <div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center">
292
+ <i class="fas fa-dice-d20 text-dark-bg"></i>
293
+ </div>
294
+ <h4 class="text-gray-400 mb-1">Games Played</h4>
295
+ <p class="text-3xl font-bold text-white mb-3">42</p>
296
+ <div class="flex items-center text-sm text-gray-400">
297
+ <i class="fas fa-check-circle text-green-400 mr-1"></i>
298
+ <span>Qualified for rewards</span>
299
+ </div>
300
  </div>
301
+
302
+ <!-- Prize Card -->
303
+ <div class="glass-panel p-6 relative">
304
+ <div class="absolute top-4 right-4 w-12 h-12 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center">
305
+ <i class="fas fa-coins text-dark-bg"></i>
306
+ </div>
307
+ <h4 class="text-gray-400 mb-1">Estimated Prize</h4>
308
+ <p class="text-3xl font-bold text-white mb-3">$120</p>
309
+ <div class="progress-track w-full">
310
+ <div class="progress-fill w-3/4"></div>
311
+ </div>
312
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
313
  </div>
314
+ </section>
315
+
316
+ <!-- Leaderboard Module -->
317
+ <section class="mb-10">
318
+ <div class="flex justify-between items-center mb-6">
319
+ <h3 class="text-2xl font-bold text-white flex items-center">
320
+ <i class="fas fa-trophy text-neon-yellow mr-3"></i>
321
+ LEADERBOARD
322
+ </h3>
323
+ <div class="flex items-center">
324
+ <span class="text-gray-400 mr-3">Your position: #27</span>
325
+ <button class="px-4 py-2 rounded-full bg-glass-bg text-white flex items-center">
326
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
327
+ </button>
328
+ </div>
 
 
 
 
329
  </div>
330
+
331
+ <div class="glass-panel overflow-x-auto">
332
+ <table class="w-full">
333
+ <thead>
334
+ <tr class="border-b border-gray-700">
335
+ <th class="py-4 px-6 text-left text-gray-400 font-semibold">RANK</th>
336
+ <th class="py-4 px-6 text-left text-gray-400 font-semibold">USERNAME</th>
337
+ <th class="py-4 px-6 text-left text-gray-400 font-semibold">SCORE</th>
338
+ <th class="py-4 px-6 text-left text-gray-400 font-semibold">PRIZE</th>
339
+ </tr>
340
+ </thead>
341
+ <tbody>
342
+ <!-- Gold -->
343
+ <tr class="leaderboard-row border-b border-gray-800 hover:border-neon-yellow">
344
+ <td class="py-4 px-6">
345
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-yellow-300 to-yellow-500 flex items-center justify-center">
346
+ <span class="font-bold text-dark-bg">1</span>
347
+ </div>
348
+ </td>
349
+ <td class="py-4 px-6">
350
+ <div class="flex items-center">
351
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
352
+ <img src="https://i.pravatar.cc/150?img=12" alt="Player">
353
+ </div>
354
+ <div>
355
+ <p class="font-bold">LuckyStar77</p>
356
+ <p class="text-xs text-gray-400">VIP Platinum</p>
357
+ </div>
358
+ </div>
359
+ </td>
360
+ <td class="py-4 px-6 font-bold text-xl">9,850</td>
361
+ <td class="py-4 px-6 font-bold text-neon-yellow">$1,500</td>
362
+ </tr>
363
+
364
+ <!-- Silver -->
365
+ <tr class="leaderboard-row border-b border-gray-800 hover:border-gray-500">
366
+ <td class="py-4 px-6">
367
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-gray-300 to-gray-500 flex items-center justify-center">
368
+ <span class="font-bold text-dark-bg">2</span>
369
+ </div>
370
+ </td>
371
+ <td class="py-4 px-6">
372
+ <div class="flex items-center">
373
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
374
+ <img src="https://i.pravatar.cc/150?img=23" alt="Player">
375
+ </div>
376
+ <div>
377
+ <p class="font-bold">JackpotKing</p>
378
+ <p class="text-xs text-gray-400">VIP Gold</p>
379
+ </div>
380
+ </div>
381
+ </td>
382
+ <td class="py-4 px-6 font-bold text-xl">8,920</td>
383
+ <td class="py-4 px-6 font-bold text-gray-300">$1,000</td>
384
+ </tr>
385
+
386
+ <!-- Bronze -->
387
+ <tr class="leaderboard-row border-b border-gray-800 hover:border-amber-800">
388
+ <td class="py-4 px-6">
389
+ <div class="w-8 h-8 rounded-full bg-gradient-to-r from-amber-700 to-amber-900 flex items-center justify-center">
390
+ <span class="font-bold text-white">3</span>
391
+ </div>
392
+ </td>
393
+ <td class="py-4 px-6">
394
+ <div class="flex items-center">
395
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
396
+ <img src="https://i.pravatar.cc/150?img=45" alt="Player">
397
+ </div>
398
+ <div>
399
+ <p class="font-bold">DiamondDice</p>
400
+ <p class="text-xs text-gray-400">VIP Silver</p>
401
+ </div>
402
+ </div>
403
+ </td>
404
+ <td class="py-4 px-6 font-bold text-xl">7,640</td>
405
+ <td class="py-4 px-6 font-bold text-amber-600">$750</td>
406
+ </tr>
407
+
408
+ <!-- Other ranks -->
409
+ <tr class="leaderboard-row border-b border-gray-800">
410
+ <td class="py-4 px-6">4</td>
411
+ <td class="py-4 px-6">WildCardWilly</td>
412
+ <td class="py-4 px-6">6,980</td>
413
+ <td class="py-4 px-6">$500</td>
414
+ </tr>
415
+ <tr class="leaderboard-row border-b border-gray-800">
416
+ <td class="py-4 px-6">5</td>
417
+ <td class="py-4 px-6">RouletteRider</td>
418
+ <td class="py-4 px-6">6,420</td>
419
+ <td class="py-4 px-6">$400</td>
420
+ </tr>
421
+
422
+ <!-- Current User -->
423
+ <tr class="leaderboard-row bg-gradient-to-r from-gray-900 to-dark-bg border-t-2 border-neon-yellow">
424
+ <td class="py-4 px-6 font-bold">27</td>
425
+ <td class="py-4 px-6 font-bold flex items-center">
426
+ <div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-neon-yellow">
427
+ <img src="https://i.pravatar.cc/150?img=32" alt="You">
428
+ </div>
429
+ You (Player32)
430
+ </td>
431
+ <td class="py-4 px-6 font-bold text-neon-yellow">1,850</td>
432
+ <td class="py-4 px-6 font-bold text-neon-yellow">$120</td>
433
+ </tr>
434
+ </tbody>
435
+ </table>
436
  </div>
437
+ </section>
438
+
439
+ <!-- Tournament Carousel -->
440
+ <section class="mb-10">
441
+ <div class="flex justify-between items-center mb-6">
442
+ <h3 class="text-2xl font-bold text-white flex items-center">
443
+ <i class="fas fa-fire text-neon-orange mr-3"></i>
444
+ ACTIVE TOURNAMENTS
445
+ </h3>
446
+ <div class="flex space-x-2">
447
+ <button class="px-4 py-2 rounded-full bg-neon-yellow text-dark-bg font-bold">LIVE</button>
448
+ <button class="px-4 py-2 rounded-full bg-glass-bg text-white">UPCOMING</button>
449
+ <button class="px-4 py-2 rounded-full bg-glass-bg text-white">COMPLETED</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
450
  </div>
451
+ </div>
452
+
453
+ <div class="flex space-x-6 overflow-x-auto pb-4 scrollbar-hide" style="scrollbar-width: none;">
454
+ <!-- Tournament Card 1 -->
455
+ <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer">
456
+ <div class="flex justify-between items-start mb-4">
457
+ <span class="px-3 py-1 bg-neon-orange text-dark-bg rounded-full text-sm font-bold">FREE</span>
458
+ <span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm font-bold flex items-center">
459
+ <span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span>
460
+ LIVE
461
+ </span>
462
+ </div>
463
+ <h4 class="text-xl font-bold text-white mb-2">Slots Mania Rush</h4>
464
+ <p class="text-gray-400 text-sm mb-4">Fast-paced slots competition</p>
465
+ <div class="flex justify-between items-center mb-4">
466
+ <div>
467
+ <p class="text-gray-400 text-sm">Prize Pool</p>
468
+ <p class="text-xl font-bold text-neon-yellow">$1,200</p>
469
+ </div>
470
+ <div>
471
+ <p class="text-gray-400 text-sm">Players</p>
472
+ <p class="text-xl font-bold text-white">87/100</p>
473
+ </div>
474
+ </div>
475
+ <button class="w-full gradient-btn py-3 rounded-full text-dark-bg font-bold mt-2">
476
+ JOIN NOW
477
+ </button>
478
  </div>
479
+
480
+ <!-- Tournament Card 2 -->
481
+ <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer">
482
+ <div class="flex justify-between items-start mb-4">
483
+ <span class="px-3 py-1 bg-neon-yellow text-dark-bg rounded-full text-sm font-bold">50 COINS</span>
484
+ <span class="px-3 py-1 bg-green-500 text-white rounded-full text-sm font-bold">STARTING SOON</span>
485
+ </div>
486
+ <h4 class="text-xl font-bold text-white mb-2">Blackjack Showdown</h4>
487
+ <p class="text-gray-400 text-sm mb-4">Master the tables</p>
488
+ <div class="flex justify-between items-center mb-4">
489
+ <div>
490
+ <p class="text-gray-400 text-sm">Prize Pool</p>
491
+ <p class="text-xl font-bold text-neon-yellow">$2,500</p>
492
+ </div>
493
+ <div>
494
+ <p class="text-gray-400 text-sm">Starts In</p>
495
+ <p class="text-xl font-bold text-white">12:34:22</p>
496
+ </div>
497
+ </div>
498
+ <button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2">
499
+ NOTIFY ME
500
+ </button>
501
  </div>
502
+
503
+ <!-- Tournament Card 3 -->
504
+ <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer">
505
+ <div class="flex justify-between items-start mb-4">
506
+ <span class="px-3 py-1 bg-purple-500 text-white rounded-full text-sm font-bold">VIP ONLY</span>
507
+ <span class="px-3 py-1 bg-blue-500 text-white rounded-full text-sm font-bold">NEW</span>
508
+ </div>
509
+ <h4 class="text-xl font-bold text-white mb-2">High Roller Roulette</h4>
510
+ <p class="text-gray-400 text-sm mb-4">For the elite players</p>
511
+ <div class="flex justify-between items-center mb-4">
512
+ <div>
513
+ <p class="text-gray-400 text-sm">Prize Pool</p>
514
+ <p class="text-xl font-bold text-neon-yellow">$10,000</p>
515
+ </div>
516
+ <div>
517
+ <p class="text-gray-400 text-sm">Entry</p>
518
+ <p class="text-xl font-bold text-white">500 Coins</p>
519
+ </div>
520
+ </div>
521
+ <button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2">
522
+ VIP ACCESS
523
+ </button>
524
  </div>
525
+
526
+ <!-- Tournament Card 4 -->
527
+ <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer">
528
+ <div class="flex justify-between items-start mb-4">
529
+ <span class="px-3 py-1 bg-green-500 text-dark-bg rounded-full text-sm font-bold">25 COINS</span>
530
+ <span class="px-3 py-1 bg-purple-500 text-white rounded-full text-sm font-bold">NEW</span>
531
+ </div>
532
+ <h4 class="text-xl font-bold text-white mb-2">Poker Night Fever</h4>
533
+ <p class="text-gray-400 text-sm mb-4">Texas Hold'em tournament</p>
534
+ <div class="flex justify-between items-center mb-4">
535
+ <div>
536
+ <p class="text-gray-400 text-sm">Prize Pool</p>
537
+ <p class="text-xl font-bold text-neon-yellow">$3,000</p>
538
+ </div>
539
+ <div>
540
+ <p class="text-gray-400 text-sm">Starts In</p>
541
+ <p class="text-xl font-bold text-white">06:45:18</p>
542
+ </div>
543
+ </div>
544
+ <button class="w-full bg-glass-bg py-3 rounded-full text-white font-bold border border-neon-yellow mt-2">
545
+ REGISTER NOW
546
+ </button>
547
  </div>
548
+
549
+ <!-- Tournament Card 5 -->
550
+ <div class="carousel-item glass-panel min-w-[300px] p-6 cursor-pointer">
551
+ <div class="flex justify-between items-start mb-4">
552
+ <span class="px-3 py-1 bg-blue-500 text-white rounded-full text-sm font-bold">100 COINS</span>
553
+ <span class="px-3 py-1 bg-red-500 text-white rounded-full text-sm font-bold flex items-center">
554
+ <span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span>
555
+ LIVE
556
+ </span>
557
+ </div>
558
+ <h4 class="text-xl font-bold text-white mb-2">Baccarat Blitz</h4>
559
+ <p class="text-gray-400 text-sm mb-4">High-stakes baccarat</p>
560
+ <div class="flex justify-between items-center mb-4">
561
+ <div>
562
+ <p class="text-gray-400 text-sm">Prize Pool</p>
563
+ <p class="text-xl font-bold text-neon-yellow">$5,000</p>
564
+ </div>
565
+ <div>
566
+ <p class="text-gray-400 text-sm">Players</p>
567
+ <p class="text-xl font-bold text-white">32/50</p>
568
+ </div>
569
+ </div>
570
+ <button class="w-full gradient-btn py-3 rounded-full text-dark-bg font-bold mt-2">
571
+ JOIN NOW
572
+ </button>
573
  </div>
 
 
 
574
  </div>
575
+ </section>
576
+
577
+ <!-- Hall of Fame -->
578
+ <section class="mb-10">
579
+ <h3 class="text-2xl font-bold text-white mb-6 flex items-center">
580
+ <i class="fas fa-medal text-neon-yellow mr-3"></i>
581
+ HALL OF FAME
582
+ </h3>
583
+
584
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
585
+ <!-- Winner 1 -->
586
+ <div class="p-6 flex flex-col items-center text-center">
587
+ <div class="mb-4">
588
+ <i class="fas fa-trophy text-5xl trophy-gold"></i>
589
+ </div>
590
+ <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-neon-yellow mb-4">
591
+ <img src="https://i.pravatar.cc/150?img=8" alt="Winner">
592
+ </div>
593
+ <h4 class="text-xl font-bold text-white mb-1">LuckyStar77</h4>
594
+ <p class="text-gray-400 mb-2">Slot Master Tournament</p>
595
+ <p class="text-2xl font-bold text-neon-yellow mb-4">$2,800</p>
596
+ <p class="text-gray-400 text-sm">Dec 15, 2023</p>
597
  </div>
598
+
599
+ <!-- Winner 2 -->
600
+ <div class="p-6 flex flex-col items-center text-center">
601
+ <div class="mb-4">
602
+ <i class="fas fa-trophy text-5xl trophy-silver"></i>
603
+ </div>
604
+ <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-gray-400 mb-4">
605
+ <img src="https://i.pravatar.cc/150?img=19" alt="Winner">
606
+ </div>
607
+ <h4 class="text-xl font-bold text-white mb-1">BlackjackPro</h4>
608
+ <p class="text-gray-400 mb-2">Card Masters Championship</p>
609
+ <p class="text-2xl font-bold text-gray-300 mb-4">$1,950</p>
610
+ <p class="text-gray-400 text-sm">Nov 28, 2023</p>
611
  </div>
612
+
613
+ <!-- Winner 3 -->
614
+ <div class="p-6 flex flex-col items-center text-center">
615
+ <div class="mb-4">
616
+ <i class="fas fa-trophy text-5xl trophy-bronze"></i>
617
+ </div>
618
+ <div class="w-20 h-20 rounded-full overflow-hidden border-4 border-amber-700 mb-4">
619
+ <img src="https://i.pravatar.cc/150?img=27" alt="Winner">
620
+ </div>
621
+ <h4 class="text-xl font-bold text-white mb-1">RouletteRoyal</h4>
622
+ <p class="text-gray-400 mb-2">Spin to Win Challenge</p>
623
+ <p class="text-2xl font-bold text-amber-600 mb-4">$1,200</p>
624
+ <p class="text-gray-400 text-sm">Nov 12, 2023</p>
625
  </div>
 
 
 
626
  </div>
627
+ </section>
628
+
629
+ <!-- Invite Friends -->
630
+ <section class="glass-panel p-8 mb-10 relative overflow-hidden">
631
+ <div class="absolute top-0 right-0 w-1/2 h-full opacity-20" style="background: radial-gradient(circle at center, rgba(255, 215, 0, 0.3) 0%, transparent 70%);"></div>
632
+ <div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
633
+ <div class="mb-6 md:mb-0 text-center md:text-left">
634
+ <h3 class="text-2xl font-bold text-white mb-2">Invite Friends & Earn Rewards</h3>
635
+ <p class="text-gray-300 max-w-md">Get 100 coins for every friend who joins and plays their first tournament!</p>
636
+ </div>
637
+ <div class="flex flex-col items-center">
638
+ <div class="referral-badge bg-gradient-to-r from-neon-orange to-neon-yellow text-dark-bg font-bold px-6 py-3 rounded-full mb-3">
639
+ <i class="fas fa-gift mr-2"></i> You've invited 3 / 5 friends
640
+ </div>
641
+ <button id="inviteBtn" class="gradient-btn px-8 py-3 rounded-full text-dark-bg font-bold flex items-center">
642
+ <i class="fas fa-user-plus mr-2"></i> INVITE FRIENDS NOW
643
+ </button>
644
  </div>
 
 
 
 
645
  </div>
646
+ </section>
647
+ </div>
648
+
649
+ <!-- Footer -->
650
+ <footer class="py-8 text-center text-gray-500 text-sm">
651
+ <p>© 2023 NeonCasino. All rights reserved. Gambling can be addictive. Please play responsibly.</p>
652
+ <p class="mt-2">Minimum age 18+. Terms and conditions apply.</p>
653
+ </footer>
654
+
655
+ <!-- Invite Modal -->
656
+ <div id="inviteModal" class="modal-overlay hidden">
657
+ <div class="glass-panel p-8 max-w-md w-full relative">
658
+ <button id="closeModal" class="absolute top-4 right-4 text-gray-400 hover:text-white">
659
+ <i class="fas fa-times text-2xl"></i>
660
+ </button>
661
+
662
+ <div class="text-center mb-6">
663
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-neon-orange to-neon-yellow flex items-center justify-center mx-auto mb-4">
664
+ <i class="fas fa-gift text-2xl text-dark-bg"></i>
665
  </div>
666
+ <h3 class="text-2xl font-bold text-white mb-2">Invite Friends & Earn</h3>
667
+ <p class="text-gray-300">Share your referral link and earn 100 coins per friend!</p>
 
 
668
  </div>
669
+
670
+ <div class="mb-6">
671
+ <label class="block text-gray-400 mb-2">Your Referral Link</label>
672
+ <div class="flex">
673
+ <input type="text" value="https://neoncasino.com/ref/player32" class="flex-grow bg-glass-bg border border-gray-700 rounded-l-lg py-3 px-4 text-white focus:outline-none focus:border-neon-yellow" readonly>
674
+ <button class="gradient-btn px-4 rounded-r-lg font-bold">
675
+ <i class="fas fa-copy"></i>
676
+ </button>
 
 
 
677
  </div>
 
 
 
 
678
  </div>
679
+
680
+ <div class="mb-6">
681
+ <label class="block text-gray-400 mb-3">Share via</label>
682
+ <div class="flex justify-center space-x-4">
683
+ <button class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center">
684
+ <i class="fab fa-facebook-f text-white"></i>
685
+ </button>
686
+ <button class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center">
687
+ <i class="fab fa-whatsapp text-white"></i>
688
+ </button>
689
+ <button class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center">
690
+ <i class="fas fa-envelope text-white"></i>
691
+ </button>
692
+ <button class="w-12 h-12 rounded-full bg-purple-600 flex items-center justify-center">
693
+ <i class="fab fa-discord text-white"></i>
694
+ </button>
695
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
696
  </div>
697
 
698
+ <div class="glass-panel p-4 rounded-lg">
699
+ <h4 class="font-bold text-neon-yellow mb-2">Your Referral Progress</h4>
700
+ <div class="flex items-center mb-2">
701
+ <div class="flex-grow h-3 bg-gray-800 rounded-full">
702
+ <div class="h-3 bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full" style="width: 60%"></div>
703
+ </div>
704
+ <span class="ml-3 font-bold">3/5</span>
 
 
 
705
  </div>
706
+ <p class="text-sm text-gray-400">Invite 2 more friends to unlock a 500 coin bonus!</p>
707
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
708
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
709
  </div>
710
+
711
+ <script>
712
+ // Countdown Timer
713
+ function updateCountdown() {
714
+ const now = new Date();
715
+ const tomorrow = new Date(now);
716
+ tomorrow.setDate(tomorrow.getDate() + 1);
717
+ tomorrow.setHours(0, 0, 0, 0);
718
+
719
+ const diff = tomorrow - now;
720
+
721
+ const hours = Math.floor(diff / (1000 * 60 * 60));
722
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
723
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
724
+
725
+ document.getElementById('countdown').textContent =
726
+ `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 
 
 
 
 
 
 
 
 
 
 
 
727
  }
728
+
729
+ setInterval(updateCountdown, 1000);
730
+ updateCountdown();
731
+
732
+ // Modal functionality
733
+ const inviteBtn = document.getElementById('inviteBtn');
734
+ const inviteModal = document.getElementById('inviteModal');
735
+ const closeModal = document.getElementById('closeModal');
736
+
737
+ inviteBtn.addEventListener('click', () => {
738
+ inviteModal.classList.remove('hidden');
739
+ });
740
+
741
+ closeModal.addEventListener('click', () => {
742
+ inviteModal.classList.add('hidden');
743
+ });
744
+
745
+ // Close modal when clicking outside
746
+ window.addEventListener('click', (event) => {
747
+ if (event.target === inviteModal) {
748
+ inviteModal.classList.add('hidden');
749
+ }
750
+ });
751
+
752
+ // Add animation to cards on scroll
753
+ const observerOptions = {
754
+ root: null,
755
+ rootMargin: '0px',
756
+ threshold: 0.1
757
+ };
758
+
759
+ const observer = new IntersectionObserver((entries) => {
760
+ entries.forEach(entry => {
761
+ if (entry.isIntersecting) {
762
+ entry.target.style.opacity = 1;
763
+ entry.target.style.transform = 'translateY(0)';
764
+ }
765
+ });
766
+ }, observerOptions);
767
+
768
+ document.querySelectorAll('.glass-panel').forEach(panel => {
769
+ panel.style.opacity = 0;
770
+ panel.style.transform = 'translateY(20px)';
771
+ panel.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
772
+ observer.observe(panel);
773
+ });
774
+ </script>
775
  <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>
776
  </html>