170 lines
11 KiB
HTML
170 lines
11 KiB
HTML
{% load i18n %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE|default:'en' }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
@font-face{font-family:'Cinzel';src:url('vendor/fonts/certificate/cinzel-400.woff2') format('woff2');font-weight:400;font-style:normal;}
|
|
@font-face{font-family:'Cinzel';src:url('vendor/fonts/certificate/cinzel-600.woff2') format('woff2');font-weight:600;font-style:normal;}
|
|
@font-face{font-family:'Cinzel';src:url('vendor/fonts/certificate/cinzel-700.woff2') format('woff2');font-weight:700;font-style:normal;}
|
|
@font-face{font-family:'Playfair Display';src:url('vendor/fonts/certificate/playfair-display-700.woff2') format('woff2');font-weight:700;font-style:normal;}
|
|
@font-face{font-family:'Playfair Display';src:url('vendor/fonts/certificate/playfair-display-600.woff2') format('woff2');font-weight:600;font-style:normal;}
|
|
@font-face{font-family:'Cormorant Garamond';src:url('vendor/fonts/certificate/cormorant-garamond-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;}
|
|
@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;}
|
|
|
|
@page { size: A4 landscape; margin: 0; }
|
|
*{ box-sizing:border-box; margin:0; padding:0; }
|
|
:root{
|
|
--navy:#005696; --navy-deep:#003d6b; --navy-ink:#0a2f4d;
|
|
--gold:#c9a24b; --gold-deep:#b8860b; --gold-light:#e6c775;
|
|
--ivory:#fbf8f1; --ink:#1f2937; --muted:#6b7280;
|
|
}
|
|
.certificate{
|
|
position:relative; width:297mm; height:210mm; background:var(--ivory);
|
|
background-image:
|
|
radial-gradient(circle at 18% 22%, rgba(201,162,75,.07), transparent 42%),
|
|
radial-gradient(circle at 84% 78%, rgba(0,86,150,.05), transparent 45%),
|
|
radial-gradient(circle at 50% 50%, rgba(255,255,255,.6), transparent 70%);
|
|
font-family:'Cormorant Garamond',serif; color:var(--ink); overflow:hidden;
|
|
}
|
|
.watermark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:0; }
|
|
.watermark .wm{ font-family:'Cinzel',serif; font-weight:700; font-size:280px; letter-spacing:16px; color:var(--navy); opacity:.045; transform:rotate(-22deg); white-space:nowrap; }
|
|
.frame-outer{ position:absolute; inset:5.5mm; border:1px solid var(--gold); z-index:1; }
|
|
.frame-inner{ position:absolute; inset:8.5mm; border:2.5px solid var(--navy); z-index:1; }
|
|
.frame-hair{ position:absolute; inset:10.5mm; border:.5px solid rgba(184,134,11,.6); z-index:1; }
|
|
.corner{ position:absolute; width:18mm; height:18mm; color:var(--gold-deep); z-index:2; }
|
|
.corner.tl{ top:6mm; left:6mm; } .corner.tr{ top:6mm; right:6mm; }
|
|
.corner.bl{ bottom:6mm; left:6mm; } .corner.br{ bottom:6mm; right:6mm; }
|
|
.content{ position:absolute; left:22mm; right:22mm; top:12mm; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; }
|
|
|
|
.crest{ width:14mm; height:14mm; }
|
|
.hospital-name{ font-family:'Cinzel',serif; font-weight:600; font-size:13.5pt; letter-spacing:.22em; color:var(--navy-deep); text-transform:uppercase; margin-top:3.5mm; }
|
|
.hospital-name-ar{ font-family:'Noto Kufi Arabic',serif; font-weight:600; font-size:11pt; color:var(--navy); margin-top:.5mm; }
|
|
|
|
.title-block{ margin-top:5mm; display:flex; flex-direction:column; align-items:center; }
|
|
.ornament-line{ display:flex; align-items:center; gap:10px; color:var(--gold-deep); margin-bottom:2mm; }
|
|
.ornament-line .bar{ height:1px; width:32mm; background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent); }
|
|
.ornament-line .diamond{ font-size:9pt; transform:rotate(45deg); }
|
|
.cert-title{ font-family:'Cinzel',serif; font-weight:700; font-size:30pt; letter-spacing:.14em; line-height:1; color:var(--gold-deep); }
|
|
.cert-title-ar{ font-family:'Noto Kufi Arabic',serif; font-weight:700; font-size:17pt; color:var(--navy-deep); margin-top:2mm; }
|
|
|
|
.presented{ margin-top:4mm; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12.5pt; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
|
|
.name-frame{ margin:2.5mm 0 1.5mm; padding:2mm 22mm; position:relative; border-top:1px solid var(--gold); border-bottom:1px solid var(--gold); }
|
|
.name-frame::before,.name-frame::after{ content:""; position:absolute; top:50%; width:5mm; height:5mm; transform:translateY(-50%) rotate(45deg); background:var(--ivory); border:1px solid var(--gold); }
|
|
.name-frame::before{ left:7mm; } .name-frame::after{ right:7mm; }
|
|
.recipient-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:32pt; color:var(--navy-ink); line-height:1.1; }
|
|
.recipient-meta{ font-family:'Cinzel',serif; font-weight:600; font-size:10pt; letter-spacing:.18em; color:var(--gold-deep); text-transform:uppercase; margin-top:2.5mm; }
|
|
.recipient-meta .dot{ color:var(--gold); margin:0 8px; }
|
|
|
|
.citation{ margin-top:5mm; max-width:200mm; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:12pt; line-height:1.5; color:#33415c; }
|
|
.citation-ar{ margin-top:3mm; max-width:185mm; direction:rtl; font-family:'Noto Kufi Arabic',serif; font-size:11.5pt; line-height:1.65; color:#33415c; font-weight:500; }
|
|
|
|
.footer{ position:absolute; left:20mm; right:20mm; bottom:14mm; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:8mm; }
|
|
.col-date{ text-align:left; }
|
|
.col-date .lbl, .sig .lbl{ font-family:'Cinzel',serif; font-size:7.5pt; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; display:block; margin-bottom:2mm; }
|
|
.col-date .val{ font-family:'Playfair Display',serif; font-weight:600; font-size:12pt; color:var(--navy-ink); }
|
|
.col-date .ref{ font-family:'Cinzel',serif; font-size:8.5pt; letter-spacing:.14em; color:var(--gold-deep); margin-top:1.5mm; }
|
|
.seal{ width:40mm; height:40mm; display:block; }
|
|
.seal text{ font-family:'Cinzel',serif; fill:var(--navy-deep); }
|
|
.signatures{ text-align:right; display:flex; flex-direction:column; gap:7mm; align-items:flex-end; }
|
|
.sig{ text-align:right; }
|
|
.sig .line{ width:48mm; border-top:1px solid var(--navy); margin-bottom:2mm; }
|
|
.sig .who{ font-family:'Playfair Display',serif; font-weight:600; font-size:12.5pt; color:var(--navy-ink); }
|
|
.sig .role{ font-family:'Cinzel',serif; font-size:8pt; letter-spacing:.16em; color:var(--gold-deep); text-transform:uppercase; margin-top:1mm; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="certificate">
|
|
|
|
<div class="watermark"><span class="wm">{{ hospital_initials|default:"HH" }}</span></div>
|
|
|
|
<div class="frame-outer"></div>
|
|
<div class="frame-inner"></div>
|
|
<div class="frame-hair"></div>
|
|
|
|
{% with orn='<g fill="none" stroke="currentColor" stroke-width="1.1"><path d="M30,6 C30,21 21,30 6,30"/><path d="M30,6 C30,21 39,30 54,30"/><path d="M30,54 C30,39 21,30 6,30"/><path d="M30,54 C30,39 39,30 54,30"/></g><circle cx="30" cy="30" r="2.6" fill="currentColor"/><circle cx="30" cy="30" r="5.5" fill="none" stroke="currentColor" stroke-width="1"/>' %}
|
|
<svg class="corner tl" viewBox="0 0 60 60">{{ orn|safe }}</svg>
|
|
<svg class="corner tr" viewBox="0 0 60 60">{{ orn|safe }}</svg>
|
|
<svg class="corner bl" viewBox="0 0 60 60">{{ orn|safe }}</svg>
|
|
<svg class="corner br" viewBox="0 0 60 60">{{ orn|safe }}</svg>
|
|
{% endwith %}
|
|
|
|
<div class="content">
|
|
<svg class="crest" viewBox="0 0 100 100">
|
|
<circle cx="50" cy="50" r="46" fill="#005696" stroke="#c9a24b" stroke-width="3"/>
|
|
<circle cx="50" cy="50" r="38" fill="none" stroke="#e6c775" stroke-width="1.2"/>
|
|
<path d="M50,22 a6,6 0 0 1 6,6 v16 h16 a6,6 0 0 1 6,6 v0 a6,6 0 0 1 -6,6 h-16 v16 a6,6 0 0 1 -6,6 v0 a6,6 0 0 1 -6,-6 v-16 h-16 a6,6 0 0 1 -6,-6 v0 a6,6 0 0 1 6,-6 h16 v-16 a6,6 0 0 1 6,-6 z" fill="#fbf8f1"/>
|
|
</svg>
|
|
<div class="hospital-name">{{ hospital_name }}</div>
|
|
{% if hospital_name_ar %}<div class="hospital-name-ar">{{ hospital_name_ar }}</div>{% endif %}
|
|
|
|
<div class="title-block">
|
|
<div class="ornament-line"><span class="bar"></span><span class="diamond">◆</span><span class="bar"></span></div>
|
|
<h1 class="cert-title">{% trans "Certificate of Appreciation" %}</h1>
|
|
<div class="cert-title-ar">شهادة تقدير</div>
|
|
</div>
|
|
|
|
<div class="presented">{% trans "Proudly Presented To" %}</div>
|
|
|
|
<div class="name-frame">
|
|
<div class="recipient-name">{{ recipient_name }}</div>
|
|
</div>
|
|
{% if recipient_title or department_name %}
|
|
<div class="recipient-meta">
|
|
{{ recipient_title }}{% if recipient_title and department_name %} <span class="dot">◆</span> {% endif %}{{ department_name }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<p class="citation">{% blocktrans %}In proud recognition of outstanding dedication to patient experience, compassion, and the exemplary care that defines the highest standards of our hospital.{% endblocktrans %}</p>
|
|
<p class="citation-ar">في تقديرٍ فاخر للتفاني المتميز في خدمة تجربة المريض، والرحابة، والرعاية النموذجية التي تعكس أرقى معايير مستشفانا.</p>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
|
|
<div class="col-date">
|
|
<span class="lbl">{% trans "Date Awarded" %}</span>
|
|
<span class="val">{{ date_dt|date:"j F Y" }}</span>
|
|
<div class="ref">REF · {{ reference }}</div>
|
|
</div>
|
|
|
|
<div class="col-seal">
|
|
<svg class="seal" viewBox="0 0 200 200">
|
|
<defs>
|
|
<radialGradient id="foil" cx="50%" cy="38%" r="62%">
|
|
<stop offset="0%" stop-color="#fff7e0"/>
|
|
<stop offset="55%" stop-color="#f0d68a"/>
|
|
<stop offset="100%" stop-color="#c9a24b"/>
|
|
</radialGradient>
|
|
<path id="topArc" d="M 30,100 A 70,70 0 0 1 170,100" fill="none"/>
|
|
<path id="botArc" d="M 170,100 A 70,70 0 0 0 30,100" fill="none"/>
|
|
</defs>
|
|
<circle cx="100" cy="100" r="95" fill="url(#foil)" stroke="#b8860b" stroke-width="3"/>
|
|
<circle cx="100" cy="100" r="83" fill="none" stroke="#b8860b" stroke-width="1.1"/>
|
|
<circle cx="100" cy="100" r="58" fill="none" stroke="#005696" stroke-width="1.2" stroke-dasharray="2 3.5"/>
|
|
<text font-size="11" font-weight="600" letter-spacing="3" fill="#003d6b"><textPath href="#topArc" startOffset="50%" text-anchor="middle">PATIENT EXPERIENCE EXCELLENCE</textPath></text>
|
|
<text font-size="9.5" font-weight="500" letter-spacing="4" fill="#003d6b"><textPath href="#botArc" startOffset="50%" text-anchor="middle">AL HAMMADI · EST 2026</textPath></text>
|
|
<text x="100" y="98" text-anchor="middle" font-size="34" fill="#b8860b">★</text>
|
|
<text x="100" y="120" text-anchor="middle" font-size="8.5" font-weight="700" letter-spacing="2.5" fill="#005696">CERTIFIED</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="signatures">
|
|
<div class="sig">
|
|
<div class="line"></div>
|
|
{% if ceo_name %}<div class="who">{{ ceo_name }}</div>{% endif %}
|
|
<div class="role">{% trans "Hospital CEO" %}</div>
|
|
</div>
|
|
<div class="sig">
|
|
<div class="line"></div>
|
|
{% if medical_director_name %}<div class="who">{{ medical_director_name }}</div>{% endif %}
|
|
<div class="role">{% trans "Medical Director" %}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|