Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>Forgot Password — ICH Screening</title> | |
| <!-- Favicon --> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" /> | |
| <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-192.png') }}" /> | |
| <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}" /> | |
| <meta name="description" content="Reset your ICH Screening account password."/> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"/> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"/> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}"/> | |
| </head> | |
| <body> | |
| <div class="auth-page"> | |
| <!-- ── Left brand panel ── --> | |
| <aside class="auth-brand"> | |
| <div class="auth-brand-logo"> | |
| <div class="auth-brand-icon"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M22 12h-4l-3 9L9 3l-3 9H2"/> | |
| </svg> | |
| </div> | |
| <span class="auth-brand-name">ICH Screening</span> | |
| </div> | |
| <div class="auth-headline"> | |
| <h2>Secure <span class="grad">Account</span> Recovery</h2> | |
| <p>We'll help you regain access to your account quickly and securely.</p> | |
| </div> | |
| <ul class="auth-features"> | |
| <li> | |
| <span class="feat-icon"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> | |
| </span> | |
| Reset link sent to your email | |
| </li> | |
| <li> | |
| <span class="feat-icon"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> | |
| </span> | |
| Secure token-based reset | |
| </li> | |
| <li> | |
| <span class="feat-icon"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> | |
| </span> | |
| Link expires in 30 minutes | |
| </li> | |
| </ul> | |
| <div class="auth-illustration"> | |
| <svg width="200" height="150" viewBox="0 0 200 150" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- envelope body --> | |
| <rect x="20" y="55" width="160" height="88" rx="10" fill="#111c33" stroke="#243356" stroke-width="1.5"/> | |
| <!-- envelope flap fold lines --> | |
| <polyline points="20,55 100,108 180,55" | |
| stroke="#1e3060" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <!-- envelope top edge highlight --> | |
| <line x1="20" y1="55" x2="180" y2="55" stroke="#243356" stroke-width="1"/> | |
| <!-- lock body — centered in envelope: cx=100, cy=90 --> | |
| <rect x="85" y="88" width="30" height="24" rx="4" | |
| fill="#6ea8fe" opacity=".92"/> | |
| <!-- lock shackle --> | |
| <path d="M90 88 v-8 a10 10 0 0 1 20 0 v8" | |
| stroke="#6ea8fe" stroke-width="3" stroke-linecap="round" fill="none"/> | |
| <!-- keyhole dot --> | |
| <circle cx="100" cy="100" r="3" fill="#0c1427"/> | |
| <!-- subtle glow around lock --> | |
| <circle cx="100" cy="97" r="22" stroke="#6ea8fe" stroke-width="1" opacity=".12"/> | |
| </svg> | |
| </div> | |
| </aside> | |
| <!-- ── Right form panel ── --> | |
| <main class="auth-form-panel"> | |
| <div class="auth-card" id="formCard"> | |
| <div class="auth-card-header"> | |
| <h2>Forgot your password?</h2> | |
| <p>No problem — enter your email and we'll send you a reset link</p> | |
| </div> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div class="auth-alerts"> | |
| {% for category, message in messages %} | |
| <div class="alert alert-{{ category }}"> | |
| {% if category == 'error' %} | |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> | |
| {% else %} | |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> | |
| {% endif %} | |
| {{ message }} | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| <!-- Success state (shown via JS or flash) --> | |
| <div id="successState" style="display:none; text-align:center; padding: 16px 0;"> | |
| <div style="width:64px;height:64px;border-radius:50%;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;"> | |
| <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> | |
| </div> | |
| <h3 style="color:#e8ecf6;font-size:1.2rem;font-weight:800;margin-bottom:10px;">Check your inbox</h3> | |
| <p style="color:#8ba0c4;font-size:.9rem;line-height:1.65;margin-bottom:24px;"> | |
| If that address is registered with us, a reset link is on its way. It expires in 30 minutes, so act quickly. | |
| Don't see it? Check your spam or junk folder. | |
| </p> | |
| <a href="{{ url_for('auth.login') }}" class="btn-auth-submit" style="display:block;text-decoration:none;text-align:center;"> | |
| Back to Sign In | |
| </a> | |
| </div> | |
| <form method="POST" class="auth-form" id="fpForm"> | |
| <div class="form-group"> | |
| <label for="email">Email address</label> | |
| <div class="input-wrap"> | |
| <svg class="input-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg> | |
| <input type="email" id="email" name="email" required autofocus | |
| placeholder="your@email.com" autocomplete="email"/> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn-auth-submit">Send Reset Link</button> | |
| </form> | |
| <div class="auth-footer"> | |
| Remembered it after all? <a href="{{ url_for('auth.login') }}">Back to sign in</a> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="{{ url_for('static', filename='js/forgot-password.js') }}" defer></script> | |
| </body> | |
| </html> | |