403 change

public/css/403.css

@@ -0,0 +1,39 @@
+@import url("https://fonts.googleapis.com/css?family=Bungee");
+
+body {
+  color: white;
+  font-family: "Bungee", cursive;
+  text-align: center;
+}
+a {
+  color: #2aa7cc;
+  text-decoration: none;
+}
+a:hover {
+  color: white;
+}
+svg {
+  width: 50vw;
+}
+.lightblue {
+  fill: #444;
+}
+.eye {
+  cx: calc(115px + 30px * var(--mouse-x));
+  cy: calc(50px + 30px * var(--mouse-y));
+}
+#eye-wrap {
+  overflow: hidden;
+}
+.error-text {
+  font-size: 120px;
+}
+.alarm {
+  animation: alarmOn 0.5s infinite;
+}
+
+@keyframes alarmOn {
+  to {
+    fill: darkred;
+  }
+}

public/js/403.js

@@ -0,0 +1,25 @@
+var root = document.documentElement;
+var eyef = document.getElementById("eyef");
+var cx = document.getElementById("eyef").getAttribute("cx");
+var cy = document.getElementById("eyef").getAttribute("cy");
+
+document.addEventListener("mousemove", (evt) => {
+  let x = evt.clientX / innerWidth;
+  let y = evt.clientY / innerHeight;
+
+  root.style.setProperty("--mouse-x", x);
+  root.style.setProperty("--mouse-y", y);
+
+  cx = 115 + 30 * x;
+  cy = 50 + 30 * y;
+  eyef.setAttribute("cx", cx);
+  eyef.setAttribute("cy", cy);
+});
+
+document.addEventListener("touchmove", (touchHandler) => {
+  let x = touchHandler.touches[0].clientX / innerWidth;
+  let y = touchHandler.touches[0].clientY / innerHeight;
+
+  root.style.setProperty("--mouse-x", x);
+  root.style.setProperty("--mouse-y", y);
+});

styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

templates/error/access_denied.html.twig

@@ -3,74 +3,35 @@
 {% block title %}403 Denied Access{% endblock %}
 
 {% block body %}
-<article>
+
-<div>
+<link rel="stylesheet" href="/css/403.css?v=7"/>
-<h1>Erreur 403</h1>
+
-<h2>Accès refusé : vous n'avez pas la permission d'accéder à cette page</h2></div>
+<svg xmlns="http://www.w3.org/2000/svg" id="robot-error" viewBox="0 0 260 118.9" role="img">
-<div>
+    <title xml:lang="en">403 Error</title>
-<svg version="1.0"
+
- width="753.000000px" height="603.000000px>
+            <defs>
-<g transform="translate(0.000000,603.000000) scale(0.100000,-0.100000)"
+                <clipPath id="white-clip"><circle id="white-eye" fill="#cacaca" cx="130" cy="65" r="20" /> </clipPath>
-fill="#000000" stroke="none">
+             <text id="text-s" class="error-text" y="106"> 403 </text>
-<path d="M3440 5343 c-41 -7 -100 -19 -130 -25 -30 -5 -75 -13 -100 -17 -25
+            </defs>
--4 -55 -13 -67 -19 -12 -7 -32 -12 -45 -12 -13 0 -36 -7 -52 -15 -15 -8 -37
+              <path class="alarm" fill="#e62326" d="M120.9 19.6V9.1c0-5 4.1-9.1 9.1-9.1h0c5 0 9.1 4.1 9.1 9.1v10.6" />
--15 -48 -15 -11 0 -32 -6 -46 -14 -15 -8 -47 -22 -72 -31 -91 -35 -299 -141
+             <use xlink:href="#text-s" x="-0.5px" y="-1px" fill="black"></use>
--387 -198 -24 -15 -47 -27 -52 -27 -6 0 -14 -6 -18 -12 -4 -7 -30 -29 -58 -48
+             <use xlink:href="#text-s" fill="#2b2b2b"></use>
--52 -36 -201 -159 -264 -220 -48 -45 -212 -236 -237 -275 -10 -16 -21 -32 -24
+            <g id="robot">
--35 -5 -4 -46 -67 -115 -175 -32 -49 -115 -216 -115 -230 0 -7 -7 -18 -15 -25
+              <g id="eye-wrap">
--8 -7 -15 -21 -15 -30 0 -10 -6 -31 -14 -47 -29 -59 -46 -104 -46 -126 0 -12
+                <use xlink:href="#white-eye"></use>
--7 -31 -15 -41 -8 -11 -15 -33 -15 -49 0 -15 -5 -38 -12 -50 -6 -12 -15 -42
+                <circle id="eyef" class="eye" clip-path="url(#white-clip)" fill="#000" stroke="#2aa7cc" stroke-width="2" stroke-miterlimit="10" cx="130" cy="65" r="11" />
--19 -67 -4 -25 -11 -70 -17 -100 -41 -214 -44 -245 -40 -471 3 -123 10 -246
+<ellipse id="white-eye" fill="#2b2b2b" cx="130" cy="40" rx="18" ry="12" />
-16 -274 6 -27 16 -79 22 -115 18 -109 27 -154 38 -185 6 -16 18 -57 27 -90 9
+              </g>
--33 23 -73 31 -88 8 -16 14 -36 14 -46 0 -9 7 -26 15 -37 8 -10 15 -29 15 -41
+              <circle class="lightblue" cx="105" cy="32" r="2.5" id="tornillo" />
-0 -12 7 -28 15 -37 8 -8 15 -19 15 -24 0 -12 87 -184 115 -227 112 -175 156
+              <use xlink:href="#tornillo" x="50"></use>
--237 241 -335 105 -122 148 -166 228 -233 28 -23 66 -56 86 -73 19 -17 58 -46
+              <use xlink:href="#tornillo" x="50" y="60"></use>
-85 -65 28 -19 52 -36 55 -39 9 -10 88 -60 125 -80 11 -6 43 -24 70 -41 28 -16
+              <use xlink:href="#tornillo" y="60"></use>
-61 -35 75 -41 50 -22 156 -71 182 -84 14 -8 33 -14 41 -14 9 0 28 -6 44 -14
-15 -8 55 -22 88 -32 33 -9 77 -23 98 -30 20 -8 47 -14 60 -14 12 0 51 -6 87
--15 167 -38 246 -45 470 -45 160 0 245 5 295 15 38 8 85 15 103 15 18 0 49 7
-69 15 19 8 52 15 72 15 20 0 49 7 65 15 15 8 38 15 50 15 11 0 34 7 50 15 15
-8 38 15 50 15 12 0 31 7 42 15 10 8 27 15 37 15 11 0 31 6 45 13 15 8 45 22
-67 32 22 9 47 21 55 26 8 5 21 11 28 14 30 12 40 17 97 50 33 19 72 39 88 46
-15 6 27 14 27 19 0 4 8 11 18 14 33 12 144 91 212 150 20 17 58 49 85 71 27
-22 65 56 85 75 53 50 238 267 269 315 14 22 30 45 34 50 45 53 227 392 227
-424 0 9 7 25 15 35 8 11 15 28 15 37 0 10 6 30 14 46 21 42 37 93 45 138 4 23
-11 47 16 55 5 8 13 35 17 60 4 25 12 74 18 110 6 36 18 103 26 150 19 114 19
-447 0 555 -8 44 -19 109 -26 145 -6 36 -14 85 -18 110 -5 25 -14 55 -20 67 -7
-12 -12 34 -12 50 0 16 -6 37 -14 48 -7 11 -16 34 -19 50 -8 44 -39 129 -49
-133 -4 2 -8 14 -8 27 0 12 -7 28 -15 35 -8 7 -15 18 -15 25 0 14 -80 174 -120
-240 -43 70 -151 230 -164 240 -6 6 -22 24 -35 40 -39 51 -124 147 -167 190
--61 60 -215 189 -271 227 -26 18 -52 39 -56 46 -4 6 -12 12 -18 12 -5 0 -28
-12 -52 27 -63 41 -75 48 -162 93 -44 23 -87 45 -95 49 -15 9 -45 22 -122 55
--20 9 -40 16 -46 16 -5 0 -23 7 -38 15 -16 8 -36 15 -45 15 -9 0 -30 7 -45 15
--16 8 -39 15 -52 15 -13 0 -33 5 -45 12 -12 6 -42 15 -67 19 -25 4 -70 12
--100 17 -208 40 -228 42 -455 41 -154 -1 -255 -6 -305 -16z m635 -569 c39 -9
-86 -21 105 -27 19 -6 51 -14 70 -18 60 -12 165 -51 243 -90 31 -16 62 -29 68
--29 6 0 30 -12 53 -27 22 -16 58 -37 79 -48 21 -11 48 -30 59 -42 l21 -23
--1241 -1242 -1241 -1242 -22 19 c-11 11 -25 29 -30 40 -5 11 -18 34 -29 50
--10 17 -30 53 -44 82 -15 28 -31 55 -36 58 -6 3 -10 16 -10 29 0 12 -5 27 -12
-34 -14 14 -37 73 -47 122 -4 19 -12 44 -18 55 -14 27 -33 99 -43 165 -4 30
--13 75 -20 100 -18 63 -18 480 0 534 7 21 16 64 21 95 10 71 28 138 45 173 8
-14 14 35 14 47 0 11 6 35 14 53 8 18 17 40 20 48 3 8 10 22 15 30 5 8 24 47
-43 85 18 39 46 93 63 120 55 93 203 280 287 361 120 118 315 261 401 295 15 6
-27 15 27 20 0 5 5 9 12 9 6 0 39 13 72 28 111 52 136 62 154 62 10 0 27 7 38
-15 10 8 33 15 49 15 17 0 43 7 59 15 15 8 43 15 61 15 19 0 46 5 62 11 75 31
-506 32 638 3z m1197 -810 c34 -51 148 -275 148 -291 0 -6 6 -24 14 -40 20 -40
-36 -91 47 -143 5 -24 14 -49 19 -54 6 -6 10 -29 10 -51 0 -23 7 -66 17 -96 24
--79 24 -489 0 -568 -10 -30 -17 -73 -17 -96 0 -22 -4 -45 -10 -51 -5 -5 -14
--30 -19 -54 -11 -52 -27 -103 -47 -143 -8 -16 -14 -36 -14 -45 0 -9 -7 -26
--15 -36 -8 -11 -15 -28 -15 -38 0 -10 -4 -18 -8 -18 -4 0 -20 -26 -35 -57 -15
--32 -33 -67 -40 -78 -41 -67 -104 -161 -113 -170 -6 -5 -31 -37 -56 -70 -51
--67 -201 -216 -263 -260 -22 -16 -44 -34 -50 -39 -13 -14 -151 -106 -159 -106
--3 0 -25 -13 -48 -29 -24 -16 -56 -33 -71 -36 -15 -4 -27 -11 -27 -16 0 -5 -7
--9 -16 -9 -9 0 -28 -6 -42 -13 -51 -26 -97 -44 -152 -60 -30 -8 -73 -21 -95
--27 -165 -48 -390 -67 -597 -52 -142 11 -257 29 -311 51 -16 6 -40 11 -55 11
--15 0 -36 7 -46 15 -11 8 -30 15 -42 15 -12 0 -35 6 -51 14 -15 8 -44 21 -63
-30 -67 29 -125 57 -155 76 -16 10 -49 29 -72 41 -24 12 -52 33 -64 45 l-21 22
-1233 1237 c916 918 1239 1235 1254 1233 10 -2 32 -21 47 -44z"/>
             </g>
           </svg>
-</div>
+<h1>Vous n'êtes pas autorisé à entrer ici</h1>
-<a href="{{ path('app_home') }}">Retourner à l'accueil</a>
+<h2>Go <a target="_blank" href="/">Home!</a></h2>
-</article>
+
+<script src="/js/403.js">
+
+
 {% endblock %}