5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
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">
16 <div id="header" align="center">
22 <img src="/zombocom.png" alt="Zombocom" longdesc="http://zombo.com" width="1199" height="217">
27 Welcome to Zombocom. You can do anything at Zombocom, anything at
28 all. The only limit is yourself!
32 <form action="" id="zombo-form">
33 <div class="form-row large">
37 <textarea id="prompt" rows="4" width="100%" autocomplete="off" required></textarea>
40 <div class="form-row small left">
41 <div class="labeled-row">
45 <input id="code" type="text" autocomplete="off" placeholder="(Leave blank for random)" />
49 <div class="form-row small right">
50 <button id="safety" class="right" type="button">Safety prompt</button>
53 <div class="form-row large">
54 <button id="generate" type="submit">Make the infinite possible</button>
66 <form action="" id="comment-form">
67 <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
72 <div class="animate-flicker">
74 <img src="/pngwheel.png" class="rotate thefade">
79 <audio loop="" src="/zombo_words.mp3" type="audio/mpeg"></audio>
80 <button id="mute" class="fade volume">
83 const mute = document.querySelector("#mute");
84 const icon = document.querySelector("#mute > div");
85 const audio = document.querySelector("audio");
87 mute.addEventListener("click", () => {
91 icon.innerHTML = "🔈";
94 icon.innerHTML = "🔊";
96 mute.classList.add("fade");
104 <script src="/socket.io/socket.io.js"></script>
108 const images = document.querySelector("#images");
110 const comments = document.querySelector("#comments");
111 const comment_form = document.querySelector("#comment-form");
112 const comment = document.querySelector("#comment");
114 const zombo_form = document.querySelector("#zombo-form");
115 const prompt = document.querySelector("#prompt");
116 const code = document.querySelector("#code");
118 const safety= document.querySelector("#safety");
120 comment_form.addEventListener('submit', function(e) {
123 socket.emit('comment', comment.value);
128 socket.on('comment', function(msg) {
129 var item = document.createElement('li');
130 item.textContent = msg;
131 comments.appendChild(item);
134 socket.on('image', (image) => {
135 const img = document.createElement('img');
136 img.src = image.filename;
137 const p_prompt = document.createElement('p');
138 const prompt_text = document.createTextNode(`Prompt: ${image.prompt}`);
139 p_prompt.appendChild(prompt_text);
140 const p_code = document.createElement('p');
141 const code_text = document.createTextNode(`Code: ${image.code}`);
142 p_code.appendChild(code_text);
143 images.appendChild(img);
144 images.appendChild(p_prompt);
145 images.appendChild(p_code);
148 zombo_form.addEventListener('submit', function(e) {
150 socket.emit('generate', {"prompt": prompt.value, "code": code.value});
154 // TODO: Dynamically generate many different prompts here
155 safety.addEventListener("click", () => {
156 prompt.value = "Matte painting of a Samurai warrior";