Hugging Face's logo

Spaces:
ProjectGenesis
/
vip-tier-ui
Running

App Files Community
ProjectGenesis commited on
Commit
e29a950
·
verified ·
1 Parent(s): f6f78b1

Remove "CLAIM VIP PACKAGE" Button - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +340 -464
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>NioCasino VIP Lounge</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
  <script>
@@ -11,595 +11,471 @@
11
  theme: {
12
  extend: {
13
  colors: {
14
- neonYellow: '#ffeb3b',
15
- neonOrange: '#ff9800',
16
- darkBg: '#0a0a12',
17
- cardBg: 'rgba(25, 25, 35, 0.6)',
18
- glowYellow: 'rgba(255, 235, 59, 0.3)',
19
- glowOrange: 'rgba(255, 152, 0, 0.3)'
20
- },
21
- boxShadow: {
22
- 'neon-yellow': '0 0 15px rgba(255, 235, 59, 0.7)',
23
- 'neon-orange': '0 0 15px rgba(255, 152, 0, 0.7)',
24
- 'double-glow': '0 0 10px rgba(255, 235, 59, 0.7), 0 0 20px rgba(255, 152, 0, 0.5)'
25
  }
26
  }
27
  }
28
  }
29
  </script>
30
  <style>
31
- @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');
32
-
33
  body {
34
- font-family: 'Roboto', sans-serif;
35
- background: radial-gradient(circle at top, #1a1a2e, #0a0a12);
36
- color: #f5f5f5;
37
  min-height: 100vh;
38
  overflow-x: hidden;
 
 
 
 
 
 
 
39
  position: relative;
 
40
  }
41
-
42
- body::before {
43
  content: '';
44
  position: absolute;
45
  top: 0;
46
- left: 0;
47
- right: 0;
48
  height: 100%;
49
- background: radial-gradient(circle at 20% 10%, rgba(255, 235, 59, 0.05) 0%, transparent 25%),
50
- radial-gradient(circle at 80% 20%, rgba(255, 152, 0, 0.05) 0%, transparent 25%);
51
- z-index: -1;
 
 
 
 
52
  }
53
-
54
- .orbitron {
55
- font-family: 'Orbitron', sans-serif;
 
56
  }
57
-
58
- .glass-card {
59
- background: rgba(25, 25, 35, 0.6);
60
- backdrop-filter: blur(10px);
61
- border-radius: 16px;
62
- border: 1px solid rgba(255, 255, 255, 0.1);
63
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
64
  }
65
-
66
- .neon-border {
67
- border: 1px solid rgba(255, 235, 59, 0.3);
 
68
  }
69
-
70
- .neon-glow {
71
- box-shadow: 0 0 15px rgba(255, 235, 59, 0.3);
72
- }
73
-
74
  .neon-button {
75
- background: linear-gradient(45deg, rgba(255, 152, 0, 0.8), rgba(255, 235, 59, 0.8));
76
- color: #0a0a12;
77
- border: none;
 
 
 
 
 
78
  position: relative;
79
  overflow: hidden;
80
- transition: all 0.3s ease;
81
- box-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
82
  }
83
-
84
  .neon-button:hover {
85
- box-shadow: 0 0 20px rgba(255, 235, 59, 0.8), 0 0 30px rgba(255, 152, 0, 0.6);
86
- transform: translateY(-2px);
87
- }
88
-
89
- .neon-button::after {
90
- content: '';
91
- position: absolute;
92
- top: -50%;
93
- left: -60%;
94
- width: 20px;
95
- height: 200%;
96
- background: rgba(255, 255, 255, 0.5);
97
- transform: rotate(25deg);
98
- transition: all 0.6s;
99
  }
100
-
101
- .neon-button:hover::after {
102
- left: 120%;
 
 
 
103
  }
104
-
105
- .tier-badge {
106
- border: 2px solid;
107
- border-image: linear-gradient(45deg, #ffeb3b, #ff9800) 1;
108
- box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
 
109
  position: relative;
110
  }
111
-
112
- .tier-badge::after {
113
  content: '';
114
  position: absolute;
115
- top: -4px;
116
- left: -4px;
117
- right: -4px;
118
- bottom: -4px;
119
- border-radius: 50%;
120
- border: 2px solid rgba(255, 235, 59, 0.3);
121
- animation: pulse 2s infinite;
122
- }
123
-
124
- .progress-ring {
125
- transform: rotate(-90deg);
126
  }
127
-
128
- .progress-ring__circle {
129
- transition: stroke-dashoffset 0.5s ease;
130
- stroke-linecap: round;
131
  }
132
-
133
- .tier-icon {
 
 
 
 
 
 
 
134
  transition: all 0.3s ease;
135
- cursor: pointer;
136
- border: 2px solid transparent;
137
  }
138
-
139
- .tier-icon:hover {
140
  transform: scale(1.1);
141
- box-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
142
- border-color: rgba(255, 235, 59, 0.5);
143
- }
144
-
145
- .perk-card {
146
- transition: all 0.3s ease;
147
- }
148
-
149
- .perk-card:hover {
150
- transform: translateY(-5px);
151
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 235, 59, 0.4);
152
  }
153
-
154
- .locked {
155
  filter: grayscale(0.8);
156
- opacity: 0.7;
157
  }
158
-
159
- .tooltip {
160
- visibility: hidden;
161
- opacity: 0;
162
- transition: all 0.3s ease;
 
 
 
 
 
 
163
  z-index: 10;
164
  }
165
-
166
- .tier-icon:hover .tooltip {
167
- visibility: visible;
168
- opacity: 1;
169
- transform: translate(-50%, 0);
 
 
 
 
 
170
  }
171
-
172
- .countdown-digit {
173
- background: rgba(25, 25, 35, 0.8);
174
- border: 1px solid rgba(255, 235, 59, 0.3);
175
- box-shadow: 0 0 8px rgba(255, 235, 59, 0.2);
176
  }
177
-
178
- @keyframes pulse {
179
- 0% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.4); }
180
- 70% { box-shadow: 0 0 0 10px rgba(255, 235, 59, 0); }
181
- 100% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0); }
182
  }
183
-
184
- @keyframes flare {
185
- 0% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.6); }
186
- 70% { box-shadow: 0 0 0 20px rgba(255, 235, 59, 0); }
187
- 100% { box-shadow: 0 0 0 0 rgba(255, 235, 59, 0); }
188
  }
189
-
190
- .flare-animation {
191
- animation: flare 2s infinite;
 
 
192
  }
193
-
194
- @media (max-width: 768px) {
195
- .tier-scroll {
196
- overflow-x: auto;
197
- flex-wrap: nowrap;
198
- padding-bottom: 20px;
199
- }
200
-
201
- .tier-scroll::-webkit-scrollbar {
202
- height: 6px;
203
- }
204
-
205
- .tier-scroll::-webkit-scrollbar-thumb {
206
- background: rgba(255, 235, 59, 0.5);
207
- border-radius: 10px;
208
- }
209
  }
210
  </style>
211
  </head>
212
- <body class="relative min-h-screen pb-20">
213
- <!-- Background Effects -->
214
- <div class="absolute inset-0">
215
- <div class="absolute top-10 left-1/4 w-64 h-64 rounded-full bg-yellow-500 opacity-10 blur-3xl"></div>
216
- <div class="absolute bottom-1/3 right-1/4 w-80 h-80 rounded-full bg-orange-500 opacity-10 blur-3xl"></div>
217
- <div class="absolute top-1/2 right-1/3 w-40 h-40 rounded-full bg-yellow-500 opacity-15 blur-3xl"></div>
218
- </div>
219
-
220
- <!-- Main Container -->
221
- <div class="container mx-auto px-4 py-8 relative z-10">
222
  <!-- Header -->
223
- <header class="flex justify-between items-center py-4 mb-8">
224
- <div class="flex items-center">
225
- <div class="w-12 h-12 rounded-full bg-gradient-to-br from-neonYellow to-neonOrange flex items-center justify-center">
226
- <span class="orbitron font-bold text-xl text-darkBg">N</span>
227
- </div>
228
- <h1 class="orbitron text-2xl ml-3 font-bold bg-clip-text text-transparent bg-gradient-to-r from-neonYellow to-neonOrange">NioCasino</h1>
229
- </div>
230
  <div class="flex items-center space-x-4">
231
- <div class="relative group">
232
- <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
233
- <i class="fas fa-bell text-neonYellow"></i>
234
- </div>
235
- <span class="absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full border-2 border-darkBg"></span>
236
  </div>
237
- <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
238
- <i class="fas fa-user text-neonYellow"></i>
239
  </div>
240
  </div>
241
  </header>
242
-
243
  <!-- Hero Section -->
244
- <section class="glass-card p-6 md:p-4 mb-8 text-center relative overflow-hidden">
245
- <div class="absolute inset-0 overflow-hidden">
246
- <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-neonYellow/5 via-transparent to-neonOrange/5 animate-pulse"></div>
247
- <div class="absolute top-0 left-1/4 w-1/2 h-1 bg-gradient-to-r from-transparent via-neonYellow to-transparent animate-pulse"></div>
248
- <div class="absolute bottom-0 right-1/4 w-1/2 h-1 bg-gradient-to-r from-transparent via-neonOrange to-transparent animate-pulse"></div>
249
- </div>
250
-
251
- <div class="flex flex-col items-center relative z-10">
252
- <h2 class="text-gray-300 text-lg mb-1 tracking-wider">YOUR CURRENT VIP STATUS</h2>
253
-
254
- <div class="tier-badge w-32 h-32 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-6 relative">
255
- <div class="absolute inset-0 rounded-full bg-gradient-to-br from-neonYellow/20 to-neonOrange/20 animate-pulse"></div>
256
- <div class="orbitron text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-neonYellow to-neonOrange animate-pulse">NioGold</div>
257
- </div>
258
-
259
- <!-- Circular Progress -->
260
- <div class="relative mb-6">
261
- <svg class="progress-ring w-48 h-48" viewBox="0 0 120 120">
262
- <circle class="progress-ring__circle" stroke="rgba(40, 40, 50, 0.8)" stroke-width="10" fill="transparent" r="52" cx="60" cy="60"/>
263
- <circle class="progress-ring__circle" stroke="url(#gradient)" stroke-width="10" stroke-dasharray="326.56" stroke-dashoffset="130.624" fill="transparent" r="52" cx="60" cy="60"/>
264
- <defs>
265
- <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
266
- <stop offset="0%" stop-color="#ffeb3b" />
267
- <stop offset="50%" stop-color="#ffc107" />
268
- <stop offset="100%" stop-color="#ff9800" />
269
- </linearGradient>
270
- </defs>
271
- </svg>
272
- <div class="absolute inset-0 flex flex-col items-center justify-center">
273
- <div class="orbitron text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-neonYellow to-neonOrange">60%</div>
274
- <div class="text-sm mt-1 text-gray-300 tracking-wider">TO NEXT TIER</div>
275
  </div>
276
  </div>
277
-
278
- <div class="orbitron text-2xl mb-4">
279
- <span class="bg-clip-text text-transparent bg-gradient-to-r from-neonYellow to-neonOrange">12,600</span>
280
- <span class="text-gray-300">XP</span>
 
 
281
  </div>
282
- <p class="text-gray-300 mb-6 tracking-wider">ONLY <span class="text-neonOrange font-bold">2,400 XP</span> TO UNLOCK <span class="text-neonOrange font-bold">NioPrime</span></p>
283
-
284
- <button class="neon-button orbitron font-bold py-4 px-10 rounded-full text-darkBg text-lg tracking-wider hover:scale-105 transition-transform duration-300">
285
- HOW TO RANK UP <i class="fas fa-arrow-up ml-2"></i>
 
 
 
 
286
  </button>
287
  </div>
288
  </section>
289
-
290
- <!-- VIP Tier Selector -->
291
- <section class="mb-10">
292
- <h2 class="orbitron text-xl md:text-2xl mb-6 text-center">VIP Tier Progress</h2>
293
- <div class="tier-scroll flex justify-center space-x-4 md:space-x-6 lg:space-x-8 pb-4">
294
- <!-- Tier 1 -->
295
- <div class="tier-icon relative w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
296
- <div class="orbitron text-lg text-neonYellow">1</div>
297
- <div class="absolute top-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-darkBg"></div>
298
- <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 w-48 bg-gray-800 rounded-lg shadow-lg p-4">
299
- <h3 class="orbitron text-neonYellow mb-2">Bronze</h3>
300
- <p class="text-xs text-gray-300 mb-1">5,000 XP</p>
301
- <ul class="text-xs text-gray-300">
302
- <li class="flex items-start mb-1">
303
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
304
- <span>5% Cashback</span>
305
- </li>
306
- <li class="flex items-start">
307
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
308
- <span>Weekly Free Spins</span>
309
- </li>
310
- </ul>
311
  </div>
 
312
  </div>
313
 
314
- <!-- Tier 2 -->
315
- <div class="tier-icon relative w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center">
316
- <div class="orbitron text-lg text-neonYellow">2</div>
317
- <div class="absolute top-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-darkBg"></div>
318
- <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 w-48 bg-gray-800 rounded-lg shadow-lg p-4">
319
- <h3 class="orbitron text-neonYellow mb-2">Silver</h3>
320
- <p class="text-xs text-gray-300 mb-1">10,000 XP</p>
321
- <ul class="text-xs text-gray-300">
322
- <li class="flex items-start mb-1">
323
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
324
- <span>7% Cashback</span>
325
- </li>
326
- <li class="flex items-start mb-1">
327
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
328
- <span>Monthly Bonus</span>
329
- </li>
330
- <li class="flex items-start">
331
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
332
- <span>Priority Support</span>
333
- </li>
334
- </ul>
335
  </div>
 
336
  </div>
337
 
338
- <!-- Tier 3 (Current) -->
339
- <div class="tier-icon relative w-16 h-16 rounded-full bg-gradient-to-br from-neonYellow/20 to-neonOrange/20 flex items-center justify-center border-2 border-neonYellow">
340
- <div class="orbitron text-lg text-neonYellow">3</div>
341
- <div class="absolute top-0 right-0 w-5 h-5 bg-green-500 rounded-full border-2 border-darkBg"></div>
342
- <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 w-48 bg-gray-800 rounded-lg shadow-lg p-4">
343
- <h3 class="orbitron text-neonYellow mb-2">NioGold</h3>
344
- <p class="text-xs text-gray-300 mb-1">15,000 XP</p>
345
- <ul class="text-xs text-gray-300">
346
- <li class="flex items-start mb-1">
347
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
348
- <span>10% Cashback</span>
349
- </li>
350
- <li class="flex items-start mb-1">
351
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
352
- <span>Personal Manager</span>
353
- </li>
354
- <li class="flex items-start mb-1">
355
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
356
- <span>Exclusive Events</span>
357
- </li>
358
- <li class="flex items-start">
359
- <i class="fas fa-check text-green-500 mr-2 mt-1 text-xs"></i>
360
- <span>Higher Withdrawals</span>
361
- </li>
362
- </ul>
363
  </div>
 
364
  </div>
365
 
366
- <!-- Tier 4 (Locked) -->
367
- <div class="tier-icon relative w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center locked">
368
- <div class="orbitron text-lg text-gray-500">4</div>
369
- <div class="absolute top-0 right-0 w-5 h-5 bg-gray-500 rounded-full border-2 border-darkBg flex items-center justify-center">
370
- <i class="fas fa-lock text-xxs"></i>
371
- </div>
372
- <div class="tooltip absolute bottom-full left-1/2 transform -translate-x-1/2 mb-3 w-48 bg-gray-800 rounded-lg shadow-lg p-4">
373
- <h3 class="orbitron text-gray-400 mb-2">NioPrime</h3>
374
- <p class="text-xs text-gray-500 mb-1">25,000 XP</p>
375
- <ul class="text-xs text-gray-500">
376
- <li class="flex items-start mb-1">
377
- <i class="fas fa-lock text-gray-500 mr-2 mt-1 text-xs"></i>
378
- <span>15% Cashback</span>
379
- </li>
380
- <li class="flex items-start mb-1">
381
- <i class="fas fa-lock text-gray-500 mr-2 mt-1 text-xs"></i>
382
- <span>Dedicated Manager</span>
383
- </li>
384
- <li class="flex items-start mb-1">
385
- <i class="fas fa-lock text-gray-500 mr-2 mt-1 text-xs"></i>
386
- <span>VIP Events & Trips</span>
387
- </li>
388
- <li class="flex items-start">
389
- <i class="fas fa-lock text-gray-500 mr-2 mt-1 text-xs"></i>
390
- <span>Exclusive Bonuses</span>
391
- </li>
392
- </ul>
393
  </div>
 
394
  </div>
395
 
396
- <!-- Tier 5 (Locked) -->
397
- <div class="tier-icon relative w-16 h-16 rounded-full bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center locked">
398
- <div class="orbitron text-lg text-gray-500">5</div>
399
- <div class="absolute top-0 right-0 w-5 h-5 bg-gray-500 rounded-full border-2 border-darkBg flex items-center justify-center">
400
- <i class="fas fa-lock text-xxs"></i>
401
  </div>
 
402
  </div>
403
 
404
- <!-- Claim VIP Package Button -->
405
- <button class="flare-animation neon-button orbitron font-bold py-3 px-6 rounded-full text-darkBg flex items-center">
406
- Claim VIP Package
407
- <i class="fas fa-gift ml-2"></i>
408
- </button>
 
 
409
  </div>
410
  </section>
411
-
412
- <!-- Progress & Stats Panel -->
413
- <section class="glass-card p-6 mb-10">
414
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
415
- <div class="text-center p-4">
416
- <div class="orbitron text-3xl text-neonYellow mb-2">12,600</div>
417
- <div class="text-gray-400">XP Total</div>
 
418
  </div>
419
- <div class="text-center p-4">
420
- <div class="orbitron text-3xl text-neonYellow mb-2">87</div>
421
- <div class="text-gray-400">Days Active</div>
422
  </div>
423
- <div class="text-center p-4">
424
- <div class="orbitron text-3xl text-neonYellow mb-2">$4,250</div>
425
- <div class="text-gray-400">Total Spent</div>
426
  </div>
427
- </div>
428
-
429
- <div class="flex justify-between items-center mb-6">
430
- <div>
431
- <h3 class="orbitron text-xl mb-1">Your Tier Rank</h3>
432
- <p class="text-gray-400">Among all players</p>
433
  </div>
434
- <div class="orbitron text-3xl text-neonOrange">5 <span class="text-gray-400 text-xl">of 10</span></div>
435
  </div>
436
 
437
- <div class="border-t border-gray-700 pt-6">
438
- <div class="flex justify-between items-center cursor-pointer" id="tips-header">
439
- <h3 class="orbitron text-lg text-neonYellow">Tips to Rank Up Faster</h3>
440
- <i class="fas fa-chevron-down text-neonYellow" id="tips-icon"></i>
441
  </div>
442
- <div class="mt-4 text-gray-300 text-sm hidden" id="tips-content">
443
- <ul class="space-y-2">
444
- <li class="flex items-start">
445
- <i class="fas fa-coins text-neonYellow mt-1 mr-3"></i>
446
- <div>
447
- <h4 class="font-medium">Purchase More</h4>
448
- <p class="text-gray-400">Earn 10 XP for every $1 spent</p>
449
- </div>
450
- </li>
451
- <li class="flex items-start">
452
- <i class="fas fa-user-friends text-neonYellow mt-1 mr-3"></i>
453
- <div>
454
- <h4 class="font-medium">Refer Friends</h4>
455
- <p class="text-gray-400">Get 500 XP for each friend who deposits</p>
456
- </div>
457
- </li>
458
- <li class="flex items-start">
459
- <i class="fas fa-tasks text-neonYellow mt-1 mr-3"></i>
460
- <div>
461
- <h4 class="font-medium">Complete Tasks</h4>
462
- <p class="text-gray-400">Daily challenges offer bonus XP</p>
463
- </div>
464
- </li>
465
  </ul>
466
  </div>
467
  </div>
468
  </section>
469
-
470
- <!-- Exclusive VIP Perks Section -->
471
- <section class="mb-10">
472
- <h2 class="orbitron text-xl md:text-2xl mb-6 text-center">Exclusive VIP Perks</h2>
473
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
474
- <div class="perk-card glass-card p-4 text-center">
475
- <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mx-auto mb-4">
476
- <i class="fas fa-percentage text-2xl text-neonYellow"></i>
 
477
  </div>
478
- <h3 class="orbitron text-lg text-neonYellow mb-1">Cashback</h3>
479
- <p class="text-sm text-gray-400">10% weekly refund</p>
480
  </div>
481
 
482
- <div class="perk-card glass-card p-4 text-center">
483
- <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mx-auto mb-4">
484
- <i class="fas fa-headset text-2xl text-neonYellow"></i>
 
485
  </div>
486
- <h3 class="orbitron text-lg text-neonYellow mb-1">Dedicated Manager</h3>
487
- <p class="text-sm text-gray-400">24/7 personal support</p>
488
  </div>
489
 
490
- <div class="perk-card glass-card p-4 text-center">
491
- <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mx-auto mb-4">
492
- <i class="fas fa-dice text-2xl text-neonYellow"></i>
 
 
 
 
 
 
493
  </div>
494
- <h3 class="orbitron text-lg text-neonYellow mb-1">Free Spins</h3>
495
- <p class="text-sm text-gray-400">Monthly free spins</p>
496
  </div>
497
 
498
- <div class="perk-card glass-card p-4 text-center locked">
499
- <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mx-auto mb-4 relative">
500
- <i class="fas fa-rocket text-2xl text-gray-500"></i>
501
- <div class="absolute bottom-0 right-0 w-5 h-5 bg-gray-700 rounded-full flex items-center justify-center">
502
- <i class="fas fa-lock text-xxs text-gray-500"></i>
503
- </div>
 
 
 
504
  </div>
505
- <h3 class="orbitron text-lg text-gray-500 mb-1">Early Access</h3>
506
- <p class="text-sm text-gray-500">New games preview</p>
507
  </div>
508
  </div>
509
 
510
- <div class="text-center">
511
- <button class="neon-button orbitron font-bold py-3 px-8 rounded-full text-darkBg flex items-center mx-auto">
512
- View Full VIP Benefits Chart
513
- <i class="fas fa-arrow-right ml-2"></i>
514
  </button>
515
  </div>
516
  </section>
517
-
518
- <!-- Claimable Rewards Section -->
519
- <section class="glass-card p-6 mb-10 text-center">
520
- <h2 class="orbitron text-xl mb-4">Claim VIP Bonus</h2>
521
- <p class="text-gray-400 mb-6">Your next bonus is available in:</p>
522
-
523
- <div class="flex justify-center space-x-4 mb-6">
524
- <div class="countdown-digit orbitron w-16 h-16 rounded-lg flex items-center justify-center text-2xl text-neonYellow">02</div>
525
- <div class="countdown-digit orbitron w-16 h-16 rounded-lg flex items-center justify-center text-2xl text-neonYellow">45</div>
526
- <div class="countdown-digit orbitron w-16 h-16 rounded-lg flex items-center justify-center text-2xl text-neonYellow">18</div>
 
 
 
 
 
527
  </div>
528
 
529
- <button class="neon-button orbitron font-bold py-3 px-8 rounded-full text-darkBg mx-auto">
530
- Claim Bonus Now
531
  </button>
532
  </section>
533
-
534
- <!-- CTA Panel -->
535
- <section class="text-center">
536
- <button class="neon-button orbitron font-bold py-4 px-12 rounded-full text-darkBg text-lg mb-4 w-full max-w-md">
537
- Exclusive VIP Packages
538
  </button>
539
- <button class="orbitron font-bold py-3 px-8 rounded-full border border-neonYellow text-neonYellow bg-transparent w-full max-w-md">
540
- Share with Friends
541
  </button>
542
  </section>
 
 
 
 
 
543
  </div>
544
-
545
  <script>
546
  // Toggle tips section
547
- document.getElementById('tips-header').addEventListener('click', function() {
548
- const content = document.getElementById('tips-content');
549
- const icon = document.getElementById('tips-icon');
550
 
551
- content.classList.toggle('hidden');
552
- icon.classList.toggle('fa-chevron-down');
553
- icon.classList.toggle('fa-chevron-up');
 
 
 
 
554
  });
555
-
556
- // Simulate countdown timer
557
  function updateCountdown() {
558
- // This is a simulation - in a real app you would calculate actual time remaining
559
- const hours = document.querySelectorAll('.countdown-digit')[0];
560
- const minutes = document.querySelectorAll('.countdown-digit')[1];
561
- const seconds = document.querySelectorAll('.countdown-digit')[2];
562
-
563
- let h = parseInt(hours.textContent);
564
- let m = parseInt(minutes.textContent);
565
- let s = parseInt(seconds.textContent);
566
-
567
- s--;
568
-
569
- if (s < 0) {
570
- s = 59;
571
- m--;
572
 
573
- if (m < 0) {
574
- m = 59;
575
- h--;
 
 
 
 
576
 
577
- if (h < 0) {
578
- h = 23;
 
579
  }
580
  }
 
 
 
 
581
  }
582
-
583
- hours.textContent = h.toString().padStart(2, '0');
584
- minutes.textContent = m.toString().padStart(2, '0');
585
- seconds.textContent = s.toString().padStart(2, '0');
586
  }
587
 
 
588
  setInterval(updateCountdown, 1000);
589
-
590
- // Add hover effects to tier icons
591
- const tierIcons = document.querySelectorAll('.tier-icon');
592
- tierIcons.forEach(icon => {
593
- icon.addEventListener('mouseenter', () => {
594
- if (!icon.classList.contains('locked')) {
595
- icon.style.boxShadow = '0 0 20px rgba(255, 235, 59, 0.5)';
596
- }
597
- });
598
-
599
- icon.addEventListener('mouseleave', () => {
600
- icon.style.boxShadow = '';
601
- });
602
- });
603
  </script>
604
  <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/vip-tier-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
605
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>VIP Tiers | Futuristic Casino</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
  <script>
 
11
  theme: {
12
  extend: {
13
  colors: {
14
+ 'neon-orange': '#FFA500',
15
+ 'warm-gold': '#FFD700',
 
 
 
 
 
 
 
 
 
16
  }
17
  }
18
  }
19
  }
20
  </script>
21
  <style>
 
 
22
  body {
23
+ background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
24
+ color: rgba(255, 255, 255, 0.9);
25
+ font-family: 'Segoe UI', system-ui, sans-serif;
26
  min-height: 100vh;
27
  overflow-x: hidden;
28
+ }
29
+
30
+ .glass-panel {
31
+ backdrop-filter: blur(16px);
32
+ background: rgba(255, 255, 255, 0.05);
33
+ border: 1px solid rgba(255, 255, 255, 0.15);
34
+ border-radius: 16px;
35
  position: relative;
36
+ overflow: hidden;
37
  }
38
+
39
+ .glass-panel::after {
40
  content: '';
41
  position: absolute;
42
  top: 0;
43
+ left: -100%;
44
+ width: 200%;
45
  height: 100%;
46
+ background: linear-gradient(
47
+ 120deg,
48
+ rgba(255, 255, 255, 0.05) 0%,
49
+ rgba(255, 255, 255, 0.3) 50%,
50
+ rgba(255, 255, 255, 0.05) 100%
51
+ );
52
+ animation: glass-shine 4s ease-in-out infinite;
53
  }
54
+
55
+ @keyframes glass-shine {
56
+ 0% { left: -100%; }
57
+ 100% { left: 100%; }
58
  }
59
+
60
+ .glow-border {
61
+ box-shadow: 0 0 10px rgba(255, 165, 0, 0.3),
62
+ 0 0 20px rgba(255, 165, 0, 0.1);
 
 
 
63
  }
64
+
65
+ .glow-border-hover:hover {
66
+ box-shadow: 0 0 15px rgba(255, 165, 0, 0.5),
67
+ 0 0 30px rgba(255, 165, 0, 0.2);
68
  }
69
+
 
 
 
 
70
  .neon-button {
71
+ background: rgba(30, 30, 30, 0.4);
72
+ border: 1px solid rgba(255, 165, 0, 0.3);
73
+ border-radius: 12px;
74
+ color: rgba(255, 255, 255, 0.9);
75
+ text-transform: uppercase;
76
+ font-weight: 600;
77
+ letter-spacing: 1px;
78
+ transition: all 0.3s ease;
79
  position: relative;
80
  overflow: hidden;
 
 
81
  }
82
+
83
  .neon-button:hover {
84
+ transform: scale(1.05);
85
+ color: #FFD700;
86
+ border-color: rgba(255, 215, 0, 0.5);
87
+ box-shadow: 0 0 15px rgba(255, 165, 0, 0.4);
88
+ background: rgba(40, 40, 40, 0.6);
 
 
 
 
 
 
 
 
 
89
  }
90
+
91
+ .progress-bar {
92
+ height: 12px;
93
+ border-radius: 10px;
94
+ background: rgba(255, 255, 255, 0.1);
95
+ overflow: hidden;
96
  }
97
+
98
+ .progress-fill {
99
+ height: 100%;
100
+ background: linear-gradient(90deg, #FFA500, #FFD700);
101
+ border-radius: 10px;
102
+ width: 65%;
103
  position: relative;
104
  }
105
+
106
+ .progress-fill::after {
107
  content: '';
108
  position: absolute;
109
+ top: 0;
110
+ left: 0;
111
+ right: 0;
112
+ bottom: 0;
113
+ background: linear-gradient(
114
+ 90deg,
115
+ transparent,
116
+ rgba(255, 255, 255, 0.3),
117
+ transparent
118
+ );
119
+ animation: progress-shine 2s infinite;
120
  }
121
+
122
+ @keyframes progress-shine {
123
+ 0% { transform: translateX(-100%); }
124
+ 100% { transform: translateX(100%); }
125
  }
126
+
127
+ .tier-badge {
128
+ width: 100px;
129
+ height: 100px;
130
+ border-radius: 50%;
131
+ display: flex;
132
+ align-items: center;
133
+ justify-content: center;
134
+ position: relative;
135
  transition: all 0.3s ease;
 
 
136
  }
137
+
138
+ .tier-badge:hover {
139
  transform: scale(1.1);
 
 
 
 
 
 
 
 
 
 
 
140
  }
141
+
142
+ .tier-badge.locked {
143
  filter: grayscale(0.8);
144
+ opacity: 0.6;
145
  }
146
+
147
+ .tier-badge.locked::before {
148
+ content: "\f023";
149
+ font-family: "Font Awesome 6 Free";
150
+ font-weight: 900;
151
+ position: absolute;
152
+ top: 50%;
153
+ left: 50%;
154
+ transform: translate(-50%, -50%);
155
+ font-size: 24px;
156
+ color: rgba(255, 255, 255, 0.7);
157
  z-index: 10;
158
  }
159
+
160
+ .tier-badge.locked::after {
161
+ content: '';
162
+ position: absolute;
163
+ top: 0;
164
+ left: 0;
165
+ width: 100%;
166
+ height: 100%;
167
+ background: rgba(0, 0, 0, 0.6);
168
+ border-radius: 50%;
169
  }
170
+
171
+ .perk-icon {
172
+ font-size: 32px;
173
+ margin-bottom: 12px;
174
+ transition: all 0.3s ease;
175
  }
176
+
177
+ .perk-card.locked .perk-icon {
178
+ filter: grayscale(1);
179
+ opacity: 0.5;
 
180
  }
181
+
182
+ .pulse {
183
+ animation: pulse 2s infinite;
 
 
184
  }
185
+
186
+ @keyframes pulse {
187
+ 0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); }
188
+ 70% { box-shadow: 0 0 0 10px rgba(255, 165, 0, 0); }
189
+ 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
190
  }
191
+
192
+ .countdown-digit {
193
+ background: rgba(0, 0, 0, 0.3);
194
+ border-radius: 8px;
195
+ padding: 8px 12px;
196
+ min-width: 50px;
197
+ text-align: center;
198
+ font-weight: 700;
199
+ font-size: 1.5rem;
 
 
 
 
 
 
 
200
  }
201
  </style>
202
  </head>
203
+ <body class="min-h-screen py-8 px-4 sm:px-6">
204
+ <div class="max-w-4xl mx-auto">
 
 
 
 
 
 
 
 
205
  <!-- Header -->
206
+ <header class="flex justify-between items-center mb-8">
207
+ <div class="text-xl font-bold text-[#FFD700]">NIO<span class="text-[#FFA500]">CASINO</span></div>
 
 
 
 
 
208
  <div class="flex items-center space-x-4">
209
+ <div class="glass-panel px-4 py-2 text-sm">
210
+ <i class="fas fa-coins mr-2 text-[#FFD700]"></i> 12,450
 
 
 
211
  </div>
212
+ <div class="glass-panel px-4 py-2 text-sm">
213
+ <i class="fas fa-user mr-2 text-[#FFD700]"></i> Player
214
  </div>
215
  </div>
216
  </header>
217
+
218
  <!-- Hero Section -->
219
+ <section class="glass-panel p-6 mb-8 relative">
220
+ <div class="text-center mb-6">
221
+ <div class="text-sm text-[#FFA500] mb-2">YOUR CURRENT TIER</div>
222
+ <div class="text-4xl font-bold text-[#FFD700] mb-4 animate-pulse">NioGold</div>
223
+ <div class="inline-block bg-gradient-to-r from-[#FFA500] to-[#FFD700] p-1 rounded-full">
224
+ <div class="bg-[#0a0a0a] rounded-full p-1">
225
+ <div class="w-24 h-24 rounded-full bg-gradient-to-br from-[#FFA500] to-[#8B5A00] flex items-center justify-center">
226
+ <i class="fas fa-crown text-4xl text-[#FFD700]"></i>
227
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
228
  </div>
229
  </div>
230
+ </div>
231
+
232
+ <div class="mb-6">
233
+ <div class="flex justify-between text-sm mb-2">
234
+ <span>Level Progress</span>
235
+ <span class="text-[#FFD700] font-bold">2,400 XP to reach NioPrime</span>
236
  </div>
237
+ <div class="progress-bar">
238
+ <div class="progress-fill"></div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="flex justify-center">
243
+ <button class="neon-button px-6 py-3">
244
+ How to Rank Up <i class="fas fa-arrow-up ml-2"></i>
245
  </button>
246
  </div>
247
  </section>
248
+
249
+ <!-- VIP Tier Carousel -->
250
+ <section class="mb-8">
251
+ <h2 class="text-xl font-bold mb-4 text-center">VIP TIERS</h2>
252
+ <div class="flex overflow-x-auto pb-4 space-x-4 px-2 -mx-2">
253
+ <!-- Bronze -->
254
+ <div class="flex flex-col items-center">
255
+ <div class="tier-badge glass-panel bg-gradient-to-br from-[#CD7F32] to-[#8B5A00]">
256
+ <i class="fas fa-coins text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
257
  </div>
258
+ <span class="mt-2 text-sm">Bronze</span>
259
  </div>
260
 
261
+ <!-- Silver -->
262
+ <div class="flex flex-col items-center">
263
+ <div class="tier-badge glass-panel bg-gradient-to-br from-[#C0C0C0] to-[#808080]">
264
+ <i class="fas fa-shield-alt text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
  </div>
266
+ <span class="mt-2 text-sm">Silver</span>
267
  </div>
268
 
269
+ <!-- Gold (current) -->
270
+ <div class="flex flex-col items-center">
271
+ <div class="tier-badge glass-panel glow-border bg-gradient-to-br from-[#FFD700] to-[#D4AF37]">
272
+ <i class="fas fa-crown text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
273
  </div>
274
+ <span class="mt-2 text-sm">Gold</span>
275
  </div>
276
 
277
+ <!-- Platinum -->
278
+ <div class="flex flex-col items-center">
279
+ <div class="tier-badge glass-panel bg-gradient-to-br from-[#E5E4E2] to-[#B6B6B4]">
280
+ <i class="fas fa-gem text-2xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  </div>
282
+ <span class="mt-2 text-sm">Platinum</span>
283
  </div>
284
 
285
+ <!-- Diamond (locked) -->
286
+ <div class="flex flex-col items-center">
287
+ <div class="tier-badge glass-panel locked bg-gradient-to-br from-[#b9f2ff] to-[#7EC0EE]">
288
+ <i class="fas fa-diamond text-2xl"></i>
 
289
  </div>
290
+ <span class="mt-2 text-sm">Diamond</span>
291
  </div>
292
 
293
+ <!-- NioPrime (locked) -->
294
+ <div class="flex flex-col items-center">
295
+ <div class="tier-badge glass-panel locked bg-gradient-to-br from-[#FF0000] to-[#8B0000]">
296
+ <i class="fas fa-fire text-2xl"></i>
297
+ </div>
298
+ <span class="mt-2 text-sm">NioPrime</span>
299
+ </div>
300
  </div>
301
  </section>
302
+
303
+ <!-- User Progress Panel -->
304
+ <section class="glass-panel p-6 mb-8">
305
+ <h2 class="text-xl font-bold mb-4">Your Progress</h2>
306
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
307
+ <div class="text-center">
308
+ <div class="text-2xl font-bold text-[#FFD700]">18,500</div>
309
+ <div class="text-sm opacity-80">Total XP</div>
310
  </div>
311
+ <div class="text-center">
312
+ <div class="text-2xl font-bold text-[#FFD700]">142</div>
313
+ <div class="text-sm opacity-80">Days Active</div>
314
  </div>
315
+ <div class="text-center">
316
+ <div class="text-2xl font-bold text-[#FFD700]">$4,820</div>
317
+ <div class="text-sm opacity-80">Lifetime Spent</div>
318
  </div>
319
+ <div class="text-center">
320
+ <div class="text-2xl font-bold text-[#FFD700]">5 of 10</div>
321
+ <div class="text-sm opacity-80">Tier Rank</div>
 
 
 
322
  </div>
 
323
  </div>
324
 
325
+ <div class="border-t border-[rgba(255,255,255,0.1)] pt-4">
326
+ <div class="flex justify-between items-center cursor-pointer" id="tipsToggle">
327
+ <div class="font-medium">Tips to Rank Up Faster</div>
328
+ <i class="fas fa-chevron-down text-[#FFA500]"></i>
329
  </div>
330
+ <div class="mt-3 hidden text-sm opacity-80" id="tipsContent">
331
+ <ul class="list-disc pl-5 space-y-2">
332
+ <li>Play daily to earn streak bonuses</li>
333
+ <li>Participate in weekly tournaments</li>
334
+ <li>Invite friends for referral XP</li>
335
+ <li>Complete achievement milestones</li>
336
+ <li>Make deposits to earn bonus XP</li>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
337
  </ul>
338
  </div>
339
  </div>
340
  </section>
341
+
342
+ <!-- Exclusive VIP Perks -->
343
+ <section class="mb-8">
344
+ <h2 class="text-xl font-bold mb-4">Exclusive VIP Perks</h2>
345
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
346
+ <!-- Cashback (unlocked) -->
347
+ <div class="perk-card glass-panel p-4 text-center">
348
+ <div class="perk-icon text-[#FFD700]">
349
+ <i class="fas fa-percentage"></i>
350
  </div>
351
+ <h3 class="font-bold">Cashback</h3>
352
+ <p class="text-xs opacity-80 mt-1">Up to 15% weekly</p>
353
  </div>
354
 
355
+ <!-- Free Spins (unlocked) -->
356
+ <div class="perk-card glass-panel p-4 text-center">
357
+ <div class="perk-icon text-[#FFD700]">
358
+ <i class="fas fa-dice"></i>
359
  </div>
360
+ <h3 class="font-bold">Free Spins</h3>
361
+ <p class="text-xs opacity-80 mt-1">Monthly rewards</p>
362
  </div>
363
 
364
+ <!-- Manager (locked) -->
365
+ <div class="perk-card glass-panel p-4 text-center locked">
366
+ <div class="perk-icon">
367
+ <i class="fas fa-headset"></i>
368
+ </div>
369
+ <h3 class="font-bold">VIP Manager</h3>
370
+ <p class="text-xs opacity-80 mt-1">Dedicated support</p>
371
+ <div class="mt-2 text-[#FFA500] text-xs">
372
+ <i class="fas fa-lock mr-1"></i> Unlock at Platinum
373
  </div>
 
 
374
  </div>
375
 
376
+ <!-- Early Access (locked) -->
377
+ <div class="perk-card glass-panel p-4 text-center locked">
378
+ <div class="perk-icon">
379
+ <i class="fas fa-earlybirds"></i>
380
+ </div>
381
+ <h3 class="font-bold">Early Access</h3>
382
+ <p class="text-xs opacity-80 mt-1">New games preview</p>
383
+ <div class="mt-2 text-[#FFA500] text-xs">
384
+ <i class="fas fa-lock mr-1"></i> Unlock at Diamond
385
  </div>
 
 
386
  </div>
387
  </div>
388
 
389
+ <div class="mt-6 text-center">
390
+ <button class="neon-button px-6 py-3">
391
+ View Full VIP Benefits Chart <i class="fas fa-chart-bar ml-2"></i>
 
392
  </button>
393
  </div>
394
  </section>
395
+
396
+ <!-- Claimable VIP Rewards -->
397
+ <section class="glass-panel p-6 mb-8 text-center max-w-lg mx-auto pulse">
398
+ <h2 class="text-xl font-bold mb-4">Daily VIP Bonus</h2>
399
+ <div class="mb-6">
400
+ <div class="text-3xl font-bold text-[#FFD700] mb-2">1,500 XP + $10 Free</div>
401
+ <div class="text-sm opacity-80">Available for claim in:</div>
402
+
403
+ <div class="flex justify-center space-x-2 mt-4">
404
+ <div class="countdown-digit">02</div>
405
+ <div class="leading-[3rem]">:</div>
406
+ <div class="countdown-digit">45</div>
407
+ <div class="leading-[3rem]">:</div>
408
+ <div class="countdown-digit">18</div>
409
+ </div>
410
  </div>
411
 
412
+ <button class="neon-button px-8 py-4 bg-gradient-to-r from-[#FFA500] to-[#FFD700] text-black font-bold text-lg">
413
+ CLAIM NOW <i class="fas fa-gift ml-2"></i>
414
  </button>
415
  </section>
416
+
417
+ <!-- Bottom CTA Panel -->
418
+ <section class="glass-panel p-6">
419
+ <button class="neon-button w-full py-4 mb-4 text-center bg-gradient-to-r from-[#FFA500] to-[#FFA500]/50 font-bold">
420
+ Upgrade Your Tier in Store <i class="fas fa-store ml-2"></i>
421
  </button>
422
+ <button class="neon-button w-full py-4 text-center bg-gradient-to-r from-[#1a0d00] to-[#2e1300] font-bold">
423
+ Invite Friends for XP <i class="fas fa-user-friends ml-2"></i>
424
  </button>
425
  </section>
426
+
427
+ <!-- Footer -->
428
+ <footer class="text-center text-sm opacity-70 mt-8">
429
+ © 2023 NioCasino. All rights reserved. | VIP Program Terms and Conditions
430
+ </footer>
431
  </div>
432
+
433
  <script>
434
  // Toggle tips section
435
+ document.getElementById('tipsToggle').addEventListener('click', function() {
436
+ const content = document.getElementById('tipsContent');
437
+ const icon = this.querySelector('i');
438
 
439
+ if (content.classList.contains('hidden')) {
440
+ content.classList.remove('hidden');
441
+ icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
442
+ } else {
443
+ content.classList.add('hidden');
444
+ icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
445
+ }
446
  });
447
+
448
+ // Countdown timer simulation
449
  function updateCountdown() {
450
+ // This is just a simulation - in a real app, you would calculate actual time remaining
451
+ const digits = document.querySelectorAll('.countdown-digit');
452
+ if (digits.length === 3) {
453
+ const hours = parseInt(digits[0].textContent);
454
+ const minutes = parseInt(digits[1].textContent);
455
+ const seconds = parseInt(digits[2].textContent);
 
 
 
 
 
 
 
 
456
 
457
+ let newSeconds = seconds - 1;
458
+ let newMinutes = minutes;
459
+ let newHours = hours;
460
+
461
+ if (newSeconds < 0) {
462
+ newSeconds = 59;
463
+ newMinutes--;
464
 
465
+ if (newMinutes < 0) {
466
+ newMinutes = 59;
467
+ newHours--;
468
  }
469
  }
470
+
471
+ digits[0].textContent = newHours.toString().padStart(2, '0');
472
+ digits[1].textContent = newMinutes.toString().padStart(2, '0');
473
+ digits[2].textContent = newSeconds.toString().padStart(2, '0');
474
  }
 
 
 
 
475
  }
476
 
477
+ // Update countdown every second
478
  setInterval(updateCountdown, 1000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
479
  </script>
480
  <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/vip-tier-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
481
  </html>