53 lines
2.2 KiB
HTML
53 lines
2.2 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>500 · Etwas ist schiefgelaufen</title>
|
||
<style>
|
||
:root{color-scheme:dark}
|
||
*{margin:0;box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{
|
||
display:flex;align-items:center;justify-content:center;
|
||
background:
|
||
radial-gradient(60rem 40rem at 20% -10%, rgba(255,122,89,.14), transparent 60%),
|
||
radial-gradient(50rem 35rem at 90% 110%, rgba(255,190,60,.10), transparent 60%),
|
||
#0b0a0e;
|
||
color:#e8ecf5;
|
||
font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
|
||
}
|
||
.card{text-align:center;padding:3rem 2.5rem}
|
||
.code{
|
||
font-size:clamp(5rem,18vw,8rem);font-weight:800;letter-spacing:-.04em;line-height:1;
|
||
background:linear-gradient(120deg,#ffb27a 0%,#ff7a59 55%,#ff5470 100%);
|
||
-webkit-background-clip:text;background-clip:text;color:transparent;
|
||
}
|
||
h1{font-size:1.25rem;font-weight:600;margin:1.25rem 0 .5rem}
|
||
p{color:#9aa4bd;max-width:26rem;margin:0 auto 1.75rem}
|
||
a.home{
|
||
display:inline-block;padding:.6rem 1.25rem;border-radius:.6rem;
|
||
border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
|
||
color:#cdd6ef;text-decoration:none;font-size:.9rem;transition:background .2s,border-color .2s
|
||
}
|
||
a.home:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
|
||
.meta{margin-top:3rem;font-size:.72rem;color:#5a…6em;text-transform:uppercase}
|
||
.meta b{color:#8b96b3;font-weight:500}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="card">
|
||
<div class="code" aria-hidden="true">500</div>
|
||
<h1>Etwas ist schiefgelaufen</h1>
|
||
<p>Der Dienst hinter <b id="host"></b> meldet einen internen Fehler. Das ist meist nur vorübergehend – ein späterer Versuch führt weiter.</p>
|
||
<a class="home" href="https://homepage.ljh31.de">Zur Startseite →</a>
|
||
<div class="meta"><b>ljh31.de</b> · <span id="clock"></span></div>
|
||
</main>
|
||
<script>
|
||
document.getElementById('host').textContent=window.location.host;
|
||
const t=()=>document.getElementById('clock').textContent=new Date().toLocaleTimeString('de-DE');
|
||
t();setInterval(t,30000);
|
||
</script>
|
||
</body>
|
||
</html>
|