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 Zombcom, 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           <input id="prompt" autocomplete="off" required />
  38         </div>
  39
  40         <div class="form-row small left">
  41           <label for="code">
  42             Numeric code
  43           </label>
  44           <input id="code" autocomplete="off" placeholder="(Chosen randomly)" />
  45         </div>
  46
  47         <div class="form-row small right">
  48           <button id="safety" type="button">Safety prompt</button>
  49           <script>
  50             const prompt = document.querySelector("#prompt");
  51             const safety= document.querySelector("#safety");
  52             // TODO: Dynamically generate many different prompts here
  53             safety.addEventListener("click", () => {
  54                 prompt.value = "Matte painting of a Samurai warrior";
  55                 return false;
  56             })
  57           </script>
  58         </div>
  59
  60         <div class="form-row large">
  61           <button type="submit">Make the infinite possible</button>
  62         </div>
  63       </form>
  64     </p>
  65
  66     <div align="center">
  67       <div class="animate-flicker">
  68         <p>
  69           <img src="/pngwheel.png" class="rotate thefade">
  70         </p>
  71       </div>
  72     </div>
  73
  74     <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
  75     <button id="mute" class="fade volume">
  76       <div>🔊</div>
  77       <script>
  78 const mute = document.querySelector("#mute");
  79 const icon = document.querySelector("#mute > div");
  80 const audio = document.querySelector("audio");
  81
  82 mute.addEventListener("click", () => {
  83   if (audio.paused) {
  84       audio.volume = 0.2;
  85       audio.play();
  86       icon.innerHTML = "🔈";
  87   } else {
  88       audio.pause();
  89       icon.innerHTML = "🔊";
  90   }
  91   mute.classList.add("fade");
  92 });
  93       </script>
  94
  95     </button>
  96
  97   </div>
  98 </body>
  99 </html>