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

404 Tableau de bord

Le combiné d'une voiture la nuit : les aiguilles font leur test, le compteur kilométrique roule jusqu'à 404 et le voyant moteur reste allumé.

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-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">Vérifier page 404</p>
            <button class="n4-start" type="button">Démarrer</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">Vérifie le moteur : cette page ne démarre pas.</h1>
        <p class="n4-sub">Le voyant de panne est allumé depuis un moment et le diagnostic ne renvoie que le code 404. Retourne à l'accueil pendant que nous vérifions.</p>
        <a class="n4-cta" href="/">Retour à l’accueil</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 pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans 404

Voir tout : 404

Où l’utiliser

Garages, concessionnaires et sites automobiles peuvent utiliser ce combiné d'instruments comme page d'erreur. Au chargement, les deux aiguilles balaient tout le cadran et reviennent, les rouleaux du compteur kilométrique tournent jusqu'à 000404 et les voyants font leur test jusqu'à ce que seul le voyant moteur orange reste allumé.

Le bouton rond de démarrage relance le test et donne un coup d'accélérateur au compte-tours, tandis que l'aiguille tremble au ralenti. Les cadrans sont en SVG avec de vraies graduations. Change la couleur des aiguilles avec l'accent.