ergz
/
simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

redesign of voices layout

This commit is contained in:
Emanuel Rodriguez 2023-10-08 00:22:40 -07:00
parent 4de3ddb8ce
commit 6dad2f054a
1 changed files with 136 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
synth.html
View File

@ -10,8 +10,10 @@
</head>
<body class="bg-gray-100 p-10 mb-5">
<script src="synth.js"></script>
<div class="flex justify-between">
<div class="bg-white p-2 rounded-lg mb-5">
<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>
@ -42,10 +44,10 @@
<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>
<div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<form style="padding: 5px">
<legend>Voice 2</legend>
<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">
@ -55,22 +57,22 @@
<input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
<label for="wave2_sawtoothwave">Sawtooth</label>
</form>
<div style="padding: 5px">
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown2">-</button>
<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">+</button>
<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" style="background-color: greenyellow;">On</button>
<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>
<div>
<div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<form style="padding: 5px">
<legend>Voice 2</legend>
<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">
@ -83,16 +85,21 @@
<div style="padding: 5px">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown3">-</button>
<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">+</button>
<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" style="background-color: greenyellow;">On</button>
<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: 15px">
<fieldset>
<legend>Keyboard</legend>
@ -119,7 +126,36 @@
</fieldset>
</form>
</div>
<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>