From 444245c0f54210284f8b6faf313af6063f9fc2a2 Mon Sep 17 00:00:00 2001
From: Bel LaPointe <breel@qualtrics.com>
Date: Sun, 9 Apr 2023 11:37:46 -0600
Subject: [PATCH] sh

---
 src/device/input/raw/public/root.html | 80 +++++++++++++++++++--------
 1 file changed, 56 insertions(+), 24 deletions(-)
diff --git a/src/device/input/raw/public/root.html b/src/device/input/raw/public/root.html
index ee23bcf..d2d54d3 100644
--- a/src/device/input/raw/public/root.html
+++ b/src/device/input/raw/public/root.html
@@ -2,11 +2,19 @@
 <html>
   <header>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
+    <script>
+      function formsay(message) {
+         console.log(`say '${message}'`)
+      }
+      function formsend(message) {
+         console.log(`send '${message}'`)
+      }
+    </script>
   </header>
   <body>
-    <form>
-      <h3>WHO AM I</h3>
-      <div>
+    <div>
+      <form>
+        <h3>WHO AM I</h3>
         <select id="user">
           <option>bel</option>
           <option>zach</option>
@@ -16,28 +24,52 @@
           <option>roxy</option>
           <option>bill</option>
         </select>
+      </form>
+      <div>
+        <form action="" onsubmit="formsay(this.children.say.value); return false;" style="display: inline-block;">
+          <h3>SAY</h3>
+          <input type="text" name="say">
+          <input type="submit" value="say">
+        </form>
+        <form action="" onsubmit="formsend(this.children.send.value); return false;" style="display: inline-block;">
+          <h3>SEND</h3>
+          <select name="send">
+            <option>bel</option>
+            <option>zach</option>
+            <option>chase</option>
+            <option>mason</option>
+            <option>nat</option>
+            <option>roxy</option>
+            <option>bill</option>
+          </select>
+          <input type="submit" value="send">
+        </form>
       </div>
-      <h3>CONTROLS</h3>
-      <div id="controls" style="display: flex; flex-wrap: wrap;">
-        <div>
-          <input type="text" maxLength=1 value="w" name="w" placeholder="up" onchange="recontrol()">
-          <input type="text" maxLength=1 value="s" name="s" placeholder="down" onchange="recontrol()">
-          <input type="text" maxLength=1 value="a" name="a" placeholder="left" onchange="recontrol()">
-          <input type="text" maxLength=1 value="d" name="d" placeholder="right" onchange="recontrol()">
-        </div>
-        <div>
-          <input type="text" maxLength=1 value="5" name="5" placeholder="start" onchange="recontrol()">
-          <input type="text" maxLength=1 value="q" name="q" placeholder="l" onchange="recontrol()">
-          <input type="text" maxLength=1 value="e" name="e" placeholder="r" onchange="recontrol()">
-        </div>
-        <div>
-          <input type="text" maxLength=1 value="1" name="1" placeholder="a" onchange="recontrol()">
-          <input type="text" maxLength=1 value="2" name="2" placeholder="b" onchange="recontrol()">
-          <input type="text" maxLength=1 value="3" name="3" placeholder="x" onchange="recontrol()">
-          <input type="text" maxLength=1 value="4" name="4" placeholder="y" onchange="recontrol()">
-        </div>
-      </div>
-    </form>
+      <details>
+        <summary>CONTROLS</summary>
+        <form id="controls">
+          <div style="display: flex; flex-wrap: wrap;">
+            <div>
+              <input type="text" maxLength=1 value="w" name="w" placeholder="up" onchange="recontrol()">
+              <input type="text" maxLength=1 value="s" name="s" placeholder="down" onchange="recontrol()">
+              <input type="text" maxLength=1 value="a" name="a" placeholder="left" onchange="recontrol()">
+              <input type="text" maxLength=1 value="d" name="d" placeholder="right" onchange="recontrol()">
+            </div>
+            <div>
+              <input type="text" maxLength=1 value="5" name="5" placeholder="start" onchange="recontrol()">
+              <input type="text" maxLength=1 value="q" name="q" placeholder="l" onchange="recontrol()">
+              <input type="text" maxLength=1 value="e" name="e" placeholder="r" onchange="recontrol()">
+            </div>
+            <div>
+              <input type="text" maxLength=1 value="1" name="1" placeholder="a" onchange="recontrol()">
+              <input type="text" maxLength=1 value="2" name="2" placeholder="b" onchange="recontrol()">
+              <input type="text" maxLength=1 value="3" name="3" placeholder="x" onchange="recontrol()">
+              <input type="text" maxLength=1 value="4" name="4" placeholder="y" onchange="recontrol()">
+            </div>
+          </div>
+        </form>
+      </details>
+    </div>
     <div id="ntfy"></div>
     <div id="ws"></div>
   </body>
