404 met zoekveld en populaire pagina's Nieuw

<!-- 404 met zoekveld en populaire pagina's · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="e4z">
  <div class="e4z__main">
    <span class="e4z__code">Fout 404</span>
    <p class="e4z__title">Deze pagina bestaat niet (meer)</p>
    <p class="e4z__lead">Misschien is hij verhuisd toen we onze site vernieuwden. Zoek hieronder, of kies een van de pagina's die het vaakst bezocht worden.</p>
    <form class="e4z__form" role="search">
      <label for="e4z-q" class="e4z__sr">Zoek op de site</label>
      <input id="e4z-q" type="search" placeholder="Bijvoorbeeld: tarieven, spoed, kind" autocomplete="off">
      <button type="submit">Zoeken</button>
    </form>
    <ul class="e4z__res" aria-live="polite"></ul>
    <a href="#" class="e4z__back"><span aria-hidden="true">←</span> Terug naar de homepage</a>
  </div>
  <div class="e4z__pop">
    <span class="e4z__poph">Meest bezocht</span>
    <a href="#" class="e4z__card"><b>Afspraak maken</b><span>Online een controle of behandeling plannen</span></a>
    <a href="#" class="e4z__card"><b>Tarieven 2026</b><span>NZa-tarieven voor controle, vulling en kroon</span></a>
    <a href="#" class="e4z__card"><b>Spoed buiten openingstijden</b><span>Tandartsenspoedpost Nijmegen, 024 765 4321</span></a>
    <p class="e4z__foot">Tandartspraktijk Lindenhof · Nijmegen · 024 123 4567</p>
  </div>
</div>
</div>

/* 404 met zoekveld en populaire pagina's · NedDev · eigen werk. */
.e4z{position:relative;width:100%;align-self:flex-start;flex:none;min-height:460px;background:#f3f8fb;color:#0d2b40;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;padding:44px}
.e4z *{box-sizing:border-box}
.e4z__code{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#1b6fa8;border:1px solid #9cc5e3;border-radius:999px;padding:5px 11px}
.e4z__title{font-size:clamp(30px,4vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:18px 0 12px}
.e4z__lead{font-size:16px;line-height:1.55;color:#3e5a6e;margin:0 0 22px;max-width:50ch}
.e4z__form{display:flex;gap:8px;max-width:520px}
.e4z__form input{flex:1;min-width:0;border:1.5px solid #b9d3e5;background:#fff;border-radius:4px;padding:13px 14px;font:15px 'Switzer',sans-serif;color:#0d2b40;outline:none}
.e4z__form input:focus{border-color:#1b6fa8;box-shadow:0 0 0 3px rgba(27,111,168,.15)}
.e4z__form button{font:700 15px 'Switzer',sans-serif;background:#1b6fa8;color:#fff;border:0;border-radius:4px;padding:0 20px;cursor:pointer}
.e4z__form button:hover{background:#0d2b40}
.e4z__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.e4z__res{list-style:none;margin:10px 0 0;padding:0;max-width:520px}
.e4z__res li{border-bottom:1px solid #dde9f1}
.e4z__res a{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;font-size:14px;color:#0d2b40;text-decoration:none}
.e4z__res a:hover{color:#1b6fa8}
.e4z__res a b{font-weight:500}
.e4z__res a span{color:#6b8597;font-family:'JetBrains Mono',monospace;font-size:11px;white-space:nowrap}
.e4z__res mark{background:#d6eaf8;color:inherit;border-radius:2px}
.e4z__res .e4z__none{padding:10px 2px;font-size:14px;color:#3e5a6e}
.e4z__back{display:inline-flex;gap:8px;margin-top:22px;font-weight:600;font-size:15px;color:#1b6fa8;text-decoration:none}
.e4z__back:hover{text-decoration:underline;text-underline-offset:4px}
.e4z__pop{display:flex;flex-direction:column;gap:10px;align-self:center}
.e4z__poph{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b8597}
.e4z__card{display:block;background:#fff;border:1px solid #dde9f1;border-left:3px solid #1b6fa8;border-radius:4px;padding:14px 16px;text-decoration:none;color:#0d2b40;transition:transform .2s ease,box-shadow .2s ease}
.e4z__card:hover,.e4z__card:focus-visible{transform:translateX(4px);box-shadow:0 8px 20px -14px rgba(13,43,64,.5)}
.e4z__card b{display:block;font-size:15px}
.e4z__card span{display:block;font-size:13px;color:#4f6b7e;margin-top:2px}
.e4z__foot{font-size:12px;color:#6b8597;margin:6px 0 0}
@media(max-width:820px){.e4z{grid-template-columns:1fr;gap:28px;padding:26px 18px}.e4z__form button{padding:0 14px}}
@media(prefers-reduced-motion:reduce){.e4z__card{transition:none}}

// 404 met zoekveld en populaire pagina's · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.e4z');if(!w)return;
var P=[['Afspraak maken','/afspraak','afspraak plannen controle boeken'],['Tarieven 2026','/tarieven','prijs kosten tarief nza vergoeding'],['Spoed buiten openingstijden','/spoed','pijn spoed weekend avond nacht'],['Mondhygiëne','/mondhygiene','tandsteen reinigen poetsen gebitsreiniging'],['Kindertandarts','/kinderen','kind kinderen jeugd peuter'],['Implantaten','/implantaten','implantaat kroon brug'],['Inschrijven als nieuwe patiënt','/inschrijven','inschrijven nieuwe patient aanmelden wachtlijst'],['Vacatures','/vacatures','werken baan vacature assistent'],['Contact en route','/contact','adres route parkeren telefoon']];
var q=w.querySelector('#e4z-q'),res=w.querySelector('.e4z__res');
function esc(s){return s.replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];});}
function norm(s){return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');}
function run(v,submitted){
  var t=norm(v.trim());res.innerHTML='';if(!t)return;
  var hits=P.filter(function(p){return norm(p[0]+' '+p[2]).indexOf(t)>-1;}).slice(0,4);
  if(!hits.length){if(submitted)res.innerHTML='<li class="e4z__none">Niets gevonden voor "'+esc(v.trim())+'". Bel ons gerust: 024 123 4567.</li>';return;}
  res.innerHTML=hits.map(function(p){var i=norm(p[0]).indexOf(t),title=esc(p[0]);
    if(i>-1)title=esc(p[0].slice(0,i))+'<mark>'+esc(p[0].slice(i,i+t.length))+'</mark>'+esc(p[0].slice(i+t.length));
    return '<li><a href="#"><b>'+title+'</b><span>'+p[1]+'</span></a></li>';}).join('');
}
q.addEventListener('input',function(){run(q.value,false);});
w.querySelector('.e4z__form').addEventListener('submit',function(e){e.preventDefault();run(q.value,true);var f=res.querySelector('a');if(f)f.focus();});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));