122 lines
5.1 KiB
PHP
122 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<?php
|
|
$code = $exception->getStatusCode();
|
|
$map = [
|
|
500 => ['Serverfehler', 'Ein interner Fehler ist aufgetreten. Wir wurden benachrichtigt.'],
|
|
502 => ['Bad Gateway', 'Der Server hat eine ungültige Antwort erhalten. Bitte versuche es gleich erneut.'],
|
|
504 => ['Gateway-Timeout', 'Der Server antwortet nicht rechtzeitig. Bitte versuche es in Kürze erneut.'],
|
|
];
|
|
[$title, $desc] = $map[$code] ?? ['Serverfehler ' . $code, 'Ein unerwarteter Fehler ist aufgetreten.'];
|
|
?>
|
|
<title>{{ $code }} · CluBird</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body {
|
|
width: 100%; min-height: 100vh;
|
|
background: #0f1117; color: #e2e4ea;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
display: flex; align-items: center; justify-content: center; padding: 16px;
|
|
}
|
|
.card {
|
|
width: 100%; max-width: 480px; padding: 44px 40px;
|
|
background: #181c24; border: 1px solid #252938;
|
|
border-radius: 18px; text-align: center;
|
|
animation: fadein .35s ease;
|
|
}
|
|
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
|
.logo {
|
|
display: inline-flex; align-items: center; gap: 14px; margin-bottom: 36px;
|
|
}
|
|
.logo-icon {
|
|
position: relative; width: 42px; height: 42px;
|
|
background: linear-gradient(135deg, #6366f1, #4338ca);
|
|
border-radius: 12px; display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 0 22px rgba(99,102,241,.45);
|
|
}
|
|
.logo-icon::after {
|
|
content: ''; position: absolute; inset: -4px; border-radius: 16px;
|
|
border: 1px solid rgba(99,102,241,.3);
|
|
animation: glow 2s ease-in-out infinite;
|
|
}
|
|
@keyframes glow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
|
|
.logo-text { font-size: 24px; font-weight: 700; letter-spacing: -.3px; }
|
|
.logo-text span { color: #6366f1; }
|
|
|
|
.err-icon {
|
|
width: 56px; height: 56px; margin: 0 auto 20px;
|
|
background: rgba(239,68,68,.1); border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.err-icon svg { width: 26px; height: 26px; stroke: #f87171; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
.err-code { font-size: 64px; font-weight: 800; color: #f87171; line-height: 1; margin-bottom: 12px; letter-spacing: -2px; }
|
|
h1 { font-size: 17px; font-weight: 600; color: #e2e4ea; margin-bottom: 8px; letter-spacing: -.2px; }
|
|
p { font-size: 13px; color: #4b5563; line-height: 1.65; margin-bottom: 28px; }
|
|
|
|
.divider { border: none; border-top: 1px solid #252938; margin: 0 0 28px; }
|
|
|
|
.btn-reload {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 9px 20px; border-radius: 9px;
|
|
background: #1f2433; border: 1px solid #2d3348;
|
|
color: #fca5a5; font-size: 13px; font-weight: 500;
|
|
text-decoration: none; cursor: pointer;
|
|
transition: background .15s, border-color .15s;
|
|
}
|
|
.btn-reload:hover { background: #252b3d; border-color: #3d4565; }
|
|
.btn-reload svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
.btn-home {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 9px 20px; border-radius: 9px; margin-left: 8px;
|
|
background: linear-gradient(135deg, #6366f1, #4338ca);
|
|
border: none; color: #fff; font-size: 13px; font-weight: 500;
|
|
text-decoration: none; cursor: pointer;
|
|
box-shadow: 0 4px 14px rgba(99,102,241,.35);
|
|
transition: opacity .15s;
|
|
}
|
|
.btn-home:hover { opacity: .88; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<svg width="22" height="22" viewBox="0 0 28 28" fill="none">
|
|
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
|
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
|
<circle cx="19" cy="8" r="2" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div class="logo-text">Clu<span>Bird</span></div>
|
|
</div>
|
|
|
|
<div class="err-icon">
|
|
@if($code === 502 || $code === 504)
|
|
<svg viewBox="0 0 24 24"><path d="M12 8v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>
|
|
@else
|
|
<svg viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="err-code">{{ $code }}</div>
|
|
<h1>{{ $title }}</h1>
|
|
<p>{{ $desc }}</p>
|
|
<hr class="divider">
|
|
|
|
<a class="btn-reload" href="javascript:location.reload()">
|
|
<svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-.1-6.87"/></svg>
|
|
Neu laden
|
|
</a>
|
|
<a class="btn-home" href="/">
|
|
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Startseite
|
|
</a>
|
|
</div>
|
|
</body>
|
|
</html>
|