|
|
<!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> |
