Change 500 error
This commit is contained in:
parent
47c34cd625
commit
55767d4ed1
|
|
@ -1,13 +1,157 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" dir="ltr">
|
<html lang="ru" dir="ltr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Internal server error</title>
|
<title>Internal server error</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<style>
|
||||||
|
@import url("https://fonts.googleapis.com/css?family=VT323");
|
||||||
|
:root{
|
||||||
|
--width: 280px;
|
||||||
|
--height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{ background: #6BA1CA; }
|
||||||
|
|
||||||
|
.error-500{
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-family: 'VT323';
|
||||||
|
color: #1E4B6D;
|
||||||
|
text-shadow: 1px 1px 1px rgba(255, 255, 255, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-500:after{
|
||||||
|
content: attr(data-text);
|
||||||
|
display: block;
|
||||||
|
margin-top: calc(var(--height) / 10 + 15px);
|
||||||
|
font-size: 28pt;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
spaguetti{
|
||||||
|
width: var(--width);
|
||||||
|
height: var(--height);
|
||||||
|
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, .2));
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
plate{
|
||||||
|
width: 100%;
|
||||||
|
height: calc(var(--height) / 2.5);
|
||||||
|
background: #CAD7E4;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 0 0 50px 50px;
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
plate:before{
|
||||||
|
content: '500 Spaghetti Error';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgba(0, 0, 0, .2);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
plate:after{
|
||||||
|
content: '';
|
||||||
|
width: calc(var(--width) / 2);
|
||||||
|
height: calc(var(--height) / 10);
|
||||||
|
background: #B5C3D0;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%; left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
pasta{
|
||||||
|
width: calc(var(--width) / 4);
|
||||||
|
height: calc(var(--width) / 4);
|
||||||
|
border: 5px solid #DEA631;
|
||||||
|
background: #EED269;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(calc(var(--height) / 2.5) / 3); right: 10px;
|
||||||
|
box-shadow: calc(-1 * calc(var(--width) / 4) - 60px) 10px 1px 10px #EED269, calc(-1 * calc(var(--width) / 4) - 60px) 10px 0 15px #DEA631;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
pasta:before{
|
||||||
|
content: '';
|
||||||
|
width: calc(var(--width) / 4);
|
||||||
|
height: calc(var(--width) / 4);
|
||||||
|
border: 5px solid #DEA631;
|
||||||
|
background: #EED269;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px; right: 60px;
|
||||||
|
box-shadow: calc(-1 * calc(var(--width) / 4) - 30px) 10px 1px 1px #EED269, calc(-1 * calc(var(--width) / 4) - 30px) 10px 0 5px #DEA631;
|
||||||
|
}
|
||||||
|
|
||||||
|
pasta:after{
|
||||||
|
content: '';
|
||||||
|
width: calc(var(--width) / 3);
|
||||||
|
height: calc(var(--width) / 4);
|
||||||
|
border: 5px solid #DEA631;
|
||||||
|
background: #EED269;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px; right: 100px;
|
||||||
|
box-shadow: calc(var(--width) / 4) 10px 1px 1px #EED269, calc(var(--width) / 4) 10px 0 5px #DEA631;
|
||||||
|
}
|
||||||
|
|
||||||
|
meat{
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #B64C19;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--height) / 2.5); right: 64px;
|
||||||
|
box-shadow: -150px -2px 0 0 #B64C19, -50px -7px 0 0 #B64C19, -100px 8px 0 0 #B64C19;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
fork{
|
||||||
|
width: 20px;
|
||||||
|
height: calc(var(--height) - 30px);
|
||||||
|
background: #D3D3D3;
|
||||||
|
border-right: 3px solid #B7B7B7;
|
||||||
|
border-radius: 50px 50px 0 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 25%; left: 75%;
|
||||||
|
transform: translate(-75%, 0%) rotate(25deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
const error = document.querySelector(".error-500");
|
||||||
|
let i = 0, data = "", text = error.getAttribute("data-text");
|
||||||
|
|
||||||
|
let typing = setInterval(() => {
|
||||||
|
if(i == text.length){
|
||||||
|
clearInterval(typing);
|
||||||
|
}else{
|
||||||
|
data += text[i];
|
||||||
|
document.querySelector(".error-500").setAttribute("data-text", data);
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Internal server error</h1>
|
<div class="error-500" data-text="Ой..! Наш спагетти код работает неисправно. Но мы скоро всё починим!">
|
||||||
|
<spaguetti>
|
||||||
<h2>Sorry, there seems to be an error. Please try again soon.</h2>
|
<fork></fork>
|
||||||
|
<meat></meat>
|
||||||
|
<pasta></pasta>
|
||||||
|
<plate></plate>
|
||||||
|
</spaguetti>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue