Turno
888401
Turno
Su turno404Por favor, espere
Su turno ha pasado de largo.
El marcador se ha saltado la página 404 y nadie sabe por qué. Coja otro número o vuelva al inicio.
Volver al inicioHTML + CSS404
404 Turno
El dispensador de turnos de la charcutería: el marcador avanza 401, 402, 403 y se salta tu número, el 404.
Ajustes
1x
Código
<!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 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-queue {
--accent: #e63946;
--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-queue *,.n4-queue *::before,.n4-queue *::after {
box-sizing: border-box;
}
.n4-queue .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-queue .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-queue .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-queue .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-queue .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-queue .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-queue .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-queue .n4-stars,.n4-queue .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-queue .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-queue-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-queue .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-queue-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-queue [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-queue-tw {
from {
opacity: .3;
}
}
@keyframes n4-queue-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-queue-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-queue *,.n4-queue *::before,.n4-queue *::after {
animation: none!important;
transition: none!important;
}
}
.n4-queue {
background: linear-gradient(#0000 0 7%,#1d4e89 7% 8.6%,#0000 8.6%),linear-gradient(#e5dfd2 .15cqmin,transparent .15cqmin) 0 0/6cqmin 6cqmin,linear-gradient(90deg,#e5dfd2 .15cqmin,transparent .15cqmin) 0 0/6cqmin 6cqmin,#faf7f1;
color: #1d1b18;
}
.n4-queue .n4-desk {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 3em;
font-size: min(2cqmin,14px);
}
.n4-queue .n4-board {
display: grid;
gap: .5em;
padding: 1em 1.3em 1.2em;
border-radius: .8em;
background: linear-gradient(#26282c,#111214);
box-shadow: inset 0 0 0 .2em #3a3d42,0 1.4em 2em -1em rgba(0,0,0,.5);
}
.n4-queue .n4-lbl {
font: 800 .95em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .3em;
text-transform: uppercase;
color: #f5f1e8;
}
.n4-queue .n4-led {
position: relative;
display: grid;
padding: .2em .4em;
border-radius: .3em;
background: #140405;
font: 700 4em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
font-variant-numeric: tabular-nums;
}
.n4-queue .n4-led>* {
grid-area: 1/1;
}
.n4-queue .n4-led i {
font-style: normal;
color: rgba(255,40,40,.08);
}
.n4-queue .n4-now {
color: #ff3b30;
text-shadow: 0 0 .2em rgba(255,59,48,.8);
}
.n4-queue .n4-ding {
animation: n4-queue-ding calc(.6s / var(--k));
}
.n4-queue .n4-disp {
display: flex;
flex-direction: column;
align-items: center;
}
.n4-queue .n4-body {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 8.4em;
height: 6.4em;
border-radius: 3.2em 3.2em 1em 1em;
background: radial-gradient(60% 40% at 35% 25%,rgba(255,255,255,.35),transparent 70%),linear-gradient(#ef4a55,#b81f2b);
box-shadow: inset 0 -.5em 0 rgba(0,0,0,.18),0 1em 1.4em -.8em rgba(0,0,0,.45);
}
.n4-queue .n4-body i {
padding: .25em .7em;
border-radius: .3em;
background: #fff;
color: #b81f2b;
font: 800 .8em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
font-style: normal;
letter-spacing: .2em;
text-transform: uppercase;
}
.n4-queue .n4-body::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: .35em;
height: .35em;
border-radius: 1em;
background: #5c0a12;
}
.n4-queue .n4-roll {
margin-top: -.6em;
padding-bottom: .6em;
clip-path: inset(0 -6em -10em -6em);
}
.n4-queue .n4-tk {
display: grid;
justify-items: center;
gap: .1em;
width: 7em;
padding: 1em .6em .7em;
background: radial-gradient(circle at 50% 0,transparent .25em,#fffdf6 .28em) 0 0/1em 100% repeat-x;
color: #1d1b18;
box-shadow: 0 .5em .7em -.3em rgba(0,0,0,.35);
transform-origin: 50% 0;
rotate: -3deg;
}
.n4-queue .n4-tk small {
font: 700 .7em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .16em;
text-transform: uppercase;
color: #7a746a;
}
.n4-queue .n4-tk b {
font: 800 2.4em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: var(--accent);
}
.n4-queue .n4-tk em {
font: italic .7em/1.2 "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
color: #7a746a;
}
.n4-queue .n4-gone {
animation: n4-queue-tear calc(.4s / var(--k)) ease-in forwards;
}
.n4-queue .n4-new {
animation: n4-queue-out calc(.55s / var(--k)) cubic-bezier(.2,.8,.3,1);
}
.n4-queue .n4-pull {
margin-top: .6em;
padding: .75em 1.2em;
border: 0;
border-radius: .5em;
cursor: pointer;
font: 700 .9em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
color: #1d1b18;
background: #ffd23f;
box-shadow: 0 .25em 0 #c79c12;
transition: transform .1s,box-shadow .1s,filter .2s;
}
.n4-queue .n4-pull:hover {
filter: brightness(1.05);
}
.n4-queue .n4-pull:active {
transform: translateY(.2em);
box-shadow: 0 .05em 0 #c79c12;
}
.n4-queue .n4-pull:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-queue .n4-note {
min-height: 1.4em;
margin: 0;
font: 700 clamp(12px,2.2cqmin,16px)/1.3 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: var(--accent);
}
.n4-queue .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-queue .n4-sub {
color: #5f5a52;
}
.n4-queue .n4-cta {
background: #1d1b18;
color: #faf7f1;
}
@keyframes n4-queue-ding {
from {
filter: brightness(2.4);
}
}
@keyframes n4-queue-tear {
to {
transform: translate(1.2em,7em) rotate(28deg);
opacity: 0;
}
}
@keyframes n4-queue-out {
from {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<main class="n4-queue">
<div class="n4-copy">
<div class="n4-desk">
<div class="n4-board">
<span class="n4-lbl">Turno</span>
<span class="n4-led" translate="no"><i aria-hidden="true">888</i><b class="n4-now">401</b></span>
</div>
<div class="n4-disp">
<i class="n4-body" aria-hidden="true"><i>Turno</i></i>
<div class="n4-roll"><div class="n4-tk"><small>Su turno</small><b translate="no">404</b><em>Por favor, espere</em></div></div>
<button class="n4-pull" type="button">Coger número</button>
</div>
</div>
<p class="n4-note" aria-live="polite"></p>
<h1 class="n4-title">Su turno ha pasado de largo.</h1>
<p class="n4-sub">El marcador se ha saltado la página 404 y nadie sabe por qué. Coja otro número o vuelva al inicio.</p>
<a class="n4-cta" href="/">Volver al inicio</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-queue").forEach((el) => {
const now = el.querySelector(".n4-now");
const note = el.querySelector(".n4-note");
const tk = el.querySelector(".n4-tk");
const pull = el.querySelector(".n4-pull");
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
const SEQ = [401, 402, 403, 405, 406];
let i = 0, tm = 0;
const tick = () => {
i = (i + 1) % SEQ.length;
now.textContent = String(SEQ[i]);
now.classList.remove("n4-ding");
void now.offsetWidth;
now.classList.add("n4-ding");
note.textContent = SEQ[i] > 404 ? "¿Y el 404? Se lo han saltado." : "";
};
const iv = setInterval(tick, 1900 / k);
pull.addEventListener("click", () => {
clearTimeout(tm);
tk.classList.remove("n4-new");
tk.classList.add("n4-gone");
tm = setTimeout(() => {
tk.classList.remove("n4-gone");
void tk.offsetWidth;
tk.classList.add("n4-new");
}, rm ? 0 : 380 / k);
});
});
</script>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Ver todos: 404Dónde usarlo
Cualquiera que haya hecho cola en el mercado conoce el dispensador rojo y el número luminoso sobre el mostrador. En esta página de error el marcador cuenta 401, 402 y 403 y salta directamente al 405, mientras tu papelito sigue diciendo 404 y una nota pregunta qué ha pasado con él.
El botón de coger número arranca el ticket y sale uno nuevo por la ranura, siempre con el mismo 404. El marcador imita un LED con los segmentos apagados de fondo, todo en CSS. Ajusta el rojo a tu marca.