1 files changed, 61 insertions, 37 deletions
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 2292967..cecd010 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -3,20 +3,20 @@
 <b>dbdb</b>
 
 <div class="intro">
-Diese Seite sammelt Ankunfts- und Abfahrtsdaten einiger deutschen Bahnhöfe und
-berechnet daraus Statistiken zu Pünktlichkeit, Verspätungsmeldungen und
-ähnlichem. Das ist ein reines Freizeitprojekt (und aktuell ziemlich unfertig),
-für die Korrektheit und Vollständigkeit gibt es selbstverständlich keine
-Garantie. Vernünftiges Layout und Design kommt irgendwann™ mal.
+  Diese Seite sammelt Ankunfts- und Abfahrtsdaten einiger deutschen Bahnhöfe und
+  berechnet daraus Statistiken zu Pünktlichkeit, Verspätungsmeldungen und
+  ähnlichem. Das ist ein reines Freizeitprojekt (und aktuell ziemlich unfertig),
+  für die Korrektheit und Vollständigkeit gibt es selbstverständlich keine
+  Garantie. Vernünftiges Layout und Design kommt irgendwann™ mal.
 </div>
 
 <b>Bitte beachten</b>
 <div class="usage">
-Die Deutsche Bahn ist über eine solche Statistiksammlung möglicherweise
-nicht ganz glücklich, daher bleibt diese Seite nichtöffentlich.
-Einzelne Graphen / Statistiken dürfen gerne (<b>ohne</b> Quellenangabe)
-weitergegeben werden. Zugangsdaten (soweit vorhanden) bitte nur mit
-Verstand weitergeben, im Zweifelsfall werden sie irgendwann geändert.
+  Die Deutsche Bahn ist über eine solche Statistiksammlung möglicherweise
+  nicht ganz glücklich, daher bleibt diese Seite nichtöffentlich.
+  Einzelne Graphen / Statistiken dürfen gerne (<b>ohne</b> Quellenangabe)
+  weitergegeben werden. Zugangsdaten (soweit vorhanden) bitte nur mit
+  Verstand weitergeben, im Zweifelsfall werden sie irgendwann geändert.
 </div>
 
 <b>Datengrundlage</b>
@@ -36,32 +36,56 @@ Bedeutung der msg-Spalten siehe
 % }
 </div>
 
-<div class="globalstats">
-In der Datenbank sind <b><%= $stats->{departures} %></b> Fahrten
-an <b><%= $stats->{days} %></b> Tagen,
-davon
-<b><%= $stats->{realtime} %></b>
-(<b><%= sprintf('%.1f%%', $stats->{realtime_rate} * 100) %></b>) mit Echtzeitdaten.
-Es gab
-<b><%= $stats->{delayed} %></b> (<%= sprintf('%.1f%%', $stats->{delayed_rate} * 100) %>)
-Züge mit mehr als 5 Minuten Verspätung und
-<b><%= $stats->{canceled} %></b> (<%= sprintf('%.1f%%', $stats->{canceled_rate} * 100) %>)
-Zugausfälle. Pünktlich auf die Minute waren
-<b><%= $stats->{ontime} %></b> (<%= sprintf('%.1f%%', $stats->{ontime_rate} * 100) %>)
-Abfahrten.
-<br/>
-Insgesamt wurden
-<b><%= sprintf('%d', $stats->{delay_sum} / 60) %> Stunden</b> an Verspätungen eingefahren,
-dabei ist ein Zug durchschnittlich
-<b><%= sprintf('%.2f', $stats->{delay_avg}) %> Minuten</b> zu spät.
-</div>
+  <div class="globalstats">
+    In der Datenbank sind <b><%= $stats->{departures} %></b> Fahrten
+    an <b><%= $stats->{days} %></b> Tagen,
+    davon
+    <b><%= $stats->{realtime} %></b>
+    (<b><%= sprintf('%.1f%%', $stats->{realtime_rate} * 100) %></b>) mit Echtzeitdaten.
+    Es gab
+    <b><%= $stats->{delayed} %></b> (<%= sprintf('%.1f%%', $stats->{delayed_rate} * 100) %>)
+    Züge mit mehr als 5 Minuten Verspätung und
+    <b><%= $stats->{canceled} %></b> (<%= sprintf('%.1f%%', $stats->{canceled_rate} * 100) %>)
+    Zugausfälle. Pünktlich auf die Minute waren
+    <b><%= $stats->{ontime} %></b> (<%= sprintf('%.1f%%', $stats->{ontime_rate} * 100) %>)
+    Abfahrten.
+    <br/>
+    Insgesamt wurden
+    <b><%= sprintf('%d', $stats->{delay_sum} / 60) %> Stunden</b> an Verspätungen eingefahren,
+    dabei ist ein Zug durchschnittlich
+    <b><%= sprintf('%.2f', $stats->{delay_avg}) %> Minuten</b> zu spät.
+  </div>
 
-<div class="forms">
-<b>Bargraph</b>:
-%= include 'barform';
-<br/>
-<b>Top-Liste</b>:
-%= include 'topform';
-<b>Einzelne Züge</b>:
-%= include 'individualform';
+  <div class="container">
+    <div class="row z-depth-2">
+      <div class="col s12">
+        <ul class="tabs">
+          <li class="tab col s3">
+            <a href="#general">Allgemein</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#meldung">Meldungen</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#top">Top</a>
+          </li>
+          <li class="tab col s3">
+            <a href="#single">Einzeln</a>
+          </li>
+        </ul>
+      </div>
+      <div id="general" class="col s12">
+        %= include 'generalbar';
+      </div>
+      <div id="meldung" class="col s12">
+        %= include 'meldungbar';
+      </div>
+      <div id="top" class="col s12">
+        %= include 'topform';
+      </div>
+      <div id="single" class="col s12">
+        %= include 'individualform';
+      </div>
+    </div>
+  </div>
 </div>