Jean
98630c7d36
Redesigns the mail template (branded header bar, hero code block, copy button, muted footer) and adds a configurable accent colour alongside the brand name.
50 lines
2.6 KiB
HTML
50 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="color-scheme" content="light">
|
|
<title>{{title}}</title>
|
|
</head>
|
|
<body style="margin:0;padding:0;background:#eef0f4;-webkit-font-smoothing:antialiased;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#eef0f4;padding:40px 12px;">
|
|
<tr><td align="center">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:468px;background:#ffffff;border-radius:16px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;box-shadow:0 4px 24px rgba(15,23,42,.08);">
|
|
|
|
<tr><td style="height:5px;background:{{accent}};font-size:0;line-height:0;"> </td></tr>
|
|
|
|
<tr><td style="padding:30px 36px 0;">
|
|
<span style="font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:{{accent}};">{{brand}}</span>
|
|
<h1 style="margin:16px 0 10px;font-size:23px;line-height:1.3;font-weight:800;color:#0f172a;">{{title}}</h1>
|
|
<p style="margin:0;font-size:15px;line-height:1.65;color:#475569;">{{message}}</p>
|
|
</td></tr>
|
|
|
|
<tr><td style="padding:26px 36px 0;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f8fafc;border:1px solid #e6eaf0;border-radius:14px;">
|
|
<tr><td align="center" style="padding:24px 16px 22px;">
|
|
<div style="font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#94a3b8;margin-bottom:12px;">Your code</div>
|
|
<div style="font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:36px;font-weight:800;letter-spacing:12px;color:#0f172a;padding-left:12px;">{{code}}</div>
|
|
</td></tr>
|
|
</table>
|
|
</td></tr>
|
|
|
|
<tr><td align="center" style="padding:20px 36px 4px;">
|
|
<div style="display:inline-block;background:{{accent}};color:#ffffff;font-size:14px;font-weight:600;padding:13px 30px;border-radius:11px;box-shadow:0 2px 8px rgba(15,23,42,.14);">📋 Copy code</div>
|
|
<div style="margin-top:10px;font-size:12px;color:#a4adba;">Tap and hold the code to copy it.</div>
|
|
</td></tr>
|
|
|
|
<tr><td style="padding:22px 36px 0;">
|
|
<p style="margin:0;font-size:13px;line-height:1.6;color:#94a3b8;">{{note}}</p>
|
|
</td></tr>
|
|
|
|
<tr><td style="padding:26px 36px 30px;">
|
|
<div style="border-top:1px solid #eef1f5;padding-top:16px;">
|
|
<p style="margin:0;font-size:12px;line-height:1.5;color:#b4bbc7;">Sent by {{brand}} services. If you didn't request this, you can safely ignore this email.</p>
|
|
</div>
|
|
</td></tr>
|
|
|
|
</table>
|
|
</td></tr>
|
|
</table>
|
|
</body>
|
|
</html>
|