312 lines
14 KiB
HTML
312 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Complaint Escalation - Artboard Variant</title>
|
||
<style>
|
||
/* ===================================================================
|
||
ARTBOARD VARIANT — Fixed A4 page per stage
|
||
Each card is a 210mm × 297mm page with the hospital letterhead
|
||
as its background. The artboard's header/footer artwork shows
|
||
correctly because the page dimensions match its aspect ratio.
|
||
=================================================================== */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
background-color: #e8eaed;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
padding: 40px 10px;
|
||
}
|
||
|
||
.page-wrapper {
|
||
text-align: center;
|
||
}
|
||
|
||
.stage-label {
|
||
max-width: 210mm;
|
||
margin: 0 auto 15px auto;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #4b5563;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.artboard-page {
|
||
position: relative;
|
||
width: 210mm;
|
||
height: 297mm;
|
||
margin: 0 auto 30mm auto;
|
||
background-image: url("../static/images/artboard/Artboard 1@3x.png");
|
||
background-size: 210mm 297mm;
|
||
background-repeat: no-repeat;
|
||
background-position: top left;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
border: 1px solid #d1d5db;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Content zone — flows from below the header artwork (38mm) to
|
||
above the footer artwork (32mm). No absolute positioning needed;
|
||
content flows naturally top-to-bottom within the padded area.
|
||
Matches the proven pattern from templates/appreciation/appreciation_letter.html. */
|
||
.content {
|
||
padding: 38mm 20mm 32mm 20mm;
|
||
height: 297mm;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
|
||
.ar-block { direction: rtl; text-align: center; margin-bottom: 4mm; }
|
||
.en-block { direction: ltr; text-align: center; }
|
||
|
||
.ar-block h1 {
|
||
font-size: 22pt;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
margin-bottom: 8mm;
|
||
}
|
||
|
||
.en-block h1 {
|
||
font-size: 22pt;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
margin-bottom: 8mm;
|
||
}
|
||
|
||
.ar-block p, .en-block p {
|
||
font-size: 13pt;
|
||
line-height: 1.8;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
margin-bottom: 5mm;
|
||
}
|
||
|
||
.link-red {
|
||
color: #dc2626;
|
||
font-weight: bold;
|
||
font-size: 14pt;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.link-blue {
|
||
color: #0056b3;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.highlight {
|
||
background-color: #ffff00;
|
||
padding: 0 4px;
|
||
color: #000000;
|
||
}
|
||
|
||
.divider {
|
||
border: 0;
|
||
border-top: 1px dashed #d1d5db;
|
||
margin: 6mm 0;
|
||
}
|
||
|
||
.btn-teal {
|
||
display: inline-block;
|
||
padding: 12px 30px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #004b69;
|
||
text-decoration: none;
|
||
background-color: #008cc1;
|
||
border-radius: 2px;
|
||
margin-top: 5mm;
|
||
}
|
||
|
||
.contact-info {
|
||
font-size: 12pt;
|
||
line-height: 1.6;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
margin-top: 5mm;
|
||
}
|
||
|
||
.signoff {
|
||
font-size: 13pt;
|
||
color: #1f2937;
|
||
font-weight: 600;
|
||
margin-top: 6mm;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-wrapper">
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- STAGE 1: NEW COMPLAINT NOTIFICATION -->
|
||
<!-- ================================================================ -->
|
||
<div class="stage-label">▼ Stage 1: New Complaint Notification</div>
|
||
<div class="artboard-page">
|
||
<div class="content">
|
||
|
||
<div class="ar-block">
|
||
<h1>إلى قسم المختبر</h1>
|
||
<p>تحية طيبة</p>
|
||
<p>
|
||
نود إبلاغكم باستلام شكوى بتاريخ:
|
||
<a href="#" class="link-blue">23/يونيو/2026 12:15 م</a>
|
||
من قبل وزارة الصحة برقم الهوية:
|
||
<a href="#" class="link-blue">1113543183</a>
|
||
</p>
|
||
<p>للإطلاع عليها، يمكنكم النقر على</p>
|
||
<p><a href="#" class="link-red">(نموذج الشكوى)</a></p>
|
||
<p>نرجو النظر في الأمر والتحقق خلال 24 ساعة، وللإفادة إضغط على</p>
|
||
<p><a href="#" class="link-red">(نموذج الرد على الشكوى)</a></p>
|
||
<div class="contact-info">
|
||
<p>للإستفسارات أو لمزيد من المعلومات، على التحويلة: 1379</p>
|
||
<p>رقم التواصل: <a href="tel:0537695000" class="link-blue">0537695000</a></p>
|
||
</div>
|
||
<a href="#" class="btn-teal">رابط</a>
|
||
<p class="signoff">نحن نقدر التزامكم، مع تحيات إدارة قسم علاقات المرضى وتجربة المريض</p>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<div class="en-block">
|
||
<h1>To: Laboratory Department</h1>
|
||
<p>Greetings,</p>
|
||
<p>
|
||
We would like to inform you that a complaint has been received on:
|
||
<a href="#" class="link-blue">23/June/2026 12:15 PM</a>
|
||
by the Ministry of Health with ID number:
|
||
<a href="#" class="link-blue">1113543183</a>
|
||
</p>
|
||
<p>To view it, you can click on:</p>
|
||
<p><a href="#" class="link-red">(Complaint Form)</a></p>
|
||
<p>Please look into the matter and verify within 24 hours, and to provide feedback, click on:</p>
|
||
<p><a href="#" class="link-red">(Complaint Response Form)</a></p>
|
||
<div class="contact-info">
|
||
<p>For inquiries or more information, via Extension: 1379</p>
|
||
<p>Contact Number: <a href="tel:0537695000" class="link-blue">0537695000</a></p>
|
||
</div>
|
||
<a href="#" class="btn-teal">Link</a>
|
||
<p class="signoff">We appreciate your commitment.<br />Regards, Patient Relations and Experience Management</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- STAGE 2: FIRST REMINDER NOTIFICATION -->
|
||
<!-- ================================================================ -->
|
||
<div class="stage-label">▼ Stage 2: First Reminder Notification</div>
|
||
<div class="artboard-page">
|
||
<div class="content">
|
||
|
||
<div class="ar-block">
|
||
<h1>إلى قسم الأمن</h1>
|
||
<p>
|
||
نقدر لكم انشغالكم وحرصكم، نود
|
||
<span class="highlight">تذكيركم</span>
|
||
بالشكوى المقدمة
|
||
بتاريخ: <a href="#" class="link-blue">21/يونيو/2026 02:23 م</a>
|
||
من قبل المراجع برقم الهوية:
|
||
<a href="#" class="link-blue">2343965287</a>
|
||
</p>
|
||
<p><a href="#" class="link-red">(نموذج الشكوى)</a></p>
|
||
<p>نرجو منكم التكرم بالرد على هذه الشكوى خلال الـ 24 ساعة القادمة، حرصاً على تحسين تجربة المريض وضمان معالجة الشكوى في الوقت المناسب، للرد نأمل النقر على</p>
|
||
<p><a href="#" class="link-red">(نموذج الرد على الشكوى)</a></p>
|
||
<div class="contact-info">
|
||
<p>للإستفسارات أو لمزيد من المعلومات، يُرجى التواصل على:</p>
|
||
<p>التحويلة: 1379 — رقم التواصل: <a href="tel:0537695000" class="link-blue">0537695000</a></p>
|
||
</div>
|
||
<a href="#" class="btn-teal">رابط</a>
|
||
<p class="signoff">نحن نقدر التزامكم، مع تحيات إدارة قسم علاقات المرضى وتجربة المريض</p>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<div class="en-block">
|
||
<h1>To: Security Department</h1>
|
||
<p>
|
||
We appreciate your dedication and diligence. We would like to
|
||
<span class="highlight">remind you</span>
|
||
regarding the submitted complaint
|
||
dated: <a href="#" class="link-blue">21/June/2026 02:23 PM</a>
|
||
by the visitor with National ID:
|
||
<a href="#" class="link-blue">2343965287</a>
|
||
</p>
|
||
<p><a href="#" class="link-red">(Complaint Form)</a></p>
|
||
<p>Please kindly respond to this complaint within the next 24 hours, in our commitment to enhancing patient experience and ensuring timely resolution. To reply, please click on:</p>
|
||
<p><a href="#" class="link-red">(Complaint Response Form)</a></p>
|
||
<div class="contact-info">
|
||
<p>For inquiries or more information, please contact us via:</p>
|
||
<p>Extension: 1379 — Contact Number: <a href="tel:0537695000" class="link-blue">0537695000</a></p>
|
||
</div>
|
||
<a href="#" class="btn-teal">Link</a>
|
||
<p class="signoff">We appreciate your commitment.<br />Regards, Patient Relations and Experience Management</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- ================================================================ -->
|
||
<!-- STAGE 3: SECOND REMINDER NOTIFICATION -->
|
||
<!-- ================================================================ -->
|
||
<div class="stage-label">▼ Stage 3: Second Reminder Notification</div>
|
||
<div class="artboard-page">
|
||
<div class="content">
|
||
|
||
<div class="ar-block">
|
||
<h1>إلى قسم المالية</h1>
|
||
<p>تحية طيبة</p>
|
||
<p>
|
||
نشكر لكم تعاونكم ونقدّر انشغالكم، ولكن نرجو
|
||
<span class="highlight">ملاحظة الوقت المتبقي للرد هو 6 ساعات</span>
|
||
على الشكوى المقدمة بتاريخ:
|
||
<a href="#" class="link-blue">22/يونيو/2026 04:20 م</a>
|
||
من قبل مجلس الضمان الصحي برقم الهوية:
|
||
<a href="#" class="link-blue">1050208576</a>
|
||
</p>
|
||
<p><a href="#" class="link-red">(نموذج الشكوى)</a></p>
|
||
<p>لذا نأمل منكم التكرم بالرد والإفادة في أقرب وقت ممكن لتجنب أي تأخير إضافي في معالجة الشكوى. وللرد، يرجى النقر على</p>
|
||
<p><a href="#" class="link-red">(نموذج الرد على الشكوى)</a></p>
|
||
<div class="contact-info">
|
||
<p>للإستفسارات أو لمزيد من المعلومات، يُرجى التواصل معنا:</p>
|
||
<p>التحويلة: 1379 — رقم التواصل: <a href="tel:0537695000" class="link-blue">0537695000</a></p>
|
||
</div>
|
||
<a href="#" class="btn-teal">رابط</a>
|
||
<p class="signoff">نحن نقدر التزامكم، مع تحيات إدارة قسم علاقات المرضى وتجربة المريض</p>
|
||
</div>
|
||
|
||
<hr class="divider" />
|
||
|
||
<div class="en-block">
|
||
<h1>To: Financial Department</h1>
|
||
<p>Greetings,</p>
|
||
<p>
|
||
We appreciate your cooperation and value your time, but please
|
||
<span class="highlight">note that the remaining time to respond is 6 hours</span>
|
||
regarding the complaint submitted on:
|
||
<a href="#" class="link-blue">22/June/2026 04:20 PM</a>
|
||
by the Council of Health Insurance with ID number:
|
||
<a href="#" class="link-blue">1050208576</a>
|
||
</p>
|
||
<p><a href="#" class="link-red">(Complaint Form)</a></p>
|
||
<p>Therefore, we kindly request your response and feedback as soon as possible to avoid any further delay in processing the complaint. To reply, please click on:</p>
|
||
<p><a href="#" class="link-red">(Complaint Response Form)</a></p>
|
||
<div class="contact-info">
|
||
<p>For inquiries or more information, please contact us via:</p>
|
||
<p>Extension: 1379 — Contact Number: <a href="tel:0537695000" class="link-blue">0537695000</a></p>
|
||
</div>
|
||
<a href="#" class="btn-teal">Link</a>
|
||
<p class="signoff">We appreciate your commitment.<br />Regards, Patient Relations and Experience Management</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|