add oeffi-like "clean" display. Still quite experimental

(copied from https://wiki.die-foobar.de/wiki/Infoscreen sources)

3 files changed, 131 insertions, 71 deletions

diff --git a/cgi/index.pl b/cgi/index.pl
index f50fec7..6d635c2 100644
--- a/cgi/index.pl
+++ b/cgi/index.pl
@@ -83,6 +83,7 @@ sub handle_request {
 
 	for my $result (@results) {
 		my $platform = ( split( / /, $result->platform ) )[0];
+		my $delay = 0;
 		if ($via) {
 			my @route = $result->route;
 			if ( not( any { $_ =~ m{$via}io } @route ) ) {
@@ -97,6 +98,9 @@ sub handle_request {
 		if ( $info eq '+0' ) {
 			$info = undef;
 		}
+		if ( $info and $info =~ m{ \+ (\d+) }x ) {
+			$delay = $1;
+		}
 		if ( $hide_low_delay and $info ) {
 			$info =~ s{ (?: ca\. \s* )? \+ [ 1 2 3 4 ] $ }{}x;
 		}
@@ -112,6 +116,7 @@ sub handle_request {
 				destination => $result->destination,
 				platform    => $platform,
 				info        => $info,
+				delay       => $delay,
 			}
 		);
 	}
diff --git a/cgi/templates/clean.html.ep b/cgi/templates/clean.html.ep
index 021b7f1..635c3ad 100644
--- a/cgi/templates/clean.html.ep
+++ b/cgi/templates/clean.html.ep
@@ -1,48 +1,48 @@
 % if (@{$departures}) {
 
 <div class="displayclean">
+<ul>
 % my $i = 0;
 % for my $departure (@{$departures}) {
 % $i++;
 
-<div class="display <% if (($i % 2) == 0) { %> separator<% } %>">
-
-<div class="train">
+<li>
+<span class="line">
 %= $departure->{train}
-</div>
-
-<div class="destination">
-%= $departure->{destination}
-</div>
-
-<div class="platform">
-%= $departure->{platform}
-</div>
-
-<div class="time">
-%= $departure->{time}
-</div>
-
-<div class="via">
+</span>
+<span class="route">
 % my $via_max = @{$departure->{via}};
 % my $via_cur = 0;
 % for my $stop (@{$departure->{via}}) {
 % $via_cur++;
-<span><%= $stop %><% if ($via_cur < $via_max) { %> - <% } %></span>
+<%= $stop %><% if ($via_cur < $via_max) { %> - <% } %>
 % }
-</div>
+</span>
+<span class="dest">
+%= $departure->{destination}
+</span>
+<span class="countdown">
+% if ($departure->{delay}) {
+<span class="delay">(+<%= $departure->{delay} %>)</span>
+% }
+</span>
+<span class="time">
+%= $departure->{time}
+</span>
+</li>
 
+<!--
 % if ($departure->{info}) {
 <div class="info">
 %= $departure->{info}
 </div>
 % }
-
-</div> <!-- display -->
+-->
 
 % }
 
-</div> <!-- outer -->
+</ul>
+</div> <!-- displayclean -->
 
 % }
 % else {
diff --git a/cgi/templates/layouts/default.html.ep b/cgi/templates/layouts/default.html.ep
index a47a2f7..1f1c952 100644
--- a/cgi/templates/layouts/default.html.ep
+++ b/cgi/templates/layouts/default.html.ep
@@ -20,72 +20,127 @@
 	}
 % }
 
-	div.displayclean div.display {
-		font-family: Sans-Serif;
-		position: relative;
-		margin-bottom: 0;
-		margin-top: 0;
-		padding-top: 0;
-		padding-bottom: 0;
-		width: 100%;
-		height: 4.4em;
+	div.displayclean {
+		background-color:#F8F8F8;
+		position:absolute;
+		top:5px;
+		left:5px;
+		border-width:1px 2px;
+		width:100%;
+		height:499px;
+	}
+
+	div.displayclean ul {
+		position:absolute;
+		width:100%;
+		background-color:#F8F8F8;
+		top: -3px;
+		left: 0;
+
+		list-style-type:none;
+		margin:0;
+		padding:0;
+		border-width:1px 0 25px;
+		border-style:solid;
+		border-color:#CCCCCC;
 	}
 
-	div.displayclean div.display div {
-		overflow: hidden;
-		position: absolute;
-		height: 100%;
+	div.displayclean li {
+		height:70px;
+		background-color:#F8F8F8;
+		padding:5px;
+		display:block;
+		border-width:1px 0;
+		border-style:solid;
+		border-color:#CCCCCC;
+		width:95%;
+		position:relative;
 	}
 
-	div.displayclean div.time {
-		left: 0;
-		top: 10%;
-		height: 1em;
-		font-size: 150%;
+	div.displayclean li .line {
+		color:#FFFFFF;
+		background-color:#666666;
+		font-weight:bold;
+		font-size:28px;
+		padding:3px 8px 2px 5px;
+		position:absolute;
+		top:7px;
+		left:1%;
 	}
 
-	div.displayclean div.train {
-		left: 0;
-		width: 42%;
-		color: #000000;
-		font-size: 200%;
-		font-weight: bold;
-		text-align: right;
+	div.displayclean li .tram {
+		background-color:#CC0000;
 	}
 
-	div.displayclean div.via {
-		top: 57%;
-		left: 44%;
+	div.displayclean li .sbahn {
+		background-color:#006E10;
+		-webkit-border-radius: 30px;
+		-moz-border-radius: 30px;
+		border-radius: 30px;
 	}
 
-	div.displayclean div.via span {
-		margin-right: 0.4em;
-		font-size: 95%;
-		color: #333333;
+	div.displayclean li .ubahn {
+		background-color:#001090;
 	}
 
-	div.displayclean div.destination {
-		left: 44%;
-		width: 78%;
-		font-size: 200%;
+	div.displayclean li .bus {
+		background-color:#991199;
+		-webkit-border-radius: 10px;
+		-moz-border-radius: 10px;
+		border-radius: 10px;
 	}
 
-	div.displayclean div.platform {
-		right: 0;
-		font-size: 200%;
+	div.displayclean li .route {
+		color:#444444;
+		font-size:21px;
+		position:absolute;
+		top:5px;
+		left:10em;
 	}
 
-	div.displayclean div.info {
-		left: 0;
-		top: 57%;
-		width: 44%;
-		font-size: 80%;
-		line-height: 150%;
-		color: #dd0000;
+	div.displayclean li .dest {
+		color:#000000;
+		font-weight:bold;
+		font-size:46px;
+		position:absolute;
+		top:23px;
+		left:4.5em;
 	}
 
-	div.displayclean div.separator {
-		border-bottom: 0.1em solid #000066;
+	div.displayclean li .countdown {
+		color:#000000;
+		font-size:48px;
+		position:absolute;
+		right:5px;
+		bottom:2px;
+	}
+
+	div.displayclean li .header {
+		color:#000000;
+		font-size:55px;
+		font-weight:bold;
+		padding-top:8px;
+		border-width-top:0;
+		display:block;
+		text-align:center;
+	}
+
+	div.displayclean li .head {
+		border-bottom-width:0;
+	}
+
+	div.displayclean li .countdown .delay {
+		font-size:38px;
+		color:#FF0000;
+		padding-right:7px;
+	}
+
+	div.displayclean li .time {
+		color:#000000;
+		font-size:24px;
+		position:absolute;
+		right:5px;
+		top:5px;
 	}
 
 	div.displaymulti {