57 lines
4.1 KiB
Plaintext
57 lines
4.1 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html lang="nl">
|
||
|
|
<head>
|
||
|
|
<%- include('partials/head', { pageTitle: 'Login' }) %>
|
||
|
|
<style>
|
||
|
|
html,body{height:100%;margin:0;padding:0}
|
||
|
|
body{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;font-family:'Inter',sans-serif}
|
||
|
|
body::before{content:'';position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% -30%,rgba(0,212,255,.1) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 85% 85%,rgba(168,85,247,.08) 0%,transparent 50%),radial-gradient(ellipse 45% 35% at 15% 15%,rgba(0,255,136,.05) 0%,transparent 50%);pointer-events:none}
|
||
|
|
.login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:1.5rem}
|
||
|
|
.login-card{background:var(--bg-card);border:1px solid rgba(0,212,255,.2);border-radius:16px;padding:2.25rem 2rem;animation:fadeInUp .5s ease-out;position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,212,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
|
||
|
|
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--purple),var(--green),var(--accent));background-size:200% 100%;animation:gradientShift 4s ease infinite}
|
||
|
|
.login-logo{text-align:center;margin-bottom:1.75rem}
|
||
|
|
.login-logo img{height:56px;width:auto;margin-bottom:.35rem;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(0,212,255,.25))}
|
||
|
|
.login-logo .tagline{font-size:.7rem;color:var(--text-dim);letter-spacing:.6px;font-weight:500;text-transform:uppercase}
|
||
|
|
.field{margin-bottom:1rem;opacity:0;animation:fadeInUp .45s ease-out forwards}
|
||
|
|
.field:nth-child(1){animation-delay:.1s}.field:nth-child(2){animation-delay:.2s}
|
||
|
|
.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:.6rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:.85rem;font-family:inherit;transition:all .2s ease;box-sizing:border-box}
|
||
|
|
.login-btn{width:100%;padding:.65rem;background:linear-gradient(135deg,var(--accent),#0099cc);color:#fff;border:none;border-radius:9px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s ease;opacity:0;animation:fadeInUp .45s ease-out .3s forwards;box-shadow:0 0 20px rgba(0,212,255,.3)}
|
||
|
|
.login-footer{text-align:center;margin-top:1.15rem;opacity:0;animation:fadeInUp .45s ease-out .4s forwards}
|
||
|
|
.login-footer a{color:var(--text-dim);text-decoration:none;font-size:.7rem;transition:color .15s}
|
||
|
|
.login-footer a:hover{color:var(--accent)}
|
||
|
|
.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)}
|
||
|
|
.alert-success{background:var(--green-bg);border:1px solid var(--green);color:var(--green)}
|
||
|
|
</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">AI Consultancy & Data Engineering</p>
|
||
|
|
</div>
|
||
|
|
<% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
|
||
|
|
<% if (reset) { %><div class="alert alert-success">Wachtwoord succesvol gewijzigd</div><% } %>
|
||
|
|
<form action="/auth/login" method="POST" autocomplete="off">
|
||
|
|
<div class="field">
|
||
|
|
<label>Gebruikersnaam</label>
|
||
|
|
<input type="text" name="username" placeholder="Voer uw gebruikersnaam in" required autofocus>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label>Wachtwoord</label>
|
||
|
|
<input type="password" name="password" placeholder="Voer uw wachtwoord in" required>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="login-btn">Inloggen</button>
|
||
|
|
</form>
|
||
|
|
<div class="login-footer">
|
||
|
|
<a href="/wachtwoord-vergeten">Wachtwoord vergeten?</a>
|
||
|
|
<span style="margin:0 .5rem;color:var(--border)">·</span>
|
||
|
|
<span style="font-size:.62rem;color:var(--text-dim)">v2.1 Neon</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|