Hugging Face's logo

Spaces:
ProjectGenesis
/
undefined
Running

App Files Community
ProjectGenesis commited on
Commit
a059d09
·
verified ·
1 Parent(s): e44d705

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NioCasino VIP Lounge</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'neon-orange': '#FFA500',
'neon-yellow': '#FFD700',
'glass': 'rgba(255, 255, 255, 0.05)',
},
boxShadow: {
'neon-sm': '0 0 6px 1px rgba(255, 165, 0, 0.4)',
'neon-md': '0 0 10px 2px rgba(255, 165, 0, 0.7)',
'neon-lg': '0 0 15px 4px rgba(255, 165, 0, 0.9)',
},
backgroundImage: {
'vip-gradient': 'radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)',
'glass-gradient': 'linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0))',
'progress-gradient': 'linear-gradient(90deg, #FFA500, #FFD700)',
}
}
}
}
</script>
<style>
* {
font-family: 'Rajdhani', sans-serif;
}

body {
background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
min-height: 100vh;
color: rgba(255, 255, 255, 0.9);
overflow-x: hidden;
}

.glass-card {
backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
overflow: hidden;
position: relative;
z-index: 2;
}

.hero-shine::after,
.perks-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;
z-index: -1;
}



@keyframes
 glass-shine {
0% { left: -150%; }
100% { left: 150%; }
}

.neon-btn {
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.3);
border: 1px solid #FFA500;
border-radius: 10px;
color: #FFD700;
text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
transition: all 0.3s ease;
transform: scale(1);
position: relative;
overflow: hidden;
z-index: 1;
}

.neon-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.2), transparent);
transition: all 0.6s ease;
z-index: -1;
}

.neon-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 15px 3px rgba(255, 165, 0, 0.5);
}

.neon-btn:hover::before {
left: 100%;
}

.progress-track {
height: 16px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
}

.progress-bar {
height: 100%;
background: linear-gradient(90deg, #FFA500, #FFD700);
position: relative;
}

.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
background-size: 300% 300%;
animation: progress-glow 2s ease infinite;
}



@keyframes
 progress-glow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.tier-card {
position: relative;
transition: all 0.3s ease;
}

.tier-card .info {
display: none;
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
width: 250px;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 165, 0, 0.6);
border-radius: 12px;
padding: 16px;
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
z-index: 100;
}

.tier-card:hover .info {
display: block;
animation: fadeIn 0.3s ease;
}



@keyframes
 fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.perk-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 165, 0, 0.3);
transition: all 0.3s ease;
position: relative;
}

.perk-icon:hover {
transform: scale(1.1);
box-shadow: 0 0 15px 3px rgba(255, 165, 0, 0.3);
border-color: #FFD700;
z-index: 10;
}

.countdown {
font-family: 'Courier New', monospace;
font-weight: bold;
letter-spacing: 2px;
color: #FFD700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.pulse {
animation: pulse 2s infinite;
}



@keyframes
 pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(255, 165, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
}

.lock-icon {
position: absolute;
top: 10px;
right: 10px;
color: rgba(255,255,255,0.5);
background: rgba(0,0,0,0.7);
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}

.hidden {
opacity: 0.4;
filter: grayscale(70%);
}

.tier-diamond {
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
border: 1px solid #FFD700;
transform: rotate(45deg);
display: flex;
align-items: center;
justify-content: center;
}

.tier-diamond span {
transform: rotate(-45deg);
font-weight: 700;
font-size: 0.8rem;
}

.scroll-container {
scrollbar-width: thin;
scrollbar-color: #FFA500 transparent;
}

.scroll-container::-webkit-scrollbar {
height: 6px;
}

.scroll-container::-webkit-scrollbar-track {
background: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
background: #FFA500;
border-radius: 3px;
}

.glow-border {
position: absolute;
inset: 0;
border-radius: 16px;
box-shadow: 0 0 12px 0px rgba(255, 165, 0, 0.7);
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
}

.tier-card:hover .glow-border {
opacity: 0.7;
}



@media
 (max-width: 767px) {
.flex-wrap-mobile {
flex-wrap: wrap;
}

.w-32-mobile {
width: 8rem;
}

.tier-card .info {
display: none !important;
}
}
</style>
</head>
<body class="min-h-screen bg-vip-gradient py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Hero Section -->
<section class="glass-card hero-shine p-8 mb-8">
<div class="flex flex-wrap items-center justify-between gap-6">
<div class="flex-1 min-w-[300px]">
<div class="flex items-center gap-4 mb-8">
<div class="bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full w-32 h-32 flex items-center justify-center">
<div class="bg-black bg-opacity-50 rounded-full w-28 h-28 flex flex-col items-center justify-center">
<span class="text-neon-orange text-sm">VIP TIER</span>
<h2 class="text-neon-yellow text-2xl font-bold uppercase tracking-wider">NioDiamond</h2>
</div>
</div>
<div class="flex-1">
<h1 class="text-3xl font-bold uppercase tracking-wide">VIP Tier Status</h1>
<p class="text-neon-orange opacity-90">Elite member privileges</p>
</div>
</div>

<div class="mb-6">

Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +718 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🐠
4
- colorFrom: gray
5
- colorTo: indigo
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: undefined
3
+ colorFrom: red
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,718 @@
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>NioCasino VIP Lounge</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ 'neon-orange': '#FFA500',
16
+ 'neon-yellow': '#FFD700',
17
+ 'glass': 'rgba(255, 255, 255, 0.05)',
18
+ },
19
+ boxShadow: {
20
+ 'neon-sm': '0 0 6px 1px rgba(255, 165, 0, 0.4)',
21
+ 'neon-md': '0 0 10px 2px rgba(255, 165, 0, 0.7)',
22
+ 'neon-lg': '0 0 15px 4px rgba(255, 165, 0, 0.9)',
23
+ },
24
+ backgroundImage: {
25
+ 'vip-gradient': 'radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)',
26
+ 'glass-gradient': 'linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0))',
27
+ 'progress-gradient': 'linear-gradient(90deg, #FFA500, #FFD700)',
28
+ }
29
+ }
30
+ }
31
+ }
32
+ </script>
33
+ <style>
34
+ * {
35
+ font-family: 'Rajdhani', sans-serif;
36
+ }
37
+
38
+ body {
39
+ background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
40
+ min-height: 100vh;
41
+ color: rgba(255, 255, 255, 0.9);
42
+ overflow-x: hidden;
43
+ }
44
+
45
+ .glass-card {
46
+ backdrop-filter: blur(16px);
47
+ background: rgba(255, 255, 255, 0.05);
48
+ border: 1px solid rgba(255, 255, 255, 0.15);
49
+ border-radius: 16px;
50
+ overflow: hidden;
51
+ position: relative;
52
+ z-index: 2;
53
+ }
54
+
55
+ .hero-shine::after,
56
+ .perks-shine::after {
57
+ content: '';
58
+ position: absolute;
59
+ top: 0;
60
+ left: -150%;
61
+ width: 250%;
62
+ height: 100%;
63
+ background: linear-gradient(
64
+ 120deg,
65
+ rgba(255, 255, 255, 0.03) 0%,
66
+ rgba(255, 255, 255, 0.12) 50%,
67
+ rgba(255, 255, 255, 0.03) 100%
68
+ );
69
+ animation: glass-shine 8s ease-in-out infinite;
70
+ pointer-events: none;
71
+ z-index: -1;
72
+ }
73
+
74
+ @keyframes glass-shine {
75
+ 0% { left: -150%; }
76
+ 100% { left: 150%; }
77
+ }
78
+
79
+ .neon-btn {
80
+ backdrop-filter: blur(10px);
81
+ background: rgba(0, 0, 0, 0.3);
82
+ border: 1px solid #FFA500;
83
+ border-radius: 10px;
84
+ color: #FFD700;
85
+ text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
86
+ transition: all 0.3s ease;
87
+ transform: scale(1);
88
+ position: relative;
89
+ overflow: hidden;
90
+ z-index: 1;
91
+ }
92
+
93
+ .neon-btn::before {
94
+ content: '';
95
+ position: absolute;
96
+ top: 0;
97
+ left: -100%;
98
+ width: 100%;
99
+ height: 100%;
100
+ background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.2), transparent);
101
+ transition: all 0.6s ease;
102
+ z-index: -1;
103
+ }
104
+
105
+ .neon-btn:hover {
106
+ transform: scale(1.05);
107
+ box-shadow: 0 0 15px 3px rgba(255, 165, 0, 0.5);
108
+ }
109
+
110
+ .neon-btn:hover::before {
111
+ left: 100%;
112
+ }
113
+
114
+ .progress-track {
115
+ height: 16px;
116
+ background: rgba(255, 255, 255, 0.1);
117
+ border-radius: 10px;
118
+ overflow: hidden;
119
+ }
120
+
121
+ .progress-bar {
122
+ height: 100%;
123
+ background: linear-gradient(90deg, #FFA500, #FFD700);
124
+ position: relative;
125
+ }
126
+
127
+ .progress-bar::after {
128
+ content: '';
129
+ position: absolute;
130
+ top: 0;
131
+ left: 0;
132
+ right: 0;
133
+ bottom: 0;
134
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
135
+ background-size: 300% 300%;
136
+ animation: progress-glow 2s ease infinite;
137
+ }
138
+
139
+ @keyframes progress-glow {
140
+ 0% { background-position: 0% 50%; }
141
+ 50% { background-position: 100% 50%; }
142
+ 100% { background-position: 0% 50%; }
143
+ }
144
+
145
+ .tier-card {
146
+ position: relative;
147
+ transition: all 0.3s ease;
148
+ }
149
+
150
+ .tier-card .info {
151
+ display: none;
152
+ position: absolute;
153
+ bottom: -100px;
154
+ left: 50%;
155
+ transform: translateX(-50%);
156
+ width: 250px;
157
+ background: rgba(0, 0, 0, 0.8);
158
+ backdrop-filter: blur(10px);
159
+ border: 1px solid rgba(255, 165, 0, 0.6);
160
+ border-radius: 12px;
161
+ padding: 16px;
162
+ box-shadow: 0 10px 20px rgba(0,0,0,0.5);
163
+ z-index: 100;
164
+ }
165
+
166
+ .tier-card:hover .info {
167
+ display: block;
168
+ animation: fadeIn 0.3s ease;
169
+ }
170
+
171
+ @keyframes fadeIn {
172
+ from { opacity: 0; }
173
+ to { opacity: 1; }
174
+ }
175
+
176
+ .perk-icon {
177
+ display: inline-flex;
178
+ justify-content: center;
179
+ align-items: center;
180
+ width: 80px;
181
+ height: 80px;
182
+ border-radius: 50%;
183
+ background: rgba(0, 0, 0, 0.3);
184
+ border: 1px solid rgba(255, 165, 0, 0.3);
185
+ transition: all 0.3s ease;
186
+ position: relative;
187
+ }
188
+
189
+ .perk-icon:hover {
190
+ transform: scale(1.1);
191
+ box-shadow: 0 0 15px 3px rgba(255, 165, 0, 0.3);
192
+ border-color: #FFD700;
193
+ z-index: 10;
194
+ }
195
+
196
+ .countdown {
197
+ font-family: 'Courier New', monospace;
198
+ font-weight: bold;
199
+ letter-spacing: 2px;
200
+ color: #FFD700;
201
+ text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
202
+ }
203
+
204
+ .pulse {
205
+ animation: pulse 2s infinite;
206
+ }
207
+
208
+ @keyframes pulse {
209
+ 0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.7); }
210
+ 70% { box-shadow: 0 0 0 15px rgba(255, 165, 0, 0); }
211
+ 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); }
212
+ }
213
+
214
+ .lock-icon {
215
+ position: absolute;
216
+ top: 10px;
217
+ right: 10px;
218
+ color: rgba(255,255,255,0.5);
219
+ background: rgba(0,0,0,0.7);
220
+ border-radius: 50%;
221
+ width: 28px;
222
+ height: 28px;
223
+ display: flex;
224
+ align-items: center;
225
+ justify-content: center;
226
+ font-size: 0.8rem;
227
+ }
228
+
229
+ .hidden {
230
+ opacity: 0.4;
231
+ filter: grayscale(70%);
232
+ }
233
+
234
+ .tier-diamond {
235
+ background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
236
+ border: 1px solid #FFD700;
237
+ transform: rotate(45deg);
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: center;
241
+ }
242
+
243
+ .tier-diamond span {
244
+ transform: rotate(-45deg);
245
+ font-weight: 700;
246
+ font-size: 0.8rem;
247
+ }
248
+
249
+ .scroll-container {
250
+ scrollbar-width: thin;
251
+ scrollbar-color: #FFA500 transparent;
252
+ }
253
+
254
+ .scroll-container::-webkit-scrollbar {
255
+ height: 6px;
256
+ }
257
+
258
+ .scroll-container::-webkit-scrollbar-track {
259
+ background: transparent;
260
+ }
261
+
262
+ .scroll-container::-webkit-scrollbar-thumb {
263
+ background: #FFA500;
264
+ border-radius: 3px;
265
+ }
266
+
267
+ .glow-border {
268
+ position: absolute;
269
+ inset: 0;
270
+ border-radius: 16px;
271
+ box-shadow: 0 0 12px 0px rgba(255, 165, 0, 0.7);
272
+ opacity: 0;
273
+ transition: opacity 0.3s;
274
+ z-index: -1;
275
+ }
276
+
277
+ .tier-card:hover .glow-border {
278
+ opacity: 0.7;
279
+ }
280
+
281
+ @media (max-width: 767px) {
282
+ .flex-wrap-mobile {
283
+ flex-wrap: wrap;
284
+ }
285
+
286
+ .w-32-mobile {
287
+ width: 8rem;
288
+ }
289
+
290
+ .tier-card .info {
291
+ display: none !important;
292
+ }
293
+ }
294
+ </style>
295
+ </head>
296
+ <body class="min-h-screen bg-vip-gradient py-8 px-4 sm:px-6 lg:px-8">
297
+ <div class="max-w-7xl mx-auto">
298
+ <!-- Hero Section -->
299
+ <section class="glass-card hero-shine p-8 mb-8">
300
+ <div class="flex flex-wrap items-center justify-between gap-6">
301
+ <div class="flex-1 min-w-[300px]">
302
+ <div class="flex items-center gap-4 mb-8">
303
+ <div class="bg-gradient-to-r from-neon-orange to-neon-yellow rounded-full w-32 h-32 flex items-center justify-center">
304
+ <div class="bg-black bg-opacity-50 rounded-full w-28 h-28 flex flex-col items-center justify-center">
305
+ <span class="text-neon-orange text-sm">VIP TIER</span>
306
+ <h2 class="text-neon-yellow text-2xl font-bold uppercase tracking-wider">NioDiamond</h2>
307
+ </div>
308
+ </div>
309
+ <div class="flex-1">
310
+ <h1 class="text-3xl font-bold uppercase tracking-wide">VIP Tier Status</h1>
311
+ <p class="text-neon-orange opacity-90">Elite member privileges</p>
312
+ </div>
313
+ </div>
314
+
315
+ <div class="mb-6">
316
+ <div class="flex justify-between text-sm opacity-90 mb-2">
317
+ <span>XP Progress: 82,430 / 100,000</span>
318
+ <span>82%</span>
319
+ </div>
320
+ <div class="progress-track">
321
+ <div class="progress-bar" style="width: 82%"></div>
322
+ </div>
323
+ <div class="text-sm opacity-80 mt-2">17,570 XP to next level</div>
324
+ </div>
325
+
326
+ <button class="neon-btn py-3 px-6 uppercase font-semibold text-lg">How to Rank Up</button>
327
+ </div>
328
+
329
+ <div class="bg-black bg-opacity-20 rounded-xl p-6 min-w-[280px]">
330
+ <h3 class="text-xl font-bold uppercase mb-4 border-b border-neon-orange pb-2">Current Benefits</h3>
331
+ <ul class="space-y-3">
332
+ <li class="flex items-center gap-2">
333
+ <i class="fas fa-gem text-neon-yellow"></i>
334
+ <span>20% Cashback</span>
335
+ </li>
336
+ <li class="flex items-center gap-2">
337
+ <i class="fas fa-headset text-neon-yellow"></i>
338
+ <span>VIP Manager</span>
339
+ </li>
340
+ <li class="flex items-center gap-2">
341
+ <i class="fas fa-gift text-neon-yellow"></i>
342
+ <span>Monthly Bonuses</span>
343
+ </li>
344
+ <li class="flex items-center gap-2">
345
+ <i class="fas fa-rocket text-neon-yellow"></i>
346
+ <span>Priority Withdrawals</span>
347
+ </li>
348
+ </ul>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- VIP Tier Carousel -->
354
+ <section class="mb-8 py-6 px-4">
355
+ <div class="flex justify-between items-center mb-6 px-2">
356
+ <h2 class="text-2xl font-bold uppercase">VIP Tiers</h2>
357
+ <div class="flex space-x-3">
358
+ <button class="scroll-left bg-glass text-neon-orange p-2 rounded-full">
359
+ <i class="fas fa-chevron-left"></i>
360
+ </button>
361
+ <button class="scroll-right bg-glass text-neon-orange p-2 rounded-full">
362
+ <i class="fas fa-chevron-right"></i>
363
+ </button>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="scroll-container overflow-x-auto pb-4">
368
+ <div class="flex space-x-8 min-w-max px-4">
369
+ <!-- Tier Card 1 -->
370
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative">
371
+ <div class="glow-border"></div>
372
+ <div class="tier-diamond w-16 h-16">
373
+ <span class="text-white">Bronze</span>
374
+ </div>
375
+ <p class="mt-4 mb-2 text-neon-yellow">5K XP</p>
376
+ <div class="text-sm text-center">Reached</div>
377
+
378
+ <div class="info">
379
+ <h4 class="font-bold text-neon-orange mb-2">Bronze Tier</h4>
380
+ <p class="text-sm opacity-90 mb-2">5,000 XP to unlock</p>
381
+ <ul class="text-xs space-y-1">
382
+ <li>• 5% Cashback</li>
383
+ <li>• Weekly Free Spins</li>
384
+ <li>• Basic Support</li>
385
+ </ul>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Tier Card 2 -->
390
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative">
391
+ <div class="glow-border"></div>
392
+ <div class="tier-diamond w-16 h-16">
393
+ <span class="text-white">Silver</span>
394
+ </div>
395
+ <p class="mt-4 mb-2 text-neon-yellow">15K XP</p>
396
+ <div class="text-sm text-center">Reached</div>
397
+
398
+ <div class="info">
399
+ <h4 class="font-bold text-neon-orange mb-2">Silver Tier</h4>
400
+ <p class="text-sm opacity-90 mb-2">15,000 XP to unlock</p>
401
+ <ul class="text-xs space-y-1">
402
+ <li>• 10% Cashback</li>
403
+ <li>• Weekly Bonuses</li>
404
+ <li>• Priority Support</li>
405
+ <li>• Monthly Giveaway</li>
406
+ </ul>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Tier Card 3 -->
411
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative">
412
+ <div class="glow-border"></div>
413
+ <div class="tier-diamond w-16 h-16">
414
+ <span class="text-white">Gold</span>
415
+ </div>
416
+ <p class="mt-4 mb-2 text-neon-yellow">30K XP</p>
417
+ <div class="text-sm text-center">Reached</div>
418
+
419
+ <div class="info">
420
+ <h4 class="font-bold text-neon-orange mb-2">Gold Tier</h4>
421
+ <p class="text-sm opacity-90 mb-2">30,000 XP to unlock</p>
422
+ <ul class="text-xs space-y-1">
423
+ <li>• 15% Cashback</li>
424
+ <li>• Daily Bonuses</li>
425
+ <li>• Personal Manager</li>
426
+ <li>• Birthday Reward</li>
427
+ </ul>
428
+ </div>
429
+ </div>
430
+
431
+ <!-- Tier Card 4 - Current -->
432
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative">
433
+ <div class="absolute top-0 right-0 bg-gradient-to-r from-neon-orange to-neon-yellow text-black font-bold py-1 px-2 rounded-bl-lg rounded-tr-lg text-xs">
434
+ CURRENT
435
+ </div>
436
+ <div class="glow-border"></div>
437
+ <div class="bg-gradient-to-r from-neon-orange to-neon-yellow w-16 h-16 transform rotate-45 flex items-center justify-center">
438
+ <span class="text-black font-bold transform -rotate-45">Diamond</span>
439
+ </div>
440
+ <p class="mt-4 mb-2 text-neon-yellow">100K XP</p>
441
+ <div class="text-sm text-center">Active</div>
442
+
443
+ <div class="info">
444
+ <h4 class="font-bold text-neon-orange mb-2">Diamond Tier</h4>
445
+ <p class="text-sm opacity-90 mb-2">100,000 XP to unlock</p>
446
+ <ul class="text-xs space-y-1">
447
+ <li>• 20% Cashback</li>
448
+ <li>• Premium Bonuses</li>
449
+ <li>• VIP Manager</li>
450
+ <li>• Luxury Gifts</li>
451
+ <li>• Event Invitations</li>
452
+ </ul>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Tier Card 5 - Ruby -->
457
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
458
+ <div class="glow-border"></div>
459
+ <div class="bg-gradient-to-r from-red-600 to-pink-600 w-16 h-16 transform rotate-45 flex items-center justify-center">
460
+ <span class="text-white font-bold transform -rotate-45">Ruby</span>
461
+ </div>
462
+ <p class="mt-4 mb-2 text-gray-400">150K XP</p>
463
+ <div class="text-sm text-center text-gray-400">Locked</div>
464
+ <div class="lock-icon">
465
+ <i class="fas fa-lock"></i>
466
+ </div>
467
+
468
+ <div class="info">
469
+ <h4 class="font-bold text-neon-orange mb-2">Ruby Tier</h4>
470
+ <p class="text-sm opacity-90 mb-2">150,000 XP to unlock</p>
471
+ <ul class="text-xs space-y-1">
472
+ <li>• 22% Cashback</li>
473
+ <li>• Enhanced Bonuses</li>
474
+ <li>• VIP Concierge</li>
475
+ <li>• Exclusive Events</li>
476
+ <li>• Personal Shopper</li>
477
+ </ul>
478
+ </div>
479
+ </div>
480
+
481
+ <!-- Tier Card 6 - Emerald -->
482
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
483
+ <div class="glow-border"></div>
484
+ <div class="bg-gradient-to-r from-emerald-500 to-teal-500 w-16 h-16 transform rotate-45 flex items-center justify-center">
485
+ <span class="text-white font-bold transform -rotate-45">Emerald</span>
486
+ </div>
487
+ <p class="mt-4 mb-2 text-gray-400">200K XP</p>
488
+ <div class="text-sm text-center text-gray-400">Locked</div>
489
+ <div class="lock-icon">
490
+ <i class="fas fa-lock"></i>
491
+ </div>
492
+
493
+ <div class="info">
494
+ <h4 class="font-bold text-neon-orange mb-2">Emerald Tier</h4>
495
+ <p class="text-sm opacity-90 mb-2">200,000 XP to unlock</p>
496
+ <ul class="text-xs space-y-1">
497
+ <li>• 24% Cashback</li>
498
+ <li>• Elite Bonuses</li>
499
+ <li>• 24/7 Concierge</li>
500
+ <li>• VIP Events</li>
501
+ <li>• Luxury Getaways</li>
502
+ </ul>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Tier Card 7 - Platinum -->
507
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
508
+ <div class="glow-border"></div>
509
+ <div class="tier-diamond w-16 h-16">
510
+ <span class="text-white">Platinum</span>
511
+ </div>
512
+ <p class="mt-4 mb-2 text-gray-400">250K XP</p>
513
+ <div class="text-sm text-center text-gray-400">Locked</div>
514
+ <div class="lock-icon">
515
+ <i class="fas fa-lock"></i>
516
+ </div>
517
+
518
+ <div class="info">
519
+ <h4 class="font-bold text-neon-orange mb-2">Platinum Tier</h4>
520
+ <p class="text-sm opacity-90 mb-2">250,000 XP to unlock</p>
521
+ <ul class="text-xs space-y-1">
522
+ <li>• 25% Cashback</li>
523
+ <li>• Exclusive Bonuses</li>
524
+ <li>• Dedicated VIP Manager</li>
525
+ <li>• Luxury Travel Rewards</li>
526
+ <li>• Special Event Invites</li>
527
+ </ul>
528
+ </div>
529
+ </div>
530
+
531
+ <!-- Tier Card 8 - Onyx -->
532
+ <div class="tier-card w-40 flex flex-col items-center py-4 px-2 relative hidden">
533
+ <div class="glow-border"></div>
534
+ <div class="tier-diamond w-16 h-16">
535
+ <span class="text-white">Onyx</span>
536
+ </div>
537
+ <p class="mt-4 mb-2 text-gray-400">500K XP</p>
538
+ <div class="text-sm text-center text-gray-400">Locked</div>
539
+ <div class="lock-icon">
540
+ <i class="fas fa-lock"></i>
541
+ </div>
542
+
543
+ <div class="info">
544
+ <h4 class="font-bold text-neon-orange mb-2">Onyx Tier</h4>
545
+ <p class="text-sm opacity-90 mb-2">500,000 XP to unlock</p>
546
+ <ul class="text-xs space-y-1">
547
+ <li>• 30% Cashback</li>
548
+ <li>• Personalized Bonuses</li>
549
+ <li>• Elite Concierge</li>
550
+ <li>• Elite Experiences</li>
551
+ <li>• Platinum Card</li>
552
+ </ul>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- Claim VIP Package -->
557
+ <div class="flex flex-col items-center justify-center min-w-[220px]">
558
+ <div class="glass-card h-full w-full flex flex-col items-center justify-center py-6 px-4 text-center">
559
+ <i class="fas fa-crown text-4xl mb-4 text-neon-yellow"></i>
560
+ <h3 class="text-xl font-bold uppercase mb-3">VIP Package</h3>
561
+ <p class="text-sm opacity-90 mb-4">Claim your exclusive Diamond VIP Package now!</p>
562
+ <button class="neon-btn px-6 py-3 uppercase font-bold w-full max-w-xs">Claim Now</button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </section>
568
+
569
+ <!-- Stats Panel -->
570
+ <section class="glass-card mb-8 p-6">
571
+ <div class="flex flex-wrap justify-between items-center mb-6">
572
+ <h2 class="text-2xl font-bold uppercase">Your VIP Stats</h2>
573
+ <div class="flex items-center space-x-4">
574
+ <span class="opacity-80">Show tips</span>
575
+ <div class="relative inline-block w-12 h-6">
576
+ <input type="checkbox" class="sr-only" id="tip-toggle" checked>
577
+ <div class="toggle-bg bg-gray-600 border-2 border-gray-600 rounded-full w-12 h-6 cursor-pointer"></div>
578
+ <div class="absolute left-1 top-1 bg-white rounded-full w-4 h-4 transition toggle-dot"></div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
584
+ <div class="glass-card p-5 flex flex-col items-center text-center">
585
+ <i class="fas fa-star text-3xl text-neon-yellow mb-3"></i>
586
+ <h3 class="text-lg font-bold uppercase mb-2">Total XP</h3>
587
+ <p class="text-2xl font-bold">82,430</p>
588
+ </div>
589
+
590
+ <div class="glass-card p-5 flex flex-col items-center text-center">
591
+ <i class="fas fa-calendar-alt text-3xl text-neon-yellow mb-3"></i>
592
+ <h3 class="text-lg font-bold uppercase mb-2">Days Active</h3>
593
+ <p class="text-2xl font-bold">178</p>
594
+ </div>
595
+
596
+ <div class="glass-card p-5 flex flex-col items-center text-center">
597
+ <i class="fas fa-coins text-3xl text-neon-yellow mb-3"></i>
598
+ <h3 class="text-lg font-bold uppercase mb-2">Wagered</h3>
599
+ <p class="text-2xl font-bold">$82,490</p>
600
+ </div>
601
+
602
+ <div class="glass-card p-5 flex flex-col items-center text-center">
603
+ <i class="fas fa-trophy text-3xl text-neon-yellow mb-3"></i>
604
+ <h3 class="text-lg font-bold uppercase mb-2">Tier Rank</h3>
605
+ <p class="text-2xl font-bold">#4,821</p>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- Tips Section -->
610
+ <div class="mt-8 bg-black bg-opacity-20 rounded-xl p-6">
611
+ <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
612
+ <i class="fas fa-lightbulb text-neon-yellow"></i>
613
+ <span>Tips to Rank Up Faster</span>
614
+ </h3>
615
+ <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
616
+ <li class="flex items-start gap-3">
617
+ <div class="bg-neon-orange rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">
618
+ <i class="fas fa-check text-black text-xs"></i>
619
+ </div>
620
+ <p>Place bets on high XP multiplier games marked with <span class="text-neon-orange">★</span></p>
621
+ </li>
622
+ <li class="flex items-start gap-3">
623
+ <div class="bg-neon-orange rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">
624
+ <i class="fas fa-check text-black text-xs"></i>
625
+ </div>
626
+ <p>Complete daily challenges for bonus XP rewards</p>
627
+ </li>
628
+ <li class="flex items-start gap-3">
629
+ <div class="bg-neon-orange rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">
630
+ <i class="fas fa-check text-black text-xs"></i>
631
+ </div>
632
+ <p>Invite friends - receive 5% of their XP gains</p>
633
+ </li>
634
+ <li class="flex items-start gap-3">
635
+ <div class="bg-neon-orange rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0">
636
+ <i class="fas fa-check text-black text-xs"></i>
637
+ </div>
638
+ <p>Purchase XP boosts in the VIP store for instant gain</p>
639
+ </li>
640
+ </ul>
641
+ </div>
642
+ </section>
643
+
644
+ <!-- VIP Perks Grid -->
645
+ <section class="glass-card perks-shine mb-8 p-6">
646
+ <div class="flex justify-between items-center mb-6">
647
+ <h2 class="text-2xl font-bold uppercase">VIP Perks</h2>
648
+ <button class="neon-btn py-2 px-5 uppercase font-semibold flex items-center gap-2">
649
+ View Full Chart <i class="fas fa-arrow-right"></i>
650
+ </button>
651
+ </div>
652
+
653
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
654
+ <!-- Perk 1 -->
655
+ <div class="flex flex-col items-center">
656
+ <div class="perk-icon">
657
+ <i class="fas fa-credit-card text-3xl text-neon-yellow"></i>
658
+ </div>
659
+ <h3 class="text-lg font-semibold mt-3 text-center">Cashback</h3>
660
+ <span class="text-xs text-neon-orange text-center">20% weekly</span>
661
+ </div>
662
+
663
+ <!-- Perk 2 -->
664
+ <div class="flex flex-col items-center">
665
+ <div class="perk-icon">
666
+ <i class="fas fa-user-tie text-3xl text-neon-yellow"></i>
667
+ </div>
668
+ <h3 class="text-lg font-semibold mt-3 text-center">VIP Manager</h3>
669
+ <span class="text-xs text-neon-orange text-center">24/7 Support</span>
670
+ </div>
671
+
672
+ <!-- Perk 3 -->
673
+ <div class="flex flex-col items-center">
674
+ <div class="perk-icon">
675
+ <i class="fas fa-dice text-3xl text-neon-yellow"></i>
676
+ </div>
677
+ <h3 class="text-lg font-semibold mt-3 text-center">Free Spins</h3>
678
+ <span class="text-xs text-neon-orange text-center">150 monthly</span>
679
+ </div>
680
+
681
+ <!-- Perk 5 - Locked -->
682
+ <div class="flex flex-col items-center opacity-40">
683
+ <div class="perk-icon relative">
684
+ <i class="fas fa-jet-fighter-up text-3xl text-gray-400"></i>
685
+ <div class="lock-icon">
686
+ <i class="fas fa-lock"></i>
687
+ </div>
688
+ </div>
689
+ <h3 class="text-lg font-semibold mt-3 text-center">Exclusive Events</h3>
690
+ <span class="text-xs text-gray-400 text-center">Unlocks at Ruby Tier</span>
691
+ </div>
692
+
693
+ </div>
694
+ </section>
695
+
696
+ <!-- Claimable Rewards -->
697
+ <section class="glass-card mb-8 p-6">
698
+ <div class="flex justify-between items-center mb-6">
699
+ <h2 class="text-2xl font-bold uppercase">Claimable Rewards</h2>
700
+ <div class="flex items-center gap-2 text-sm">
701
+ <i class="fas fa-sync text-neon-orange"></i>
702
+ <span>Resets in:</span>
703
+ </div>
704
+ </div>
705
+
706
+ <div class="flex flex-col sm:flex-row gap-6">
707
+ <div class="glass-card p-6 flex-1">
708
+ <div class="flex flex-wrap justify-between items-center mb-5">
709
+ <h3 class="text-xl font-bold uppercase">Weekly Loyalty Bonus</h3>
710
+ <div class="bg-neon-orange text-black py-1 px-3 rounded-full text-sm font-bold">
711
+ Available
712
+ </div>
713
+ </div>
714
+
715
+ <div class="flex items-center gap-4 mb-6">
716
+ <div class="bg-gradient-to-r from
717
+ </body>
718
+ </html>