A esta página le faltan piezas.
La hemos buscado en todas las cajas de la juguetería. Mientras aparece, ordena el puzle o vuelve al escaparate.
Volver al escaparateHTML + CSS404
404 Taquin
Un taquin en bois de huit pièces qu'on fait glisser au clic ou aux flèches ; résolu, il affiche un 404 couleur jouet.
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-puzzle {
--accent: #118ab2;
--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-puzzle *,.n4-puzzle *::before,.n4-puzzle *::after {
box-sizing: border-box;
}
.n4-puzzle .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-puzzle .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-puzzle .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-puzzle .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-puzzle .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-puzzle .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-puzzle .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-puzzle .n4-stars,.n4-puzzle .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-puzzle .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-puzzle-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-puzzle .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-puzzle-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-puzzle [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-puzzle-tw {
from {
opacity: .3;
}
}
@keyframes n4-puzzle-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-puzzle-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-puzzle *,.n4-puzzle *::before,.n4-puzzle *::after {
animation: none!important;
transition: none!important;
}
}
.n4-puzzle {
background: radial-gradient(70% 60% at 50% 30%,#fff7e6,#f4dbb0 70%,#e6bd82);
color: #2b1a0e;
}
.n4-puzzle .n4-box {
display: flex;
flex-direction: column;
align-items: center;
gap: .8em;
font-size: min(2cqmin,14px);
margin-bottom: 1cqmin;
}
.n4-puzzle .n4-board {
position: relative;
width: 18em;
height: 18em;
border-radius: 1em;
background: repeating-linear-gradient(88deg,rgba(90,50,20,.1) 0 .2em,transparent .2em 1.1em),linear-gradient(135deg,#d39a5c,#a86a34);
box-shadow: inset 0 0 0 .3em #8a5427,0 1.4em 2em -1em rgba(60,30,10,.55);
transition: box-shadow .4s;
}
.n4-puzzle .n4-board::before {
content: "";
position: absolute;
inset: .8em;
border-radius: .4em;
background: #7a4a22;
box-shadow: inset 0 .2em .5em rgba(0,0,0,.5);
}
.n4-puzzle .n4-tile {
position: absolute;
left: .8em;
top: .8em;
width: 5.2em;
height: 5.2em;
padding: 0;
border: 0;
border-radius: .45em;
overflow: hidden;
cursor: pointer;
transform: translate(calc(var(--x) * 5.6em),calc(var(--y) * 5.6em));
transition: transform calc(.18s / var(--k)) cubic-bezier(.2,.8,.3,1.1),filter .2s;
box-shadow: 0 .2em .3em rgba(0,0,0,.35);
}
.n4-puzzle .n4-tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 .15em 0 rgba(255,255,255,.45),inset 0 -.25em 0 rgba(0,0,0,.22);
pointer-events: none;
}
.n4-puzzle .n4-img {
position: absolute;
width: 16.4em;
height: 16.4em;
left: calc(var(--c) * -5.6em);
top: calc(var(--r) * -5.6em);
display: grid;
place-items: center;
background: radial-gradient(circle at 18% 18%,rgba(255,255,255,.35) 0 1.2em,transparent 1.3em),radial-gradient(circle at 84% 80%,rgba(255,255,255,.25) 0 1.6em,transparent 1.7em),linear-gradient(135deg,#ef476f,#ffd166 45%,#06d6a0 75%,#118ab2);
}
.n4-puzzle .n4-img b {
font: 900 6em/1 "Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
letter-spacing: -.05em;
color: #fff;
text-shadow: .05em .06em 0 #073b4c;
}
.n4-puzzle .n4-tile small {
position: absolute;
right: .4em;
bottom: .3em;
font: 800 .85em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
transition: opacity .3s;
}
.n4-puzzle .n4-tile:hover {
filter: brightness(1.08);
}
.n4-puzzle .n4-tile:active {
filter: brightness(.92);
}
.n4-puzzle .n4-tile:focus-visible {
outline: .2em solid #fff;
outline-offset: -.4em;
z-index: 1;
}
.n4-puzzle .n4-done .n4-board {
box-shadow: inset 0 0 0 .3em #8a5427,0 0 0 .35em var(--accent),0 1.4em 2em -1em rgba(60,30,10,.55);
}
.n4-puzzle .n4-done .n4-tile small {
opacity: 0;
}
.n4-puzzle .n4-bar {
display: flex;
align-items: center;
gap: 1em;
}
.n4-puzzle .n4-st {
margin: 0;
font: 600 .95em/1.2 system-ui,sans-serif;
color: #6b4a2b;
}
.n4-puzzle .n4-done .n4-st {
color: var(--accent);
font-weight: 700;
}
.n4-puzzle .n4-mix {
padding: .55em 1.1em;
border: 0;
border-radius: 999px;
cursor: pointer;
font: 700 .9em/1 system-ui,sans-serif;
background: #2b1a0e;
color: #fff7e6;
transition: transform .12s;
}
.n4-puzzle .n4-mix:hover {
transform: translateY(-1px);
}
.n4-puzzle .n4-mix:active {
transform: scale(.96);
}
.n4-puzzle .n4-mix:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-puzzle .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-puzzle .n4-sub {
color: #6b4a2b;
}
.n4-puzzle .n4-cta {
background: var(--accent);
color: #fff;
}
</style>
</head>
<body>
<main class="n4-puzzle">
<div class="n4-copy">
<div class="n4-box">
<div class="n4-board" role="group" aria-label="Taquin : utilise les flèches pour déplacer les pièces">
<button class="n4-tile" type="button" aria-label="Pièce 1" style="--c:0;--r:0;--x:0;--y:0"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">1</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 2" style="--c:1;--r:0;--x:1;--y:0"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">2</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 3" style="--c:2;--r:0;--x:2;--y:0"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">3</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 4" style="--c:0;--r:1;--x:0;--y:1"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">4</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 5" style="--c:1;--r:1;--x:1;--y:1"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">5</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 6" style="--c:2;--r:1;--x:2;--y:1"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">6</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 7" style="--c:0;--r:2;--x:0;--y:2"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">7</small></button>
<button class="n4-tile" type="button" aria-label="Pièce 8" style="--c:1;--r:2;--x:1;--y:2"><span class="n4-img" aria-hidden="true"><b translate="no">404</b></span><small aria-hidden="true">8</small></button>
</div>
<div class="n4-bar"><p class="n4-st" aria-live="polite">Remets les pièces en ordre</p><button class="n4-mix" type="button">Mélanger</button></div>
</div>
<h1 class="n4-title">Il manque des pièces à cette page.</h1>
<p class="n4-sub">Nous l'avons cherchée dans toutes les boîtes du magasin de jouets. En attendant, résous le taquin ou retourne à la vitrine.</p>
<a class="n4-cta" href="/">Retour à la vitrine</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-puzzle").forEach((el) => {
const box = el.querySelector(".n4-box");
const board = el.querySelector(".n4-board");
const tiles = Array.from(el.querySelectorAll(".n4-tile"));
const st = el.querySelector(".n4-st");
const mix = el.querySelector(".n4-mix");
const START = st.textContent;
const pos = tiles.map((_, i) => i);
let empty = 8;
const paint = () => tiles.forEach((t, i) => {
t.style.setProperty("--x", String(pos[i] % 3));
t.style.setProperty("--y", String(Math.floor(pos[i] / 3)));
});
const adj = (a, b) => Math.abs((a % 3) - (b % 3)) + Math.abs(Math.floor(a / 3) - Math.floor(b / 3)) === 1;
const solved = () => pos.every((p, j) => p === j);
const swap = (i) => { const c = pos[i]; pos[i] = empty; empty = c; };
const move = (i) => {
if (!adj(pos[i], empty)) return;
swap(i);
paint();
const done = solved();
box.classList.toggle("n4-done", done);
st.textContent = done ? "Résolu. La page n'est toujours pas réapparue." : START;
};
const shuffle = () => {
let prev = -1;
do {
for (let n = 0; n < 80; n++) {
const opts = tiles.map((_, i) => i).filter((i) => i !== prev && adj(pos[i], empty));
const i = opts[Math.floor(Math.random() * opts.length)];
swap(i);
prev = i;
}
} while (solved());
paint();
box.classList.remove("n4-done");
st.textContent = START;
};
tiles.forEach((t, i) => t.addEventListener("click", () => move(i)));
board.addEventListener("keydown", (e) => {
const d = { ArrowLeft: 1, ArrowRight: -1, ArrowUp: 3, ArrowDown: -3 }[e.key];
if (!d) return;
e.preventDefault();
const cell = empty + d;
if (cell < 0 || cell > 8 || (Math.abs(d) === 1 && Math.floor(cell / 3) !== Math.floor(empty / 3))) return;
const i = pos.indexOf(cell);
move(i);
tiles[i].focus();
});
mix.addEventListener("click", shuffle);
shuffle();
});
</script>
</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
Voir tout : 404Où l’utiliser
Les magasins de jouets et les marques pour enfants peuvent transformer leur page d'erreur en taquin classique. Huit pièces laquées, mélangées au chargement dans un plateau en bois, forment ensemble un grand 404 blanc sur un dégradé rouge, jaune et turquoise. Chaque pièce montre sa part de l'image, qui se lit d'un bloc une fois résolue.
Clique sur une pièce voisine du trou ou utilise les flèches pour la déplacer. Une ligne d'état confirme la solution et le bouton de mélange recommence. Change le turquoise du halo final et du bouton.