206 lines
7.9 KiB
HTML
206 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web Tuner</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="layout.css">
|
|
<link rel="stylesheet" href="tuner.css">
|
|
<link id="theme-stylesheet" rel="stylesheet" href="chords-light.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>Web Tuner</h1>
|
|
<div class="header-actions">
|
|
<div class="audio-sliders">
|
|
<label for="audio-vol">Vol</label>
|
|
<input type="range" id="audio-vol" min="0" max="100" value="70">
|
|
<label for="audio-profile">Tone</label>
|
|
<input type="range" id="audio-profile" min="0" max="100" value="15">
|
|
<label for="audio-strum">Strum</label>
|
|
<input type="range" id="audio-strum" min="0" max="150" value="60">
|
|
<select id="audio-engine">
|
|
<option value="pluck">Pluck</option>
|
|
<option value="sample">Sample</option>
|
|
<option value="synth">Synth</option>
|
|
</select>
|
|
</div>
|
|
<button id="btn-export">Export PDF</button>
|
|
<select id="theme-select">
|
|
<option value="light">Light</option>
|
|
<option value="default">Purple</option>
|
|
<option value="solarized">Solarized</option>
|
|
<option value="tomorrow-amoled">Tomorrow AMOLED</option>
|
|
<option value="darcula">Darcula</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app-shell">
|
|
<div class="sidebar">
|
|
<div class="nav-links">
|
|
<button class="nav-link active" data-view="tuner">Tuner</button>
|
|
<button class="nav-link" data-view="chords">Chords</button>
|
|
<button class="nav-link" data-view="shapes">Explorer</button>
|
|
</div>
|
|
|
|
<div class="sidebar-section filter-section" style="display:none;">
|
|
<h3>Filter by Root</h3>
|
|
<div class="filter-row" id="root-filters"></div>
|
|
<h3 style="margin-top:0.5rem;">Filter by Quality</h3>
|
|
<div class="filter-row" id="quality-filters"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-section shapes-section" id="shapes-section" style="display:none;">
|
|
<h3>Score Set</h3>
|
|
<div class="set-selector-row">
|
|
<select id="score-set-select"></select>
|
|
</div>
|
|
<div id="shape-list" class="shape-list"></div>
|
|
<div class="shape-editor-actions">
|
|
<button id="btn-add-shape" class="btn-small">Add Shape</button>
|
|
<button id="btn-restore-shapes" class="btn-small">Restore Defaults</button>
|
|
</div>
|
|
|
|
<div id="shape-editor" class="shape-editor" style="display:none;">
|
|
<label for="shape-name-input">Name</label>
|
|
<input type="text" id="shape-name-input" placeholder="Shape name">
|
|
<label>Frets (low→high, -1 = mute)</label>
|
|
<div class="shape-fret-inputs" id="shape-fret-inputs"></div>
|
|
<div class="shape-editor-btns">
|
|
<button id="btn-shape-save" class="btn-small btn-apply">Save</button>
|
|
<button id="btn-shape-cancel" class="btn-small">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin-top:0.75rem;">Target Chord</h3>
|
|
<label for="shape-quality-select">Quality</label>
|
|
<select id="shape-quality-select"></select>
|
|
|
|
<label for="shape-root-select">Root</label>
|
|
<select id="shape-root-select">
|
|
<option value="-1">Any</option>
|
|
</select>
|
|
|
|
<h3 style="margin-top:0.75rem;">Pin Voicing</h3>
|
|
<div class="voicing-row" id="voicing-row"></div>
|
|
|
|
<div class="config-actions" style="margin-top:0.5rem;">
|
|
<button class="btn-apply" id="btn-shape-search">Search</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-section config-panel">
|
|
<h3>Configuration</h3>
|
|
<label for="preset-select">Preset</label>
|
|
<select id="preset-select"></select>
|
|
|
|
<label>Tuning</label>
|
|
<div class="tuning-grid" id="tuning-grid"></div>
|
|
|
|
<label for="frets-input">Frets</label>
|
|
<input type="number" id="frets-input" min="1" max="24" value="4">
|
|
|
|
<label for="fingers-input">Max Fingers</label>
|
|
<input type="number" id="fingers-input" min="1" max="6" value="4">
|
|
|
|
<h3 style="margin-top:0.75rem;">Tuning Range</h3>
|
|
<label for="baseline-shift">Baseline Shift (semitones)</label>
|
|
<input type="number" id="baseline-shift" value="0" min="-24" max="24">
|
|
<div style="display:flex; gap:0.5rem;">
|
|
<div style="flex:1">
|
|
<label for="range-down">Range Down</label>
|
|
<input type="number" id="range-down" value="7" min="0" max="24">
|
|
</div>
|
|
<div style="flex:1">
|
|
<label for="range-up">Range Up</label>
|
|
<input type="number" id="range-up" value="7" min="0" max="24">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="config-actions">
|
|
<button class="btn-apply" id="btn-apply">Apply</button>
|
|
<button id="btn-save">Save</button>
|
|
<button id="btn-reset">Reset</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div id="view-tuner" class="view active">
|
|
<div style="display:flex; justify-content:center; align-items:center; flex:1;">
|
|
<div class="container">
|
|
<h1 id="instrument-label">Guitar Tuner</h1>
|
|
<div class="instrument-select">
|
|
<label for="instrument">Select Instrument:</label>
|
|
<select id="instrument">
|
|
<option value="ukulele">Ukulele</option>
|
|
<option value="guitar" selected>Guitar</option>
|
|
</select>
|
|
</div>
|
|
<div class="tuning-controls">
|
|
<div class="a440-control">
|
|
<label for="a440">A4 Reference (Hz):</label>
|
|
<input type="number" id="a440" value="440">
|
|
</div>
|
|
<div class="transpose-control">
|
|
<label for="transpose">Transpose (Semitones):</label>
|
|
<input type="number" id="transpose" value="0">
|
|
</div>
|
|
<div class="tuning-mode-select">
|
|
<label for="tuning-mode">Tuning Mode:</label>
|
|
<select id="tuning-mode">
|
|
<option value="equal">Equal Temperament</option>
|
|
<option value="harmonic">Harmonic Tuning</option>
|
|
</select>
|
|
</div>
|
|
<div class="tuning-select">
|
|
<label for="tuning">Select Tuning:</label>
|
|
<select id="tuning"></select>
|
|
</div>
|
|
</div>
|
|
<div id="strings"></div>
|
|
<button id="play-all">Play All Strings</button>
|
|
<div id="output"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view-chords" class="view">
|
|
<div id="chord-container"></div>
|
|
<div id="chord-loading" class="loading">Loading chord fingerings...</div>
|
|
</div>
|
|
|
|
<div id="view-shapes" class="view">
|
|
<div id="shapes-results"></div>
|
|
<div id="shapes-loading" class="loading" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div id="view-sets-editor" class="view">
|
|
<div class="sets-editor">
|
|
<div class="sets-editor-header">
|
|
<button id="btn-back-explorer" class="btn-small">Back to Explorer</button>
|
|
<h2>Score Sets Editor</h2>
|
|
</div>
|
|
<div class="sets-editor-body">
|
|
<div class="sets-editor-list" id="sets-editor-list"></div>
|
|
<div class="sets-editor-detail" id="sets-editor-detail"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="vendor/tone.min.js"></script>
|
|
<script src="vendor/WebAudioFontPlayer.js"></script>
|
|
<script src="vendor/guitar_sample.js"></script>
|
|
<script src="app.js"></script>
|
|
<script src="tuner.js"></script>
|
|
<script src="chords.js"></script>
|
|
<script src="shapes.js"></script>
|
|
<script src="sets-editor.js"></script>
|
|
</body>
|
|
</html>
|