Hugging Face's logo

Spaces:
ProjectGenesis
/
tournament-ui-redesign
Running

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

reduce the size of the user stats section - Initial Deployment

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