7e4da32c0c
Worker (worker/) renders and sends the plan email via Resend, with the matching email-template.html and a VITE_WORKER_URL example env. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
117 lines
6.6 KiB
HTML
117 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{brand}} Preparedness Plan</title>
|
|
<style>
|
|
body, table, td, p, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
|
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; }
|
|
img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; }
|
|
body { margin: 0; padding: 0; width: 100% !important; background: #FAFAFA; }
|
|
.body { background: #FAFAFA; color: #5A5A54; font-family: Arial, Helvetica, sans-serif; }
|
|
.wrap { width: 100%; max-width: 680px; margin: 0 auto; }
|
|
.panel { background: #FAFAFA; border: 1px solid #E4E4E0; overflow: hidden; }
|
|
.brand { font-family: Georgia, 'Times New Roman', serif; font-size: 42px; line-height: 1; letter-spacing: .04em; color: #1A1A18; }
|
|
.brand-b { color: #5A9A78; }
|
|
.eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: 3px; text-transform: uppercase; color: #5A9A78; font-weight: 700; }
|
|
.title { margin: 14px 0 0; font-size: 28px; line-height: 1.14; letter-spacing: 2px; text-transform: uppercase; color: #1A1A18; font-weight: 800; }
|
|
.copy { font-size: 15px; line-height: 1.72; color: #5A5A54; }
|
|
.lead { font-size: 16px; line-height: 1.7; color: #3A3A34; }
|
|
.surface { background: #F2F2F0; border: 1px solid #E4E4E0; }
|
|
.accent { background: #E8F2EC; border-left: 4px solid #5A9A78; }
|
|
.label { font-size: 10px; line-height: 1.4; letter-spacing: 2px; text-transform: uppercase; color: #8A8A84; font-weight: 700; }
|
|
.value { margin-top: 7px; font-size: 20px; line-height: 1.2; color: #1A1A18; font-weight: 800; }
|
|
.section-title { font-size: 18px; line-height: 1.25; color: #1A1A18; font-weight: 800; letter-spacing: .4px; }
|
|
.rule { border-top: 1px solid #E4E4E0; }
|
|
.button { display: inline-block; background: #1A1A18; color: #FAFAFA !important; text-decoration: none; padding: 16px 24px; border-radius: 0; font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; }
|
|
.footer { color: #8A8A84; font-size: 12px; line-height: 1.7; }
|
|
@media screen and (max-width: 680px) {
|
|
.pad { padding-left: 18px !important; padding-right: 18px !important; }
|
|
.brand { font-size: 34px !important; }
|
|
.title { font-size: 23px !important; }
|
|
.stack { display: block !important; width: 100% !important; }
|
|
.stack-pad { padding-left: 0 !important; padding-right: 0 !important; padding-top: 10px !important; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table role="presentation" width="100%" class="body" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td align="center" style="padding: 30px 12px;">
|
|
<table role="presentation" class="wrap" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td class="panel">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td class="pad" style="padding: 34px 32px 28px; background: #FAFAFA; border-bottom: 1px solid #E4E4E0;">
|
|
<div class="brand">Plan<span class="brand-b">-B</span></div>
|
|
<div class="eyebrow" style="margin-top: 22px;">{{kicker}}</div>
|
|
<h1 class="title">{{risk_level}} Readiness Report</h1>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pad" style="padding: 30px 32px;">
|
|
<p class="lead" style="margin: 0 0 22px;">Hi {{first_name}}, your assessment is complete. Here is the compact field version of your preparedness plan, built from your household details, location, priorities, and current supply buffer.</p>
|
|
|
|
<div class="accent" style="padding: 18px 18px 18px 20px;">
|
|
<div class="label">Assessment Summary</div>
|
|
<p class="copy" style="margin: 9px 0 0;">{{narrative_summary}}</p>
|
|
</div>
|
|
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 18px;">
|
|
<tr>
|
|
<td class="stack" width="50%" style="padding-right: 6px;">
|
|
<div class="surface" style="padding: 16px;">
|
|
<div class="label">Risk Score</div>
|
|
<div class="value">{{risk_score}}</div>
|
|
</div>
|
|
</td>
|
|
<td class="stack stack-pad" width="50%" style="padding-left: 6px;">
|
|
<div class="surface" style="padding: 16px;">
|
|
<div class="label">Priority Scenario</div>
|
|
<div class="value">{{primary_scenario}}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<div class="section-title">Immediate Actions</div>
|
|
<div class="rule" style="margin-top: 14px; padding-top: 16px;">
|
|
<div class="label">First 7 Days</div>
|
|
<p class="copy" style="margin: 7px 0 0;">{{action_week_1}}</p>
|
|
</div>
|
|
<div class="rule" style="margin-top: 16px; padding-top: 16px;">
|
|
<div class="label">First 30 Days</div>
|
|
<p class="copy" style="margin: 7px 0 0;">{{action_month_1}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<div class="section-title">Recommended Supplies</div>
|
|
<div class="rule" style="margin-top: 14px; padding-top: 16px;">
|
|
<p class="copy" style="margin: 0;">{{recommendations}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 32px;">
|
|
<a class="button" href="{{plan_url}}">Open Full Plan</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pad" style="padding: 20px 32px 26px; background: #F2F2F0; border-top: 1px solid #E4E4E0;">
|
|
<p class="footer" style="margin: 0;">You are receiving this because you requested your {{brand}} preparedness plan. Your data is never sold. <a href="{{unsubscribe_url}}" style="color: #4A8A68;">Unsubscribe</a></p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|