<div id="modal-chorus" class="modal">
  <div class="modal-header"><h3>Chorus</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Chorus</h3><label class="toggle-field"><input id="chorus-enabled" type="checkbox"><span>Chorus enabled</span></label><label class="slider-field"><span>Rate</span><output for="chorus-rate" id="chorus-rate-value">0.90 Hz</output><input id="chorus-rate" type="range" min="0.05" max="8" step="0.01" value="0.9"></label><label class="slider-field"><span>Depth</span><output for="chorus-depth" id="chorus-depth-value">8 ms</output><input id="chorus-depth" type="range" min="0.1" max="20" step="0.1" value="7.5"></label><label class="slider-field"><span>Base delay</span><output for="chorus-delay" id="chorus-delay-value">18 ms</output><input id="chorus-delay" type="range" min="1" max="40" step="0.1" value="18"></label><label class="slider-field"><span>Mix</span><output for="chorus-mix" id="chorus-mix-value">35%</output><input id="chorus-mix" type="range" min="0" max="1" step="0.01" value="0.35"></label><label class="slider-field"><span>Feedback</span><output for="chorus-feedback" id="chorus-feedback-value">0.12</output><input id="chorus-feedback" type="range" min="-0.95" max="0.95" step="0.01" value="0.12"></label></section></div>
</div>

<div id="modal-flanger" class="modal">
  <div class="modal-header"><h3>Flanger</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Flanger</h3><label class="toggle-field"><input id="flanger-enabled" type="checkbox"><span>Flanger enabled</span></label><label class="slider-field"><span>Rate</span><output for="flanger-rate" id="flanger-rate-value">0.25 Hz</output><input id="flanger-rate" type="range" min="0.05" max="10" step="0.01" value="0.25"></label><label class="slider-field"><span>Depth</span><output for="flanger-depth" id="flanger-depth-value">2 ms</output><input id="flanger-depth" type="range" min="0.1" max="8" step="0.1" value="1.8"></label><label class="slider-field"><span>Base delay</span><output for="flanger-delay" id="flanger-delay-value">3 ms</output><input id="flanger-delay" type="range" min="0.1" max="8" step="0.1" value="2.5"></label><label class="slider-field"><span>Mix</span><output for="flanger-mix" id="flanger-mix-value">45%</output><input id="flanger-mix" type="range" min="0" max="1" step="0.01" value="0.45"></label><label class="slider-field"><span>Feedback</span><output for="flanger-feedback" id="flanger-feedback-value">0.35</output><input id="flanger-feedback" type="range" min="-0.95" max="0.95" step="0.01" value="0.35"></label></section></div>
</div>

<div id="modal-phaser" class="modal">
  <div class="modal-header"><h3>Phaser</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Phaser</h3><label class="toggle-field"><input id="phaser-enabled" type="checkbox"><span>Phaser enabled</span></label><label class="slider-field"><span>Rate</span><output for="phaser-rate" id="phaser-rate-value">0.35 Hz</output><input id="phaser-rate" type="range" min="0.05" max="8" step="0.01" value="0.35"></label><label class="slider-field"><span>Depth</span><output for="phaser-depth" id="phaser-depth-value">0.75</output><input id="phaser-depth" type="range" min="0" max="1" step="0.01" value="0.75"></label><label class="slider-field"><span>Center</span><output for="phaser-center" id="phaser-center-value">900 Hz</output><input id="phaser-center" type="range" min="80" max="4000" step="10" value="900"></label><label class="slider-field"><span>Feedback</span><output for="phaser-feedback" id="phaser-feedback-value">0.20</output><input id="phaser-feedback" type="range" min="-0.95" max="0.95" step="0.01" value="0.2"></label><label class="slider-field"><span>Mix</span><output for="phaser-mix" id="phaser-mix-value">50%</output><input id="phaser-mix" type="range" min="0" max="1" step="0.01" value="0.5"></label><label class="slider-field"><span>Stages</span><output for="phaser-stages" id="phaser-stages-value">4</output><input id="phaser-stages" type="range" min="1" max="8" step="1" value="4"></label></section></div>
</div>

<div id="modal-tremolo" class="modal">
  <div class="modal-header"><h3>Tremolo</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Tremolo</h3><label class="toggle-field"><input id="tremolo-enabled" type="checkbox"><span>Tremolo enabled</span></label><label class="slider-field"><span>Rate</span><output for="tremolo-rate" id="tremolo-rate-value">4.00 Hz</output><input id="tremolo-rate" type="range" min="0.05" max="20" step="0.01" value="4"></label><label class="slider-field"><span>Depth</span><output for="tremolo-depth" id="tremolo-depth-value">50%</output><input id="tremolo-depth" type="range" min="0" max="1" step="0.01" value="0.5"></label></section></div>
</div>

<div id="modal-vibrato" class="modal">
  <div class="modal-header"><h3>Vibrato</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Vibrato</h3><label class="toggle-field"><input id="vibrato-enabled" type="checkbox"><span>Vibrato enabled</span></label><label class="slider-field"><span>Rate</span><output for="vibrato-rate" id="vibrato-rate-value">5.00 Hz</output><input id="vibrato-rate" type="range" min="0.1" max="12" step="0.01" value="5"></label><label class="slider-field"><span>Depth</span><output for="vibrato-depth" id="vibrato-depth-value">4 ms</output><input id="vibrato-depth" type="range" min="0.1" max="12" step="0.1" value="3.5"></label><label class="slider-field"><span>Base delay</span><output for="vibrato-delay" id="vibrato-delay-value">6 ms</output><input id="vibrato-delay" type="range" min="0.5" max="20" step="0.1" value="5.5"></label></section></div>
</div>

<div id="modal-auto-pan" class="modal">
  <div class="modal-header"><h3>Auto-pan</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Auto-pan</h3><label class="toggle-field"><input id="auto-pan-enabled" type="checkbox"><span>Auto-pan enabled</span></label><label class="slider-field"><span>Rate</span><output for="auto-pan-rate" id="auto-pan-rate-value">0.35 Hz</output><input id="auto-pan-rate" type="range" min="0.05" max="8" step="0.01" value="0.35"></label><label class="slider-field"><span>Depth</span><output for="auto-pan-depth" id="auto-pan-depth-value">100%</output><input id="auto-pan-depth" type="range" min="0" max="1" step="0.01" value="1"></label></section></div>
</div>

<div id="modal-rotary-speaker" class="modal">
  <div class="modal-header"><h3>Rotary speaker (Leslie)</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Rotary speaker (Leslie)</h3><label class="toggle-field"><input id="rotary-enabled" type="checkbox"><span>Rotary speaker enabled</span></label><label class="slider-field"><span>Rate</span><output for="rotary-rate" id="rotary-rate-value">0.80 Hz</output><input id="rotary-rate" type="range" min="0.05" max="8" step="0.01" value="0.8"></label><label class="slider-field"><span>Depth</span><output for="rotary-depth" id="rotary-depth-value">70%</output><input id="rotary-depth" type="range" min="0" max="1" step="0.01" value="0.7"></label><label class="slider-field"><span>Mix</span><output for="rotary-mix" id="rotary-mix-value">65%</output><input id="rotary-mix" type="range" min="0" max="1" step="0.01" value="0.65"></label><label class="slider-field"><span>Crossover</span><output for="rotary-crossover" id="rotary-crossover-value">900 Hz</output><input id="rotary-crossover" type="range" min="120" max="4000" step="10" value="900"></label></section></div>
</div>

<div id="modal-ring-modulation" class="modal">
  <div class="modal-header"><h3>Ring modulation</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Ring modulation</h3><label class="toggle-field"><input id="ring-mod-enabled" type="checkbox"><span>Ring modulation enabled</span></label><label class="slider-field"><span>Frequency</span><output for="ring-mod-frequency" id="ring-mod-frequency-value">30 Hz</output><input id="ring-mod-frequency" type="range" min="1" max="2000" step="1" value="30"></label><label class="slider-field"><span>Mix</span><output for="ring-mod-mix" id="ring-mod-mix-value">50%</output><input id="ring-mod-mix" type="range" min="0" max="1" step="0.01" value="0.5"></label></section></div>
</div>

<div id="modal-frequency-shifter" class="modal">
  <div class="modal-header"><h3>Frequency shifter</h3><button class="modal-close">&times;</button></div>
  <div class="modal-body"><section class="control-group"><h3>Frequency shifter</h3><label class="toggle-field"><input id="frequency-shifter-enabled" type="checkbox"><span>Frequency shifter enabled</span></label><label class="slider-field"><span>Shift</span><output for="frequency-shifter-shift" id="frequency-shifter-shift-value">120 Hz</output><input id="frequency-shifter-shift" type="range" min="-1500" max="1500" step="1" value="120"></label><label class="slider-field"><span>Mix</span><output for="frequency-shifter-mix" id="frequency-shifter-mix-value">100%</output><input id="frequency-shifter-mix" type="range" min="0" max="1" step="0.01" value="1"></label></section></div>
</div>
