281 lines
16 KiB
HTML
281 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Email Previews</title>
|
|
<style>
|
|
body { font-family: sans-serif; background: #222; padding: 32px; display: flex; flex-direction: column; gap: 48px; }
|
|
.label { color: #aaa; font-size: 13px; margin-bottom: 8px; font-family: monospace; }
|
|
iframe { border: none; width: 100%; height: 600px; border-radius: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div>
|
|
<div class="label">sendBookingCreatedEmail</div>
|
|
<iframe srcdoc='<!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-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:40px 20px;" align="center">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" style="width:100%;max-width:560px;">
|
|
<tr>
|
|
<td style="padding-bottom:20px;text-align:center;">
|
|
<span style="font-size:20px;font-weight:700;color:#09090b;letter-spacing:-0.5px;">Let's Event</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="background:#ffffff;border-radius:12px;border:1px solid #e4e4e7;overflow:hidden;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color:#4f46e5;height:4px;font-size:1px;line-height:1px;"> </td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:28px 32px 32px;">
|
|
<h1 style="margin:0 0 6px;font-size:20px;font-weight:600;color:#09090b;">New Booking Scheduled</h1>
|
|
<p style="margin:0 0 24px;font-size:14px;color:#71717a;">You have a new booking confirmed.</p>
|
|
<div style="background:#f4f4f5;border-radius:8px;padding:16px 20px;margin-bottom:24px;">
|
|
<p style="margin:0 0 4px;font-size:16px;font-weight:600;color:#09090b;">30 Minute Coffee Chat</p>
|
|
<p style="margin:0 0 2px;font-size:13px;color:#71717a;">Thursday, June 19, 2026</p>
|
|
<p style="margin:0;font-size:13px;color:#71717a;">2:00 PM – 2:30 PM (PDT)</p>
|
|
</div>
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Guest</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;">Alice Johnson</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Email</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><a href="mailto:alice@example.com" style="color:#4f46e5;text-decoration:none;">alice@example.com</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Notes</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><span style="white-space:pre-wrap;">Looking forward to discussing the project scope!</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Meet link</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><a href="https://meet.google.com/abc-defg-hij" style="color:#4f46e5;text-decoration:none;">https://meet.google.com/abc-defg-hij</a></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-top:20px;text-align:center;">
|
|
<p style="margin:0;color:#a1a1aa;font-size:12px;">Let's Event · Your scheduling made simple</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>'></iframe>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="label">sendBookingCancelledEmail</div>
|
|
<iframe srcdoc='<!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-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:40px 20px;" align="center">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" style="width:100%;max-width:560px;">
|
|
<tr>
|
|
<td style="padding-bottom:20px;text-align:center;">
|
|
<span style="font-size:20px;font-weight:700;color:#09090b;letter-spacing:-0.5px;">Let's Event</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="background:#ffffff;border-radius:12px;border:1px solid #e4e4e7;overflow:hidden;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color:#ef4444;height:4px;font-size:1px;line-height:1px;"> </td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:28px 32px 32px;">
|
|
<h1 style="margin:0 0 6px;font-size:20px;font-weight:600;color:#09090b;">Booking Cancelled</h1>
|
|
<p style="margin:0 0 24px;font-size:14px;color:#71717a;">A booking has been cancelled.</p>
|
|
<div style="background:#fef2f2;border-radius:8px;padding:16px 20px;margin-bottom:24px;border:1px solid #fecaca;">
|
|
<p style="margin:0 0 4px;font-size:16px;font-weight:600;color:#09090b;">30 Minute Coffee Chat</p>
|
|
<p style="margin:0 0 2px;font-size:13px;color:#71717a;">Thursday, June 19, 2026</p>
|
|
<p style="margin:0;font-size:13px;color:#71717a;">2:00 PM – 2:30 PM (PDT)</p>
|
|
</div>
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Guest</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;">Alice Johnson</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Email</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><a href="mailto:alice@example.com" style="color:#4f46e5;text-decoration:none;">alice@example.com</a></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-top:20px;text-align:center;">
|
|
<p style="margin:0;color:#a1a1aa;font-size:12px;">Let's Event · Your scheduling made simple</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>'></iframe>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="label">sendBookingRescheduledEmail</div>
|
|
<iframe srcdoc='<!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-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:40px 20px;" align="center">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" style="width:100%;max-width:560px;">
|
|
<tr>
|
|
<td style="padding-bottom:20px;text-align:center;">
|
|
<span style="font-size:20px;font-weight:700;color:#09090b;letter-spacing:-0.5px;">Let's Event</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="background:#ffffff;border-radius:12px;border:1px solid #e4e4e7;overflow:hidden;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color:#f59e0b;height:4px;font-size:1px;line-height:1px;"> </td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:28px 32px 32px;">
|
|
<h1 style="margin:0 0 6px;font-size:20px;font-weight:600;color:#09090b;">Booking Rescheduled</h1>
|
|
<p style="margin:0 0 24px;font-size:14px;color:#71717a;">A booking has been moved to a new time.</p>
|
|
|
|
<p style="margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#a1a1aa;">Previous time</p>
|
|
<div style="background:#f4f4f5;border-radius:8px;padding:16px 20px;margin-bottom:16px;">
|
|
<p style="margin:0 0 2px;font-size:13px;color:#71717a;text-decoration:line-through;">Wednesday, June 18, 2026</p>
|
|
<p style="margin:0;font-size:13px;color:#71717a;text-decoration:line-through;">10:00 AM – 10:30 AM</p>
|
|
</div>
|
|
|
|
<p style="margin:0 0 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#a1a1aa;">New time</p>
|
|
<div style="background:#f0fdf4;border-radius:8px;padding:16px 20px;margin-bottom:24px;border:1px solid #bbf7d0;">
|
|
<p style="margin:0 0 4px;font-size:16px;font-weight:600;color:#09090b;">30 Minute Coffee Chat</p>
|
|
<p style="margin:0 0 2px;font-size:13px;color:#71717a;">Thursday, June 19, 2026</p>
|
|
<p style="margin:0;font-size:13px;color:#71717a;">2:00 PM – 2:30 PM (PDT)</p>
|
|
</div>
|
|
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Guest</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;">Alice Johnson</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Email</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><a href="mailto:alice@example.com" style="color:#4f46e5;text-decoration:none;">alice@example.com</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Meet link</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><a href="https://meet.google.com/abc-defg-hij" style="color:#4f46e5;text-decoration:none;">https://meet.google.com/abc-defg-hij</a></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-top:20px;text-align:center;">
|
|
<p style="margin:0;color:#a1a1aa;font-size:12px;">Let's Event · Your scheduling made simple</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>'></iframe>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="label">sendBookingStatusChangedEmail (completed)</div>
|
|
<iframe srcdoc='<!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-color:#f4f4f5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:40px 20px;" align="center">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" style="width:100%;max-width:560px;">
|
|
<tr>
|
|
<td style="padding-bottom:20px;text-align:center;">
|
|
<span style="font-size:20px;font-weight:700;color:#09090b;letter-spacing:-0.5px;">Let's Event</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="background:#ffffff;border-radius:12px;border:1px solid #e4e4e7;overflow:hidden;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color:#10b981;height:4px;font-size:1px;line-height:1px;"> </td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:28px 32px 32px;">
|
|
<h1 style="margin:0 0 6px;font-size:20px;font-weight:600;color:#09090b;">Booking Completed</h1>
|
|
<p style="margin:0 0 24px;font-size:14px;color:#71717a;">Booking status updated to <strong>completed</strong>.</p>
|
|
<div style="background:#f4f4f5;border-radius:8px;padding:16px 20px;margin-bottom:24px;">
|
|
<p style="margin:0 0 4px;font-size:16px;font-weight:600;color:#09090b;">30 Minute Coffee Chat</p>
|
|
<p style="margin:0 0 2px;font-size:13px;color:#71717a;">Thursday, June 19, 2026</p>
|
|
<p style="margin:0;font-size:13px;color:#71717a;">2:00 PM – 2:30 PM (PDT)</p>
|
|
</div>
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Guest</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;">Alice Johnson</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#71717a;font-size:13px;vertical-align:top;width:80px;padding-right:16px;">Email</td>
|
|
<td style="padding:10px 0;border-bottom:1px solid #f4f4f5;color:#09090b;font-size:14px;vertical-align:top;"><a href="mailto:alice@example.com" style="color:#4f46e5;text-decoration:none;">alice@example.com</a></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding-top:20px;text-align:center;">
|
|
<p style="margin:0;color:#a1a1aa;font-size:12px;">Let's Event · Your scheduling made simple</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>'></iframe>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|