1 files changed, 66 insertions, 6 deletions
diff --git a/index.html b/index.html
index b0687db..746b359 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Triangle / Lambdoma</title>
@@ -84,7 +85,7 @@
         right: 0;
         height: 100%;
         padding: 0.5rem;
-        z-index: 1;
+        z-index: 1001;
         transition: opacity 0.2s;
         overflow: scroll;
         opacity: 0;
@@ -173,13 +174,13 @@
       #help li {
         line-height: 1.4;
       }
-      #help-button {
+      .ui-button {
         position: fixed;
         top: 0;
         right: 0;
         z-index: 12345;
         cursor: pointer;
-        margin: 0.75rem;
+        margin: 9px;
         width: 32px;
         height: 32px;
         display: flex;
@@ -190,10 +191,14 @@
         border-radius: 50%;
         background: rgba(0, 0, 0, 0.25);
         backdrop-filter: blur(20px);
+        transition: background 0.1s;
         line-height: 0;
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
       }
-      #help-button span {
+      .ui-button:hover {
+        background: rgba(0, 0, 0, 0.5);
+      }
+      .ui-button span {
         display: flex;
         flex: 1;
         justify-content: center;
@@ -202,6 +207,39 @@
         font-size: 20px;
         height: 100%;
       }
+      .ui-button svg {
+        width: 24px;
+        height: 24px;
+      }
+      .ui-button svg path {
+        filter: drop-shadow(0px 0.75px 1px rgb(0 0 0 / 0.4));
+      }
+      .ui-button .bandpass path {
+        stroke: white;
+        stroke-width: 1.5px;
+        stroke-linecap: round;
+      }
+      .ui-button .sine path {
+        stroke: white;
+        stroke-width: 20px;
+      }
+      #help-button {
+        top: 0;
+      }
+      #modus {
+        top: 50px;
+      }
+      #modus .bandpass,
+      #modus .sine {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        opacity: 0;
+        transition: opacity 0.1s ease-out;
+      }
+      #modus .visible {
+        opacity: 1;
+      }
       .mode {
         cursor: pointer;
       }
@@ -239,6 +277,9 @@
             Right-click notes to turn on sine waves matching the interval.
           </li>
           <li>
+            Resonator mode puts white noise through tuned bandpass filters.
+          </li>
+          <li>
             Drag-and-drop samples into the window to play with your own sounds.
           </li>
         </ul>
@@ -279,7 +320,7 @@
               <td>Detect MIDI device (listening on channel 1)</td>
             </tr>
             <tr>
-              <td>⇧ +<br />⇧ -</td>
+              <td>⌘ +<br />⌘ -</td>
               <td>Change scale root by +/- 1 hz</td>
             </tr>
             <tr>
@@ -509,7 +550,26 @@
       </div>
       <br />
     </div>
-    <div id="help-button"><span>?</span></div>
+    <div class="ui-button" id="help-button"><span>?</span></div>
+    <div class="ui-button" id="modus">
+      <svg viewBox="0 0 24 24" class="bandpass">
+        <path d="M5 5h3m4 0h9" />
+        <path d="M3 10h11m4 0h1" />
+        <path d="M5 15h5m4 0h7" />
+        <path d="M3 20h9m4 0h3" />
+      </svg>
+
+      <svg viewBox="0 0 256 256" class="sine">
+        <path
+          d="M24,128c104-224,104,224,208,0"
+          fill="none"
+          stroke="#000"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="8"
+        />
+      </svg>
+    </div>
   </body>
   <script src="bundle.js"></script>
 </html>