11 lines
5.7 KiB
Django/Jinja
11 lines
5.7 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:#d8e0e5;--pos:#25745b;--neg:#a84444}@page{size:A4;margin:12mm 13mm 19mm}*{box-sizing:border-box}html{-webkit-print-color-adjust:exact;print-color-adjust:exact}body{margin:0;color:var(--t);font:9pt/1.46 {{data.design.font_family}},Arial,sans-serif;background:#fff}h1,h2,h3,p{margin-top:0}h1{font-size:24pt;margin:0;line-height:1.05}h2{font-size:13.5pt;margin-bottom:3mm}h3{font-size:10pt;margin-bottom:1mm}p{margin-bottom:2.5mm}.header{background:linear-gradient(125deg,var(--p),var(--s));color:#fff;border-radius:3mm;padding:7mm;margin-bottom:5mm;display:grid;grid-template-columns:1fr auto;gap:8mm;break-inside:avoid}.header-left{display:flex;gap:4mm;align-items:center}.logo{width:14mm;height:14mm;background:#fff;color:var(--p);border-radius:2mm;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{font-weight:700}.sub{font-size:7.5pt;opacity:.78}.header-right{text-align:right}.period{font-size:11pt;font-weight:800}.kicker,.kpi-label,.category{font-size:6.8pt;text-transform:uppercase;letter-spacing:.9px;font-weight:800;color:var(--m)}.header .kicker{color:#ffffffb8}.summary{display:grid;grid-template-columns:1fr 42mm;gap:4mm;margin-bottom:5mm}.summary-main{padding:5mm;border:1px solid var(--line);border-radius:2mm}.summary-main h2{font-size:15pt}.summary-score{background:var(--bg);border-radius:2mm;padding:4mm;display:flex;flex-direction:column;justify-content:center;text-align:center}.summary-score strong{font-size:20pt;color:var(--p)}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-bottom:3mm}.kpi{padding:4mm;background:var(--bg);border-top:1.2mm solid var(--p);min-height:29mm;break-inside:avoid}.kpi-value{font-size:15pt;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);gap:3mm;margin-bottom:6mm}.fact{border:1px solid var(--line);padding:2.5mm 3mm}.fact span{display:block;font-size:6.8pt;color:var(--m)}.fact strong{display:block;margin-top:.5mm}.grid{display:grid;grid-template-columns:1.18fr .82fr;gap:5mm;align-items:start;break-before:page;break-inside:avoid}.panel{border:1px solid var(--line);border-radius:2mm;padding:4mm;margin-bottom:5mm;break-inside:avoid}.panel-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:2mm;margin-bottom:3mm}.panel-head h2{margin:0}.trend-bars{display:grid;gap:2mm}.trend-row{display:grid;grid-template-columns:17mm 1fr 27mm 21mm;gap:2mm;align-items:center;font-size:7.2pt}.trend-label{font-weight:700}.trend-track{height:4mm;background:#e7ecef;position:relative;border-radius:1mm;overflow:hidden}.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;gap:2.5mm}.development{display:grid;grid-template-columns:2mm 1fr;gap:2.5mm;padding-bottom:2.5mm;border-bottom:1px solid var(--line);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:8mm 1fr;gap:3mm;background:var(--bg);padding:3.5mm;break-inside:avoid}.priority{width:7mm;height:7mm;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}.recommendation p{margin-bottom:1.4mm}.effect{border-top:1px solid #00000010;padding-top:1.5mm}.outlook{padding:5mm;background:var(--p);color:#fff;border-radius:2mm;break-inside:avoid}.outlook .kicker{color:#ffffffb8}.outlook h2{margin-bottom:1.5mm}.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.3pt;color:var(--m);margin-top:2mm}
|
|
</style></head><body>
|
|
<header class="header"><div class="header-left">{{ui.logo(data)}}<div><div class="brand">{{data.customer.name}}</div><div class="sub">{{data.customer.property_name}} · {{data.customer.location}}</div></div></div><div class="header-right"><div class="kicker">Performance Dashboard</div><div class="period">{{data.report.period.label}}</div><div class="sub">Erstellt {{data.report.generated_at|date_de}}</div></div></header>
|
|
<section class="summary"><div class="summary-main"><div class="kicker">Management Summary</div><h2>{{data.content.summary.headline}}</h2><p>{{data.content.summary.text}}</p></div><div class="summary-score"><span class="kicker">Status</span><strong>{% if data.content.summary.rating=='positive' %}↑{% elif data.content.summary.rating=='watch' %}!{% else %}•{% endif %}</strong><span>{{data.content.summary.rating}}</span></div></section>
|
|
{{ui.kpis(data)}}{{ui.facts(data)}}
|
|
<div class="grid"><div><section class="panel"><div class="panel-head"><h2>Monatsverlauf</h2><span class="kicker">{{data.report.period.comparison_label}}</span></div>{{ui.trend_bars(data)}}</section><section class="panel"><div class="panel-head"><h2>Wichtige Entwicklungen</h2></div>{{ui.developments(data)}}</section></div><div><section class="panel"><div class="panel-head"><h2>Prioritäten</h2></div>{{ui.recommendations(data)}}</section>{{ui.outlook(data)}}</div></div>
|
|
{{ui.notes(data)}}
|
|
</body></html>
|