Control de misión · Canal 404
Perte du signal
Le module ne répond pas à cette adresse. Nous recommandons d’annuler et de rentrer à la base.
Annuler la missionHTML + CSS404
404 Contrôle de mission
Un terminal vert de contrôle de mission, avec radar, un 404 qui clignote et un journal qui s’écrit tout seul.
Réglages
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 · Page introuvable</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">Contrôle de mission · Canal 404</span></div>
<p class="n4-num" aria-hidden="true">404</p>
<h1 class="n4-title">Perte du signal</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">Le module ne répond pas à cette adresse. Nous recommandons d’annuler et de rentrer à la base.</p>
<a class="n4-cta" href="/">Annuler la mission</a>
</div>
</main>
</body>
</html>
Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Où l’utiliser
Les développeurs apprécient souvent une page 404 qui parle leur langue. Celle-ci ressemble à un vieil écran de salle de contrôle, lignes de balayage comprises, et le journal se lit comme la télémétrie d’un module perdu. Elle convient à un hébergeur, une startup d’outils pour développeurs ou un blog technique qui cherche une page 404 façon terminal.
Le vert sur noir fait tout le charme, mais vous pouvez passer l’accent en ambre ou en cyan si votre marque s’y prête. Gardez un message court : le journal installe déjà l’ambiance, et un long paragraphe en dessous casserait l’effet.