Hugging Face's logo

Spaces:
222kdfdf
/
flappy-legends
Running

App Files Community
222kdfdf commited on
Commit
64338ef
·
verified ·
1 Parent(s): 4ace6e7

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1271 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Flappy Legends
3
- emoji: 🦀
4
  colorFrom: yellow
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: flappy-legends
3
+ emoji: 🐳
4
  colorFrom: yellow
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
index.html CHANGED
@@ -1,19 +1,1271 @@
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>Flappy Legends - Soar Beyond Limits</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
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');
11
+
12
+ :root {
13
+ --primary: #6c5ce7;
14
+ --secondary: #a29bfe;
15
+ --accent: #fd79a8;
16
+ --dark: #2d3436;
17
+ --light: #f5f6fa;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #1a1a2e;
23
+ color: white;
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .gradient-bg {
28
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
29
+ }
30
+
31
+ .bird-card {
32
+ transition: all 0.3s ease;
33
+ transform-style: preserve-3d;
34
+ }
35
+
36
+ .bird-card:hover {
37
+ transform: translateY(-10px) scale(1.03);
38
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
39
+ }
40
+
41
+ .mode-card {
42
+ transition: all 0.3s ease;
43
+ background: rgba(255, 255, 255, 0.05);
44
+ backdrop-filter: blur(10px);
45
+ border: 1px solid rgba(255, 255, 255, 0.1);
46
+ }
47
+
48
+ .mode-card:hover {
49
+ background: rgba(255, 255, 255, 0.1);
50
+ transform: translateY(-5px);
51
+ }
52
+
53
+ .flap-animation {
54
+ animation: flap 0.5s infinite alternate;
55
+ }
56
+
57
+ @keyframes flap {
58
+ 0% { transform: rotate(-10deg); }
59
+ 100% { transform: rotate(10deg); }
60
+ }
61
+
62
+ .trail-fire {
63
+ background: linear-gradient(90deg, #ff4d4d, #f9cb28);
64
+ }
65
+
66
+ .trail-electric {
67
+ background: linear-gradient(90deg, #00d2ff, #3a7bd5);
68
+ }
69
+
70
+ .trail-rainbow {
71
+ background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
72
+ background-size: 200% 200%;
73
+ animation: rainbow 2s linear infinite;
74
+ }
75
+
76
+ @keyframes rainbow {
77
+ 0% { background-position: 0% 50%; }
78
+ 100% { background-position: 100% 50%; }
79
+ }
80
+
81
+ .scrollbar-hide::-webkit-scrollbar {
82
+ display: none;
83
+ }
84
+
85
+ .scrollbar-hide {
86
+ -ms-overflow-style: none;
87
+ scrollbar-width: none;
88
+ }
89
+
90
+ .parallax {
91
+ background-attachment: fixed;
92
+ background-position: center;
93
+ background-repeat: no-repeat;
94
+ background-size: cover;
95
+ }
96
+
97
+ .glow {
98
+ text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
99
+ }
100
+
101
+ .pulse {
102
+ animation: pulse 2s infinite;
103
+ }
104
+
105
+ @keyframes pulse {
106
+ 0% { transform: scale(1); }
107
+ 50% { transform: scale(1.05); }
108
+ 100% { transform: scale(1); }
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="gradient-bg min-h-screen">
113
+ <!-- Navigation -->
114
+ <nav class="bg-black bg-opacity-30 backdrop-filter backdrop-blur-lg border-b border-gray-800 fixed w-full z-50">
115
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
116
+ <div class="flex items-center justify-between h-16">
117
+ <div class="flex items-center">
118
+ <div class="flex-shrink-0">
119
+ <div class="flex items-center">
120
+ <i class="fas fa-dove text-pink-500 text-2xl mr-2"></i>
121
+ <span class="text-white font-bold text-xl">Flappy Legends</span>
122
+ </div>
123
+ </div>
124
+ <div class="hidden md:block">
125
+ <div class="ml-10 flex items-baseline space-x-4">
126
+ <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-pink-600">Home</a>
127
+ <a href="#modes" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Modes</a>
128
+ <a href="#birds" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Birds</a>
129
+ <a href="#customization" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Customization</a>
130
+ <a href="#leaderboards" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leaderboards</a>
131
+ </div>
132
+ </div>
133
+ </div>
134
+ <div class="hidden md:block">
135
+ <div class="ml-4 flex items-center md:ml-6">
136
+ <button class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
137
+ <i class="fas fa-play mr-2"></i> Play Now
138
+ </button>
139
+ </div>
140
+ </div>
141
+ <div class="-mr-2 flex md:hidden">
142
+ <button type="button" id="mobile-menu-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">
143
+ <span class="sr-only">Open main menu</span>
144
+ <i class="fas fa-bars"></i>
145
+ </button>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Mobile menu -->
151
+ <div class="hidden md:hidden" id="mobile-menu">
152
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
153
+ <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium bg-pink-600">Home</a>
154
+ <a href="#modes" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Modes</a>
155
+ <a href="#birds" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Birds</a>
156
+ <a href="#customization" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Customization</a>
157
+ <a href="#leaderboards" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Leaderboards</a>
158
+ <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white block px-3 py-2 rounded-md text-base font-medium flex items-center justify-center">
159
+ <i class="fas fa-play mr-2"></i> Play Now
160
+ </a>
161
+ </div>
162
+ </div>
163
+ </nav>
164
+
165
+ <!-- Hero Section -->
166
+ <section class="relative pt-32 pb-20 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
167
+ <div class="absolute inset-0 overflow-hidden">
168
+ <div class="absolute inset-0 bg-black opacity-50"></div>
169
+ <div class="absolute inset-0 parallax" style="background-image: url('https://images.unsplash.com/photo-1518562180175-34a163b1a9a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
170
+ </div>
171
+ <div class="max-w-7xl mx-auto relative z-10">
172
+ <div class="md:grid md:grid-cols-2 md:gap-12 items-center">
173
+ <div class="mb-12 md:mb-0">
174
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 glow">
175
+ Soar Beyond <span class="text-pink-500">Limits</span>
176
+ </h1>
177
+ <p class="text-xl md:text-2xl text-gray-300 mb-8">
178
+ The ultimate evolution of the iconic Flappy Bird experience. Master four unique game modes, unlock legendary birds, and customize your flight like never before.
179
+ </p>
180
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
181
+ <button class="bg-pink-600 hover:bg-pink-700 text-white px-8 py-4 rounded-lg text-lg font-bold flex items-center justify-center pulse">
182
+ <i class="fas fa-play mr-3"></i> Play Free Now
183
+ </button>
184
+ <button class="bg-white bg-opacity-10 hover:bg-opacity-20 text-white px-8 py-4 rounded-lg text-lg font-bold flex items-center justify-center border border-white border-opacity-20">
185
+ <i class="fas fa-trophy mr-3"></i> View Leaderboards
186
+ </button>
187
+ </div>
188
+ <div class="mt-8 flex items-center space-x-6">
189
+ <div class="flex items-center">
190
+ <div class="flex -space-x-2">
191
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
192
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/24.jpg" alt="">
193
+ <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
194
+ </div>
195
+ <span class="ml-3 text-gray-300">+2.4M players</span>
196
+ </div>
197
+ <div class="flex items-center text-yellow-400">
198
+ <i class="fas fa-star"></i>
199
+ <i class="fas fa-star"></i>
200
+ <i class="fas fa-star"></i>
201
+ <i class="fas fa-star"></i>
202
+ <i class="fas fa-star-half-alt"></i>
203
+ <span class="ml-2 text-white">4.8 (120K reviews)</span>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div class="relative">
208
+ <div class="relative w-full max-w-md mx-auto">
209
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
210
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
211
+ <div class="absolute top-20 -right-5 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
212
+ <div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl overflow-hidden border border-white border-opacity-20">
213
+ <div class="p-4 bg-gradient-to-b from-pink-600 to-purple-600">
214
+ <div class="flex justify-between items-center">
215
+ <div class="flex items-center">
216
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
217
+ <i class="fas fa-crown text-yellow-400"></i>
218
+ </div>
219
+ <span class="ml-2 font-bold">Phoenix</span>
220
+ </div>
221
+ <div class="flex items-center">
222
+ <i class="fas fa-bolt text-yellow-300 mr-1"></i>
223
+ <span class="font-bold">1,247m</span>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div class="relative h-64 bg-gray-900 overflow-hidden">
228
+ <!-- Game preview would go here -->
229
+ <div class="absolute inset-0 flex items-center justify-center">
230
+ <div class="relative">
231
+ <div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center flap-animation">
232
+ <i class="fas fa-dove text-white text-2xl"></i>
233
+ </div>
234
+ <div class="absolute -bottom-4 -left-4 w-24 h-4 bg-pink-500 rounded-full blur-md opacity-70"></div>
235
+ </div>
236
+ </div>
237
+ <!-- Pipes -->
238
+ <div class="absolute top-0 right-10 w-16 h-32 bg-green-500 rounded-t-lg"></div>
239
+ <div class="absolute bottom-0 right-10 w-16 h-32 bg-green-500 rounded-b-lg"></div>
240
+ <div class="absolute top-0 right-40 w-16 h-40 bg-green-500 rounded-t-lg"></div>
241
+ <div class="absolute bottom-0 right-40 w-16 h-24 bg-green-500 rounded-b-lg"></div>
242
+ <!-- Coins -->
243
+ <div class="absolute top-1/3 right-20 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
244
+ <i class="fas fa-coins text-yellow-700 text-xs"></i>
245
+ </div>
246
+ <div class="absolute top-2/3 right-50 w-6 h-6 bg-yellow-400 rounded-full flex items-center justify-center">
247
+ <i class="fas fa-coins text-yellow-700 text-xs"></i>
248
+ </div>
249
+ </div>
250
+ <div class="p-4 bg-gray-900 bg-opacity-50">
251
+ <div class="flex justify-between items-center">
252
+ <div class="flex items-center space-x-2">
253
+ <div class="w-8 h-8 rounded-full bg-pink-500 flex items-center justify-center">
254
+ <i class="fas fa-fire text-white"></i>
255
+ </div>
256
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
257
+ <i class="fas fa-shield-alt text-white"></i>
258
+ </div>
259
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
260
+ <i class="fas fa-bolt text-white"></i>
261
+ </div>
262
+ </div>
263
+ <div class="text-sm text-gray-300">
264
+ <span class="font-bold text-white">12,450</span> points
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </section>
274
+
275
+ <!-- Game Modes Section -->
276
+ <section id="modes" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-20">
277
+ <div class="max-w-7xl mx-auto">
278
+ <div class="text-center mb-16">
279
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
280
+ Choose Your <span class="text-pink-500">Challenge</span>
281
+ </h2>
282
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
283
+ Four unique ways to play, each with its own rules, scoring logic, and skill requirements.
284
+ </p>
285
+ </div>
286
+
287
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
288
+ <!-- Endless Arcade -->
289
+ <div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-pink-500/20">
290
+ <div class="p-6 bg-gradient-to-br from-purple-900 to-pink-800">
291
+ <div class="flex justify-between items-start">
292
+ <div>
293
+ <h3 class="text-2xl font-bold mb-2">Endless Arcade</h3>
294
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Classic</span>
295
+ </div>
296
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
297
+ <i class="fas fa-infinity text-xl text-pink-300"></i>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ <div class="p-6">
302
+ <p class="text-gray-300 mb-6">
303
+ Survive as long as you can in an infinite gauntlet of ever-changing obstacles.
304
+ </p>
305
+ <ul class="space-y-3 mb-6">
306
+ <li class="flex items-start">
307
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
308
+ <span>Procedurally generated obstacles</span>
309
+ </li>
310
+ <li class="flex items-start">
311
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
312
+ <span>Combo meter for bonus points</span>
313
+ </li>
314
+ <li class="flex items-start">
315
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
316
+ <span>Risk zones every 200m</span>
317
+ </li>
318
+ </ul>
319
+ <div class="flex justify-between items-center">
320
+ <div class="flex items-center">
321
+ <i class="fas fa-users mr-2 text-gray-400"></i>
322
+ <span class="text-sm text-gray-400">2.1M players</span>
323
+ </div>
324
+ <button class="px-4 py-2 bg-pink-600 hover:bg-pink-700 rounded-lg text-sm font-medium">
325
+ Play Mode
326
+ </button>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Sprint Challenge -->
332
+ <div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20">
333
+ <div class="p-6 bg-gradient-to-br from-blue-900 to-cyan-800">
334
+ <div class="flex justify-between items-start">
335
+ <div>
336
+ <h3 class="text-2xl font-bold mb-2">Sprint Challenge</h3>
337
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Speedrun</span>
338
+ </div>
339
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
340
+ <i class="fas fa-stopwatch text-xl text-cyan-300"></i>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ <div class="p-6">
345
+ <p class="text-gray-300 mb-6">
346
+ Race against the clock in a high-octane 60-second dash. Precision and timing are key.
347
+ </p>
348
+ <ul class="space-y-3 mb-6">
349
+ <li class="flex items-start">
350
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
351
+ <span>Checkpoint rings extend time</span>
352
+ </li>
353
+ <li class="flex items-start">
354
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
355
+ <span>Speed zones for turbo boosts</span>
356
+ </li>
357
+ <li class="flex items-start">
358
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
359
+ <span>Hyper Flap power-up</span>
360
+ </li>
361
+ </ul>
362
+ <div class="flex justify-between items-center">
363
+ <div class="flex items-center">
364
+ <i class="fas fa-users mr-2 text-gray-400"></i>
365
+ <span class="text-sm text-gray-400">1.4M players</span>
366
+ </div>
367
+ <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium">
368
+ Play Mode
369
+ </button>
370
+ </div>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Daily Gauntlet -->
375
+ <div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/20">
376
+ <div class="p-6 bg-gradient-to-br from-orange-900 to-yellow-800">
377
+ <div class="flex justify-between items-start">
378
+ <div>
379
+ <h3 class="text-2xl font-bold mb-2">Daily Gauntlet</h3>
380
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Limited</span>
381
+ </div>
382
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
383
+ <i class="fas fa-calendar-day text-xl text-yellow-300"></i>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ <div class="p-6">
388
+ <p class="text-gray-300 mb-6">
389
+ Conquer a handcrafted obstacle map that changes every day. Test your memorization and reflexes.
390
+ </p>
391
+ <ul class="space-y-3 mb-6">
392
+ <li class="flex items-start">
393
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
394
+ <span>3 lives per attempt</span>
395
+ </li>
396
+ <li class="flex items-start">
397
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
398
+ <span>Secret routes with rewards</span>
399
+ </li>
400
+ <li class="flex items-start">
401
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
402
+ <span>Seasonal hazards and themes</span>
403
+ </li>
404
+ </ul>
405
+ <div class="flex justify-between items-center">
406
+ <div class="flex items-center">
407
+ <i class="fas fa-users mr-2 text-gray-400"></i>
408
+ <span class="text-sm text-gray-400">1.8M players</span>
409
+ </div>
410
+ <button class="px-4 py-2 bg-orange-600 hover:bg-orange-700 rounded-lg text-sm font-medium">
411
+ Play Mode
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Versus Races -->
418
+ <div class="mode-card rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-red-500/20">
419
+ <div class="p-6 bg-gradient-to-br from-red-900 to-pink-800">
420
+ <div class="flex justify-between items-start">
421
+ <div>
422
+ <h3 class="text-2xl font-bold mb-2">Versus Races</h3>
423
+ <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-white bg-opacity-20">Multiplayer</span>
424
+ </div>
425
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
426
+ <i class="fas fa-users text-xl text-pink-300"></i>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ <div class="p-6">
431
+ <p class="text-gray-300 mb-6">
432
+ Compete head-to-head against friends or global rivals in live races.
433
+ </p>
434
+ <ul class="space-y-3 mb-6">
435
+ <li class="flex items-start">
436
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
437
+ <span>First to 500m wins</span>
438
+ </li>
439
+ <li class="flex items-start">
440
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
441
+ <span>Power-up slots for strategy</span>
442
+ </li>
443
+ <li class="flex items-start">
444
+ <i class="fas fa-check-circle text-green-400 mt-1 mr-2"></i>
445
+ <span>Ghost mode and mirror mode</span>
446
+ </li>
447
+ </ul>
448
+ <div class="flex justify-between items-center">
449
+ <div class="flex items-center">
450
+ <i class="fas fa-users mr-2 text-gray-400"></i>
451
+ <span class="text-sm text-gray-400">1.2M players</span>
452
+ </div>
453
+ <button class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-sm font-medium">
454
+ Play Mode
455
+ </button>
456
+ </div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </section>
462
+
463
+ <!-- Bird Heroes Section -->
464
+ <section id="birds" class="py-20 px-4 sm:px-6 lg:px-8">
465
+ <div class="max-w-7xl mx-auto">
466
+ <div class="text-center mb-16">
467
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
468
+ Choose Your <span class="text-pink-500">Legend</span>
469
+ </h2>
470
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
471
+ Unlock 12 legendary birds, each with unique stats, abilities, and visual flair.
472
+ </p>
473
+ </div>
474
+
475
+ <div class="mb-12">
476
+ <div class="flex overflow-x-auto pb-6 scrollbar-hide">
477
+ <div class="flex space-x-6">
478
+ <button class="px-6 py-2 rounded-full bg-pink-600 text-white font-medium whitespace-nowrap">All Birds</button>
479
+ <button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Common</button>
480
+ <button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Rare</button>
481
+ <button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Epic</button>
482
+ <button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Legendary</button>
483
+ <button class="px-6 py-2 rounded-full bg-white bg-opacity-10 hover:bg-opacity-20 text-white font-medium whitespace-nowrap">Seasonal</button>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
489
+ <!-- Phoenix -->
490
+ <div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-pink-500">
491
+ <div class="relative h-48 bg-gradient-to-br from-yellow-600 to-red-600 flex items-center justify-center">
492
+ <div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
493
+ <div class="relative z-10 flap-animation">
494
+ <div class="w-20 h-20 bg-gradient-to-br from-yellow-400 to-red-500 rounded-full flex items-center justify-center shadow-lg">
495
+ <i class="fas fa-dove text-white text-3xl"></i>
496
+ </div>
497
+ <div class="absolute -bottom-4 -left-4 w-28 h-6 bg-red-500 rounded-full blur-lg opacity-70"></div>
498
+ </div>
499
+ <div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
500
+ <i class="fas fa-fire text-yellow-400 mr-1"></i>
501
+ Legendary
502
+ </div>
503
+ </div>
504
+ <div class="p-6">
505
+ <div class="flex justify-between items-start mb-4">
506
+ <div>
507
+ <h3 class="text-xl font-bold">Phoenix</h3>
508
+ <p class="text-gray-400 text-sm">Fire Bird</p>
509
+ </div>
510
+ <div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
511
+ <i class="fas fa-bolt text-yellow-400 mr-1"></i>
512
+ <span>Lv. 12</span>
513
+ </div>
514
+ </div>
515
+ <p class="text-gray-300 text-sm mb-4">
516
+ One-time self-revive with flame immunity burst. Immune to fire obstacles.
517
+ </p>
518
+ <div class="flex justify-between items-center">
519
+ <div class="flex space-x-2">
520
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
521
+ <i class="fas fa-bolt text-yellow-400 mr-1"></i>
522
+ Speed
523
+ </div>
524
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
525
+ <i class="fas fa-shield-alt text-blue-400 mr-1"></i>
526
+ Shield
527
+ </div>
528
+ </div>
529
+ <button class="text-pink-500 hover:text-pink-400">
530
+ <i class="fas fa-arrow-right"></i>
531
+ </button>
532
+ </div>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Neon Falcon -->
537
+ <div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-purple-500">
538
+ <div class="relative h-48 bg-gradient-to-br from-purple-600 to-blue-600 flex items-center justify-center">
539
+ <div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
540
+ <div class="relative z-10 flap-animation">
541
+ <div class="w-20 h-20 bg-gradient-to-br from-purple-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg">
542
+ <i class="fas fa-dove text-white text-3xl"></i>
543
+ </div>
544
+ <div class="absolute -bottom-4 -left-4 w-28 h-6 bg-blue-500 rounded-full blur-lg opacity-70"></div>
545
+ </div>
546
+ <div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
547
+ <i class="fas fa-star text-purple-400 mr-1"></i>
548
+ Epic
549
+ </div>
550
+ </div>
551
+ <div class="p-6">
552
+ <div class="flex justify-between items-start mb-4">
553
+ <div>
554
+ <h3 class="text-xl font-bold">Neon Falcon</h3>
555
+ <p class="text-gray-400 text-sm">Speedster</p>
556
+ </div>
557
+ <div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
558
+ <i class="fas fa-bolt text-yellow-400 mr-1"></i>
559
+ <span>Lv. 8</span>
560
+ </div>
561
+ </div>
562
+ <p class="text-gray-300 text-sm mb-4">
563
+ Lightning-fast speed with blinding light trails that obscure obstacles temporarily.
564
+ </p>
565
+ <div class="flex justify-between items-center">
566
+ <div class="flex space-x-2">
567
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
568
+ <i class="fas fa-tachometer-alt text-purple-400 mr-1"></i>
569
+ Speed
570
+ </div>
571
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
572
+ <i class="fas fa-eye-slash text-blue-400 mr-1"></i>
573
+ Blinding
574
+ </div>
575
+ </div>
576
+ <button class="text-pink-500 hover:text-pink-400">
577
+ <i class="fas fa-arrow-right"></i>
578
+ </button>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <!-- Iron Eagle -->
584
+ <div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-gray-500">
585
+ <div class="relative h-48 bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center">
586
+ <div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
587
+ <div class="relative z-10 flap-animation">
588
+ <div class="w-20 h-20 bg-gradient-to-br from-gray-400 to-gray-600 rounded-full flex items-center justify-center shadow-lg">
589
+ <i class="fas fa-dove text-white text-3xl"></i>
590
+ </div>
591
+ <div class="absolute -bottom-4 -left-4 w-28 h-6 bg-gray-500 rounded-full blur-lg opacity-70"></div>
592
+ </div>
593
+ <div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
594
+ <i class="fas fa-shield-alt text-gray-400 mr-1"></i>
595
+ Rare
596
+ </div>
597
+ </div>
598
+ <div class="p-6">
599
+ <div class="flex justify-between items-start mb-4">
600
+ <div>
601
+ <h3 class="text-xl font-bold">Iron Eagle</h3>
602
+ <p class="text-gray-400 text-sm">Tank</p>
603
+ </div>
604
+ <div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
605
+ <i class="fas fa-bolt text-yellow-400 mr-1"></i>
606
+ <span>Lv. 5</span>
607
+ </div>
608
+ </div>
609
+ <p class="text-gray-300 text-sm mb-4">
610
+ High momentum lets it plow through tight spots effortlessly. Resistant to collisions.
611
+ </p>
612
+ <div class="flex justify-between items-center">
613
+ <div class="flex space-x-2">
614
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
615
+ <i class="fas fa-weight-hanging text-gray-400 mr-1"></i>
616
+ Weight
617
+ </div>
618
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
619
+ <i class="fas fa-shield-alt text-blue-400 mr-1"></i>
620
+ Armor
621
+ </div>
622
+ </div>
623
+ <button class="text-pink-500 hover:text-pink-400">
624
+ <i class="fas fa-arrow-right"></i>
625
+ </button>
626
+ </div>
627
+ </div>
628
+ </div>
629
+
630
+ <!-- Wind Sprite -->
631
+ <div class="bird-card rounded-xl overflow-hidden bg-gray-900 bg-opacity-50 border border-gray-800 hover:border-green-500">
632
+ <div class="relative h-48 bg-gradient-to-br from-green-600 to-teal-600 flex items-center justify-center">
633
+ <div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg')] bg-cover bg-center opacity-20"></div>
634
+ <div class="relative z-10 flap-animation">
635
+ <div class="w-20 h-20 bg-gradient-to-br from-green-400 to-teal-500 rounded-full flex items-center justify-center shadow-lg">
636
+ <i class="fas fa-dove text-white text-3xl"></i>
637
+ </div>
638
+ <div class="absolute -bottom-4 -left-4 w-28 h-6 bg-teal-500 rounded-full blur-lg opacity-70"></div>
639
+ </div>
640
+ <div class="absolute top-4 right-4 bg-black bg-opacity-50 rounded-full px-3 py-1 text-sm font-medium flex items-center">
641
+ <i class="fas fa-leaf text-green-400 mr-1"></i>
642
+ Common
643
+ </div>
644
+ </div>
645
+ <div class="p-6">
646
+ <div class="flex justify-between items-start mb-4">
647
+ <div>
648
+ <h3 class="text-xl font-bold">Wind Sprite</h3>
649
+ <p class="text-gray-400 text-sm">Agile</p>
650
+ </div>
651
+ <div class="flex items-center bg-gray-800 rounded-full px-3 py-1">
652
+ <i class="fas fa-bolt text-yellow-400 mr-1"></i>
653
+ <span>Lv. 3</span>
654
+ </div>
655
+ </div>
656
+ <p class="text-gray-300 text-sm mb-4">
657
+ Agile with a micro-dash cooldown ability and a smaller hitbox. Perfect for tight spaces.
658
+ </p>
659
+ <div class="flex justify-between items-center">
660
+ <div class="flex space-x-2">
661
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
662
+ <i class="fas fa-wind text-green-400 mr-1"></i>
663
+ Agile
664
+ </div>
665
+ <div class="text-xs bg-gray-800 rounded-full px-3 py-1 flex items-center">
666
+ <i class="fas fa-bullseye text-blue-400 mr-1"></i>
667
+ Small
668
+ </div>
669
+ </div>
670
+ <button class="text-pink-500 hover:text-pink-400">
671
+ <i class="fas fa-arrow-right"></i>
672
+ </button>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ </div>
677
+
678
+ <div class="text-center mt-12">
679
+ <button class="px-8 py-3 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg text-lg font-medium border border-white border-opacity-20 flex items-center mx-auto">
680
+ <i class="fas fa-chevron-down mr-2"></i> View All 12 Birds
681
+ </button>
682
+ </div>
683
+ </div>
684
+ </section>
685
+
686
+ <!-- Customization Section -->
687
+ <section id="customization" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-20">
688
+ <div class="max-w-7xl mx-auto">
689
+ <div class="text-center mb-16">
690
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
691
+ Make It <span class="text-pink-500">Yours</span>
692
+ </h2>
693
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
694
+ Express yourself with hundreds of cosmetic options for your bird and trail.
695
+ </p>
696
+ </div>
697
+
698
+ <div class="grid md:grid-cols-2 gap-12 items-center">
699
+ <div>
700
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl p-6 mb-8">
701
+ <div class="flex justify-between items-center mb-6">
702
+ <h3 class="text-xl font-bold">Customization Panel</h3>
703
+ <div class="flex items-center text-yellow-400">
704
+ <i class="fas fa-coins mr-2"></i>
705
+ <span>12,450</span>
706
+ </div>
707
+ </div>
708
+
709
+ <div class="mb-8">
710
+ <h4 class="text-sm font-semibold text-gray-400 mb-3">SKINS</h4>
711
+ <div class="grid grid-cols-3 gap-3">
712
+ <div class="h-16 rounded-lg bg-gradient-to-br from-yellow-500 to-red-500 flex items-center justify-center cursor-pointer border-2 border-pink-500">
713
+ <i class="fas fa-dove text-white"></i>
714
+ </div>
715
+ <div class="h-16 rounded-lg bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
716
+ <i class="fas fa-dove text-white"></i>
717
+ </div>
718
+ <div class="h-16 rounded-lg bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
719
+ <i class="fas fa-dove text-white"></i>
720
+ </div>
721
+ <div class="h-16 rounded-lg bg-gradient-to-br from-pink-500 to-red-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
722
+ <i class="fas fa-dove text-white"></i>
723
+ </div>
724
+ <div class="h-16 rounded-lg bg-gradient-to-br from-gray-500 to-black flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
725
+ <i class="fas fa-dove text-white"></i>
726
+ </div>
727
+ <div class="h-16 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
728
+ <i class="fas fa-dove text-white"></i>
729
+ </div>
730
+ </div>
731
+ </div>
732
+
733
+ <div class="mb-8">
734
+ <h4 class="text-sm font-semibold text-gray-400 mb-3">TRAILS</h4>
735
+ <div class="grid grid-cols-3 gap-3">
736
+ <div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
737
+ <div class="w-8 h-1 mb-1 trail-fire rounded-full"></div>
738
+ <span class="text-xs">Fire</span>
739
+ </div>
740
+ <div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
741
+ <div class="w-8 h-1 mb-1 trail-electric rounded-full"></div>
742
+ <span class="text-xs">Electric</span>
743
+ </div>
744
+ <div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border-2 border-pink-500">
745
+ <div class="w-8 h-1 mb-1 trail-rainbow rounded-full"></div>
746
+ <span class="text-xs">Rainbow</span>
747
+ </div>
748
+ <div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
749
+ <div class="w-8 h-1 mb-1 bg-gray-400 rounded-full"></div>
750
+ <span class="text-xs">Smoke</span>
751
+ </div>
752
+ <div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
753
+ <div class="w-8 h-1 mb-1 bg-purple-500 rounded-full"></div>
754
+ <span class="text-xs">Magic</span>
755
+ </div>
756
+ <div class="h-16 rounded-lg bg-gray-800 flex flex-col items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
757
+ <div class="w-8 h-1 mb-1 bg-green-500 rounded-full"></div>
758
+ <span class="text-xs">Nature</span>
759
+ </div>
760
+ </div>
761
+ </div>
762
+
763
+ <div>
764
+ <h4 class="text-sm font-semibold text-gray-400 mb-3">ACCESSORIES</h4>
765
+ <div class="grid grid-cols-3 gap-3">
766
+ <div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
767
+ <i class="fas fa-crown text-yellow-400"></i>
768
+ </div>
769
+ <div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
770
+ <i class="fas fa-hat-wizard text-purple-400"></i>
771
+ </div>
772
+ <div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
773
+ <i class="fas fa-glasses text-blue-400"></i>
774
+ </div>
775
+ <div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border-2 border-pink-500">
776
+ <i class="fas fa-jet-fighter text-red-400"></i>
777
+ </div>
778
+ <div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
779
+ <i class="fas fa-scarf text-pink-400"></i>
780
+ </div>
781
+ <div class="h-16 rounded-lg bg-gray-800 flex items-center justify-center cursor-pointer border border-gray-700 hover:border-gray-600">
782
+ <i class="fas fa-mask text-green-400"></i>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <div class="relative">
790
+ <div class="relative w-full max-w-md mx-auto">
791
+ <div class="absolute -top-10 -left-10 w-32 h-32 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
792
+ <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
793
+ <div class="relative bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-2xl overflow-hidden border border-white border-opacity-20 p-8">
794
+ <div class="flex justify-center mb-8">
795
+ <div class="relative">
796
+ <div class="w-24 h-24 bg-gradient-to-br from-pink-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg flap-animation">
797
+ <i class="fas fa-dove text-white text-4xl"></i>
798
+ </div>
799
+ <div class="absolute -bottom-2 -left-2 w-28 h-6 bg-pink-500 rounded-full blur-lg opacity-70 trail-rainbow"></div>
800
+ <div class="absolute -top-2 -right-2 w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center">
801
+ <i class="fas fa-jet-fighter text-red-500 text-sm"></i>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ <div class="text-center">
806
+ <h3 class="text-2xl font-bold mb-2">Cyber Phoenix</h3>
807
+ <p class="text-gray-300 mb-6">Legendary skin with rainbow trail and jetpack accessory</p>
808
+ <div class="flex justify-center space-x-4 mb-6">
809
+ <div class="flex items-center">
810
+ <i class="fas fa-fire text-yellow-400 mr-2"></i>
811
+ <span>Fire Immunity</span>
812
+ </div>
813
+ <div class="flex items-center">
814
+ <i class="fas fa-redo text-blue-400 mr-2"></i>
815
+ <span>Self-Revive</span>
816
+ </div>
817
+ </div>
818
+ <div class="bg-gray-800 rounded-lg p-4 mb-6">
819
+ <div class="flex justify-between items-center">
820
+ <div>
821
+ <p class="text-gray-400 text-sm">Current Value</p>
822
+ <p class="font-bold">12,450 coins</p>
823
+ </div>
824
+ <div>
825
+ <p class="text-gray-400 text-sm">Rarity</p>
826
+ <p class="font-bold text-purple-400">Legendary</p>
827
+ </div>
828
+ </div>
829
+ </div>
830
+ <button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-3 rounded-lg font-bold">
831
+ Equip Customization
832
+ </button>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </section>
840
+
841
+ <!-- Power-Ups Section -->
842
+ <section class="py-20 px-4 sm:px-6 lg:px-8">
843
+ <div class="max-w-7xl mx-auto">
844
+ <div class="text-center mb-16">
845
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
846
+ Strategic <span class="text-pink-500">Power-Ups</span>
847
+ </h2>
848
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
849
+ Enhance your flight with powerful boosts and abilities.
850
+ </p>
851
+ </div>
852
+
853
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
854
+ <!-- Rocket Boost -->
855
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-pink-500 transition-all duration-300">
856
+ <div class="p-6 bg-gradient-to-br from-red-900 to-orange-800">
857
+ <div class="flex justify-between items-center">
858
+ <h3 class="text-xl font-bold">Rocket Boost</h3>
859
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
860
+ <i class="fas fa-rocket text-xl text-orange-300"></i>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ <div class="p-6">
865
+ <p class="text-gray-300 mb-6">
866
+ Dash through 3 pipes unscathed. Perfect for tight spots and speed runs.
867
+ </p>
868
+ <div class="mb-6">
869
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
870
+ <span>Duration</span>
871
+ <span>3 pipes</span>
872
+ </div>
873
+ <div class="w-full bg-gray-800 rounded-full h-2">
874
+ <div class="bg-orange-500 h-2 rounded-full" style="width: 60%"></div>
875
+ </div>
876
+ </div>
877
+ <div class="flex justify-between items-center">
878
+ <div class="flex items-center">
879
+ <i class="fas fa-bolt text-yellow-400 mr-2"></i>
880
+ <span class="text-sm">Common</span>
881
+ </div>
882
+ <button class="px-4 py-2 bg-orange-600 hover:bg-orange-700 rounded-lg text-sm font-medium">
883
+ Select Power-Up
884
+ </button>
885
+ </div>
886
+ </div>
887
+ </div>
888
+
889
+ <!-- Shield Barrier -->
890
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-blue-500 transition-all duration-300">
891
+ <div class="p-6 bg-gradient-to-br from-blue-900 to-cyan-800">
892
+ <div class="flex justify-between items-center">
893
+ <h3 class="text-xl font-bold">Shield Barrier</h3>
894
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
895
+ <i class="fas fa-shield-alt text-xl text-cyan-300"></i>
896
+ </div>
897
+ </div>
898
+ </div>
899
+ <div class="p-6">
900
+ <p class="text-gray-300 mb-6">
901
+ Absorb one collision before breaking. Your safety net for risky maneuvers.
902
+ </p>
903
+ <div class="mb-6">
904
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
905
+ <span>Protection</span>
906
+ <span>1 hit</span>
907
+ </div>
908
+ <div class="w-full bg-gray-800 rounded-full h-2">
909
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 40%"></div>
910
+ </div>
911
+ </div>
912
+ <div class="flex justify-between items-center">
913
+ <div class="flex items-center">
914
+ <i class="fas fa-shield-alt text-blue-400 mr-2"></i>
915
+ <span class="text-sm">Uncommon</span>
916
+ </div>
917
+ <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm font-medium">
918
+ Select Power-Up
919
+ </button>
920
+ </div>
921
+ </div>
922
+ </div>
923
+
924
+ <!-- Gravity Flip -->
925
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-purple-500 transition-all duration-300">
926
+ <div class="p-6 bg-gradient-to-br from-purple-900 to-pink-800">
927
+ <div class="flex justify-between items-center">
928
+ <h3 class="text-xl font-bold">Gravity Flip</h3>
929
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
930
+ <i class="fas fa-sync-alt text-xl text-pink-300"></i>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ <div class="p-6">
935
+ <p class="text-gray-300 mb-6">
936
+ Reverse gravity for 5 seconds. Completely changes your flight dynamics.
937
+ </p>
938
+ <div class="mb-6">
939
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
940
+ <span>Duration</span>
941
+ <span>5 seconds</span>
942
+ </div>
943
+ <div class="w-full bg-gray-800 rounded-full h-2">
944
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 50%"></div>
945
+ </div>
946
+ </div>
947
+ <div class="flex justify-between items-center">
948
+ <div class="flex items-center">
949
+ <i class="fas fa-star text-purple-400 mr-2"></i>
950
+ <span class="text-sm">Rare</span>
951
+ </div>
952
+ <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg text-sm font-medium">
953
+ Select Power-Up
954
+ </button>
955
+ </div>
956
+ </div>
957
+ </div>
958
+
959
+ <!-- Coin Magnet -->
960
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-yellow-500 transition-all duration-300">
961
+ <div class="p-6 bg-gradient-to-br from-yellow-900 to-amber-800">
962
+ <div class="flex justify-between items-center">
963
+ <h3 class="text-xl font-bold">Coin Magnet</h3>
964
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
965
+ <i class="fas fa-magnet text-xl text-amber-300"></i>
966
+ </div>
967
+ </div>
968
+ </div>
969
+ <div class="p-6">
970
+ <p class="text-gray-300 mb-6">
971
+ Attract nearby coins for 8 seconds. Maximize your earnings with this boost.
972
+ </p>
973
+ <div class="mb-6">
974
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
975
+ <span>Duration</span>
976
+ <span>8 seconds</span>
977
+ </div>
978
+ <div class="w-full bg-gray-800 rounded-full h-2">
979
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 80%"></div>
980
+ </div>
981
+ </div>
982
+ <div class="flex justify-between items-center">
983
+ <div class="flex items-center">
984
+ <i class="fas fa-coins text-yellow-400 mr-2"></i>
985
+ <span class="text-sm">Uncommon</span>
986
+ </div>
987
+ <button class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-lg text-sm font-medium">
988
+ Select Power-Up
989
+ </button>
990
+ </div>
991
+ </div>
992
+ </div>
993
+
994
+ <!-- Time Slow -->
995
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-green-500 transition-all duration-300">
996
+ <div class="p-6 bg-gradient-to-br from-green-900 to-emerald-800">
997
+ <div class="flex justify-between items-center">
998
+ <h3 class="text-xl font-bold">Time Slow</h3>
999
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
1000
+ <i class="fas fa-hourglass-half text-xl text-emerald-300"></i>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ <div class="p-6">
1005
+ <p class="text-gray-300 mb-6">
1006
+ Slow down obstacles around you for 4 seconds. Perfect for precision moments.
1007
+ </p>
1008
+ <div class="mb-6">
1009
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
1010
+ <span>Duration</span>
1011
+ <span>4 seconds</span>
1012
+ </div>
1013
+ <div class="w-full bg-gray-800 rounded-full h-2">
1014
+ <div class="bg-green-500 h-2 rounded-full" style="width: 40%"></div>
1015
+ </div>
1016
+ </div>
1017
+ <div class="flex justify-between items-center">
1018
+ <div class="flex items-center">
1019
+ <i class="fas fa-clock text-green-400 mr-2"></i>
1020
+ <span class="text-sm">Common</span>
1021
+ </div>
1022
+ <button class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg text-sm font-medium">
1023
+ Select Power-Up
1024
+ </button>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+
1029
+ <!-- Shadow Clone -->
1030
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800 hover:border-indigo-500 transition-all duration-300">
1031
+ <div class="p-6 bg-gradient-to-br from-indigo-900 to-violet-800">
1032
+ <div class="flex justify-between items-center">
1033
+ <h3 class="text-xl font-bold">Shadow Clone</h3>
1034
+ <div class="w-12 h-12 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
1035
+ <i class="fas fa-clone text-xl text-violet-300"></i>
1036
+ </div>
1037
+ </div>
1038
+ </div>
1039
+ <div class="p-6">
1040
+ <p class="text-gray-300 mb-6">
1041
+ Create a decoy that flies alongside you, confusing obstacles for 6 seconds.
1042
+ </p>
1043
+ <div class="mb-6">
1044
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
1045
+ <span>Duration</span>
1046
+ <span>6 seconds</span>
1047
+ </div>
1048
+ <div class="w-full bg-gray-800 rounded-full h-2">
1049
+ <div class="bg-indigo-500 h-2 rounded-full" style="width: 60%"></div>
1050
+ </div>
1051
+ </div>
1052
+ <div class="flex justify-between items-center">
1053
+ <div class="flex items-center">
1054
+ <i class="fas fa-gem text-indigo-400 mr-2"></i>
1055
+ <span class="text-sm">Epic</span>
1056
+ </div>
1057
+ <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium">
1058
+ Select Power-Up
1059
+ </button>
1060
+ </div>
1061
+ </div>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+ </section>
1066
+
1067
+ <!-- Leaderboards Section -->
1068
+ <section id="leaderboards" class="py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-20">
1069
+ <div class="max-w-7xl mx-auto">
1070
+ <div class="text-center mb-16">
1071
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">
1072
+ Global <span class="text-pink-500">Leaderboards</span>
1073
+ </h2>
1074
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
1075
+ Compete against players worldwide and climb to the top of the rankings.
1076
+ </p>
1077
+ </div>
1078
+
1079
+ <div class="bg-gray-900 bg-opacity-50 rounded-xl overflow-hidden border border-gray-800">
1080
+ <div class="p-6 border-b border-gray-800">
1081
+ <div class="flex flex-col md:flex-row justify-between items-center">
1082
+ <div class="mb-4 md:mb-0">
1083
+ <h3 class="text-xl font-bold">Endless Arcade Rankings</h3>
1084
+ <p class="text-gray-400">Top players this week</p>
1085
+ </div>
1086
+ <div class="flex space-x-4">
1087
+ <div class="relative">
1088
+ <select class="appearance-none bg-gray-800 border border-gray-700 rounded-lg pl-4 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
1089
+ <option>All Time</option>
1090
+ <option>This Week</option>
1091
+ <option>Today</option>
1092
+ </select>
1093
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
1094
+ <i class="fas fa-chevron-down"></i>
1095
+ </div>
1096
+ </div>
1097
+ <div class="relative">
1098
+ <select class="appearance-none bg-gray-800 border border-gray-700 rounded-lg pl-4 pr-8 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-500">
1099
+ <option>Global</option>
1100
+ <option>Friends</option>
1101
+ <option>Club</option>
1102
+ </select>
1103
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
1104
+ <i class="fas fa-chevron-down"></i>
1105
+ </div>
1106
+ </div>
1107
+ </div>
1108
+ </div>
1109
+ </div>
1110
+
1111
+ <div class="divide-y divide-gray-800">
1112
+ <!-- Top Player -->
1113
+ <div class="p-6 bg-gradient-to-r from-yellow-900 to-transparent">
1114
+ <div class="flex items-center">
1115
+ <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center text-white font-bold mr-4">
1116
+ 1
1117
+ </div>
1118
+ <div class="flex-shrink-0">
1119
+ <img class="w-12 h-12 rounded-full border-2 border-yellow-400" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
1120
+ </div>
1121
+ <div class="ml-4 flex-1">
1122
+ <div class="flex items-center justify-between">
1123
+ <div>
1124
+ <h4 class="font-bold">SkyQueen</h4>
1125
+ <p class="text-sm text-gray-400">Phoenix - Lv. 24</p>
1126
+ </div>
1127
+ <div class="text-right">
1128
+ <p class="font-bold text-yellow-400">12,450m</p>
1129
+ <p class="text-sm text-gray-400">3.2M points</p>
1130
+ </div>
1131
+ </div>
1132
+ </div>
1133
+ </div>
1134
+ </div>
1135
+
1136
+ <!-- Player 2 -->
1137
+ <div class="p-6 bg-gradient-to-r from-gray-800 to-transparent">
1138
+ <div class="flex items-center">
1139
+ <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center text-white font-bold mr-4">
1140
+ 2
1141
+ </div>
1142
+ <div class="flex-shrink-0">
1143
+ <img class="w-12 h-12 rounded-full border-2 border-gray-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
1144
+ </div>
1145
+ <div class="ml-4 flex-1">
1146
+ <div class="flex items-center justify-between">
1147
+ <div>
1148
+ <h4 class="font-bold">FlappyPro</h4>
1149
+ <p class="text-sm text-gray-400">Neon Falcon - Lv. 18</p>
1150
+ </div>
1151
+ <div class="text-right">
1152
+ <p class="font-bold">10,780m</p>
1153
+ <p class="text-sm text-gray-400">2.8M points</p>
1154
+ </div>
1155
+ </div>
1156
+ </div>
1157
+ </div>
1158
+ </div>
1159
+
1160
+ <!-- Player 3 -->
1161
+ <div class="p-6 bg-gradient-to-r from-amber-800 to-transparent">
1162
+ <div class="flex items-center">
1163
+ <div class="w-10 h-10 rounded-full bg-amber-600 flex items-center justify-center text-white font-bold mr-4">
1164
+ 3
1165
+ </div>
1166
+ <div class="flex-shrink-0">
1167
+ <img class="w-12 h-12 rounded-full border-2 border-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
1168
+ </div>
1169
+ <div class="ml-4 flex-1">
1170
+ <div class="flex items-center justify-between">
1171
+ <div>
1172
+ <h4 class="font-bold">WingMaster</h4>
1173
+ <p class="text-sm text-gray-400">Iron Eagle - Lv. 15</p>
1174
+ </div>
1175
+ <div class="text-right">
1176
+ <p class="font-bold text-amber-400">9,560m</p>
1177
+ <p class="text-sm text-gray-400">2.4M points</p>
1178
+ </div>
1179
+ </div>
1180
+ </div>
1181
+ </div>
1182
+ </div>
1183
+
1184
+ <!-- Player 4 -->
1185
+ <div class="p-6">
1186
+ <div class="flex items-center">
1187
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold mr-4">
1188
+ 4
1189
+ </div>
1190
+ <div class="flex-shrink-0">
1191
+ <img class="w-12 h-12 rounded-full border-2 border-gray-500" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
1192
+ </div>
1193
+ <div class="ml-4 flex-1">
1194
+ <div class="flex items-center justify-between">
1195
+ <div>
1196
+ <h4 class="font-bold">AirNinja</h4>
1197
+ <p class="text-sm text-gray-400">Wind Sprite - Lv. 12</p>
1198
+ </div>
1199
+ <div class="text-right">
1200
+ <p class="font-bold">8,340m</p>
1201
+ <p class="text-sm text-gray-400">2.1M points</p>
1202
+ </div>
1203
+ </div>
1204
+ </div>
1205
+ </div>
1206
+ </div>
1207
+
1208
+ <!-- Player 5 -->
1209
+ <div class="p-6">
1210
+ <div class="flex items-center">
1211
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold mr-4">
1212
+ 5
1213
+ </div>
1214
+ <div class="flex-shrink-0">
1215
+ <img class="w-12 h-12 rounded-full border-2 border-gray-500" src="https://randomuser.me/api/portraits/women/54.jpg" alt="">
1216
+ </div>
1217
+ <div class="ml-4 flex-1">
1218
+ <div class="flex items-center justify-between">
1219
+ <div>
1220
+ <h4 class="font-bold">PixelWings</h4>
1221
+ <p class="text-sm text-gray-400">Cyber Hawk - Lv. 10</p>
1222
+ </div>
1223
+ <div class="text-right">
1224
+ <p class="font-bold">7,890m</p>
1225
+ <p class="text-sm text-gray-400">1.9M points</p>
1226
+ </div>
1227
+ </div>
1228
+ </div>
1229
+ </div>
1230
+ </div>
1231
+
1232
+ <!-- Current Player -->
1233
+ <div class="p-6 bg-gradient-to-r from-pink-900 to-transparent">
1234
+ <div class="flex items-center">
1235
+ <div class="w-10 h-10 rounded-full bg-pink-600 flex items-center justify-center text-white font-bold mr-4">
1236
+ 42
1237
+ </div>
1238
+ <div class="flex-shrink-0">
1239
+ <img class="w-12 h-12 rounded-full border-2 border-pink-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="">
1240
+ </div>
1241
+ <div class="ml-4 flex-1">
1242
+ <div class="flex items-center justify-between">
1243
+ <div>
1244
+ <h4 class="font-bold">You</h4>
1245
+ <p class="text-sm text-gray-400">Phoenix - Lv. 5</p>
1246
+ </div>
1247
+ <div class="text-right">
1248
+ <p class="font-bold text-pink-400">4,210m</p>
1249
+ <p class="text-sm text-gray-400">1.2M points</p>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+ </div>
1255
+ </div>
1256
+
1257
+ <div class="p-6 border-t border-gray-800 text-center">
1258
+ <button class="px-6 py-3 bg-white bg-opacity-10 hover:bg-opacity-20 rounded-lg text-lg font-medium border border-white border-opacity-20">
1259
+ View Full Leaderboard
1260
+ </button>
1261
+ </div>
1262
+ </div>
1263
+ </div>
1264
+ </section>
1265
+
1266
+ <!-- Call to Action -->
1267
+ <section class="py-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
1268
+ <div class="absolute inset-0 overflow-hidden">
1269
+ <div class="absolute inset-0 bg-gradient-to-r from-purple-900 to-pink-800 opacity-50"></div>
1270
+ <div class="absolute inset-0 bg-[url('https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-214890277
1271
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 🎮 Flappy Legends: Soar Beyond Limits Dive into the all-new evolution of the iconic Flappy Bird experience with Flappy Legends — a reimagined adventure that blends fast-paced action with deep progression, stunning customization, and dynamic gameplay across four distinct game modes. Powered by an intuitive front-end interface and supported by a robust, scalable back-end architecture, Flappy Legends is built for both casual flapping fun and competitive mastery. Whether you're flying solo or battling friends in real-time duels, every tap matters, every second counts, and every run writes your legend. 🚀 Epic Game Modes & Mechanics Choose your challenge. Master your style. There are four unique ways to play , each with its own rules, scoring logic, hazards, and skill requirements. 🌊 Endless Arcade Survive as long as you can in an infinite gauntlet of ever-changing obstacles like pipes, moving platforms, fire rings, and swinging axes — generated procedurally by the back-end Procedural Generation Engine . Distance Scoring : 1 point per meter flown + bonus points for narrow gap feats. Combo Meter : Clear obstacles rapidly to build a ×5 streak and earn double points for 5 seconds. Risk Zones : Every 200 meters triggers faster scrolling and tighter gaps — survive to unlock coin-rich tunnels. Respawn Shield : If unlocked via progression, your first collision triggers a temporary shield — giving you a clutch second chance. ⚡ Sprint Challenge Race against the clock in a high-octane 60-second dash. Precision, timing, and strategy are key. Checkpoint Rings : Fly through glowing rings every 15 seconds to gain +5s, coins, and rare power-up shards. Speed Zones : Turbo gates boost speed by 50% for 3 seconds — chain them for breakneck pace. Hyper Flap : Collect three XP orbs within 5 seconds to trigger double flap strength and 2 seconds of invincibility. Scoring : Base = time ×10; +100 per checkpoint; +200 per Hyper Flap. 🔥 Daily Gauntlet Conquer a handcrafted obstacle map that changes every day — designed to test memorization, reflexes, and risk judgment. Limited Lives : Start with 3 lives — lose one per collision. Secret Routes : Hidden paths offer rewards but may cost extra lives if failed. Seasonal Hazards : Monthly themes (like Haunted Hallow’s Eve) inject spooky twists (e.g., ghost-phase pipes). Leaderboard Qualifier : Only your top score of the day counts — climb rankings to earn exclusive seasonal badges. ⚔️ Versus Races Compete head-to-head against friends or global rivals in live races — first to reach 500 meters wins! Power-Up Slots : Pre-select up to 3 boosts (Rocket Boost, Gravity Flip, Time Slow) to surprise or outmaneuver opponents. Mirror Mode : Invert gravity — tap to dive, hold to ascend; all obstacles flip vertically. Ghost Mode : Race against last week's top Daily Gauntlet runner — beat their path and time to claim the Ghost Crown. Stun & Boost : Freeze opponents with Time Slow or surge ahead using Overdrive Orbs. Victory Rewards : Win streaks unlock bigger chests — 3 wins = Silver, 7 = Gold, 15 = Legendary. 🐦 Choose & Evolve Your Bird Heroes Unlock 12 legendary birds , each with unique stats, abilities, and visual flair: Neon Falcon : Lightning-fast speed with blinding light trails that obscure obstacles for a short window. Iron Eagle : High momentum lets it plow through tight spots effortlessly. Wind Sprite : Agile with a micro-dash cooldown ability and a smaller hitbox. Phoenix : One-time self-revive with flame immunity burst. Plus 8 more birds with powers like Gravity Warp , Magnet Beak , and Shadow Clone . Level up any bird by collecting XP orbs during runs — improving stats such as: Speed multiplier Glide duration Shield capacity Power-up duration All upgrades are tracked by the XP & Leveling Service and reflected instantly in your next flight. ✨ Deep Customization – Make Your Flight Uniquely Yours Express yourself with hundreds of cosmetic options designed to match your mood, style, or victory celebration: 🎨 Skins & Outfits Choose from over 150+ skins , including: Cyberpunk Chrome Arctic Aurora Galactic Voyager Retro Pixel Hawk And many more — each with animated details and lighting effects. 💥 Trail Effects Attach dazzling visual effects to your bird’s tail, such as: Fire Trails Glitter Dust Electric Sparks Smoke Rings Rainbow Glow Mix and match any trail with any skin for unlimited combinations. 👒 Hats & Accessories Add personality with hats, goggles, jetpacks, confetti launchers, and more: Aviator Goggles Party Hat Crown of Legends Mini Jetpack Confetti Shooter Every item is unlocked as you progress, complete quests, or earn Season Pass rewards. The Customization Panel on the front-end integrates with the Virtual Goods Inventory service , allowing seamless browsing and equipping of items. ⚡ Power-Ups & Boosts Use strategic enhancements to gain the upper hand: Rocket Boost Dash through 3 pipes unscathed Rare Shield Barrier Absorb one collision before breaking Uncommon Gravity Flip Reverse gravity for 5 seconds Epic Coin Magnet Attract nearby coins for 8 seconds Common Time Slow Slow down obstacles around you for 4 sec Legendary Select up to 3 power-ups before each run. Upgrade them via the Power-Up Microservice to increase durations and effects. 🎯 Progression & Rewards System A rich ecosystem of achievements, quests, and season-based content keeps you motivated and rewarded: 📜 Quest System Complete daily, weekly, and monthly goals tied to: Coins collected Pipes cleared Races won Power-ups used Quest progress is tracked via the Event Pipeline , and rewards are delivered through chest-opening transactions. 🏅 Achievements & Badges Unlock over 50+ milestones such as: “1000 Pipes Cleared” “Perfect 30-Tap Run” “Top 100 Leaderboard Rank” Earn titles, avatar frames, and special icons to show off your legend status. 🗓️ Season Pass Two tiers — Free & Premium — deliver themed events and rewards every season: Haunted Hallow’s Eve Galactic Voyage Winter Wonder Wings Time Traveler Tournament Your progress is tracked and validated via the Season Pass Service , and rewards include exclusive skins, power-up shards, and in-game currency. 🌐 Social & Competitive Features Connect, compete, and rise through the ranks with these community-driven features: 📊 Leaderboards Climb global or friend-specific rankings by mode, bird hero, and season — powered by the Leaderboard Service . 👥 Clubs Join or create teams of up to 50 players: Compete in Club vs Club tournaments Chat in dedicated channels via WebSocket Request and gift items like coins or power-ups using atomic transactions 🔁 Replays & Spectate Watch highlight reels or live matches streamed via Replay Storage and save your best flights for sharing. 💬 In-Game Chat & Gifting Real-time chat powered by WebSocket clusters and secure gifting system for sharing items safely. 🖼️ Front-End Architecture Highlights 🧩 UI & User Experience Main Menu : Mode selector, Bird Roster Carousel, Customization Panel HUD : Score display, Power-Up slots, Pause menu, Coin counter Results Screen : Run summary, Reward panel, Replay/share buttons Overlay Systems : Tooltips, Notifications, Achievement unlocks 🎨 Rendering & Visuals 2D orthographic camera with layered parallax backgrounds Dynamic particle effects for trails and power-ups Smooth animations and transitions using tweening libraries 🕹️ Input Handling Tap to flap, hold to glide Swipe navigation in menus Keyboard/mouse support for desktop players ☁️ Back-End Architecture Overview ⚙️ Microservices Profile Service : Manages user data, unlocks, stats Game Mode Service : Streams obstacle data, validates scores Quest Engine : Tracks and rewards quest progress Leaderboard Service : Stores and serves rankings Power-Up Microservice : Defines and activates boosts Season Pass Service : Handles passes, XP, and rewards 💾 Data Stores NoSQL Database : For player profiles, progression, and inventory Blob Storage : Compressed JSON replays indexed by user ID Redis Cache : For leaderboards and session state 📡 Infrastructure & Scaling Auto-scaled front-end servers behind load balancers Kubernetes-hosted microservices with read replicas CDN-powered static assets (sprites, UI layouts) Kafka pipeline for analytics and telemetry 🎮 Simple Controls, Infinite Skill Ceiling Tap to flap, hold to glide — simple enough for anyone to play, but mastering combos, route memorization, and strategic power-up use elevates it to a true esport-like experience. Whether you're aiming for a perfect run or climbing global leaderboards, Flappy Legends offers endless replayability. 🌈 Final Thoughts Flappy Legends isn’t just a game — it’s a universe of endless challenges, evolving characters, and thrilling competition. With four deeply-mechaniced modes , 12 customizable bird heroes , progressive levelling , social interaction , and a robust tech stack , this game brings together both nostalgic charm and modern innovation. Soar beyond limits today — your legend awaits!