89 lines
3.6 KiB
HTML
89 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>KeySelector</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="topbar">
|
||
<div class="brand">KeySelector</div>
|
||
<div class="topbar-right">
|
||
<div class="status" id="listening-status" onclick="toggleListening()">
|
||
<i class="fa-solid fa-microphone"></i>
|
||
<span id="listening-text">Listening</span>
|
||
</div>
|
||
<button class="theme-toggle" id="theme-btn" onclick="toggleTheme()">Light</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero" id="hero">
|
||
<div class="cover" id="cover" onclick="toggleCover()" title="Click to expand">
|
||
<div class="cover-placeholder">
|
||
<span class="note">♪</span>
|
||
<span>No Cover</span>
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="info-top">
|
||
<button class="search-fallback-btn" onclick="promptManualSearch()"><i class="fa-solid fa-magnifying-glass"></i> Search</button>
|
||
<div class="track-title" id="track-title">Waiting...</div>
|
||
<div class="track-artist" id="track-artist">for audio input</div>
|
||
</div>
|
||
<div class="info-mid">
|
||
<div class="stats-row">
|
||
<div class="stat">
|
||
<div class="stat-label">Key</div>
|
||
<div class="stat-value k" id="stat-key">-</div>
|
||
<div class="stat-sub" id="stat-key-sub">-</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">BPM</div>
|
||
<div class="stat-value b" id="stat-bpm">-</div>
|
||
<div class="stat-sub">-</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Match</div>
|
||
<div class="stat-value m" id="stat-match">-</div>
|
||
<div class="stat-sub">acoustid</div>
|
||
</div>
|
||
</div>
|
||
<div class="tags-row" id="tags-row">
|
||
<!-- Tags will be populated here -->
|
||
</div>
|
||
</div>
|
||
<div class="info-bot">
|
||
<div class="wheel-container" id="wheel-container" onclick="toggleWheel()" title="Click to expand">
|
||
<svg viewBox="-110 -110 220 220" id="wheel-small" preserveAspectRatio="xMidYMid meet"></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="close-btn" id="close-btn" onclick="resetHero()" title="Close">×</button>
|
||
</div>
|
||
|
||
<div class="section-title">Up Next</div>
|
||
<div class="suggestions" id="suggestions"></div>
|
||
|
||
<div style="text-align: center; margin-top: 40px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim);">
|
||
BPM & Key data provided by <a href="https://getsongbpm.com" target="_blank" style="color: var(--text-dim); text-decoration: underline;">GetSongBPM</a>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="../shared/mixing-rules.js"></script>
|
||
<script src="../shared/color-matrix.js"></script>
|
||
<script src="../shared/camelot-angle.js"></script>
|
||
<script src="../shared/camelot-to-musickey.js"></script>
|
||
|
||
<script src="wheel.js"></script>
|
||
<script src="cover.js"></script>
|
||
<script src="search.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|