Hugging Face's logo

Spaces:
jahn001
/
jahn-s-space
Running

App Files Community
jahn001 commited on
Commit
fbb1b07
·
verified ·
1 Parent(s): 8a95916

bro remove neon reflective colors - Initial Deployment

Browse files
Files changed (4) hide show
  1. README.md +7 -5
  2. games.html +458 -0
  3. index.html +703 -18
  4. prompts.txt +6 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jahn S Space
3
- emoji: 🚀
4
- colorFrom: red
5
- colorTo: purple
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: jahn-s-space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
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
games.html ADDED
@@ -0,0 +1,458 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Games | CryptoGameX</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
14
+
15
+ :root {
16
+ --primary: #2563eb;
17
+ --secondary: #7c3aed;
18
+ --accent: #10b981;
19
+ --dark-bg: #0a0a1a;
20
+ }
21
+
22
+ body {
23
+ font-family: 'Rajdhani', sans-serif;
24
+ background-color: var(--dark-bg);
25
+ color: white;
26
+ overflow-x: hidden;
27
+ }
28
+
29
+ .title-font {
30
+ font-family: 'Orbitron', sans-serif;
31
+ }
32
+
33
+ .text-primary {
34
+ color: var(--primary);
35
+ }
36
+
37
+ .text-secondary {
38
+ color: var(--secondary);
39
+ }
40
+
41
+ .border-primary {
42
+ border: 1px solid var(--primary);
43
+ }
44
+
45
+ .border-secondary {
46
+ border: 1px solid var(--secondary);
47
+ }
48
+
49
+ .game-card {
50
+ background: rgba(10, 10, 26, 0.7);
51
+ backdrop-filter: blur(10px);
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .game-card:hover {
56
+ transform: translateY(-5px);
57
+ }
58
+
59
+ .game-tag {
60
+ position: absolute;
61
+ top: 10px;
62
+ right: 10px;
63
+ padding: 2px 8px;
64
+ border-radius: 12px;
65
+ font-size: 12px;
66
+ font-weight: 600;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <!-- Navigation -->
72
+ <nav class="border-b border-gray-800 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg fixed w-full z-50">
73
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
74
+ <div class="flex items-center justify-between h-16">
75
+ <div class="flex items-center">
76
+ <div class="flex-shrink-0">
77
+ <a href="index.html" class="text-2xl font-bold neon-text-pink title-font">CRYPTOGAMEX</a>
78
+ </div>
79
+ <div class="hidden md:block">
80
+ <div class="ml-10 flex items-baseline space-x-4">
81
+ <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Home</a>
82
+ <a href="games.html" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-pink-600">Games</a>
83
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Leaderboard</a>
84
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Records</a>
85
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Rewards</a>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <div class="hidden md:block">
90
+ <div class="ml-4 flex items-center md:ml-6">
91
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
92
+ <i data-feather="bell"></i>
93
+ </button>
94
+ <div class="ml-3 relative">
95
+ <div class="flex items-center">
96
+ <span class="mr-2 text-sm font-medium text-white">0.05 ETH</span>
97
+ <button class="neon-border-pink text-white px-4 py-1 rounded-full text-sm font-medium flex items-center">
98
+ <i data-feather="user" class="mr-1"></i>
99
+ <span>Player123</span>
100
+ </button>
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ <div class="-mr-2 flex md:hidden">
106
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
107
+ <i data-feather="menu"></i>
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </nav>
113
+
114
+ <!-- Games Header -->
115
+ <div class="pt-32 pb-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-blue-900 to-transparent">
116
+ <div class="max-w-7xl mx-auto text-center">
117
+ <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight title-font text-primary">
118
+ OUR <span class="text-secondary">GAMES</span>
119
+ </h1>
120
+ <p class="mt-4 max-w-2xl mx-auto text-lg text-gray-300">
121
+ Choose from our competitive skill-based games and start earning crypto today
122
+ </p>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Games Filter -->
127
+ <div class="py-8 px-4 sm:px-6 lg:px-8">
128
+ <div class="max-w-7xl mx-auto">
129
+ <div class="flex flex-col md:flex-row justify-between items-center">
130
+ <div class="w-full md:w-auto mb-4 md:mb-0">
131
+ <div class="relative">
132
+ <input type="text" placeholder="Search games..." class="w-full md:w-64 pl-10 pr-4 py-2 rounded-full bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-pink-500">
133
+ <div class="absolute left-3 top-2.5 text-gray-400">
134
+ <i data-feather="search"></i>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ <div class="flex space-x-2 overflow-x-auto w-full md:w-auto">
139
+ <button class="px-4 py-2 rounded-full bg-pink-600 text-white text-sm font-medium">All Games</button>
140
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-gray-300 hover:text-white text-sm font-medium">Memory</button>
141
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-gray-300 hover:text-white text-sm font-medium">Puzzle</button>
142
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-gray-300 hover:text-white text-sm font-medium">Strategy</button>
143
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-gray-300 hover:text-white text-sm font-medium">Speed</button>
144
+ <button class="px-4 py-2 rounded-full bg-gray-800 text-gray-300 hover:text-white text-sm font-medium">Trivia</button>
145
+ </div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Games Grid -->
151
+ <section class="py-8 px-4 sm:px-6 lg:px-8">
152
+ <div class="max-w-7xl mx-auto">
153
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
154
+ <!-- Game 1 -->
155
+ <div class="game-card rounded-xl overflow-hidden border-primary" data-aos="fade-up">
156
+ <div class="relative">
157
+ <img src="http://static.photos/gaming/640x360/1" alt="Memory Matrix" class="w-full h-48 object-cover">
158
+ <span class="game-tag bg-primary text-white">MEMORY</span>
159
+ </div>
160
+ <div class="p-6">
161
+ <h3 class="text-xl font-bold title-font mb-2">Memory Matrix</h3>
162
+ <p class="text-gray-300 mb-4">Memorize and replicate complex patterns under time pressure to score points.</p>
163
+ <div class="flex justify-between items-center">
164
+ <div class="flex items-center text-sm text-gray-400">
165
+ <i data-feather="users" class="mr-1 w-4 h-4"></i>
166
+ <span>1,245 playing</span>
167
+ </div>
168
+ <div class="text-sm font-bold text-blue-400">
169
+ 0.01 ETH entry
170
+ </div>
171
+ </div>
172
+ <div class="mt-6">
173
+ <a href="#" class="block w-full text-center border-secondary text-white px-4 py-2 rounded-full text-sm font-medium">
174
+ Play Now
175
+ </a>
176
+ </div>
177
+ </div>
178
+ </div>
179
+
180
+ <!-- Game 2 -->
181
+ <div class="game-card rounded-xl overflow-hidden border-secondary" data-aos="fade-up" data-aos-delay="100">
182
+ <div class="relative">
183
+ <img src="http://static.photos/gaming/640x360/2" alt="Crypto Quiz" class="w-full h-48 object-cover">
184
+ <span class="game-tag bg-secondary text-white">TRIVIA</span>
185
+ </div>
186
+ <div class="p-6">
187
+ <h3 class="text-xl font-bold title-font mb-2">Crypto Quiz</h3>
188
+ <p class="text-gray-300 mb-4">Test your blockchain knowledge against others in this fast-paced trivia game.</p>
189
+ <div class="flex justify-between items-center">
190
+ <div class="flex items-center text-sm text-gray-400">
191
+ <i data-feather="users" class="mr-1 w-4 h-4"></i>
192
+ <span>890 playing</span>
193
+ </div>
194
+ <div class="text-sm font-bold text-pink-400">
195
+ 0.01 ETH entry
196
+ </div>
197
+ </div>
198
+ <div class="mt-6">
199
+ <a href="#" class="block w-full text-center border-primary text-white px-4 py-2 rounded-full text-sm font-medium">
200
+ Play Now
201
+ </a>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Game 3 -->
207
+ <div class="game-card rounded-xl overflow-hidden border-primary" data-aos="fade-up" data-aos-delay="200">
208
+ <div class="relative">
209
+ <img src="http://static.photos/gaming/640x360/3" alt="Block Builder" class="w-full h-48 object-cover">
210
+ <span class="game-tag bg-primary text-white">STRATEGY</span>
211
+ </div>
212
+ <div class="p-6">
213
+ <h3 class="text-xl font-bold title-font mb-2">Block Builder</h3>
214
+ <p class="text-gray-300 mb-4">Stack blocks strategically to build the tallest structure without collapsing.</p>
215
+ <div class="flex justify-between items-center">
216
+ <div class="flex items-center text-sm text-gray-400">
217
+ <i data-feather="users" class="mr-1 w-4 h-4"></i>
218
+ <span>1,750 playing</span>
219
+ </div>
220
+ <div class="text-sm font-bold text-blue-400">
221
+ 0.01 ETH entry
222
+ </div>
223
+ </div>
224
+ <div class="mt-6">
225
+ <a href="#" class="block w-full text-center border-secondary text-white px-4 py-2 rounded-full text-sm font-medium">
226
+ Play Now
227
+ </a>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Game 4 -->
233
+ <div class="game-card rounded-xl overflow-hidden border-secondary" data-aos="fade-up">
234
+ <div class="relative">
235
+ <img src="http://static.photos/gaming/640x360/4" alt="Token Tower" class="w-full h-48 object-cover">
236
+ <span class="game-tag bg-secondary text-white">PUZZLE</span>
237
+ </div>
238
+ <div class="p-6">
239
+ <h3 class="text-xl font-bold title-font mb-2">Token Tower</h3>
240
+ <p class="text-gray-300 mb-4">Solve crypto-themed puzzles to climb the tower and earn rewards.</p>
241
+ <div class="flex justify-between items-center">
242
+ <div class="flex items-center text-sm text-gray-400">
243
+ <i data-feather="users" class="mr-1 w-4 h-4"></i>
244
+ <span>620 playing</span>
245
+ </div>
246
+ <div class="text-sm font-bold text-pink-400">
247
+ 0.01 ETH entry
248
+ </div>
249
+ </div>
250
+ <div class="mt-6">
251
+ <a href="#" class="block w-full text-center border-primary text-white px-4 py-2 rounded-full text-sm font-medium">
252
+ Play Now
253
+ </a>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Game 5 -->
259
+ <div class="game-card rounded-xl overflow-hidden border-primary" data-aos="fade-up" data-aos-delay="100">
260
+ <div class="relative">
261
+ <img src="http://static.photos/gaming/640x360/5" alt="DeFi Dash" class="w-full h-48 object-cover">
262
+ <span class="game-tag bg-primary text-white">SPEED</span>
263
+ </div>
264
+ <div class="p-6">
265
+ <h3 class="text-xl font-bold title-font mb-2">DeFi Dash</h3>
266
+ <p class="text-gray-300 mb-4">Navigate through DeFi protocols in this fast-paced reaction game.</p>
267
+ <div class="flex justify-between items-center">
268
+ <div class="flex items-center text-sm text-gray-400">
269
+ <i data-feather="users" class="mr-1 w-4 h-4"></i>
270
+ <span>1,120 playing</span>
271
+ </div>
272
+ <div class="text-sm font-bold text-blue-400">
273
+ 0.01 ETH entry
274
+ </div>
275
+ </div>
276
+ <div class="mt-6">
277
+ <a href="#" class="block w-full text-center border-secondary text-white px-4 py-2 rounded-full text-sm font-medium">
278
+ Play Now
279
+ </a>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Game 6 -->
285
+ <div class="game-card rounded-xl overflow-hidden border-secondary" data-aos="fade-up" data-aos-delay="200">
286
+ <div class="relative">
287
+ <img src="http://static.photos/gaming/640x360/6" alt="NFT Collector" class="w-full h-48 object-cover">
288
+ <span class="game-tag bg-secondary text-white">STRATEGY</span>
289
+ </div>
290
+ <div class="p-6">
291
+ <h3 class="text-xl font-bold title-font mb-2">NFT Collector</h3>
292
+ <p class="text-gray-300 mb-4">Build the most valuable NFT collection through strategic trading.</p>
293
+ <div class="flex justify-between items-center">
294
+ <div class="flex items-center text-sm text-gray-400">
295
+ <i data-feather="users" class="mr-1 w-4 h-4"></i>
296
+ <span>950 playing</span>
297
+ </div>
298
+ <div class="text-sm font-bold text-pink-400">
299
+ 0.01 ETH entry
300
+ </div>
301
+ </div>
302
+ <div class="mt-6">
303
+ <a href="#" class="block w-full text-center border-primary text-white px-4 py-2 rounded-full text-sm font-medium">
304
+ Play Now
305
+ </a>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mt-12 text-center">
312
+ <button class="neon-border-blue text-white px-6 py-3 rounded-full text-sm font-medium">
313
+ Load More Games
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </section>
318
+
319
+ <!-- Coming Soon Games -->
320
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50">
321
+ <div class="max-w-7xl mx-auto">
322
+ <div class="text-center mb-12">
323
+ <h2 class="text-3xl font-bold title-font neon-text-pink">COMING SOON</h2>
324
+ <p class="mt-2 text-gray-400">Exciting new games launching soon</p>
325
+ </div>
326
+
327
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
328
+ <div class="game-card rounded-xl p-6 border-primary opacity-75" data-aos="fade-up">
329
+ <div class="flex justify-center mb-6">
330
+ <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center">
331
+ <i data-feather="clock" class="w-10 h-10 text-primary"></i>
332
+ </div>
333
+ </div>
334
+ <h3 class="text-xl font-bold title-font text-center mb-2">Crypto Chess</h3>
335
+ <p class="text-gray-400 text-center mb-4">Blockchain-themed chess with special NFT pieces and crypto rewards.</p>
336
+ <div class="text-center text-primary font-medium">
337
+ Launching in 7 days
338
+ </div>
339
+ </div>
340
+
341
+ <div class="game-card rounded-xl p-6 border-secondary opacity-75" data-aos="fade-up" data-aos-delay="100">
342
+ <div class="flex justify-center mb-6">
343
+ <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center">
344
+ <i data-feather="clock" class="w-10 h-10 text-secondary"></i>
345
+ </div>
346
+ </div>
347
+ <h3 class="text-xl font-bold title-font text-center mb-2">Token Tetris</h3>
348
+ <p class="text-gray-400 text-center mb-4">Classic tetris with crypto tokens and special blockchain power-ups.</p>
349
+ <div class="text-center text-secondary font-medium">
350
+ Launching in 14 days
351
+ </div>
352
+ </div>
353
+
354
+ <div class="game-card rounded-xl p-6 border-primary opacity-75" data-aos="fade-up" data-aos-delay="200">
355
+ <div class="flex justify-center mb-6">
356
+ <div class="w-24 h-24 rounded-full bg-gray-800 flex items-center justify-center">
357
+ <i data-feather="clock" class="w-10 h-10 text-primary"></i>
358
+ </div>
359
+ </div>
360
+ <h3 class="text-xl font-bold title-font text-center mb-2">DeFi Puzzle</h3>
361
+ <p class="text-gray-400 text-center mb-4">Solve DeFi protocol puzzles to earn yield and climb leaderboards.</p>
362
+ <div class="text-center text-primary font-medium">
363
+ Launching in 21 days
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </section>
369
+
370
+ <!-- Footer -->
371
+ <footer class="bg-black bg-opacity-80 border-t border-gray-800">
372
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
373
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
374
+ <div>
375
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">CryptoGameX</h3>
376
+ <div class="mt-4 space-y-4">
377
+ <a href="#" class="text-base text-gray-300 hover:text-white block">About</a>
378
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Careers</a>
379
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Blog</a>
380
+ </div>
381
+ </div>
382
+ <div>
383
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
384
+ <div class="mt-4 space-y-4">
385
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Privacy</a>
386
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Terms</a>
387
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Cookies</a>
388
+ </div>
389
+ </div>
390
+ <div>
391
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
392
+ <div class="mt-4 space-y-4">
393
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Help Center</a>
394
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Community</a>
395
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Status</a>
396
+ </div>
397
+ </div>
398
+ <div>
399
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
400
+ <div class="mt-4 flex space-x-6">
401
+ <a href="#" class="text-gray-400 hover:text-white">
402
+ <i data-feather="twitter"></i>
403
+ </a>
404
+ <a href="#" class="text-gray-400 hover:text-white">
405
+ <i data-feather="facebook"></i>
406
+ </a>
407
+ <a href="#" class="text-gray-400 hover:text-white">
408
+ <i data-feather="instagram"></i>
409
+ </a>
410
+ <a href="#" class="text-gray-400 hover:text-white">
411
+ <i data-feather="discord"></i>
412
+ </a>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
417
+ <p class="text-base text-gray-400">© 2023 CryptoGameX. All rights reserved.</p>
418
+ <div class="mt-4 md:mt-0 flex space-x-6">
419
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="h-6" alt="Ethereum">
420
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="h-6" alt="Solana">
421
+ <img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="h-6" alt="Polygon">
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </footer>
426
+
427
+ <script>
428
+ AOS.init();
429
+ feather.replace();
430
+ </script>
431
+ </body>
432
+ </html>
433
+
434
+
435
+ This design includes:
436
+
437
+ 1. A neon-themed, modern UI with vibrant colors and glowing effects
438
+ 2. All the features you requested:
439
+ - Weekly/monthly challenges with entry fees
440
+ - Streak system with bonus points and penalties
441
+ - Global and country-specific leaderboards
442
+ - World Record Holders section
443
+ - Reward distribution methodology
444
+ - Crypto payment integration
445
+
446
+ 3. Multiple game examples with different categories
447
+ 4. Responsive design that works on all devices
448
+ 5. Interactive animations and visual effects
449
+ 6. Clean, organized code structure
450
+
451
+ The design uses:
452
+ - TailwindCSS for responsive layout
453
+ - Feather Icons for clean icons
454
+ - AOS for scroll animations
455
+ - Vanta.js for the interactive background
456
+ - Custom neon styling with glowing effects
457
+
458
+ Would you like me to create any additional pages or modify anything in the current design?
index.html CHANGED
@@ -1,19 +1,704 @@
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>CryptoGameX | Play & Earn</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');
15
+
16
+ :root {
17
+ --primary: #2563eb;
18
+ --secondary: #7c3aed;
19
+ --accent: #10b981;
20
+ --dark-bg: #0a0a1a;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Rajdhani', sans-serif;
25
+ background-color: var(--dark-bg);
26
+ color: white;
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ .title-font {
31
+ font-family: 'Orbitron', sans-serif;
32
+ }
33
+
34
+ .text-primary {
35
+ color: var(--primary);
36
+ }
37
+
38
+ .text-secondary {
39
+ color: var(--secondary);
40
+ }
41
+
42
+ .border-primary {
43
+ border: 1px solid var(--primary);
44
+ }
45
+
46
+ .border-secondary {
47
+ border: 1px solid var(--secondary);
48
+ }
49
+
50
+ .glow-hover:hover {
51
+ transform: scale(1.02);
52
+ transition: all 0.3s ease;
53
+ }
54
+
55
+ .game-card {
56
+ background: rgba(10, 10, 26, 0.7);
57
+ backdrop-filter: blur(10px);
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .game-card:hover {
62
+ transform: translateY(-5px);
63
+ box-shadow: 0 10px 20px rgba(0, 247, 255, 0.2);
64
+ }
65
+
66
+ .streak-counter {
67
+ background: linear-gradient(135deg, #9600ff 0%, #ff2d75 100%);
68
+ }
69
+
70
+ .leaderboard-item:nth-child(1) {
71
+ background: linear-gradient(90deg, rgba(255,215,0,0.1) 0%, rgba(255,215,0,0) 100%);
72
+ border-left: 3px solid gold;
73
+ }
74
+
75
+ .leaderboard-item:nth-child(2) {
76
+ background: linear-gradient(90deg, rgba(192,192,192,0.1) 0%, rgba(192,192,192,0) 100%);
77
+ border-left: 3px solid silver;
78
+ }
79
+
80
+ .leaderboard-item:nth-child(3) {
81
+ background: linear-gradient(90deg, rgba(205,127,50,0.1) 0%, rgba(205,127,50,0) 100%);
82
+ border-left: 3px solid #cd7f32;
83
+ }
84
+ </style>
85
+ </head>
86
+ <body>
87
+ <div id="vanta-bg"></div>
88
+
89
+ <!-- Navigation -->
90
+ <nav class="border-b border-gray-800 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg fixed w-full z-50">
91
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
92
+ <div class="flex items-center justify-between h-16">
93
+ <div class="flex items-center">
94
+ <div class="flex-shrink-0">
95
+ <span class="text-2xl font-bold neon-text-pink title-font">CRYPTOGAMEX</span>
96
+ </div>
97
+ <div class="hidden md:block">
98
+ <div class="ml-10 flex items-baseline space-x-4">
99
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-pink-600">Home</a>
100
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Games</a>
101
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Leaderboard</a>
102
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Records</a>
103
+ <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Rewards</a>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <div class="hidden md:block">
108
+ <div class="ml-4 flex items-center md:ml-6">
109
+ <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
110
+ <i data-feather="bell"></i>
111
+ </button>
112
+ <div class="ml-3 relative">
113
+ <div class="flex items-center">
114
+ <span class="mr-2 text-sm font-medium text-white">0.05 ETH</span>
115
+ <button class="neon-border-pink text-white px-4 py-1 rounded-full text-sm font-medium flex items-center">
116
+ <i data-feather="user" class="mr-1"></i>
117
+ <span>Player123</span>
118
+ </button>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ <div class="-mr-2 flex md:hidden">
124
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
125
+ <i data-feather="menu"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </nav>
131
+
132
+ <!-- Hero Section -->
133
+ <div class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8">
134
+ <div class="max-w-7xl mx-auto">
135
+ <div class="text-center" data-aos="fade-up">
136
+ <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight title-font text-primary">
137
+ PLAY <span class="text-secondary">TO EARN</span> CRYPTO
138
+ </h1>
139
+ <p class="mt-6 max-w-2xl mx-auto text-xl text-gray-300">
140
+ Compete in weekly challenges, maintain your streak, and climb the global leaderboards to win crypto rewards!
141
+ </p>
142
+ <div class="mt-10 flex justify-center space-x-4">
143
+ <a href="#" class="border-primary glow-hover text-white px-8 py-4 rounded-full text-lg font-bold flex items-center">
144
+ <i data-feather="play" class="mr-2"></i> PLAY NOW
145
+ </a>
146
+ <a href="#" class="border-secondary glow-hover text-white px-8 py-4 rounded-full text-lg font-bold flex items-center">
147
+ <i data-feather="award" class="mr-2"></i> REWARDS
148
+ </a>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Current Challenge -->
155
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
156
+ <div class="max-w-7xl mx-auto">
157
+ <div class="text-center mb-12" data-aos="fade-up">
158
+ <h2 class="text-3xl font-bold title-font neon-text-blue">CURRENT CHALLENGE</h2>
159
+ <div class="mt-4 flex justify-center items-center">
160
+ <div class="px-4 py-2 rounded-full bg-pink-600 bg-opacity-20 text-pink-400 flex items-center">
161
+ <i data-feather="clock" class="mr-2"></i>
162
+ <span>Ends in: 3 days 12 hours</span>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8" data-aos="fade-up">
168
+ <div class="game-card rounded-xl p-6 neon-border-blue">
169
+ <div class="flex justify-between items-start">
170
+ <div>
171
+ <h3 class="text-2xl font-bold title-font">Memory Matrix</h3>
172
+ <p class="text-gray-300 mt-2">Memorize and replicate complex patterns under time pressure</p>
173
+ </div>
174
+ <div class="bg-blue-500 bg-opacity-20 text-blue-400 px-3 py-1 rounded-full text-sm">
175
+ Entry: 0.01 ETH
176
+ </div>
177
+ </div>
178
+ <div class="mt-6">
179
+ <div class="flex justify-between items-center mb-2">
180
+ <span class="text-sm text-gray-400">Prize Pool</span>
181
+ <span class="font-bold">0.5 ETH</span>
182
+ </div>
183
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
184
+ <div class="bg-gradient-to-r from-blue-500 to-pink-600 h-2.5 rounded-full" style="width: 75%"></div>
185
+ </div>
186
+ <div class="flex justify-between items-center mt-2">
187
+ <span class="text-sm text-gray-400">Participants: 1,245</span>
188
+ <span class="text-sm text-gray-400">Max: 2,000</span>
189
+ </div>
190
+ </div>
191
+ <div class="mt-6 flex justify-between items-center">
192
+ <div class="flex items-center">
193
+ <div class="streak-counter rounded-full w-10 h-10 flex items-center justify-center mr-3">
194
+ <span class="font-bold">7</span>
195
+ </div>
196
+ <div>
197
+ <p class="text-xs text-gray-400">Current Streak</p>
198
+ <p class="text-sm">+7 bonus points</p>
199
+ </div>
200
+ </div>
201
+ <button class="neon-border-pink glow-hover text-white px-6 py-2 rounded-full text-sm font-medium">
202
+ Join Challenge
203
+ </button>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="game-card rounded-xl p-6 neon-border-pink">
208
+ <div class="flex justify-between items-start">
209
+ <div>
210
+ <h3 class="text-2xl font-bold title-font">Coming Soon</h3>
211
+ <p class="text-gray-300 mt-2">New challenge starts in 3 days 12 hours</p>
212
+ </div>
213
+ <div class="bg-pink-500 bg-opacity-20 text-pink-400 px-3 py-1 rounded-full text-sm">
214
+ Coming Soon
215
+ </div>
216
+ </div>
217
+ <div class="mt-6">
218
+ <div class="flex justify-between items-center mb-2">
219
+ <span class="text-sm text-gray-400">Estimated Prize Pool</span>
220
+ <span class="font-bold">0.75 ETH</span>
221
+ </div>
222
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
223
+ <div class="bg-gradient-to-r from-pink-500 to-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
224
+ </div>
225
+ <div class="flex justify-between items-center mt-2">
226
+ <span class="text-sm text-gray-400">Participants: 0</span>
227
+ <span class="text-sm text-gray-400">Max: 2,000</span>
228
+ </div>
229
+ </div>
230
+ <div class="mt-6 flex justify-between items-center">
231
+ <div class="flex items-center">
232
+ <div class="bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center mr-3">
233
+ <i data-feather="clock"></i>
234
+ </div>
235
+ <div>
236
+ <p class="text-xs text-gray-400">Next Challenge</p>
237
+ <p class="text-sm">Starts soon</p>
238
+ </div>
239
+ </div>
240
+ <button class="bg-gray-700 text-gray-400 px-6 py-2 rounded-full text-sm font-medium cursor-not-allowed">
241
+ Coming Soon
242
+ </button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </section>
248
+
249
+ <!-- Leaderboard Section -->
250
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50">
251
+ <div class="max-w-7xl mx-auto">
252
+ <div class="text-center mb-12" data-aos="fade-up">
253
+ <h2 class="text-3xl font-bold title-font neon-text-blue">GLOBAL LEADERBOARD</h2>
254
+ <p class="mt-2 text-gray-400">Top players this season</p>
255
+ </div>
256
+
257
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8" data-aos="fade-up">
258
+ <div class="lg:col-span-2">
259
+ <div class="bg-gray-900 bg-opacity-70 rounded-xl overflow-hidden">
260
+ <div class="grid grid-cols-12 bg-gray-800 p-4 font-bold text-sm">
261
+ <div class="col-span-1">#</div>
262
+ <div class="col-span-5">Player</div>
263
+ <div class="col-span-3">Country</div>
264
+ <div class="col-span-3 text-right">Points</div>
265
+ </div>
266
+ <div class="divide-y divide-gray-800">
267
+ <div class="leaderboard-item grid grid-cols-12 p-4 items-center">
268
+ <div class="col-span-1 font-bold text-yellow-400">1</div>
269
+ <div class="col-span-5 flex items-center">
270
+ <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
271
+ <i data-feather="crown" class="w-4 h-4"></i>
272
+ </div>
273
+ <span>CryptoKing</span>
274
+ </div>
275
+ <div class="col-span-3 flex items-center">
276
+ <img src="https://flagcdn.com/us.svg" class="w-5 h-5 mr-2" alt="USA">
277
+ <span>USA</span>
278
+ </div>
279
+ <div class="col-span-3 text-right font-bold">12,450</div>
280
+ </div>
281
+ <div class="leaderboard-item grid grid-cols-12 p-4 items-center">
282
+ <div class="col-span-1 font-bold text-gray-300">2</div>
283
+ <div class="col-span-5 flex items-center">
284
+ <div class="w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center mr-3">
285
+ <i data-feather="award" class="w-4 h-4"></i>
286
+ </div>
287
+ <span>BlockMaster</span>
288
+ </div>
289
+ <div class="col-span-3 flex items-center">
290
+ <img src="https://flagcdn.com/gb.svg" class="w-5 h-5 mr-2" alt="UK">
291
+ <span>UK</span>
292
+ </div>
293
+ <div class="col-span-3 text-right font-bold">11,890</div>
294
+ </div>
295
+ <div class="leaderboard-item grid grid-cols-12 p-4 items-center">
296
+ <div class="col-span-1 font-bold text-amber-700">3</div>
297
+ <div class="col-span-5 flex items-center">
298
+ <div class="w-8 h-8 rounded-full bg-amber-600 flex items-center justify-center mr-3">
299
+ <i data-feather="award" class="w-4 h-4"></i>
300
+ </div>
301
+ <span>BitQueen</span>
302
+ </div>
303
+ <div class="col-span-3 flex items-center">
304
+ <img src="https://flagcdn.com/ca.svg" class="w-5 h-5 mr-2" alt="Canada">
305
+ <span>Canada</span>
306
+ </div>
307
+ <div class="col-span-3 text-right font-bold">10,750</div>
308
+ </div>
309
+ <!-- More leaderboard items -->
310
+ <div class="grid grid-cols-12 p-4 items-center hover:bg-gray-800">
311
+ <div class="col-span-1 font-bold">4</div>
312
+ <div class="col-span-5">Satoshinator</div>
313
+ <div class="col-span-3 flex items-center">
314
+ <img src="https://flagcdn.com/jp.svg" class="w-5 h-5 mr-2" alt="Japan">
315
+ <span>Japan</span>
316
+ </div>
317
+ <div class="col-span-3 text-right">9,840</div>
318
+ </div>
319
+ <div class="grid grid-cols-12 p-4 items-center hover:bg-gray-800">
320
+ <div class="col-span-1 font-bold">5</div>
321
+ <div class="col-span-5">EtherLord</div>
322
+ <div class="col-span-3 flex items-center">
323
+ <img src="https://flagcdn.com/de.svg" class="w-5 h-5 mr-2" alt="Germany">
324
+ <span>Germany</span>
325
+ </div>
326
+ <div class="col-span-3 text-right">9,120</div>
327
+ </div>
328
+ </div>
329
+ <div class="p-4 text-center border-t border-gray-800">
330
+ <a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-medium flex items-center justify-center">
331
+ <span>View Full Leaderboard</span>
332
+ <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
333
+ </a>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <div>
339
+ <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 neon-border-blue">
340
+ <h3 class="text-xl font-bold title-font mb-4">Your Stats</h3>
341
+ <div class="space-y-4">
342
+ <div>
343
+ <p class="text-sm text-gray-400">Global Rank</p>
344
+ <p class="text-2xl font-bold">#1,245</p>
345
+ </div>
346
+ <div>
347
+ <p class="text-sm text-gray-400">Country Rank</p>
348
+ <p class="text-2xl font-bold">#87</p>
349
+ </div>
350
+ <div>
351
+ <p class="text-sm text-gray-400">Total Points</p>
352
+ <p class="text-2xl font-bold">3,450</p>
353
+ </div>
354
+ <div>
355
+ <p class="text-sm text-gray-400">Current Streak</p>
356
+ <div class="flex items-center mt-1">
357
+ <div class="streak-counter rounded-full w-8 h-8 flex items-center justify-center mr-2">
358
+ <span class="font-bold text-sm">7</span>
359
+ </div>
360
+ <span>7 days (+7 bonus points)</span>
361
+ </div>
362
+ </div>
363
+ <div class="pt-4">
364
+ <a href="#" class="neon-border-pink glow-hover text-white px-4 py-2 rounded-full text-sm font-medium w-full block text-center">
365
+ Improve Your Rank
366
+ </a>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="mt-6 bg-gray-900 bg-opacity-70 rounded-xl p-6 neon-border-pink">
372
+ <h3 class="text-xl font-bold title-font mb-4">Country Leaderboard</h3>
373
+ <div class="flex items-center mb-4">
374
+ <img src="https://flagcdn.com/us.svg" class="w-6 h-6 mr-2" alt="USA">
375
+ <span class="font-medium">United States</span>
376
+ </div>
377
+ <div class="space-y-3">
378
+ <div class="flex justify-between items-center">
379
+ <div class="flex items-center">
380
+ <span class="w-6 text-gray-400">1</span>
381
+ <span>CryptoKing</span>
382
+ </div>
383
+ <span class="font-bold">12,450</span>
384
+ </div>
385
+ <div class="flex justify-between items-center">
386
+ <div class="flex items-center">
387
+ <span class="w-6 text-gray-400">2</span>
388
+ <span>BitMaster</span>
389
+ </div>
390
+ <span class="font-bold">10,890</span>
391
+ </div>
392
+ <div class="flex justify-between items-center">
393
+ <div class="flex items-center">
394
+ <span class="w-6 text-gray-400">3</span>
395
+ <span>EtherQueen</span>
396
+ </div>
397
+ <span class="font-bold">9,750</span>
398
+ </div>
399
+ </div>
400
+ <div class="mt-4 pt-4 border-t border-gray-800">
401
+ <a href="#" class="text-pink-400 hover:text-pink-300 text-sm font-medium flex items-center">
402
+ <span>View All Countries</span>
403
+ <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
404
+ </a>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </section>
411
+
412
+ <!-- World Records Section -->
413
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
414
+ <div class="max-w-7xl mx-auto">
415
+ <div class="text-center mb-12" data-aos="fade-up">
416
+ <h2 class="text-3xl font-bold title-font neon-text-pink">WORLD RECORD HOLDERS</h2>
417
+ <p class="mt-2 text-gray-400">Legendary players who made history</p>
418
+ </div>
419
+
420
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" data-aos="fade-up">
421
+ <div class="game-card rounded-xl p-6 neon-border-blue">
422
+ <div class="flex items-center mb-4">
423
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-pink-600 flex items-center justify-center mr-4">
424
+ <i data-feather="award" class="w-8 h-8"></i>
425
+ </div>
426
+ <div>
427
+ <h3 class="text-xl font-bold">Memory Matrix</h3>
428
+ <p class="text-sm text-gray-400">Highest Score</p>
429
+ </div>
430
+ </div>
431
+ <div class="flex items-center justify-between mt-6">
432
+ <div class="flex items-center">
433
+ <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center mr-3">
434
+ <i data-feather="crown" class="w-4 h-4"></i>
435
+ </div>
436
+ <div>
437
+ <p class="font-medium">CryptoKing</p>
438
+ <p class="text-xs text-gray-400">USA</p>
439
+ </div>
440
+ </div>
441
+ <div class="text-right">
442
+ <p class="text-2xl font-bold">9,850</p>
443
+ <p class="text-xs text-gray-400">May 2023</p>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <div class="game-card rounded-xl p-6 neon-border-pink">
449
+ <div class="flex items-center mb-4">
450
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center mr-4">
451
+ <i data-feather="award" class="w-8 h-8"></i>
452
+ </div>
453
+ <div>
454
+ <h3 class="text-xl font-bold">Crypto Quiz</h3>
455
+ <p class="text-sm text-gray-400">Fastest Time</p>
456
+ </div>
457
+ </div>
458
+ <div class="flex items-center justify-between mt-6">
459
+ <div class="flex items-center">
460
+ <div class="w-10 h-10 rounded-full bg-gray-400 flex items-center justify-center mr-3">
461
+ <i data-feather="award" class="w-4 h-4"></i>
462
+ </div>
463
+ <div>
464
+ <p class="font-medium">BitQueen</p>
465
+ <p class="text-xs text-gray-400">Canada</p>
466
+ </div>
467
+ </div>
468
+ <div class="text-right">
469
+ <p class="text-2xl font-bold">1:24</p>
470
+ <p class="text-xs text-gray-400">Apr 2023</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="game-card rounded-xl p-6 neon-border-blue">
476
+ <div class="flex items-center mb-4">
477
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-green-500 flex items-center justify-center mr-4">
478
+ <i data-feather="award" class="w-8 h-8"></i>
479
+ </div>
480
+ <div>
481
+ <h3 class="text-xl font-bold">Block Builder</h3>
482
+ <p class="text-sm text-gray-400">Most Blocks</p>
483
+ </div>
484
+ </div>
485
+ <div class="flex items-center justify-between mt-6">
486
+ <div class="flex items-center">
487
+ <div class="w-10 h-10 rounded-full bg-amber-600 flex items-center justify-center mr-3">
488
+ <i data-feather="award" class="w-4 h-4"></i>
489
+ </div>
490
+ <div>
491
+ <p class="font-medium">Satoshinator</p>
492
+ <p class="text-xs text-gray-400">Japan</p>
493
+ </div>
494
+ </div>
495
+ <div class="text-right">
496
+ <p class="text-2xl font-bold">1,245</p>
497
+ <p class="text-xs text-gray-400">Mar 2023</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="mt-10 text-center">
504
+ <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-blue-500 to-pink-600 hover:from-blue-600 hover:to-pink-700">
505
+ View All Records
506
+ </a>
507
+ </div>
508
+ </div>
509
+ </section>
510
+
511
+ <!-- How It Works -->
512
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50">
513
+ <div class="max-w-7xl mx-auto">
514
+ <div class="text-center mb-12" data-aos="fade-up">
515
+ <h2 class="text-3xl font-bold title-font neon-text-blue">HOW IT WORKS</h2>
516
+ <p class="mt-2 text-gray-400">Earn crypto by playing competitive games</p>
517
+ </div>
518
+
519
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-aos="fade-up">
520
+ <div class="text-center">
521
+ <div class="w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-pink-600 flex items-center justify-center mx-auto mb-6">
522
+ <i data-feather="dollar-sign" class="w-8 h-8"></i>
523
+ </div>
524
+ <h3 class="text-xl font-bold title-font mb-2">1. Pay Entry Fee</h3>
525
+ <p class="text-gray-300">Join challenges with a small crypto entry fee (0.01 ETH) that contributes to the prize pool</p>
526
+ </div>
527
+
528
+ <div class="text-center">
529
+ <div class="w-20 h-20 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center mx-auto mb-6">
530
+ <i data-feather="activity" class="w-8 h-8"></i>
531
+ </div>
532
+ <h3 class="text-xl font-bold title-font mb-2">2. Play & Compete</h3>
533
+ <p class="text-gray-300">Compete in skill-based games and climb the leaderboards during the challenge period</p>
534
+ </div>
535
+
536
+ <div class="text-center">
537
+ <div class="w-20 h-20 rounded-full bg-gradient-to-r from-green-500 to-blue-600 flex items-center justify-center mx-auto mb-6">
538
+ <i data-feather="award" class="w-8 h-8"></i>
539
+ </div>
540
+ <h3 class="text-xl font-bold title-font mb-2">3. Win Rewards</h3>
541
+ <p class="text-gray-300">Top players win crypto rewards from the prize pool, with bonuses for streaks and records</p>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="mt-12 max-w-3xl mx-auto bg-gray-900 bg-opacity-70 rounded-xl p-6 neon-border-pink" data-aos="fade-up">
546
+ <h3 class="text-xl font-bold title-font mb-4">Reward Distribution</h3>
547
+ <p class="mb-4">Our fair reward system ensures everyone has a chance to win:</p>
548
+ <ul class="space-y-3">
549
+ <li class="flex items-start">
550
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 flex items-center justify-center mr-3 mt-0.5">
551
+ <i data-feather="check" class="w-3 h-3"></i>
552
+ </div>
553
+ <span>Top 10 global winners receive 60% of the prize pool</span>
554
+ </li>
555
+ <li class="flex items-start">
556
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 flex items-center justify-center mr-3 mt-0.5">
557
+ <i data-feather="check" class="w-3 h-3"></i>
558
+ </div>
559
+ <span>Top 10 players from each country share 30% of the pool</span>
560
+ </li>
561
+ <li class="flex items-start">
562
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 flex items-center justify-center mr-3 mt-0.5">
563
+ <i data-feather="check" class="w-3 h-3"></i>
564
+ </div>
565
+ <span>10% goes to platform maintenance and development</span>
566
+ </li>
567
+ <li class="flex items-start">
568
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 flex items-center justify-center mr-3 mt-0.5">
569
+ <i data-feather="check" class="w-3 h-3"></i>
570
+ </div>
571
+ <span>Bonus points for maintaining streaks (equal to streak days)</span>
572
+ </li>
573
+ <li class="flex items-start">
574
+ <div class="flex-shrink-0 h-6 w-6 rounded-full bg-pink-500 flex items-center justify-center mr-3 mt-0.5">
575
+ <i data-feather="check" class="w-3 h-3"></i>
576
+ </div>
577
+ <span>Losing a streak after 2 days deducts half of potential streak points</span>
578
+ </li>
579
+ </ul>
580
+ </div>
581
+ </div>
582
+ </section>
583
+
584
+ <!-- CTA Section -->
585
+ <section class="py-20 px-4 sm:px-6 lg:px-8">
586
+ <div class="max-w-7xl mx-auto text-center" data-aos="fade-up">
587
+ <h2 class="text-3xl md:text-4xl font-bold title-font neon-text-pink mb-6">READY TO EARN CRYPTO?</h2>
588
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">Join thousands of players competing in skill-based challenges with real crypto rewards.</p>
589
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
590
+ <a href="#" class="neon-border-blue glow-hover text-white px-8 py-4 rounded-full text-lg font-bold flex items-center justify-center">
591
+ <i data-feather="play" class="mr-2"></i> PLAY NOW
592
+ </a>
593
+ <a href="#" class="neon-border-pink glow-hover text-white px-8 py-4 rounded-full text-lg font-bold flex items-center justify-center">
594
+ <i data-feather="dollar-sign" class="mr-2"></i> HOW TO DEPOSIT
595
+ </a>
596
+ </div>
597
+ </div>
598
+ </section>
599
+
600
+ <!-- Footer -->
601
+ <footer class="bg-black bg-opacity-80 border-t border-gray-800">
602
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
603
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
604
+ <div>
605
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">CryptoGameX</h3>
606
+ <div class="mt-4 space-y-4">
607
+ <a href="#" class="text-base text-gray-300 hover:text-white block">About</a>
608
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Careers</a>
609
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Blog</a>
610
+ </div>
611
+ </div>
612
+ <div>
613
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
614
+ <div class="mt-4 space-y-4">
615
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Privacy</a>
616
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Terms</a>
617
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Cookies</a>
618
+ </div>
619
+ </div>
620
+ <div>
621
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Resources</h3>
622
+ <div class="mt-4 space-y-4">
623
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Help Center</a>
624
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Community</a>
625
+ <a href="#" class="text-base text-gray-300 hover:text-white block">Status</a>
626
+ </div>
627
+ </div>
628
+ <div>
629
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
630
+ <div class="mt-4 flex space-x-6">
631
+ <a href="#" class="text-gray-400 hover:text-white">
632
+ <i data-feather="twitter"></i>
633
+ </a>
634
+ <a href="#" class="text-gray-400 hover:text-white">
635
+ <i data-feather="facebook"></i>
636
+ </a>
637
+ <a href="#" class="text-gray-400 hover:text-white">
638
+ <i data-feather="instagram"></i>
639
+ </a>
640
+ <a href="#" class="text-gray-400 hover:text-white">
641
+ <i data-feather="discord"></i>
642
+ </a>
643
+ </div>
644
+ <div class="mt-6">
645
+ <p class="text-sm text-gray-400">Subscribe to our newsletter</p>
646
+ <div class="mt-2 flex">
647
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-full bg-gray-800 text-white focus:outline-none w-full">
648
+ <button class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded-r-full">
649
+ <i data-feather="send"></i>
650
+ </button>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+ <div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
656
+ <p class="text-base text-gray-400">© 2023 CryptoGameX. All rights reserved.</p>
657
+ <div class="mt-4 md:mt-0 flex space-x-6">
658
+ <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="h-6" alt="Ethereum">
659
+ <img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="h-6" alt="Solana">
660
+ <img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="h-6" alt="Polygon">
661
+ </div>
662
+ </div>
663
+ </div>
664
+ </footer>
665
+
666
+ <script>
667
+ // Initialize animations and effects
668
+ AOS.init({
669
+ duration: 800,
670
+ once: true
671
+ });
672
+
673
+ feather.replace();
674
+
675
+ // Vanta.js background effect
676
+ VANTA.NET({
677
+ el: "#vanta-bg",
678
+ mouseControls: true,
679
+ touchControls: true,
680
+ gyroControls: false,
681
+ minHeight: 200.00,
682
+ minWidth: 200.00,
683
+ scale: 1.00,
684
+ scaleMobile: 1.00,
685
+ color: 0x3f00ff,
686
+ backgroundColor: 0x0a0a1a,
687
+ points: 12.00,
688
+ maxDistance: 23.00,
689
+ spacing: 19.00
690
+ });
691
+
692
+ // Streak counter animation
693
+ document.querySelectorAll('.streak-counter').forEach(counter => {
694
+ anime({
695
+ targets: counter,
696
+ scale: [1, 1.1, 1],
697
+ duration: 1500,
698
+ loop: true,
699
+ easing: 'easeInOutSine'
700
+ });
701
+ });
702
+ </script>
703
+ </body>
704
  </html>
prompts.txt ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ yeah bt before you sketch..what about coming with an app that...thats the crypto mini gaming app...whereby we have challenges interms of after 2 weeks ,the game challenge is closed and the winners , top winners are awarded then we launch another game on another week or lets say monthly , and if you maintain streak , you get added equal points as you also you loose half of the same points you could have earned if you didnt loose the sreak now...bt this will be after two days its when you will loose half of the points...also the app would be hosting light games that am sure you will give me the best competitive ideas to execute them...The rewards can be interms of the first 10 perticipants from every country and also you wll give me the best distribution methodology you preffer ..and also the games should have leaderboard showing global ranking and country ranking for each user...payments should be happening certain dates thresholds after determining the scores of every user...also joining the game should be like a small amount of crypto thats USD and also this one should be used for settling the winners compenstation...also i woud like to have the best winners of each game be published in a section which we wll name it as WORLD RECORD HOLDER for that particular game....what do you think about that...? you can also draft for me a good UI design bt it should be neon line or minimal coulourfull attractive stuff
2
+ reduce the pink and reflection of the colour shandows in each shandowed words and darken the blue colour as you make it to almost black
3
+ do you have an idea of making it more attractive by creating a gaming picture like minimal background with less details and make it also scrollable in the first landing page
4
+ can we make come up with a more neon like bluish colour ?
5
+ undo the changes its worse
6
+ bro remove neon reflective colors