diff options
| author | Melody Horn <melody@boringcactus.com> | 2020-06-18 22:48:40 -0600 |
|---|---|---|
| committer | Melody Horn <melody@boringcactus.com> | 2020-06-18 22:48:40 -0600 |
| commit | bd569cc6c42da0dad02d2d3f5ef18d3ac06e319d (patch) | |
| tree | 42dc870a8433bc7068f56cd41efb14fd1f898a06 /templates/index.html | |
| parent | 6157c0172f9b078e7030bd493c842cf372292c74 (diff) | |
| download | crabravebot-bd569cc6c42da0dad02d2d3f5ef18d3ac06e319d.tar.gz crabravebot-bd569cc6c42da0dad02d2d3f5ef18d3ac06e319d.zip | |
rewrite in Python
Diffstat (limited to 'templates/index.html')
| -rw-r--r-- | templates/index.html | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..fa7bdd6 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,36 @@ +<html lang="en"> +<head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Crab Rave Bot</title> +</head> +<body> +<main> + <h1>it's a tool for adding things to crab rave</h1> + <form action="/render" method="GET"> + <textarea id="text" name="text" rows="6" cols="25"></textarea> + <input type="hidden" name="ext" value="mp4"> + <p> + Style: + <input type="radio" id="classic" name="style" value="classic" checked><label for="classic">Classic</label> + <input type="radio" id="otamatone" name="style" value="otamatone"><label for="otamatone">Otamatone</label> (<a + href="https://youtu.be/VI5I3MuKJlo">original</a> by TheRealSullyG) + <input type="radio" id="garfield" name="style" value="garfield"><label for="garfield">Garfield</label> (<a + href="https://twitter.com/jondancesto/status/1199796307218427904">original</a> by @jondancesto) + </p> + <input type="submit" value="Overlay!"> + </form> + <p><a href="https://t.me/crabravebot">also available as a Telegram bot</a></p> + <p>brought to you by <a href="https://www.boringcactus.com">boringcactus</a></p> +</main> +<img id="preview" style="max-width: 100%;" src="/render?style=classic&ext=png&text="> +<script type="text/javascript"> + const img = document.getElementById('preview'), + text = document.getElementById('text'), + classic = document.getElementById('classic'); + setInterval(() => { + let style = document.querySelector('input[name="style"]:checked').value; + img.src = "/render?style=" + encodeURIComponent(style) + '&ext=png&text=' + encodeURIComponent(text.value); + }, 1000); +</script> +</body> +</html> |