Hugging Face's logo

Spaces:
iyeque
/
mangoma
Running

App Files Community
iyeque commited on
Commit
bc48136
·
verified ·
1 Parent(s): 1856b6c

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +385 -490
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mangoma | AI Lo-Fi Music Generator</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>
@@ -19,136 +19,124 @@
19
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
20
  }
21
 
22
- .music-visualizer {
 
23
  position: relative;
24
- height: 100px;
25
- width: 100%;
26
  overflow: hidden;
27
- border-radius: 12px;
28
- }
29
-
30
- .bar {
31
- position: absolute;
32
- bottom: 0;
33
- width: 8px;
34
- background: linear-gradient(to top, #00b4d8, #90e0ef);
35
- border-radius: 4px;
36
- animation: equalize 1.5s infinite ease-in-out;
37
- transform-origin: bottom;
38
  }
39
 
40
- @keyframes equalize {
41
- 0%, 100% { transform: scaleY(0.3); }
42
- 50% { transform: scaleY(1); }
43
  }
44
 
45
- .progress-bar {
46
- height: 6px;
47
- background-color: rgba(255, 255, 255, 0.2);
48
- border-radius: 3px;
49
- overflow: hidden;
50
- }
51
-
52
- .progress-fill {
53
- height: 100%;
54
- background: linear-gradient(to right, #00b4d8, #90e0ef);
55
- border-radius: 3px;
56
- transition: width 0.3s ease;
57
- }
58
-
59
- .genre-chip {
60
- transition: all 0.3s ease;
61
- }
62
-
63
- .genre-chip:hover {
64
- transform: translateY(-2px);
65
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
66
  }
67
 
68
- .control-btn {
69
- transition: all 0.2s ease;
 
70
  }
71
 
72
- .control-btn:hover {
73
- transform: scale(1.1);
 
 
 
 
 
 
 
 
74
  }
75
 
76
- .waveform {
77
- position: relative;
78
- height: 80px;
79
- width: 100%;
80
- overflow: hidden;
 
81
  }
82
 
83
- .waveform-line {
84
- position: absolute;
85
- bottom: 50%;
86
- width: 100%;
87
- height: 2px;
88
  background-color: rgba(255, 255, 255, 0.1);
 
 
 
 
 
 
89
  }
90
 
91
- .waveform-peak {
92
- position: absolute;
93
- bottom: 50%;
94
- width: 3px;
95
- background: linear-gradient(to top, #00b4d8, #90e0ef);
96
- border-radius: 2px;
97
- transform-origin: bottom;
98
  }
99
 
100
- .text-input {
101
- min-height: 150px;
102
- background-color: rgba(255, 255, 255, 0.05);
103
- border: 1px solid rgba(255, 255, 255, 0.1);
104
- transition: all 0.3s ease;
105
  }
106
 
107
- .text-input:focus {
108
- background-color: rgba(255, 255, 255, 0.08);
109
- border-color: #00b4d8;
110
- outline: none;
111
  }
112
 
113
- .emotion-indicator {
114
- width: 24px;
115
- height: 24px;
116
- border-radius: 50%;
117
- display: inline-block;
118
- margin-right: 8px;
119
  }
120
 
121
- .loading-pulse {
122
- animation: pulse 1.5s infinite ease-in-out;
 
 
123
  }
124
 
125
- @keyframes pulse {
126
- 0%, 100% { opacity: 0.5; }
127
- 50% { opacity: 1; }
 
128
  }
129
 
130
- .lofi-room {
131
  background-image: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
132
  background-size: cover;
133
  background-position: center;
134
- border-radius: 12px;
 
 
 
 
 
 
 
 
 
135
  position: relative;
136
- overflow: hidden;
137
  }
138
 
139
- .lofi-room::before {
140
  content: '';
141
  position: absolute;
142
- top: 0;
143
  left: 0;
144
- right: 0;
145
- bottom: 0;
146
- background: rgba(0, 0, 0, 0.5);
147
- }
148
-
149
- .lofi-elements {
150
- position: relative;
151
- z-index: 1;
152
  }
153
  </style>
154
  </head>
@@ -160,278 +148,330 @@
160
  <span class="text-xl font-bold">Mangoma</span>
161
  </div>
162
  <div class="hidden md:flex space-x-6">
163
- <a href="#" class="hover:text-cyan-400 transition">Home</a>
164
- <a href="#" class="hover:text-cyan-400 transition">Lo-Fi Styles</a>
165
- <a href="#" class="hover:text-cyan-400 transition">Examples</a>
166
- <a href="#" class="hover:text-cyan-400 transition">Pricing</a>
167
  </div>
168
  <div class="flex items-center space-x-4">
169
- <button class="px-4 py-2 rounded-full bg-transparent border border-cyan-400 text-cyan-400 hover:bg-cyan-400 hover:text-white transition">
170
- Login
171
- </button>
172
  <button class="px-4 py-2 rounded-full bg-cyan-400 text-white hover:bg-cyan-500 transition">
173
- Sign Up
174
  </button>
175
  </div>
176
  </nav>
177
 
178
  <!-- Hero Section -->
179
  <section class="container mx-auto px-6 py-16 text-center">
180
- <h1 class="text-5xl md:text-6xl font-bold mb-6">Describe Your <span class="text-cyan-400">Lo-Fi Beat</span></h1>
181
  <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
182
- Mangoma transforms your description into custom lo-fi instrumental music perfect for studying, relaxing, or creative work.
183
  </p>
184
- <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
185
- <button class="px-8 py-4 rounded-full bg-cyan-400 text-white text-lg font-semibold hover:bg-cyan-500 transition flex items-center">
186
- <i class="fas fa-magic mr-2"></i> Generate Lo-Fi Now
187
- </button>
188
- <button class="px-8 py-4 rounded-full bg-transparent border border-white text-white text-lg font-semibold hover:bg-white hover:text-gray-900 transition flex items-center">
189
- <i class="fas fa-headphones mr-2"></i> Browse Lo-Fi Library
190
- </button>
191
  </div>
192
  </section>
193
 
194
- <!-- Text to Lo-Fi Generator Section -->
195
  <section class="container mx-auto px-6 py-12">
196
- <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-2xl p-8 shadow-xl">
197
- <h2 class="text-3xl font-bold mb-8 text-center">Lo-Fi Music Generator</h2>
198
-
199
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
200
- <!-- Input Panel -->
201
- <div class="lg:col-span-1 bg-gray-800 bg-opacity-50 rounded-xl p-6">
202
- <h3 class="text-xl font-semibold mb-4">Describe Your Beat</h3>
203
-
204
- <div class="mb-6">
205
- <textarea class="text-input w-full p-4 rounded-lg text-white" placeholder="Example: A chill lo-fi beat with soft piano chords, vinyl crackle, and a relaxed drum groove with light hi-hats..."></textarea>
206
- </div>
207
-
208
- <div class="mb-6">
209
- <label class="block text-gray-300 mb-2">Vibe</label>
210
- <div class="flex items-center">
211
- <span class="emotion-indicator bg-yellow-400"></span>
212
- <span>Chill</span>
 
213
  </div>
214
- </div>
215
-
216
- <div class="mb-6">
217
- <label class="block text-gray-300 mb-2">Lo-Fi Style</label>
218
- <div class="flex flex-wrap gap-2">
219
- <span class="genre-chip px-4 py-2 rounded-full bg-cyan-400 text-white cursor-pointer">Study</span>
220
- <span class="genre-chip px-4 py-2 rounded-full bg-gray-700 text-white cursor-pointer">Jazzy</span>
221
- <span class="genre-chip px-4 py-2 rounded-full bg-gray-700 text-white cursor-pointer">Ambient</span>
222
- <span class="genre-chip px-4 py-2 rounded-full bg-gray-700 text-white cursor-pointer">Rainy</span>
223
- <span class="genre-chip px-4 py-2 rounded-full bg-gray-700 text-white cursor-pointer">Night</span>
224
  </div>
225
  </div>
226
-
227
- <div class="mb-6">
228
- <label class="block text-gray-300 mb-2">BPM</label>
229
- <input type="range" min="60" max="120" value="85" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
230
- <div class="flex justify-between text-sm text-gray-400 mt-1">
231
- <span>60</span>
232
- <span>90</span>
233
- <span>120</span>
 
 
 
 
 
 
 
 
234
  </div>
235
- </div>
236
-
237
- <div class="mb-6 lofi-room p-4 h-40 flex items-center justify-center lofi-elements">
238
- <div class="text-center">
239
- <i class="fas fa-headphones text-4xl text-cyan-400 mb-2"></i>
240
- <p class="text-white">Your Lo-Fi Studio</p>
241
  </div>
242
  </div>
243
-
244
- <button id="generate-btn" class="w-full py-3 rounded-lg bg-cyan-400 text-white font-semibold hover:bg-cyan-500 transition flex items-center justify-center">
245
- <i class="fas fa-magic mr-2"></i> Generate Lo-Fi
246
- </button>
247
  </div>
248
 
249
- <!-- Visualizer and Player -->
250
- <div class="lg:col-span-2">
251
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 h-full flex flex-col">
252
- <div class="flex-1">
253
- <h3 class="text-xl font-semibold mb-4">Lo-Fi Preview</h3>
254
-
255
- <div id="loading-state" class="hidden flex flex-col items-center justify-center h-64">
256
- <div class="w-16 h-16 rounded-full bg-cyan-400 flex items-center justify-center mb-4 loading-pulse">
257
- <i class="fas fa-headphones text-white text-2xl"></i>
258
- </div>
259
- <p class="text-gray-300">Crafting your custom lo-fi beat...</p>
260
- <p class="text-sm text-gray-500 mt-2">Adding vinyl crackle and chill vibes</p>
261
- </div>
262
-
263
- <div id="music-preview">
264
- <div class="music-visualizer mb-6" id="visualizer">
265
- <!-- Bars will be added by JavaScript -->
266
- </div>
267
-
268
- <div class="waveform mb-4">
269
- <div class="waveform-line"></div>
270
- <!-- Waveform peaks will be added by JavaScript -->
271
- </div>
272
-
273
- <div class="progress-bar mb-4">
274
- <div class="progress-fill" style="width: 0%"></div>
275
- </div>
276
-
277
- <div class="flex justify-between text-sm text-gray-400 mb-6">
278
- <span>0:00</span>
279
- <span>2:30</span>
280
- </div>
281
-
282
- <div class="mb-6">
283
- <h4 class="text-lg font-semibold mb-2">Generated Title</h4>
284
- <p class="text-gray-300">"Midnight Study Session"</p>
285
- </div>
286
-
287
- <div>
288
- <h4 class="text-lg font-semibold mb-2">Instrumentation</h4>
289
- <div class="flex flex-wrap gap-2">
290
- <span class="px-3 py-1 rounded-full bg-gray-700 text-white text-sm">Rhodes Piano</span>
291
- <span class="px-3 py-1 rounded-full bg-gray-700 text-white text-sm">Vinyl Crackle</span>
292
- <span class="px-3 py-1 rounded-full bg-gray-700 text-white text-sm">Jazz Drum Kit</span>
293
- <span class="px-3 py-1 rounded-full bg-gray-700 text-white text-sm">Warm Bass</span>
294
- <span class="px-3 py-1 rounded-full bg-gray-700 text-white text-sm">85 BPM</span>
295
- </div>
296
- </div>
297
  </div>
298
  </div>
299
-
300
- <div class="mt-auto pt-6">
301
- <div class="flex justify-center items-center space-x-8">
302
- <button class="control-btn text-gray-400 hover:text-white text-2xl">
303
- <i class="fas fa-step-backward"></i>
304
- </button>
305
- <button class="control-btn bg-cyan-400 text-white rounded-full w-16 h-16 flex items-center justify-center hover:bg-cyan-500">
306
- <i class="fas fa-play text-2xl"></i>
307
- </button>
308
- <button class="control-btn text-gray-400 hover:text-white text-2xl">
309
- <i class="fas fa-step-forward"></i>
310
- </button>
311
- </div>
312
-
313
- <div class="flex justify-between items-center mt-6">
314
- <button class="text-gray-400 hover:text-white">
315
- <i class="fas fa-volume-up"></i>
316
- </button>
317
- <div class="flex space-x-4">
318
- <button class="text-gray-400 hover:text-white">
319
- <i class="fas fa-heart"></i>
320
- </button>
321
- <button class="text-gray-400 hover:text-white">
322
- <i class="fas fa-download"></i>
323
- </button>
324
- <button class="text-gray-400 hover:text-white">
325
- <i class="fas fa-share-alt"></i>
326
- </button>
327
- </div>
328
  </div>
329
  </div>
 
 
 
 
 
330
  </div>
331
  </div>
332
  </div>
333
  </div>
334
- </section>
335
-
336
- <!-- How It Works Section -->
337
- <section class="container mx-auto px-6 py-16">
338
- <h2 class="text-3xl font-bold mb-12 text-center">Create Perfect Lo-Fi Beats</h2>
339
 
340
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
341
- <div class="text-center">
342
- <div class="w-20 h-20 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
343
- <i class="fas fa-keyboard text-2xl text-cyan-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
344
  </div>
345
- <h3 class="text-xl font-semibold mb-2">1. Describe Your Beat</h3>
346
- <p class="text-gray-300">
347
- Tell us about the instruments, mood, and tempo you want in your lo-fi track.
348
- </p>
349
- </div>
350
-
351
- <div class="text-center">
352
- <div class="w-20 h-20 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
353
- <i class="fas fa-brain text-2xl text-cyan-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
354
  </div>
355
- <h3 class="text-xl font-semibold mb-2">2. AI Composes</h3>
356
- <p class="text-gray-300">
357
- Our AI analyzes your description and creates matching chord progressions and grooves.
358
- </p>
359
- </div>
360
-
361
- <div class="text-center">
362
- <div class="w-20 h-20 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
363
- <i class="fas fa-headphones text-2xl text-cyan-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
364
  </div>
365
- <h3 class="text-xl font-semibold mb-2">3. Add Lo-Fi Effects</h3>
366
- <p class="text-gray-300">
367
- We apply vinyl crackle, tape saturation, and other lo-fi processing automatically.
368
- </p>
369
  </div>
370
  </div>
 
 
 
 
 
 
371
  </section>
372
 
373
- <!-- Lo-Fi Styles Section -->
374
  <section class="container mx-auto px-6 py-16">
375
- <h2 class="text-3xl font-bold mb-12 text-center">Popular Lo-Fi Styles</h2>
376
-
377
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
378
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
379
- <div class="w-16 h-16 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
380
- <i class="fas fa-book text-xl text-cyan-400"></i>
381
- </div>
382
- <h3 class="text-xl font-semibold mb-2 text-center">Study Focus</h3>
383
- <p class="text-gray-300 text-center">
384
- Minimal beats with soft piano and gentle rhythms to help you concentrate.
385
- </p>
386
- </div>
387
 
388
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
389
- <div class="w-16 h-16 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
390
- <i class="fas fa-umbrella text-xl text-cyan-400"></i>
391
- </div>
392
- <h3 class="text-xl font-semibold mb-2 text-center">Rainy Day</h3>
393
- <p class="text-gray-300 text-center">
394
- Ambient textures with rain sounds and melancholic melodies.
395
- </p>
396
- </div>
397
-
398
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
399
- <div class="w-16 h-16 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
400
- <i class="fas fa-moon text-xl text-cyan-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
401
  </div>
402
- <h3 class="text-xl font-semibold mb-2 text-center">Night Vibes</h3>
403
- <p class="text-gray-300 text-center">
404
- Slow, dreamy beats with warm bass and atmospheric pads.
405
- </p>
406
- </div>
407
-
408
- <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 hover:bg-gray-700 transition cursor-pointer">
409
- <div class="w-16 h-16 bg-cyan-400 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
410
- <i class="fas fa-music text-xl text-cyan-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
411
  </div>
412
- <h3 class="text-xl font-semibold mb-2 text-center">Jazzy Lo-Fi</h3>
413
- <p class="text-gray-300 text-center">
414
- Complex jazz chords with swung rhythms and upright bass.
415
- </p>
416
  </div>
417
  </div>
418
  </section>
419
 
420
  <!-- CTA Section -->
421
  <section class="container mx-auto px-6 py-16 text-center">
422
- <h2 class="text-3xl font-bold mb-6">Need Background Music?</h2>
423
  <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
424
- Create custom lo-fi beats for your videos, streams, or study sessions in seconds.
425
  </p>
426
  <button class="px-8 py-4 rounded-full bg-cyan-400 text-white text-lg font-semibold hover:bg-cyan-500 transition">
427
- Start Creating for Free
428
  </button>
429
  </section>
430
 
431
  <!-- Footer -->
432
  <footer class="bg-gray-900 bg-opacity-70 py-12">
433
  <div class="container mx-auto px-6">
434
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
435
  <div>
436
  <div class="flex items-center space-x-2 mb-4">
437
  <i class="fas fa-headphones text-2xl text-cyan-400"></i>
@@ -449,22 +489,12 @@
449
  </div>
450
 
451
  <div>
452
- <h4 class="text-lg font-semibold mb-4">Product</h4>
453
  <ul class="space-y-2">
454
- <li><a href="#" class="text-gray-400 hover:text-white">Lo-Fi Generator</a></li>
455
- <li><a href="#" class="text-gray-400 hover:text-white">Style Library</a></li>
456
- <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
457
- <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
458
- </ul>
459
- </div>
460
-
461
- <div>
462
- <h4 class="text-lg font-semibold mb-4">Resources</h4>
463
- <ul class="space-y-2">
464
- <li><a href="#" class="text-gray-400 hover:text-white">Lo-Fi Guide</a></li>
465
- <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
466
  <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
467
- <li><a href="#" class="text-gray-400 hover:text-white">Community</a></li>
468
  </ul>
469
  </div>
470
 
@@ -472,7 +502,7 @@
472
  <h4 class="text-lg font-semibold mb-4">Company</h4>
473
  <ul class="space-y-2">
474
  <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
475
- <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
476
  <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
477
  <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
478
  </ul>
@@ -486,182 +516,47 @@
486
  </footer>
487
 
488
  <script>
489
- // Create visualizer bars
490
- const visualizer = document.getElementById('visualizer');
491
- for (let i = 0; i < 50; i++) {
492
- const bar = document.createElement('div');
493
- bar.className = 'bar';
494
- bar.style.left = `${i * 10}px`;
495
- bar.style.height = `${Math.random() * 60 + 20}px`; // More subdued for lo-fi
496
- bar.style.animationDelay = `${Math.random() * 1.5}s`;
497
- visualizer.appendChild(bar);
498
- }
499
-
500
- // Create waveform peaks
501
- const waveform = document.querySelector('.waveform');
502
- for (let i = 0; i < 200; i++) {
503
- const peak = document.createElement('div');
504
- peak.className = 'waveform-peak';
505
- peak.style.left = `${i * 5}px`;
506
- peak.style.height = `${Math.random() * 50 + 10}px`; // More subtle for lo-fi
507
- waveform.appendChild(peak);
508
- }
509
-
510
- // Style chip selection
511
- const genreChips = document.querySelectorAll('.genre-chip');
512
- genreChips.forEach(chip => {
513
- chip.addEventListener('click', () => {
514
- genreChips.forEach(c => c.classList.remove('bg-cyan-400', 'bg-opacity-100'));
515
- genreChips.forEach(c => c.classList.add('bg-gray-700'));
516
- chip.classList.remove('bg-gray-700');
517
- chip.classList.add('bg-cyan-400');
518
-
519
- // Update BPM based on style
520
- const bpmSlider = document.querySelector('input[type="range"]');
521
- if (chip.textContent === 'Study') {
522
- bpmSlider.value = 75;
523
- } else if (chip.textContent === 'Jazzy') {
524
- bpmSlider.value = 95;
525
- } else if (chip.textContent === 'Ambient') {
526
- bpmSlider.value = 65;
527
- } else if (chip.textContent === 'Rainy') {
528
- bpmSlider.value = 80;
529
- } else if (chip.textContent === 'Night') {
530
- bpmSlider.value = 70;
531
  }
532
  });
 
 
 
 
 
 
533
  });
534
 
535
- // Play/pause button
536
- const playButton = document.querySelector('.control-btn.bg-cyan-400');
537
- playButton.addEventListener('click', () => {
538
- const icon = playButton.querySelector('i');
539
- if (icon.classList.contains('fa-play')) {
540
- icon.classList.remove('fa-play');
541
- icon.classList.add('fa-pause');
542
-
543
- // Animate progress bar
544
- let width = 0;
545
- const progressFill = document.querySelector('.progress-fill');
546
- const interval = setInterval(() => {
547
- if (width >= 100) {
548
- clearInterval(interval);
549
- icon.classList.remove('fa-pause');
550
- icon.classList.add('fa-play');
551
- progressFill.style.width = '0%';
552
- } else {
553
- width += 0.5;
554
- progressFill.style.width = `${width}%`;
555
- }
556
- }, 100);
557
- } else {
558
- icon.classList.remove('fa-pause');
559
- icon.classList.add('fa-play');
560
  }
561
  });
562
 
563
- // Generate music button
564
- const generateBtn = document.getElementById('generate-btn');
565
- const loadingState = document.getElementById('loading-state');
566
- const musicPreview = document.getElementById('music-preview');
567
-
568
- generateBtn.addEventListener('click', () => {
569
- // Show loading state
570
- loadingState.classList.remove('hidden');
571
- musicPreview.classList.add('hidden');
572
-
573
- // Simulate generation process
574
- setTimeout(() => {
575
- loadingState.classList.add('hidden');
576
- musicPreview.classList.remove('hidden');
577
-
578
- // Update vibe based on text
579
- const textInput = document.querySelector('.text-input');
580
- const emotionIndicator = document.querySelector('.emotion-indicator');
581
-
582
- if (textInput.value.toLowerCase().includes('happy') ||
583
- textInput.value.toLowerCase().includes('upbeat')) {
584
- emotionIndicator.className = 'emotion-indicator bg-green-400';
585
- document.querySelector('.emotion-indicator + span').textContent = 'Upbeat';
586
- } else if (textInput.value.toLowerCase().includes('sad') ||
587
- textInput.value.toLowerCase().includes('melancholic')) {
588
- emotionIndicator.className = 'emotion-indicator bg-blue-400';
589
- document.querySelector('.emotion-indicator + span').textContent = 'Melancholic';
590
- } else if (textInput.value.toLowerCase().includes('jazzy') ||
591
- textInput.value.toLowerCase().includes('complex')) {
592
- emotionIndicator.className = 'emotion-indicator bg-purple-400';
593
- document.querySelector('.emotion-indicator + span').textContent = 'Jazzy';
594
- } else {
595
- emotionIndicator.className = 'emotion-indicator bg-yellow-400';
596
- document.querySelector('.emotion-indicator + span').textContent = 'Chill';
597
- }
598
-
599
- // Generate a title based on text
600
- const titleElement = document.querySelector('#music-preview h4 + p');
601
- if (textInput.value.trim() === '') {
602
- titleElement.textContent = '"Lo-Fi Study Beats"';
603
- } else {
604
- // Simple title generation logic for lo-fi
605
- const words = textInput.value.split(' ');
606
- const firstMeaningfulWord = words.find(word => word.length > 3) || 'Lo-Fi';
607
- const lastMeaningfulWord = [...words].reverse().find(word => word.length > 3) || 'Vibes';
608
- titleElement.textContent = `"${firstMeaningfulWord} ${lastMeaningfulWord}"`;
609
  }
610
-
611
- // Update instrumentation based on text
612
- const instrumentationElement = document.querySelector('#music-preview h4 + div');
613
- const chips = Array.from(document.querySelectorAll('.genre-chip')).map(c => c.textContent);
614
- const selectedStyle = chips.find(c => c.classList.contains('bg-cyan-400')) || 'Study';
615
-
616
- let instruments = [];
617
- if (selectedStyle === 'Study') {
618
- instruments = ['Rhodes Piano', 'Soft Drums', 'Warm Bass', '85 BPM'];
619
- } else if (selectedStyle === 'Jazzy') {
620
- instruments = ['Jazz Guitar', 'Upright Bass', 'Brush Drums', '95 BPM'];
621
- } else if (selectedStyle === 'Ambient') {
622
- instruments = ['Atmospheric Pads', 'Field Recordings', 'Subtle Percussion', '65 BPM'];
623
- } else if (selectedStyle === 'Rainy') {
624
- instruments = ['Piano', 'Rain Sounds', 'Muted Drums', '80 BPM'];
625
- } else if (selectedStyle === 'Night') {
626
- instruments = ['Warm Synths', 'Deep Bass', 'Soft Snare', '70 BPM'];
627
- }
628
-
629
- // Add vinyl crackle to all
630
- instruments.unshift('Vinyl Crackle');
631
-
632
- instrumentationElement.innerHTML = `
633
- <h4 class="text-lg font-semibold mb-2">Instrumentation</h4>
634
- <div class="flex flex-wrap gap-2">
635
- ${instruments.map(inst =>
636
- `<span class="px-3 py-1 rounded-full bg-gray-700 text-white text-sm">${inst}</span>`
637
- ).join('')}
638
- </div>
639
- `;
640
-
641
- // Reset and animate progress bar
642
- document.querySelector('.progress-fill').style.width = '0%';
643
- }, 3000);
644
- });
645
-
646
- // Vibe detection on text input
647
- const textInput = document.querySelector('.text-input');
648
- textInput.addEventListener('input', () => {
649
- // Simple vibe detection
650
- const emotionIndicator = document.querySelector('.emotion-indicator');
651
- const text = textInput.value.toLowerCase();
652
-
653
- if (text.includes('happy') || text.includes('upbeat')) {
654
- emotionIndicator.className = 'emotion-indicator bg-green-400';
655
- document.querySelector('.emotion-indicator + span').textContent = 'Upbeat';
656
- } else if (text.includes('sad') || text.includes('melancholic')) {
657
- emotionIndicator.className = 'emotion-indicator bg-blue-400';
658
- document.querySelector('.emotion-indicator + span').textContent = 'Melancholic';
659
- } else if (text.includes('jazzy') || text.includes('complex')) {
660
- emotionIndicator.className = 'emotion-indicator bg-purple-400';
661
- document.querySelector('.emotion-indicator + span').textContent = 'Jazzy';
662
- } else {
663
- emotionIndicator.className = 'emotion-indicator bg-yellow-400';
664
- document.querySelector('.emotion-indicator + span').textContent = 'Chill';
665
  }
666
  });
667
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mangoma | Lo-Fi Music Styles</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>
 
19
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
20
  }
21
 
22
+ .style-card {
23
+ transition: all 0.3s ease;
24
  position: relative;
 
 
25
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
26
  }
27
 
28
+ .style-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
31
  }
32
 
33
+ .style-card::before {
34
+ content: '';
35
+ position: absolute;
36
+ top: 0;
37
+ left: 0;
38
+ right: 0;
39
+ bottom: 0;
40
+ background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
41
+ z-index: 1;
 
 
 
 
 
 
 
 
 
 
 
 
42
  }
43
 
44
+ .style-content {
45
+ position: relative;
46
+ z-index: 2;
47
  }
48
 
49
+ .style-tag {
50
+ position: absolute;
51
+ top: 15px;
52
+ right: 15px;
53
+ background-color: rgba(0, 180, 216, 0.9);
54
+ color: white;
55
+ padding: 4px 10px;
56
+ border-radius: 20px;
57
+ font-size: 12px;
58
+ font-weight: 600;
59
  }
60
 
61
+ .bpm-indicator {
62
+ background-color: rgba(255, 255, 255, 0.2);
63
+ backdrop-filter: blur(5px);
64
+ border-radius: 20px;
65
+ padding: 2px 10px;
66
+ font-size: 12px;
67
  }
68
 
69
+ .instrument-tag {
 
 
 
 
70
  background-color: rgba(255, 255, 255, 0.1);
71
+ border-radius: 15px;
72
+ padding: 3px 10px;
73
+ font-size: 12px;
74
+ margin-right: 5px;
75
+ margin-bottom: 5px;
76
+ display: inline-block;
77
  }
78
 
79
+ .style-bg-1 {
80
+ background-image: url('https://images.unsplash.com/photo-1514525253161-7a3d1b432d0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
81
+ background-size: cover;
82
+ background-position: center;
 
 
 
83
  }
84
 
85
+ .style-bg-2 {
86
+ background-image: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
87
+ background-size: cover;
88
+ background-position: center;
 
89
  }
90
 
91
+ .style-bg-3 {
92
+ background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
93
+ background-size: cover;
94
+ background-position: center;
95
  }
96
 
97
+ .style-bg-4 {
98
+ background-image: url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
99
+ background-size: cover;
100
+ background-position: center;
 
 
101
  }
102
 
103
+ .style-bg-5 {
104
+ background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
105
+ background-size: cover;
106
+ background-position: center;
107
  }
108
 
109
+ .style-bg-6 {
110
+ background-image: url('https://images.unsplash.com/photo-1514525253161-7a3d1b432d0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
111
+ background-size: cover;
112
+ background-position: center;
113
  }
114
 
115
+ .style-bg-7 {
116
  background-image: url('https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
117
  background-size: cover;
118
  background-position: center;
119
+ }
120
+
121
+ .style-bg-8 {
122
+ background-image: url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
123
+ background-size: cover;
124
+ background-position: center;
125
+ }
126
+
127
+ .active-nav {
128
+ color: #00b4d8;
129
  position: relative;
 
130
  }
131
 
132
+ .active-nav::after {
133
  content: '';
134
  position: absolute;
135
+ bottom: -5px;
136
  left: 0;
137
+ width: 100%;
138
+ height: 2px;
139
+ background-color: #00b4d8;
 
 
 
 
 
140
  }
141
  </style>
142
  </head>
 
148
  <span class="text-xl font-bold">Mangoma</span>
149
  </div>
150
  <div class="hidden md:flex space-x-6">
151
+ <a href="index.html" class="hover:text-cyan-400 transition">Home</a>
152
+ <a href="styles.html" class="hover:text-cyan-400 transition active-nav">Lo-Fi Styles</a>
 
 
153
  </div>
154
  <div class="flex items-center space-x-4">
 
 
 
155
  <button class="px-4 py-2 rounded-full bg-cyan-400 text-white hover:bg-cyan-500 transition">
156
+ Generate Lo-Fi
157
  </button>
158
  </div>
159
  </nav>
160
 
161
  <!-- Hero Section -->
162
  <section class="container mx-auto px-6 py-16 text-center">
163
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Explore <span class="text-cyan-400">Lo-Fi Styles</span></h1>
164
  <p class="text-xl md:text-2xl text-gray-300 mb-10 max-w-3xl mx-auto">
165
+ Discover the perfect lo-fi instrumental style for your mood and activities.
166
  </p>
167
+ <div class="flex justify-center">
168
+ <div class="relative max-w-xl w-full">
169
+ <input type="text" placeholder="Search lo-fi styles..." class="w-full px-6 py-4 rounded-full bg-gray-800 bg-opacity-50 border border-gray-700 focus:border-cyan-400 focus:outline-none text-white">
170
+ <button class="absolute right-3 top-3 bg-cyan-400 text-white rounded-full p-3 hover:bg-cyan-500 transition">
171
+ <i class="fas fa-search"></i>
172
+ </button>
173
+ </div>
174
  </div>
175
  </section>
176
 
177
+ <!-- Lo-Fi Styles Grid -->
178
  <section class="container mx-auto px-6 py-12">
179
+ <div class="mb-12">
180
+ <h2 class="text-3xl font-bold mb-6">Popular Lo-Fi Styles</h2>
181
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
182
+ <!-- Style Card 1 -->
183
+ <div class="style-card style-bg-1 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
184
+ <span class="style-tag">Most Popular</span>
185
+ <div class="style-content">
186
+ <h3 class="text-2xl font-bold mb-2">Study Focus</h3>
187
+ <p class="text-gray-300 mb-4">Minimal beats with soft piano and gentle rhythms to help you concentrate.</p>
188
+ <div class="flex items-center mb-3">
189
+ <span class="bpm-indicator mr-3">75-85 BPM</span>
190
+ <div class="flex space-x-1">
191
+ <i class="fas fa-star text-yellow-400"></i>
192
+ <i class="fas fa-star text-yellow-400"></i>
193
+ <i class="fas fa-star text-yellow-400"></i>
194
+ <i class="fas fa-star text-yellow-400"></i>
195
+ <i class="fas fa-star text-yellow-400"></i>
196
+ </div>
197
  </div>
198
+ <div class="flex flex-wrap">
199
+ <span class="instrument-tag">Rhodes Piano</span>
200
+ <span class="instrument-tag">Soft Drums</span>
201
+ <span class="instrument-tag">Vinyl Crackle</span>
 
 
 
 
 
 
202
  </div>
203
  </div>
204
+ </div>
205
+
206
+ <!-- Style Card 2 -->
207
+ <div class="style-card style-bg-2 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
208
+ <div class="style-content">
209
+ <h3 class="text-2xl font-bold mb-2">Jazzy Lo-Fi</h3>
210
+ <p class="text-gray-300 mb-4">Complex jazz chords with swung rhythms and upright bass.</p>
211
+ <div class="flex items-center mb-3">
212
+ <span class="bpm-indicator mr-3">90-100 BPM</span>
213
+ <div class="flex space-x-1">
214
+ <i class="fas fa-star text-yellow-400"></i>
215
+ <i class="fas fa-star text-yellow-400"></i>
216
+ <i class="fas fa-star text-yellow-400"></i>
217
+ <i class="fas fa-star text-yellow-400"></i>
218
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
219
+ </div>
220
  </div>
221
+ <div class="flex flex-wrap">
222
+ <span class="instrument-tag">Jazz Guitar</span>
223
+ <span class="instrument-tag">Upright Bass</span>
224
+ <span class="instrument-tag">Brush Drums</span>
 
 
225
  </div>
226
  </div>
 
 
 
 
227
  </div>
228
 
229
+ <!-- Style Card 3 -->
230
+ <div class="style-card style-bg-3 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
231
+ <div class="style-content">
232
+ <h3 class="text-2xl font-bold mb-2">Rainy Day</h3>
233
+ <p class="text-gray-300 mb-4">Ambient textures with rain sounds and melancholic melodies.</p>
234
+ <div class="flex items-center mb-3">
235
+ <span class="bpm-indicator mr-3">70-80 BPM</span>
236
+ <div class="flex space-x-1">
237
+ <i class="fas fa-star text-yellow-400"></i>
238
+ <i class="fas fa-star text-yellow-400"></i>
239
+ <i class="fas fa-star text-yellow-400"></i>
240
+ <i class="fas fa-star text-yellow-400"></i>
241
+ <i class="far fa-star text-yellow-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
242
  </div>
243
  </div>
244
+ <div class="flex flex-wrap">
245
+ <span class="instrument-tag">Piano</span>
246
+ <span class="instrument-tag">Rain Sounds</span>
247
+ <span class="instrument-tag">Muted Drums</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Style Card 4 -->
253
+ <div class="style-card style-bg-4 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
254
+ <span class="style-tag">New</span>
255
+ <div class="style-content">
256
+ <h3 class="text-2xl font-bold mb-2">Night Vibes</h3>
257
+ <p class="text-gray-300 mb-4">Slow, dreamy beats with warm bass and atmospheric pads.</p>
258
+ <div class="flex items-center mb-3">
259
+ <span class="bpm-indicator mr-3">65-75 BPM</span>
260
+ <div class="flex space-x-1">
261
+ <i class="fas fa-star text-yellow-400"></i>
262
+ <i class="fas fa-star text-yellow-400"></i>
263
+ <i class="fas fa-star text-yellow-400"></i>
264
+ <i class="fas fa-star text-yellow-400"></i>
265
+ <i class="fas fa-star text-yellow-400"></i>
 
 
 
 
 
 
 
266
  </div>
267
  </div>
268
+ <div class="flex flex-wrap">
269
+ <span class="instrument-tag">Warm Synths</span>
270
+ <span class="instrument-tag">Deep Bass</span>
271
+ <span class="instrument-tag">Soft Snare</span>
272
+ </div>
273
  </div>
274
  </div>
275
  </div>
276
  </div>
 
 
 
 
 
277
 
278
+ <div class="mb-12">
279
+ <h2 class="text-3xl font-bold mb-6">More Lo-Fi Styles</h2>
280
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
281
+ <!-- Style Card 5 -->
282
+ <div class="style-card style-bg-5 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
283
+ <div class="style-content">
284
+ <h3 class="text-2xl font-bold mb-2">Chillhop</h3>
285
+ <p class="text-gray-300 mb-4">Relaxed beats with hip-hop influences and smooth instrumentation.</p>
286
+ <div class="flex items-center mb-3">
287
+ <span class="bpm-indicator mr-3">85-95 BPM</span>
288
+ <div class="flex space-x-1">
289
+ <i class="fas fa-star text-yellow-400"></i>
290
+ <i class="fas fa-star text-yellow-400"></i>
291
+ <i class="fas fa-star text-yellow-400"></i>
292
+ <i class="fas fa-star text-yellow-400"></i>
293
+ <i class="far fa-star text-yellow-400"></i>
294
+ </div>
295
+ </div>
296
+ <div class="flex flex-wrap">
297
+ <span class="instrument-tag">Smooth Bass</span>
298
+ <span class="instrument-tag">Jazzy Keys</span>
299
+ <span class="instrument-tag">Hip-Hop Drums</span>
300
+ </div>
301
+ </div>
302
  </div>
303
+
304
+ <!-- Style Card 6 -->
305
+ <div class="style-card style-bg-6 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
306
+ <div class="style-content">
307
+ <h3 class="text-2xl font-bold mb-2">Ambient Lo-Fi</h3>
308
+ <p class="text-gray-300 mb-4">Ethereal soundscapes with minimal rhythmic elements.</p>
309
+ <div class="flex items-center mb-3">
310
+ <span class="bpm-indicator mr-3">60-70 BPM</span>
311
+ <div class="flex space-x-1">
312
+ <i class="fas fa-star text-yellow-400"></i>
313
+ <i class="fas fa-star text-yellow-400"></i>
314
+ <i class="fas fa-star text-yellow-400"></i>
315
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
316
+ <i class="far fa-star text-yellow-400"></i>
317
+ </div>
318
+ </div>
319
+ <div class="flex flex-wrap">
320
+ <span class="instrument-tag">Atmospheric Pads</span>
321
+ <span class="instrument-tag">Field Recordings</span>
322
+ <span class="instrument-tag">Subtle Percussion</span>
323
+ </div>
324
+ </div>
325
  </div>
326
+
327
+ <!-- Style Card 7 -->
328
+ <div class="style-card style-bg-7 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
329
+ <div class="style-content">
330
+ <h3 class="text-2xl font-bold mb-2">Coffee Shop</h3>
331
+ <p class="text-gray-300 mb-4">Light, upbeat instrumentals with acoustic elements.</p>
332
+ <div class="flex items-center mb-3">
333
+ <span class="bpm-indicator mr-3">90-100 BPM</span>
334
+ <div class="flex space-x-1">
335
+ <i class="fas fa-star text-yellow-400"></i>
336
+ <i class="fas fa-star text-yellow-400"></i>
337
+ <i class="fas fa-star text-yellow-400"></i>
338
+ <i class="fas fa-star text-yellow-400"></i>
339
+ <i class="fas fa-star text-yellow-400"></i>
340
+ </div>
341
+ </div>
342
+ <div class="flex flex-wrap">
343
+ <span class="instrument-tag">Acoustic Guitar</span>
344
+ <span class="instrument-tag">Light Piano</span>
345
+ <span class="instrument-tag">Brush Snare</span>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <!-- Style Card 8 -->
351
+ <div class="style-card style-bg-8 rounded-xl p-6 h-80 flex flex-col justify-end cursor-pointer">
352
+ <span class="style-tag">Experimental</span>
353
+ <div class="style-content">
354
+ <h3 class="text-2xl font-bold mb-2">Glitch Hop</h3>
355
+ <p class="text-gray-300 mb-4">Digital textures with broken beats and electronic elements.</p>
356
+ <div class="flex items-center mb-3">
357
+ <span class="bpm-indicator mr-3">95-105 BPM</span>
358
+ <div class="flex space-x-1">
359
+ <i class="fas fa-star text-yellow-400"></i>
360
+ <i class="fas fa-star text-yellow-400"></i>
361
+ <i class="fas fa-star text-yellow-400"></i>
362
+ <i class="fas fa-star text-yellow-400"></i>
363
+ <i class="far fa-star text-yellow-400"></i>
364
+ </div>
365
+ </div>
366
+ <div class="flex flex-wrap">
367
+ <span class="instrument-tag">Glitch Effects</span>
368
+ <span class="instrument-tag">Synth Bass</span>
369
+ <span class="instrument-tag">Electronic Drums</span>
370
+ </div>
371
+ </div>
372
  </div>
 
 
 
 
373
  </div>
374
  </div>
375
+
376
+ <div class="text-center">
377
+ <button class="px-8 py-4 rounded-full bg-transparent border border-cyan-400 text-cyan-400 text-lg font-semibold hover:bg-cyan-400 hover:text-white transition">
378
+ Load More Styles
379
+ </button>
380
+ </div>
381
  </section>
382
 
383
+ <!-- Style Details Section -->
384
  <section class="container mx-auto px-6 py-16">
385
+ <div class="bg-gray-800 bg-opacity-50 rounded-2xl p-8 shadow-xl">
386
+ <h2 class="text-3xl font-bold mb-8 text-center">About Lo-Fi Instrumentation</h2>
 
 
 
 
 
 
 
 
 
 
387
 
388
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
389
+ <div>
390
+ <h3 class="text-xl font-semibold mb-4 text-cyan-400">Common Lo-Fi Instruments</h3>
391
+ <ul class="space-y-4">
392
+ <li class="flex items-start">
393
+ <i class="fas fa-piano text-lg text-cyan-400 mr-3 mt-1"></i>
394
+ <div>
395
+ <h4 class="font-medium">Rhodes/Wurlitzer Electric Piano</h4>
396
+ <p class="text-gray-400">Warm, slightly distorted electric piano tones are a staple of lo-fi beats.</p>
397
+ </div>
398
+ </li>
399
+ <li class="flex items-start">
400
+ <i class="fas fa-guitar text-lg text-cyan-400 mr-3 mt-1"></i>
401
+ <div>
402
+ <h4 class="font-medium">Jazz Guitar</h4>
403
+ <p class="text-gray-400">Clean or slightly overdriven jazz guitar chords add harmonic richness.</p>
404
+ </div>
405
+ </li>
406
+ <li class="flex items-start">
407
+ <i class="fas fa-drum text-lg text-cyan-400 mr-3 mt-1"></i>
408
+ <div>
409
+ <h4 class="font-medium">Vinyl Drum Kits</h4>
410
+ <p class="text-gray-400">Sampled drum breaks with vinyl noise and imperfect timing.</p>
411
+ </div>
412
+ </li>
413
+ <li class="flex items-start">
414
+ <i class="fas fa-wave-square text-lg text-cyan-400 mr-3 mt-1"></i>
415
+ <div>
416
+ <h4 class="font-medium">Analog Synths</h4>
417
+ <p class="text-gray-400">Warm pad sounds from vintage synthesizers.</p>
418
+ </div>
419
+ </li>
420
+ </ul>
421
  </div>
422
+
423
+ <div>
424
+ <h3 class="text-xl font-semibold mb-4 text-cyan-400">Production Techniques</h3>
425
+ <ul class="space-y-4">
426
+ <li class="flex items-start">
427
+ <i class="fas fa-record-vinyl text-lg text-cyan-400 mr-3 mt-1"></i>
428
+ <div>
429
+ <h4 class="font-medium">Vinyl Simulation</h4>
430
+ <p class="text-gray-400">Adding crackle, pops, and wow/flutter to emulate vintage records.</p>
431
+ </div>
432
+ </li>
433
+ <li class="flex items-start">
434
+ <i class="fas fa-filter text-lg text-cyan-400 mr-3 mt-1"></i>
435
+ <div>
436
+ <h4 class="font-medium">Low-Pass Filtering</h4>
437
+ <p class="text-gray-400">Rolling off high frequencies to create a "distant" sound.</p>
438
+ </div>
439
+ </li>
440
+ <li class="flex items-start">
441
+ <i class="fas fa-sliders-h text-lg text-cyan-400 mr-3 mt-1"></i>
442
+ <div>
443
+ <h4 class="font-medium">Tape Saturation</h4>
444
+ <p class="text-gray-400">Adding warmth and subtle distortion through tape emulation.</p>
445
+ </div>
446
+ </li>
447
+ <li class="flex items-start">
448
+ <i class="fas fa-random text-lg text-cyan-400 mr-3 mt-1"></i>
449
+ <div>
450
+ <h4 class="font-medium">Imperfect Timing</h4>
451
+ <p class="text-gray-400">Slight humanization of rhythms for an organic feel.</p>
452
+ </div>
453
+ </li>
454
+ </ul>
455
  </div>
 
 
 
 
456
  </div>
457
  </div>
458
  </section>
459
 
460
  <!-- CTA Section -->
461
  <section class="container mx-auto px-6 py-16 text-center">
462
+ <h2 class="text-3xl font-bold mb-6">Ready to Create Your Lo-Fi Beat?</h2>
463
  <p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
464
+ Generate custom lo-fi instrumentals tailored to your exact preferences.
465
  </p>
466
  <button class="px-8 py-4 rounded-full bg-cyan-400 text-white text-lg font-semibold hover:bg-cyan-500 transition">
467
+ Start Creating Now
468
  </button>
469
  </section>
470
 
471
  <!-- Footer -->
472
  <footer class="bg-gray-900 bg-opacity-70 py-12">
473
  <div class="container mx-auto px-6">
474
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
475
  <div>
476
  <div class="flex items-center space-x-2 mb-4">
477
  <i class="fas fa-headphones text-2xl text-cyan-400"></i>
 
489
  </div>
490
 
491
  <div>
492
+ <h4 class="text-lg font-semibold mb-4">Navigation</h4>
493
  <ul class="space-y-2">
494
+ <li><a href="index.html" class="text-gray-400 hover:text-white">Home</a></li>
495
+ <li><a href="styles.html" class="text-gray-400 hover:text-white">Lo-Fi Styles</a></li>
496
+ <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>
 
 
 
 
 
 
 
 
 
497
  <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
 
498
  </ul>
499
  </div>
500
 
 
502
  <h4 class="text-lg font-semibold mb-4">Company</h4>
503
  <ul class="space-y-2">
504
  <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
505
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
506
  <li><a href="#" class="text-gray-400 hover:text-white">Privacy</a></li>
507
  <li><a href="#" class="text-gray-400 hover:text-white">Terms</a></li>
508
  </ul>
 
516
  </footer>
517
 
518
  <script>
519
+ // Style card hover effects
520
+ const styleCards = document.querySelectorAll('.style-card');
521
+ styleCards.forEach(card => {
522
+ card.addEventListener('mouseenter', () => {
523
+ const icon = card.querySelector('i');
524
+ if (icon) {
525
+ icon.classList.add('fa-spin');
526
+ }
527
+ });
528
+
529
+ card.addEventListener('mouseleave', () => {
530
+ const icon = card.querySelector('i');
531
+ if (icon) {
532
+ icon.classList.remove('fa-spin');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
533
  }
534
  });
535
+
536
+ // Click to generate this style
537
+ card.addEventListener('click', () => {
538
+ const title = card.querySelector('h3').textContent;
539
+ alert(`Generating a ${title} lo-fi beat...`);
540
+ });
541
  });
542
 
543
+ // Search functionality
544
+ const searchInput = document.querySelector('input[type="text"]');
545
+ const searchButton = document.querySelector('button.bg-cyan-400');
546
+
547
+ searchButton.addEventListener('click', () => {
548
+ const query = searchInput.value.trim();
549
+ if (query) {
550
+ alert(`Searching for lo-fi styles matching: "${query}"`);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
551
  }
552
  });
553
 
554
+ searchInput.addEventListener('keypress', (e) => {
555
+ if (e.key === 'Enter') {
556
+ const query = searchInput.value.trim();
557
+ if (query) {
558
+ alert(`Searching for lo-fi styles matching: "${query}"`);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
559
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
560
  }
561
  });
562
  </script>
prompts.txt CHANGED
@@ -1,2 +1,3 @@
1
  rename the site to mangoma and only keep the home page. then add a text to music generator
2
- the site should primarily focus on lo-fi music generation with the text describing the instrumental beats not the lyrics of the songs.
 
 
1
  rename the site to mangoma and only keep the home page. then add a text to music generator
2
+ the site should primarily focus on lo-fi music generation with the text describing the instrumental beats not the lyrics of the songs.
3
+ add lofi styles page and remove the examples, pricing login, and sign up page