diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 47 |
1 files changed, 40 insertions, 7 deletions
@@ -10,7 +10,40 @@ <canvas id="canvas-bg"></canvas> <canvas id="canvas-fg"></canvas> </main> - <aside class="controls"> + <aside class="pattern controls"> + <div class="control control--preset"> + <label for="pattern-preset">preset</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> + </label> + </div> + <div class="control"> + <label for="pattern-len">(semi)tones</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> + <aside class="layout"> <svg id="diagram" viewBox="-120 -145 240 260" @@ -65,8 +98,8 @@ 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> - <div class="preset-control"> + <div class="controls"> + <div class="control control--preset"> <label for="layout-preset">preset</label> <select id="layout-preset"> <option value="wicki-hayden">Wicki/Hayden</option> @@ -77,7 +110,7 @@ </select> </label> </div> - <div class="axis-control"> + <div class="control control--axis"> <label for="step-1">up</label> <input id="step-1" type="number" min="1" /> <label class="dir"> @@ -85,7 +118,7 @@ invert </label> </div> - <div class="axis-control"> + <div class="control control--axis"> <label for="step-2">hi right</label> <input id="step-2" type="number" min="1" /> <label class="dir"> @@ -93,7 +126,7 @@ invert </label> </div> - <div class="axis-control"> + <div class="control control--axis"> <label for="step-3">low right</label> <input id="step-3" type="number" min="1" /> <label class="dir"> @@ -103,6 +136,6 @@ </div> </div> </aside> - <script src="main.js"></script> + <script type="module" src="main.js"></script> </body> </html> |