git.cworth.org Git - zombocom-ai/blob - index.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6   <title>ZOMBO</title>
   7   <link href="/zombo.css" rel="stylesheet" type="text/css">
   8   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
   9   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10   <meta name="HandheldFriendly" content="true">
  11 </head>
  12
  13 <body>
  14   <div id="content">
  15
  16     <div id="header" align="center">
  17       <p>
  18         <br>
  19       </p>
  20
  21       <p>
  22         <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
  23       </p>
  24     </div>
  25
  26     <p>
  27       Welcome to Zombocom. You can do anything at Zombocom, anything at
  28       all. The only limit is yourself!
  29     </p>
  30
  31     <p>
  32       <form action="" id="zombo-form">
  33         <div class="form-row large">
  34           <label for="prompt">
  35             What do you imagine?
  36           </label>
  37           <textarea id="prompt" rows="4" width="100%" autocomplete="off" required>
  38           </textarea>
  39         </div>
  40
  41         <div class="form-row small left">
  42           <div class="labeled-row">
  43             <label for="code">
  44               Numeric code:
  45             </label>
  46             <input id="code" type="text" autocomplete="off" placeholder="(Leave blank for random)" />
  47           </div>
  48         </div>
  49
  50         <div class="form-row small right">
  51           <button id="safety" class="right" type="button">Safety prompt</button>
  52           <script>
  53             const prompt = document.querySelector("#prompt");
  54             const safety= document.querySelector("#safety");
  55             // TODO: Dynamically generate many different prompts here
  56             safety.addEventListener("click", () => {
  57                 prompt.value = "Matte painting of a Samurai warrior";
  58                 return false;
  59             })
  60           </script>
  61         </div>
  62
  63         <div class="form-row large">
  64           <button id="generate" type="submit">Make the infinite possible</button>
  65         </div>
  66       </form>
  67     </p>
  68
  69     <ul id="comments">
  70     </ul>
  71
  72     <p>
  73       <form action="" id="comment-form">
  74         <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
  75       </form>
  76     </p>
  77
  78     <div align="center">
  79       <div class="animate-flicker">
  80         <p>
  81           <img src="/pngwheel.png" class="rotate thefade">
  82         </p>
  83       </div>
  84     </div>
  85
  86     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
  87     <button id="mute" class="fade volume">
  88       <div>🔊</div>
  89       <script>
  90 const mute = document.querySelector("#mute");
  91 const icon = document.querySelector("#mute > div");
  92 const audio = document.querySelector("audio");
  93
  94 mute.addEventListener("click", () => {
  95   if (audio.paused) {
  96       audio.volume = 0.2;
  97       audio.play();
  98       icon.innerHTML = "🔈";
  99   } else {
 100       audio.pause();
 101       icon.innerHTML = "🔊";
 102   }
 103   mute.classList.add("fade");
 104 });
 105       </script>
 106
 107     </button>
 108
 109   </div>
 110
 111   <script src="/socket.io/socket.io.js"></script>
 112   <script>
 113     var socket = io();
 114
 115     var comments = document.querySelector("#comments");
 116     var form = document.querySelector("#comment-form");
 117     var comment = document.querySelector("#comment");
 118
 119     form.addEventListener('submit', function(e) {
 120         e.preventDefault();
 121         if (comment.value) {
 122             socket.emit('comment', comment.value);
 123             comment.value = '';
 124         }
 125     });
 126
 127     socket.on('comment', function(msg) {
 128         var item = document.createElement('li');
 129         item.textContent = msg;
 130         comments.appendChild(item);
 131     });
 132   </script>
 133 </body>
 134 </html>