Add some labels to the form fields

[zombocom-ai] / index.html

diff --git a/index.html b/index.html
index 7cc2c6cd9e4d5ca0952ccdf5afbea7ab83907c48..cfd8f6ade61513f5e095758a3a2343f1e5c31f16 100644 (file)
--- a/index.html
+++ b/index.html
@@ -22,25 +22,33 @@
   </div>
 
   <p>
-    Welcome to Zombocom.
+    Welcome to Zombocom. You can do anything at Zombcom, anything at
+    all. The only limit is yourself!
   </p>
 
   <p>
-    You can do anything at Zombcom, anything at all.
-  </p>
+    <form action="" id="zombo-form">
+      <div class="form-row large">
+        <label for="prompt">
+          What do you imagine?
+        </label>
+        <input id="prompt" autocomplete="off" required />
+      </div>
 
-  <p>
-    The only limit is yourself.
-  </p>
+      <div class="form-row small left">
+        <label for="code">
+          Numeric code
+        </label>
+        <input id="code" autocomplete="off" placeholder="(Chosen randomly)" />
+      </div>
 
-  <p>
-    What do you imagine?
+      <div class="form-row small right">
+        <button>Safety prompt</button>
+      </div>
 
-    <form id="form" action="">
-      <input id="prompt" autocomplete="off" />
-      <input id="code" />
-      <button>Safety prompt</button>
-      <button>Make the infinite possible</button>
+      <div class="form-row large">
+        <button>Make the infinite possible</button>
+      </div>
     </form>
   </p>
 
@@ -53,14 +61,14 @@
   </div>
 
   <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
-  <button id="button" class="fade">
+  <button id="mute" class="fade volume">
     <div>🔊</div>
     <script>
-const button = document.querySelector("#button");
-const icon = document.querySelector("#button > div");
+const mute = document.querySelector("#mute");
+const icon = document.querySelector("#mute > div");
 const audio = document.querySelector("audio");
 
-button.addEventListener("click", () => {
+mute.addEventListener("click", () => {
   if (audio.paused) {
       audio.volume = 0.2;
       audio.play();
@@ -69,7 +77,7 @@ button.addEventListener("click", () => {
       audio.pause();
       icon.innerHTML = "🔊";
   }
-  button.classList.add("fade");
+  mute.classList.add("fade");
 });
     </script>