Hugging Face's logo

Spaces:
MercilessArtist
/
SunoPromptAssistant
Running

App Files Community
MercilessArtist commited on
Commit
d8d8402
·
verified ·
1 Parent(s): fda559c

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +904 -19
index.html CHANGED
@@ -1,19 +1,904 @@
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>Suno Genre Explorer</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Inter', -apple-system, sans-serif;
16
+ background: #0a0a0a;
17
+ color: #fff;
18
+ min-height: 100vh;
19
+ padding: 20px;
20
+ }
21
+
22
+ .header {
23
+ text-align: center;
24
+ margin-bottom: 30px;
25
+ }
26
+
27
+ h1 {
28
+ font-size: 2.5em;
29
+ background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00);
30
+ -webkit-background-clip: text;
31
+ -webkit-text-fill-color: transparent;
32
+ margin-bottom: 10px;
33
+ }
34
+
35
+ .subtitle {
36
+ color: #888;
37
+ font-size: 1.1em;
38
+ margin-bottom: 20px;
39
+ }
40
+
41
+ .effects-btn {
42
+ background: linear-gradient(135deg, #ff6600, #ff0099);
43
+ color: #fff;
44
+ border: none;
45
+ padding: 12px 24px;
46
+ border-radius: 25px;
47
+ cursor: pointer;
48
+ font-size: 1.1em;
49
+ font-weight: bold;
50
+ transition: all 0.3s;
51
+ display: inline-block;
52
+ }
53
+
54
+ .effects-btn:hover {
55
+ transform: scale(1.05);
56
+ box-shadow: 0 5px 20px rgba(255, 102, 0, 0.4);
57
+ }
58
+
59
+ .prompt-builder {
60
+ background: rgba(255, 255, 255, 0.05);
61
+ border: 1px solid rgba(255, 255, 255, 0.1);
62
+ border-radius: 12px;
63
+ padding: 20px;
64
+ margin-bottom: 30px;
65
+ position: sticky;
66
+ top: 20px;
67
+ z-index: 100;
68
+ }
69
+
70
+ .prompt-display {
71
+ background: #1a1a1a;
72
+ border: 2px solid #00ffff;
73
+ border-radius: 8px;
74
+ padding: 15px;
75
+ margin-bottom: 15px;
76
+ min-height: 60px;
77
+ font-family: 'Monaco', monospace;
78
+ color: #00ffff;
79
+ }
80
+
81
+ .copy-btn {
82
+ background: linear-gradient(90deg, #ff00ff, #00ffff);
83
+ color: #000;
84
+ border: none;
85
+ padding: 10px 20px;
86
+ border-radius: 20px;
87
+ cursor: pointer;
88
+ font-weight: bold;
89
+ transition: transform 0.2s;
90
+ }
91
+
92
+ .copy-btn:hover {
93
+ transform: scale(1.05);
94
+ }
95
+
96
+ .genre-container {
97
+ display: grid;
98
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
99
+ gap: 20px;
100
+ margin-bottom: 40px;
101
+ }
102
+
103
+ .genre-family {
104
+ background: rgba(255, 255, 255, 0.02);
105
+ border: 1px solid rgba(255, 255, 255, 0.1);
106
+ border-radius: 12px;
107
+ overflow: hidden;
108
+ }
109
+
110
+ .family-header {
111
+ background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2));
112
+ padding: 15px;
113
+ font-size: 1.2em;
114
+ font-weight: bold;
115
+ cursor: pointer;
116
+ transition: background 0.3s;
117
+ }
118
+
119
+ .family-header:hover {
120
+ background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3));
121
+ }
122
+
123
+ .subgenres {
124
+ padding: 10px;
125
+ display: none;
126
+ }
127
+
128
+ .subgenres.open {
129
+ display: block;
130
+ }
131
+
132
+ .genre-item {
133
+ background: rgba(255, 255, 255, 0.05);
134
+ margin: 5px;
135
+ padding: 10px;
136
+ border-radius: 8px;
137
+ cursor: pointer;
138
+ transition: all 0.2s;
139
+ position: relative;
140
+ }
141
+
142
+ .genre-item:hover {
143
+ background: rgba(0, 255, 255, 0.2);
144
+ transform: translateX(5px);
145
+ }
146
+
147
+ .genre-item.selected {
148
+ background: rgba(255, 0, 255, 0.3);
149
+ border: 1px solid #ff00ff;
150
+ }
151
+
152
+ .genre-name {
153
+ font-weight: bold;
154
+ color: #ffff00;
155
+ margin-bottom: 5px;
156
+ }
157
+
158
+ .genre-description {
159
+ font-size: 0.85em;
160
+ color: #ccc;
161
+ line-height: 1.4;
162
+ }
163
+
164
+ .genre-artists {
165
+ font-size: 0.8em;
166
+ color: #888;
167
+ margin-top: 5px;
168
+ font-style: italic;
169
+ }
170
+
171
+ .clear-btn {
172
+ background: #ff0066;
173
+ color: #fff;
174
+ border: none;
175
+ padding: 8px 16px;
176
+ border-radius: 20px;
177
+ cursor: pointer;
178
+ margin-left: 10px;
179
+ }
180
+
181
+ .selected-count {
182
+ color: #00ffff;
183
+ margin-left: 15px;
184
+ font-size: 0.9em;
185
+ }
186
+
187
+ .quick-combos {
188
+ margin-bottom: 30px;
189
+ }
190
+
191
+ .combo-title {
192
+ color: #ff00ff;
193
+ margin-bottom: 10px;
194
+ }
195
+
196
+ .combo-buttons {
197
+ display: flex;
198
+ flex-wrap: wrap;
199
+ gap: 10px;
200
+ }
201
+
202
+ .combo-btn {
203
+ background: linear-gradient(135deg, #333, #444);
204
+ color: #fff;
205
+ border: 1px solid #666;
206
+ padding: 8px 15px;
207
+ border-radius: 20px;
208
+ cursor: pointer;
209
+ transition: all 0.2s;
210
+ }
211
+
212
+ .combo-btn:hover {
213
+ background: linear-gradient(135deg, #444, #555);
214
+ border-color: #00ffff;
215
+ }
216
+
217
+ /* Effects Page Styles */
218
+ .effects-page {
219
+ display: none;
220
+ position: fixed;
221
+ top: 0;
222
+ left: 0;
223
+ right: 0;
224
+ bottom: 0;
225
+ background: #0a0a0a;
226
+ overflow-y: auto;
227
+ z-index: 1000;
228
+ padding: 20px;
229
+ }
230
+
231
+ .effects-page.active {
232
+ display: block;
233
+ }
234
+
235
+ .back-btn {
236
+ background: #666;
237
+ color: #fff;
238
+ border: none;
239
+ padding: 10px 20px;
240
+ border-radius: 20px;
241
+ cursor: pointer;
242
+ margin-bottom: 20px;
243
+ }
244
+
245
+ .back-btn:hover {
246
+ background: #888;
247
+ }
248
+
249
+ .effects-grid {
250
+ display: grid;
251
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
252
+ gap: 20px;
253
+ max-width: 1400px;
254
+ margin: 0 auto;
255
+ }
256
+
257
+ .effect-card {
258
+ background: rgba(255, 255, 255, 0.05);
259
+ border: 1px solid rgba(255, 255, 255, 0.2);
260
+ border-radius: 12px;
261
+ padding: 20px;
262
+ transition: all 0.3s;
263
+ }
264
+
265
+ .effect-card:hover {
266
+ transform: translateY(-5px);
267
+ box-shadow: 0 10px 30px rgba(255, 102, 0, 0.2);
268
+ border-color: #ff6600;
269
+ }
270
+
271
+ .effect-name {
272
+ font-size: 1.3em;
273
+ color: #ff6600;
274
+ margin-bottom: 10px;
275
+ font-weight: bold;
276
+ }
277
+
278
+ .effect-description {
279
+ color: #ccc;
280
+ line-height: 1.6;
281
+ margin-bottom: 15px;
282
+ }
283
+
284
+ .effect-params {
285
+ background: rgba(0, 0, 0, 0.3);
286
+ border-radius: 8px;
287
+ padding: 10px;
288
+ margin-bottom: 10px;
289
+ }
290
+
291
+ .param {
292
+ color: #00ffff;
293
+ font-size: 0.9em;
294
+ margin: 5px 0;
295
+ }
296
+
297
+ .use-case {
298
+ font-size: 0.85em;
299
+ color: #ffff00;
300
+ font-style: italic;
301
+ }
302
+
303
+ .effect-category {
304
+ font-size: 1.8em;
305
+ color: #ff00ff;
306
+ margin: 30px 0 20px;
307
+ padding-bottom: 10px;
308
+ border-bottom: 2px solid #ff00ff;
309
+ }
310
+ </style>
311
+ </head>
312
+ <body>
313
+ <div class="header">
314
+ <h1>🎵 Suno Genre Explorer 🎵</h1>
315
+ <p class="subtitle">Click genres to build your perfect prompt</p>
316
+ <button class="effects-btn" onclick="showEffectsPage()">🎛️ DAW Effects Guide</button>
317
+ </div>
318
+
319
+ <div class="prompt-builder">
320
+ <div class="prompt-display" id="promptDisplay">Click genres below to build your prompt...</div>
321
+ <div>
322
+ <button class="copy-btn" onclick="copyPrompt()">Copy Prompt</button>
323
+ <button class="clear-btn" onclick="clearSelection()">Clear All</button>
324
+ <span class="selected-count" id="selectedCount">0 genres selected</span>
325
+ </div>
326
+ </div>
327
+
328
+ <div class="quick-combos">
329
+ <div class="combo-title">Quick Combos:</div>
330
+ <div class="combo-buttons">
331
+ <button class="combo-btn" onclick="loadCombo('trap, hyperpop, experimental')">Chaotic Energy</button>
332
+ <button class="combo-btn" onclick="loadCombo('lo-fi hip hop, jazz rap, neo-soul')">Smooth Vibes</button>
333
+ <button class="combo-btn" onclick="loadCombo('drill, trap, dark')">Dark & Heavy</button>
334
+ <button class="combo-btn" onclick="loadCombo('house, disco, funk')">Dance Party</button>
335
+ <button class="combo-btn" onclick="loadCombo('ambient, downtempo, ethereal')">Chill Zone</button>
336
+ <button class="combo-btn" onclick="loadCombo('punk rock, emo, hardcore')">Angsty</button>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="genre-container">
341
+
342
+ <!-- HIP HOP FAMILY -->
343
+ <div class="genre-family">
344
+ <div class="family-header" onclick="toggleFamily(this)">🎤 HIP HOP</div>
345
+ <div class="subgenres">
346
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="boom bap">
347
+ <div class="genre-name">Boom Bap</div>
348
+ <div class="genre-description">Hard-hitting drums, jazz samples, dusty old-school NYC sound</div>
349
+ <div class="genre-artists">DJ Premier, Pete Rock, KRS-One</div>
350
+ </div>
351
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="trap">
352
+ <div class="genre-name">Trap</div>
353
+ <div class="genre-description">808 drums, skittering hi-hats, dark atmospheric synths</div>
354
+ <div class="genre-artists">T.I., Gucci Mane, Migos</div>
355
+ </div>
356
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="drill">
357
+ <div class="genre-name">Drill</div>
358
+ <div class="genre-description">Dark minimalist beats, ominous, nihilistic</div>
359
+ <div class="genre-artists">Chief Keef, Pop Smoke</div>
360
+ </div>
361
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="g-funk">
362
+ <div class="genre-name">G-Funk</div>
363
+ <div class="genre-description">Smooth West Coast, P-Funk samples, high synth leads</div>
364
+ <div class="genre-artists">Dr. Dre, Snoop Dogg</div>
365
+ </div>
366
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="crunk">
367
+ <div class="genre-name">Crunk</div>
368
+ <div class="genre-description">High-energy club beats, shouted hooks</div>
369
+ <div class="genre-artists">Lil Jon, Three 6 Mafia</div>
370
+ </div>
371
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="lo-fi hip hop">
372
+ <div class="genre-name">Lo-fi Hip Hop</div>
373
+ <div class="genre-description">Mellow beats, vinyl crackle, study vibes</div>
374
+ <div class="genre-artists">Nujabes, J Dilla</div>
375
+ </div>
376
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="cloud rap">
377
+ <div class="genre-name">Cloud Rap</div>
378
+ <div class="genre-description">Hazy, ethereal, dreamlike production</div>
379
+ <div class="genre-artists">Lil B, A$AP Rocky, Yung Lean</div>
380
+ </div>
381
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="jazz rap">
382
+ <div class="genre-name">Jazz Rap</div>
383
+ <div class="genre-description">Jazz samples, live instruments, sophisticated</div>
384
+ <div class="genre-artists">A Tribe Called Quest, Digable Planets</div>
385
+ </div>
386
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="chopper">
387
+ <div class="genre-name">Chopper</div>
388
+ <div class="genre-description">Extremely fast-paced, rapid-fire rapping</div>
389
+ <div class="genre-artists">Tech N9ne, Twista</div>
390
+ </div>
391
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="alternative hip hop">
392
+ <div class="genre-name">Alternative Hip Hop</div>
393
+ <div class="genre-description">Experimental, eclectic samples, conscious lyrics</div>
394
+ <div class="genre-artists">De La Soul, The Roots, Kendrick</div>
395
+ </div>
396
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="hyphy">
397
+ <div class="genre-name">Hyphy</div>
398
+ <div class="genre-description">Bay Area bounce, high-energy, quirky synths</div>
399
+ <div class="genre-artists">Mac Dre, E-40</div>
400
+ </div>
401
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="mumble rap">
402
+ <div class="genre-name">Mumble Rap</div>
403
+ <div class="genre-description">Melodic, auto-tuned, vibe over lyrics</div>
404
+ <div class="genre-artists">Young Thug, Lil Uzi Vert</div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- POP FAMILY -->
410
+ <div class="genre-family">
411
+ <div class="family-header" onclick="toggleFamily(this)">✨ POP</div>
412
+ <div class="subgenres">
413
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="pop">
414
+ <div class="genre-name">Pop</div>
415
+ <div class="genre-description">Catchy hooks, polished production, radio-ready</div>
416
+ </div>
417
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="hyperpop">
418
+ <div class="genre-name">Hyperpop</div>
419
+ <div class="genre-description">Maximalist, pitched vocals, chaotic, glitchy</div>
420
+ <div class="genre-artists">100 gecs, Charli XCX, SOPHIE</div>
421
+ </div>
422
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="art pop">
423
+ <div class="genre-name">Art Pop</div>
424
+ <div class="genre-description">Experimental pop, conceptual, avant-garde</div>
425
+ <div class="genre-artists">Björk, Kate Bush, FKA twigs</div>
426
+ </div>
427
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="indie pop">
428
+ <div class="genre-name">Indie Pop</div>
429
+ <div class="genre-description">DIY aesthetic, jangly guitars, quirky</div>
430
+ </div>
431
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="synth-pop">
432
+ <div class="genre-name">Synth-pop</div>
433
+ <div class="genre-description">80s synths, electronic drums, nostalgic</div>
434
+ </div>
435
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="k-pop">
436
+ <div class="genre-name">K-pop</div>
437
+ <div class="genre-description">Korean pop, high production, genre fusion</div>
438
+ </div>
439
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="dream pop">
440
+ <div class="genre-name">Dream Pop</div>
441
+ <div class="genre-description">Ethereal, reverb-heavy, atmospheric vocals</div>
442
+ </div>
443
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="bedroom pop">
444
+ <div class="genre-name">Bedroom Pop</div>
445
+ <div class="genre-description">Lo-fi, intimate, DIY production</div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- ELECTRONIC/DANCE FAMILY -->
451
+ <div class="genre-family">
452
+ <div class="family-header" onclick="toggleFamily(this)">🎧 ELECTRONIC/DANCE</div>
453
+ <div class="subgenres">
454
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="house">
455
+ <div class="genre-name">House</div>
456
+ <div class="genre-description">Four-on-floor, soulful samples, 120-130 BPM</div>
457
+ </div>
458
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="techno">
459
+ <div class="genre-name">Techno</div>
460
+ <div class="genre-description">Repetitive, hypnotic, industrial, minimal</div>
461
+ </div>
462
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="trance">
463
+ <div class="genre-name">Trance</div>
464
+ <div class="genre-description">Euphoric builds, emotional, 130-140 BPM</div>
465
+ </div>
466
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="drum and bass">
467
+ <div class="genre-name">Drum & Bass</div>
468
+ <div class="genre-description">Fast breakbeats, heavy bass, 165-180 BPM</div>
469
+ </div>
470
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="dubstep">
471
+ <div class="genre-name">Dubstep</div>
472
+ <div class="genre-description">Wobble bass, sparse rhythms, 140 BPM</div>
473
+ </div>
474
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="ambient">
475
+ <div class="genre-name">Ambient</div>
476
+ <div class="genre-description">Atmospheric, textural, no drums</div>
477
+ </div>
478
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="idm">
479
+ <div class="genre-name">IDM</div>
480
+ <div class="genre-description">Complex rhythms, experimental, cerebral</div>
481
+ <div class="genre-artists">Aphex Twin, Autechre</div>
482
+ </div>
483
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="breakcore">
484
+ <div class="genre-name">Breakcore</div>
485
+ <div class="genre-description">Chaotic breaks, extreme tempo, aggressive</div>
486
+ </div>
487
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="future bass">
488
+ <div class="genre-name">Future Bass</div>
489
+ <div class="genre-description">Wobbly synths, pitched vocals, emotional</div>
490
+ </div>
491
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="jungle">
492
+ <div class="genre-name">Jungle</div>
493
+ <div class="genre-description">Chopped breaks, ragga vocals, 160-180 BPM</div>
494
+ </div>
495
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="garage">
496
+ <div class="genre-name">UK Garage</div>
497
+ <div class="genre-description">2-step rhythms, shuffled beats, R&B vocals</div>
498
+ </div>
499
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="hardstyle">
500
+ <div class="genre-name">Hardstyle</div>
501
+ <div class="genre-description">Hard kicks, euphoric melodies, 150 BPM</div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- R&B/SOUL FAMILY -->
507
+ <div class="genre-family">
508
+ <div class="family-header" onclick="toggleFamily(this)">💜 R&B/SOUL</div>
509
+ <div class="subgenres">
510
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="r&b">
511
+ <div class="genre-name">R&B</div>
512
+ <div class="genre-description">Smooth vocals, soulful, contemporary</div>
513
+ </div>
514
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="neo-soul">
515
+ <div class="genre-name">Neo-Soul</div>
516
+ <div class="genre-description">Live instruments, jazz influences, organic</div>
517
+ <div class="genre-artists">D'Angelo, Erykah Badu</div>
518
+ </div>
519
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="alternative r&b">
520
+ <div class="genre-name">Alternative R&B</div>
521
+ <div class="genre-description">Experimental, moody, electronic elements</div>
522
+ <div class="genre-artists">The Weeknd, Frank Ocean</div>
523
+ </div>
524
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="trap soul">
525
+ <div class="genre-name">Trap Soul</div>
526
+ <div class="genre-description">Trap beats with R&B vocals, atmospheric</div>
527
+ <div class="genre-artists">Bryson Tiller</div>
528
+ </div>
529
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="funk">
530
+ <div class="genre-name">Funk</div>
531
+ <div class="genre-description">Groovy basslines, syncopated rhythms</div>
532
+ </div>
533
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="new jack swing">
534
+ <div class="genre-name">New Jack Swing</div>
535
+ <div class="genre-description">80s/90s R&B with hip hop beats</div>
536
+ </div>
537
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="quiet storm">
538
+ <div class="genre-name">Quiet Storm</div>
539
+ <div class="genre-description">Smooth, romantic, late-night vibes</div>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <!-- ROCK FAMILY -->
545
+ <div class="genre-family">
546
+ <div class="family-header" onclick="toggleFamily(this)">🎸 ROCK</div>
547
+ <div class="subgenres">
548
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="indie rock">
549
+ <div class="genre-name">Indie Rock</div>
550
+ <div class="genre-description">Alternative, DIY ethos, diverse sounds</div>
551
+ </div>
552
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="punk rock">
553
+ <div class="genre-name">Punk Rock</div>
554
+ <div class="genre-description">Fast, aggressive, anti-establishment</div>
555
+ </div>
556
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="emo">
557
+ <div class="genre-name">Emo</div>
558
+ <div class="genre-description">Emotional, confessional lyrics, angsty</div>
559
+ </div>
560
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="shoegaze">
561
+ <div class="genre-name">Shoegaze</div>
562
+ <div class="genre-description">Wall of sound, reverb, ethereal vocals</div>
563
+ </div>
564
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="post-punk">
565
+ <div class="genre-name">Post-punk</div>
566
+ <div class="genre-description">Angular guitars, bass-driven, arty</div>
567
+ </div>
568
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="math rock">
569
+ <div class="genre-name">Math Rock</div>
570
+ <div class="genre-description">Complex time signatures, intricate</div>
571
+ </div>
572
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="grunge">
573
+ <div class="genre-name">Grunge</div>
574
+ <div class="genre-description">Distorted guitars, angsty vocals, Seattle sound</div>
575
+ </div>
576
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="psychedelic rock">
577
+ <div class="genre-name">Psychedelic Rock</div>
578
+ <div class="genre-description">Trippy effects, extended jams, experimental</div>
579
+ </div>
580
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="garage rock">
581
+ <div class="genre-name">Garage Rock</div>
582
+ <div class="genre-description">Raw, energetic, lo-fi production</div>
583
+ </div>
584
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="surf rock">
585
+ <div class="genre-name">Surf Rock</div>
586
+ <div class="genre-description">Reverb-heavy guitars, beach vibes</div>
587
+ </div>
588
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="pop punk">
589
+ <div class="genre-name">Pop Punk</div>
590
+ <div class="genre-description">Catchy melodies, punk energy, teenage angst</div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+
595
+ <!-- EXPERIMENTAL FAMILY -->
596
+ <div class="genre-family">
597
+ <div class="family-header" onclick="toggleFamily(this)">🌀 EXPERIMENTAL</div>
598
+ <div class="subgenres">
599
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="noise">
600
+ <div class="genre-name">Noise</div>
601
+ <div class="genre-description">Harsh, abrasive, unconventional</div>
602
+ </div>
603
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="glitch">
604
+ <div class="genre-name">Glitch</div>
605
+ <div class="genre-description">Digital errors as music, stutters</div>
606
+ </div>
607
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="vaporwave">
608
+ <div class="genre-name">Vaporwave</div>
609
+ <div class="genre-description">80s nostalgia, slowed samples, aesthetic</div>
610
+ </div>
611
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="dark ambient">
612
+ <div class="genre-name">Dark Ambient</div>
613
+ <div class="genre-description">Ominous, atmospheric, unsettling</div>
614
+ </div>
615
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="industrial">
616
+ <div class="genre-name">Industrial</div>
617
+ <div class="genre-description">Harsh, mechanical, aggressive</div>
618
+ </div>
619
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="drone">
620
+ <div class="genre-name">Drone</div>
621
+ <div class="genre-description">Sustained tones, minimal change, meditative</div>
622
+ </div>
623
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="plunderphonics">
624
+ <div class="genre-name">Plunderphonics</div>
625
+ <div class="genre-description">Audio collage, sample manipulation</div>
626
+ </div>
627
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="musique concrète">
628
+ <div class="genre-name">Musique Concrète</div>
629
+ <div class="genre-description">Found sounds, field recordings as music</div>
630
+ </div>
631
+ </div>
632
+ </div>
633
+
634
+ <!-- METAL FAMILY -->
635
+ <div class="genre-family">
636
+ <div class="family-header" onclick="toggleFamily(this)">🤘 METAL</div>
637
+ <div class="subgenres">
638
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="heavy metal">
639
+ <div class="genre-name">Heavy Metal</div>
640
+ <div class="genre-description">Distorted guitars, powerful vocals, dark themes</div>
641
+ </div>
642
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="death metal">
643
+ <div class="genre-name">Death Metal</div>
644
+ <div class="genre-description">Growled vocals, blast beats, extreme</div>
645
+ </div>
646
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="black metal">
647
+ <div class="genre-name">Black Metal</div>
648
+ <div class="genre-description">Shrieked vocals, tremolo picking, atmospheric</div>
649
+ </div>
650
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="doom metal">
651
+ <div class="genre-name">Doom Metal</div>
652
+ <div class="genre-description">Slow tempo, heavy riffs, dark atmosphere</div>
653
+ </div>
654
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="thrash metal">
655
+ <div class="genre-name">Thrash Metal</div>
656
+ <div class="genre-description">Fast tempo, aggressive riffing, punk influence</div>
657
+ </div>
658
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="progressive metal">
659
+ <div class="genre-name">Progressive Metal</div>
660
+ <div class="genre-description">Complex structures, odd time signatures</div>
661
+ </div>
662
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="metalcore">
663
+ <div class="genre-name">Metalcore</div>
664
+ <div class="genre-description">Metal with hardcore punk, breakdowns</div>
665
+ </div>
666
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="djent">
667
+ <div class="genre-name">Djent</div>
668
+ <div class="genre-description">Palm-muted, syncopated riffs, polyrhythmic</div>
669
+ </div>
670
+ </div>
671
+ </div>
672
+
673
+ <!-- LATIN FAMILY -->
674
+ <div class="genre-family">
675
+ <div class="family-header" onclick="toggleFamily(this)">💃 LATIN</div>
676
+ <div class="subgenres">
677
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="reggaeton">
678
+ <div class="genre-name">Reggaeton</div>
679
+ <div class="genre-description">Dembow rhythm, Spanish rap/singing</div>
680
+ </div>
681
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="latin trap">
682
+ <div class="genre-name">Latin Trap</div>
683
+ <div class="genre-description">Trap beats with Spanish vocals</div>
684
+ </div>
685
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="salsa">
686
+ <div class="genre-name">Salsa</div>
687
+ <div class="genre-description">Cuban rhythms, brass section, clave</div>
688
+ </div>
689
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="bachata">
690
+ <div class="genre-name">Bachata</div>
691
+ <div class="genre-description">Romantic, guitar-based, Dominican</div>
692
+ </div>
693
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="cumbia">
694
+ <div class="genre-name">Cumbia</div>
695
+ <div class="genre-description">Colombian folk rhythm, accordion</div>
696
+ </div>
697
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="banda">
698
+ <div class="genre-name">Banda</div>
699
+ <div class="genre-description">Mexican brass band music</div>
700
+ </div>
701
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="corridos tumbados">
702
+ <div class="genre-name">Corridos Tumbados</div>
703
+ <div class="genre-description">Modern Mexican corridos with trap influence</div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+
708
+ <!-- COUNTRY/FOLK FAMILY -->
709
+ <div class="genre-family">
710
+ <div class="family-header" onclick="toggleFamily(this)">🤠 COUNTRY/FOLK</div>
711
+ <div class="subgenres">
712
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="country">
713
+ <div class="genre-name">Country</div>
714
+ <div class="genre-description">Storytelling, acoustic guitars, fiddle</div>
715
+ </div>
716
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="folk">
717
+ <div class="genre-name">Folk</div>
718
+ <div class="genre-description">Acoustic, traditional, storytelling</div>
719
+ </div>
720
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="bluegrass">
721
+ <div class="genre-name">Bluegrass</div>
722
+ <div class="genre-description">Fast picking, banjo, mandolin</div>
723
+ </div>
724
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="americana">
725
+ <div class="genre-name">Americana</div>
726
+ <div class="genre-description">Roots music, blend of folk/country/blues</div>
727
+ </div>
728
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="alt-country">
729
+ <div class="genre-name">Alt-Country</div>
730
+ <div class="genre-description">Country with rock/punk influence</div>
731
+ </div>
732
+ <div class="genre-item" onclick="toggleGenre(this)" data-genre="folk punk">
733
+ <div class="genre-name">Folk Punk</div>
734
+ <div class="genre-description">Acoustic punk, political, raw</div>
735
+ </div>
736
+ </div>
737
+ </div>
738
+
739
+ </div>
740
+
741
+ <!-- DAW Effects Page -->
742
+ <div class="effects-page" id="effectsPage">
743
+ <button class="back-btn" onclick="hideEffectsPage()">← Back to Genre Explorer</button>
744
+ <h2 style="text-align: center; color: #ff6600; margin-bottom: 30px; font-size: 2.5em;">🎛️ DAW Effects Guide</h2>
745
+
746
+ <div class="effect-category">EQ & Filters</div>
747
+ <div class="effects-grid">
748
+ <div class="effect-card">
749
+ <div class="effect-name">EQ (Equalizer)</div>
750
+ <div class="effect-description">Adjusts the balance of frequency components. Think of it as tone control on steroids.</div>
751
+ <div class="effect-params">
752
+ <div class="param">• Low/Bass: 20-250 Hz (warmth, boom)</div>
753
+ <div class="param">• Low-Mid: 250-500 Hz (muddiness)</div>
754
+ <div class="param">• Mid: 500-2000 Hz (presence)</div>
755
+ <div class="param">• High-Mid: 2-6 kHz (clarity)</div>
756
+ <div class="param">• High: 6-20 kHz (air, sparkle)</div>
757
+ </div>
758
+ <div class="use-case">Use: Cut mud at 200-400Hz, boost air at 10-15kHz</div>
759
+ </div>
760
+
761
+ <div class="effect-card">
762
+ <div class="effect-name">High/Low Pass Filter</div>
763
+ <div class="effect-description">Removes frequencies above (low-pass) or below (high-pass) a set point.</div>
764
+ <div class="effect-params">
765
+ <div class="param">• Cutoff Frequency: Where it starts cutting</div>
766
+ <div class="param">• Slope: How steep the cut is (dB/octave)</div>
767
+ <div class="param">• Resonance: Boost at cutoff point</div>
768
+ </div>
769
+ <div class="use-case">Use: High-pass vocals at 80Hz to remove rumble</div>
770
+ </div>
771
+ </div>
772
+
773
+ <div class="effect-category">Dynamics</div>
774
+ <div class="effects-grid">
775
+ <div class="effect-card">
776
+ <div class="effect-name">Compressor</div>
777
+ <div class="effect-description">Reduces dynamic range by making loud parts quieter. Makes everything more consistent.</div>
778
+ <div class="effect-params">
779
+ <div class="param">• Threshold: When it starts working</div>
780
+ <div class="param">• Ratio: How much to compress (4:1 = 4dB becomes 1dB)</div>
781
+ <div class="param">• Attack: How fast it reacts</div>
782
+ <div class="param">• Release: How fast it lets go</div>
783
+ <div class="param">• Knee: Hard or soft transition</div>
784
+ </div>
785
+ <div class="use-case">Use: 3:1 ratio for vocals, 10:1 for limiting</div>
786
+ </div>
787
+
788
+ <div class="effect-card">
789
+ <div class="effect-name">Limiter</div>
790
+ <div class="effect-description">Extreme compressor that prevents signal from exceeding a set level. The brick wall.</div>
791
+ <div class="effect-params">
792
+ <div class="param">• Ceiling: Maximum output level</div>
793
+ <div class="param">• Release: How quickly it recovers</div>
794
+ <div class="param">• Lookahead: Anticipates peaks</div>
795
+ </div>
796
+ <div class="use-case">Use: On master bus to prevent clipping</div>
797
+ </div>
798
+
799
+ <div class="effect-card">
800
+ <div class="effect-name">Gate</div>
801
+ <div class="effect-description">Cuts signal when it falls below threshold. Removes background noise.</div>
802
+ <div class="effect-params">
803
+ <div class="param">• Threshold: When gate closes</div>
804
+ <div class="param">• Attack: How fast it opens</div>
805
+ <div class="param">• Hold: Stays open time</div>
806
+ <div class="param">• Release: How fast it closes</div>
807
+ </div>
808
+ <div class="use-case">Use: Clean up drum recordings, remove amp hiss</div>
809
+ </div>
810
+ </div>
811
+
812
+ <!-- More effects would continue here... -->
813
+
814
+ </div>
815
+
816
+ <script>
817
+ let selectedGenres = new Set();
818
+
819
+ function showEffectsPage() {
820
+ document.getElementById('effectsPage').classList.add('active');
821
+ }
822
+
823
+ function hideEffectsPage() {
824
+ document.getElementById('effectsPage').classList.remove('active');
825
+ }
826
+
827
+ function toggleFamily(header) {
828
+ const subgenres = header.nextElementSibling;
829
+ subgenres.classList.toggle('open');
830
+ }
831
+
832
+ function toggleGenre(element) {
833
+ const genre = element.dataset.genre;
834
+
835
+ if (selectedGenres.has(genre)) {
836
+ selectedGenres.delete(genre);
837
+ element.classList.remove('selected');
838
+ } else {
839
+ selectedGenres.add(genre);
840
+ element.classList.add('selected');
841
+ }
842
+
843
+ updatePromptDisplay();
844
+ }
845
+
846
+ function updatePromptDisplay() {
847
+ const display = document.getElementById('promptDisplay');
848
+ const count = document.getElementById('selectedCount');
849
+
850
+ if (selectedGenres.size === 0) {
851
+ display.textContent = 'Click genres below to build your prompt...';
852
+ count.textContent = '0 genres selected';
853
+ } else {
854
+ display.textContent = Array.from(selectedGenres).join(', ');
855
+ count.textContent = `${selectedGenres.size} genre${selectedGenres.size === 1 ? '' : 's'} selected`;
856
+ }
857
+ }
858
+
859
+ function copyPrompt() {
860
+ const promptText = Array.from(selectedGenres).join(', ');
861
+ if (promptText) {
862
+ navigator.clipboard.writeText(promptText);
863
+
864
+ // Visual feedback
865
+ const btn = event.target;
866
+ const originalText = btn.textContent;
867
+ btn.textContent = 'Copied!';
868
+ btn.style.background = '#00ff00';
869
+
870
+ setTimeout(() => {
871
+ btn.textContent = originalText;
872
+ btn.style.background = '';
873
+ }, 1500);
874
+ }
875
+ }
876
+
877
+ function clearSelection() {
878
+ selectedGenres.clear();
879
+ document.querySelectorAll('.genre-item.selected').forEach(item => {
880
+ item.classList.remove('selected');
881
+ });
882
+ updatePromptDisplay();
883
+ }
884
+
885
+ function loadCombo(genres) {
886
+ clearSelection();
887
+ const genreList = genres.split(', ');
888
+
889
+ genreList.forEach(genre => {
890
+ const element = document.querySelector(`[data-genre="${genre}"]`);
891
+ if (element) {
892
+ selectedGenres.add(genre);
893
+ element.classList.add('selected');
894
+ }
895
+ });
896
+
897
+ updatePromptDisplay();
898
+ }
899
+
900
+ // Open first family by default
901
+ document.querySelector('.subgenres').classList.add('open');
902
+ </script>
903
+ </body>
904
+ </html>