59 lines
2.6 KiB
HTML
59 lines
2.6 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;
|
|
page-break-after: always;
|
|
{% if letterhead_path %}
|
|
background-image: url('{{ letterhead_path }}');
|
|
background-size: 210mm 297mm;
|
|
background-repeat: no-repeat;
|
|
background-position: top left;
|
|
{% endif %}
|
|
}
|
|
.page:last-child { page-break-after: auto; }
|
|
.watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.04; pointer-events: none; z-index: 0; }
|
|
.watermark img { width: 300px; }
|
|
.form-body { padding: 38mm 20mm 35mm 20mm; position: relative; z-index: 1; }
|
|
.form-title { text-align: center; font-size: 16px; color: var(--blue); padding: 10px 0 16px 0; }
|
|
.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">
|
|
{% if letterhead_path %}
|
|
<div class="watermark"><img src="{{ logo_path }}" alt=""></div>
|
|
{% else %}
|
|
{% include "complaints/partials/pdf_letterhead_header.html" %}
|
|
<div class="watermark"><img src="{{ logo_path }}" alt=""></div>
|
|
{% endif %}
|
|
|
|
<div class="form-body">
|
|
{% block pdf_content %}{% endblock %}
|
|
</div>
|
|
|
|
{% if not letterhead_path %}
|
|
{% include "complaints/partials/pdf_letterhead_footer.html" %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|