From 7ab59414486d48517101f1051802f5417b002111 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Tue, 30 Nov 2021 21:48:40 +0100
Subject: [PATCH] update error page

---
 .env                                          |   1 -
 .../TwigBundle/Exception/error.html.twig      | 157 +++++-------------
 2 files changed, 45 insertions(+), 113 deletions(-)
diff --git a/.env b/.env
index 8b0f3ba..6172586 100644
--- a/.env
+++ b/.env
@@ -36,4 +36,3 @@ MAILER_URL=null://localhost
 
 ASSET_BASE_URL=null
 UMAMI_URL=null
-GIPHY_API_KEY=null
diff --git a/templates/bundles/TwigBundle/Exception/error.html.twig b/templates/bundles/TwigBundle/Exception/error.html.twig
index ce7a796..a3ac134 100644
--- a/templates/bundles/TwigBundle/Exception/error.html.twig
+++ b/templates/bundles/TwigBundle/Exception/error.html.twig
@@ -18,125 +18,58 @@ XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="UTF-8" />
-    <style>
-        html, body {
-            margin: 0;
-            padding: 0;
-            overflow: hidden;
-        }
 
-        body {
-            background-size: cover;
-            background-color: #000;
-            color: #fff;
-            font-family: Verdana;
-            font-weight: bold;
-            text-shadow: 1px 1px 2px #333;
-        }
-
-        #code {
-            font-size: 60px;
-        }
-
-        #message {
-            font-size: 40px;
-            padding-top: 20px;
-        }
-
-        #background-1 {
-            position: absolute;
-            width: 100%;
-            height: 100vh;
-            -webkit-filter: blur(10px);
-            -o-filter: blur(10px);
-            -ms-filter: blur(10px);
-            filter: blur(10px);
-            background-size: cover;
-            background-position: center center;
-        }
-
-        #background-2 {
-            text-align: center;
-            width: 100%;
-            position: absolute;
-        }
-
-        #background-2 img {
-            height: 100vh;
-        }
-
-
-        #content {
-            position: absolute;
-            padding: 30px;
-        }
-
-        a {
-            margin-top: 40px;
-            padding: 20px;
-            font-size: 20px;
-            border: 1px solid #fff;
-            color: #fff;
-            display: inline-block;
-            text-decoration: none;
-        }
-
-        #giphy-logo {
-            width: 200px;
-            height: 42px;
-            background: url({{ asset('build/images/giphy-logo.png') }});
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
-        }
-    </style>
     <title>Erreur {% block code %}{% endblock %}</title>
+
+    {% block css %}
+        {{ encore_entry_link_tags('app') }}
+
+        <style>
+            .content {
+                width: 100%;
+            }
+
+            .header {
+                min-height: 100vh;
+                background: linear-gradient(180deg, #434343, #353535);
+            }
+
+            .header-wrapper {
+                position: relative;
+                z-index: 100;
+            }
+        </style>
+    {% endblock %}
+
+    <link rel="alternate" type="application/rss+xml" title="Flux RSS" href="{{ safe_url('blog_network_rss') }}">
 </head>
 <body>
+    <div class="page" data-grid="va-stretch">
+        <div class="content">
+            <div class="grid">
+                <div class="col-12 header">
+                    <div id="particles"></div>
 
-<div id="background-1"></div>
-<!-- <div id="background-2"><img src="{{ asset('build/images/blank.png') }}"></div> -->
-
-<div id="content">
-    <div id="code">
-        Erreur {{ block('code') }}
+                    <div class="header-wrapper">
+                        <div class="h1">
+                            Erreur {{ block('code') }}
+                        </div>
+                        <div class="h3">
+                            {% block error %}{% endblock %}
+                        </div>
+                        <hr>
+                        <div style="margin-top: 40px">
+                            <a class="button" href="/">Retour sur le blog</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
-    <div id="message">
-        {% block error %}{% endblock %}
-
-        <br><a href="/">Aller sur le blog</a>
-    </div>
-</div>
-
-<div id="giphy-logo"></div>
-
-<script>
-const giphy = {
-    baseURL: 'https://api.giphy.com/v1/gifs/',
-    apiKey: '{{ setting('giphy_api_key') }}',
-    tag: '{% block tag %}error{% endblock %}',
-    type: 'random',
-    rating: 'pg-13'
-};
-
-const background1 = document.querySelector('#background-1');
-// const background2 = document.querySelector('#background-2 img');
-const giphyURL = encodeURI(giphy.baseURL + giphy.type + '?api_key=' + giphy.apiKey + '&tag=' + giphy.tag + '&rating=' + giphy.rating);
-const httpRequest = new XMLHttpRequest();
-
-httpRequest.onreadystatechange = function(data) {
-    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
-        const json = JSON.parse(httpRequest.response);
-        const url = json.data.image_original_url;
-        background1.style.backgroundImage = 'url(' + url + ')';
-        // background2.src = url;
-    }
-};
-
-httpRequest.open('GET', giphyURL);
-httpRequest.send();
-</script>
+    {% block js %}
+        {{ encore_entry_script_tags('app') }}
+    {% endblock %}
 </body>
 </html>
 {% endapply %}
