File size: 6,185 Bytes
9fc36aa | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<title>Reset your Password — ICH Screening</title>
<style>
{# ── Shared base: reset, layout, header, footer, dark theme ── #}
{% include 'email/css/_base.css' %}
{# ── Reset-specific: CTA button, warning box, expiry note ── #}
{% include 'email/css/_reset.css' %}
</style>
</head>
<body>
<div class="email-wrapper">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div class="email-container">
<!-- ═══════════ HEADER ═══════════ -->
<div class="email-header">
<!-- Brand -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table role="presentation" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-right:10px; vertical-align:middle;">
<div class="brand-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none"
stroke="#00d4ff" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
</svg>
</div>
</td>
<td style="vertical-align:middle;">
<span class="brand-name">ICH Screening</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Shield / Lock SVG graphic -->
<div style="margin: 20px auto 0; text-align: center;">
<svg width="68" height="68" viewBox="0 0 68 68" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="34" cy="34" r="32"
fill="rgba(0,212,255,0.07)"
stroke="rgba(0,212,255,0.35)"
stroke-width="1.5"/>
<path d="M34 16 L48 22 L48 34 C48 42.5 41.5 49.5 34 52 C26.5 49.5 20 42.5 20 34 L20 22 Z"
fill="rgba(0,212,255,0.1)"
stroke="#00d4ff" stroke-width="1.8" stroke-linejoin="round"/>
<rect x="27" y="33" width="14" height="10" rx="2.5"
fill="rgba(0,212,255,0.25)" stroke="#00d4ff" stroke-width="1.5"/>
<path d="M29 33 L29 29.5 C29 26.5 39 26.5 39 29.5 L39 33"
stroke="#00d4ff" stroke-width="1.5" stroke-linecap="round" fill="none"/>
<circle cx="34" cy="37.5" r="1.5" fill="#00d4ff"/>
<path d="M34 39 L34 41" stroke="#00d4ff" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<div class="header-title">Let's get you back in</div>
<div class="header-subtitle">ICH Screening — Intracranial Hemorrhage Detection</div>
</div>
<!-- ═══════════ END HEADER ═══════════ -->
<!-- ═══════════ BODY ═══════════ -->
<div class="email-body">
<p class="greeting">
{% if recipient_name %}Hi <strong>{{ recipient_name }}</strong>,{% else %}Hi there,{% endif %}<br/><br/>
We received a request to reset the password for your <strong>ICH Screening</strong> account.
Use the button below to choose a new password — it only takes a moment.
</p>
<!-- CTA Button -->
<div class="cta-wrap">
<a href="{{ reset_link }}" class="cta-button" id="reset-password-btn">
Reset My Password
</a>
</div>
<!-- Expiry notice -->
<div class="expiry-note">
This reset link is single-use and expires in <strong>30 minutes</strong>
</div>
<!-- Fallback link text -->
<div class="cta-fallback" style="text-align: center;">
Button not working? Paste this link directly into your browser's address bar:<br/>
<a href="{{ reset_link }}">{{ reset_link }}</a>
</div>
<hr class="divider"/>
<!-- Warning -->
<div class="warning-box">
<strong>Didn't request this?</strong> You can ignore this email — your password
has not been changed and your account remains intact. If you keep receiving
unexpected reset emails, consider reviewing your account security.
</div>
<p class="security-notice">
For your protection, this link expires automatically and can only be used once.
Need a new link? Head back to the
<a href="#" style="color: #718096;">Forgot Password</a> page and try again.
</p>
</div>
<!-- ═══════════ END BODY ═══════════ -->
<!-- ═══════════ FOOTER ═══════════ -->
<div class="email-footer">
<div class="footer-brand">ICH Screening</div>
<div class="footer-text">
This message was sent automatically. Replies to this address are not monitored.<br/>
© {{ current_year }} ICH Screening — Intracranial Hemorrhage Detection Platform.
</div>
</div>
<!-- ═══════════ END FOOTER ═══════════ -->
</div><!-- /email-container -->
</td>
</tr>
</table>
</div>
</body>
</html>
|