Revisar página 404

Revisa el motor: esta página no arranca.

El testigo de avería lleva un rato encendido y el diagnóstico solo devuelve el código 404. Vuelve al inicio mientras la revisamos.

Volver al inicio
HTML + CSS404

Armaturenbrett-404

Ein Kombiinstrument bei Nacht: Die Nadeln machen ihren Check, der Kilometerzähler rollt auf 404 und die Motorleuchte bleibt an.

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-garage {
        --accent: #ff5a1f;
        --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-garage *,.n4-garage *::before,.n4-garage *::after {
        box-sizing: border-box;
      }
      
      .n4-garage .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-garage .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-garage .n4-sub {
        margin: 0;
        max-width: 34em;
        font-size: clamp(13px,2.4cqmin,18px);
        color: #a1a1a6;
        text-wrap: balance;
      }
      
      .n4-garage .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-garage .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-garage .n4-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px -10px var(--accent);
      }
      
      .n4-garage .n4-cta:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
      }
      
      .n4-garage .n4-stars,.n4-garage .n4-stars2 {
        position: absolute;
        inset: -4%;
        pointer-events: none;
      }
      
      .n4-garage .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-garage-tw calc(5s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-garage .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-garage-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
      }
      
      .n4-garage [data-depth] {
        transition: transform .9s cubic-bezier(.2,.7,.2,1);
      }
      
      @keyframes n4-garage-tw {
        from {
          opacity: .3;
        }
      }
      
      @keyframes n4-garage-spin {
        to {
          transform: rotate(1turn);
        }
      }
      
      @keyframes n4-garage-fade {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-garage *,.n4-garage *::before,.n4-garage *::after {
          animation: none!important;
          transition: none!important;
        }
      }
      
      .n4-garage {
        background: radial-gradient(70% 50% at 50% 30%,#1c1e22,#060607 75%);
        color: #f1f1f2;
      }
      
      .n4-garage .n4-dash {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1.2em;
        width: min(80cqmin,560px);
        font-size: min(1.9cqmin,13.5px);
        margin-bottom: 2cqmin;
        padding: 1.4em 1.8em;
        border-radius: 7em/3.6em;
        background: radial-gradient(60% 80% at 50% 0,rgba(255,255,255,.07),transparent),#0b0c0e;
        box-shadow: inset 0 0 0 .3em #1d1f23,inset 0 .6em 1.2em rgba(0,0,0,.8),0 2em 3em -1.5em #000;
      }
      
      .n4-garage .n4-g {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
      }
      
      .n4-garage .n4-face {
        fill: #101114;
        stroke: #2c2f35;
        stroke-width: 2;
      }
      
      .n4-garage .n4-t {
        stroke: #7d838b;
        stroke-width: 1;
      }
      
      .n4-garage .n4-tm {
        stroke: #f2f2f2;
        stroke-width: 2;
      }
      
      .n4-garage .n4-red {
        fill: none;
        stroke: #ff3b30;
        stroke-width: 3.4;
      }
      
      .n4-garage .n4-gn {
        font: 600 8.5px "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        fill: #e9e9ea;
        text-anchor: middle;
      }
      
      .n4-garage .n4-unit {
        font: 500 5.5px "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        fill: #8d939b;
        text-anchor: middle;
        letter-spacing: .06em;
      }
      
      .n4-garage .n4-ndl {
        transform-box: view-box;
        transform-origin: 60px 60px;
        rotate: var(--idle,-135deg);
        animation: n4-garage-sweep calc(2.2s / var(--k)) ease-in-out .3s both;
      }
      
      .n4-garage .n4-ndl path {
        fill: var(--accent);
        filter: drop-shadow(0 0 2px var(--accent));
      }
      
      .n4-garage .n4-rev {
        --idle: -111deg;
      }
      
      .n4-garage .n4-rev .n4-ndl path {
        transform-box: view-box;
        transform-origin: 60px 60px;
        animation: n4-garage-idle calc(.22s / var(--k)) ease-in-out infinite alternate;
      }
      
      .n4-garage .n4-go .n4-rev .n4-ndl {
        animation: n4-garage-revup calc(1.5s / var(--k)) ease-out;
      }
      
      .n4-garage .n4-go .n4-spd .n4-ndl {
        animation: n4-garage-creep calc(1.5s / var(--k)) ease-out;
      }
      
      .n4-garage .n4-hub {
        fill: #2a2c31;
        stroke: #55585e;
      }
      
      .n4-garage .n4-mid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .65em;
      }
      
      .n4-garage .n4-warn {
        display: flex;
        gap: .6em;
      }
      
      .n4-garage .n4-warn svg {
        width: 2em;
        height: 2em;
        fill: #2e2a24;
        animation: n4-garage-test calc(1.8s / var(--k)) steps(1) both;
      }
      
      .n4-garage .n4-eng {
        animation-name: n4-garage-eng!important;
      }
      
      .n4-garage .n4-go .n4-warn svg {
        animation-name: n4-garage-testb;
      }
      
      .n4-garage .n4-go .n4-eng {
        animation-name: n4-garage-engb!important;
      }
      
      .n4-garage .n4-odo {
        display: flex;
        align-items: center;
        gap: .1em;
        padding: .3em .45em;
        border-radius: .35em;
        background: #050506;
        box-shadow: inset 0 0 0 .1em #2f3136;
      }
      
      .n4-garage .n4-odo span {
        display: block;
        width: .85em;
        height: 1.2em;
        overflow: hidden;
        border-radius: .1em;
        background: linear-gradient(#bdbdbd,#fff 35%,#fff 65%,#bdbdbd);
        font: 700 1.3em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        color: #111;
        text-align: center;
      }
      
      .n4-garage .n4-odo span i {
        display: block;
        font-style: normal;
        transform: translateY(calc(var(--d) * -1.2em));
        animation: n4-garage-roll calc(2.6s / var(--k)) cubic-bezier(.3,.7,.2,1) calc(var(--i) * .12s) both;
      }
      
      .n4-garage .n4-odo small {
        margin-left: .35em;
        font: 600 .8em/1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        color: #8d939b;
      }
      
      .n4-garage .n4-code {
        margin: 0;
        font: 700 .85em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
        color: #ffb000;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      
      .n4-garage .n4-start {
        width: 7.4em;
        height: 7.4em;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        font: 800 .62em/1.1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
        text-transform: uppercase;
        letter-spacing: .1em;
        color: #f2f2f2;
        background: radial-gradient(circle at 40% 30%,#4a4d52,#1b1c1f 70%);
        box-shadow: 0 0 0 .4em #2a2b2f,0 0 0 .6em var(--accent),0 0 1.6em color-mix(in srgb,var(--accent) 50%,transparent),0 .6em 1.2em rgba(0,0,0,.6);
        transition: transform .1s,filter .2s;
      }
      
      .n4-garage .n4-start:hover {
        filter: brightness(1.2);
      }
      
      .n4-garage .n4-start:active {
        transform: scale(.94);
      }
      
      .n4-garage .n4-start:focus-visible {
        outline: 2px solid #fff;
        outline-offset: .9em;
      }
      
      .n4-garage .n4-title {
        font-size: clamp(20px,5cqmin,42px);
        font-weight: 700;
        letter-spacing: -.025em;
      }
      
      .n4-garage .n4-sub {
        color: #a4a7ad;
      }
      
      .n4-garage .n4-cta {
        background: var(--accent);
        color: #170700;
      }
      
      @keyframes n4-garage-sweep {
        0% {
          rotate: -135deg;
        }
        45% {
          rotate: 135deg;
        }
      }
      
      @keyframes n4-garage-idle {
        to {
          rotate: 1.6deg;
        }
      }
      
      @keyframes n4-garage-revup {
        25% {
          rotate: 60deg;
        }
      }
      
      @keyframes n4-garage-creep {
        30% {
          rotate: -118deg;
        }
      }
      
      @keyframes n4-garage-roll {
        from {
          transform: translateY(0);
        }
      }
      
      @keyframes n4-garage-test {
        0% {
          fill: #ffb000;
          filter: drop-shadow(0 0 .3em #ffb000);
        }
        80%,100% {
          fill: #2e2a24;
          filter: none;
        }
      }
      
      @keyframes n4-garage-testb {
        0% {
          fill: #ffb000;
          filter: drop-shadow(0 0 .3em #ffb000);
        }
        80%,100% {
          fill: #2e2a24;
          filter: none;
        }
      }
      
      @keyframes n4-garage-eng {
        0%,25%,50%,75%,100% {
          fill: #ffb000;
          filter: drop-shadow(0 0 .3em #ffb000);
        }
        12%,37%,62% {
          fill: #2e2a24;
          filter: none;
        }
      }
      
      @keyframes n4-garage-engb {
        0%,25%,50%,75%,100% {
          fill: #ffb000;
          filter: drop-shadow(0 0 .3em #ffb000);
        }
        12%,37%,62% {
          fill: #2e2a24;
          filter: none;
        }
      }
      
      @media (prefers-reduced-motion:reduce) {
        .n4-garage .n4-eng {
          fill: #ffb000;
        }
      }
    </style>
  </head>
  <body>
    <main class="n4-garage">
      <div class="n4-copy">
        <div class="n4-dash">
          <svg class="n4-g n4-rev" viewBox="0 0 120 120" aria-hidden="true"><circle cx="60" cy="60" r="57" class="n4-face"/><path class="n4-red" d="M111.7 54.6A52 52 0 0 1 96.8 96.8"/><path class="n4-t n4-tm" d="M24.6 95.4L29.6 90.4"/><path class="n4-t" d="M20.7 91.0L23.5 88.8"/><path class="n4-t" d="M17.4 86.1L20.4 84.3"/><path class="n4-t" d="M14.6 80.9L17.8 79.5"/><path class="n4-t" d="M12.4 75.5L15.8 74.4"/><path class="n4-t n4-tm" d="M11.0 69.8L17.8 68.4"/><path class="n4-t" d="M10.2 63.9L13.6 63.6"/><path class="n4-t" d="M10.0 58.0L13.5 58.2"/><path class="n4-t" d="M10.6 52.2L14.1 52.7"/><path class="n4-t" d="M11.9 46.4L15.2 47.4"/><path class="n4-t n4-tm" d="M13.8 40.9L20.3 43.5"/><path class="n4-t" d="M16.4 35.6L19.4 37.3"/><path class="n4-t" d="M19.5 30.6L22.4 32.7"/><path class="n4-t" d="M23.3 26.1L25.9 28.4"/><path class="n4-t" d="M27.5 22.0L29.8 24.6"/><path class="n4-t n4-tm" d="M32.2 18.4L36.1 24.2"/><path class="n4-t" d="M37.3 15.4L38.9 18.6"/><path class="n4-t" d="M42.7 13.1L43.9 16.4"/><path class="n4-t" d="M48.3 11.4L49.1 14.8"/><path class="n4-t" d="M54.1 10.3L54.5 13.8"/><path class="n4-t n4-tm" d="M60.0 10.0L60.0 17.0"/><path class="n4-t" d="M65.9 10.3L65.5 13.8"/><path class="n4-t" d="M71.7 11.4L70.9 14.8"/><path class="n4-t" d="M77.3 13.1L76.1 16.4"/><path class="n4-t" d="M82.7 15.4L81.1 18.6"/><path class="n4-t n4-tm" d="M87.8 18.4L83.9 24.2"/><path class="n4-t" d="M92.5 22.0L90.2 24.6"/><path class="n4-t" d="M96.7 26.1L94.1 28.4"/><path class="n4-t" d="M100.5 30.6L97.6 32.7"/><path class="n4-t" d="M103.6 35.6L100.6 37.3"/><path class="n4-t n4-tm" d="M106.2 40.9L99.7 43.5"/><path class="n4-t" d="M108.1 46.4L104.8 47.4"/><path class="n4-t" d="M109.4 52.2L105.9 52.7"/><path class="n4-t" d="M110.0 58.0L106.5 58.2"/><path class="n4-t" d="M109.8 63.9L106.4 63.6"/><path class="n4-t n4-tm" d="M109.0 69.8L102.2 68.4"/><path class="n4-t" d="M107.6 75.5L104.2 74.4"/><path class="n4-t" d="M105.4 80.9L102.2 79.5"/><path class="n4-t" d="M102.6 86.1L99.6 84.3"/><path class="n4-t" d="M99.3 91.0L96.5 88.8"/><path class="n4-t n4-tm" d="M95.4 95.4L90.4 90.4"/><text class="n4-gn" x="35.3" y="87.7">0</text><text class="n4-gn" x="25.7" y="69.8">1</text><text class="n4-gn" x="27.7" y="49.6">2</text><text class="n4-gn" x="40.6" y="33.9">3</text><text class="n4-gn" x="60.0" y="28.0">4</text><text class="n4-gn" x="79.4" y="33.9">5</text><text class="n4-gn" x="92.3" y="49.6">6</text><text class="n4-gn" x="94.3" y="69.8">7</text><text class="n4-gn" x="84.7" y="87.7">8</text><text class="n4-unit" x="60" y="86">x1000 r/min</text><g class="n4-ndl"><path d="M58.6 66L60 13l1.4 53z"/></g><circle cx="60" cy="60" r="5.5" class="n4-hub"/></svg>
          <div class="n4-mid">
            <div class="n4-warn" aria-hidden="true">
              <svg class="n4-eng" viewBox="0 0 24 24"><path d="M3 10h2V8h3l2-2h5v2h2l2 2h2V8h2v9h-2v-2h-2l-2 3H9l-2-2H5v-2H3z"/></svg>
              <svg class="n4-bat" viewBox="0 0 24 24"><path d="M6 5h3v2H6zm9 0h3v2h-3zM3 7h18v12H3zm3 5v1.6h4V12zm8 0v1.6h1.2V15h1.6v-1.4H18V12h-1.2v-1.4h-1.6V12z" fill-rule="evenodd"/></svg>
              <svg class="n4-oil" viewBox="0 0 24 24"><path d="M2 11l5-2h6l2 2 6-3-4 8H5l-3-3zm19 5.5a1.5 1.5 0 0 0 3 0c0-1-1.5-3-1.5-3s-1.5 2-1.5 3z"/></svg>
            </div>
            <div class="n4-odo" aria-hidden="true" translate="no"><span style="--d:10;--i:0"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:10;--i:1"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:10;--i:2"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:14;--i:3"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:10;--i:4"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><span style="--d:14;--i:5"><i>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</i></span><small>km</small></div>
            <p class="n4-code">Seite 404 prüfen</p>
            <button class="n4-start" type="button">Starten</button>
          </div>
          <svg class="n4-g n4-spd" viewBox="0 0 120 120" aria-hidden="true"><circle cx="60" cy="60" r="57" class="n4-face"/><path class="n4-t n4-tm" d="M24.6 95.4L29.6 90.4"/><path class="n4-t" d="M20.7 91.0L23.5 88.8"/><path class="n4-t" d="M17.4 86.1L20.4 84.3"/><path class="n4-t" d="M14.6 80.9L17.8 79.5"/><path class="n4-t" d="M12.4 75.5L15.8 74.4"/><path class="n4-t n4-tm" d="M11.0 69.8L17.8 68.4"/><path class="n4-t" d="M10.2 63.9L13.6 63.6"/><path class="n4-t" d="M10.0 58.0L13.5 58.2"/><path class="n4-t" d="M10.6 52.2L14.1 52.7"/><path class="n4-t" d="M11.9 46.4L15.2 47.4"/><path class="n4-t n4-tm" d="M13.8 40.9L20.3 43.5"/><path class="n4-t" d="M16.4 35.6L19.4 37.3"/><path class="n4-t" d="M19.5 30.6L22.4 32.7"/><path class="n4-t" d="M23.3 26.1L25.9 28.4"/><path class="n4-t" d="M27.5 22.0L29.8 24.6"/><path class="n4-t n4-tm" d="M32.2 18.4L36.1 24.2"/><path class="n4-t" d="M37.3 15.4L38.9 18.6"/><path class="n4-t" d="M42.7 13.1L43.9 16.4"/><path class="n4-t" d="M48.3 11.4L49.1 14.8"/><path class="n4-t" d="M54.1 10.3L54.5 13.8"/><path class="n4-t n4-tm" d="M60.0 10.0L60.0 17.0"/><path class="n4-t" d="M65.9 10.3L65.5 13.8"/><path class="n4-t" d="M71.7 11.4L70.9 14.8"/><path class="n4-t" d="M77.3 13.1L76.1 16.4"/><path class="n4-t" d="M82.7 15.4L81.1 18.6"/><path class="n4-t n4-tm" d="M87.8 18.4L83.9 24.2"/><path class="n4-t" d="M92.5 22.0L90.2 24.6"/><path class="n4-t" d="M96.7 26.1L94.1 28.4"/><path class="n4-t" d="M100.5 30.6L97.6 32.7"/><path class="n4-t" d="M103.6 35.6L100.6 37.3"/><path class="n4-t n4-tm" d="M106.2 40.9L99.7 43.5"/><path class="n4-t" d="M108.1 46.4L104.8 47.4"/><path class="n4-t" d="M109.4 52.2L105.9 52.7"/><path class="n4-t" d="M110.0 58.0L106.5 58.2"/><path class="n4-t" d="M109.8 63.9L106.4 63.6"/><path class="n4-t n4-tm" d="M109.0 69.8L102.2 68.4"/><path class="n4-t" d="M107.6 75.5L104.2 74.4"/><path class="n4-t" d="M105.4 80.9L102.2 79.5"/><path class="n4-t" d="M102.6 86.1L99.6 84.3"/><path class="n4-t" d="M99.3 91.0L96.5 88.8"/><path class="n4-t n4-tm" d="M95.4 95.4L90.4 90.4"/><text class="n4-gn" x="35.3" y="87.7">0</text><text class="n4-gn" x="25.7" y="69.8">30</text><text class="n4-gn" x="27.7" y="49.6">60</text><text class="n4-gn" x="40.6" y="33.9">90</text><text class="n4-gn" x="60.0" y="28.0">120</text><text class="n4-gn" x="79.4" y="33.9">150</text><text class="n4-gn" x="92.3" y="49.6">180</text><text class="n4-gn" x="94.3" y="69.8">210</text><text class="n4-gn" x="84.7" y="87.7">240</text><text class="n4-unit" x="60" y="86">km/h</text><g class="n4-ndl"><path d="M58.6 66L60 13l1.4 53z"/></g><circle cx="60" cy="60" r="5.5" class="n4-hub"/></svg>
        </div>
        <h1 class="n4-title">Motor prüfen: Diese Seite springt nicht an.</h1>
        <p class="n4-sub">Die Warnleuchte brennt schon eine Weile, und die Diagnose liefert nur den Code 404. Geh zur Startseite, während wir nachsehen.</p>
        <a class="n4-cta" href="/">Zur Startseite</a>
      </div>
    </main>
    <script>
      document.querySelectorAll(".n4-garage").forEach((el) => {
        const dash = el.querySelector(".n4-dash");
        el.querySelector(".n4-start").addEventListener("click", () => {
          dash.classList.remove("n4-go");
          void dash.offsetWidth;
          dash.classList.add("n4-go");
        });
      });
    </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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus 404

Alle ansehen: 404

Wofür du ihn nutzen kannst

Werkstätten, Autohäuser und Motorseiten können dieses Kombiinstrument als Fehlerseite nutzen. Beim Laden fahren beide Nadeln einmal über die ganze Skala und zurück, die Walzen des Kilometerzählers rollen auf 000404, und die Warnleuchten testen sich, bis nur die gelbe Motorkontrollleuchte brennt.

Der runde Startknopf wiederholt den Check und lässt den Drehzahlmesser kurz hochschnellen, im Leerlauf zittert die Nadel leicht. Die Skalen sind SVG mit echten Strichen. Ändere die Nadelfarbe über den Akzent und verlinke den Button.