91 lines
4.3 KiB
PHP
91 lines
4.3 KiB
PHP
@props(['code', 'title', 'body', 'hint' => null])
|
|
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<title>{{ $title }} — CluPilot Cloud</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
|
|
{{--
|
|
Self-contained, like the maintenance page and for the same reason: this is
|
|
shown when something has already gone wrong, which includes "mid-deploy" and
|
|
"the asset manifest is missing". Pulling styles in through @vite would throw
|
|
a second exception on top of the first and render nothing at all.
|
|
|
|
The fonts are the site's own, served as static files — if they are missing
|
|
the page degrades to a system serif and still says what it needs to say.
|
|
--}}
|
|
@verbatim
|
|
<style>
|
|
@font-face{font-family:"Plex Serif";src:url("/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
|
|
@font-face{font-family:"Plex Mono";src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
|
|
|
|
:root{
|
|
--paper:#f7f5f1; --card:#fffefb; --ink:#17140f; --ink-soft:#413a31;
|
|
--muted:#7b7367; --rule:#e3ded3; --rule-mid:#cbc3b4;
|
|
--accent:#f97316; --accent-text:#b8500a;
|
|
}
|
|
@media (prefers-color-scheme: dark){
|
|
:root{--paper:#17140f; --card:#211d16; --ink:#fffefb; --ink-soft:#ded7c9;
|
|
--muted:#93897a; --rule:#39332a; --rule-mid:#4a4238;}
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{
|
|
font-family:"Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
|
|
background:var(--paper);color:var(--ink-soft);line-height:1.6;
|
|
min-height:100vh;display:grid;place-items:center;padding:clamp(24px,6vw,64px);
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
main{max-width:520px;width:100%}
|
|
.plate{border:1px solid var(--rule-mid);border-radius:3px;background:var(--card);position:relative}
|
|
/* Registration marks, as on the rest of the site. */
|
|
.plate::before,.plate::after{content:"+";position:absolute;font-family:"Plex Mono",monospace;font-size:.8rem;color:var(--rule-mid);line-height:1}
|
|
.plate::before{top:-6px;left:-6px}
|
|
.plate::after{bottom:-6px;right:-6px}
|
|
.head{
|
|
display:flex;justify-content:space-between;align-items:center;gap:14px;
|
|
padding:13px 20px;border-bottom:1px solid var(--rule);
|
|
font-family:"Plex Mono",monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
|
|
}
|
|
.head b{color:var(--accent-text);font-weight:400}
|
|
.body{padding:28px 20px 26px}
|
|
h1{font-family:"Plex Serif",Georgia,serif;font-weight:600;font-size:clamp(1.5rem,4vw,2rem);
|
|
letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
|
|
p{margin-top:12px;color:var(--muted);font-size:.95rem}
|
|
.hint{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:.86rem}
|
|
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
|
|
.btn{display:inline-flex;align-items:center;border-radius:3px;font-size:.88rem;font-weight:500;padding:10px 18px;text-decoration:none;transition:background .18s,border-color .18s}
|
|
.ink{background:var(--ink);color:var(--paper)}
|
|
.ink:hover{background:var(--accent-text);color:#fff}
|
|
.line{border:1px solid var(--rule-mid);color:var(--ink)}
|
|
.line:hover{border-color:var(--ink)}
|
|
.mark{margin-top:22px;font-family:"Plex Mono",monospace;font-size:.72rem;color:var(--muted);text-align:center}
|
|
</style>
|
|
@endverbatim
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="plate">
|
|
<div class="head"><span>{{ __('errors.heading') }}</span><b>{{ $code }}</b></div>
|
|
<div class="body">
|
|
<h1>{{ $title }}</h1>
|
|
<p>{{ $body }}</p>
|
|
@if ($hint)
|
|
<p class="hint">{{ $hint }}</p>
|
|
@endif
|
|
<div class="acts">
|
|
{{-- Back first: on an error page the thing someone actually wants is
|
|
the page they came from, not the front door. --}}
|
|
<a class="btn ink" href="javascript:history.back()">{{ __('errors.back') }}</a>
|
|
<a class="btn line" href="{{ url('/') }}">{{ __('errors.home') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="mark">CluPilot Cloud</p>
|
|
</main>
|
|
</body>
|
|
</html>
|