| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Suno Genre Explorer</title> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | |
| | body { |
| | font-family: 'Inter', -apple-system, sans-serif; |
| | background: #0a0a0a; |
| | color: #fff; |
| | min-height: 100vh; |
| | padding: 20px; |
| | } |
| | |
| | .header { |
| | text-align: center; |
| | margin-bottom: 30px; |
| | } |
| | |
| | h1 { |
| | font-size: 2.5em; |
| | background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .subtitle { |
| | color: #888; |
| | font-size: 1.1em; |
| | margin-bottom: 20px; |
| | } |
| | |
| | .effects-btn { |
| | background: linear-gradient(135deg, #ff6600, #ff0099); |
| | color: #fff; |
| | border: none; |
| | padding: 12px 24px; |
| | border-radius: 25px; |
| | cursor: pointer; |
| | font-size: 1.1em; |
| | font-weight: bold; |
| | transition: all 0.3s; |
| | display: inline-block; |
| | } |
| | |
| | .effects-btn:hover { |
| | transform: scale(1.05); |
| | box-shadow: 0 5px 20px rgba(255, 102, 0, 0.4); |
| | } |
| | |
| | .prompt-builder { |
| | background: rgba(255, 255, 255, 0.05); |
| | border: 1px solid rgba(255, 255, 255, 0.1); |
| | border-radius: 12px; |
| | padding: 20px; |
| | margin-bottom: 30px; |
| | position: sticky; |
| | top: 20px; |
| | z-index: 100; |
| | } |
| | |
| | .prompt-display { |
| | background: #1a1a1a; |
| | border: 2px solid #00ffff; |
| | border-radius: 8px; |
| | padding: 15px; |
| | margin-bottom: 15px; |
| | min-height: 60px; |
| | font-family: 'Monaco', monospace; |
| | color: #00ffff; |
| | } |
| | |
| | .copy-btn { |
| | background: linear-gradient(90deg, #ff00ff, #00ffff); |
| | color: #000; |
| | border: none; |
| | padding: 10px 20px; |
| | border-radius: 20px; |
| | cursor: pointer; |
| | font-weight: bold; |
| | transition: transform 0.2s; |
| | } |
| | |
| | .copy-btn:hover { |
| | transform: scale(1.05); |
| | } |
| | |
| | .genre-container { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| | gap: 20px; |
| | margin-bottom: 40px; |
| | } |
| | |
| | .genre-family { |
| | background: rgba(255, 255, 255, 0.02); |
| | border: 1px solid rgba(255, 255, 255, 0.1); |
| | border-radius: 12px; |
| | overflow: hidden; |
| | } |
| | |
| | .family-header { |
| | background: linear-gradient(135deg, rgba(255, 0, 255, 0.2), rgba(0, 255, 255, 0.2)); |
| | padding: 15px; |
| | font-size: 1.2em; |
| | font-weight: bold; |
| | cursor: pointer; |
| | transition: background 0.3s; |
| | } |
| | |
| | .family-header:hover { |
| | background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3)); |
| | } |
| | |
| | .subgenres { |
| | padding: 10px; |
| | display: none; |
| | } |
| | |
| | .subgenres.open { |
| | display: block; |
| | } |
| | |
| | .genre-item { |
| | background: rgba(255, 255, 255, 0.05); |
| | margin: 5px; |
| | padding: 10px; |
| | border-radius: 8px; |
| | cursor: pointer; |
| | transition: all 0.2s; |
| | position: relative; |
| | } |
| | |
| | .genre-item:hover { |
| | background: rgba(0, 255, 255, 0.2); |
| | transform: translateX(5px); |
| | } |
| | |
| | .genre-item.selected { |
| | background: rgba(255, 0, 255, 0.3); |
| | border: 1px solid #ff00ff; |
| | } |
| | |
| | .genre-name { |
| | font-weight: bold; |
| | color: #ffff00; |
| | margin-bottom: 5px; |
| | } |
| | |
| | .genre-description { |
| | font-size: 0.85em; |
| | color: #ccc; |
| | line-height: 1.4; |
| | } |
| | |
| | .genre-artists { |
| | font-size: 0.8em; |
| | color: #888; |
| | margin-top: 5px; |
| | font-style: italic; |
| | } |
| | |
| | .clear-btn { |
| | background: #ff0066; |
| | color: #fff; |
| | border: none; |
| | padding: 8px 16px; |
| | border-radius: 20px; |
| | cursor: pointer; |
| | margin-left: 10px; |
| | } |
| | |
| | .selected-count { |
| | color: #00ffff; |
| | margin-left: 15px; |
| | font-size: 0.9em; |
| | } |
| | |
| | .quick-combos { |
| | margin-bottom: 30px; |
| | } |
| | |
| | .combo-title { |
| | color: #ff00ff; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .combo-buttons { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 10px; |
| | } |
| | |
| | .combo-btn { |
| | background: linear-gradient(135deg, #333, #444); |
| | color: #fff; |
| | border: 1px solid #666; |
| | padding: 8px 15px; |
| | border-radius: 20px; |
| | cursor: pointer; |
| | transition: all 0.2s; |
| | } |
| | |
| | .combo-btn:hover { |
| | background: linear-gradient(135deg, #444, #555); |
| | border-color: #00ffff; |
| | } |
| | |
| | |
| | .effects-page { |
| | display: none; |
| | position: fixed; |
| | top: 0; |
| | left: 0; |
| | right: 0; |
| | bottom: 0; |
| | background: #0a0a0a; |
| | overflow-y: auto; |
| | z-index: 1000; |
| | padding: 20px; |
| | } |
| | |
| | .effects-page.active { |
| | display: block; |
| | } |
| | |
| | .back-btn { |
| | background: #666; |
| | color: #fff; |
| | border: none; |
| | padding: 10px 20px; |
| | border-radius: 20px; |
| | cursor: pointer; |
| | margin-bottom: 20px; |
| | } |
| | |
| | .back-btn:hover { |
| | background: #888; |
| | } |
| | |
| | .effects-grid { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
| | gap: 20px; |
| | max-width: 1400px; |
| | margin: 0 auto; |
| | } |
| | |
| | .effect-card { |
| | background: rgba(255, 255, 255, 0.05); |
| | border: 1px solid rgba(255, 255, 255, 0.2); |
| | border-radius: 12px; |
| | padding: 20px; |
| | transition: all 0.3s; |
| | } |
| | |
| | .effect-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 30px rgba(255, 102, 0, 0.2); |
| | border-color: #ff6600; |
| | } |
| | |
| | .effect-name { |
| | font-size: 1.3em; |
| | color: #ff6600; |
| | margin-bottom: 10px; |
| | font-weight: bold; |
| | } |
| | |
| | .effect-description { |
| | color: #ccc; |
| | line-height: 1.6; |
| | margin-bottom: 15px; |
| | } |
| | |
| | .effect-params { |
| | background: rgba(0, 0, 0, 0.3); |
| | border-radius: 8px; |
| | padding: 10px; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .param { |
| | color: #00ffff; |
| | font-size: 0.9em; |
| | margin: 5px 0; |
| | } |
| | |
| | .use-case { |
| | font-size: 0.85em; |
| | color: #ffff00; |
| | font-style: italic; |
| | } |
| | |
| | .effect-category { |
| | font-size: 1.8em; |
| | color: #ff00ff; |
| | margin: 30px 0 20px; |
| | padding-bottom: 10px; |
| | border-bottom: 2px solid #ff00ff; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="header"> |
| | <h1>🎵 Suno Genre Explorer 🎵</h1> |
| | <p class="subtitle">Click genres to build your perfect prompt</p> |
| | <button class="effects-btn" onclick="showEffectsPage()">🎛️ DAW Effects Guide</button> |
| | </div> |
| | |
| | <div class="prompt-builder"> |
| | <div class="prompt-display" id="promptDisplay">Click genres below to build your prompt...</div> |
| | <div> |
| | <button class="copy-btn" onclick="copyPrompt()">Copy Prompt</button> |
| | <button class="clear-btn" onclick="clearSelection()">Clear All</button> |
| | <span class="selected-count" id="selectedCount">0 genres selected</span> |
| | </div> |
| | </div> |
| | |
| | <div class="quick-combos"> |
| | <div class="combo-title">Quick Combos:</div> |
| | <div class="combo-buttons"> |
| | <button class="combo-btn" onclick="loadCombo('trap, hyperpop, experimental')">Chaotic Energy</button> |
| | <button class="combo-btn" onclick="loadCombo('lo-fi hip hop, jazz rap, neo-soul')">Smooth Vibes</button> |
| | <button class="combo-btn" onclick="loadCombo('drill, trap, dark')">Dark & Heavy</button> |
| | <button class="combo-btn" onclick="loadCombo('house, disco, funk')">Dance Party</button> |
| | <button class="combo-btn" onclick="loadCombo('ambient, downtempo, ethereal')">Chill Zone</button> |
| | <button class="combo-btn" onclick="loadCombo('punk rock, emo, hardcore')">Angsty</button> |
| | </div> |
| | </div> |
| | |
| | <div class="genre-container"> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">🎤 HIP HOP</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="boom bap"> |
| | <div class="genre-name">Boom Bap</div> |
| | <div class="genre-description">Hard-hitting drums, jazz samples, dusty old-school NYC sound</div> |
| | <div class="genre-artists">DJ Premier, Pete Rock, KRS-One</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="trap"> |
| | <div class="genre-name">Trap</div> |
| | <div class="genre-description">808 drums, skittering hi-hats, dark atmospheric synths</div> |
| | <div class="genre-artists">T.I., Gucci Mane, Migos</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="drill"> |
| | <div class="genre-name">Drill</div> |
| | <div class="genre-description">Dark minimalist beats, ominous, nihilistic</div> |
| | <div class="genre-artists">Chief Keef, Pop Smoke</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="g-funk"> |
| | <div class="genre-name">G-Funk</div> |
| | <div class="genre-description">Smooth West Coast, P-Funk samples, high synth leads</div> |
| | <div class="genre-artists">Dr. Dre, Snoop Dogg</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="crunk"> |
| | <div class="genre-name">Crunk</div> |
| | <div class="genre-description">High-energy club beats, shouted hooks</div> |
| | <div class="genre-artists">Lil Jon, Three 6 Mafia</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="lo-fi hip hop"> |
| | <div class="genre-name">Lo-fi Hip Hop</div> |
| | <div class="genre-description">Mellow beats, vinyl crackle, study vibes</div> |
| | <div class="genre-artists">Nujabes, J Dilla</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="cloud rap"> |
| | <div class="genre-name">Cloud Rap</div> |
| | <div class="genre-description">Hazy, ethereal, dreamlike production</div> |
| | <div class="genre-artists">Lil B, A$AP Rocky, Yung Lean</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="jazz rap"> |
| | <div class="genre-name">Jazz Rap</div> |
| | <div class="genre-description">Jazz samples, live instruments, sophisticated</div> |
| | <div class="genre-artists">A Tribe Called Quest, Digable Planets</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="chopper"> |
| | <div class="genre-name">Chopper</div> |
| | <div class="genre-description">Extremely fast-paced, rapid-fire rapping</div> |
| | <div class="genre-artists">Tech N9ne, Twista</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="alternative hip hop"> |
| | <div class="genre-name">Alternative Hip Hop</div> |
| | <div class="genre-description">Experimental, eclectic samples, conscious lyrics</div> |
| | <div class="genre-artists">De La Soul, The Roots, Kendrick</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="hyphy"> |
| | <div class="genre-name">Hyphy</div> |
| | <div class="genre-description">Bay Area bounce, high-energy, quirky synths</div> |
| | <div class="genre-artists">Mac Dre, E-40</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="mumble rap"> |
| | <div class="genre-name">Mumble Rap</div> |
| | <div class="genre-description">Melodic, auto-tuned, vibe over lyrics</div> |
| | <div class="genre-artists">Young Thug, Lil Uzi Vert</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">✨ POP</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="pop"> |
| | <div class="genre-name">Pop</div> |
| | <div class="genre-description">Catchy hooks, polished production, radio-ready</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="hyperpop"> |
| | <div class="genre-name">Hyperpop</div> |
| | <div class="genre-description">Maximalist, pitched vocals, chaotic, glitchy</div> |
| | <div class="genre-artists">100 gecs, Charli XCX, SOPHIE</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="art pop"> |
| | <div class="genre-name">Art Pop</div> |
| | <div class="genre-description">Experimental pop, conceptual, avant-garde</div> |
| | <div class="genre-artists">Björk, Kate Bush, FKA twigs</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="indie pop"> |
| | <div class="genre-name">Indie Pop</div> |
| | <div class="genre-description">DIY aesthetic, jangly guitars, quirky</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="synth-pop"> |
| | <div class="genre-name">Synth-pop</div> |
| | <div class="genre-description">80s synths, electronic drums, nostalgic</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="k-pop"> |
| | <div class="genre-name">K-pop</div> |
| | <div class="genre-description">Korean pop, high production, genre fusion</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="dream pop"> |
| | <div class="genre-name">Dream Pop</div> |
| | <div class="genre-description">Ethereal, reverb-heavy, atmospheric vocals</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="bedroom pop"> |
| | <div class="genre-name">Bedroom Pop</div> |
| | <div class="genre-description">Lo-fi, intimate, DIY production</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">🎧 ELECTRONIC/DANCE</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="house"> |
| | <div class="genre-name">House</div> |
| | <div class="genre-description">Four-on-floor, soulful samples, 120-130 BPM</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="techno"> |
| | <div class="genre-name">Techno</div> |
| | <div class="genre-description">Repetitive, hypnotic, industrial, minimal</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="trance"> |
| | <div class="genre-name">Trance</div> |
| | <div class="genre-description">Euphoric builds, emotional, 130-140 BPM</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="drum and bass"> |
| | <div class="genre-name">Drum & Bass</div> |
| | <div class="genre-description">Fast breakbeats, heavy bass, 165-180 BPM</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="dubstep"> |
| | <div class="genre-name">Dubstep</div> |
| | <div class="genre-description">Wobble bass, sparse rhythms, 140 BPM</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="ambient"> |
| | <div class="genre-name">Ambient</div> |
| | <div class="genre-description">Atmospheric, textural, no drums</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="idm"> |
| | <div class="genre-name">IDM</div> |
| | <div class="genre-description">Complex rhythms, experimental, cerebral</div> |
| | <div class="genre-artists">Aphex Twin, Autechre</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="breakcore"> |
| | <div class="genre-name">Breakcore</div> |
| | <div class="genre-description">Chaotic breaks, extreme tempo, aggressive</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="future bass"> |
| | <div class="genre-name">Future Bass</div> |
| | <div class="genre-description">Wobbly synths, pitched vocals, emotional</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="jungle"> |
| | <div class="genre-name">Jungle</div> |
| | <div class="genre-description">Chopped breaks, ragga vocals, 160-180 BPM</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="garage"> |
| | <div class="genre-name">UK Garage</div> |
| | <div class="genre-description">2-step rhythms, shuffled beats, R&B vocals</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="hardstyle"> |
| | <div class="genre-name">Hardstyle</div> |
| | <div class="genre-description">Hard kicks, euphoric melodies, 150 BPM</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">💜 R&B/SOUL</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="r&b"> |
| | <div class="genre-name">R&B</div> |
| | <div class="genre-description">Smooth vocals, soulful, contemporary</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="neo-soul"> |
| | <div class="genre-name">Neo-Soul</div> |
| | <div class="genre-description">Live instruments, jazz influences, organic</div> |
| | <div class="genre-artists">D'Angelo, Erykah Badu</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="alternative r&b"> |
| | <div class="genre-name">Alternative R&B</div> |
| | <div class="genre-description">Experimental, moody, electronic elements</div> |
| | <div class="genre-artists">The Weeknd, Frank Ocean</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="trap soul"> |
| | <div class="genre-name">Trap Soul</div> |
| | <div class="genre-description">Trap beats with R&B vocals, atmospheric</div> |
| | <div class="genre-artists">Bryson Tiller</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="funk"> |
| | <div class="genre-name">Funk</div> |
| | <div class="genre-description">Groovy basslines, syncopated rhythms</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="new jack swing"> |
| | <div class="genre-name">New Jack Swing</div> |
| | <div class="genre-description">80s/90s R&B with hip hop beats</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="quiet storm"> |
| | <div class="genre-name">Quiet Storm</div> |
| | <div class="genre-description">Smooth, romantic, late-night vibes</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">🎸 ROCK</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="indie rock"> |
| | <div class="genre-name">Indie Rock</div> |
| | <div class="genre-description">Alternative, DIY ethos, diverse sounds</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="punk rock"> |
| | <div class="genre-name">Punk Rock</div> |
| | <div class="genre-description">Fast, aggressive, anti-establishment</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="emo"> |
| | <div class="genre-name">Emo</div> |
| | <div class="genre-description">Emotional, confessional lyrics, angsty</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="shoegaze"> |
| | <div class="genre-name">Shoegaze</div> |
| | <div class="genre-description">Wall of sound, reverb, ethereal vocals</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="post-punk"> |
| | <div class="genre-name">Post-punk</div> |
| | <div class="genre-description">Angular guitars, bass-driven, arty</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="math rock"> |
| | <div class="genre-name">Math Rock</div> |
| | <div class="genre-description">Complex time signatures, intricate</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="grunge"> |
| | <div class="genre-name">Grunge</div> |
| | <div class="genre-description">Distorted guitars, angsty vocals, Seattle sound</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="psychedelic rock"> |
| | <div class="genre-name">Psychedelic Rock</div> |
| | <div class="genre-description">Trippy effects, extended jams, experimental</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="garage rock"> |
| | <div class="genre-name">Garage Rock</div> |
| | <div class="genre-description">Raw, energetic, lo-fi production</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="surf rock"> |
| | <div class="genre-name">Surf Rock</div> |
| | <div class="genre-description">Reverb-heavy guitars, beach vibes</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="pop punk"> |
| | <div class="genre-name">Pop Punk</div> |
| | <div class="genre-description">Catchy melodies, punk energy, teenage angst</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">🌀 EXPERIMENTAL</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="noise"> |
| | <div class="genre-name">Noise</div> |
| | <div class="genre-description">Harsh, abrasive, unconventional</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="glitch"> |
| | <div class="genre-name">Glitch</div> |
| | <div class="genre-description">Digital errors as music, stutters</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="vaporwave"> |
| | <div class="genre-name">Vaporwave</div> |
| | <div class="genre-description">80s nostalgia, slowed samples, aesthetic</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="dark ambient"> |
| | <div class="genre-name">Dark Ambient</div> |
| | <div class="genre-description">Ominous, atmospheric, unsettling</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="industrial"> |
| | <div class="genre-name">Industrial</div> |
| | <div class="genre-description">Harsh, mechanical, aggressive</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="drone"> |
| | <div class="genre-name">Drone</div> |
| | <div class="genre-description">Sustained tones, minimal change, meditative</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="plunderphonics"> |
| | <div class="genre-name">Plunderphonics</div> |
| | <div class="genre-description">Audio collage, sample manipulation</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="musique concrète"> |
| | <div class="genre-name">Musique Concrète</div> |
| | <div class="genre-description">Found sounds, field recordings as music</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">🤘 METAL</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="heavy metal"> |
| | <div class="genre-name">Heavy Metal</div> |
| | <div class="genre-description">Distorted guitars, powerful vocals, dark themes</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="death metal"> |
| | <div class="genre-name">Death Metal</div> |
| | <div class="genre-description">Growled vocals, blast beats, extreme</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="black metal"> |
| | <div class="genre-name">Black Metal</div> |
| | <div class="genre-description">Shrieked vocals, tremolo picking, atmospheric</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="doom metal"> |
| | <div class="genre-name">Doom Metal</div> |
| | <div class="genre-description">Slow tempo, heavy riffs, dark atmosphere</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="thrash metal"> |
| | <div class="genre-name">Thrash Metal</div> |
| | <div class="genre-description">Fast tempo, aggressive riffing, punk influence</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="progressive metal"> |
| | <div class="genre-name">Progressive Metal</div> |
| | <div class="genre-description">Complex structures, odd time signatures</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="metalcore"> |
| | <div class="genre-name">Metalcore</div> |
| | <div class="genre-description">Metal with hardcore punk, breakdowns</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="djent"> |
| | <div class="genre-name">Djent</div> |
| | <div class="genre-description">Palm-muted, syncopated riffs, polyrhythmic</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">💃 LATIN</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="reggaeton"> |
| | <div class="genre-name">Reggaeton</div> |
| | <div class="genre-description">Dembow rhythm, Spanish rap/singing</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="latin trap"> |
| | <div class="genre-name">Latin Trap</div> |
| | <div class="genre-description">Trap beats with Spanish vocals</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="salsa"> |
| | <div class="genre-name">Salsa</div> |
| | <div class="genre-description">Cuban rhythms, brass section, clave</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="bachata"> |
| | <div class="genre-name">Bachata</div> |
| | <div class="genre-description">Romantic, guitar-based, Dominican</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="cumbia"> |
| | <div class="genre-name">Cumbia</div> |
| | <div class="genre-description">Colombian folk rhythm, accordion</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="banda"> |
| | <div class="genre-name">Banda</div> |
| | <div class="genre-description">Mexican brass band music</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="corridos tumbados"> |
| | <div class="genre-name">Corridos Tumbados</div> |
| | <div class="genre-description">Modern Mexican corridos with trap influence</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="genre-family"> |
| | <div class="family-header" onclick="toggleFamily(this)">🤠 COUNTRY/FOLK</div> |
| | <div class="subgenres"> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="country"> |
| | <div class="genre-name">Country</div> |
| | <div class="genre-description">Storytelling, acoustic guitars, fiddle</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="folk"> |
| | <div class="genre-name">Folk</div> |
| | <div class="genre-description">Acoustic, traditional, storytelling</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="bluegrass"> |
| | <div class="genre-name">Bluegrass</div> |
| | <div class="genre-description">Fast picking, banjo, mandolin</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="americana"> |
| | <div class="genre-name">Americana</div> |
| | <div class="genre-description">Roots music, blend of folk/country/blues</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="alt-country"> |
| | <div class="genre-name">Alt-Country</div> |
| | <div class="genre-description">Country with rock/punk influence</div> |
| | </div> |
| | <div class="genre-item" onclick="toggleGenre(this)" data-genre="folk punk"> |
| | <div class="genre-name">Folk Punk</div> |
| | <div class="genre-description">Acoustic punk, political, raw</div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | </div> |
| | |
| | |
| | <div class="effects-page" id="effectsPage"> |
| | <button class="back-btn" onclick="hideEffectsPage()">← Back to Genre Explorer</button> |
| | <h2 style="text-align: center; color: #ff6600; margin-bottom: 30px; font-size: 2.5em;">🎛️ DAW Effects Guide</h2> |
| | |
| | <div class="effect-category">EQ & Filters</div> |
| | <div class="effects-grid"> |
| | <div class="effect-card"> |
| | <div class="effect-name">EQ (Equalizer)</div> |
| | <div class="effect-description">Adjusts the balance of frequency components. Think of it as tone control on steroids.</div> |
| | <div class="effect-params"> |
| | <div class="param">• Low/Bass: 20-250 Hz (warmth, boom)</div> |
| | <div class="param">• Low-Mid: 250-500 Hz (muddiness)</div> |
| | <div class="param">• Mid: 500-2000 Hz (presence)</div> |
| | <div class="param">• High-Mid: 2-6 kHz (clarity)</div> |
| | <div class="param">• High: 6-20 kHz (air, sparkle)</div> |
| | </div> |
| | <div class="use-case">Use: Cut mud at 200-400Hz, boost air at 10-15kHz</div> |
| | </div> |
| | |
| | <div class="effect-card"> |
| | <div class="effect-name">High/Low Pass Filter</div> |
| | <div class="effect-description">Removes frequencies above (low-pass) or below (high-pass) a set point.</div> |
| | <div class="effect-params"> |
| | <div class="param">• Cutoff Frequency: Where it starts cutting</div> |
| | <div class="param">• Slope: How steep the cut is (dB/octave)</div> |
| | <div class="param">• Resonance: Boost at cutoff point</div> |
| | </div> |
| | <div class="use-case">Use: High-pass vocals at 80Hz to remove rumble</div> |
| | </div> |
| | </div> |
| | |
| | <div class="effect-category">Dynamics</div> |
| | <div class="effects-grid"> |
| | <div class="effect-card"> |
| | <div class="effect-name">Compressor</div> |
| | <div class="effect-description">Reduces dynamic range by making loud parts quieter. Makes everything more consistent.</div> |
| | <div class="effect-params"> |
| | <div class="param">• Threshold: When it starts working</div> |
| | <div class="param">• Ratio: How much to compress (4:1 = 4dB becomes 1dB)</div> |
| | <div class="param">• Attack: How fast it reacts</div> |
| | <div class="param">• Release: How fast it lets go</div> |
| | <div class="param">• Knee: Hard or soft transition</div> |
| | </div> |
| | <div class="use-case">Use: 3:1 ratio for vocals, 10:1 for limiting</div> |
| | </div> |
| | |
| | <div class="effect-card"> |
| | <div class="effect-name">Limiter</div> |
| | <div class="effect-description">Extreme compressor that prevents signal from exceeding a set level. The brick wall.</div> |
| | <div class="effect-params"> |
| | <div class="param">• Ceiling: Maximum output level</div> |
| | <div class="param">• Release: How quickly it recovers</div> |
| | <div class="param">• Lookahead: Anticipates peaks</div> |
| | </div> |
| | <div class="use-case">Use: On master bus to prevent clipping</div> |
| | </div> |
| | |
| | <div class="effect-card"> |
| | <div class="effect-name">Gate</div> |
| | <div class="effect-description">Cuts signal when it falls below threshold. Removes background noise.</div> |
| | <div class="effect-params"> |
| | <div class="param">• Threshold: When gate closes</div> |
| | <div class="param">• Attack: How fast it opens</div> |
| | <div class="param">• Hold: Stays open time</div> |
| | <div class="param">• Release: How fast it closes</div> |
| | </div> |
| | <div class="use-case">Use: Clean up drum recordings, remove amp hiss</div> |
| | </div> |
| | </div> |
| | |
| | |
| | |
| | </div> |
| | |
| | <script> |
| | let selectedGenres = new Set(); |
| | |
| | function showEffectsPage() { |
| | document.getElementById('effectsPage').classList.add('active'); |
| | } |
| | |
| | function hideEffectsPage() { |
| | document.getElementById('effectsPage').classList.remove('active'); |
| | } |
| | |
| | function toggleFamily(header) { |
| | const subgenres = header.nextElementSibling; |
| | subgenres.classList.toggle('open'); |
| | } |
| | |
| | function toggleGenre(element) { |
| | const genre = element.dataset.genre; |
| | |
| | if (selectedGenres.has(genre)) { |
| | selectedGenres.delete(genre); |
| | element.classList.remove('selected'); |
| | } else { |
| | selectedGenres.add(genre); |
| | element.classList.add('selected'); |
| | } |
| | |
| | updatePromptDisplay(); |
| | } |
| | |
| | function updatePromptDisplay() { |
| | const display = document.getElementById('promptDisplay'); |
| | const count = document.getElementById('selectedCount'); |
| | |
| | if (selectedGenres.size === 0) { |
| | display.textContent = 'Click genres below to build your prompt...'; |
| | count.textContent = '0 genres selected'; |
| | } else { |
| | display.textContent = Array.from(selectedGenres).join(', '); |
| | count.textContent = `${selectedGenres.size} genre${selectedGenres.size === 1 ? '' : 's'} selected`; |
| | } |
| | } |
| | |
| | function copyPrompt() { |
| | const promptText = Array.from(selectedGenres).join(', '); |
| | if (promptText) { |
| | navigator.clipboard.writeText(promptText); |
| | |
| | |
| | const btn = event.target; |
| | const originalText = btn.textContent; |
| | btn.textContent = 'Copied!'; |
| | btn.style.background = '#00ff00'; |
| | |
| | setTimeout(() => { |
| | btn.textContent = originalText; |
| | btn.style.background = ''; |
| | }, 1500); |
| | } |
| | } |
| | |
| | function clearSelection() { |
| | selectedGenres.clear(); |
| | document.querySelectorAll('.genre-item.selected').forEach(item => { |
| | item.classList.remove('selected'); |
| | }); |
| | updatePromptDisplay(); |
| | } |
| | |
| | function loadCombo(genres) { |
| | clearSelection(); |
| | const genreList = genres.split(', '); |
| | |
| | genreList.forEach(genre => { |
| | const element = document.querySelector(`[data-genre="${genre}"]`); |
| | if (element) { |
| | selectedGenres.add(genre); |
| | element.classList.add('selected'); |
| | } |
| | }); |
| | |
| | updatePromptDisplay(); |
| | } |
| | |
| | |
| | document.querySelector('.subgenres').classList.add('open'); |
| | </script> |
| | </body> |
| | </html> |
