166 lines
3.8 KiB
HTML
166 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Error {{placeholder "http.error.status_code"}}</title>
|
|
<style>
|
|
@import url("https://fonts.cdnfonts.com/css/manrope");
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
height: 100vh;
|
|
background-color: #121316;
|
|
color: #fff;
|
|
z-index: 1;
|
|
}
|
|
|
|
.text {
|
|
flex: 1 1 50%;
|
|
padding: 2em;
|
|
overflow: auto;
|
|
font-family: "Manrope", sans-serif;
|
|
z-index: 3;
|
|
}
|
|
|
|
.text h1 {
|
|
font-size: 80px;
|
|
margin-bottom: 0;
|
|
margin-top: 0.2em;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.text h2 {
|
|
font-size: 40px;
|
|
font-weight: 500;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.text p {
|
|
font-weight: 300;
|
|
font-size: 22px;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.text a.button {
|
|
text-decoration: none;
|
|
background-color: #ffffff;
|
|
padding: 0.6em;
|
|
padding-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
border-radius: 8px;
|
|
color: #121316;
|
|
font-weight: 700;
|
|
transition: opacity ease-in-out 0.3;
|
|
}
|
|
|
|
.text a.button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.text a.button:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.blob {
|
|
position: relative;
|
|
flex: 1 1 50%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.blob svg {
|
|
height: 100vh;
|
|
width: auto;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
@media (max-width: 850px) {
|
|
.blob {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="text">
|
|
<h1>{{placeholder "http.error.status_code"}}</h1>
|
|
<h2>{{placeholder "http.error.status_text"}}</h2>
|
|
<p>
|
|
Looks like you got lost in space. Try searching again at planet earth.
|
|
</p>
|
|
<a class="button" href="/">Fly back home</a>
|
|
</div>
|
|
<div class="blob">
|
|
<svg
|
|
width="686"
|
|
height="1080"
|
|
viewBox="0 0 686 1080"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g filter="url(#filter0_i_1002_1047)">
|
|
<path
|
|
d="M88.6758 136C88.6758 34.6337 0 -8.02344 0 -66H686V1146H0C0 1146 88.6758 1044.94 88.6758 944C88.6758 843.064 0 843.419 0 742.582C0 641.745 88.6758 641.124 88.6758 540C88.6758 438.876 0 439.674 0 338.938C0 238.201 88.6758 237.366 88.6758 136Z"
|
|
fill="url(#paint0_radial_1002_1047)"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<filter
|
|
id="filter0_i_1002_1047"
|
|
x="0"
|
|
y="-66"
|
|
width="689"
|
|
height="1214"
|
|
filterUnits="userSpaceOnUse"
|
|
color-interpolation-filters="sRGB"
|
|
>
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
|
<feBlend
|
|
mode="normal"
|
|
in="SourceGraphic"
|
|
in2="BackgroundImageFix"
|
|
result="shape"
|
|
/>
|
|
<feColorMatrix
|
|
in="SourceAlpha"
|
|
type="matrix"
|
|
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
|
result="hardAlpha"
|
|
/>
|
|
<feOffset dx="3" dy="2" />
|
|
<feGaussianBlur stdDeviation="4" />
|
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
|
<feColorMatrix
|
|
type="matrix"
|
|
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"
|
|
/>
|
|
<feBlend
|
|
mode="normal"
|
|
in2="shape"
|
|
result="effect1_innerShadow_1002_1047"
|
|
/>
|
|
</filter>
|
|
<radialGradient
|
|
id="paint0_radial_1002_1047"
|
|
cx="0"
|
|
cy="0"
|
|
r="1"
|
|
gradientUnits="userSpaceOnUse"
|
|
gradientTransform="translate(32 540) scale(654 3651.84)"
|
|
>
|
|
<stop offset="0.34828" stop-color="#00B2FA" />
|
|
<stop offset="1" stop-color="#007DFF" />
|
|
</radialGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</body>
|
|
|