mock up interface to send/receive data

2024-04-30 21:32:12 -04:00
parent c7bc507de9
commit 5cd372d715
3 changed files with 49 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Data Over Audio</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <script src="index.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <h1>Data Over Audio</h1>
+    <div class="panels">
+      <div>
+        <input type="text" id="text-to-send">
+        <button id="send-button">Send</button>
+        <h2>Sent</h2>
+        <textarea id="sent-data" rows="10" cols="40"></textarea><br />
+      </div>
+      <div>
+        <label>
+          <input type="checkbox" id="is-listening">Listening
+        </label>
+        <h2>Received</h2>
+        <textarea id="received-data" rows="10" cols="40"></textarea><br />
+      </div>
+    </div>
+  </body>
+</html>
--- a/index.js
+++ b/index.js
--- a/style.css
+++ b/style.css
@@ -0,0 +1,23 @@
+body {
+  background-color: darkolivegreen;
+}
+.panels {
+  display: flex
+}
+.panels > div {
+  border: 1px solid black;
+  background-color: darkslategray;
+  margin: 10px;
+  padding: 10px;
+  border-radius: 10px;
+  color: rgb(75, 185, 75);
+}
+.panels > div h2 {
+  background-color: gray;
+  border-bottom: 4px solid darkolivegreen;
+  color: black;
+}
+.panels > div textarea {
+  background-color: rgb(41, 59, 10);
+  color: rgb(75, 185, 75);
+}