Hugging Face's logo

Spaces:
ProjectGenesis
/
vip-tier-ui
Running

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

Generate a responsive online casino VIP Tier Page UI using a modern, dark futuristic theme. The page must follow a black-to-warm radial gradient background using the following CSS: background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%); All cards, containers, and UI panels must use transparent glassmorphism style with no filled backgrounds: backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); Apply the following subtle shimmering animation ONLY to the Hero Section and VIP Perks Grid, not globally: .glass-card.shine::after { content: ''; position: absolute; top: 0; left: -150%; width: 250%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.03) 100% ); animation: glass-shine 8s ease-in-out infinite; pointer-events: none; } @keyframes glass-shine { 0% { left: -150%; } 100% { left: 150%; } } Visual Design: Primary accent: neon orange #FFA500 Secondary: warm yellow #FFD700 Text: white #FFFFFF, 90% opacity body, 100% headers Buttons: transparent background, neon-glow border, soft animation on hover Rounded corners, uppercased text, hover scale Layout and Components: Hero Section (with shine): Glowing badge showing user’s current VIP tier (e.g. “NioGold”) XP progress bar with percent and XP remaining “How to Rank Up” button (neon glass style) VIP Tier Carousel: Circular tier icons in scrollable row Hover reveals tier tooltip (name, XP, perks) Locked tiers dimmed with padlock CTA button at the end: “Claim VIP Package” Stats Panel: Total XP, days active, lifetime wager/spend, current tier ranking Toggle: “Tips to Rank Up Faster” VIP Perks Grid (with shine): Icon-based grid for perks: cashback, manager, free spins, etc. Locked perks are dimmed “View Full VIP Chart” button below Claimable Rewards Panel: Daily or weekly claim card with countdown Glowing “Claim Now” button Bottom CTA Panel: “Upgrade in Store” and “Invite Friends for XP” buttons stacked - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +388 -334
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>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>
@@ -12,22 +12,33 @@
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);
@@ -35,446 +46,489 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>VIP Casino Tier</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>
 
12
  extend: {
13
  colors: {
14
  'neon-orange': '#FFA500',
15
+ 'warm-yellow': '#FFD700',
16
+ 'glass-panel': 'rgba(255, 255, 255, 0.05)',
17
+ },
18
+ boxShadow: {
19
+ 'neon': '0 0 10px #FFA500, 0 0 20px #FFA500',
20
+ 'neon-hover': '0 0 15px #FFA500, 0 0 30px #FFA500',
21
+ 'neon-yellow': '0 0 10px #FFD700, 0 0 20px #FFD700',
22
+ },
23
+ animation: {
24
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
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&display=swap');
32
+
33
  body {
34
+ font-family: 'Orbitron', sans-serif;
35
  background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
36
  color: rgba(255, 255, 255, 0.9);
 
37
  min-height: 100vh;
38
  overflow-x: hidden;
39
  }
40
+
41
+ .glass-card {
42
  backdrop-filter: blur(16px);
43
  background: rgba(255, 255, 255, 0.05);
44
  border: 1px solid rgba(255, 255, 255, 0.15);
 
46
  position: relative;
47
  overflow: hidden;
48
  }
49
+
50
+ .glass-card.shine::after {
51
  content: '';
52
  position: absolute;
53
  top: 0;
54
+ left: -150%;
55
+ width: 250%;
56
  height: 100%;
57
  background: linear-gradient(
58
  120deg,
59
+ rgba(255, 255, 255, 0.03) 0%,
60
+ rgba(255, 255, 255, 0.12) 50%,
61
+ rgba(255, 255, 255, 0.03) 100%
62
  );
63
+ animation: glass-shine 8s ease-in-out infinite;
64
+ pointer-events: none;
65
  }
66
+
67
  @keyframes glass-shine {
68
+ 0% { left: -150%; }
69
+ 100% { left: 150%; }
 
 
 
 
 
70
  }
71
+
 
 
 
 
 
72
  .neon-button {
73
+ background: transparent;
74
+ border: 2px solid #FFA500;
75
+ border-radius: 9999px;
76
+ color: #FFD700;
77
  text-transform: uppercase;
78
+ font-weight: 700;
79
  letter-spacing: 1px;
80
+ box-shadow: 0 0 10px #FFA500, 0 0 20px rgba(255, 165, 0, 0.3);
81
  transition: all 0.3s ease;
 
 
82
  }
83
+
84
  .neon-button:hover {
85
  transform: scale(1.05);
86
+ box-shadow: 0 0 15px #FFA500, 0 0 30px rgba(255, 165, 0, 0.5);
87
+ background: rgba(255, 165, 0, 0.1);
88
+ }
89
+
90
+ .neon-button.yellow {
91
+ border-color: #FFD700;
92
+ box-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.3);
93
  }
94
+
95
+ .neon-button.yellow:hover {
96
+ box-shadow: 0 0 15px #FFD700, 0 0 30px rgba(255, 215, 0, 0.5);
97
+ background: rgba(255, 215, 0, 0.1);
98
+ }
99
+
100
  .progress-bar {
101
  height: 12px;
102
+ border-radius: 6px;
103
  background: rgba(255, 255, 255, 0.1);
104
  overflow: hidden;
105
  }
106
+
107
  .progress-fill {
108
  height: 100%;
109
  background: linear-gradient(90deg, #FFA500, #FFD700);
110
+ border-radius: 6px;
111
+ box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  }
113
+
114
+ .tier-icon {
115
+ width: 80px;
116
+ height: 80px;
 
 
 
 
 
117
  border-radius: 50%;
118
  display: flex;
119
  align-items: center;
120
  justify-content: center;
 
121
  transition: all 0.3s ease;
122
+ cursor: pointer;
123
  }
124
+
125
+ .tier-icon:hover {
126
  transform: scale(1.1);
127
+ box-shadow: 0 0 20px rgba(255, 165, 0, 0.7);
128
  }
129
+
130
+ .tier-icon.locked {
131
+ filter: grayscale(1) brightness(0.5);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  }
133
+
134
+ .perk-card {
 
 
135
  transition: all 0.3s ease;
136
  }
137
+
138
+ .perk-card:hover {
139
+ transform: translateY(-5px);
140
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 
 
 
 
141
  }
142
+
143
+ .perk-card.locked {
144
+ filter: grayscale(1) brightness(0.5);
145
+ opacity: 0.7;
 
146
  }
147
+
148
  .countdown-digit {
 
 
 
 
 
 
149
  font-size: 1.5rem;
150
+ font-weight: 700;
151
+ color: #FFD700;
152
+ text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
153
+ }
154
+
155
+ .glow-text {
156
+ text-shadow: 0 0 5px rgba(255, 165, 0, 0.7);
157
+ }
158
+
159
+ .tooltip {
160
+ visibility: hidden;
161
+ opacity: 0;
162
+ transition: all 0.3s ease;
163
+ position: absolute;
164
+ bottom: 125%;
165
+ left: 50%;
166
+ transform: translateX(-50%);
167
+ z-index: 10;
168
+ }
169
+
170
+ .tier-icon:hover .tooltip {
171
+ visibility: visible;
172
+ opacity: 1;
173
  }
174
  </style>
175
  </head>
176
+ <body class="min-h-screen py-8 px-4 sm:px-8">
177
+ <!-- Hero Section -->
178
+ <section class="max-w-6xl mx-auto mb-12">
179
+ <div class="glass-card shine relative p-8 rounded-2xl overflow-hidden">
180
+ <div class="flex flex-col md:flex-row items-center justify-between">
181
+ <div class="text-center md:text-left mb-8 md:mb-0">
182
+ <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-2">VIP TIER STATUS</h1>
183
+ <div class="inline-block bg-gradient-to-r from-neon-orange to-warm-yellow px-6 py-2 rounded-full mb-4">
184
+ <span class="text-black font-bold text-xl">NioGold</span>
185
+ </div>
186
+ <p class="text-warm-yellow text-lg mt-2">Elite Member Benefits</p>
187
  </div>
188
+
189
+ <div class="flex flex-col items-center">
190
+ <div class="relative w-40 h-40 rounded-full border-4 border-neon-orange flex items-center justify-center mb-4">
191
+ <div class="absolute inset-0 rounded-full border-4 border-warm-yellow animate-pulse-slow"></div>
192
+ <span class="text-4xl font-bold text-warm-yellow">IV</span>
 
 
 
 
 
 
 
 
193
  </div>
194
+ <p class="text-neon-orange font-bold">Current Tier</p>
195
  </div>
196
  </div>
197
+
198
+ <div class="mt-10">
199
+ <div class="flex justify-between mb-2">
200
+ <span class="text-sm">XP Progress</span>
201
+ <span class="text-sm font-bold text-warm-yellow">78%</span>
202
  </div>
203
  <div class="progress-bar">
204
+ <div class="progress-fill" style="width: 78%"></div>
205
+ </div>
206
+ <div class="flex justify-between mt-2">
207
+ <span class="text-sm">12,500 / 16,000 XP</span>
208
+ <span class="text-sm">3,500 XP to next tier</span>
209
  </div>
210
  </div>
211
+
212
+ <div class="mt-8 text-center">
213
+ <button class="neon-button px-8 py-3 text-lg">How to Rank Up</button>
 
 
214
  </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- VIP Tier Carousel -->
219
+ <section class="max-w-6xl mx-auto mb-12">
220
+ <h2 class="text-2xl font-bold mb-6 text-center">VIP TIER PROGRESSION</h2>
221
+
222
+ <div class="flex overflow-x-auto pb-6 px-2 hide-scrollbar">
223
+ <div class="flex space-x-6">
224
+ <!-- Tier 1 -->
225
+ <div class="tier-icon glass-card flex-shrink-0">
226
+ <div class="text-center">
227
+ <i class="fas fa-crown text-warm-yellow text-2xl mb-1"></i>
228
+ <span class="text-xs">Bronze</span>
229
+ </div>
230
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
231
+ <div class="font-bold">Bronze</div>
232
+ <div>0 XP</div>
233
+ <div class="text-warm-yellow">Basic Perks</div>
234
  </div>
 
235
  </div>
236
 
237
+ <!-- Tier 2 -->
238
+ <div class="tier-icon glass-card flex-shrink-0">
239
+ <div class="text-center">
240
+ <i class="fas fa-gem text-silver text-2xl mb-1"></i>
241
+ <span class="text-xs">Silver</span>
242
+ </div>
243
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
244
+ <div class="font-bold">Silver</div>
245
+ <div>2,000 XP</div>
246
+ <div class="text-warm-yellow">Enhanced Rewards</div>
247
  </div>
 
248
  </div>
249
 
250
+ <!-- Tier 3 -->
251
+ <div class="tier-icon glass-card flex-shrink-0">
252
+ <div class="text-center">
253
+ <i class="fas fa-gem text-amber-400 text-2xl mb-1"></i>
254
+ <span class="text-xs">Gold</span>
255
+ </div>
256
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
257
+ <div class="font-bold">Gold</div>
258
+ <div>5,000 XP</div>
259
+ <div class="text-warm-yellow">Premium Benefits</div>
260
  </div>
 
261
  </div>
262
 
263
+ <!-- Tier 4 (Current) -->
264
+ <div class="tier-icon glass-card flex-shrink-0 relative" style="box-shadow: 0 0 20px rgba(255, 165, 0, 0.7);">
265
+ <div class="text-center">
266
+ <i class="fas fa-gem text-neon-orange text-3xl mb-1"></i>
267
+ <span class="text-xs font-bold text-neon-orange">NioGold</span>
268
+ </div>
269
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
270
+ <div class="font-bold text-neon-orange">NioGold</div>
271
+ <div>16,000 XP</div>
272
+ <div class="text-warm-yellow">Elite Status</div>
273
  </div>
 
274
  </div>
275
 
276
+ <!-- Tier 5 -->
277
+ <div class="tier-icon glass-card flex-shrink-0 locked">
278
+ <div class="text-center">
279
+ <i class="fas fa-gem text-purple-500 text-2xl mb-1"></i>
280
+ <span class="text-xs">Platinum</span>
281
+ </div>
282
+ <div class="absolute top-2 right-2 text-xs">
283
+ <i class="fas fa-lock text-gray-400"></i>
284
+ </div>
285
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
286
+ <div class="font-bold">Platinum</div>
287
+ <div>30,000 XP</div>
288
+ <div class="text-warm-yellow">Exclusive Access</div>
289
  </div>
 
290
  </div>
291
 
292
+ <!-- Tier 6 -->
293
+ <div class="tier-icon glass-card flex-shrink-0 locked">
294
+ <div class="text-center">
295
+ <i class="fas fa-star text-cyan-400 text-2xl mb-1"></i>
296
+ <span class="text-xs">Diamond</span>
297
+ </div>
298
+ <div class="absolute top-2 right-2 text-xs">
299
+ <i class="fas fa-lock text-gray-400"></i>
300
+ </div>
301
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
302
+ <div class="font-bold">Diamond</div>
303
+ <div>50,000 XP</div>
304
+ <div class="text-warm-yellow">VIP Treatment</div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Tier 7 -->
309
+ <div class="tier-icon glass-card flex-shrink-0 locked">
310
+ <div class="text-center">
311
+ <i class="fas fa-infinity text-red-500 text-2xl mb-1"></i>
312
+ <span class="text-xs">Infinity</span>
313
+ </div>
314
+ <div class="absolute top-2 right-2 text-xs">
315
+ <i class="fas fa-lock text-gray-400"></i>
316
  </div>
317
+ <div class="tooltip glass-card p-3 text-sm min-w-[120px] text-center">
318
+ <div class="font-bold">Infinity</div>
319
+ <div>100,000 XP</div>
320
+ <div class="text-warm-yellow">Legendary Status</div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- CTA Button -->
325
+ <div class="flex items-center ml-4">
326
+ <button class="neon-button yellow px-6 py-3">Claim VIP Package</button>
327
  </div>
328
  </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Stats Panel -->
333
+ <section class="max-w-6xl mx-auto mb-12">
334
+ <div class="glass-card p-6">
335
+ <h2 class="text-2xl font-bold mb-6 text-center">YOUR VIP STATS</h2>
336
+
337
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
338
+ <div class="text-center p-4">
339
+ <div class="text-3xl font-bold text-warm-yellow mb-2">12,500</div>
340
  <div class="text-sm opacity-80">Total XP</div>
341
  </div>
342
+ <div class="text-center p-4">
343
+ <div class="text-3xl font-bold text-warm-yellow mb-2">128</div>
344
  <div class="text-sm opacity-80">Days Active</div>
345
  </div>
346
+ <div class="text-center p-4">
347
+ <div class="text-3xl font-bold text-warm-yellow mb-2">$42,380</div>
348
+ <div class="text-sm opacity-80">Lifetime Wager</div>
349
  </div>
350
+ <div class="text-center p-4">
351
+ <div class="text-3xl font-bold text-warm-yellow mb-2">#1,842</div>
352
+ <div class="text-sm opacity-80">Global Rank</div>
353
  </div>
354
  </div>
355
 
356
+ <div class="text-center">
357
+ <button class="neon-button px-6 py-2 text-sm flex items-center mx-auto">
358
+ <i class="fas fa-lightbulb mr-2"></i> Tips to Rank Up Faster
359
+ </button>
 
 
 
 
 
 
 
 
 
 
360
  </div>
361
+ </div>
362
+ </section>
363
+
364
+ <!-- VIP Perks Grid -->
365
+ <section class="max-w-6xl mx-auto mb-12">
366
+ <div class="glass-card shine p-6">
367
+ <h2 class="text-2xl font-bold mb-6 text-center">VIP PERKS & BENEFITS</h2>
368
+
369
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
370
+ <!-- Perk 1 -->
371
+ <div class="perk-card glass-card p-4 text-center">
372
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neon-orange to-warm-yellow flex items-center justify-center mx-auto mb-3">
373
+ <i class="fas fa-coins text-2xl text-black"></i>
374
  </div>
375
+ <h3 class="font-bold mb-1">Cashback</h3>
376
+ <p class="text-sm opacity-80">Up to 15% weekly</p>
377
  </div>
378
 
379
+ <!-- Perk 2 -->
380
+ <div class="perk-card glass-card p-4 text-center">
381
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neon-orange to-warm-yellow flex items-center justify-center mx-auto mb-3">
382
+ <i class="fas fa-user-tie text-2xl text-black"></i>
383
  </div>
384
+ <h3 class="font-bold mb-1">VIP Manager</h3>
385
+ <p class="text-sm opacity-80">Dedicated support</p>
386
  </div>
387
 
388
+ <!-- Perk 3 -->
389
+ <div class="perk-card glass-card p-4 text-center">
390
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neon-orange to-warm-yellow flex items-center justify-center mx-auto mb-3">
391
+ <i class="fas fa-gift text-2xl text-black"></i>
392
  </div>
393
+ <h3 class="font-bold mb-1">Free Spins</h3>
394
+ <p class="text-sm opacity-80">Monthly rewards</p>
395
+ </div>
396
+
397
+ <!-- Perk 4 -->
398
+ <div class="perk-card glass-card p-4 text-center">
399
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neon-orange to-warm-yellow flex items-center justify-center mx-auto mb-3">
400
+ <i class="fas fa-rocket text-2xl text-black"></i>
401
+ </div>
402
+ <h3 class="font-bold mb-1">Fast Withdrawals</h3>
403
+ <p class="text-sm opacity-80">Instant processing</p>
404
+ </div>
405
+
406
+ <!-- Perk 5 -->
407
+ <div class="perk-card glass-card p-4 text-center">
408
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neon-orange to-warm-yellow flex items-center justify-center mx-auto mb-3">
409
+ <i class="fas fa-trophy text-2xl text-black"></i>
410
+ </div>
411
+ <h3 class="font-bold mb-1">Exclusive Events</h3>
412
+ <p class="text-sm opacity-80">VIP tournaments</p>
413
+ </div>
414
+
415
+ <!-- Perk 6 -->
416
+ <div class="perk-card glass-card p-4 text-center">
417
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-neon-orange to-warm-yellow flex items-center justify-center mx-auto mb-3">
418
+ <i class="fas fa-percentage text-2xl text-black"></i>
419
  </div>
420
+ <h3 class="font-bold mb-1">Lower Rake</h3>
421
+ <p class="text-sm opacity-80">Reduced fees</p>
422
  </div>
423
 
424
+ <!-- Perk 7 (Locked) -->
425
+ <div class="perk-card glass-card p-4 text-center locked">
426
+ <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mx-auto mb-3">
427
+ <i class="fas fa-plane text-2xl text-gray-400"></i>
428
  </div>
429
+ <h3 class="font-bold mb-1">Luxury Trips</h3>
430
+ <p class="text-sm opacity-80">Unlock at Platinum</p>
431
+ </div>
432
+
433
+ <!-- Perk 8 (Locked) -->
434
+ <div class="perk-card glass-card p-4 text-center locked">
435
+ <div class="w-16 h-16 rounded-full bg-gray-700 flex items-center justify-center mx-auto mb-3">
436
+ <i class="fas fa-car text-2xl text-gray-400"></i>
437
  </div>
438
+ <h3 class="font-bold mb-1">VIP Transport</h3>
439
+ <p class="text-sm opacity-80">Unlock at Diamond</p>
440
  </div>
441
  </div>
442
 
443
+ <div class="text-center mt-8">
444
+ <button class="neon-button px-6 py-3">View Full VIP Chart</button>
 
 
445
  </div>
446
+ </div>
447
+ </section>
448
+
449
+ <!-- Claimable Rewards -->
450
+ <section class="max-w-6xl mx-auto mb-12">
451
+ <div class="glass-card p-6">
452
+ <h2 class="text-2xl font-bold mb-6 text-center">CLAIM YOUR REWARDS</h2>
453
+
454
+ <div class="flex flex-col md:flex-row items-center justify-between">
455
+ <div class="mb-6 md:mb-0 md:w-2/3">
456
+ <h3 class="text-xl font-bold text-warm-yellow mb-2">Weekly VIP Bonus</h3>
457
+ <p class="mb-4">Claim your exclusive weekly bonus package</p>
458
+
459
+ <div class="flex items-center mb-4">
460
+ <div class="mr-4 text-center">
461
+ <div class="countdown-digit">12</div>
462
+ <div class="text-xs opacity-80">HOURS</div>
463
+ </div>
464
+ <div class="mr-4 text-center">
465
+ <div class="countdown-digit">45</div>
466
+ <div class="text-xs opacity-80">MINUTES</div>
467
+ </div>
468
+ <div class="text-center">
469
+ <div class="countdown-digit">22</div>
470
+ <div class="text-xs opacity-80">SECONDS</div>
471
+ </div>
472
+ </div>
473
+
474
+ <div class="flex items-center">
475
+ <i class="fas fa-gift text-neon-orange mr-2"></i>
476
+ <span>Includes: $50 Bonus + 50 Free Spins</span>
477
+ </div>
478
+ </div>
479
 
480
+ <div>
481
+ <button class="neon-button yellow px-8 py-4 text-xl font-bold glow-text">
482
+ CLAIM NOW
483
+ </button>
 
 
484
  </div>
485
  </div>
486
+ </div>
487
+ </section>
488
+
489
+ <!-- Bottom CTA -->
490
+ <section class="max-w-6xl mx-auto">
491
+ <div class="flex flex-col md:flex-row justify-center gap-6">
492
+ <button class="neon-button px-8 py-4 text-lg font-bold">
493
+ <i class="fas fa-store mr-2"></i> Upgrade in Store
 
 
494
  </button>
495
+ <button class="neon-button yellow px-8 py-4 text-lg font-bold">
496
+ <i class="fas fa-user-friends mr-2"></i> Invite Friends for XP
497
  </button>
498
+ </div>
499
+ </section>
500
+
501
+ <!-- Footer -->
502
+ <footer class="max-w-6xl mx-auto mt-16 text-center text-sm opacity-70">
503
+ <p>© 2023 NioCasino VIP Club. All rights reserved. Gambling can be addictive. Please play responsibly.</p>
504
+ </footer>
505
+
506
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
507
  // Countdown timer simulation
508
  function updateCountdown() {
509
+ const hoursElem = document.querySelector('.countdown-digit:nth-child(1)');
510
+ const minutesElem = document.querySelector('.countdown-digit:nth-child(2)');
511
+ const secondsElem = document.querySelector('.countdown-digit:nth-child(3)');
512
+
513
+ // In a real implementation, you would calculate time remaining
514
+ // This is just a simulation that cycles numbers
515
+ let hours = parseInt(hoursElem.textContent);
516
+ let minutes = parseInt(minutesElem.textContent);
517
+ let seconds = parseInt(secondsElem.textContent);
518
+
519
+ seconds = (seconds + 1) % 60;
520
+ if(seconds === 0) {
521
+ minutes = (minutes + 1) % 60;
522
+ if(minutes === 0) {
523
+ hours = (hours + 1) % 24;
 
 
 
 
524
  }
 
 
 
 
525
  }
526
+
527
+ hoursElem.textContent = hours.toString().padStart(2, '0');
528
+ minutesElem.textContent = minutes.toString().padStart(2, '0');
529
+ secondsElem.textContent = seconds.toString().padStart(2, '0');
530
  }
531
 
 
532
  setInterval(updateCountdown, 1000);
533
  </script>
534
  <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>