Hugging Face's logo

Spaces:
ProjectGenesis
/
player-profile-ui
Running

App Files Community
ProjectGenesis commited on
Commit
c2d967f
·
verified ·
1 Parent(s): 08a8b7d

Create a Player Profile Page UI for a sweepstakes casino platform. The page should reflect a high-end, immersive design using a dark-glow theme, custom gradient background, and a selective mix of glassmorphism + floating elements. 🎨 Background Style: Use this exact CSS for the background: background: linear-gradient( to bottom, #000000 0%, #1a0d00 15%, #2e1300 32%, #2e1300 68%, #1a0d00 85%, #000000 100% ); Creates subtle center glow that spans 65% of screen height Top & bottom edges are pure black Use subtle orb glows (orange/gray) in background for ambient depth 🧱 Layout Structure: 1. 🧊 Hero Section (Top Profile Block) Centered glassmorphic card Left side: Circular player avatar Username: Kevin VIP badge: NioPrime (glowing ring overlay) Right side: Header: "Welcome back, Kevin" (neon orange flicker) Subtext: "Here’s your journey so far" Tier tag: NioPrime glowing label Progress bar: 1,250 / 2,500 pts (orange glow, animated fill) 2. 📊 Stat Summary Panel (Unified Card) One horizontal glass card divided into 3 logical columns (not separate cards) Column 1: Lifetime Spins Played Total Purchases Time Played Column 2: This Month Spins This Month Bonuses Claimed Points Earned Column 3: VIP Snapshot Current Tier Cashback % Time Remaining Use animated number count-ups and subtle border glow for each column 3. 🎯 Active Perks Section (Non-Card Icons Only) Section title: "Your Active Perks" (centered, glowing gold text) Horizontal row of circular icons, no boxes or grids Each icon glows softly when active Dimmed/locked look when inactive Suggested examples: 🪙 5% Cashback 🎁 Daily Bonus 🎮 VIP Games 🔒 Early Access Optional: small label below each icon OR label appears on hover 4. 📜 Recent Activity Log Section title: "Recent Activity" Vertical scrollable glass panel (light blur, thin borders) Timeline-style entries: Aug 16 – Purchased $50 – 5,000 SC Aug 14 – Claimed 50 Free Spins Aug 12 – Completed Daily Mission Add filters as horizontal tabs: All, Purchases, Bonuses, Games 5. 🛠️ Account Settings Panel Display as 4 glowing button-style cards in grid or row: Edit Profile Transaction History Security Settings Manage Payment Methods Glassmorphic mini cards with orange/yellow outlines Glow intensifies on hover 🪄 Animation & Motion Details: Hero title glow pulse every 5s Progress bar: animated fill Stats: numbers count up on page load Perk icons: pulse if active Activity list: smooth fade-in for new entries - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +437 -285
index.html CHANGED
@@ -3,38 +3,31 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Player Profile | NioPrime 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>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
 
 
 
 
 
 
 
 
 
 
13
  animation: {
14
- 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
15
- 'glow': 'glow 2s ease-in-out infinite alternate',
16
- 'flicker': 'flicker 1.5s infinite alternate',
17
- 'pulse-active': 'pulseActive 2s infinite'
18
  },
19
  keyframes: {
20
- glow: {
21
- '0%': { 'text-shadow': '0 0 5px rgba(255, 165, 0, 0.5)' },
22
- '100%': { 'text-shadow': '0 0 20px rgba(255, 165, 0, 0.8), 0 0 30px rgba(255, 200, 0, 0.6)' }
23
- },
24
- flicker: {
25
- '0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%': {
26
- 'box-shadow': '0 0 5px rgba(255, 255, 0, 0.5)',
27
- 'opacity': '1'
28
- },
29
- '20%, 24%, 55%': {
30
- 'box-shadow': '0 0 20px rgba(255, 255, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.9)',
31
- 'opacity': '0.9'
32
- }
33
- },
34
- pulseActive: {
35
- '0%': { 'box-shadow': '0 0 0 0 rgba(255, 165, 0, 0.4)' },
36
- '70%': { 'box-shadow': '0 0 0 10px rgba(255, 165, 0, 0)' },
37
- '100%': { 'box-shadow': '0 0 0 0 rgba(255, 165, 0, 0)' }
38
  }
39
  }
40
  }
@@ -42,357 +35,516 @@
42
  }
43
  </script>
44
  <style>
45
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');
46
 
47
  body {
48
- font-family: 'Poppins', sans-serif;
49
- background: radial-gradient(ellipse farthest-corner at top left, #0a0a0a 0%, #1a0d00 30%, #2e1300 60%, #000000 100%);
50
- color: #f5f5f5;
 
 
 
 
 
 
 
51
  min-height: 100vh;
52
  overflow-x: hidden;
 
 
53
  }
54
-
55
- /* Glassmorphism card styling */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  .glass-card {
57
- background: rgba(15, 15, 15, 0.5);
58
  backdrop-filter: blur(10px);
59
- -webkit-backdrop-filter: blur(10px);
60
- border: 1px solid rgba(255, 140, 0, 0.3);
61
  border-radius: 16px;
62
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
63
  }
64
-
65
- .glow-border {
66
- box-shadow: 0 0 10px rgba(255, 140, 0, 0.7), 0 0 20px rgba(255, 69, 0, 0.4);
 
 
 
 
67
  }
68
-
69
- .hero-glow {
70
- animation: glow 1.5s ease-in-out infinite alternate;
 
 
 
 
71
  }
72
-
73
- .progress-fill {
74
- width: 0;
75
- transition: width 2s ease-in-out;
76
  }
77
-
78
- .daily-flicker {
79
- animation: flicker 1.5s infinite alternate;
 
 
 
 
 
 
 
 
80
  }
81
-
82
- .active-pulse {
83
- animation: pulseActive 2s infinite;
84
  }
85
-
86
- .timeline-item::before {
87
- content: '';
88
- position: absolute;
89
- left: 0;
90
- top: 20px;
91
- height: calc(100% - 20px);
92
- width: 2px;
93
- background: linear-gradient(to bottom, #ff8c00, transparent);
94
  }
95
-
96
- .tab-active {
97
- border-bottom: 2px solid #ff8c00;
98
- color: #ff8c00;
 
99
  }
100
-
101
- .neon-btn {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
102
  transition: all 0.3s ease;
103
- border: 1px solid rgba(255, 140, 0, 0.5);
104
- box-shadow: 0 0 5px rgba(255, 140, 0, 0.3);
105
  }
106
-
107
- .neon-btn:hover {
108
- border: 1px solid rgba(255, 140, 0, 0.8);
109
- box-shadow: 0 0 15px rgba(255, 140, 0, 0.6);
110
- transform: translateY(-2px);
111
  }
112
-
113
- .orb {
114
- position: fixed;
115
- border-radius: 50%;
116
- filter: blur(60px);
117
- z-index: 0;
118
  }
119
-
120
- .orb-1 {
121
- width: 400px;
122
- height: 400px;
123
- background: radial-gradient(circle, rgba(255, 100, 0, 0.2) 0%, transparent 70%);
124
- top: -100px;
125
- left: -100px;
126
  }
127
-
128
- .orb-2 {
129
- width: 600px;
130
- height: 600px;
131
- background: radial-gradient(circle, rgba(255, 165, 0, 0.15) 0%, transparent 70%);
132
- bottom: -200px;
133
- right: -200px;
134
  }
135
-
136
- @keyframes countUp {
137
- from { width: 0; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  }
139
  </style>
140
  </head>
141
- <body class="relative">
142
- <!-- Background Orbs -->
143
- <div class="orb orb-1"></div>
144
- <div class="orb orb-2"></div>
145
-
146
- <div class="container mx-auto px-4 py-8 relative z-10">
 
 
 
 
147
  <!-- Hero Section -->
148
- <section class="glass-card glow-border p-6 mb-8">
149
- <div class="flex flex-col md:flex-row items-center">
150
- <div class="relative mr-6 mb-4 md:mb-0">
151
- <div class="w-24 h-24 rounded-full bg-gradient-to-r from-orange-600 to-yellow-500 p-1">
152
- <div class="bg-gray-800 rounded-full w-full h-full flex items-center justify-center">
153
- <span class="text-3xl font-bold">K</span>
 
 
 
 
154
  </div>
155
- </div>
156
- <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-orange-500 to-yellow-500 text-black text-xs font-bold px-3 py-1 rounded-full">
157
- NioPrime
 
 
158
  </div>
159
  </div>
160
 
161
- <div class="flex-1 text-center md:text-left">
162
- <h1 class="text-3xl md:text-4xl font-bold hero-glow">
163
- Welcome Back, <span class="text-orange-400">Kevin</span>
 
164
  </h1>
165
- <p class="text-gray-300 mt-2 mb-4">
166
- Here's a quick look at your journey so far
167
- </p>
168
 
169
- <div class="mt-6">
170
- <div class="flex justify-between mb-2">
171
- <span class="text-orange-400 font-semibold">NioPrime</span>
172
- <span class="text-gray-400">1,250 / 2,500 Points</span>
173
- </div>
174
- <div class="w-full bg-gray-800 rounded-full h-3">
175
- <div class="progress-fill h-3 rounded-full bg-gradient-to-r from-orange-500 to-yellow-500" style="width: 50%;"></div>
 
 
 
 
 
176
  </div>
177
  </div>
178
  </div>
179
  </div>
180
  </section>
181
-
182
- <!-- Stats Summary -->
183
- <section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
184
- <!-- Card 1: Lifetime Stats -->
185
- <div class="glass-card p-6">
186
- <h2 class="text-xl font-bold mb-4 text-orange-300">Lifetime Stats</h2>
187
- <div class="space-y-4">
188
- <div>
189
- <p class="text-gray-400 text-sm">Total Spins Played</p>
190
- <p class="text-2xl font-bold counter" data-target="8520">0</p>
191
- </div>
192
- <div>
193
- <p class="text-gray-400 text-sm">Total Purchases</p>
194
- <p class="text-2xl font-bold counter" data-target="47">0</p>
195
- </div>
196
- <div>
197
- <p class="text-gray-400 text-sm">Total Hours Played</p>
198
- <p class="text-2xl font-bold counter" data-target="320">0</p>
 
 
199
  </div>
200
  </div>
201
- </div>
202
-
203
- <!-- Card 2: This Month -->
204
- <div class="glass-card p-6">
205
- <h2 class="text-xl font-bold mb-4 text-orange-300">This Month</h2>
206
- <div class="space-y-4">
207
- <div>
208
- <p class="text-gray-400 text-sm">Spins This Month</p>
209
- <p class="text-2xl font-bold counter" data-target="1250">0</p>
210
- </div>
211
- <div>
212
- <p class="text-gray-400 text-sm">Bonuses Claimed</p>
213
- <p class="text-2xl font-bold counter" data-target="18">0</p>
214
- </div>
215
- <div>
216
- <p class="text-gray-400 text-sm">Points Earned</p>
217
- <p class="text-2xl font-bold counter" data-target="1250">0</p>
218
  </div>
219
  </div>
220
- </div>
221
-
222
- <!-- Card 3: VIP Snapshot -->
223
- <div class="glass-card p-6">
224
- <h2 class="text-xl font-bold mb-4 text-orange-300">VIP Snapshot</h2>
225
- <div class="space-y-4">
226
- <div>
227
- <p class="text-gray-400 text-sm">Current Tier</p>
228
- <p class="text-2xl font-bold text-yellow-400">NioPrime</p>
229
- </div>
230
- <div>
231
- <p class="text-gray-400 text-sm">Points to Next Tier</p>
232
- <p class="text-2xl font-bold counter" data-target="1250">0</p>
233
- </div>
234
- <div>
235
- <p class="text-gray-400 text-sm">Cashback %</p>
236
- <p class="text-2xl font-bold">5%</p>
237
  </div>
238
  </div>
239
  </div>
240
  </section>
241
-
242
- <!-- Active Perks -->
243
- <section class="glass-card p-6 mb-8">
244
- <h2 class="text-2xl font-bold mb-6 text-orange-300 hero-glow">Your Active Perks</h2>
245
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
246
- <div class="glass-card p-4 flex items-center active-pulse">
247
- <div class="w-10 h-10 rounded-full bg-orange-900 flex items-center justify-center mr-3">
248
- <i class="fas fa-coins text-orange-400"></i>
249
- </div>
250
- <div>
251
- <h3 class="font-semibold">5% Cashback</h3>
252
- <span class="text-green-400 text-sm">Active</span>
253
  </div>
 
254
  </div>
255
 
256
- <div class="glass-card p-4 flex items-center daily-flicker">
257
- <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-3">
258
- <i class="fas fa-gift text-yellow-400"></i>
259
- </div>
260
- <div>
261
- <h3 class="font-semibold">Daily Bonus</h3>
262
- <span class="text-green-400 text-sm">Active</span>
263
  </div>
 
264
  </div>
265
 
266
- <div class="glass-card p-4 flex items-center opacity-50">
267
- <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3">
268
- <i class="fas fa-dice text-gray-400"></i>
269
- </div>
270
- <div>
271
- <h3 class="font-semibold">Exclusive Games</h3>
272
- <span class="text-gray-400 text-sm">Inactive</span>
273
  </div>
 
274
  </div>
275
 
276
- <div class="glass-card p-4 flex items-center opacity-50">
277
- <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center mr-3">
278
- <i class="fas fa-lock text-gray-400"></i>
279
- </div>
280
- <div>
281
- <h3 class="font-semibold">Early Access</h3>
282
- <span class="text-gray-400 text-sm">Locked</span>
283
  </div>
 
284
  </div>
285
  </div>
286
  </section>
287
-
288
- <!-- Recent Activity -->
289
  <section class="glass-card p-6 mb-8">
290
  <div class="flex justify-between items-center mb-6">
291
- <h2 class="text-2xl font-bold text-orange-300 hero-glow">Recent Activity</h2>
292
  <div class="flex space-x-4">
293
- <button class="tab-active px-3 py-1 text-sm font-medium">All</button>
294
- <button class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-orange-300">Purchase</button>
295
- <button class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-orange-300">Bonuses</button>
296
- <button class="px-3 py-1 text-sm font-medium text-gray-400 hover:text-orange-300">Games</button>
297
  </div>
298
  </div>
299
 
300
- <div class="space-y-4 pl-6 relative">
301
- <!-- Timeline item -->
302
- <div class="timeline-item relative pl-6 pb-4">
303
- <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-orange-500"></div>
304
- <div class="flex justify-between flex-wrap">
305
- <span class="font-semibold">Aug 16</span>
306
- <span class="text-orange-400 font-medium">Purchased 5,000 SC</span>
 
 
 
 
307
  </div>
308
- <p class="text-gray-400">$50</p>
309
- </div>
310
-
311
- <div class="timeline-item relative pl-6 pb-4">
312
- <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-yellow-500"></div>
313
- <div class="flex justify-between flex-wrap">
314
- <span class="font-semibold">Aug 14</span>
315
- <span class="text-yellow-400 font-medium">Claimed 50 Free Spins</span>
 
 
316
  </div>
317
- <p class="text-gray-400">Daily Bonus</p>
318
- </div>
319
-
320
- <div class="timeline-item relative pl-6">
321
- <div class="absolute left-0 top-0 w-4 h-4 rounded-full bg-green-500"></div>
322
- <div class="flex justify-between flex-wrap">
323
- <span class="font-semibold">Aug 12</span>
324
- <span class="text-green-400 font-medium">Completed Daily Mission</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
325
  </div>
326
- <p class="text-gray-400">+250 Points</p>
327
  </div>
328
  </div>
329
  </section>
330
-
331
- <!-- Account Options -->
332
  <section>
333
- <h2 class="text-2xl font-bold mb-6 text-orange-300 hero-glow">Account Settings</h2>
334
- <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
335
- <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center">
336
- <i class="fas fa-user-edit text-3xl mb-3 text-orange-400"></i>
337
- <h3 class="font-bold">Edit Profile</h3>
338
- </button>
 
 
 
339
 
340
- <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center">
341
- <i class="fas fa-history text-3xl mb-3 text-orange-400"></i>
342
- <h3 class="font-bold">Transaction History</h3>
343
- </button>
 
 
 
344
 
345
- <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center">
346
- <i class="fas fa-shield-alt text-3xl mb-3 text-orange-400"></i>
347
- <h3 class="font-bold">Security Settings</h3>
348
- </button>
 
 
 
349
 
350
- <button class="glass-card neon-btn p-6 flex flex-col items-center justify-center">
351
- <i class="fas fa-credit-card text-3xl mb-3 text-orange-400"></i>
352
- <h3 class="font-bold">Payment Methods</h3>
353
- </button>
 
 
 
354
  </div>
355
  </section>
356
  </div>
357
-
358
  <script>
359
- // Counter animation
360
  document.addEventListener('DOMContentLoaded', function() {
361
- // Animate progress bar
362
- document.querySelector('.progress-fill').style.width = '50%';
363
-
364
- // Animate counters
365
- const counters = document.querySelectorAll('.counter');
366
- const duration = 2000; // ms
367
 
368
  counters.forEach(counter => {
369
- const target = +counter.getAttribute('data-target');
370
- const start = 0;
371
- const increment = target / (duration / 16);
372
- let current = start;
373
 
374
- const updateCounter = () => {
375
- current += increment;
 
 
 
 
 
 
 
376
  if (current < target) {
377
- counter.textContent = Math.ceil(current).toLocaleString();
378
- requestAnimationFrame(updateCounter);
379
  } else {
380
- counter.textContent = target.toLocaleString();
381
  }
382
- };
383
-
384
- updateCounter();
385
  });
386
 
387
- // Add hover effects to buttons
388
- const neonButtons = document.querySelectorAll('.neon-btn');
389
- neonButtons.forEach(button => {
390
- button.addEventListener('mouseenter', () => {
391
- button.classList.add('glow-border');
 
 
 
 
 
 
 
 
 
 
 
392
  });
393
 
394
- button.addEventListener('mouseleave', () => {
395
- button.classList.remove('glow-border');
396
  });
397
  });
398
  });
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Kevin's Profile | NioPrime VIP</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>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
+ colors: {
14
+ 'glow-orange': '#ff6b35',
15
+ 'glow-gold': '#ffd166',
16
+ 'dark-bg': '#0a0a0a',
17
+ },
18
+ boxShadow: {
19
+ 'glow': '0 0 15px rgba(255, 107, 53, 0.7)',
20
+ 'glow-gold': '0 0 15px rgba(255, 209, 102, 0.7)',
21
+ 'glow-inner': 'inset 0 0 10px rgba(255, 107, 53, 0.5)',
22
+ },
23
  animation: {
24
+ 'pulse-slow': 'pulse 3s infinite',
25
+ 'fade-in': 'fadeIn 0.5s ease-in',
 
 
26
  },
27
  keyframes: {
28
+ fadeIn: {
29
+ '0%': { opacity: '0' },
30
+ '100%': { opacity: '1' },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  }
32
  }
33
  }
 
35
  }
36
  </script>
37
  <style>
38
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600&display=swap');
39
 
40
  body {
41
+ background: linear-gradient(
42
+ to bottom,
43
+ #000000 0%,
44
+ #1a0d00 15%,
45
+ #2e1300 32%,
46
+ #2e1300 68%,
47
+ #1a0d00 85%,
48
+ #000000 100%
49
+ );
50
+ font-family: 'Exo 2', sans-serif;
51
  min-height: 100vh;
52
  overflow-x: hidden;
53
+ position: relative;
54
+ color: #f0f0f0;
55
  }
56
+
57
+ /* Background orb effects */
58
+ body::before {
59
+ content: '';
60
+ position: absolute;
61
+ top: 30%;
62
+ left: 10%;
63
+ width: 300px;
64
+ height: 300px;
65
+ border-radius: 50%;
66
+ background: radial-gradient(circle, rgba(255,107,53,0.15) 0%, rgba(255,107,53,0) 70%);
67
+ filter: blur(20px);
68
+ z-index: -1;
69
+ }
70
+
71
+ body::after {
72
+ content: '';
73
+ position: absolute;
74
+ top: 60%;
75
+ right: 15%;
76
+ width: 200px;
77
+ height: 200px;
78
+ border-radius: 50%;
79
+ background: radial-gradient(circle, rgba(150,150,150,0.1) 0%, rgba(150,150,150,0) 70%);
80
+ filter: blur(20px);
81
+ z-index: -1;
82
+ }
83
+
84
+ /* Glassmorphism effect */
85
  .glass-card {
86
+ background: rgba(30, 30, 30, 0.2);
87
  backdrop-filter: blur(10px);
88
+ border: 1px solid rgba(255, 255, 255, 0.1);
 
89
  border-radius: 16px;
90
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
91
  }
92
+
93
+ /* Custom progress bar */
94
+ .progress-container {
95
+ height: 12px;
96
+ background: rgba(50, 50, 50, 0.7);
97
+ border-radius: 6px;
98
+ overflow: hidden;
99
  }
100
+
101
+ .progress-bar {
102
+ height: 100%;
103
+ background: linear-gradient(90deg, #ff6b35, #ff9e6d);
104
+ border-radius: 6px;
105
+ width: 50%; /* Will be animated to 1250/2500 = 50% */
106
+ animation: fillProgress 1.5s ease-in-out forwards;
107
  }
108
+
109
+ @keyframes fillProgress {
110
+ from { width: 0; }
111
+ to { width: 50%; }
112
  }
113
+
114
+ /* Title glow animation */
115
+ @keyframes titleGlow {
116
+ 0%, 100% {
117
+ text-shadow: 0 0 8px rgba(255, 107, 53, 0.7),
118
+ 0 0 16px rgba(255, 107, 53, 0.4);
119
+ }
120
+ 50% {
121
+ text-shadow: 0 0 12px rgba(255, 107, 53, 0.9),
122
+ 0 0 24px rgba(255, 107, 53, 0.6);
123
+ }
124
  }
125
+
126
+ .glow-title {
127
+ animation: titleGlow 5s infinite;
128
  }
129
+
130
+ /* Perk icon animations */
131
+ .perk-icon {
132
+ transition: all 0.3s ease;
133
+ filter: grayscale(0.7);
134
+ opacity: 0.8;
 
 
 
135
  }
136
+
137
+ .perk-icon.active {
138
+ filter: grayscale(0);
139
+ opacity: 1;
140
+ box-shadow: 0 0 15px rgba(255, 209, 102, 0.5);
141
  }
142
+
143
+ .perk-icon.active:hover {
144
+ transform: translateY(-5px);
145
+ box-shadow: 0 0 20px rgba(255, 209, 102, 0.8);
146
+ }
147
+
148
+ .perk-icon.pulse {
149
+ animation: pulse 2s infinite;
150
+ }
151
+
152
+ @keyframes pulse {
153
+ 0%, 100% { transform: scale(1); }
154
+ 50% { transform: scale(1.1); }
155
+ }
156
+
157
+ /* Settings card hover effect */
158
+ .settings-card {
159
  transition: all 0.3s ease;
160
+ border: 1px solid rgba(255, 107, 53, 0.3);
 
161
  }
162
+
163
+ .settings-card:hover {
164
+ transform: translateY(-5px);
165
+ box-shadow: 0 10px 25px rgba(255, 107, 53, 0.4);
166
+ border: 1px solid rgba(255, 107, 53, 0.7);
167
  }
168
+
169
+ /* Activity log entries */
170
+ .activity-entry {
171
+ animation: fadeIn 0.5s ease-in;
172
+ border-left: 2px solid #ff6b35;
173
+ padding-left: 16px;
174
  }
175
+
176
+ /* Tab styling */
177
+ .tab {
178
+ transition: all 0.2s ease;
179
+ cursor: pointer;
 
 
180
  }
181
+
182
+ .tab.active {
183
+ color: #ffd166;
184
+ border-bottom: 2px solid #ffd166;
 
 
 
185
  }
186
+
187
+ /* Number counting animation */
188
+ .count-up {
189
+ display: inline-block;
190
+ min-width: 50px;
191
+ }
192
+
193
+ /* Scrollbar styling */
194
+ .scrollable-panel::-webkit-scrollbar {
195
+ width: 6px;
196
+ }
197
+
198
+ .scrollable-panel::-webkit-scrollbar-track {
199
+ background: rgba(50, 50, 50, 0.3);
200
+ border-radius: 3px;
201
+ }
202
+
203
+ .scrollable-panel::-webkit-scrollbar-thumb {
204
+ background: #ff6b35;
205
+ border-radius: 3px;
206
+ }
207
+
208
+ /* Responsive adjustments */
209
+ @media (max-width: 768px) {
210
+ .hero-section {
211
+ flex-direction: column;
212
+ text-align: center;
213
+ }
214
+
215
+ .avatar-container {
216
+ margin-right: 0;
217
+ margin-bottom: 20px;
218
+ }
219
+
220
+ .stat-columns {
221
+ grid-template-columns: 1fr;
222
+ gap: 20px;
223
+ }
224
+
225
+ .perks-container {
226
+ flex-wrap: wrap;
227
+ justify-content: center;
228
+ }
229
+
230
+ .settings-grid {
231
+ grid-template-columns: 1fr;
232
+ }
233
  }
234
  </style>
235
  </head>
236
+ <body class="relative py-8">
237
+ <div class="absolute inset-0 z-0">
238
+ <!-- Floating elements -->
239
+ <div class="absolute top-1/4 left-1/4 w-4 h-4 bg-orange-500 rounded-full filter blur-md animate-pulse"></div>
240
+ <div class="absolute top-1/3 right-1/3 w-6 h-6 bg-orange-300 rounded-full filter blur-lg animate-pulse" style="animation-delay: 0.5s;"></div>
241
+ <div class="absolute bottom-1/4 left-1/3 w-3 h-3 bg-gray-400 rounded-full filter blur-md animate-pulse" style="animation-delay: 1s;"></div>
242
+ <div class="absolute bottom-1/3 right-1/4 w-5 h-5 bg-gray-300 rounded-full filter blur-lg animate-pulse" style="animation-delay: 1.5s;"></div>
243
+ </div>
244
+
245
+ <div class="container mx-auto px-4 max-w-6xl relative z-10">
246
  <!-- Hero Section -->
247
+ <section class="glass-card p-6 mb-8">
248
+ <div class="flex hero-section">
249
+ <div class="avatar-container flex items-center mr-8">
250
+ <div class="relative">
251
+ <div class="w-32 h-32 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center">
252
+ <div class="w-28 h-28 rounded-full bg-gray-800 flex items-center justify-center">
253
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80"
254
+ class="w-24 h-24 rounded-full object-cover border-2 border-amber-500"
255
+ alt="Kevin's Avatar">
256
+ </div>
257
  </div>
258
+ <div class="absolute -bottom-2 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-amber-500 to-orange-600 text-black text-xs font-bold px-3 py-1 rounded-full flex items-center">
259
+ NioPrime
260
+ <span class="ml-1 w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
261
+ </div>
262
+ <div class="absolute inset-0 rounded-full border-4 border-transparent animate-pulse" style="box-shadow: 0 0 15px rgba(255, 209, 102, 0.7);"></div>
263
  </div>
264
  </div>
265
 
266
+ <div class="flex-grow">
267
+ <h1 class="text-3xl md:text-4xl font-bold mb-2 glow-title">
268
+ <span class="text-white">Welcome back,</span>
269
+ <span class="text-orange-400">Kevin</span>
270
  </h1>
271
+ <p class="text-gray-300 mb-6">Here's your journey so far</p>
 
 
272
 
273
+ <div class="flex items-center mb-4">
274
+ <span class="bg-gradient-to-r from-amber-500 to-orange-600 text-black font-bold px-3 py-1 rounded-full mr-4">
275
+ NioPrime
276
+ </span>
277
+ <div class="flex-grow">
278
+ <div class="flex justify-between text-sm mb-1">
279
+ <span>1,250 / 2,500 pts</span>
280
+ <span>VIP Tier</span>
281
+ </div>
282
+ <div class="progress-container">
283
+ <div class="progress-bar"></div>
284
+ </div>
285
  </div>
286
  </div>
287
  </div>
288
  </div>
289
  </section>
290
+
291
+ <!-- Stat Summary Panel -->
292
+ <section class="glass-card p-6 mb-8">
293
+ <div class="grid grid-cols-1 md:grid-cols-3 stat-columns gap-6">
294
+ <!-- Column 1 -->
295
+ <div class="p-4 border-r border-gray-700">
296
+ <h3 class="text-lg font-bold text-orange-400 mb-4 text-center">Lifetime Stats</h3>
297
+ <div class="space-y-4">
298
+ <div>
299
+ <p class="text-gray-400">Spins Played</p>
300
+ <p class="text-2xl font-bold"><span class="count-up" data-target="12890">0</span></p>
301
+ </div>
302
+ <div>
303
+ <p class="text-gray-400">Total Purchases</p>
304
+ <p class="text-2xl font-bold">$<span class="count-up" data-target="2450">0</span></p>
305
+ </div>
306
+ <div>
307
+ <p class="text-gray-400">Time Played</p>
308
+ <p class="text-2xl font-bold"><span class="count-up" data-target="342">0</span> hrs</p>
309
+ </div>
310
  </div>
311
  </div>
312
+
313
+ <!-- Column 2 -->
314
+ <div class="p-4 border-r border-gray-700">
315
+ <h3 class="text-lg font-bold text-orange-400 mb-4 text-center">This Month</h3>
316
+ <div class="space-y-4">
317
+ <div>
318
+ <p class="text-gray-400">Spins</p>
319
+ <p class="text-2xl font-bold"><span class="count-up" data-target="1240">0</span></p>
320
+ </div>
321
+ <div>
322
+ <p class="text-gray-400">Bonuses Claimed</p>
323
+ <p class="text-2xl font-bold"><span class="count-up" data-target="18">0</span></p>
324
+ </div>
325
+ <div>
326
+ <p class="text-gray-400">Points Earned</p>
327
+ <p class="text-2xl font-bold"><span class="count-up" data-target="1250">0</span></p>
328
+ </div>
329
  </div>
330
  </div>
331
+
332
+ <!-- Column 3 -->
333
+ <div class="p-4">
334
+ <h3 class="text-lg font-bold text-orange-400 mb-4 text-center">VIP Snapshot</h3>
335
+ <div class="space-y-4">
336
+ <div>
337
+ <p class="text-gray-400">Current Tier</p>
338
+ <p class="text-2xl font-bold">NioPrime</p>
339
+ </div>
340
+ <div>
341
+ <p class="text-gray-400">Cashback %</p>
342
+ <p class="text-2xl font-bold"><span class="count-up" data-target="8">0</span>%</p>
343
+ </div>
344
+ <div>
345
+ <p class="text-gray-400">Time Remaining</p>
346
+ <p class="text-2xl font-bold">78 days</p>
347
+ </div>
348
  </div>
349
  </div>
350
  </div>
351
  </section>
352
+
353
+ <!-- Active Perks Section -->
354
+ <section class="mb-8">
355
+ <h2 class="text-2xl font-bold text-center mb-6 text-amber-300" style="text-shadow: 0 0 10px rgba(255, 209, 102, 0.7);">Your Active Perks</h2>
356
+ <div class="flex justify-center perks-container">
357
+ <div class="flex flex-col items-center mx-4">
358
+ <div class="perk-icon w-20 h-20 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-3xl active pulse">
359
+ 🪙
 
 
 
 
360
  </div>
361
+ <span class="mt-2 text-amber-300 text-sm">5% Cashback</span>
362
  </div>
363
 
364
+ <div class="flex flex-col items-center mx-4">
365
+ <div class="perk-icon w-20 h-20 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-3xl active pulse">
366
+ 🎁
 
 
 
 
367
  </div>
368
+ <span class="mt-2 text-amber-300 text-sm">Daily Bonus</span>
369
  </div>
370
 
371
+ <div class="flex flex-col items-center mx-4">
372
+ <div class="perk-icon w-20 h-20 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center text-3xl active">
373
+ 🎮
 
 
 
 
374
  </div>
375
+ <span class="mt-2 text-amber-300 text-sm">VIP Games</span>
376
  </div>
377
 
378
+ <div class="flex flex-col items-center mx-4">
379
+ <div class="perk-icon w-20 h-20 rounded-full bg-gray-700 flex items-center justify-center text-3xl">
380
+ 🔒
 
 
 
 
381
  </div>
382
+ <span class="mt-2 text-gray-500 text-sm">Early Access</span>
383
  </div>
384
  </div>
385
  </section>
386
+
387
+ <!-- Recent Activity Log -->
388
  <section class="glass-card p-6 mb-8">
389
  <div class="flex justify-between items-center mb-6">
390
+ <h2 class="text-2xl font-bold">Recent Activity</h2>
391
  <div class="flex space-x-4">
392
+ <div class="tab active px-3 py-1">All</div>
393
+ <div class="tab px-3 py-1">Purchases</div>
394
+ <div class="tab px-3 py-1">Bonuses</div>
395
+ <div class="tab px-3 py-1">Games</div>
396
  </div>
397
  </div>
398
 
399
+ <div class="scrollable-panel max-h-80 overflow-y-auto pr-2">
400
+ <div class="space-y-4">
401
+ <div class="activity-entry">
402
+ <div class="flex justify-between">
403
+ <div>
404
+ <span class="text-orange-400">Aug 16</span>
405
+ <span class="ml-2">Purchased $50</span>
406
+ </div>
407
+ <span class="text-amber-300">+5,000 SC</span>
408
+ </div>
409
+ <p class="text-sm text-gray-400 ml-6">Payment method: Credit Card</p>
410
  </div>
411
+
412
+ <div class="activity-entry">
413
+ <div class="flex justify-between">
414
+ <div>
415
+ <span class="text-orange-400">Aug 14</span>
416
+ <span class="ml-2">Claimed 50 Free Spins</span>
417
+ </div>
418
+ <span class="text-amber-300">+50 Spins</span>
419
+ </div>
420
+ <p class="text-sm text-gray-400 ml-6">Game: Fortune Tiger</p>
421
  </div>
422
+
423
+ <div class="activity-entry">
424
+ <div class="flex justify-between">
425
+ <div>
426
+ <span class="text-orange-400">Aug 12</span>
427
+ <span class="ml-2">Completed Daily Mission</span>
428
+ </div>
429
+ <span class="text-amber-300">+250 SC</span>
430
+ </div>
431
+ <p class="text-sm text-gray-400 ml-6">Mission: Play 20 spins</p>
432
+ </div>
433
+
434
+ <div class="activity-entry">
435
+ <div class="flex justify-between">
436
+ <div>
437
+ <span class="text-orange-400">Aug 10</span>
438
+ <span class="ml-2">VIP Weekly Bonus</span>
439
+ </div>
440
+ <span class="text-amber-300">+1,000 SC</span>
441
+ </div>
442
+ <p class="text-sm text-gray-400 ml-6">NioPrime Tier Reward</p>
443
+ </div>
444
+
445
+ <div class="activity-entry">
446
+ <div class="flex justify-between">
447
+ <div>
448
+ <span class="text-orange-400">Aug 8</span>
449
+ <span class="ml-2">Won Jackpot</span>
450
+ </div>
451
+ <span class="text-amber-300">+25,000 SC</span>
452
+ </div>
453
+ <p class="text-sm text-gray-400 ml-6">Game: Dragon's Fortune</p>
454
  </div>
 
455
  </div>
456
  </div>
457
  </section>
458
+
459
+ <!-- Account Settings Panel -->
460
  <section>
461
+ <h2 class="text-2xl font-bold mb-6">Account Settings</h2>
462
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 settings-grid">
463
+ <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
464
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
465
+ <i class="fas fa-user-edit text-2xl"></i>
466
+ </div>
467
+ <h3 class="text-xl font-bold mb-2">Edit Profile</h3>
468
+ <p class="text-gray-400 text-sm">Update your personal information</p>
469
+ </div>
470
 
471
+ <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
472
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
473
+ <i class="fas fa-history text-2xl"></i>
474
+ </div>
475
+ <h3 class="text-xl font-bold mb-2">Transaction History</h3>
476
+ <p class="text-gray-400 text-sm">View all your deposits and withdrawals</p>
477
+ </div>
478
 
479
+ <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
480
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
481
+ <i class="fas fa-shield-alt text-2xl"></i>
482
+ </div>
483
+ <h3 class="text-xl font-bold mb-2">Security Settings</h3>
484
+ <p class="text-gray-400 text-sm">Manage your account security</p>
485
+ </div>
486
 
487
+ <div class="glass-card settings-card p-6 flex flex-col items-center text-center cursor-pointer hover:shadow-glow">
488
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-orange-500 to-amber-700 flex items-center justify-center mb-4">
489
+ <i class="fas fa-credit-card text-2xl"></i>
490
+ </div>
491
+ <h3 class="text-xl font-bold mb-2">Payment Methods</h3>
492
+ <p class="text-gray-400 text-sm">Add or update payment options</p>
493
+ </div>
494
  </div>
495
  </section>
496
  </div>
497
+
498
  <script>
499
+ // Count-up animation for stats
500
  document.addEventListener('DOMContentLoaded', function() {
501
+ // Count-up animation for stats
502
+ const counters = document.querySelectorAll('.count-up');
503
+ const speed = 200;
 
 
 
504
 
505
  counters.forEach(counter => {
506
+ const target = parseInt(counter.getAttribute('data-target'));
507
+ const count = +counter.innerText;
508
+ const increment = target / speed;
 
509
 
510
+ if (count < target) {
511
+ counter.innerText = Math.ceil(count + increment);
512
+ setTimeout(updateCount, 1);
513
+ } else {
514
+ counter.innerText = target.toLocaleString();
515
+ }
516
+
517
+ function updateCount() {
518
+ const current = +counter.innerText.replace(/,/g, '');
519
  if (current < target) {
520
+ counter.innerText = Math.ceil(current + increment).toLocaleString();
521
+ setTimeout(updateCount, 1);
522
  } else {
523
+ counter.innerText = target.toLocaleString();
524
  }
525
+ }
 
 
526
  });
527
 
528
+ // Tab switching
529
+ const tabs = document.querySelectorAll('.tab');
530
+ tabs.forEach(tab => {
531
+ tab.addEventListener('click', function() {
532
+ tabs.forEach(t => t.classList.remove('active'));
533
+ this.classList.add('active');
534
+ });
535
+ });
536
+
537
+ // Perk icon hover effect
538
+ const perkIcons = document.querySelectorAll('.perk-icon');
539
+ perkIcons.forEach(icon => {
540
+ icon.addEventListener('mouseenter', function() {
541
+ if (this.classList.contains('active')) {
542
+ this.classList.add('pulse');
543
+ }
544
  });
545
 
546
+ icon.addEventListener('mouseleave', function() {
547
+ this.classList.remove('pulse');
548
  });
549
  });
550
  });