<div id="modal-pitch-shift" class="modal">
  <div class="modal-header"><h3>Pitch shift</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Pitch shift</h3><label class="toggle-field"><input id="pitch-shift-enabled" type="checkbox"><span>Pitch shift enabled</span></label><label class="slider-field"><span>Semitones</span><output for="pitch-shift-semitones" id="pitch-shift-semitones-value">0.0 st</output><input id="pitch-shift-semitones" type="range" min="-24" max="24" step="0.1" value="0"></label><label class="slider-field"><span>Mix</span><output for="pitch-shift-mix" id="pitch-shift-mix-value">100%</output><input id="pitch-shift-mix" type="range" min="0" max="1" step="0.01" value="1"></label></section></div>
</div>

<div id="modal-time-stretch" class="modal">
  <div class="modal-header"><h3>Time stretch</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Time stretch</h3><label class="toggle-field"><input id="time-stretch-enabled" type="checkbox"><span>Time stretch enabled</span></label><label class="slider-field"><span>Rate</span><output for="time-stretch-rate" id="time-stretch-rate-value">0.90x</output><input id="time-stretch-rate" type="range" min="0.5" max="0.99" step="0.01" value="0.9"></label><p class="status-line">Browser realtime preview uses the file transport with preserved pitch. For microphone input, this control is bypassed.</p></section></div>
</div>

<div id="modal-time-compression" class="modal">
  <div class="modal-header"><h3>Time compression</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Time compression</h3><label class="toggle-field"><input id="time-compression-enabled" type="checkbox"><span>Time compression enabled</span></label><label class="slider-field"><span>Rate</span><output for="time-compression-rate" id="time-compression-rate-value">1.15x</output><input id="time-compression-rate" type="range" min="1.01" max="2" step="0.01" value="1.15"></label><p class="status-line">Browser realtime preview uses the file transport with preserved pitch. For microphone input, this control is bypassed.</p></section></div>
</div>

<div id="modal-auto-tune" class="modal">
  <div class="modal-header"><h3>Auto-tune (pitch correction)</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Auto-tune (pitch correction)</h3><label class="toggle-field"><input id="auto-tune-enabled" type="checkbox"><span>Auto-tune enabled</span></label><label class="slider-field"><span>Strength</span><output for="auto-tune-strength" id="auto-tune-strength-value">70%</output><input id="auto-tune-strength" type="range" min="0" max="1" step="0.01" value="0.7"></label><label class="field"><span>Key</span><select id="auto-tune-key"><option>C</option><option>C#</option><option>D</option><option>D#</option><option>E</option><option>F</option><option>F#</option><option>G</option><option>G#</option><option>A</option><option>A#</option><option>B</option></select></label><label class="field"><span>Scale</span><select id="auto-tune-scale"><option value="chromatic">Chromatic</option><option value="major">Major</option><option value="minor">Minor</option><option value="pentatonic_major">Pentatonic major</option><option value="pentatonic_minor">Pentatonic minor</option></select></label><label class="slider-field"><span>Min Hz</span><output for="auto-tune-min-hz" id="auto-tune-min-hz-value">80 Hz</output><input id="auto-tune-min-hz" type="range" min="40" max="400" step="1" value="80"></label><label class="slider-field"><span>Max Hz</span><output for="auto-tune-max-hz" id="auto-tune-max-hz-value">1000 Hz</output><input id="auto-tune-max-hz" type="range" min="200" max="2000" step="1" value="1000"></label></section></div>
</div>

<div id="modal-harmonizer" class="modal">
  <div class="modal-header"><h3>Harmonizer</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Harmonizer</h3><label class="toggle-field"><input id="harmonizer-enabled" type="checkbox"><span>Harmonizer enabled</span></label><label class="slider-field"><span>Interval A</span><output for="harmonizer-interval-a" id="harmonizer-interval-a-value">7.0 st</output><input id="harmonizer-interval-a" type="range" min="-24" max="24" step="0.1" value="7"></label><label class="slider-field"><span>Interval B</span><output for="harmonizer-interval-b" id="harmonizer-interval-b-value">12.0 st</output><input id="harmonizer-interval-b" type="range" min="-24" max="24" step="0.1" value="12"></label><label class="slider-field"><span>Interval C</span><output for="harmonizer-interval-c" id="harmonizer-interval-c-value">0.0 st</output><input id="harmonizer-interval-c" type="range" min="-24" max="24" step="0.1" value="0"></label><label class="slider-field"><span>Mix</span><output for="harmonizer-mix" id="harmonizer-mix-value">35%</output><input id="harmonizer-mix" type="range" min="0" max="1" step="0.01" value="0.35"></label></section></div>
</div>

<div id="modal-octaver" class="modal">
  <div class="modal-header"><h3>Octaver</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Octaver</h3><label class="toggle-field"><input id="octaver-enabled" type="checkbox"><span>Octaver enabled</span></label><label class="slider-field"><span>Octaves down</span><output for="octaver-down" id="octaver-down-value">1</output><input id="octaver-down" type="range" min="0" max="2" step="1" value="1"></label><label class="slider-field"><span>Octaves up</span><output for="octaver-up" id="octaver-up-value">0</output><input id="octaver-up" type="range" min="0" max="1" step="1" value="0"></label><label class="slider-field"><span>Down mix</span><output for="octaver-down-mix" id="octaver-down-mix-value">45%</output><input id="octaver-down-mix" type="range" min="0" max="1" step="0.01" value="0.45"></label><label class="slider-field"><span>Up mix</span><output for="octaver-up-mix" id="octaver-up-mix-value">0%</output><input id="octaver-up-mix" type="range" min="0" max="1" step="0.01" value="0"></label></section></div>
</div>

<div id="modal-formant-shifting" class="modal">
  <div class="modal-header"><h3>Formant shifting</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Formant shifting</h3><label class="toggle-field"><input id="formant-shifting-enabled" type="checkbox"><span>Formant shifting enabled</span></label><label class="slider-field"><span>Shift</span><output for="formant-shifting-shift" id="formant-shifting-shift-value">1.12x</output><input id="formant-shifting-shift" type="range" min="0.5" max="1.8" step="0.01" value="1.12"></label><label class="slider-field"><span>Mix</span><output for="formant-shifting-mix" id="formant-shifting-mix-value">100%</output><input id="formant-shifting-mix" type="range" min="0" max="1" step="0.01" value="1"></label></section></div>
</div>
