From 1c981aea4dbecb3ca77efbafac1be7f12012327d Mon Sep 17 00:00:00 2001
From: s-ol <s+removethis@s-ol.nu>
Date: Sun, 7 May 2023 00:07:32 +0200
Subject: add basic pattern highlighting

---
 index.html | 47 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 40 insertions(+), 7 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index dc67486..17fa2f1 100644
--- a/index.html
+++ b/index.html
@@ -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>
-- 
cgit v1.2.3