stefankoelle/mvg-departures
1
0
Fork 0
mirror of https://github.com/skoelle/mvg-departures.git synced 2026-09-18 02:40:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

new template

Browse Source
This commit is contained in:
stefankoelle
2026-08-01 21:28:14 +02:00
parent 102a2eb585
commit 1ec511435a
1 changed files with 164 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/index.html
+78 -37
View File
@@ -5,6 +5,45 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abfahrten</title> <title>Abfahrten</title>
<meta http-equiv="refresh" content="{{ refresh_seconds }}"> <meta http-equiv="refresh" content="{{ refresh_seconds }}">
</head>
<body>
<div style="max-width: 375px; margin: 0 auto; width: 100%;">
<h1>Abfahrten <span class="updated">Stand: {{ generated_at }}</span></h1>
{% if departures %}
<table>
{% for d in departures %}
<tr>
<td style="width:34px;"><span class="icon icon-{{ d.icon }}">{{ d.icon }}</span></td>
<td>
<span class="line">{{ d.line }}</span>
<span class="destination">{{ d.destination }}</span>
<span class="station">{{ d.station }}</span>
</td>
<td class="time">
{{ d.time_str }}
{% if d.cancelled %}
<span class="cancelled">entfällt</span>
{% elif d.delay_min and d.delay_min > 0 %}
<span class="delay {% if d.delay_min >= 5 %}high{% endif %}">+{{ d.delay_min }} min</span>
{% endif %}
</td>
</tr>
{% if d.messages %}
<tr>
<td colspan="3" class="messages">
{% for m in d.messages %}{{ m }}{% if not loop.last %} · {% endif %}{% endfor %}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
{% else %}
<div class="empty">Keine Abfahrten verfügbar.</div>
{% endif %}
</div>
</body>
</html>
<style> <style>
* { box-sizing: border-box; } * { box-sizing: border-box; }
body { body {
@@ -14,6 +53,9 @@
background: #111417; background: #111417;
color: #eaeaea; color: #eaeaea;
font-size: 20px; font-size: 20px;
display: flex;
justify-content: center;
min-height: 100vh;
} }
h1 { h1 {
font-size: 24px; font-size: 24px;
@@ -65,7 +107,7 @@
font-size: 18px; font-size: 18px;
} }
.time { .time {
text-align: center; text-align: right;
white-space: nowrap; white-space: nowrap;
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
@@ -96,40 +138,39 @@
padding: 20px 4px; padding: 20px 4px;
text-align: center; text-align: center;
} }
/* Mobile styles - full width */
@media (max-width: 375px) {
body {
padding: 4px;
}
h1 {
font-size: 20px;
margin: 4px 0 8px 4px;
}
.updated {
font-size: 12px;
}
td {
padding: 8px 4px;
}
.icon {
width: 26px;
height: 26px;
line-height: 26px;
font-size: 13px;
}
.line {
font-size: 16px;
}
.station {
font-size: 12px;
}
.destination {
font-size: 16px;
}
.time {
font-size: 18px;
}
}
</style> </style>
</head>
<body>
<h1>Abfahrten <span class="updated">Stand: {{ generated_at }}</span></h1>
{% if departures %}
<table>
{% for d in departures %}
<tr>
<td style="width:34px;"><span class="icon icon-{{ d.icon }}">{{ d.icon }}</span></td>
<td>
<span class="line">{{ d.line }}</span>
<span class="destination">{{ d.destination }}</span>
<span class="station">{{ d.station }}</span>
</td>
<td class="time">
{{ d.time_str }}
{% if d.cancelled %}
<span class="cancelled">entfällt</span>
{% elif d.delay_min and d.delay_min > 0 %}
<span class="delay {% if d.delay_min >= 5 %}high{% endif %}">+{{ d.delay_min }} min</span>
{% endif %}
</td>
</tr>
{% if d.messages %}
<tr>
<td colspan="3" class="messages">
{% for m in d.messages %}{{ m }}{% if not loop.last %} · {% endif %}{% endfor %}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
{% else %}
<div class="empty">Keine Abfahrten verfügbar.</div>
{% endif %}
</body>
</html>