Control de misión · Canal 404
Signal verloren
Das Modul antwortet unter dieser Adresse nicht. Wir empfehlen, abzubrechen und zur Basis zurückzukehren.
Mission abbrechenHTML + CSS404
Mission-Control-404
Ein grünes Terminal wie in der Missionskontrolle, mit Radar, flackernder 404 und einem Log, das sich selbst schreibt.
Einstellungen
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Seite nicht gefunden</title>
<style>
body { margin: 0; background: #000; }
.n4-mission {
--accent: #30d158;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-mission *,.n4-mission *::before,.n4-mission *::after {
box-sizing: border-box;
}
.n4-mission .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-mission .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-mission .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-mission .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-mission .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-mission .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-mission .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-mission .n4-stars,.n4-mission .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-mission .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-mission-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-mission .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-mission-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-mission [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-mission-tw {
from {
opacity: .3;
}
}
@keyframes n4-mission-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-mission-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-mission *,.n4-mission *::before,.n4-mission *::after {
animation: none!important;
transition: none!important;
}
}
.n4-mission {
font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
background: radial-gradient(80% 70% at 50% 45%,#04140a,#000 75%);
}
.n4-mission::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
background: repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.28) 2px 3px);
}
.n4-mission .n4-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);
background-size: 5cqmin 5cqmin;
-webkit-mask: radial-gradient(circle at 50% 45%,#000,transparent 72%);
mask: radial-gradient(circle at 50% 45%,#000,transparent 72%);
}
.n4-mission .n4-copy {
gap: 2cqmin;
}
.n4-mission .n4-head {
display: flex;
align-items: center;
gap: 1.4cqmin;
}
.n4-mission .n4-radar {
position: relative;
width: clamp(18px,4cqmin,30px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid color-mix(in srgb,var(--accent) 60%,transparent);
background: conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 70%,transparent),transparent 30%);
animation: n4-mission-spin calc(2.4s / var(--k)) linear infinite;
}
.n4-mission .n4-num {
margin: 0;
font-size: clamp(76px,24cqmin,240px);
font-weight: 700;
line-height: 1;
letter-spacing: .02em;
color: var(--accent);
text-shadow: 0 0 .06em color-mix(in srgb,var(--accent) 80%,#fff),0 0 .3em color-mix(in srgb,var(--accent) 40%,transparent);
animation: n4-mission-flicker calc(5s / var(--k)) steps(1) infinite;
}
.n4-mission .n4-title {
font-size: clamp(16px,3.6cqmin,30px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: #eafff0;
}
.n4-mission .n4-log {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .35em;
font-size: clamp(11px,2cqmin,15px);
color: color-mix(in srgb,var(--accent) 85%,#fff);
}
.n4-mission .n4-log li {
overflow: hidden;
white-space: nowrap;
animation: n4-mission-type calc(1.1s / var(--k)) steps(34,end) both;
}
.n4-mission .n4-log li:nth-child(2) {
animation-delay: calc(1.2s / var(--k));
}
.n4-mission .n4-log li:nth-child(3) {
animation-delay: calc(2.4s / var(--k));
}
.n4-mission .n4-log li:last-child::after {
content: "▌";
margin-left: .2em;
animation: n4-mission-blink 1s steps(1) infinite;
}
.n4-mission .n4-sub {
color: #7c8c80;
}
.n4-mission .n4-cta {
background: var(--accent);
color: #00160a;
font-family: inherit;
letter-spacing: .04em;
}
@keyframes n4-mission-flicker {
0%,100% {
opacity: 1;
}
42% {
opacity: .55;
}
43% {
opacity: 1;
}
78% {
opacity: .8;
}
79% {
opacity: 1;
}
}
@keyframes n4-mission-type {
from {
max-width: 0;
}
to {
max-width: 48ch;
}
}
@keyframes n4-mission-blink {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<main class="n4-mission">
<div class="n4-grid" aria-hidden="true"></div>
<div class="n4-copy">
<div class="n4-head"><span class="n4-radar" aria-hidden="true"></span><span class="n4-tag">Missionskontrolle · Kanal 404</span></div>
<p class="n4-num" aria-hidden="true">404</p>
<h1 class="n4-title">Signal verloren</h1>
<ol class="n4-log" aria-hidden="true">
<li>> Buscando la ruta solicitada…</li>
<li>> Telemetría: 0 paquetes recibidos</li>
<li>> Estado: página fuera de órbita</li>
</ol>
<p class="n4-sub">Das Modul antwortet unter dieser Adresse nicht. Wir empfehlen, abzubrechen und zur Basis zurückzukehren.</p>
<a class="n4-cta" href="/">Mission abbrechen</a>
</div>
</main>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Wofür du ihn nutzen kannst
Wer viel mit Code arbeitet, freut sich über eine 404, die seine Sprache spricht. Diese sieht aus wie ein alter Monitor im Kontrollraum, samt Scanlines, und das Log liest sich wie Telemetrie von einem verlorenen Modul. Passt zu einem Hosting-Anbieter, einem Dev-Tools-Startup oder einem Tech-Blog, der eine 404-Seite im Terminal-Look sucht.
Grün auf Schwarz macht den Charme aus, aber du kannst den Akzent auch auf Bernstein oder Cyan stellen, wenn das besser zu deiner Marke passt. Halte die Nachricht kurz. Das Log erzählt schon genug, ein langer Absatz darunter stört nur.