136 lines
3.7 KiB
HTML
136 lines
3.7 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE|default:'ar' }}" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
@font-face{
|
|
font-family:'Noto Kufi Arabic';
|
|
src:url('vendor/fonts/noto-kufi-arabic/files/noto-kufi-arabic-full-regular.ttf') format('truetype');
|
|
font-weight:400;
|
|
font-style:normal;
|
|
}
|
|
@font-face{
|
|
font-family:'Noto Kufi Arabic';
|
|
src:url('vendor/fonts/noto-kufi-arabic/files/noto-kufi-arabic-full-bold.ttf') format('truetype');
|
|
font-weight:700;
|
|
font-style:normal;
|
|
}
|
|
@font-face{
|
|
font-family:'Great Vibes';
|
|
src:url('vendor/fonts/appreciation/great-vibes-latin.woff2') format('woff2');
|
|
font-weight:400;
|
|
font-style:normal;
|
|
}
|
|
|
|
@page { size: A4; margin: 0; }
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
:root{
|
|
--ink:#0f172a;
|
|
--body:#334155;
|
|
}
|
|
|
|
html, body { background: #fff; }
|
|
body { font-family: 'Noto Kufi Arabic', sans-serif; color: var(--ink); }
|
|
|
|
/* Full-page A4 sheet with the hospital letterhead as background.
|
|
The artboard is a transparent A4 PNG: hospital logo + name at the top,
|
|
contact info / copyright at the bottom, transparent middle for content.
|
|
Padding leaves the header (~38mm) and footer (~32mm) zones untouched.
|
|
Height is fixed (not min-height) so absolute positioning can place the
|
|
body block at the true vertical center of the page. */
|
|
.sheet{
|
|
position: relative;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
{% if letterhead_path %}
|
|
background-image: url('{{ letterhead_path }}');
|
|
background-size: 210mm 297mm;
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
{% endif %}
|
|
}
|
|
|
|
/* Body block: vertically centered between header and footer artboard zones.
|
|
top: 38mm = below header art; bottom: 32mm = above footer art.
|
|
The inner element is absolutely positioned at the midpoint of that band
|
|
and shifted up by half its own height via translateY(-50%). */
|
|
.body{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
padding: 0 20mm;
|
|
text-align: center;
|
|
}
|
|
|
|
.thanks{
|
|
font-family: 'Great Vibes', cursive;
|
|
font-size: 56pt;
|
|
line-height: 1;
|
|
color: var(--ink);
|
|
margin-bottom: 6mm;
|
|
direction: ltr;
|
|
}
|
|
|
|
.doc-title{
|
|
font-family: 'Noto Kufi Arabic', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 26pt;
|
|
color: var(--ink);
|
|
margin-top: 4mm;
|
|
margin-bottom: 14mm;
|
|
}
|
|
|
|
.message{
|
|
font-family: 'Noto Kufi Arabic', sans-serif;
|
|
font-weight: 500;
|
|
font-size: 13pt;
|
|
line-height: 2;
|
|
color: var(--body);
|
|
direction: rtl;
|
|
text-align: center;
|
|
padding: 0 4mm;
|
|
max-width: 170mm;
|
|
margin: 0 auto;
|
|
}
|
|
.message .recipient{
|
|
color: #1e88e5;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.closing{
|
|
font-family: 'Noto Kufi Arabic', sans-serif;
|
|
font-weight: 700;
|
|
font-size: 15pt;
|
|
color: var(--ink);
|
|
margin-top: 14mm;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sheet">
|
|
|
|
<div class="body">
|
|
|
|
<div class="thanks">Thank You...</div>
|
|
|
|
<h1 class="doc-title">رسالة شكر و تقدير</h1>
|
|
|
|
<p class="message">
|
|
يسر إدارة قسم علاقات المرضى وتجربة المريض أن تتقدم بالشكر الجزيل إلى
|
|
<span class="recipient">{{ recipient_name }}</span>
|
|
نيابةً عن إدارة تجربة المريض، وذلك تقديراً لجهودك المتميزة.
|
|
كما نود أن نعرب عن اعتزازنا بعملِك وانجازاتك التي جعلتك نموذجًا يُحتذى به.
|
|
</p>
|
|
|
|
<h3 class="closing">متمنين دوام التوفيق، مع خالص الشكر والتقدير</h3>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|