12 lines
5.1 KiB
Django/Jinja
12 lines
5.1 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:#28745a;--neg:#a74646}@page{size:A4;margin:12mm 14mm 19mm}*{box-sizing:border-box}html{-webkit-print-color-adjust:exact;print-color-adjust:exact}body{margin:0;color:var(--t);font:9.2pt/1.48 {{data.design.font_family}},Arial,sans-serif}h1,h2,h3,p{margin-top:0}h1{font-size:31pt;line-height:.98;margin:0}h2{font-size:15pt;margin-bottom:3mm}h3{font-size:10.3pt;margin-bottom:1mm}p{margin-bottom:2.6mm}.cover{display:grid;grid-template-columns:1fr 1fr;min-height:68mm;margin-bottom:6mm;break-inside:avoid}.cover-left{background:var(--p);color:#fff;padding:7mm;display:flex;flex-direction:column;justify-content:space-between}.cover-right{background:var(--bg);padding:7mm;display:flex;flex-direction:column;justify-content:space-between}.brand{display:flex;align-items:center;gap:3mm}.logo{width:13mm;height:13mm;background:#fff;color:var(--p);display:flex;align-items:center;justify-content:center;font-weight:900;overflow:hidden}.logo img{width:100%;height:100%;object-fit:contain;padding:1mm}.brand-name{font-weight:800}.small{font-size:7.3pt;opacity:.76}.kicker,.kpi-label,.category{font-size:6.7pt;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:var(--m)}.cover-left .kicker{color:#ffffffb8}.period{font-size:18pt;color:var(--p);font-weight:800}.summary h2{font-size:15pt}.summary p{margin:0}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-bottom:3mm}.kpi{padding:4mm;border-left:1mm solid var(--p);background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.kpi:nth-child(even){border-left-color:var(--a)}.kpi-value{font-size:15.5pt;font-weight:800;color:var(--p);margin:2mm 0;white-space:nowrap}.kpi-delta{font-size:7pt}.up{color:var(--pos)}.down{color:var(--neg)}.facts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg);padding:3mm 4mm;margin-bottom:7mm}.fact span{display:block;font-size:6.7pt;color:var(--m)}.fact strong{display:block;margin-top:.5mm}.band{display:grid;grid-template-columns:40mm 1fr;gap:6mm;margin:7mm 0;break-inside:avoid}.band-title{background:var(--p);color:#fff;padding:5mm;min-height:30mm}.band-title.alt{background:var(--a);color:var(--t)}.band-title h2{margin:0}.trend-bars{display:grid;gap:2mm}.trend-row{display:grid;grid-template-columns:18mm 1fr 28mm 22mm;gap:2.5mm;align-items:center;font-size:7.3pt}.trend-label{font-weight:700}.trend-track{height:4mm;background:var(--bg);position:relative}.trend-revenue{height:100%;background:var(--p)}.trend-occ{height:1.2mm;background:var(--a);position:absolute;bottom:0;left:0}.trend-num{text-align:right}.developments{display:grid;grid-template-columns:1fr 1fr;gap:3mm}.development{display:grid;grid-template-columns:2mm 1fr;gap:3mm;border:1px solid var(--line);padding:3.5mm;break-inside:avoid}.impact{background:var(--m)}.positive .impact{background:var(--pos)}.negative .impact{background:var(--neg)}.development p{margin:0}.recommendations{display:grid;gap:3mm}.recommendation{display:grid;grid-template-columns:9mm 1fr;gap:3mm;border-bottom:1px solid var(--line);padding:0 0 3mm;break-inside:avoid}.priority{font-size:18pt;font-weight:800;color:var(--a)}.recommendation p{margin-bottom:1.3mm}.effect{color:var(--p)}.outlook{margin-top:7mm;display:grid;grid-template-columns:38mm 1fr;background:var(--bg);padding:5mm;break-inside:avoid}.outlook .kicker{align-self:start;color:var(--p)}.outlook h2{margin-bottom:2mm}.outlook p{margin:0}.notes{font-size:6.8pt;color:var(--m);margin-top:4mm}.notes ul{margin:1mm 0;padding-left:4mm}.legal{font-size:6.2pt;color:var(--m);margin-top:2mm}
|
|
</style></head><body>
|
|
<section class="cover"><div class="cover-left"><div class="brand">{{ui.logo(data)}}<div><div class="brand-name">{{data.customer.name}}</div><div class="small">{{data.customer.property_name}}</div></div></div><div><div class="kicker">Performance & Strategie</div><h1>Monatsreport</h1></div></div><div class="cover-right"><div><div class="kicker">Berichtszeitraum</div><div class="period">{{data.report.period.label}}</div><div class="small">{{data.customer.location}} · {{data.report.generated_at|date_de}}</div></div><div class="summary"><div class="kicker">Kurzfazit</div><h2>{{data.content.summary.headline}}</h2><p>{{data.content.summary.text}}</p></div></div></section>
|
|
{{ui.kpis(data)}}{{ui.facts(data)}}
|
|
<section class="band"><div class="band-title"><div class="kicker">01</div><h2>Monatsverlauf</h2></div><div>{{ui.trend_bars(data)}}</div></section>
|
|
<section class="band"><div class="band-title alt"><div class="kicker">02</div><h2>Entwicklungen</h2></div><div>{{ui.developments(data)}}</div></section>
|
|
<section class="band"><div class="band-title"><div class="kicker">03</div><h2>Empfehlungen</h2></div><div>{{ui.recommendations(data)}}</div></section>
|
|
{{ui.outlook(data)}}{{ui.notes(data)}}
|
|
</body></html>
|