Atrapados0
La página se ha escondido bajo tierra.
Un topo se la ha llevado a su madriguera. Intenta atraparlo o vuelve al inicio por el camino de siempre.
Volver al inicioHTML + CSS404
Maulwurf-404
Ein Rasen mit sechs Löchern, aus denen ein Maulwurf mit 404-Schild schaut; triff ihn rechtzeitig für einen Punkt.
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-moles {
--accent: #f4c430;
--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-moles *,.n4-moles *::before,.n4-moles *::after {
box-sizing: border-box;
}
.n4-moles .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-moles .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-moles .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-moles .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-moles .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-moles .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-moles .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-moles .n4-stars,.n4-moles .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-moles .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-moles-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-moles .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-moles-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-moles [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-moles-tw {
from {
opacity: .3;
}
}
@keyframes n4-moles-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-moles-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-moles *,.n4-moles *::before,.n4-moles *::after {
animation: none!important;
transition: none!important;
}
}
.n4-moles {
background: radial-gradient(90% 45% at 50% 0,#eef9e2,transparent 75%),linear-gradient(#c7e7ab,#8fca66 55%,#67a845);
color: #17330f;
}
.n4-moles .n4-lawn {
width: min(60cqmin,420px);
font-size: min(2cqmin,14px);
margin-bottom: 1.2cqmin;
padding: 1em 1.4em .8em;
border-radius: 1.6em;
background: repeating-linear-gradient(100deg,rgba(255,255,255,.07) 0 .3em,transparent .3em .9em),radial-gradient(120% 90% at 50% 0,#7cc95a,#4c9433);
box-shadow: inset 0 .3em 0 rgba(255,255,255,.28),inset 0 -.5em 1em rgba(0,0,0,.2),0 1.4em 2em -1.2em rgba(23,51,15,.6);
}
.n4-moles .n4-holes {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: .4em 1.4em;
}
.n4-moles .n4-hole {
position: relative;
height: 7em;
padding: 0;
border: 0;
border-radius: 1em;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.n4-moles .n4-hole::before {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: .3em;
height: 2.6em;
border-radius: 50%;
background: radial-gradient(closest-side,#1f1005 50%,#4a2e16 72%,#7a5230 94%,transparent);
transition: filter .2s;
}
.n4-moles .n4-hole::after {
content: "";
position: absolute;
z-index: 2;
left: 6%;
right: 6%;
bottom: .3em;
height: 2.6em;
border-radius: 50%;
box-shadow: inset 0 -.5em 0 #8a5c35;
pointer-events: none;
}
.n4-moles .n4-hole:hover::before {
filter: brightness(1.35);
}
.n4-moles .n4-hole:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.n4-moles .n4-pit {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 1.6em;
overflow: hidden;
z-index: 1;
}
.n4-moles .n4-mole {
position: absolute;
left: 22%;
right: 22%;
bottom: 0;
height: 5em;
border-radius: 50% 50% 38% 38%/62% 62% 30% 30%;
background: radial-gradient(circle at 37% 33%,#111 0 .2em,transparent .24em),radial-gradient(circle at 63% 33%,#111 0 .2em,transparent .24em),radial-gradient(circle at 37% 31%,#fff 0 .34em,transparent .38em),radial-gradient(circle at 63% 31%,#fff 0 .34em,transparent .38em),radial-gradient(ellipse .5em .38em at 50% 47%,#f49ac1 90%,transparent),radial-gradient(ellipse 1.4em 1em at 50% 54%,#d8b48a 92%,transparent),linear-gradient(#8a5a35,#5e3b20);
transform: translateY(105%);
transition: transform calc(.16s / var(--k)) cubic-bezier(.3,1.5,.6,1);
}
.n4-moles .n4-mole b {
position: absolute;
left: 50%;
bottom: .55em;
translate: -50% 0;
padding: .14em .35em;
border-radius: .15em;
background: #f1d29a;
color: #5b3a1e;
font: 800 .8em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
rotate: -6deg;
box-shadow: 0 .1em 0 #a9824b;
}
.n4-moles .n4-up .n4-mole {
transform: translateY(6%);
}
.n4-moles .n4-hit .n4-mole {
transform: translateY(42%) scale(1.12,.78);
transition-duration: .08s;
}
.n4-moles .n4-count {
display: flex;
justify-content: center;
align-items: baseline;
gap: .6em;
margin: .5em 0 0;
font: 700 .95em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
text-transform: uppercase;
letter-spacing: .14em;
color: #f4ffe8;
}
.n4-moles .n4-count b {
min-width: 1.6em;
font-size: 1.7em;
color: var(--accent);
text-shadow: 0 .08em 0 rgba(0,0,0,.25);
}
.n4-moles .n4-tag {
color: #2d5f1d;
}
.n4-moles .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 800;
letter-spacing: -.03em;
}
.n4-moles .n4-sub {
color: #2f5223;
}
.n4-moles .n4-cta {
background: #17330f;
color: #f4ffe8;
}
</style>
</head>
<body>
<main class="n4-moles">
<div class="n4-copy">
<div class="n4-lawn">
<div class="n4-holes" role="group" aria-label="Maulwurfslöcher im Garten">
<button class="n4-hole" type="button" aria-label="Loch 1"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Loch 2"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Loch 3"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Loch 4"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Loch 5"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
<button class="n4-hole" type="button" aria-label="Loch 6"><span class="n4-pit"><i class="n4-mole"><b translate="no">404</b></i></span></button>
</div>
<p class="n4-count"><span>Gefangen</span><b aria-live="polite" translate="no">0</b></p>
</div>
<span class="n4-tag">Garten 404</span>
<h1 class="n4-title">Die Seite hat sich unter der Erde versteckt.</h1>
<p class="n4-sub">Ein Maulwurf hat sie in seinen Bau geschleppt. Versuch ihn zu fangen oder geh auf dem üblichen Weg zur Startseite.</p>
<a class="n4-cta" href="/">Zur Startseite</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-moles").forEach((el) => {
const holes = Array.from(el.querySelectorAll(".n4-hole"));
const out = el.querySelector(".n4-count b");
const rm = matchMedia("(prefers-reduced-motion: reduce)").matches;
const k = parseFloat(getComputedStyle(el).getPropertyValue("--k")) || 1;
let cur = -1, n = 0, t1 = 0, t2 = 0;
const pop = () => {
let i = Math.floor(Math.random() * holes.length);
if (i === cur) i = (i + 1) % holes.length;
cur = i;
holes[i].classList.add("n4-up");
t1 = setTimeout(() => {
holes[i].classList.remove("n4-up");
cur = -1;
t2 = setTimeout(pop, (300 + Math.random() * 500) / k);
}, (900 + Math.random() * 400) / k);
};
holes.forEach((h, i) => h.addEventListener("click", () => {
if (i !== cur) return;
clearTimeout(t1);
clearTimeout(t2);
n++;
out.textContent = String(n);
h.classList.remove("n4-up");
h.classList.add("n4-hit");
cur = -1;
t2 = setTimeout(() => { h.classList.remove("n4-hit"); pop(); }, 420 / k);
}));
t2 = setTimeout(pop, 600 / k);
});
</script>
</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
Alle ansehen: 404Wofür du ihn nutzen kannst
Eine Gartenfehlerseite mit kleinem Spiel: sechs Löcher in sattgrünem Rasen, und ein Maulwurf mit einem Holzschild 404 schaut etwa eine Sekunde lang aus einem zufälligen Loch. Erwischst du ihn per Klick, Tippen oder Tastatur, wird er platt gedrückt und der Zähler steigt.
Jedes Loch ist ein echter Button mit eigener Beschriftung und Fokusrahmen, das Spiel klappt also auch ohne Maus. Der Geschwindigkeitsregler bestimmt, wie schnell der Maulwurf auftaucht. Passe das Sonnenblumengelb an.