cleaned backend

templates/errors/404.html

@@ -0,0 +1,82 @@
+{% extends "bases/base.html" %}
+
+{% block title %}404 - Not Found{% endblock %}
+{% block description %}The page you are looking for does not exist.{% endblock %}
+
+{% block head %}
+<link rel="stylesheet" href="/static/css/404.css">
+<link rel="stylesheet" href="/static/css/cap.css">
+{% endblock %}
+
+{% block content %}
+<section>
+    <h1>404</h1>
+    <p>
+        It seems like the thing you are looking for is not here :[
+        <br><br>
+        <span class="pcOnly">
+        while you're here, why not play some snake?
+        </span>
+        <span class="mobileOnly">
+        You can't play snake on mobile, sorry :(
+        </span>
+    </p>
+    <div class="pcOnly" id="snakeContainer">
+        <canvas id="snakeCanvas"></canvas>
+    </div>
+</section>
+<section class="pcOnly flex-row">
+    <section class="min-width">
+        <h2>Submit score</h2>
+        <form action="/snake/submit" method="POST" id="snakeForm">
+            <input type="text" id="name" name="name" placeholder="Your name" required>
+            <cap-widget id="captcha" data-cap-api-endpoint="https://cap.alfieking.dev/57d36430b9cb/api/"></cap-widget>
+            <input type="hidden" id="score" name="score" value="0">
+            <input type="hidden" id="game_token" name="game_token" value="{{ token}}">
+            <button type="submit" id="submit">Submit</button>
+        </form>
+    </section>
+    <section class="max-width" id="snakeLeaderboardSection">
+        <h2>Leaderboard</h2>
+        <ul id="snakeLeaderboard">
+            {% for score in scores %}
+            <li>
+                <span>{{ score.position }}</span>
+                <span>{{ score.name }}</span>
+                <span>{{ score.score }}</span>
+            </li>
+            {% endfor %}
+        </ul>
+    </section>
+</section>
+<section class="max-width mobileOnly" id="snakeLeaderboardSection">
+    <h2>Leaderboard</h2>
+    <ul id="snakeLeaderboard">
+        {% for score in scores %}
+        <li>
+            <span>{{ score.position }}</span>
+            <span>{{ score.name }}</span>
+            <span>{{ score.score }}</span>
+        </li>
+        {% endfor %}
+    </ul>
+</section>
+{% if error %}
+<dialog id="errorDialog">
+    <h2>Error</h2>
+    <p>{{ error }}</p>
+    <button onclick="errorDialog.close()">Close</button>
+</dialog>
+<script>
+    const errorDialog = document.getElementById('errorDialog');
+    if (errorDialog) {
+        errorDialog.showModal();
+    }
+</script>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/snake.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@cap.js/widget"></script>
+{% endblock %}