Let’s quickly make a custom 500 page for clients to see a nice page while you are hotfixing production server. ๐
HTML page
It is based on Gayane’s and Elena Nazarova’s works (girls’ power! ๐ง๐). For myself I decided that black and white was too gloomy – users are already kind of upset and annoyed that the website is down – let’s cheer them up ๐.
And the animation is like this. I found myself feeling dizzy looking at the first one while I was working on it, so I slowed it down a bit. Now the user may as well get hypnotized until the website is started again…
This page actually has information for the website lingomost.com we’ve been building since forever. It is for learning German. We have Napoleonic plans on this one.
Full code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:100,200,300,400" rel="stylesheet">
<script>$(function() {
setTimeout(function(){
$('body').removeClass('loading');
}, 1000);
});
</script>
<style>/**/
:root {
--main-color: #dbd7ff;
--stroke-color: #2820aa;
}
/**/
body {
background: var(--main-color);
}
h1 {
margin: 100px auto 0 auto;
color: var(--stroke-color);
font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
font-size: 16vh; line-height: 16vh;
font-weight: 200;
text-align: center;
}
h2 {
margin: 20px auto 17px auto;
font-family: 'Encode Sans Semi Condensed', Verdana, sans-serif;
font-size: 4vh;
font-weight: 200;
text-align: center;
color: #2820aa;
}
.animalspin {
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
position: absolute;
top: 54vh;
left: 34vw;
}
.message{
width: 100%;
}
span {
display: block;
position: absolute;
width: 15vw;
height: 15vh;
border-radius: 50%;
font-size: 15vh;
-webkit-animation: run 2s infinite ease-in-out;
animation: run 4s infinite ease-in-out;
}
.one {
-webkit-animation-delay: 3s;
animation-delay: 3;
}
.two {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.three {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes run {
0% {
transform: translate(0%);
border-radius: 50%;
}
25% {
transform: translate(150%) scale(0.5);
border-radius: 0%;
}
50% {
transform: translate(150%, 150%);
border-radius: 50%;
}
75% {
transform: translate(0%, 150%) scale(0.5);
border-radius: 0%;
}
}
@keyframes run {
0% {
transform: translate(0%);
border-radius: 50%;
}
25% {
transform: translate(150%) scale(0.5);
border-radius: 0%;
}
50% {
transform: translate(150%, 150%);
border-radius: 50%;
}
75% {
transform: translate(0%, 150%) scale(0.5);
border-radius: 0%;
}
}
</style>
<title>One moment, please! - Lingomost</title>
</head>
<body class="loading">
<div class="message">
<h1 style="margin: 60px;">500</h1>
<h2>We are currently installing new things and working on errors!</h2><h2>Return a bit later and resume learning German with <b>Lingomost</b>!</h2>
</div>
<div class="animalspin">
<span class="one">๐ถ</span>
<span class="two">๐จ</span>
<span class="three">๐ป</span>
<span class="four">๐ผ</span>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</body>
</html>I had fun making it responsive without @media, only with vh and vw. It turned out OK, not perfect – on mobile devices animals are a bit to the right – but I like it and appreciate the experience. If by chance you manage to successfully tweak the numbers and have a more decent results, please share with me in the comments down below ๐
Nginx
The page I showed above should be located at /usr/share/nginx/html/custom_50x.html.
After that change your website settings located at /etc/nginx/sites-enabled/, e.g. default by adding to it:
error_page 500 502 503 504 /custom_50x.html;
location = /custom_50x.html {
root /usr/share/nginx/html;
internal;
}
location /testing {
fastcgi_pass unix:/does/not/exist;
}
After that check that Nginx is OK:
sudo nginx -tAnd restart it:
sudo service nginx restart
Django Investigations 