Wachtwoord tonen met knipperend oog Nieuw

<!-- Wachtwoord tonen met knipperend oog · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pwe"><div class="pwe__card"><span class="pwe__kk">Klantportaal · Installatiebedrijf Hoek</span><span class="pwe__lb">Wachtwoord</span>
<div class="pwe__fld"><input class="pwe__in" type="password" value="Zomer2026!Delft" aria-label="Wachtwoord" autocomplete="current-password" spellcheck="false"><span class="pwe__mir" aria-hidden="true"></span>
<button class="pwe__eye" type="button" aria-label="Toon wachtwoord" aria-pressed="false"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><g class="pwe__open"><path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z"/><circle cx="12" cy="12" r="3.2"/></g><g class="pwe__shut"><path d="M2 11.5s3.6 5 10 5 10-5 10-5"/><path d="M5.2 14.6l-1.5 2.1M9.4 16.2l-.6 2.4M14.6 16.2l.6 2.4M18.8 14.6l1.5 2.1"/></g></svg></button></div>
<button class="pwe__go" type="button">Inloggen</button></div></div>
</div>

/* Wachtwoord tonen met knipperend oog · NedDev · eigen werk. */
.pwe{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;display:grid;place-items:center;padding:14px}
.pwe__card{width:min(290px,100%);background:#fff;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:7px}
.pwe__kk{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#F5480F;margin-bottom:4px}
.pwe__lb{font-size:12px;font-weight:600}
.pwe__fld{position:relative}
.pwe__in{width:100%;box-sizing:border-box;font:500 14px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#0a0a0a;caret-color:#0a0a0a;border:1px solid #dcd8d2;border-radius:4px;padding:10px 44px 10px 11px;outline:none;transition:border-color .2s}
.pwe__in:focus{border-color:#0a0a0a}
.pwe__mir{position:absolute;left:12px;top:0;bottom:0;display:flex;align-items:center;font:500 14px 'JetBrains Mono',monospace;letter-spacing:.04em;color:#0a0a0a;pointer-events:none;white-space:pre}
.pwe__mir em{font-style:normal;color:#F5480F}
.pwe__eye{appearance:none;position:absolute;right:4px;top:50%;width:34px;height:30px;margin-top:-15px;border:0;border-radius:4px;background:none;color:#0a0a0a;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.pwe__eye:hover{background:#f4f3f1}.pwe__eye:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.pwe__eye svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;overflow:visible}
.pwe__open{transform-origin:12px 12px;transform:scaleY(.08);opacity:0;transition:transform .32s cubic-bezier(.3,1.4,.5,1),opacity .15s}
.pwe__open circle{fill:#F5480F;stroke:none}
.pwe__shut{transition:opacity .15s .1s}
.pwe.is-show .pwe__open{transform:none;opacity:1}.pwe.is-show .pwe__shut{opacity:0;transition-delay:0s}
.pwe__go{appearance:none;margin-top:4px;height:38px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px 'Switzer',sans-serif;cursor:pointer;transition:background .2s}
.pwe__go:hover{background:#F5480F}.pwe__go:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pwe__open,.pwe__shut{transition:none}}

// Wachtwoord tonen met knipperend oog · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.pwe')||root;
var inp=root.querySelector('.pwe__in'),mir=root.querySelector('.pwe__mir'),eye=root.querySelector('.pwe__eye');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,show=false,raf=0,touched=false;
var CH='ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789#?%';
function rnd(){return CH[Math.floor(Math.random()*CH.length)];}
function esc(c){return c==='<'?'&lt;':c==='>'?'&gt;':c==='&'?'&amp;':c;}
function finish(){cancelAnimationFrame(raf);mir.innerHTML='';inp.style.color='';if(!show)inp.type='password';}
function anim(toShow){var v=inp.value,t0=performance.now();inp.type='text';inp.style.color='transparent';
raf=requestAnimationFrame(function f(now){var t=now-t0,out='',all=true;for(var i=0;i<v.length;i++){var at=80+i*38,c;
if(t>=at+90){c=toShow?esc(v[i]):'\u2022';}else if(t>=at){c='<em>'+esc(rnd())+'</em>';all=false;}else{c=toShow?'\u2022':esc(v[i]);all=false;}out+=c;}
mir.innerHTML=out;if(all){finish();return;}raf=requestAnimationFrame(f);});}
function set(v){show=v;root.classList.toggle('is-show',v);eye.setAttribute('aria-pressed',v?'true':'false');eye.setAttribute('aria-label',v?'Verberg wachtwoord':'Toon wachtwoord');cancelAnimationFrame(raf);mir.innerHTML='';
if(rm){inp.type=v?'text':'password';inp.style.color='';return;}anim(v);}
eye.addEventListener('click',function(){touched=true;set(!show);});
inp.addEventListener('input',function(){touched=true;finish();});
inp.addEventListener('focus',function(){touched=true;});
if(!rm){setTimeout(function(){if(!touched)set(true);},800);setTimeout(function(){if(!touched)set(false);},3600);}
}
init(document.querySelector('.jouw-container'));