From 1ec511435a1e44e76ae32c59ef8d39433a724d36 Mon Sep 17 00:00:00 2001
From: Stefan Koelle <stefan.koelle@gmail.com>
Date: Sat, 1 Aug 2026 21:28:14 +0200
Subject: [PATCH] new template

---
 app/templates/index.html | 287 ++++++++++++++++++++++-----------------
 1 file changed, 164 insertions(+), 123 deletions(-)
diff --git a/app/templates/index.html b/app/templates/index.html
index e270dfa..2a0cea9 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -5,131 +5,172 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Abfahrten</title>
 <meta http-equiv="refresh" content="{{ refresh_seconds }}">
-<style>
-  * { box-sizing: border-box; }
-  body {
-    margin: 0;
-    padding: 8px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    background: #111417;
-    color: #eaeaea;
-    font-size: 20px;
-  }
-  h1 {
-    font-size: 24px;
-    margin: 4px 0 10px 4px;
-    color: #9aa5b1;
-    font-weight: 500;
-  }
-  .updated {
-    font-size: 14px;
-    color: #6b7280;
-    margin-left: 4px;
-  }
-  table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-  tr {
-    border-bottom: 1px solid #23272d;
-  }
-  td {
-    padding: 12px 6px;
-    vertical-align: middle;
-  }
-  .icon {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    border-radius: 6px;
-    font-weight: 700;
-    font-size: 16px;
-    color: #111417;
-  }
-  .icon-U { background: #005ca9; color: #fff; }
-  .icon-S { background: #00933b; color: #fff; }
-  .icon-T { background: #e2001a; color: #fff; }
-  .icon-B { background: #55545a; color: #fff; }
-  .line {
-    font-weight: 700;
-    font-size: 18px;
-    display: block;
-  }
-  .station {
-    font-size: 14px;
-    color: #6b7280;
-  }
-  .destination {
-    font-size: 18px;
-  }
-  .time {
-    text-align: center;
-    white-space: nowrap;
-    font-weight: 700;
-    font-size: 20px;
-  }
-  .delay {
-    font-size: 12px;
-    font-weight: 700;
-    color: #f59e0b;
-    display: block;
-    text-align: right;
-  }
-  .delay.high { color: #ef4444; }
-  .cancelled {
-    color: #ef4444;
-    font-weight: 700;
-    font-size: 12px;
-    display: block;
-    text-align: right;
-  }
-  .messages {
-    font-size: 11px;
-    color: #f59e0b;
-    padding: 0 4px 8px 42px;
-    border-bottom: 1px solid #23272d;
-  }
-  .empty {
-    color: #6b7280;
-    padding: 20px 4px;
-    text-align: center;
-  }
-</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>
+  <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 %}
-    {% endfor %}
-  </table>
-  {% else %}
-    <div class="empty">Keine Abfahrten verfügbar.</div>
-  {% endif %}
+  </div>
 </body>
 </html>
+
+<style>
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  padding: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #111417;
+  color: #eaeaea;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 24px;
+  margin: 4px 0 10px 4px;
+  color: #9aa5b1;
+  font-weight: 500;
+}
+.updated {
+  font-size: 14px;
+  color: #6b7280;
+  margin-left: 4px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+tr {
+  border-bottom: 1px solid #23272d;
+}
+td {
+  padding: 12px 6px;
+  vertical-align: middle;
+}
+.icon {
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  border-radius: 6px;
+  font-weight: 700;
+  font-size: 16px;
+  color: #111417;
+}
+.icon-U { background: #005ca9; color: #fff; }
+.icon-S { background: #00933b; color: #fff; }
+.icon-T { background: #e2001a; color: #fff; }
+.icon-B { background: #55545a; color: #fff; }
+.line {
+  font-weight: 700;
+  font-size: 18px;
+  display: block;
+}
+.station {
+  font-size: 14px;
+  color: #6b7280;
+}
+.destination {
+  font-size: 18px;
+}
+.time {
+  text-align: right;
+  white-space: nowrap;
+  font-weight: 700;
+  font-size: 20px;
+}
+.delay {
+  font-size: 12px;
+  font-weight: 700;
+  color: #f59e0b;
+  display: block;
+  text-align: right;
+}
+.delay.high { color: #ef4444; }
+.cancelled {
+  color: #ef4444;
+  font-weight: 700;
+  font-size: 12px;
+  display: block;
+  text-align: right;
+}
+.messages {
+  font-size: 11px;
+  color: #f59e0b;
+  padding: 0 4px 8px 42px;
+  border-bottom: 1px solid #23272d;
+}
+.empty {
+  color: #6b7280;
+  padding: 20px 4px;
+  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>

{{ d.icon }}	- {{ d.line }} - {{ d.destination }} - {{ d.station }} -	- {{ d.time_str }} - {% if d.cancelled %} - entfällt - {% elif d.delay_min and d.delay_min > 0 %} - +{{ d.delay_min }} min - {% endif %} -
- {% for m in d.messages %}{{ m }}{% if not loop.last %} · {% endif %}{% endfor %} -
{{ d.icon }}	+ {{ d.line }} + {{ d.destination }} + {{ d.station }} +	+ {{ d.time_str }} + {% if d.cancelled %} + entfällt + {% elif d.delay_min and d.delay_min > 0 %} + +{{ d.delay_min }} min + {% endif %} +
+ {% for m in d.messages %}{{ m }}{% if not loop.last %} · {% endif %}{% endfor %} +