179 lines
4.7 KiB
HTML
179 lines
4.7 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>5xx | Server is on Fire</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: dark;
|
||
}
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background: radial-gradient(circle at top, #111827 0%, #020617 55%, #000 100%);
|
||
color: #f9fafb;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
.card {
|
||
position: relative;
|
||
text-align: center;
|
||
padding: 2.8rem 3.2rem;
|
||
border-radius: 1.25rem;
|
||
background: linear-gradient(145deg, rgba(15,23,42,0.95), rgba(30,64,175,0.9));
|
||
box-shadow:
|
||
0 0 30px rgba(0,0,0,0.8),
|
||
0 0 80px rgba(248,113,113,0.5);
|
||
max-width: 480px;
|
||
width: 90%;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
.code {
|
||
font-size: 3.6rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
.subtitle {
|
||
font-size: 1rem;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
opacity: 0.85;
|
||
}
|
||
.flames {
|
||
position: absolute;
|
||
inset: auto -10%;
|
||
bottom: -2.5rem;
|
||
height: 80px;
|
||
pointer-events: none;
|
||
opacity: 0.95;
|
||
mix-blend-mode: screen;
|
||
}
|
||
.flame {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 26px;
|
||
height: 80px;
|
||
background: radial-gradient(circle at 20% 0%, #fef3c7 0, #f97316 40%, #b91c1c 70%, transparent 80%);
|
||
border-radius: 50% 50% 0 0;
|
||
filter: blur(1px);
|
||
animation: rise 1.4s infinite ease-in-out alternate;
|
||
opacity: 0.9;
|
||
}
|
||
.flame:nth-child(1) { left: 10%; animation-delay: -0.1s; transform-origin: 50% 100%; }
|
||
.flame:nth-child(2) { left: 25%; animation-delay: -0.4s; transform-origin: 50% 100%; }
|
||
.flame:nth-child(3) { left: 50%; animation-delay: -0.2s; transform-origin: 50% 100%; }
|
||
.flame:nth-child(4) { left: 70%; animation-delay: -0.6s; transform-origin: 50% 100%; }
|
||
.flame:nth-child(5) { left: 86%; animation-delay: -0.3s; transform-origin: 50% 100%; }
|
||
|
||
@keyframes rise {
|
||
0% { transform: scaleY(0.7) translateY(10px); opacity: 0.6; }
|
||
50% { transform: scaleY(1.05) translateY(-6px); opacity: 1; }
|
||
100% { transform: scaleY(0.85) translateY(4px); opacity: 0.7; }
|
||
}
|
||
|
||
.text {
|
||
margin-top: 1.4rem;
|
||
font-size: 0.96rem;
|
||
line-height: 1.6;
|
||
opacity: 0.9;
|
||
}
|
||
.hint {
|
||
margin-top: 0.75rem;
|
||
font-size: 0.8rem;
|
||
opacity: 0.6;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||
}
|
||
.btn-row {
|
||
margin-top: 1.8rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
a.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.4rem;
|
||
padding: 0.55rem 1.35rem;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(148,163,184,0.7);
|
||
text-decoration: none;
|
||
color: inherit;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
background: rgba(15,23,42,0.8);
|
||
backdrop-filter: blur(6px);
|
||
white-space: nowrap;
|
||
}
|
||
a.btn:hover {
|
||
background: rgba(248,113,113,0.15);
|
||
border-color: rgba(248,113,113,0.7);
|
||
}
|
||
.emoji {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.card {
|
||
padding: 2.1rem 1.7rem;
|
||
}
|
||
.code {
|
||
font-size: 3rem;
|
||
}
|
||
.subtitle {
|
||
font-size: 0.9rem;
|
||
}
|
||
.text {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<div class="code">5XX</div>
|
||
<div class="subtitle">SERVER IS ON FIRE</div>
|
||
|
||
<div class="text">
|
||
Something on the backend just went very wrong.<br />
|
||
Your request didn’t make it through, but the logs definitely did.
|
||
</div>
|
||
|
||
<div class="hint">
|
||
Tip: If you’re the admin, check your upstreams, containers, and error logs.<br />
|
||
If you’re not, maybe just pretend this never happened.
|
||
</div>
|
||
|
||
<div class="btn-row">
|
||
<a href="/" class="btn">
|
||
<span class="emoji">🏠</span>
|
||
<span>Back to Safety</span>
|
||
</a>
|
||
<a href="https://x.com/nik4nao" class="btn">
|
||
<span class="emoji">🧯</span>
|
||
<span>Alert Admin</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="flames">
|
||
<div class="flame"></div>
|
||
<div class="flame"></div>
|
||
<div class="flame"></div>
|
||
<div class="flame"></div>
|
||
<div class="flame"></div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|