app prototype

Inspired by the MDN example for playing with mediaDevices.

1 files changed, 40 insertions, 1 deletions

diff --git a/index.html b/index.html
index 71b17c4..751187d 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,8 @@
   <link rel="mask-icon" href="favicon.svg" color="#000000">
   <link rel="apple-touch-icon" href="favicon.svg">
 
+  <link rel="stylesheet" href="app.css" type="text/css">
+
   <title>EchoClip</title>
 </head>
 
@@ -25,13 +27,50 @@
     <p>A web tool to record and play back audio clips.</p>
   </header>
 
+  <section id="error">
+    <noscript>
+      This web application requires JavaScript support to be functional.
+    </noscript>
+  </section>
+
+  <section>
+    <fieldset>
+      <legend>Record a new clip</legend>
+
+      <button id="record">Hold (space) to record</button>
+
+      <input type="checkbox" id="autoplay" name="autoplay" checked>
+      <label for="autoplay">Autoplay</label>
+    </fieldset>
+  </section>
+
+  <section>
+    <fieldset>
+      <legend>Saved clips</legend>
+
+      <p>
+        Latest on top.
+        Hold a number key (1-9) for quick replay.
+      </p>
+
+      <button id="clear">Clear all</button>
+
+      <ol id="clips">
+      </ol>
+    </fieldset>
+  </section>
+
   <footer>
+    <p>Speak, sing, practice, have fun! Nothing is sent out to the network.</p>
+
     <ul>
       <li><a href="https://pacien.org">&copy; 2024 Pacien</a></li>
       <li><a href="https://cgit.pacien.net/echoclip">Source code (EUPL)</a></li>
       <li><a href="https://www.paypal.com/paypalme/pacien/10">Donate</a></li>
     </ul>
   </footer>
+
+  <script src="app.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file