website/static/internal/error/400.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>