From ee6ca5b32ea7e02a98e7cf5f150636a8d31b60cc Mon Sep 17 00:00:00 2001
From: s-ol <s+removethis@s-ol.nu>
Date: Sat, 2 Sep 2023 13:41:09 +0200
Subject: add synth panel

---
 index.html | 87 ++++++++++++++++++++++++++++++++++++++------------------------
 1 file changed, 54 insertions(+), 33 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 6ada1a8..ca5ebe7 100644
--- a/index.html
+++ b/index.html
@@ -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>
-- 
cgit v1.2.3