265 lines
9.6 KiB
HTML
265 lines
9.6 KiB
HTML
{% load static %}
|
|
<!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]>
|
|
<style type="text/css">
|
|
body, table, td {font-family: Arial, sans-serif !important;}
|
|
</style>
|
|
<![endif]-->
|
|
<style>
|
|
/* Reset and Base Styles */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100% !important;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
background-color: #f5f7fa;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
mso-table-lspace: 0pt;
|
|
mso-table-rspace: 0pt;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
outline: none;
|
|
text-decoration: none;
|
|
-ms-interpolation-mode: bicubic;
|
|
}
|
|
|
|
/* Color Variables */
|
|
.kaauh-teal { background-color: #00636e; }
|
|
.kaauh-teal-dark { color: #004a53; }
|
|
.text-primary { color: #333333; }
|
|
.text-secondary { color: #666666; }
|
|
|
|
/* Container */
|
|
.email-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
background: linear-gradient(135deg, #00636e 0%, #004a53 100%);
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
background-color: #ffffff;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.logo {
|
|
max-width: 80px;
|
|
max-height: 80px;
|
|
display: block;
|
|
}
|
|
|
|
/* Content */
|
|
.content {
|
|
background-color: #ffffff;
|
|
padding: 40px 30px;
|
|
}
|
|
|
|
.content h2 {
|
|
color: #004a53;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin: 0 0 20px 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.content p {
|
|
color: #333333;
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
/* Button */
|
|
.button-wrapper {
|
|
text-align: center;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 14px 32px;
|
|
background-color: #00636e;
|
|
color: #ffffff !important;
|
|
text-decoration: none;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
box-shadow: 0 4px 12px rgba(0, 99, 110, 0.25);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Divider */
|
|
.divider {
|
|
height: 1px;
|
|
background-color: #e5e7eb;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background-color: #f9fafb;
|
|
padding: 30px 30px 20px;
|
|
border-top: 3px solid #00636e;
|
|
}
|
|
|
|
.footer-branding {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.footer-branding p {
|
|
color: #004a53;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin: 0 0 5px 0;
|
|
}
|
|
|
|
.footer-branding small {
|
|
color: #666666;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.footer-info {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #888888;
|
|
line-height: 1.6;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.footer-info p {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.footer-info a {
|
|
color: #00636e;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.footer-info a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 600px) {
|
|
.content {
|
|
padding: 30px 20px !important;
|
|
}
|
|
|
|
.content h2 {
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
.button {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
width: 90px !important;
|
|
height: 90px !important;
|
|
}
|
|
|
|
.logo {
|
|
max-width: 70px !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin: 0; padding: 0; background-color: #f5f7fa;">
|
|
<!-- Preheader Text (hidden but appears in inbox preview) -->
|
|
<div style="display: none; max-height: 0; overflow: hidden;">
|
|
{{ email_preview_text|default:"Important message from King Abdullah bin Abdulaziz University Hospital" }}
|
|
</div>
|
|
|
|
<!-- Main Container -->
|
|
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: #f5f7fa;">
|
|
<tr>
|
|
<td align="center" style="padding: 20px 0;">
|
|
<table role="presentation" class="email-container" width="600" cellspacing="0" cellpadding="0" border="0" style="background-color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-radius: 8px; overflow: hidden;">
|
|
|
|
<!-- Header -->
|
|
<tr>
|
|
<td class="header" style="background: linear-gradient(135deg, #00636e 0%, #004a53 100%); padding: 40px 20px; text-align: center;">
|
|
<div class="logo-wrapper" style="background-color: #ffffff; width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);">
|
|
<img src="{{ logo_url }}" alt="KAAUH Logo" class="logo" style="max-width: 80px; max-height: 80px; display: block;">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Content -->
|
|
<tr>
|
|
<td class="content" style="padding: 40px 30px;">
|
|
{% block content %}
|
|
<h2 style="color: #004a53; font-size: 24px; font-weight: 600; margin: 0 0 20px 0;">Hello {{ user_name }},</h2>
|
|
|
|
<p style="color: #333333; font-size: 15px; line-height: 1.7; margin: 0 0 16px 0;">{{ email_message|safe }}</p>
|
|
|
|
{% if cta_link %}
|
|
<div class="button-wrapper" style="text-align: center; margin: 30px 0;">
|
|
<a href="{{ cta_link }}" class="button" style="display: inline-block; padding: 14px 32px; background-color: #00636e; color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 12px rgba(0, 99, 110, 0.25);">{{ cta_text|default:"Click to Proceed" }}</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="divider" style="height: 1px; background-color: #e5e7eb; margin: 30px 0;"></div>
|
|
|
|
<p style="color: #666666; font-size: 14px; margin: 0 0 10px 0;">If you have any questions or need assistance, please don't hesitate to reply to this email or contact our support team.</p>
|
|
|
|
<p style="color: #333333; font-size: 15px; margin: 20px 0 5px 0; font-weight: 500;">Best regards,</p>
|
|
<p style="color: #004a53; font-size: 15px; margin: 0; font-weight: 600;">King Abdullah bin Abdulaziz University Hospital</p>
|
|
{% endblock %}
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td class="footer" style="background-color: #f9fafb; padding: 30px 30px 20px; border-top: 3px solid #00636e;">
|
|
<div class="footer-branding" style="text-align: center; margin-bottom: 20px;">
|
|
<p style="color: #004a53; font-size: 16px; font-weight: 600; margin: 0 0 5px 0;">King Abdullah bin Abdulaziz University Hospital</p>
|
|
<small style="color: #666666; font-size: 13px;">Excellence in Healthcare</small>
|
|
</div>
|
|
|
|
<div class="footer-info" style="text-align: center; font-size: 12px; color: #888888; line-height: 1.6; margin-top: 15px;">
|
|
<p style="margin: 5px 0;">© {% now "Y" %} Tenhal. All rights reserved.</p>
|
|
<p style="margin: 5px 0;">
|
|
<a href="{{ profile_link }}" style="color: #00636e; text-decoration: none; font-weight: 500;">Manage Preferences</a>
|
|
{% if privacy_link %} | <a href="{{ privacy_link }}" style="color: #00636e; text-decoration: none; font-weight: 500;">Privacy Policy</a>{% endif %}
|
|
</p>
|
|
<p style="margin: 15px 0 5px 0; color: #999999; font-size: 11px;">This email was sent to you as part of your engagement with our services.<br>Please do not reply to this automated message.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html> |