diff options
Diffstat (limited to 'cgi')
| -rw-r--r-- | cgi/index.pl | 5 | ||||
| -rw-r--r-- | cgi/templates/clean.html.ep | 46 | ||||
| -rw-r--r-- | cgi/templates/layouts/default.html.ep | 151 |
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 { |