mobile fix

templates/404.html

@@ -14,11 +14,18 @@
     <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>
-    <canvas id="snakeCanvas"></canvas>
+    <div class="pcOnly" id="snakeContainer">
+        <canvas id="snakeCanvas"></canvas>
+    </div>
 </section>
-<section class="flex-row">
+<section class="pcOnly flex-row">
     <section class="min-width">
         <h2>Submit score</h2>
         <form action="/404/submit" method="POST" id="snakeForm">
@@ -41,6 +48,18 @@
         </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>