156 lines
4.6 KiB
HTML
156 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Terminübersicht</title>
|
|
<style>
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 20mm;
|
|
@bottom-right {
|
|
content: "Seite " counter(page) " von " counter(pages);
|
|
font-family: Arial, sans-serif;
|
|
font-size: 10pt;
|
|
color: #666;
|
|
}
|
|
}
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 11pt;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
border-bottom: 2px solid #ddd;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.header-text {
|
|
flex: 1;
|
|
}
|
|
.header-logo {
|
|
width: 150px;
|
|
text-align: right;
|
|
}
|
|
.header-logo img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
h1 {
|
|
font-size: 16pt;
|
|
margin: 0 0 5px 0;
|
|
color: #2c3e50;
|
|
}
|
|
h2 {
|
|
font-size: 14pt;
|
|
margin: 0 0 10px 0;
|
|
color: #34495e;
|
|
}
|
|
.date-header {
|
|
background-color: #ecf0f1;
|
|
padding: 8px 12px;
|
|
margin-top: 20px;
|
|
margin-bottom: 10px;
|
|
font-weight: bold;
|
|
font-size: 13pt;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
page-break-inside: auto;
|
|
}
|
|
tr {
|
|
page-break-inside: avoid;
|
|
page-break-after: auto;
|
|
}
|
|
th, td {
|
|
border: 1px solid #bdc3c7;
|
|
padding: 8px;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
}
|
|
th {
|
|
background-color: #f8f9fa;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
.time-col { width: 12%; white-space: nowrap; }
|
|
.family-col { width: 35%; }
|
|
.children-col { width: 15%; text-align: center; }
|
|
.consent-col { width: 20%; text-align: center; }
|
|
.done-col { width: 18%; text-align: center; }
|
|
|
|
.empty-row td {
|
|
height: 35px; /* ensure enough space for writing */
|
|
color: transparent; /* visually hide "Empty" text but keep structure if any */
|
|
}
|
|
|
|
/* The checkbox square */
|
|
.checkbox-square {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 1px solid #333;
|
|
background-color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-text">
|
|
<h1>{{ job_name }}</h1>
|
|
<h2>Terminübersicht ({{ event_type_name }})</h2>
|
|
<p>Stand: {{ current_time }}</p>
|
|
</div>
|
|
<div class="header-logo">
|
|
{% if logo_base64 %}
|
|
<img src="data:image/png;base64,{{ logo_base64 }}" alt="Logo">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% for date, slots in grouped_slots.items() %}
|
|
<div class="date-header">{{ date }}</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="time-col">Uhrzeit</th>
|
|
<th class="family-col">Familie</th>
|
|
<th class="children-col">Kinder</th>
|
|
<th class="consent-col">Veröffentlichung</th>
|
|
<th class="done-col">Erledigt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for slot in slots %}
|
|
<tr class="{% if not slot.booked %}empty-row{% endif %}">
|
|
<td class="time-col" style="color: #333;">{{ slot.time_str }}</td>
|
|
<td class="family-col">{{ slot.name if slot.booked else '' }}</td>
|
|
<td class="children-col">{{ slot.children if slot.booked else '' }}</td>
|
|
<td class="consent-col">
|
|
{% if slot.booked and slot.consent %}
|
|
<span style="font-size: 16pt;">☑</span>
|
|
{% elif slot.booked %}
|
|
<!-- nein -->
|
|
{% else %}
|
|
<!-- leer -->
|
|
{% endif %}
|
|
</td>
|
|
<td class="done-col">
|
|
<span class="checkbox-square"></span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endfor %}
|
|
</body>
|
|
</html> |