]> git.cworth.org Git - zombocom-ai/blobdiff - index.html
Simple reword of "Numeric code" placeholder text
[zombocom-ai] / index.html
index d82fb66b6ea688de986923494501892d828bb31a..3c37a7dcfb1ff872ea5e2bfc1424e2da173ec786 100644 (file)
 </head>
 
 <body>
-  <div align="center">
+  <div id="content">
+
+    <div id="header" align="center">
+      <p>
+        <br>
+      </p>
+
+      <p>
+        <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
+      </p>
+    </div>
+
     <p>
-      <br>
+      Welcome to Zombocom. You can do anything at Zombcom, anything at
+      all. The only limit is yourself!
     </p>
 
     <p>
-      <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
+      <form action="" id="zombo-form">
+        <div class="form-row large">
+          <label for="prompt">
+            What do you imagine?
+          </label>
+          <textarea id="prompt" rows="4" width="100%" autocomplete="off" required>
+          </textarea>
+        </div>
+
+        <div class="form-row small left">
+          <label for="code">
+            Numeric code
+          </label>
+          <input id="code" type="text" size="15" autocomplete="off" placeholder="(Leave blank for random)" />
+        </div>
+
+        <div class="form-row small right">
+          <button id="safety" class="right" type="button">Safety prompt</button>
+          <script>
+            const prompt = document.querySelector("#prompt");
+            const safety= document.querySelector("#safety");
+            // TODO: Dynamically generate many different prompts here
+            safety.addEventListener("click", () => {
+                prompt.value = "Matte painting of a Samurai warrior";
+                return false;
+            })
+          </script>
+        </div>
+
+        <div class="form-row large">
+          <button id="generate" type="submit">Make the infinite possible</button>
+        </div>
+      </form>
     </p>
-  </div>
 
-  <div align="center">
-   <div class="animate-flicker">
-     <p>
-       <img src="/pngwheel.png" class="rotate thefade">
-     </p>
-   </div>
-  </div>
+    <ul id="comments">
+    </ul>
+
+    <p>
+      <form action="" id="comment-form">
+        <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
+      </form>
+    </p>
+
+    <div align="center">
+      <div class="animate-flicker">
+        <p>
+          <img src="/pngwheel.png" class="rotate thefade">
+        </p>
+      </div>
+    </div>
 
-  <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
-  <button id="button" class="fade">
-    <div>🔊</div>
-    <script>
-const button = document.querySelector("#button");
-const icon = document.querySelector("#button > div");
+    <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
+    <button id="mute" class="fade volume">
+      <div>🔊</div>
+      <script>
+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();
@@ -46,10 +98,35 @@ button.addEventListener("click", () => {
       audio.pause();
       icon.innerHTML = "🔊";
   }
-  button.classList.add("fade");
+  mute.classList.add("fade");
 });
-    </script>
+      </script>
+
+    </button>
+
+  </div>
+
+  <script src="/socket.io/socket.io.js"></script>
+  <script>
+    var socket = io();
+
+    var comments = document.querySelector("#comments");
+    var form = document.querySelector("#comment-form");
+    var comment = document.querySelector("#comment");
+
+    form.addEventListener('submit', function(e) {
+        e.preventDefault();
+        if (comment.value) {
+            socket.emit('comment', comment.value);
+            comment.value = '';
+        }
+    });
 
-  </button>
+    socket.on('comment', function(msg) {
+        var item = document.createElement('li');
+        item.textContent = msg;
+        comments.appendChild(item);
+    });
+  </script>
 </body>
 </html>