Coope-runner

coopeV3/urls.py

@@ -21,6 +21,7 @@ from . import views
 urlpatterns = [
     path('', views.home, name="home"),
     path('home', views.homepage, name="homepage"),
+    path('coope-runner', views.coope_runner, name="coope-runner"),
     path('admin/doc/', include('django.contrib.admindocs.urls')),
     path('admin/', admin.site.urls),
     path('users/', include('users.urls')),

coopeV3/views.py

@@ -17,3 +17,6 @@ def homepage(request):
     gp, _ = GeneralPreferences.objects.get_or_create(pk=1)
     kegs = Keg.objects.filter(is_active=True)
     return render(request, "home.html", {"home_text": gp.home_text, "kegs": kegs})
+
+def coope_runner(request):
+    return render(request, "coope-runner.html")

staticfiles/css/runner.css

@@ -0,0 +1,136 @@
+/* Copyright 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+html, body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  -webkit-user-select: none;
+  user-select: none;
+  display: inline-block;
+}
+
+.icon-offline {
+  content: -webkit-image-set( url(../runner-assets/default_100_percent/100-error-offline.png) 1x, url(../runner-assets/default_200_percent/200-error-offline.png) 2x);
+  position: relative;
+}
+
+.hidden {
+  display: none;
+}
+
+
+/* Offline page */
+
+.offline .interstitial-wrapper {
+  color: #2b2b2b;
+  font-size: 1em;
+  line-height: 1.55;
+  margin: 0 auto;
+  max-width: 600px;
+  padding-top: 100px;
+  width: 100%;
+}
+
+.offline .runner-container {
+  height: 150px;
+  max-width: 600px;
+  overflow: hidden;
+  position: absolute;
+  top: 35px;
+  width: 44px;
+}
+
+.offline .runner-canvas {
+  height: 150px;
+  max-width: 600px;
+  opacity: 1;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  z-index: 2;
+}
+
+.offline .controller {
+  background: rgba(247, 247, 247, .1);
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  z-index: 1;
+}
+
+#offline-resources {
+  display: none;
+}
+
+@media (max-width: 420px) {
+  .suggested-left > #control-buttons, .suggested-right > #control-buttons {
+    float: none;
+  }
+  .snackbar {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+@media (max-height: 350px) {
+  h1 {
+    margin: 0 0 15px;
+  }
+  .icon-offline {
+    margin: 0 0 10px;
+  }
+  .interstitial-wrapper {
+    margin-top: 5%;
+  }
+  .nav-wrapper {
+    margin-top: 30px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
+  .interstitial-wrapper {
+    margin-bottom: 100px;
+  }
+}
+
+@media (min-height: 240px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-bottom: 90px;
+  }
+  .icon-offline {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-height: 320px) and (orientation: landscape) {
+  .icon-offline {
+    margin-bottom: 0;
+  }
+  .offline .runner-container {
+    top: 10px;
+  }
+}
+
+@media (max-width: 240px) {
+  .interstitial-wrapper {
+    overflow: inherit;
+    padding: 0 8px;
+  }
+}

templates/404.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load static %}
 {% block entete %}Page introuvable{% endblock %}
 {% block navbar %}
 <ul>
@@ -6,6 +7,30 @@
 </ul>
 {% endblock %}
 {% block content %}
+<script>
+	onkeydown = function(e)
+	{
+		var touche = e.keyCode;
+		var touche_lettre = String.fromCharCode(touche);
+		gauche = false;
+		haut = false;
+		bas = false;
+		droite = false;
+			
+		if(touche == 37 || touche_lettre == "Q")    //Le déplacement à gauche
+			gauche = true;
+		if(touche == 38 || touche_lettre == "Z")
+			haut = true;
+		if(touche == 39 || touche_lettre == "D")    //Le déplacement à droite
+			droite = true;
+		if(touche == 40 || touche_lettre == "S")    //Le déplacement en bas
+			bas = true;
+
+		if(gauche || droite || haut || bas) // Bloquer le défilement
+			e.preventDefault()
+			return false;
+	}
+</script>
 <section id="first" class="main">
 	<header class="major">
 		<h2>Erreur 404</h2>
@@ -13,5 +38,6 @@
 	<section>
 		Une erreur s'est produite lors de l'accès à cette page (la page que vous demandez n'existe pas). Vous pouvez revenir à l'accueil en cliquant <a href="{% url 'home' %}">ici</a>.
 	</section>
+	<object type="text/html" data="{% url 'coope-runner' %}" width="100%" height="200">
 </section>
 {% endblock %}

templates/base.html

@@ -9,6 +9,8 @@
 		<link rel="icon" sizes="32x32" href="{% static 'favicon32.ico' %}" type="image/x-icon">
 		<link rel="icon" sizes="96x96" href="{% static 'favicon96.ico' %}" type="image/x-icon">
 		<link rel="stylesheet" href="{% static 'css/main.css' %}" />
+		{% block extra_css %}{% endblock %}
+		{% block extra_script %}{% endblock %}
 		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />