diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 87 |
1 files changed, 54 insertions, 33 deletions
@@ -10,37 +10,58 @@ <canvas id="canvas-bg"></canvas> <canvas id="canvas-fg"></canvas> </main> - <aside class="pattern controls"> - <div class="control control--preset"> - <label for="pattern-preset">pattern</label> - <select id="pattern-preset"> - <option value="custom">(custom)</option> - <optgroup label="scales"> - <option value="major-7" >major</option> - <option value="minor-7" >minor</option> - <option value="minor-harm-7">harmonic minor</option> - <option value="minor-mel-7" >melodic minor</option> - <option value="minor-hung-7">hungarian minor</option> - <option value="penta" >pentatonic</option> - </optgroup> - <optgroup label="triads"> - <option value="major-3" >major</option> - <option value="major-3+">augmented</option> - <option value="minor-3" >minor</option> - <option value="minor-3-">diminished</option> - </optgroup> - </select> - </div> - <div class="control"> - <label for="pattern-len">octave size</label> - <input id="pattern-len" type="number" min="4" value="12" /> - </div> - <div class="steps"> - <input type="checkbox" checked disabled /> - <input type="checkbox" /> - <input type="checkbox" /> - <input type="checkbox" /> - </div> + <aside class="pattern panel"> + <section id="pattern" class="controls"> + <div class="control control--preset"> + <label for="pattern-preset">pattern</label> + <select id="pattern-preset"> + <option value="custom">(custom)</option> + <optgroup label="scales"> + <option value="major-7" >major</option> + <option value="minor-7" >minor</option> + <option value="minor-harm-7">harmonic minor</option> + <option value="minor-mel-7" >melodic minor</option> + <option value="minor-hung-7">hungarian minor</option> + <option value="penta" >pentatonic</option> + </optgroup> + <optgroup label="triads"> + <option value="major-3" >major</option> + <option value="major-3+">augmented</option> + <option value="minor-3" >minor</option> + <option value="minor-3-">diminished</option> + </optgroup> + </select> + </div> + <div class="control"> + <label for="pattern-len">octave size</label> + <input id="pattern-len" type="number" min="4" value="12" /> + </div> + <div class="steps"> + <input type="checkbox" checked disabled /> + <input type="checkbox" /> + <input type="checkbox" /> + <input type="checkbox" /> + </div> + </section> + <section id="synth" class="controls"> + <div class="control control--toggle"> + <label for="synth-enabled">synth</label> + <input id="synth-enabled" type="checkbox" checked /> + </div> + <div class="control"> + <label for="synth-freq">center freq</label> + <input id="synth-freq" type="number" min="0" value="110" /> + </div> + <div class="control"> + <label for="synth-voices">voices</label> + <input id="synth-voices" type="number" min="1" max="32" value="8" /> + </div> + <div class="control control--toggle"> + <label><a href="synth.html" target="_blank">options</a></label> + <button id="synth-opts-paste">paste</button> + <button id="synth-opts-reset">reset</button> + </div> + </section> </aside> <aside class="layout"> <svg @@ -97,7 +118,7 @@ id="turn-cw" class="turn" transform="rotate(1.5)" d="M 63.875 -112.84961 L 59.068359 -104.08203 C 69.570355 -98.323686 70.491716 -97.891327 78.669922 -89.982422 L 74.099609 -85.28125 L 96.498047 -79.628906 L 95.910156 -81.712891 L 90.216797 -101.85938 L 85.628906 -97.140625 C 76.875667 -105.51066 74.458477 -107.04659 63.875 -112.84961 z " /> </svg> - <div class="controls"> + <section id="layout" class="panel controls"> <div class="control control--preset"> <label for="layout-preset">layout</label> <select id="layout-preset"> @@ -132,7 +153,7 @@ invert </label> </div> - </div> + </section> </aside> <script type="module" src="main.js"></script> </body> |