205 lines
12 KiB
HTML
205 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
||
<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">
|
||
<meta name="x-apple-disable-message-reformatting">
|
||
<meta name="format-detection" content="telephone=no, address=no, email=no, date=no, url=no">
|
||
<meta name="color-scheme" content="light">
|
||
<meta name="supported-color-schemes" content="light">
|
||
<title>{% block title %}Al Hammadi Hospital{% endblock %}</title>
|
||
<style>
|
||
/* Reset Styles */
|
||
html, body { margin: 0; padding: 0; width: 100% !important; height: 100% !important; }
|
||
* { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
|
||
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
||
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
|
||
|
||
/* Client-specific resets */
|
||
#outlook a { padding: 0; }
|
||
.ExternalClass { width: 100%; }
|
||
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
|
||
|
||
/* Body centering */
|
||
body, table, td { margin: 0 auto; }
|
||
|
||
/* Responsive styles */
|
||
@media only screen and (max-width: 600px) {
|
||
.email-container { width: 100% !important; max-width: 100% !important; }
|
||
.fluid { width: 100% !important; height: auto !important; }
|
||
.stack-column { display: block !important; width: 100% !important; padding-bottom: 20px; }
|
||
.padding-mobile { padding-left: 20px !important; padding-right: 20px !important; }
|
||
.heading-mobile { font-size: 22px !important; }
|
||
.button-full { width: 100% !important; display: block !important; }
|
||
.content-padding { padding-left: 20px !important; padding-right: 20px !important; }
|
||
}
|
||
|
||
/* Dark mode support */
|
||
@media (prefers-color-scheme: dark) {
|
||
.bg-light { background-color: #1e293b !important; }
|
||
.text-dark { color: #f8fafc !important; }
|
||
}
|
||
</style>
|
||
|
||
<!-- Block for additional custom styles -->
|
||
{% block extra_styles %}{% endblock %}
|
||
</head>
|
||
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
|
||
|
||
<!-- Preheader Text (invisible preview text) -->
|
||
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
|
||
{% block preheader %}Al Hammadi Hospital - Patient Experience Management{% endblock %}
|
||
</div>
|
||
|
||
<!-- Email Container - Full width background -->
|
||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8fafc;">
|
||
<tr>
|
||
<td align="center" style="padding: 20px 10px;">
|
||
|
||
<!-- Main Email Wrapper - Centered with max-width -->
|
||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" class="email-container" style="width: 600px; max-width: 600px; background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||
|
||
<!-- Header Section -->
|
||
<tr>
|
||
<td style="background: linear-gradient(135deg, #005696 0%, #007bbd 100%); padding: 30px 40px; text-align: center;">
|
||
<!-- Logo -->
|
||
<a href="#" style="text-decoration: none;">
|
||
<img src="{{ logo_url|default:'https://your-domain.com/static/images/HH_P_H_Logo(hospital)_.png' }}"
|
||
alt="Al Hammadi Hospital"
|
||
width="400"
|
||
height="120"
|
||
style="display: block; margin: 0 auto; max-width: 100%; font-family: sans-serif; color: #ffffff;">
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Hero/Title Section -->
|
||
{% block hero %}
|
||
<tr>
|
||
<td style="padding: 40px 40px 30px 40px; text-align: center; background-color: #ffffff;">
|
||
<h1 class="heading-mobile" style="margin: 0 0 10px 0; font-size: 26px; font-weight: 700; color: #005696; line-height: 1.4;">
|
||
{% block hero_title %}Welcome to Al Hammadi Hospital{% endblock %}
|
||
</h1>
|
||
<p style="margin: 0; font-size: 16px; color: #64748b; line-height: 1.6;">
|
||
{% block hero_subtitle %}Your health and satisfaction are our priority{% endblock %}
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
{% endblock %}
|
||
|
||
<!-- Main Content Section -->
|
||
<tr>
|
||
<td class="padding-mobile" style="padding: 0 40px 30px 40px; background-color: #ffffff;">
|
||
{% block content %}
|
||
<!-- Content goes here -->
|
||
{% endblock %}
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Call-to-Action Section -->
|
||
{% block cta_section %}
|
||
<tr>
|
||
<td align="center" style="padding: 0 40px 40px 40px; background-color: #ffffff;">
|
||
<!-- Primary Button -->
|
||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
|
||
<tr>
|
||
<td style="border-radius: 8px; background: linear-gradient(135deg, #005696 0%, #007bbd 100%);">
|
||
<a href="{% block cta_url %}#{% endblock %}"
|
||
class="button-full"
|
||
style="display: inline-block; padding: 14px 32px; font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none; border-radius: 8px; text-align: center;">
|
||
{% block cta_text %}Take Action{% endblock %}
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
{% endblock %}
|
||
|
||
<!-- Info Box Section -->
|
||
{% block info_box %}
|
||
<tr>
|
||
<td class="padding-mobile" style="padding: 0 40px 40px 40px; background-color: #ffffff;">
|
||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #eef6fb; border-radius: 8px; border-left: 4px solid #005696;">
|
||
<tr>
|
||
<td style="padding: 20px;">
|
||
<p style="margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: #005696;">
|
||
ℹ️ {% block info_title %}Important Information{% endblock %}
|
||
</p>
|
||
<p style="margin: 0; font-size: 14px; color: #64748b; line-height: 1.6;">
|
||
{% block info_content %}Please read this information carefully.{% endblock %}
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
{% endblock %}
|
||
|
||
<!-- Divider -->
|
||
<tr>
|
||
<td style="padding: 0 40px; background-color: #ffffff;">
|
||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
|
||
<tr>
|
||
<td style="border-top: 1px solid #e2e8f0;"></td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Footer Section -->
|
||
<tr>
|
||
<td style="padding: 30px 40px; background-color: #005696; text-align: center;">
|
||
<!-- Contact Info -->
|
||
<p style="margin: 0 0 15px 0; font-size: 14px; color: #ffffff; line-height: 1.6;">
|
||
<strong>Al Hammadi Hospital</strong><br>
|
||
{% block footer_address %}
|
||
Patient Experience Management Department
|
||
{% endblock %}
|
||
</p>
|
||
|
||
<!-- Social Links / Quick Links -->
|
||
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin-bottom: 15px;">
|
||
<tr>
|
||
{% block footer_links %}
|
||
<td style="padding: 0 10px;">
|
||
<a href="#" style="font-size: 13px; color: #ffffff; text-decoration: underline;">Website</a>
|
||
</td>
|
||
<td style="padding: 0 10px;">
|
||
<a href="#" style="font-size: 13px; color: #ffffff; text-decoration: underline;">Contact Us</a>
|
||
</td>
|
||
<td style="padding: 0 10px;">
|
||
<a href="#" style="font-size: 13px; color: #ffffff; text-decoration: underline;">Privacy Policy</a>
|
||
</td>
|
||
{% endblock %}
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- Copyright -->
|
||
<p style="margin: 0; font-size: 12px; color: #eef6fb; line-height: 1.5;">
|
||
{% block copyright %}
|
||
© {% now "Y" %} Al Hammadi Hospital. All rights reserved.
|
||
{% endblock %}
|
||
</p>
|
||
|
||
<!-- Unsubscribe -->
|
||
{% block unsubscribe %}
|
||
<p style="margin: 15px 0 0 0; font-size: 12px; color: #eef6fb;">
|
||
<a href="{{ unsubscribe_url|default:'#' }}" style="color: #eef6fb; text-decoration: underline;">Unsubscribe</a> from these emails
|
||
</p>
|
||
{% endblock %}
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
<!-- End Main Email Wrapper -->
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<!-- End Email Container -->
|
||
|
||
</body>
|
||
</html>
|