29 lines
3.2 KiB
Plaintext
29 lines
3.2 KiB
Plaintext
<!DOCTYPE html><html lang="nl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wachtwoord resetten — Mek-Tech</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/dynamic.css"><link rel="icon" href="/img/favicon.svg">
|
|
<style>
|
|
html,body{height:100%;margin:0;padding:0}
|
|
body{display:flex;align-items:center;justify-content:center;background:var(--bg);position:relative;overflow:hidden;font-family:'Inter',-apple-system,sans-serif}
|
|
body::before{content:'';position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% -30%,rgba(88,166,255,.06) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 85% 85%,rgba(130,80,223,.05) 0%,transparent 50%)}
|
|
.login-wrap{position:relative;z-index:1;width:100%;max-width:400px;padding:1.5rem}
|
|
.login-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2.25rem 2rem;position:relative;overflow:hidden}
|
|
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--purple),var(--green));background-size:200% 100%;animation:gradientShift 4s ease infinite}
|
|
.login-logo{text-align:center;margin-bottom:1.75rem}
|
|
.login-logo img{height:40px;width:auto;margin-bottom:.25rem;filter:drop-shadow(0 0 16px rgba(88,166,255,.12))}
|
|
.login-logo .tagline{font-size:.7rem;color:var(--text-dim);letter-spacing:.5px}
|
|
.field{margin-bottom:1rem}
|
|
.field label{display:block;font-size:.68rem;font-weight:600;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.4px}
|
|
.field input{width:100%;padding:.55rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.85rem;font-family:inherit;transition:all .2s ease}
|
|
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(88,166,255,.1)}
|
|
.btn-primary{width:100%;padding:.6rem;background:linear-gradient(135deg,var(--accent),#4d8fd9);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
|
|
.btn-primary:hover{box-shadow:0 4px 16px rgba(88,166,255,.25);transform:translateY(-1px)}
|
|
.alert{font-size:.72rem;padding:.45rem .7rem;border-radius:7px;margin-bottom:1rem;font-weight:500}
|
|
.alert-error{background:var(--red-bg);border:1px solid var(--red);color:var(--red)}
|
|
</style></head><body>
|
|
<div class="login-wrap"><div class="login-card">
|
|
<div class="login-logo"><img src="/img/logo.svg" alt="Mek-Tech"><p class="tagline">Nieuw wachtwoord instellen</p></div>
|
|
<% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
|
|
<form method="POST" action="/wachtwoord-reset/<%= token %>">
|
|
<div class="field"><label>Nieuw wachtwoord</label><input type="password" name="password" placeholder="Minimaal 6 tekens" required minlength="6"></div>
|
|
<div class="field"><label>Bevestig wachtwoord</label><input type="password" name="password2" placeholder="Herhaal uw wachtwoord" required minlength="6"></div>
|
|
<button type="submit" class="btn-primary">Wachtwoord wijzigen</button>
|
|
</form>
|
|
</div></div></body></html> |