222 lines
5.7 KiB
HTML
222 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="de">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>OG Card — {{ antrag.drucksache if antrag else "GWÖ" }}</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
width: 1200px;
|
||
|
|
height: 630px;
|
||
|
|
overflow: hidden;
|
||
|
|
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
|
||
|
|
background: #0d1117;
|
||
|
|
color: #e6edf3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card {
|
||
|
|
width: 1200px;
|
||
|
|
height: 630px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
position: relative;
|
||
|
|
background: linear-gradient(135deg, #0d1117 0%, #1a2435 60%, #0d1117 100%);
|
||
|
|
padding: 56px 72px 48px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dekorativer Akzent-Streifen oben */
|
||
|
|
.card::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 0; left: 0; right: 0;
|
||
|
|
height: 4px;
|
||
|
|
background: linear-gradient(90deg, #2d9e5f 0%, #2a7db5 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Wortmarke */
|
||
|
|
.brand {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
margin-bottom: 36px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
.brand .grn { color: #2d9e5f; }
|
||
|
|
.brand .blu { color: #2a7db5; }
|
||
|
|
|
||
|
|
/* Haupt-Inhalt: Score + Titelblock nebeneinander */
|
||
|
|
.body {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 64px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Score-Block links */
|
||
|
|
.score-block {
|
||
|
|
flex-shrink: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.score-num {
|
||
|
|
font-size: 104px;
|
||
|
|
font-weight: 800;
|
||
|
|
line-height: 1;
|
||
|
|
letter-spacing: -0.04em;
|
||
|
|
}
|
||
|
|
.score-num.high { color: #2d9e5f; }
|
||
|
|
.score-num.mid { color: #e6edf3; }
|
||
|
|
.score-num.low { color: #e05252; }
|
||
|
|
|
||
|
|
.score-denom {
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #8b949e;
|
||
|
|
margin-top: -8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verdict {
|
||
|
|
margin-top: 12px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: #8b949e;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Trennlinie */
|
||
|
|
.divider {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 1px;
|
||
|
|
align-self: stretch;
|
||
|
|
background: rgba(230,237,243,0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Titelblock rechts */
|
||
|
|
.title-block {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.antrag-title {
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 700;
|
||
|
|
line-height: 1.35;
|
||
|
|
color: #e6edf3;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 4;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chip {
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 5px 12px;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: rgba(230,237,243,0.08);
|
||
|
|
color: #8b949e;
|
||
|
|
border: 1px solid rgba(230,237,243,0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.chip.partei-cdu { background: rgba(0,0,0,0.4); color: #ccc; }
|
||
|
|
.chip.partei-spd { background: rgba(180,30,30,0.25); color: #f08080; }
|
||
|
|
.chip.partei-grune { background: rgba(45,158,95,0.25); color: #5dcf8a; }
|
||
|
|
.chip.partei-fdp { background: rgba(230,186,0,0.25); color: #f5d34f; }
|
||
|
|
.chip.partei-afd { background: rgba(0,100,170,0.25); color: #7ec8f5; }
|
||
|
|
.chip.partei-linke { background: rgba(140,30,140,0.25); color: #df8ade; }
|
||
|
|
|
||
|
|
/* Footer */
|
||
|
|
.footer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding-top: 24px;
|
||
|
|
border-top: 1px solid rgba(230,237,243,0.08);
|
||
|
|
font-size: 12px;
|
||
|
|
color: #484f58;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-url { letter-spacing: 0.04em; }
|
||
|
|
.footer-matrix { font-weight: 600; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="card">
|
||
|
|
|
||
|
|
<div class="brand">
|
||
|
|
GWÖ-<span class="grn">ANTRAGS</span><span class="blu">PRÜFER</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="body">
|
||
|
|
|
||
|
|
{% if antrag is defined and antrag %}
|
||
|
|
{% set s = antrag.score | float %}
|
||
|
|
{% if s >= 8 %}{% set score_cls = "high" %}
|
||
|
|
{% elif s < 5 %}{% set score_cls = "low" %}
|
||
|
|
{% else %}{% set score_cls = "mid" %}{% endif %}
|
||
|
|
|
||
|
|
<div class="score-block">
|
||
|
|
<div class="score-num {{ score_cls }}">{{ "%.1f"|format(s) }}</div>
|
||
|
|
<div class="score-denom">/ 10</div>
|
||
|
|
{% if antrag.verdict_title %}
|
||
|
|
<div class="verdict">{{ antrag.verdict_title }}</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<div class="title-block">
|
||
|
|
<div class="antrag-title">{{ antrag.title }}</div>
|
||
|
|
<div class="meta">
|
||
|
|
{% if antrag.bundesland %}
|
||
|
|
<span class="chip">{{ antrag.bundesland }}</span>
|
||
|
|
{% endif %}
|
||
|
|
{% if antrag.drucksache %}
|
||
|
|
<span class="chip">{{ antrag.drucksache }}</span>
|
||
|
|
{% endif %}
|
||
|
|
{% for partei in (antrag.parteien or []) %}
|
||
|
|
{% set pcls = partei | lower | replace("ü","u") | replace("ä","a") | replace("ö","o") | replace("/","") | replace(" ","") | replace("90","") | replace("bündnis","grune") | replace("dielinke","linke") %}
|
||
|
|
<span class="chip partei-{{ pcls }}">{{ partei }}</span>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<div class="title-block">
|
||
|
|
<div class="antrag-title" style="font-size:36px;">GWÖ-Antragsprüfer</div>
|
||
|
|
<div class="meta">
|
||
|
|
<span class="chip">Matrix 2.0 · Gemeinden</span>
|
||
|
|
<span class="chip">gwoe.toppyr.de</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<span class="footer-url">gwoe.toppyr.de</span>
|
||
|
|
<span class="footer-matrix">Gemeinwohl-Ökonomie · Matrix 2.0 · Gemeinden</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|