diff options
| author | s-ol <s+removethis@s-ol.nu> | 2023-05-06 22:07:32 +0000 |
|---|---|---|
| committer | s-ol <s+removethis@s-ol.nu> | 2023-05-07 09:53:29 +0000 |
| commit | 1c981aea4dbecb3ca77efbafac1be7f12012327d (patch) | |
| tree | 1a02a0f607ca9a095b80760beef5c9529ecd1eb7 /index.html | |
| parent | restart with v2 (diff) | |
| download | isomorphic-kb-explorer-1c981aea4dbecb3ca77efbafac1be7f12012327d.tar.gz isomorphic-kb-explorer-1c981aea4dbecb3ca77efbafac1be7f12012327d.zip | |
add basic pattern highlighting
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> |