From 6dad2f054a7b809d3b9a6a9865d7d4af07b6d7d0 Mon Sep 17 00:00:00 2001
From: ergz <emnlrodriguez@gmail.com>
Date: Sun, 8 Oct 2023 00:22:40 -0700
Subject: [PATCH] redesign of voices layout

---
 synth.html | 236 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 136 insertions(+), 100 deletions(-)
diff --git a/synth.html b/synth.html
index 62b8ce0..91b327d 100644
--- a/synth.html
+++ b/synth.html
@@ -5,121 +5,157 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
-
+    
     <title>simple-synth</title>
 </head>
 <body class="bg-gray-100 p-10 mb-5">
     <script src="synth.js"></script>
-    
-    <div class="bg-white p-2 rounded-lg mb-5">
-        <form>
-            <legend class="text-lg mb-2">Voice 1</legend>  
-            <input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
-            <label for="wave1_sinwave">Sine</label>
-            <input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
-            <label for="wave1_squarewave">Square</label>
-            <input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
-            <label for="wave1_triwave">Triangle</label>
-            <input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
-            <label for="wave1_sawtoothwave">Sawtooth</label>
-        </form>
+    <div class="flex justify-between">
         
-        <div class="flex items-center space-x-2 my-3">
-            <fieldset>
-                <legend>Octave Selection</legend>
-                <button id="octavedown1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
-                <input type="text" id="octavedisplay1" value="0" readonly class="text-center text-sm w-6 border py-2">
-                <button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
-            </fieldset>
+        
+        <div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+            <form>
+                <legend class="text-lg mb-2">Voice 1</legend>  
+                <input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
+                <label for="wave1_sinwave">Sine</label>
+                <input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
+                <label for="wave1_squarewave">Square</label>
+                <input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
+                <label for="wave1_triwave">Triangle</label>
+                <input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
+                <label for="wave1_sawtoothwave">Sawtooth</label>
+            </form>
+            
+            <div class="flex items-center space-x-2 my-3">
+                <fieldset>
+                    <legend>Octave Selection</legend>
+                    <button id="octavedown1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
+                    <input type="text" id="octavedisplay1" value="0" readonly class="text-center text-sm w-6 border py-2">
+                    <button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
+                </fieldset>
+            </div>
+            
+            <div style="padding: 5px">
+                <label for="detunevoice1" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>    
+                <input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
+                <span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
+            </div>
+            
+            <button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
         </div>
         
-        <div style="padding: 5px">
-            <label for="detunevoice1" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>    
-            <input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300  h-2 rounded-full outline-none"/>
-            <span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
+        <div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+            
+            <form style="padding: 5px">
+                <legend class="text-lg mb-2">Voice 2</legend>  
+                <input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
+                <label for="wave2_sinwave">Sine</label>
+                <input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
+                <label for="wave2_squarewave">Square</label>
+                <input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
+                <label for="wave2_triwave">Triangle</label>
+                <input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
+                <label for="wave2_sawtoothwave">Sawtooth</label>
+            </form>
+            <div class="flex items-center space-x-2 my-3">
+                <fieldset>
+                    <legend>Octave Selection</legend>
+                    <button id="octavedown2" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
+                    <input type="text" id="octavedisplay2" value="0" readonly style="width: 2em; text-align: center;">
+                    <button id="octaveup2" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
+                </fieldset>
+            </div>
+            
+            <button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
         </div>
         
-        <button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
+        <div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
+            
+            <form style="padding: 5px">
+                <legend>Voice 3</legend>  
+                <input type="radio" id="wave3_sinwave" name="wavechoice2" value="sine" checked>
+                <label for="wave3_sinwave">Sine</label>
+                <input type="radio" id="wave3_squarewave" name="wavechoice2" value="square">
+                <label for="wave3_squarewave">Square</label>
+                <input type="radio" id="wave3_triwave" name="wavechoice2" value="triangle">
+                <label for="wave3_triwave">Triangle</label>
+                <input type="radio" id="wave3_sawtoothwave" name="wavechoice2" value="sawtooth">
+                <label for="wave3_sawtoothwave">Sawtooth</label>
+            </form>
+            <div style="padding: 5px">
+                <fieldset>
+                    <legend>Octave Selection</legend>
+                    <button id="octavedown3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
+                    <input type="text" id="octavedisplay3" value="0" readonly style="width: 2em; text-align: center;">
+                    <button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
+                </fieldset>
+            </div>
+            
+            <button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
+        </div>
+        
+        
+        
+        
+        
     </div>
-    
     <div>
-        
-        <form style="padding: 5px">
-            <legend>Voice 2</legend>  
-            <input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
-            <label for="wave2_sinwave">Sine</label>
-            <input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
-            <label for="wave2_squarewave">Square</label>
-            <input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
-            <label for="wave2_triwave">Triangle</label>
-            <input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
-            <label for="wave2_sawtoothwave">Sawtooth</label>
-        </form>
-        <div style="padding: 5px">
+        <form style="padding: 15px">
             <fieldset>
-                <legend>Octave Selection</legend>
-                <button id="octavedown2">-</button>
-                <input type="text" id="octavedisplay2" value="0" readonly style="width: 2em; text-align: center;">
-                <button id="octaveup2">+</button>
+                <legend>Keyboard</legend>  
+                <input type="radio" id="noteC"  name="notechoice" value="C" checked>
+                <label for="C">C</label>
+                
+                <input type="radio" id="noteD" name="notechoice" value="D">
+                <label for="D">D</label>
+                
+                <input type="radio" id="noteE" name="notechoice" value="E">
+                <label for="E">E</label>
+                
+                <input type="radio" id="noteF" name="notechoice" value="F">
+                <label for="F">F</label>
+                
+                <input type="radio" id="noteG" name="notechoice" value="G">
+                <label for="G">G</label>
+                
+                <input type="radio" id="noteA" name="notechoice" value="A">
+                <label for="A">A</label>
+                
+                <input type="radio" id="noteB" name="notechoice" value="B">
+                <label for="B">B</label>
+                
             </fieldset>
-        </div>
-        
-        <button id="activateVoice2" style="background-color: greenyellow;">On</button>
-    </div>
-    
-    <div>
-        
-        <form style="padding: 5px">
-            <legend>Voice 2</legend>  
-            <input type="radio" id="wave3_sinwave" name="wavechoice2" value="sine" checked>
-            <label for="wave3_sinwave">Sine</label>
-            <input type="radio" id="wave3_squarewave" name="wavechoice2" value="square">
-            <label for="wave3_squarewave">Square</label>
-            <input type="radio" id="wave3_triwave" name="wavechoice2" value="triangle">
-            <label for="wave3_triwave">Triangle</label>
-            <input type="radio" id="wave3_sawtoothwave" name="wavechoice2" value="sawtooth">
-            <label for="wave3_sawtoothwave">Sawtooth</label>
         </form>
-        <div style="padding: 5px">
-            <fieldset>
-                <legend>Octave Selection</legend>
-                <button id="octavedown3">-</button>
-                <input type="text" id="octavedisplay3" value="0" readonly style="width: 2em; text-align: center;">
-                <button id="octaveup3">+</button>
-            </fieldset>
-        </div>
-        
-        <button id="activateVoice3" style="background-color: greenyellow;">On</button>
     </div>
-    
-    
-    <form style="padding: 15px">
-        <fieldset>
-            <legend>Keyboard</legend>  
-            <input type="radio" id="noteC"  name="notechoice" value="C" checked>
-            <label for="C">C</label>
-            
-            <input type="radio" id="noteD" name="notechoice" value="D">
-            <label for="D">D</label>
-            
-            <input type="radio" id="noteE" name="notechoice" value="E">
-            <label for="E">E</label>
-            
-            <input type="radio" id="noteF" name="notechoice" value="F">
-            <label for="F">F</label>
-            
-            <input type="radio" id="noteG" name="notechoice" value="G">
-            <label for="G">G</label>
-            
-            <input type="radio" id="noteA" name="notechoice" value="A">
-            <label for="A">A</label>
-            
-            <input type="radio" id="noteB" name="notechoice" value="B">
-            <label for="B">B</label>
-            
-        </fieldset>
-    </form>
-    
+    <div class="p-4">
+        <div class="flex">
+            <!-- White Keys -->
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">C</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">D</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">E</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">F</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">G</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">A</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">B</span>
+            </button>
+            <button class="bg-white h-24 w-12 border border-gray-400 relative">
+                <span class="absolute top-2 left-1/2 transform -translate-x-1/2">C</span>
+            </button>
+        </div>
+    </div>
     
     
     
