HH/templates/shared/letterhead_pdf_base.html

50 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>{{ object.reference_number }}</title>
<style>
@page { size: A4; margin: 0; }
@font-face { font-family: 'Noto Kufi Arabic'; font-weight: 400; src: url('vendor/fonts/noto-kufi-arabic/files/noto-kufi-arabic-full-regular.ttf') format('truetype'); }
@font-face { font-family: 'Noto Kufi Arabic'; font-weight: 700; src: url('vendor/fonts/noto-kufi-arabic/files/noto-kufi-arabic-full-bold.ttf') format('truetype'); }
:root { --blue: #005696; --ink: #1e293b; --body: #334155; --muted: #64748b; --border: #cbd5e1; --surface: #f1f5f9; --font: 'Noto Kufi Arabic', sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
body { background: #fff; color: var(--ink); }
.page { width: 210mm; min-height: 297mm; position: relative; overflow: hidden; padding-bottom: 30mm; }
.page-header { position: relative; height: 22mm; margin: 8mm 20mm 0 20mm; }
.header-ar { position: absolute; left: 0; top: 4mm; text-align: left; }
.header-logo-wrap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); text-align: center; }
.header-en { position: absolute; right: 0; top: 4mm; text-align: right; }
.header-logo { width: 55px; height: auto; }
.header-hospital-name { font-size: 14px; font-weight: 700; color: var(--blue); }
.header-cr { font-size: 9px; font-weight: 700; color: var(--blue); text-align: center; }
.header-line { height: 2px; background: var(--blue); margin: 8px 20mm 0 20mm; }
.watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.04; pointer-events: none; z-index: 0; }
.watermark img { width: 300px; }
.page-footer { position: absolute; bottom: 0; left: 0; right: 0; }
.footer-line { height: 2px; background: var(--blue); margin: 0 15mm; }
.footer-content { padding: 6px 15mm 10mm 15mm; text-align: center; font-size: 8px; color: var(--muted); line-height: 1.8; }
.form-body { padding: 8mm 20mm; position: relative; z-index: 1; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.data-table td { border: 1px solid var(--border); font-size: 11px; padding: 8px 12px; }
.data-table .lbl { background: var(--surface); color: var(--body); font-weight: 700; width: 15%; }
.data-table .val { color: var(--ink); width: 35%; }
.data-table .text-cell { padding: 12px; line-height: 2; text-align: justify; }
</style>
</head>
<body>
<div class="page">
{% include "complaints/partials/pdf_letterhead_header.html" %}
<div class="watermark"><img src="{{ logo_path }}" alt=""></div>
<div class="form-body">
{% block pdf_content %}{% endblock %}
</div>
{% include "complaints/partials/pdf_letterhead_footer.html" %}
</div>
</body>
</html>