Hugging Face's logo

Spaces:
Hygee
/
fuw
Running

App Files Community
Hygee commited on
Commit
7d24453
·
verified ·
1 Parent(s): 599dcf7

for the iso download button say not avalible - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +710 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Fuw
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: red
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: fuw
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: pink
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,710 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Fuwalo Beta - Download Now</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ purple: '#CBB4FF',
16
+ blue: '#B8E0FF',
17
+ pink: '#FFD6EC',
18
+ discord: '#5865F2',
19
+ },
20
+ fontFamily: {
21
+ sans: ['Inter', 'sans-serif'],
22
+ },
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ background-color: white;
33
+ }
34
+
35
+ .hero-gradient {
36
+ background: linear-gradient(135deg, #A58CD5 0%, #6A578D 100%);
37
+ }
38
+
39
+ .gradient-text {
40
+ background: linear-gradient(90deg, #7B61FF 0%, #00A3FF 100%);
41
+ -webkit-background-clip: text;
42
+ background-clip: text;
43
+ color: transparent;
44
+ }
45
+
46
+ .card-hover:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
49
+ }
50
+
51
+ .screenshot {
52
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
53
+ border-radius: 40px;
54
+ border: 12px solid white;
55
+ }
56
+
57
+ .floating-img {
58
+ animation: float 6s ease-in-out infinite;
59
+ }
60
+
61
+ @keyframes float {
62
+ 0%, 100% {
63
+ transform: translateY(0) rotate(-1deg);
64
+ }
65
+ 50% {
66
+ transform: translateY(-20px) rotate(1deg);
67
+ }
68
+ }
69
+
70
+ .carousel-item {
71
+ transition: transform 0.5s ease;
72
+ }
73
+
74
+ .navbar {
75
+ background-color: rgba(248, 244, 252, 0.8);
76
+ backdrop-filter: blur(10px);
77
+ -webkit-backdrop-filter: blur(10px);
78
+ }
79
+
80
+ .mobile-menu {
81
+ display: none;
82
+ }
83
+
84
+ .mobile-menu.active {
85
+ display: block;
86
+ position: absolute;
87
+ top: 100%;
88
+ left: 0;
89
+ width: 100%;
90
+ background-color: rgba(255, 255, 255, 0.95);
91
+ backdrop-filter: blur(10px);
92
+ -webkit-backdrop-filter: blur(10px);
93
+ padding: 1rem;
94
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
95
+ z-index: 50;
96
+ }
97
+
98
+ .mobile-menu ul {
99
+ list-style: none;
100
+ padding: 0;
101
+ margin: 0;
102
+ }
103
+
104
+ .mobile-menu li {
105
+ padding: 0.5rem 0;
106
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
107
+ }
108
+
109
+ .mobile-menu a {
110
+ display: block;
111
+ width: 100%;
112
+ padding: 0.5rem;
113
+ text-align: center;
114
+ color: #374151;
115
+ font-weight: 500;
116
+ }
117
+
118
+ .mobile-menu a:hover {
119
+ color: #7B61FF;
120
+ }
121
+
122
+ .download-btn {
123
+ transition: all 0.3s ease;
124
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
125
+ }
126
+
127
+ .download-btn:hover {
128
+ transform: translateY(-2px);
129
+ box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
130
+ }
131
+
132
+ .download-btn i {
133
+ transition: transform 0.3s ease;
134
+ }
135
+
136
+ .download-btn:hover i {
137
+ transform: scale(1.1);
138
+ }
139
+
140
+ .platform-card {
141
+ transition: all 0.3s ease;
142
+ border: 2px solid transparent;
143
+ }
144
+
145
+ .platform-card:hover {
146
+ border-color: #7B61FF;
147
+ transform: translateY(-5px);
148
+ }
149
+
150
+ .qr-code {
151
+ transition: all 0.3s ease;
152
+ }
153
+
154
+ .qr-code:hover {
155
+ transform: scale(1.05);
156
+ }
157
+
158
+ .feature-badge {
159
+ position: absolute;
160
+ top: -10px;
161
+ right: -10px;
162
+ background: linear-gradient(135deg, #7B61FF, #00A3FF);
163
+ color: white;
164
+ border-radius: 50%;
165
+ width: 24px;
166
+ height: 24px;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ font-size: 12px;
171
+ font-weight: bold;
172
+ }
173
+
174
+ .download-section {
175
+ background: linear-gradient(135deg, rgba(165, 140, 213, 0.1) 0%, rgba(106, 87, 141, 0.1) 100%);
176
+ }
177
+ </style>
178
+ </head>
179
+
180
+ <body class="antialiased">
181
+ <!-- Navigation -->
182
+ <nav class="navbar py-4 sticky top-0 z-50">
183
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
184
+ <div class="flex justify-between items-center">
185
+ <div class="flex items-center">
186
+ <div class="flex-shrink-0 flex items-center">
187
+ <i class="fas fa-music text-purple-500 text-3xl mr-2"></i>
188
+ <span class="text-xl font-bold text-gray-900">Fuwalo</span>
189
+ </div>
190
+ </div>
191
+ <div class="hidden md:block">
192
+ <div class="ml-10 flex items-center space-x-4">
193
+ <a href="#features"
194
+ class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Features</a>
195
+ <a href="#screenshots"
196
+ class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Screenshots</a>
197
+ <a href="#download"
198
+ class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Download</a>
199
+ <a href="#community"
200
+ class="text-gray-700 hover:text-purple-500 px-3 py-2 rounded-md text-sm font-medium">Community</a>
201
+ </div>
202
+ </div>
203
+ <div class="md:hidden">
204
+ <button type="button"
205
+ class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-purple-500 focus:outline-none"
206
+ aria-controls="mobile-menu" aria-expanded="false">
207
+ <i class="fas fa-bars"></i>
208
+ </button>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Mobile Menu -->
213
+ <div class="mobile-menu" id="mobile-menu">
214
+ <ul>
215
+ <li><a href="#features">Features</a></li>
216
+ <li><a href="#screenshots">Screenshots</a></li>
217
+ <li><a href="#download">Download</a></li>
218
+ <li><a href="#community">Community</a></li>
219
+ <li>
220
+ <a href="https://discord.gg/vPjNSTeVVk"
221
+ class="bg-discord text-white px-4 py-2 rounded-md inline-block">
222
+ <i class="fab fa-discord mr-2"></i>Join Discord
223
+ </a>
224
+ </li>
225
+ </ul>
226
+ </div>
227
+ </div>
228
+ </nav>
229
+
230
+ <!-- Hero Section -->
231
+ <section class="hero-gradient pt-32 pb-24">
232
+ <div class="max-w-7xl mx-auto px-6">
233
+ <div class="flex flex-col md:flex-row items-center gap-12">
234
+ <div class="md:w-1/2 space-y-8 text-center md:text-left">
235
+ <h1 class="text-5xl md:text-6xl font-bold text-white">
236
+ Fuwalo Beta <br>
237
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-white to-blue-100">Now Available!</span>
238
+ </h1>
239
+ <p class="text-xl text-white opacity-90">Experience the future of piano learning and multiplayer fun. Download the beta now and be among the first to play!</p>
240
+
241
+ <div class="flex flex-col sm:flex-row gap-4">
242
+ <a href="#download" class="bg-white text-purple-600 px-8 py-4 rounded-full font-semibold hover:bg-opacity-95 shadow-lg transition-all duration-300 transform hover:scale-105">
243
+ <i class="fas fa-download mr-2"></i> Download Now
244
+ </a>
245
+ <a href="https://discord.gg/vPjNSTeVVk" class="bg-discord text-white px-8 py-4 rounded-full font-semibold hover:bg-opacity-95 shadow-lg transition-all duration-300 transform hover:scale-105">
246
+ <i class="fab fa-discord mr-2"></i> Join Our Discord
247
+ </a>
248
+ </div>
249
+ </div>
250
+
251
+ <div class="md:w-1/2">
252
+ <img src="https://i.ibb.co/1GQvPYfG/Frame.png"
253
+ class="floating-img w-full max-w-xl rounded-2xl shadow-2xl transform rotate-3">
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </section>
258
+
259
+ <!-- Features Section -->
260
+ <section id="features" class="py-20 bg-white">
261
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
262
+ <div class="text-center mb-16">
263
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Why You'll Love Fuwalo</h2>
264
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">A revolutionary way to experience piano, whether you're a beginner or a seasoned player.</p>
265
+ </div>
266
+
267
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
268
+ <!-- Feature 1 -->
269
+ <div
270
+ class="bg-gradient-to-br from-softpink to-lightlavender rounded-2xl p-8 transition-all duration-300 card-hover relative">
271
+ <div class="feature-badge">NEW</div>
272
+ <div class="bg-purple-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
273
+ <i class="fas fa-graduation-cap text-purple-600 text-2xl"></i>
274
+ </div>
275
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Interactive Lessons</h3>
276
+ <p class="text-gray-600">From basics to advanced techniques with our interactive lessons and real-time feedback.</p>
277
+ </div>
278
+
279
+ <!-- Feature 2 -->
280
+ <div
281
+ class="bg-gradient-to-br from-lightlavender to-mutedmauve rounded-2xl p-8 transition-all duration-300 card-hover relative">
282
+ <div class="feature-badge">BETA</div>
283
+ <div class="bg-blue-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
284
+ <i class="fas fa-music text-blue-600 text-2xl"></i>
285
+ </div>
286
+ <h3 class="text-xl font-bold text-gray-900 mb-3">MIDI Playback</h3>
287
+ <p class="text-gray-600">Play MIDI files with our high-quality piano sound engine.</p>
288
+ </div>
289
+
290
+ <!-- Feature 3 -->
291
+ <div
292
+ class="bg-gradient-to-br from-mutedmauve to-mediumpurple rounded-2xl p-8 transition-all duration-300 card-hover">
293
+ <div class="bg-pink-100 w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
294
+ <i class="fas fa-gamepad text-pink-600 text-2xl"></i>
295
+ </div>
296
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Mini-Games</h3>
297
+ <p class="text-gray-600">Fun challenges and games to improve your skills while having a blast.</p>
298
+ </div>
299
+
300
+ <!-- Feature 4 -->
301
+ <div
302
+ class="bg-gradient-to-br from-mediumpurple to-softpink rounded-2xl p-8 transition-all duration-300 card-hover">
303
+ <div class="bg-gradient-to-r from-purple-200 to-pink-200 w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
304
+ <i class="fas fa-share-alt text-purple-600 text-2xl"></i>
305
+ </div>
306
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Record & Share</h3>
307
+ <p class="text-gray-600">Capture your performances and share them with the Fuwalo community.</p>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </section>
312
+
313
+ <!-- Screenshot Gallery -->
314
+ <section id="screenshots" class="py-20 bg-gray-50">
315
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
316
+ <div class="text-center mb-16">
317
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">App Screenshots</h2>
318
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Take a peek at what Fuwalo looks like.</p>
319
+ </div>
320
+
321
+ <div class="relative overflow-hidden">
322
+ <div class="flex transition-transform duration-300" id="carousel">
323
+ <div class="carousel-item flex-shrink-0 w-full">
324
+ <div class="flex flex-col md:flex-row items-center justify-center gap-8">
325
+ <img src="https://i.ibb.co/R44mWst9/Screenshot-2025-06-08-194205.png" alt="Lesson Screen" class="screenshot w-64">
326
+ <img src="https://i.ibb.co/9kLXgc0T/Screenshot-2025-06-08-002030.png" alt="Multiplayer Screen" class="screenshot w-64">
327
+ <img src="https://i.ibb.co/1GQvPYfG/Frame.png" alt="Profile Screen" class="screenshot w-64">
328
+ </div>
329
+ </div>
330
+ <div class="carousel-item flex-shrink-0 w-full">
331
+ <div class="flex flex-col md:flex-row items-center justify-center gap-8">
332
+ <img src="https://i.ibb.co/kVvPtVD0/62519b4d-51f5-469d-8816-5dc34232f96d.png"
333
+ alt="Game Mode" class="screenshot w-64">
334
+ <img src="https://i.ibb.co/bgBpqqpm/Capture.png" alt="Song Library" class="screenshot w-64">
335
+ <img src="https://i.ibb.co/0RKZ6YLk/raw.png" alt="Settings" class="screenshot w-64">
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <button id="prevBtn"
341
+ class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-md">
342
+ <i class="fas fa-chevron-left text-gray-700"></i>
343
+ </button>
344
+ <button id="nextBtn"
345
+ class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full p-3 shadow-md">
346
+ <i class="fas fa-chevron-right text-gray-700"></i>
347
+ </button>
348
+
349
+ <div class="flex justify-center mt-6 space-x-2">
350
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400"
351
+ data-index="0"></button>
352
+ <button class="carousel-indicator w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400"
353
+ data-index="1"></button>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <!-- Download Section -->
360
+ <section id="download" class="py-20 download-section">
361
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
362
+ <div class="text-center mb-16">
363
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Download Fuwalo Beta</h2>
364
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Get early access to all features and help shape the future of Fuwalo!</p>
365
+ </div>
366
+
367
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
368
+ <!-- Android Download -->
369
+ <div class="bg-white rounded-2xl p-8 shadow-lg platform-card">
370
+ <div class="flex flex-col md:flex-row items-center gap-8">
371
+ <div class="text-center md:text-left">
372
+ <div class="bg-green-100 w-20 h-20 rounded-2xl flex items-center justify-center mb-6 mx-auto md:mx-0">
373
+ <i class="fab fa-android text-green-600 text-3xl"></i>
374
+ </div>
375
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">Android</h3>
376
+ <p class="text-gray-600 mb-6">Minimum requirement: Android 8.0+</p>
377
+ <a href="https://example.com/fuwalo-beta.apk" download
378
+ class="download-btn bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full inline-flex items-center">
379
+ <i class="fas fa-download mr-2"></i> Download APK (45MB)
380
+ </a>
381
+ </div>
382
+ <div class="qr-code bg-white p-4 rounded-lg shadow-md">
383
+ <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://example.com/fuwalo-beta.apk"
384
+ alt="Android Download QR Code" class="w-32 h-32">
385
+ <p class="text-xs text-gray-500 mt-2">Scan to download</p>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- iOS Download -->
391
+ <div class="bg-white rounded-2xl p-8 shadow-lg platform-card">
392
+ <div class="flex flex-col md:flex-row items-center gap-8">
393
+ <div class="text-center md:text-left">
394
+ <div class="bg-blue-100 w-20 h-20 rounded-2xl flex items-center justify-center mb-6 mx-auto md:mx-0">
395
+ <i class="fab fa-apple text-blue-600 text-3xl"></i>
396
+ </div>
397
+ <h3 class="text-2xl font-bold text-gray-900 mb-2">iOS</h3>
398
+ <p class="text-gray-600 mb-6">Requires iOS 14.0+</p>
399
+ <div class="space-y-3">
400
+ <button disabled
401
+ class="download-btn bg-gray-400 cursor-not-allowed text-white font-bold py-3 px-6 rounded-full inline-flex items-center">
402
+ <i class="fas fa-mobile-alt mr-2"></i> iOS Version Coming Soon
403
+ </button>
404
+ <p class="text-xs text-gray-500">Currently unavailable - check back later!</p>
405
+ </div>
406
+ </div>
407
+ <div class="qr-code bg-white p-4 rounded-lg shadow-md">
408
+ <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=itms-services://?action=download-manifest&url=https://example.com/fuwalo-beta.plist"
409
+ alt="iOS Download QR Code" class="w-32 h-32">
410
+ <p class="text-xs text-gray-500 mt-2">Scan to install</p>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <!-- Installation Instructions -->
417
+ <div class="mt-16 bg-white rounded-2xl p-8 shadow-lg">
418
+ <h3 class="text-2xl font-bold text-gray-900 mb-6 text-center">Installation Guide</h3>
419
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
420
+ <div>
421
+ <h4 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
422
+ <span class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span>
423
+ Android Instructions
424
+ </h4>
425
+ <ol class="list-decimal list-inside text-gray-600 space-y-2 pl-4">
426
+ <li>Download the APK file</li>
427
+ <li>Open the downloaded file</li>
428
+ <li>If prompted, allow installation from unknown sources</li>
429
+ <li>Follow the on-screen instructions</li>
430
+ <li>Open Fuwalo and enjoy!</li>
431
+ </ol>
432
+ </div>
433
+ <div>
434
+ <h4 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
435
+ <span class="bg-gray-100 text-gray-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span>
436
+ iOS Coming Soon
437
+ </h4>
438
+ <p class="text-gray-600">
439
+ We're working hard to bring Fuwalo to iOS users.
440
+ Check back soon or join our Discord for updates!
441
+ </p>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </section>
447
+
448
+ <!-- Beta Features -->
449
+ <section class="py-20 bg-white">
450
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
451
+ <div class="text-center mb-16">
452
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">What's in the Beta?</h2>
453
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Experience these exciting features right now</p>
454
+ </div>
455
+
456
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
457
+ <div class="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-8 transition-all duration-300 card-hover">
458
+ <div class="flex items-center mb-4">
459
+ <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
460
+ <i class="fas fa-check"></i>
461
+ </div>
462
+ <h3 class="text-xl font-bold text-gray-900">MIDI Playback</h3>
463
+ </div>
464
+ <p class="text-gray-600">Play MIDI files with our high-quality piano sound engine.</p>
465
+ </div>
466
+
467
+ <div class="bg-gradient-to-br from-blue-50 to-pink-50 rounded-2xl p-8 transition-all duration-300 card-hover">
468
+ <div class="flex items-center mb-4">
469
+ <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
470
+ <i class="fas fa-check"></i>
471
+ </div>
472
+ <h3 class="text-xl font-bold text-gray-900">Song Upload</h3>
473
+ </div>
474
+ <p class="text-gray-600">Upload your own MIDI files from device or online sources.</p>
475
+ </div>
476
+
477
+ <div class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-2xl p-8 transition-all duration-300 card-hover">
478
+ <div class="flex items-center mb-4">
479
+ <div class="bg-pink-100 text-pink-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
480
+ <i class="fas fa-check"></i>
481
+ </div>
482
+ <h3 class="text-xl font-bold text-gray-900">Falling Notes</h3>
483
+ </div>
484
+ <p class="text-gray-600">Learn with visual falling notes piano tutorial system.</p>
485
+ </div>
486
+
487
+ <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8 transition-all duration-300 card-hover">
488
+ <div class="flex items-center mb-4">
489
+ <div class="bg-purple-100 text-purple-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
490
+ <i class="fas fa-check"></i>
491
+ </div>
492
+ <h3 class="text-xl font-bold text-gray-900">Virtual Piano</h3>
493
+ </div>
494
+ <p class="text-gray-600">Full 88-key piano with velocity-sensitive touch response.</p>
495
+ </div>
496
+
497
+ <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl p-8 transition-all duration-300 card-hover">
498
+ <div class="flex items-center mb-4">
499
+ <div class="bg-blue-100 text-blue-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
500
+ <i class="fas fa-check"></i>
501
+ </div>
502
+ <h3 class="text-xl font-bold text-gray-900">Local Storage</h3>
503
+ </div>
504
+ <p class="text-gray-600">Save and organize your favorite songs locally.</p>
505
+ </div>
506
+
507
+ <div class="bg-gradient-to-br from-pink-50 to-blue-50 rounded-2xl p-8 transition-all duration-300 card-hover">
508
+ <div class="flex items-center mb-4">
509
+ <div class="bg-pink-100 text-pink-600 rounded-full w-10 h-10 flex items-center justify-center mr-4">
510
+ <i class="fas fa-check"></i>
511
+ </div>
512
+ <h3 class="text-xl font-bold text-gray-900">Feedback System</h3>
513
+ </div>
514
+ <p class="text-gray-600">Directly influence future updates with your feedback.</p>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </section>
519
+
520
+ <!-- Join the Community -->
521
+ <section id="community" class="py-20" style="background: linear-gradient(135deg, #6A578D 0%, #B29CBF 100%);">
522
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
523
+ <div class="text-center mb-16">
524
+ <h2 class="text-3xl font-bold text-white mb-4">Join Our Community</h2>
525
+ <p class="text-xl text-white opacity-90 max-w-3xl mx-auto">Connect with other piano enthusiasts, get updates, and share your progress.</p>
526
+ </div>
527
+
528
+ <div class="flex flex-col md:flex-row items-center justify-center gap-8">
529
+ <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl p-8 w-full max-w-md">
530
+ <h3 class="text-xl font-bold text-white mb-6">Stay Updated</h3>
531
+ <p class="text-white opacity-90 mb-6">Enter your email to get notified about updates and receive exclusive content.</p>
532
+
533
+ <form class="flex">
534
+ <input type="email" placeholder="Your email address"
535
+ class="flex-grow px-4 py-3 rounded-l-full focus:outline-none">
536
+ <button
537
+ class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-bold px-6 py-3 rounded-r-full">
538
+ Subscribe
539
+ </button>
540
+ </form>
541
+ </div>
542
+
543
+ <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl p-8 w-full max-w-md">
544
+ <h3 class="text-xl font-bold text-white mb-6">Connect With Us</h3>
545
+ <p class="text-white opacity-90 mb-6">Join our Discord server or follow us on social media.</p>
546
+
547
+ <div class="flex justify-center space-x-6">
548
+ <a href="https://discord.gg/vPjNSTeVVk" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white">
549
+ <i class="fab fa-discord text-xl"></i>
550
+ </a>
551
+ <a href="#" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white">
552
+ <i class="fab fa-twitter text-xl"></i>
553
+ </a>
554
+ <a href="#" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white">
555
+ <i class="fab fa-instagram text-xl"></i>
556
+ </a>
557
+ <a href="#" class="bg-white bg-opacity-30 hover:bg-opacity-40 rounded-full p-3 text-white">
558
+ <i class="fab fa-youtube text-xl"></i>
559
+ </a>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </section>
565
+
566
+ <!-- Footer -->
567
+ <footer class="bg-deeppurple text-white py-12">
568
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
569
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
570
+ <div class="md:col-span-2">
571
+ <div class="flex items-center mb-4">
572
+ <i class="fas fa-music text-purple-400 text-2xl mr-2"></i>
573
+ <span class="text-xl font-bold">Fuwalo</span>
574
+ </div>
575
+ <p class="text-gray-400 mb-4">Your piano playground for learning, playing, and connecting with music lovers worldwide.</p>
576
+ <div class="flex space-x-4">
577
+ <a href="/blog" class="text-gray-400 hover:text-white">
578
+ <i class="fab fa-facebook-f"></i>
579
+ </a>
580
+ <a href="https://x.com/fuwalo_ai" class="text-gray-400 hover:text-white">
581
+ <i class="fab fa-twitter"></i>
582
+ </a>
583
+ <a href="#" class="text-gray-400 hover:text-white">
584
+ <i class="fab fa-instagram"></i>
585
+ </a>
586
+ <a href="https://discord.gg/xDeDbSNDhq" class="text-gray-400 hover:text-white">
587
+ <i class="fab fa-discord"></i>
588
+ </a>
589
+ </div>
590
+ </div>
591
+
592
+ <div>
593
+ <h3 class="text-white font-semibold mb-4">Product</h3>
594
+ <ul class="space-y-2">
595
+ <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li>
596
+ <li><a href="#download" class="text-gray-400 hover:text-white">Download</a></li>
597
+ <li><a href="#screenshots" class="text-gray-400 hover:text-white">Screenshots</a></li>
598
+ <li><a href="#" class="text-gray-400 hover:text-white">Roadmap</a></li>
599
+ </ul>
600
+ </div>
601
+
602
+ <div>
603
+ <h3 class="text-white font-semibold mb-4">Company</h3>
604
+ <ul class="space-y-2">
605
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
606
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
607
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
608
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
609
+ </ul>
610
+ </div>
611
+
612
+ <div>
613
+ <h3 class="text-white font-semibold mb-4">Legal</h3>
614
+ <ul class="space-y-2">
615
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
616
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
617
+ <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li>
618
+ </ul>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
623
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Fuwalo. All rights reserved.</p>
624
+ <div class="flex space-x-6">
625
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Privacy</a>
626
+ <a href="#" class="text-gray-400 hover:text-white text-sm">Terms</a>
627
+ <a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a>
628
+ </div>
629
+ </div>
630
+ </div>
631
+ </footer>
632
+
633
+ <script>
634
+ // Carousel
635
+ let currentSlide = 0;
636
+ const slides = document.querySelectorAll('.carousel-item');
637
+ const indicators = document.querySelectorAll('.carousel-indicator');
638
+
639
+ function goToSlide(index) {
640
+ currentSlide = index;
641
+ const offset = -currentSlide * 100;
642
+ document.getElementById('carousel').style.transform = `translateX(${offset}%)`;
643
+
644
+ indicators.forEach((indicator, i) => {
645
+ if (i === currentSlide) {
646
+ indicator.classList.add('bg-gray-600');
647
+ indicator.classList.remove('bg-gray-300');
648
+ } else {
649
+ indicator.classList.add('bg-gray-300');
650
+ indicator.classList.remove('bg-gray-600');
651
+ }
652
+ });
653
+ }
654
+
655
+ document.getElementById('nextBtn').addEventListener('click', () => {
656
+ currentSlide = (currentSlide + 1) % slides.length;
657
+ goToSlide(currentSlide);
658
+ });
659
+
660
+ document.getElementById('prevBtn').addEventListener('click', () => {
661
+ currentSlide = (currentSlide - 1 + slides.length) % slides.length;
662
+ goToSlide(currentSlide);
663
+ });
664
+
665
+ indicators.forEach(indicator => {
666
+ indicator.addEventListener('click', () => {
667
+ goToSlide(parseInt(indicator.dataset.index));
668
+ });
669
+ });
670
+
671
+ // Set first indicator as active initially
672
+ indicators[0].classList.add('bg-gray-600');
673
+ indicators[0].classList.remove('bg-gray-300');
674
+
675
+ // Mobile Menu Toggle
676
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
677
+ const mobileMenu = document.getElementById('mobile-menu');
678
+
679
+ mobileMenuButton.addEventListener('click', () => {
680
+ const expanded = mobileMenuButton.getAttribute('aria-expanded') === 'true' || false;
681
+ mobileMenuButton.setAttribute('aria-expanded', !expanded);
682
+ mobileMenu.classList.toggle('active');
683
+ });
684
+
685
+ // Smooth scrolling for anchor links
686
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
687
+ anchor.addEventListener('click', function (e) {
688
+ e.preventDefault();
689
+
690
+ const targetId = this.getAttribute('href');
691
+ if (targetId === '#') return;
692
+
693
+ const targetElement = document.querySelector(targetId);
694
+ if (targetElement) {
695
+ targetElement.scrollIntoView({
696
+ behavior: 'smooth'
697
+ });
698
+
699
+ // Close mobile menu if open
700
+ if (mobileMenu.classList.contains('active')) {
701
+ mobileMenu.classList.remove('active');
702
+ mobileMenuButton.setAttribute('aria-expanded', 'false');
703
+ }
704
+ }
705
+ });
706
+ });
707
+ </script>
708
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hygee/fuw" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
709
+
710
+ </html>