60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import type { FC } from "hono/jsx"
|
|
import { css, js } from "../helpers"
|
|
|
|
export const Error: FC = async ({ error }) => (
|
|
<>
|
|
{css`
|
|
:root {
|
|
--letterbox: #CC8800;
|
|
--text: #FFBF40;
|
|
--bg: #201600;
|
|
}
|
|
* { color: var(--text); text-align: center; }
|
|
html { background: var(--letterbox); }
|
|
#content { background-color: var(--bg); }
|
|
|
|
h1 { max-width: 38%; margin: 0 auto; margin-top: 100px; }
|
|
h2 { max-width: 80%; margin: 0 auto; margin-top: 10px; }
|
|
p { max-width: 90%; margin: 0 auto; margin-top: 150px; }
|
|
|
|
.restart { max-width: 35%; }
|
|
.restart button {
|
|
font-size: 30px;
|
|
background: var(--letterbox);
|
|
color: var(--red);
|
|
}
|
|
|
|
h1 { animation: glow 3s ease-in-out infinite alternate; }
|
|
|
|
@keyframes glow {
|
|
0% {
|
|
text-shadow: none;
|
|
}
|
|
100% {
|
|
text-shadow:
|
|
0 0 2px #FFAA33,
|
|
0 0 4px #FF8800,
|
|
0 0 6px #FF6600;
|
|
}
|
|
}
|
|
|
|
`}
|
|
|
|
{js`
|
|
window.addEventListener("click", async e => {
|
|
if (!e.target || !e.target.matches("button")) return
|
|
e.target.textContent = "[RESTARTING...]"
|
|
await fetch("/cmd/restart")
|
|
setTimeout(() => window.location.reload(), 3000)
|
|
})
|
|
`}
|
|
|
|
<h1>Fatal Error</h1>
|
|
<h2>NOSE failed to start properly.</h2>
|
|
<br />
|
|
<p>{error}</p>
|
|
<p class="restart">
|
|
<button>[RESTART]</button>
|
|
</p>
|
|
</>
|
|
) |