add error pages

This commit is contained in:
Simon Vieille 2021-04-01 23:14:43 +02:00
parent f7f4fa362d
commit e6fcae0cf0
5 changed files with 147 additions and 0 deletions

1
.env
View File

@ -36,3 +36,4 @@ MAILER_URL=null://localhost
ASSET_BASE_URL=null
UMAMI_URL=
GIPHY_API_KEY=

View File

@ -7,3 +7,4 @@ twig:
'%kernel.project_dir%/core/Resources/views/': Core
globals:
umami_url: '%env(UMAMI_URL)%'
giphy_api_key: '%env(GIPHY_API_KEY)%'

View File

@ -0,0 +1,131 @@
<!DOCTYPE html>
<!--
_==/ i i \==_
/XX/ |\___/| \XX\
/XXXX\ |XXXXX| /XXXX\
|XXXXXX\_ _XXXXXXX_ _/XXXXXX|
XXXXXXXXXXXxxxxxxxXXXXXXXXXXXxxxxxxxXXXXXXXXXXX
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX|
XXXXXX/^^^^"\XXXXXXXXXXXXXXXXXXXXX/^^^^^\XXXXXX
|XXX| \XXX/^^\XXXXX/^^\XXX/ |XXX|
\XX\ \X/ \XXX/ \X/ /XX/
"\ " \X/ " /"
-->
{% apply spaceless %}
<html lang="fr">
<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;
}
</style>
<title>Erreur {% block code %}{% endblock %}</title>
</head>
<body>
<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>
<div id="message">
{% block error %}{% endblock %}
<br><a href="/">Aller sur le blog</a>
</div>
</div>
<script>
const giphy = {
baseURL: 'https://api.giphy.com/v1/gifs/',
apiKey: '{{ 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>
</body>
</html>
{% endapply %}

View File

@ -0,0 +1,7 @@
{% extends 'bundles/TwigBundle/Exception/error.html.twig' %}
{% block code %}404{% endblock %}
{% block error %}
Oops! Impossible de trouver cette page…
{% endblock %}

View File

@ -0,0 +1,7 @@
{% extends 'bundles/TwigBundle/Exception/error.html.twig' %}
{% block code %}500{% endblock %}
{% block error %}
Oops! Il y a eu une erreur…
{% endblock %}