Hugging Face's logo

Spaces:
eddyencode
/
edinsondev
Running

App Files Community
eddyencode commited on
Commit
c879edd
·
verified ·
1 Parent(s): 3d0a414

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +958 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Edinsondev
3
- emoji: 📈
4
- colorFrom: indigo
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: edinsondev
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,958 @@
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>Avatar Marketplace</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
+ primary: '#0f172a',
15
+ secondary: '#f8fafc',
16
+ accent: '#38bdf8',
17
+ dark: '#1e293b',
18
+ darker: '#0f172a',
19
+ },
20
+ animation: {
21
+ 'fade-in': 'fadeIn 0.3s ease-out',
22
+ 'float': 'float 3s ease-in-out infinite',
23
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
24
+ 'shake': 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both'
25
+ },
26
+ keyframes: {
27
+ fadeIn: {
28
+ '0%': { opacity: '0', transform: 'translateY(20px)' },
29
+ '100%': { opacity: '1', transform: 'translateY(0)' }
30
+ },
31
+ float: {
32
+ '0%, 100%': { transform: 'translateY(0)' },
33
+ '50%': { transform: 'translateY(-10px)' }
34
+ },
35
+ shake: {
36
+ '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
37
+ '20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
38
+ '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
39
+ '40%, 60%': { transform: 'translate3d(4px, 0, 0)' }
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
+ <style>
47
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
48
+
49
+ body {
50
+ font-family: 'Poppins', sans-serif;
51
+ -webkit-tap-highlight-color: transparent;
52
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
53
+ }
54
+
55
+ .avatar-card {
56
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
57
+ transform: translateY(0);
58
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
59
+ perspective: 1000px;
60
+ }
61
+
62
+ .avatar-card:hover {
63
+ transform: translateY(-5px);
64
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
65
+ }
66
+
67
+ .avatar-image {
68
+ transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
69
+ transform-style: preserve-3d;
70
+ }
71
+
72
+ .avatar-card:hover .avatar-image {
73
+ transform: scale(1.05) rotateY(5deg);
74
+ }
75
+
76
+ .locked-avatar {
77
+ position: relative;
78
+ overflow: hidden;
79
+ }
80
+
81
+ .locked-overlay {
82
+ position: absolute;
83
+ top: 0;
84
+ left: 0;
85
+ right: 0;
86
+ bottom: 0;
87
+ background: rgba(15, 23, 42, 0.85);
88
+ display: flex;
89
+ flex-direction: column;
90
+ justify-content: center;
91
+ align-items: center;
92
+ backdrop-filter: blur(2px);
93
+ }
94
+
95
+ .progress-bar {
96
+ height: 6px;
97
+ border-radius: 3px;
98
+ background-color: #334155;
99
+ overflow: hidden;
100
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
101
+ }
102
+
103
+ .progress-fill {
104
+ height: 100%;
105
+ border-radius: 3px;
106
+ background: linear-gradient(90deg, #38bdf8, #0ea5e9);
107
+ transition: width 0.5s ease;
108
+ box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
109
+ }
110
+
111
+ .modal {
112
+ animation: fade-in 0.3s ease-out;
113
+ }
114
+
115
+ .tab-active {
116
+ position: relative;
117
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
118
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
119
+ }
120
+
121
+ .tab-active::after {
122
+ content: '';
123
+ position: absolute;
124
+ bottom: -2px;
125
+ left: 0;
126
+ width: 100%;
127
+ height: 3px;
128
+ background: linear-gradient(90deg, #38bdf8, #0ea5e9);
129
+ border-radius: 3px;
130
+ }
131
+
132
+ .glow {
133
+ filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
134
+ }
135
+
136
+ .nav-item {
137
+ transition: all 0.2s ease;
138
+ }
139
+
140
+ .nav-item:hover {
141
+ transform: translateY(-3px);
142
+ }
143
+
144
+ .level-badge {
145
+ position: relative;
146
+ overflow: hidden;
147
+ }
148
+
149
+ .level-badge::after {
150
+ content: '';
151
+ position: absolute;
152
+ top: -50%;
153
+ left: -50%;
154
+ width: 200%;
155
+ height: 200%;
156
+ background: linear-gradient(
157
+ to bottom right,
158
+ rgba(255, 255, 255, 0.3) 0%,
159
+ rgba(255, 255, 255, 0) 60%
160
+ );
161
+ transform: rotate(30deg);
162
+ animation: shine 3s infinite;
163
+ }
164
+
165
+ @keyframes shine {
166
+ 0% { transform: rotate(30deg) translate(-30%, -30%); }
167
+ 100% { transform: rotate(30deg) translate(30%, 30%); }
168
+ }
169
+
170
+ .premium-badge {
171
+ background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
172
+ color: white;
173
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
174
+ }
175
+
176
+ .rarity-common {
177
+ background: linear-gradient(135deg, #64748b 0%, #475569 100%);
178
+ }
179
+
180
+ .rarity-uncommon {
181
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
182
+ }
183
+
184
+ .rarity-rare {
185
+ background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
186
+ }
187
+
188
+ .rarity-epic {
189
+ background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
190
+ }
191
+
192
+ .rarity-legendary {
193
+ background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
194
+ }
195
+
196
+ .rarity-mythic {
197
+ background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
198
+ }
199
+
200
+ .shine-effect {
201
+ position: relative;
202
+ overflow: hidden;
203
+ }
204
+
205
+ .shine-effect::after {
206
+ content: '';
207
+ position: absolute;
208
+ top: 0;
209
+ left: -100%;
210
+ width: 100%;
211
+ height: 100%;
212
+ background: linear-gradient(
213
+ to right,
214
+ rgba(255, 255, 255, 0) 0%,
215
+ rgba(255, 255, 255, 0.2) 50%,
216
+ rgba(255, 255, 255, 0) 100%
217
+ );
218
+ animation: shine 5s infinite;
219
+ }
220
+
221
+ @keyframes shine {
222
+ 0% { left: -100%; }
223
+ 20% { left: 100%; }
224
+ 100% { left: 100%; }
225
+ }
226
+
227
+ .nav-glow {
228
+ box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
229
+ }
230
+ </style>
231
+ </head>
232
+ <body class="text-secondary min-h-screen">
233
+ <div class="container mx-auto px-4 py-4">
234
+ <!-- App Header -->
235
+ <header class="sticky top-0 z-10 bg-primary/90 backdrop-blur-sm py-3 mb-4 border-b border-slate-700">
236
+ <div class="flex justify-between items-center">
237
+ <div class="flex items-center space-x-2">
238
+ <div class="relative">
239
+ <div class="animate-pulse-slow">
240
+ <i class="fas fa-coins text-yellow-400 text-xl glow"></i>
241
+ </div>
242
+ <span id="coin-balance" class="text-lg font-bold ml-1">1,250</span>
243
+ </div>
244
+ </div>
245
+
246
+ <div class="text-center">
247
+ <h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-cyan-300 bg-clip-text text-transparent">Avatar Market</h1>
248
+ </div>
249
+
250
+ <div class="flex items-center space-x-2">
251
+ <div class="relative">
252
+ <i class="fas fa-level-up-alt text-blue-400 text-xl"></i>
253
+ <span id="player-level" class="text-lg font-bold ml-1">12</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Level progress -->
259
+ <div class="mt-3">
260
+ <div class="flex justify-between text-xs mb-1">
261
+ <span>Level Progress</span>
262
+ <span id="level-progress-text">1,200/2,000 XP</span>
263
+ </div>
264
+ <div class="progress-bar">
265
+ <div id="level-progress-fill" class="progress-fill" style="width: 60%"></div>
266
+ </div>
267
+ </div>
268
+ </header>
269
+
270
+ <!-- Level Tabs -->
271
+ <div class="flex overflow-x-auto pb-2 mb-4 hide-scrollbar">
272
+ <div class="flex space-x-2">
273
+ <button data-level="all" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap tab-active">
274
+ All
275
+ </button>
276
+ <button data-level="1" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap">
277
+ Lvl 1+
278
+ </button>
279
+ <button data-level="5" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap">
280
+ Lvl 5+
281
+ </button>
282
+ <button data-level="10" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap">
283
+ Lvl 10+
284
+ </button>
285
+ <button data-level="15" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap">
286
+ Lvl 15+
287
+ </button>
288
+ <button data-level="20" class="level-tab px-4 py-2 rounded-full bg-dark text-sm font-medium whitespace-nowrap">
289
+ Lvl 20+
290
+ </button>
291
+ <button data-level="premium" class="level-tab px-4 py-2 rounded-full bg-gradient-to-r from-yellow-500 to-pink-500 text-sm font-medium whitespace-nowrap">
292
+ <i class="fas fa-crown mr-1"></i> Premium
293
+ </button>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Avatar grid - 2 columns on mobile -->
298
+ <div class="grid grid-cols-2 gap-3 mb-20" id="avatar-grid">
299
+ <!-- Avatar 1 -->
300
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="1" data-rarity="uncommon">
301
+ <div class="relative">
302
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Bandit&backgroundColor=38bdf8" alt="Avatar" class="avatar-image w-full h-40 object-cover">
303
+ <div class="absolute top-2 right-2 rarity-uncommon text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
304
+ Lvl 1
305
+ </div>
306
+ </div>
307
+ <div class="p-3">
308
+ <h3 class="font-bold text-sm mb-1 truncate">Shadow Bandit</h3>
309
+ <p class="text-gray-400 text-xs mb-2 truncate">Stealthy rogue</p>
310
+ <div class="flex justify-between items-center">
311
+ <div class="flex items-center space-x-1">
312
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
313
+ <span class="font-bold text-sm">250</span>
314
+ </div>
315
+ <div class="flex space-x-1">
316
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
317
+ <i class="fas fa-eye text-xs"></i>
318
+ </button>
319
+ <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs">
320
+ Buy
321
+ </button>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <!-- Avatar 2 -->
328
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="5" data-rarity="rare">
329
+ <div class="relative">
330
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Knight&backgroundColor=0ea5e9" alt="Avatar" class="avatar-image w-full h-40 object-cover">
331
+ <div class="absolute top-2 right-2 rarity-rare text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
332
+ Lvl 5
333
+ </div>
334
+ </div>
335
+ <div class="p-3">
336
+ <h3 class="font-bold text-sm mb-1 truncate">Royal Knight</h3>
337
+ <p class="text-gray-400 text-xs mb-2 truncate">Noble warrior</p>
338
+ <div class="flex justify-between items-center">
339
+ <div class="flex items-center space-x-1">
340
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
341
+ <span class="font-bold text-sm">500</span>
342
+ </div>
343
+ <div class="flex space-x-1">
344
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
345
+ <i class="fas fa-eye text-xs"></i>
346
+ </button>
347
+ <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs">
348
+ Buy
349
+ </button>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Avatar 3 (Locked) -->
356
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="15" data-rarity="epic">
357
+ <div class="relative">
358
+ <div class="locked-avatar">
359
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Mage&backgroundColor=7c3aed" alt="Avatar" class="avatar-image w-full h-40 object-cover">
360
+ <div class="locked-overlay">
361
+ <div class="text-center animate-float">
362
+ <i class="fas fa-lock text-white text-2xl mb-1"></i>
363
+ <p class="text-white text-xs font-bold">Level 15 Required</p>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ <div class="absolute top-2 right-2 rarity-epic text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
368
+ Lvl 15
369
+ </div>
370
+ </div>
371
+ <div class="p-3">
372
+ <h3 class="font-bold text-sm mb-1 truncate">Arcane Mage</h3>
373
+ <p class="text-gray-400 text-xs mb-2 truncate">Master of magic</p>
374
+ <div class="flex justify-between items-center">
375
+ <div class="flex items-center space-x-1">
376
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
377
+ <span class="font-bold text-sm">750</span>
378
+ </div>
379
+ <div class="flex space-x-1">
380
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
381
+ <i class="fas fa-eye text-xs"></i>
382
+ </button>
383
+ <button class="buy-btn px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs" disabled>
384
+ Locked
385
+ </button>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- Avatar 4 -->
392
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="1" data-rarity="common">
393
+ <div class="relative">
394
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Ranger&backgroundColor=10b981" alt="Avatar" class="avatar-image w-full h-40 object-cover">
395
+ <div class="absolute top-2 right-2 rarity-common text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
396
+ Lvl 1
397
+ </div>
398
+ </div>
399
+ <div class="p-3">
400
+ <h3 class="font-bold text-sm mb-1 truncate">Forest Ranger</h3>
401
+ <p class="text-gray-400 text-xs mb-2 truncate">Nature guardian</p>
402
+ <div class="flex justify-between items-center">
403
+ <div class="flex items-center space-x-1">
404
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
405
+ <span class="font-bold text-sm">150</span>
406
+ </div>
407
+ <div class="flex space-x-1">
408
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
409
+ <i class="fas fa-eye text-xs"></i>
410
+ </button>
411
+ <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs">
412
+ Buy
413
+ </button>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Avatar 5 -->
420
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="8" data-rarity="rare">
421
+ <div class="relative">
422
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Alchemist&backgroundColor=f59e0b" alt="Avatar" class="avatar-image w-full h-40 object-cover">
423
+ <div class="absolute top-2 right-2 rarity-rare text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
424
+ Lvl 8
425
+ </div>
426
+ </div>
427
+ <div class="p-3">
428
+ <h3 class="font-bold text-sm mb-1 truncate">Potion Master</h3>
429
+ <p class="text-gray-400 text-xs mb-2 truncate">Magical elixirs</p>
430
+ <div class="flex justify-between items-center">
431
+ <div class="flex items-center space-x-1">
432
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
433
+ <span class="font-bold text-sm">400</span>
434
+ </div>
435
+ <div class="flex space-x-1">
436
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
437
+ <i class="fas fa-eye text-xs"></i>
438
+ </button>
439
+ <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs">
440
+ Buy
441
+ </button>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Avatar 6 (Premium) -->
448
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="premium" data-rarity="mythic">
449
+ <div class="relative">
450
+ <div class="locked-avatar">
451
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Dragon&backgroundColor=ec4899" alt="Avatar" class="avatar-image w-full h-40 object-cover">
452
+ <div class="locked-overlay">
453
+ <div class="text-center animate-float">
454
+ <i class="fas fa-crown text-yellow-400 text-2xl mb-1"></i>
455
+ <p class="text-white text-xs font-bold">Premium Only</p>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ <div class="absolute top-2 right-2 rarity-mythic text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
460
+ <i class="fas fa-crown mr-1"></i> Lvl 20
461
+ </div>
462
+ </div>
463
+ <div class="p-3">
464
+ <h3 class="font-bold text-sm mb-1 truncate">Dragon Lord</h3>
465
+ <p class="text-gray-400 text-xs mb-2 truncate">Fire ruler</p>
466
+ <div class="flex justify-between items-center">
467
+ <div class="flex items-center space-x-1">
468
+ <i class="fas fa-gem text-pink-400 text-xs"></i>
469
+ <span class="font-bold text-sm">1,200</span>
470
+ </div>
471
+ <div class="flex space-x-1">
472
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
473
+ <i class="fas fa-eye text-xs"></i>
474
+ </button>
475
+ <button class="buy-btn px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs" disabled>
476
+ Premium
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Avatar 7 -->
484
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="10" data-rarity="epic">
485
+ <div class="relative">
486
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Samurai&backgroundColor=8b5cf6" alt="Avatar" class="avatar-image w-full h-40 object-cover">
487
+ <div class="absolute top-2 right-2 rarity-epic text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
488
+ Lvl 10
489
+ </div>
490
+ </div>
491
+ <div class="p-3">
492
+ <h3 class="font-bold text-sm mb-1 truncate">Shadow Samurai</h3>
493
+ <p class="text-gray-400 text-xs mb-2 truncate">Silent blade</p>
494
+ <div class="flex justify-between items-center">
495
+ <div class="flex items-center space-x-1">
496
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
497
+ <span class="font-bold text-sm">600</span>
498
+ </div>
499
+ <div class="flex space-x-1">
500
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
501
+ <i class="fas fa-eye text-xs"></i>
502
+ </button>
503
+ <button class="buy-btn px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs">
504
+ Buy
505
+ </button>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Avatar 8 -->
512
+ <div class="avatar-card bg-dark rounded-xl overflow-hidden shadow-lg border border-slate-700" data-level="20" data-rarity="legendary">
513
+ <div class="relative">
514
+ <div class="locked-avatar">
515
+ <img src="https://api.dicebear.com/7.x/adventurer/svg?seed=Phoenix&backgroundColor=f59e0b" alt="Avatar" class="avatar-image w-full h-40 object-cover">
516
+ <div class="locked-overlay">
517
+ <div class="text-center animate-float">
518
+ <i class="fas fa-lock text-white text-2xl mb-1"></i>
519
+ <p class="text-white text-xs font-bold">Level 20 Required</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ <div class="absolute top-2 right-2 rarity-legendary text-white px-2 py-1 rounded-md text-xs font-bold level-badge">
524
+ Lvl 20
525
+ </div>
526
+ </div>
527
+ <div class="p-3">
528
+ <h3 class="font-bold text-sm mb-1 truncate">Phoenix Warrior</h3>
529
+ <p class="text-gray-400 text-xs mb-2 truncate">Reborn from ashes</p>
530
+ <div class="flex justify-between items-center">
531
+ <div class="flex items-center space-x-1">
532
+ <i class="fas fa-coins text-yellow-400 text-xs"></i>
533
+ <span class="font-bold text-sm">1,000</span>
534
+ </div>
535
+ <div class="flex space-x-1">
536
+ <button class="preview-btn p-1.5 bg-slate-700 rounded-md hover:bg-slate-600 transition">
537
+ <i class="fas fa-eye text-xs"></i>
538
+ </button>
539
+ <button class="buy-btn px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs" disabled>
540
+ Locked
541
+ </button>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Bottom Navigation -->
549
+ <nav class="fixed bottom-0 left-0 right-0 bg-darker/95 backdrop-blur-sm border-t border-slate-700 flex justify-around py-3 nav-glow">
550
+ <a href="#" class="nav-item flex flex-col items-center text-accent">
551
+ <i class="fas fa-home text-lg"></i>
552
+ <span class="text-xs mt-1">Home</span>
553
+ </a>
554
+ <a href="#" class="nav-item flex flex-col items-center text-accent">
555
+ <div class="relative">
556
+ <i class="fas fa-store text-lg"></i>
557
+ <div class="absolute -top-1 -right-1 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
558
+ </div>
559
+ <span class="text-xs mt-1">Market</span>
560
+ </a>
561
+ <a href="#" class="nav-item flex flex-col items-center text-gray-400">
562
+ <i class="fas fa-user text-lg"></i>
563
+ <span class="text-xs mt-1">Profile</span>
564
+ </a>
565
+ <a href="#" class="nav-item flex flex-col items-center text-gray-400">
566
+ <i class="fas fa-cog text-lg"></i>
567
+ <span class="text-xs mt-1">Settings</span>
568
+ </a>
569
+ </nav>
570
+
571
+ <!-- Preview Modal -->
572
+ <div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden modal">
573
+ <div class="bg-dark rounded-xl p-5 w-full mx-4 max-w-sm relative border border-slate-600">
574
+ <button id="close-preview" class="absolute top-4 right-4 text-gray-400 hover:text-white transition">
575
+ <i class="fas fa-times text-xl"></i>
576
+ </button>
577
+ <div class="text-center mb-5">
578
+ <img id="preview-avatar-img" src="" alt="Preview Avatar" class="w-40 h-40 mx-auto rounded-full object-cover border-4 border-accent shadow-lg glow">
579
+ </div>
580
+ <h2 id="preview-avatar-name" class="text-xl font-bold text-center mb-1">Avatar Name</h2>
581
+ <div class="flex justify-center mb-2">
582
+ <div id="preview-avatar-level" class="px-3 py-1 bg-accent rounded-full text-xs font-bold">
583
+ Level 5
584
+ </div>
585
+ </div>
586
+ <p id="preview-avatar-desc" class="text-gray-400 text-center text-sm mb-4 px-4">Avatar description</p>
587
+
588
+ <div class="bg-darker rounded-lg p-3 mb-4">
589
+ <div class="flex justify-between items-center">
590
+ <div class="flex items-center space-x-2">
591
+ <i class="fas fa-coins text-yellow-400"></i>
592
+ <div>
593
+ <p class="text-xs text-gray-400">Price</p>
594
+ <p id="preview-avatar-price" class="font-bold">250</p>
595
+ </div>
596
+ </div>
597
+ <div class="flex items-center space-x-2">
598
+ <i class="fas fa-medal text-blue-400"></i>
599
+ <div>
600
+ <p class="text-xs text-gray-400">Rarity</p>
601
+ <p id="preview-avatar-rarity" class="font-bold text-blue-400">Rare</p>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+
607
+ <button id="confirm-buy" class="w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl hover:opacity-90 transition font-bold flex items-center justify-center space-x-2 shine-effect">
608
+ <i class="fas fa-shopping-cart"></i>
609
+ <span>Buy Now</span>
610
+ </button>
611
+
612
+ <div class="text-xs text-gray-400 mt-3 text-center">
613
+ <p>This avatar will be equipped immediately after purchase</p>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Purchase Confirmation Modal -->
619
+ <div id="confirmation-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden modal">
620
+ <div class="bg-dark rounded-xl p-6 w-full mx-4 max-w-sm text-center border border-slate-600">
621
+ <div class="bg-green-500/20 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
622
+ <i class="fas fa-check-circle text-green-400 text-4xl"></i>
623
+ </div>
624
+ <h2 class="text-xl font-bold mb-2">Purchase Complete!</h2>
625
+ <p class="text-gray-400 text-sm mb-5">You've successfully purchased <span id="purchased-avatar-name" class="font-bold text-accent">Shadow Bandit</span>.</p>
626
+ <div class="flex space-x-3">
627
+ <button id="equip-now" class="flex-1 py-2.5 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl hover:opacity-90 transition font-bold text-sm">
628
+ Equip Now
629
+ </button>
630
+ <button id="close-confirmation" class="flex-1 py-2.5 bg-darker rounded-xl hover:bg-slate-700 transition font-bold text-sm border border-slate-600">
631
+ Close
632
+ </button>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Not enough coins modal -->
638
+ <div id="coins-modal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden modal">
639
+ <div class="bg-dark rounded-xl p-6 w-full mx-4 max-w-sm text-center border border-slate-600">
640
+ <div class="bg-yellow-500/20 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
641
+ <i class="fas fa-exclamation-triangle text-yellow-400 text-4xl"></i>
642
+ </div>
643
+ <h2 class="text-xl font-bold mb-2">Not Enough Coins!</h2>
644
+ <p class="text-gray-400 text-sm mb-5">You need <span id="coins-needed" class="font-bold text-yellow-400">250</span> more coins to purchase this avatar.</p>
645
+ <div class="flex space-x-3">
646
+ <button id="earn-coins" class="flex-1 py-2.5 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-xl hover:opacity-90 transition font-bold text-sm">
647
+ Earn Coins
648
+ </button>
649
+ <button id="close-coins" class="flex-1 py-2.5 bg-darker rounded-xl hover:bg-slate-700 transition font-bold text-sm border border-slate-600">
650
+ Cancel
651
+ </button>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ </div>
656
+
657
+ <script>
658
+ // Game state
659
+ const gameState = {
660
+ coins: 1250,
661
+ level: 12,
662
+ xp: 1200,
663
+ xpNeeded: 2000,
664
+ ownedAvatars: ['Shadow Bandit', 'Forest Ranger']
665
+ };
666
+
667
+ // DOM elements
668
+ const coinBalanceEl = document.getElementById('coin-balance');
669
+ const playerLevelEl = document.getElementById('player-level');
670
+ const levelProgressTextEl = document.getElementById('level-progress-text');
671
+ const levelProgressFillEl = document.getElementById('level-progress-fill');
672
+ const avatarGrid = document.getElementById('avatar-grid');
673
+
674
+ const previewModal = document.getElementById('preview-modal');
675
+ const closePreviewBtn = document.getElementById('close-preview');
676
+ const previewAvatarImg = document.getElementById('preview-avatar-img');
677
+ const previewAvatarName = document.getElementById('preview-avatar-name');
678
+ const previewAvatarDesc = document.getElementById('preview-avatar-desc');
679
+ const previewAvatarLevel = document.getElementById('preview-avatar-level');
680
+ const previewAvatarPrice = document.getElementById('preview-avatar-price');
681
+ const previewAvatarRarity = document.getElementById('preview-avatar-rarity');
682
+ const confirmBuyBtn = document.getElementById('confirm-buy');
683
+
684
+ const confirmationModal = document.getElementById('confirmation-modal');
685
+ const purchasedAvatarNameEl = document.getElementById('purchased-avatar-name');
686
+ const equipNowBtn = document.getElementById('equip-now');
687
+ const closeConfirmationBtn = document.getElementById('close-confirmation');
688
+
689
+ const coinsModal = document.getElementById('coins-modal');
690
+ const coinsNeededEl = document.getElementById('coins-needed');
691
+ const earnCoinsBtn = document.getElementById('earn-coins');
692
+ const closeCoinsBtn = document.getElementById('close-coins');
693
+
694
+ // Rarity colors and names
695
+ const rarityData = {
696
+ common: { name: 'Common', color: 'text-gray-400' },
697
+ uncommon: { name: 'Uncommon', color: 'text-green-400' },
698
+ rare: { name: 'Rare', color: 'text-blue-400' },
699
+ epic: { name: 'Epic', color: 'text-purple-400' },
700
+ legendary: { name: 'Legendary', color: 'text-yellow-400' },
701
+ mythic: { name: 'Mythic', color: 'text-pink-400' }
702
+ };
703
+
704
+ // Level tab functionality
705
+ document.querySelectorAll('.level-tab').forEach(btn => {
706
+ btn.addEventListener('click', function() {
707
+ document.querySelectorAll('.level-tab').forEach(b => {
708
+ b.classList.remove('tab-active', 'text-accent');
709
+ b.classList.add('text-gray-300');
710
+ });
711
+
712
+ this.classList.add('tab-active', 'text-accent');
713
+ this.classList.remove('text-gray-300');
714
+
715
+ const level = this.getAttribute('data-level');
716
+ filterAvatarsByLevel(level);
717
+ });
718
+ });
719
+
720
+ // Filter avatars by level
721
+ function filterAvatarsByLevel(level) {
722
+ const avatars = avatarGrid.querySelectorAll('.avatar-card');
723
+
724
+ avatars.forEach(avatar => {
725
+ const avatarLevel = avatar.getAttribute('data-level');
726
+ const isPremium = avatar.getAttribute('data-level') === 'premium';
727
+
728
+ if (level === 'all') {
729
+ avatar.classList.remove('hidden');
730
+ } else if (level === 'premium') {
731
+ if (isPremium) {
732
+ avatar.classList.remove('hidden');
733
+ } else {
734
+ avatar.classList.add('hidden');
735
+ }
736
+ } else {
737
+ if (isPremium) {
738
+ avatar.classList.add('hidden');
739
+ } else if (parseInt(avatarLevel) <= parseInt(level)) {
740
+ avatar.classList.remove('hidden');
741
+ } else {
742
+ avatar.classList.add('hidden');
743
+ }
744
+ }
745
+ });
746
+ }
747
+
748
+ // Update UI with game state
749
+ function updateUI() {
750
+ coinBalanceEl.textContent = gameState.coins.toLocaleString();
751
+ playerLevelEl.textContent = gameState.level;
752
+ levelProgressTextEl.textContent = `${gameState.xp.toLocaleString()}/${gameState.xpNeeded.toLocaleString()} XP`;
753
+ levelProgressFillEl.style.width = `${(gameState.xp / gameState.xpNeeded) * 100}%`;
754
+
755
+ // Update buy buttons based on ownership
756
+ document.querySelectorAll('.avatar-card').forEach(card => {
757
+ const avatarName = card.querySelector('h3').textContent;
758
+ const buyBtn = card.querySelector('.buy-btn');
759
+ const levelReq = parseInt(card.getAttribute('data-level'));
760
+ const isPremium = card.getAttribute('data-level') === 'premium';
761
+
762
+ if (gameState.ownedAvatars.includes(avatarName)) {
763
+ buyBtn.textContent = 'Owned';
764
+ buyBtn.className = 'px-2 py-1 bg-green-600 rounded-md cursor-default text-xs';
765
+ buyBtn.disabled = true;
766
+ } else if (isPremium) {
767
+ buyBtn.textContent = 'Premium';
768
+ buyBtn.className = 'px-2 py-1 bg-gradient-to-r from-yellow-500 to-pink-500 rounded-md cursor-not-allowed text-xs';
769
+ buyBtn.disabled = true;
770
+ } else if (levelReq > gameState.level) {
771
+ buyBtn.textContent = 'Locked';
772
+ buyBtn.className = 'px-2 py-1 bg-gray-600 rounded-md cursor-not-allowed text-xs';
773
+ buyBtn.disabled = true;
774
+ } else {
775
+ buyBtn.textContent = 'Buy';
776
+ buyBtn.className = 'px-2 py-1 bg-blue-600 rounded-md hover:bg-blue-500 transition text-xs';
777
+ buyBtn.disabled = false;
778
+ }
779
+ });
780
+ }
781
+
782
+ // Initialize preview buttons
783
+ document.querySelectorAll('.preview-btn').forEach(btn => {
784
+ btn.addEventListener('click', function() {
785
+ const card = this.closest('.avatar-card');
786
+ const imgSrc = card.querySelector('img').src;
787
+ const name = card.querySelector('h3').textContent;
788
+ const desc = card.querySelector('p').textContent;
789
+ const level = card.querySelector('.level-badge').textContent.trim();
790
+ const price = card.querySelector('.flex.items-center.space-x-1 span').textContent;
791
+ const rarity = card.getAttribute('data-rarity');
792
+ const rarityInfo = rarityData[rarity];
793
+
794
+ previewAvatarImg.src = imgSrc;
795
+ previewAvatarName.textContent = name;
796
+ previewAvatarDesc.textContent = desc;
797
+ previewAvatarLevel.textContent = level;
798
+ previewAvatarPrice.textContent = price;
799
+ previewAvatarRarity.textContent = rarityInfo.name;
800
+ previewAvatarRarity.className = `font-bold ${rarityInfo.color}`;
801
+
802
+ // Update confirm buy button based on ownership/level
803
+ if (gameState.ownedAvatars.includes(name)) {
804
+ confirmBuyBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Already Owned';
805
+ confirmBuyBtn.className = 'w-full py-3 bg-green-600 rounded-xl cursor-default font-bold flex items-center justify-center';
806
+ confirmBuyBtn.disabled = true;
807
+ } else {
808
+ const levelReq = parseInt(level.replace('Lvl ', '').replace(/\D/g, '') || '0');
809
+ const priceNum = parseInt(price.replace(/,/g, ''));
810
+ const isPremium = card.getAttribute('data-level') === 'premium';
811
+
812
+ if (isPremium) {
813
+ confirmBuyBtn.innerHTML = '<i class="fas fa-crown mr-2"></i> Premium Required';
814
+ confirmBuyBtn.className = 'w-full py-3 bg-gradient-to-r from-yellow-500 to-pink-500 rounded-xl cursor-not-allowed font-bold flex items-center justify-center';
815
+ confirmBuyBtn.disabled = true;
816
+ } else if (levelReq > gameState.level) {
817
+ confirmBuyBtn.innerHTML = '<i class="fas fa-lock mr-2"></i> Level Required';
818
+ confirmBuyBtn.className = 'w-full py-3 bg-gray-600 rounded-xl cursor-not-allowed font-bold flex items-center justify-center';
819
+ confirmBuyBtn.disabled = true;
820
+ } else if (priceNum > gameState.coins) {
821
+ confirmBuyBtn.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i> Not Enough Coins';
822
+ confirmBuyBtn.className = 'w-full py-3 bg-red-600 rounded-xl cursor-not-allowed font-bold flex items-center justify-center';
823
+ confirmBuyBtn.disabled = true;
824
+ } else {
825
+ confirmBuyBtn.innerHTML = '<i class="fas fa-shopping-cart mr-2"></i> Buy Now';
826
+ confirmBuyBtn.className = 'w-full py-3 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl hover:opacity-90 transition font-bold flex items-center justify-center shine-effect';
827
+ confirmBuyBtn.disabled = false;
828
+ }
829
+ }
830
+
831
+ previewModal.classList.remove('hidden');
832
+ document.body.style.overflow = 'hidden';
833
+ });
834
+ });
835
+
836
+ // Close preview modal
837
+ closePreviewBtn.addEventListener('click', function() {
838
+ previewModal.classList.add('hidden');
839
+ document.body.style.overflow = 'auto';
840
+ });
841
+
842
+ // Confirm purchase
843
+ confirmBuyBtn.addEventListener('click', function() {
844
+ const avatarName = previewAvatarName.textContent;
845
+ const price = parseInt(previewAvatarPrice.textContent.replace(/,/g, ''));
846
+
847
+ if (!gameState.ownedAvatars.includes(avatarName) && gameState.coins >= price) {
848
+ // Deduct coins
849
+ gameState.coins -= price;
850
+
851
+ // Add to owned avatars
852
+ gameState.ownedAvatars.push(avatarName);
853
+
854
+ // Add XP
855
+ gameState.xp += Math.floor(price * 0.5);
856
+
857
+ // Check for level up
858
+ if (gameState.xp >= gameState.xpNeeded) {
859
+ gameState.level++;
860
+ gameState.xp = gameState.xp - gameState.xpNeeded;
861
+ gameState.xpNeeded = Math.floor(gameState.xpNeeded * 1.2);
862
+
863
+ // Show level up animation
864
+ const levelEl = document.getElementById('player-level');
865
+ levelEl.classList.add('animate-shake');
866
+ setTimeout(() => {
867
+ levelEl.classList.remove('animate-shake');
868
+ }, 500);
869
+ }
870
+
871
+ // Update UI
872
+ updateUI();
873
+
874
+ // Show confirmation
875
+ purchasedAvatarNameEl.textContent = avatarName;
876
+ previewModal.classList.add('hidden');
877
+ confirmationModal.classList.remove('hidden');
878
+ document.body.style.overflow = 'hidden';
879
+ } else if (gameState.coins < price) {
880
+ coinsNeededEl.textContent = (price - gameState.coins).toLocaleString();
881
+ previewModal.classList.add('hidden');
882
+ coinsModal.classList.remove('hidden');
883
+ document.body.style.overflow = 'hidden';
884
+ }
885
+ });
886
+
887
+ // Equip now button
888
+ equipNowBtn.addEventListener('click', function() {
889
+ // Animation for equip
890
+ this.innerHTML = '<i class="fas fa-check mr-2"></i> Equipped!';
891
+ this.classList.remove('bg-gradient-to-r', 'from-blue-500', 'to-cyan-500', 'hover:opacity-90');
892
+ this.classList.add('bg-green-500', 'hover:bg-green-400');
893
+
894
+ setTimeout(() => {
895
+ confirmationModal.classList.add('hidden');
896
+ document.body.style.overflow = 'auto';
897
+
898
+ // Reset button
899
+ this.innerHTML = 'Equip Now';
900
+ this.classList.remove('bg-green-500', 'hover:bg-green-400');
901
+ this.classList.add('bg-gradient-to-r', 'from-blue-500', 'to-cyan-500', 'hover:opacity-90');
902
+ }, 1000);
903
+ });
904
+
905
+ // Close confirmation modal
906
+ closeConfirmationBtn.addEventListener('click', function() {
907
+ confirmationModal.classList.add('hidden');
908
+ document.body.style.overflow = 'auto';
909
+ });
910
+
911
+ // Earn coins button
912
+ earnCoinsBtn.addEventListener('click', function() {
913
+ // Add some coins
914
+ gameState.coins += 500;
915
+ updateUI();
916
+
917
+ // Animation
918
+ this.innerHTML = '<i class="fas fa-coins mr-2"></i> +500 Coins!';
919
+ this.classList.remove('bg-gradient-to-r', 'from-yellow-500', 'to-orange-500', 'hover:opacity-90');
920
+ this.classList.add('bg-green-500', 'hover:bg-green-400');
921
+
922
+ setTimeout(() => {
923
+ coinsModal.classList.add('hidden');
924
+ document.body.style.overflow = 'auto';
925
+
926
+ // Reset button
927
+ this.innerHTML = 'Earn Coins';
928
+ this.classList.remove('bg-green-500', 'hover:bg-green-400');
929
+ this.classList.add('bg-gradient-to-r', 'from-yellow-500', 'to-orange-500', 'hover:opacity-90');
930
+
931
+ // Show preview again
932
+ previewModal.classList.remove('hidden');
933
+ document.body.style.overflow = 'hidden';
934
+ }, 1500);
935
+ });
936
+
937
+ // Close coins modal
938
+ closeCoinsBtn.addEventListener('click', function() {
939
+ coinsModal.classList.add('hidden');
940
+ document.body.style.overflow = 'auto';
941
+ });
942
+
943
+ // Initialize
944
+ updateUI();
945
+
946
+ // Add touch effect to cards
947
+ document.querySelectorAll('.avatar-card').forEach(card => {
948
+ card.addEventListener('touchstart', function() {
949
+ this.classList.add('active:scale-95');
950
+ });
951
+
952
+ card.addEventListener('touchend', function() {
953
+ this.classList.remove('active:scale-95');
954
+ });
955
+ });
956
+ </script>
957
+ <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=eddyencode/edinsondev" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
958
+ </html>