45 lines
2.6 KiB
Markdown
45 lines
2.6 KiB
Markdown
# HTML Email Template (inline CSS, mobile-friendly)
|
|
|
|
Copy this scaffold, fill the meal sections, and save to `/tmp/meal_today.html`
|
|
(or `/tmp/meal_shop.html` for the weekly list) before sending.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head>
|
|
<body style="margin:0;padding:0;background:#f4f6f8;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1f2933;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f4f6f8;padding:16px 0;">
|
|
<tr><td align="center">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:600px;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.08);">
|
|
<tr><td style="background:#0f766e;padding:20px 24px;color:#ffffff;">
|
|
<h1 style="margin:0;font-size:20px;">Your Meals for Today</h1>
|
|
<p style="margin:4px 0 0;font-size:13px;opacity:0.9;">Tuesday, 25 August 2026 · high-protein · no red meat</p>
|
|
</td></tr>
|
|
<tr><td style="padding:20px 24px;">
|
|
<!-- MEAL 1 -->
|
|
<div style="border:1px solid #e4e7eb;border-radius:10px;padding:16px;margin-bottom:16px;">
|
|
<h2 style="margin:0 0 6px;font-size:17px;color:#0f766e;">🍽 Lunch — Meal Name</h2>
|
|
<p style="margin:0 0 8px;font-size:14px;color:#52606d;"><strong>Ingredients:</strong> 3 eggs, 100g spinach, 1 tbsp olive oil</p>
|
|
<p style="margin:0;font-size:14px;color:#3e4c59;line-height:1.5;"><strong>Method:</strong> 1) … 2) … 3) …</p>
|
|
</div>
|
|
<!-- MEAL 2 -->
|
|
<div style="border:1px solid #e4e7eb;border-radius:10px;padding:16px;margin-bottom:16px;">
|
|
<h2 style="margin:0 0 6px;font-size:17px;color:#0f766e;">🍽 Dinner — Meal Name</h2>
|
|
<p style="margin:0 0 8px;font-size:14px;color:#52606d;"><strong>Ingredients:</strong> …</p>
|
|
<p style="margin:0;font-size:14px;color:#3e4c59;line-height:1.5;"><strong>Method:</strong> 1) … 2) …</p>
|
|
</div>
|
|
</td></tr>
|
|
<tr><td style="background:#fafbfc;padding:14px 24px;border-top:1px solid #e4e7eb;font-size:12px;color:#7b8794;">
|
|
Reply to tell me what you used and I'll update the inventory. — your meal agent
|
|
</td></tr>
|
|
</table>
|
|
</td></tr>
|
|
</table>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
For the **weekly shopping list**, replace the meal cards with a table:
|
|
`Item | Est. price | Running total`, a `Total: £XX.XX` row, and a one-line note on
|
|
what it covers (protein-first). Keep the same header/footer style.
|