158 lines
5.0 KiB
HTML
158 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Internal server error</title>
|
||
<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>
|
||
<body>
|
||
<div class="error-500" data-text="Ой..! Наш спагетти код работает неисправно. Но мы скоро всё починим!">
|
||
<spaguetti>
|
||
<fork></fork>
|
||
<meat></meat>
|
||
<pasta></pasta>
|
||
<plate></plate>
|
||
</spaguetti>
|
||
</div>
|
||
</body>
|
||
</html>
|