168 lines
9.6 KiB
HTML
168 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>{{ subject }}</title>
|
|
<!--[if mso]>
|
|
<noscript>
|
|
<xml>
|
|
<o:OfficeDocumentSettings>
|
|
<o:PixelsPerInch>96</o:PixelsPerInch>
|
|
</o:OfficeDocumentSettings>
|
|
</xml>
|
|
</noscript>
|
|
<![endif]-->
|
|
</head>
|
|
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
|
<!-- Wrapper Table -->
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8fafc;">
|
|
<tr>
|
|
<td align="center" style="padding: 40px 20px;">
|
|
<!-- Main Container -->
|
|
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width: 600px; width: 100%;">
|
|
|
|
<!-- Header with Logo -->
|
|
<tr>
|
|
<td align="center" style="padding: 0 0 30px 0;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color: #0f172a; padding: 16px 32px; border-radius: 8px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="vertical-align: middle; padding-right: 12px;">
|
|
<img src="https://api.example.com/static/images/logo-white.png" alt="" width="32" height="32" style="display: block;">
|
|
</td>
|
|
<td style="vertical-align: middle;">
|
|
<span style="color: #ffffff; font-size: 24px; font-weight: 700; letter-spacing: -0.5px;">Nexus</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Content Card -->
|
|
<tr>
|
|
<td>
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 12px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);">
|
|
|
|
<!-- Event Type Badge -->
|
|
<tr>
|
|
<td style="padding: 24px 32px 0 32px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color: {{ event_type_bg_color }}; padding: 6px 12px; border-radius: 4px;">
|
|
<span style="color: {{ event_type_color }}; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">{{ event_type_label }}</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Subject/Title -->
|
|
<tr>
|
|
<td style="padding: 16px 32px 0 32px;">
|
|
<h1 style="margin: 0; color: #0f172a; font-size: 22px; font-weight: 600; line-height: 1.4;">{{ subject }}</h1>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Greeting -->
|
|
<tr>
|
|
<td style="padding: 16px 32px 0 32px;">
|
|
<p style="margin: 0; color: #475569; font-size: 15px; line-height: 1.6;">Hi {{ recipient_name }},</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Body Content -->
|
|
<tr>
|
|
<td style="padding: 12px 32px 0 32px;">
|
|
<p style="margin: 0; color: #334155; font-size: 15px; line-height: 1.7;">{{ body }}</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Metadata Section (if present) -->
|
|
{% if metadata_items %}
|
|
<tr>
|
|
<td style="padding: 24px 32px 0 32px;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;">
|
|
{% for item in metadata_items %}
|
|
<tr>
|
|
<td style="padding: 12px 16px;{% if not forloop.last %} border-bottom: 1px solid #e2e8f0;{% endif %}">
|
|
<span style="color: #64748b; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;">{{ item.label }}</span>
|
|
</td>
|
|
<td style="padding: 12px 16px; text-align: right;{% if not forloop.last %} border-bottom: 1px solid #e2e8f0;{% endif %}">
|
|
<span style="color: #0f172a; font-size: 14px; font-weight: 500;">{{ item.value }}</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
|
|
<!-- Action Button -->
|
|
{% if action_url %}
|
|
<tr>
|
|
<td align="center" style="padding: 32px 32px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td style="background-color: #3b78c4; border-radius: 8px;">
|
|
<a href="{{ action_url }}" style="display: inline-block; padding: 14px 28px; color: #ffffff; text-decoration: none; font-size: 15px; font-weight: 600;">View Details</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td style="padding: 0 0 32px 0;"></td>
|
|
</tr>
|
|
{% endif %}
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td style="padding: 32px 0 0 0;">
|
|
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
|
|
<tr>
|
|
<td align="center" style="padding: 0 0 16px 0;">
|
|
<p style="margin: 0; color: #94a3b8; font-size: 13px;">
|
|
<a href="https://app.example.com" style="color: #3b78c4; text-decoration: none;">Visit Nexus</a>
|
|
•
|
|
<a href="https://app.example.com/contact" style="color: #3b78c4; text-decoration: none;">Contact Us</a>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="center">
|
|
<p style="margin: 0; color: #94a3b8; font-size: 12px;">
|
|
© {{ current_year }} Corellon Digital. All rights reserved.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td align="center" style="padding: 16px 0 0 0;">
|
|
<p style="margin: 0; color: #cbd5e1; font-size: 11px;">
|
|
This email was sent to {{ recipient_email }} because email notifications are enabled for {{ event_type_label }} events.<br>
|
|
To change your notification preferences, please contact an administrator.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|