116 lines
4.8 KiB
PHP
116 lines
4.8 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<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;
|
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
background: {{ $type === 'server' ? 'rgba(239,68,68,.1)' : 'rgba(99,102,241,.12)' }};
|
|
}
|
|
.err-icon svg {
|
|
width: 26px; height: 26px; fill: none; stroke-width: 1.8;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
stroke: {{ $type === 'server' ? '#f87171' : '#818cf8' }};
|
|
}
|
|
.err-code {
|
|
font-size: 64px; font-weight: 800; line-height: 1;
|
|
margin-bottom: 12px; letter-spacing: -2px;
|
|
color: {{ $type === 'server' ? '#f87171' : '#6366f1' }};
|
|
}
|
|
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 {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 9px 20px; border-radius: 9px;
|
|
background: #1f2433; border: 1px solid #2d3348;
|
|
font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
|
|
transition: background .15s, border-color .15s;
|
|
color: {{ $type === 'server' ? '#fca5a5' : '#a5b4fc' }};
|
|
}
|
|
.btn:hover { background: #252b3d; border-color: #3d4565; }
|
|
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
.btn-primary {
|
|
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;
|
|
box-shadow: 0 4px 14px rgba(99,102,241,.35); transition: opacity .15s;
|
|
}
|
|
.btn-primary:hover { opacity: .88; }
|
|
.btn-primary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
</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">
|
|
<svg viewBox="0 0 24 24">{!! $icon !!}</svg>
|
|
</div>
|
|
|
|
<div class="err-code">{{ $code }}</div>
|
|
<h1>{{ $title }}</h1>
|
|
<p>{{ $desc }}</p>
|
|
<hr class="divider">
|
|
|
|
@if($type === 'server')
|
|
<a class="btn" 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>
|
|
@else
|
|
<a class="btn" href="javascript:history.back()">
|
|
<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
|
|
Zurück
|
|
</a>
|
|
@endif
|
|
<a class="btn-primary" 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>
|