9.8 KB
raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<meta name="color-scheme" content="dark">
<meta name="supported-color-schemes" content="dark">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<title>{{ email_title }}</title>
<style type="text/css">
body { margin: 0 !important; padding: 0 !important; background: #0e0d0a !important; }
table { border-collapse: collapse; }
img { border: 0; display: block; }
a { color: #7db88c; text-decoration: none; }
a:hover { text-decoration: underline; }
@media (max-width: 620px) {
.shell { width: 100% !important; }
.px-pad { padding-left: 22px !important; padding-right: 22px !important; }
.kv-key { width: 100% !important; display: block !important; border-left: 0 !important; padding: 14px 0 0 0 !important; }
.kv-val { width: 100% !important; display: block !important; border-left: 0 !important; padding: 4px 0 14px 0 !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #0e0d0a; color: #ddd7cd; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.65;">
<div style="display: none; max-height: 0; overflow: hidden; mso-hide: all; font-size: 1px; line-height: 1px; color: #0e0d0a;">{{ preheader }}</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #0e0d0a;">
<tr>
<td align="center" style="padding: 40px 16px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="shell" width="560" style="width: 100%; max-width: 560px;">
<tr>
<td class="px-pad" style="padding: 0 0 18px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align: middle; padding-right: 10px; line-height: 0;">
<span style="display: inline-block; width: 8px; height: 8px; background-color: #6b9e78; border-radius: 50%; box-shadow: 0 0 0 3px rgba(107,158,120,0.18);"></span>
</td>
<td style="vertical-align: middle; color: #ede8e0; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;">
// Status
</td>
</tr>
</table>
</td>
</tr>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="shell" width="560" style="width: 100%; max-width: 560px; background-color: #13120e; border: 1px solid {{ accent_border }};">
<tr>
<td style="height: 3px; background-color: {{ accent }}; line-height: 3px; font-size: 0;"> </td>
</tr>
<tr>
<td class="px-pad" style="padding: 30px 32px 6px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align: middle; padding-right: 8px; line-height: 0;">
<span style="display: inline-block; width: 7px; height: 7px; background-color: {{ accent }}; border-radius: 50%;"></span>
</td>
<td style="vertical-align: middle; color: {{ accent_bright }}; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;">
{{ status_label }}
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="px-pad" style="padding: 14px 32px 4px 32px;">
<h1 style="margin: 0; color: #ede8e0; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em;">
{{ event_title }}
</h1>
</td>
</tr>
<tr>
<td class="px-pad" style="padding: 14px 32px 26px 32px; color: #a09890; font-size: 14px; line-height: 1.75;">
{{ event_copy }}
</td>
</tr>
<tr>
<td class="px-pad" style="padding: 0 32px 6px 32px;">
<div style="font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a84c; padding: 0 0 10px 0; font-weight: 700;">
/ Property
</div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="border: 1px solid rgba(107,158,120,0.12); background: rgba(9,8,6,0.5);">
<tr>
<td class="kv-key" width="32%" style="padding: 12px 14px; color: #665f56; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; vertical-align: top; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;">Name</td>
<td class="kv-val" style="padding: 12px 14px; color: #ede8e0; font-size: 13px; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; border-left: 1px solid rgba(107,158,120,0.08); vertical-align: top; word-break: break-word;">{{ property.name }}</td>
</tr>
<tr>
<td class="kv-key" style="padding: 12px 14px; color: #665f56; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border-top: 1px solid rgba(107,158,120,0.08); vertical-align: top; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;">URL</td>
<td class="kv-val" style="padding: 12px 14px; font-size: 13px; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; border-top: 1px solid rgba(107,158,120,0.08); border-left: 1px solid rgba(107,158,120,0.08); vertical-align: top; word-break: break-all;">
<a href="{{ property.url }}" style="color: #7db88c; text-decoration: none;">{{ property.url }}</a>
</td>
</tr>
<tr>
<td class="kv-key" style="padding: 12px 14px; color: #665f56; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border-top: 1px solid rgba(107,158,120,0.08); vertical-align: top; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;">Status</td>
<td class="kv-val" style="padding: 12px 14px; font-size: 13px; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; border-top: 1px solid rgba(107,158,120,0.08); border-left: 1px solid rgba(107,158,120,0.08); vertical-align: top;">
<span style="display: inline-block; background-color: {{ accent_tint }}; color: {{ accent_bright }}; border: 1px solid {{ accent_border }}; padding: 3px 9px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;">{{ property.current_status }}</span>
</td>
</tr>
<tr>
<td class="kv-key" style="padding: 12px 14px; color: #665f56; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border-top: 1px solid rgba(107,158,120,0.08); vertical-align: top; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;">Avg time</td>
<td class="kv-val" style="padding: 12px 14px; color: #ede8e0; font-size: 13px; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; border-top: 1px solid rgba(107,158,120,0.08); border-left: 1px solid rgba(107,158,120,0.08); vertical-align: top;">{{ property.avg_response_time }} ms</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="px-pad" style="padding: 26px 32px 32px 32px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: {{ accent_tint }}; border: 1px solid {{ accent_border }};">
<a href="{{ BASE_URL }}/{{ property.id }}" style="display: inline-block; padding: 12px 22px; color: {{ accent_bright }}; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; text-decoration: none; font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;">
View property →
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="shell" width="560" style="width: 100%; max-width: 560px;">
<tr>
<td class="px-pad" style="padding: 24px 0 0 0; color: #4a443c; font-size: 11px; line-height: 1.8; letter-spacing: 0.02em;">
Self-hosted monitoring · HTTP checks every three minutes<br>
Alerts fire only on state transitions. <a href="{{ BASE_URL }}/properties" style="color: #665f56; text-decoration: underline;">Manage properties</a>.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>