Fix #24 : adds a 404 page.

8 years ago · f8796c6d04
1 changed files with 227 additions and 0 deletions
--- a/templates/404.html
+++ b/templates/404.html
@ -0,0 +1,227 @@
+{% comment %}
+Re2o est un logiciel d'administration développé initiallement au rezometz. Il
+se veut agnostique au réseau considéré, de manière à être installable en
+quelques clics.
+
+Copyright © 2018  Hugo Levy-Falk
+
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License along
+with this program; if not, write to the Free Software Foundation, Inc.,
+51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+{% endcomment %}
+
+{% load i18n %}
+{% load staticfiles %}
+
+<!DOCTYPE html>
+<html>
+    <head prefix="og: http://ogp.me/ns#">
+        <meta property="og:title" content="Re2o" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="{{ request.scheme }}://{{ request.get_host }}/" />
+        <meta property="og:image" content="{% static 'images/logo_re2o.svg' %}"/>
+        <meta property="og:image:type" content="image/svg"/>
+        <meta property="og:image:alt" content="The Re2o logo"/>
+        <meta property="og:description" content="Site de gestion de réseau supporté par FedeRez." />
+
+        <meta charset="utf-8">
+        <link rel="shortcut icon" type="image/svg" href="{% static 'images/logo_re2o.svg' %}">
+        <title>404, Page not Found</title>
+        <script src="/javascript/jquery/jquery.min.js"></script>
+        <script>
+var snake = [{x:0,y:0,vx:1,vy:0}];
+var bonus = [];
+var lost = false;
+var grid = 20;
+var score = 0;
+
+function update_snake() {
+    var l = snake.length;
+    var c = document.getElementById("myCanvas");
+    var width = c.width;
+    var height = c.height;
+    var last_case = {
+        x:snake[l-1].x,
+        y:snake[l-1].y,
+        vx:snake[l-1].vx,
+        vy:snake[l-1].vy
+    };
+    for(var i=l-1; i>=0; --i){
+        if(i == 0)
+        {
+            var m = bonus.length;
+            var remove = -1;
+            for(var j=0; j<m; ++j)
+            {
+                if((bonus[j].x == snake[i].x) && (bonus[j].y == snake[i].y))
+                {
+                    remove = j;
+                }
+            }
+            if(remove >= 0){
+                bonus.splice(remove, 1);
+                snake.push(last_case);
+                score += 1;
+            }
+        }
+        if((i > 0) && (snake[i].x == snake[0].x) && (snake[i].y == snake[0].y))
+        {
+            lost = true;
+        }
+        snake[i].x = (snake[i].x + snake[i].vx * grid + width)%width;
+        snake[i].y = (snake[i].y + snake[i].vy * grid + height)%height;
+        if(i>0)
+        {
+            snake[i].vx = snake[i-1].vx;
+            snake[i].vy = snake[i-1].vy;
+        }
+    }
+}
+
+function draw_snake() {
+    var l = snake.length;
+    var c = document.getElementById("myCanvas");
+    if(c.getContext) {
+        var ctx = c.getContext("2d");
+        for(var i=0; i<l; ++i){
+            ctx.fillStyle = "#2980b9";
+            ctx.fillRect(snake[i].x, snake[i].y, grid, grid);
+        }
+    }
+}
+
+function draw_bonus() {
+    var l = bonus.length;
+    var ctx = document.getElementById("myCanvas").getContext("2d");
+    for(var i=0; i<l; ++i)
+    {
+        ctx.beginPath();
+        var x = bonus[i].x;
+        var y = bonus[i].y;
+        ctx.beginPath();
+        ctx.arc(x+grid/2, y+grid/2, grid/2, 0, 2 * Math.PI, false);
+        ctx.fillStyle = '#2ecc71';
+        ctx.fill();
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = '#27ae60';
+        ctx.stroke();
+    }
+}
+
+function draw_score(){
+    var ctx = document.getElementById('myCanvas').getContext('2d');
+    ctx.font = '50px serif';
+    ctx.fillStyle = '#2ecc71';
+    ctx.fillText("{% trans "Score :"%} " + score, 10, 60);
+}
+
+function draw_lost(){
+    var c = document.getElementById("myCanvas");
+    var ctx = c.getContext('2d');
+    ctx.fillStyle = '#2ecc71';
+    ctx.font = '50px serif';
+    ctx.fillText("{% trans "YOU LOST" %}", c.width/2, c.height/2);
+}
+
+
+function update_bonus() {
+    var c = document.getElementById("myCanvas");
+    var width = c.width;
+    var height = c.height;
+    var x = (Math.floor(Math.random() * width / grid))*grid;
+    var y = (Math.floor(Math.random() * height / grid))*grid;
+    bonus.push({x:x, y:y});
+}
+
+function draw() {
+    var c = document.getElementById("myCanvas");
+    var width = c.width;
+    var height = c.height;
+    var ctx = c.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    if(!lost){
+        draw_snake();
+        draw_bonus();
+        draw_score();
+    }
+    else
+    {
+        draw_score();
+        draw_lost();
+    }
+}
+
+function on_keydown(e) {
+    if(e.which == 37) { // left
+        snake[0].vx = -1;
+        snake[0].vy = 0;
+    }
+    else if(e.which == 38) { // up
+        snake[0].vx = 0;
+        snake[0].vy = -1;
+    }
+    else if(e.which == 39) { // right
+        snake[0].vx = 1;
+        snake[0].vy = 0;
+    }
+    else if(e.which == 40) { // down
+        snake[0].vx = 0;
+        snake[0].vy = 1;
+    }
+}
+
+$("html").keydown(on_keydown);
+window.setInterval(draw, 100);
+window.setInterval(update_snake, 100);
+window.setInterval(update_bonus, 3000);
+
+        </script>
+<style>
+html {
+    background: #34495e;
+}
+h1 {
+    display:block;
+    text-align: center;
+    background: #2c3e50;
+    padding: 1em;
+    width: 80%;
+    margin: auto;
+    color: #ecf0f1;
+    margin-bottom: 1em;
+    margin-top: 1em;
+}
+a
+{
+    font-size: x-small;
+    color: #ecf0f1;
+}
+#myCanvas
+{
+    width:80%;
+    display:block;
+    margin-left:auto;
+    margin-right:auto;
+    height:50%;
+}
+</style>
+    </head>
+    <body>
+        <h1>{% trans "Yup, that's a 404 error."%} <a href="/">{% trans "(Go to a known place)"%}</a></h1>
+<canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #d3d3d3;">
+    {%trans "Your browser does not support the HTML5 canvas tag."%}
+</canvas>
+
+    </body>
+</html>
+