aboutsummaryrefslogtreecommitdiff
path: root/templates/index.html
blob: 26673d685b2d4a5c3106c3ef224b18a23069992d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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:
            {% for style in styles %}
            <input type="radio" id="{{ style.id }}" name="style" value="{{ style.id }}" {% if style.id == 'classic' %}checked{% endif %}>
            <label for="{{ style.id }}">{{ style.name }}</label> (<a href="{{ style.source }}">source</a>)
            {% endfor %}
        </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>