2021-12-22 13:04:06 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2022-03-30 14:16:31 +00:00
|
|
|
<head>
|
|
|
|
|
<title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
|
|
|
|
|
<meta charset="utf-8"/>
|
|
|
|
|
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/>
|
|
|
|
|
<script type="module" src="/styles.ts"></script>
|
|
|
|
|
<style>
|
|
|
|
|
:root {
|
|
|
|
|
--gradient-color: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 99.48%);
|
|
|
|
|
}
|
|
|
|
|
.spotlight {
|
|
|
|
|
z-index: -1;
|
|
|
|
|
background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
|
|
|
|
|
filter: blur(20vh);
|
|
|
|
|
}
|
|
|
|
|
.gradient-border {
|
|
|
|
|
position: relative;
|
|
|
|
|
background: transparent;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.gradient-border::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: var(--gradient-color);
|
|
|
|
|
z-index: -2;
|
|
|
|
|
transition: filter 0.1s linear;
|
|
|
|
|
}
|
2021-12-22 19:54:18 +00:00
|
|
|
|
2022-03-30 14:16:31 +00:00
|
|
|
.gradient-border::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -2px;
|
|
|
|
|
left: -2px;
|
|
|
|
|
right: -2px;
|
|
|
|
|
bottom: -2px;
|
|
|
|
|
background: var(--gradient-color);
|
|
|
|
|
z-index: -1;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
}
|
2021-12-22 19:54:18 +00:00
|
|
|
|
2022-03-30 14:16:31 +00:00
|
|
|
.gradient-border:hover::before {
|
|
|
|
|
filter: blur(10px);
|
|
|
|
|
}
|
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
|
|
|
.gradient-border {
|
|
|
|
|
background: #F9FAFC;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
|
.gradient-border {
|
|
|
|
|
background: #030D0F;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden ">
|
|
|
|
|
<div class="fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"></div>
|
|
|
|
|
<div class="max-w-520px text-center">
|
|
|
|
|
<h1 class="text-8xl sm:text-10xl font-medium mb-8">{{ messages.statusCode }}</h1>
|
|
|
|
|
<p class="text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight">{{ messages.description }}</p>
|
|
|
|
|
<div class="w-full flex items-center justify-center">
|
|
|
|
|
<a href="/" class="gradient-border text-md sm:text-xl rounded-lg py-2 px-4 sm:py-3 sm:px-6 cursor-pointer">
|
2021-12-22 19:54:18 +00:00
|
|
|
{{ messages.backHome }}
|
|
|
|
|
</a>
|
2021-12-22 13:04:06 +00:00
|
|
|
</div>
|
2021-12-22 19:54:18 +00:00
|
|
|
</div>
|
2022-03-30 14:16:31 +00:00
|
|
|
</body>
|
2021-12-22 13:04:06 +00:00
|
|
|
</html>
|
