12 lines
4.8 KiB
Django/Jinja
12 lines
4.8 KiB
Django/Jinja
{% import '_shared/macros.html.j2' as ui %}
|
|
<!doctype html><html lang="de"><head><meta charset="utf-8"><title>{{ data._theme.name }} - {{ data.customer.name }}</title><style>
|
|
:root{--p:{{data.design.primary_color}};--s:{{data.design.secondary_color}};--a:{{data.design.accent_color}};--t:{{data.design.text_color}};--m:{{data.design.muted_color}};--bg:{{data.design.surface_color}};--line:#d9dfdf;--pos:#27745b;--neg:#a54a4a}@page{size:A4;margin:14mm 15mm 19mm}*{box-sizing:border-box}html{-webkit-print-color-adjust:exact;print-color-adjust:exact}body{margin:0;color:var(--t);font:9.3pt/1.52 {{data.design.font_family}},Arial,sans-serif}h1,h2,h3,p{margin-top:0}h1{font-size:36pt;line-height:.98;letter-spacing:-1.7px;margin:0}h2{font-size:15pt;line-height:1.15;margin-bottom:3mm}h3{font-size:10.5pt;margin-bottom:1mm}p{margin-bottom:3mm}.top{display:flex;justify-content:space-between;align-items:flex-start;border-top:1.8mm solid var(--p);padding-top:6mm;margin-bottom:12mm}.brand{display:flex;gap:3mm;align-items:center}.logo{width:11mm;height:11mm;border:1px solid var(--p);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--p);overflow:hidden}.logo img{width:100%;height:100%;object-fit:contain;padding:1mm}.brand strong{display:block}.micro,.kicker,.kpi-label,.category{font:700 7pt/1.2 Arial,sans-serif;text-transform:uppercase;letter-spacing:1.1px;color:var(--m)}.period{text-align:right;color:var(--p);font-weight:700}.hero{display:grid;grid-template-columns:1fr 68mm;gap:10mm;align-items:end;margin-bottom:11mm}.hero-note{border-left:1mm solid var(--a);padding-left:5mm}.hero-note h2{font-size:14pt}.hero-note p{margin:0}.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:5mm}.kpi{padding:5mm 4mm 4mm 0}.kpi+.kpi{border-left:1px solid var(--line);padding-left:4mm}.kpi-value{font-size:16pt;font-weight:700;color:var(--p);white-space:nowrap;margin:2mm 0}.kpi-delta{font-size:7.5pt;color:var(--m)}.up{color:var(--pos)}.down{color:var(--neg)}.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:6mm;margin-bottom:10mm}.fact span{display:block;color:var(--m);font-size:7.3pt}.fact strong{display:block;margin-top:1mm}.section{margin-bottom:9mm}.section-title{display:grid;grid-template-columns:auto 1fr;gap:4mm;align-items:center;margin-bottom:4mm}.section-title h2{margin:0}.rule{height:1px;background:var(--line)}.trend-bars{border-top:1px solid var(--line)}.trend-row{display:grid;grid-template-columns:18mm 1fr 28mm 22mm;gap:3mm;align-items:center;padding:2.2mm 0;border-bottom:1px solid var(--line);font-size:7.7pt}.trend-label{font-weight:700}.trend-track{height:3.5mm;background:var(--bg);position:relative}.trend-revenue{height:100%;background:var(--p)}.trend-occ{height:1mm;background:var(--a);position:absolute;bottom:0;left:0}.trend-num{text-align:right}.content-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:9mm;break-before:page;break-inside:avoid}.developments,.recommendations{display:grid;gap:4mm}.development{display:grid;grid-template-columns:2mm 1fr;gap:3mm;break-inside:avoid}.impact{width:1.3mm;background:var(--m)}.positive .impact{background:var(--pos)}.negative .impact{background:var(--neg)}.development p{margin:0}.recommendation{display:grid;grid-template-columns:8mm 1fr;gap:3mm;break-inside:avoid;padding-bottom:4mm;border-bottom:1px solid var(--line)}.priority{font-size:17pt;color:var(--a);font-weight:700}.recommendation p{margin-bottom:1.5mm}.effect{color:var(--p)}.outlook{margin-top:8mm;padding:6mm 0;border-top:1.2mm solid var(--p);border-bottom:1px solid var(--line);break-inside:avoid}.outlook p{margin:0}.notes{margin-top:4mm;font-size:7pt;color:var(--m)}.notes ul{margin:1mm 0;padding-left:4mm}.legal{font-size:6.5pt;color:var(--m);margin-top:3mm}
|
|
</style></head><body>
|
|
<header class="top"><div class="brand">{{ui.logo(data)}}<div><strong>{{data.customer.name}}</strong><div class="micro">{{data.customer.property_name}}</div></div></div><div class="period">{{data.report.period.label}}<div class="micro">{{data.customer.location}}</div></div></header>
|
|
<section class="hero"><div><div class="kicker">Monatliche Performance</div><h1>Monats-<br>report</h1></div><div class="hero-note"><div class="kicker">Kurzfazit</div><h2>{{data.content.summary.headline}}</h2><p>{{data.content.summary.text}}</p></div></section>
|
|
{{ui.kpis(data)}}{{ui.facts(data)}}
|
|
<section class="section"><div class="section-title"><h2>Monatsverlauf</h2><div class="rule"></div></div>{{ui.trend_bars(data)}}</section>
|
|
<div class="content-grid"><section><div class="section-title"><h2>Entwicklungen</h2><div class="rule"></div></div>{{ui.developments(data)}}</section><section><div class="section-title"><h2>Empfehlungen</h2><div class="rule"></div></div>{{ui.recommendations(data)}}</section></div>
|
|
{{ui.outlook(data)}}{{ui.notes(data)}}
|
|
</body></html>
|