<!DOCTYPE html> <html> <head> <title><%= $title %></title> <meta charset="utf-8"> % if ($self->stash('refresh_interval')) { <meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/> % } <style type="text/css"> html { font-family: Sans-Serif; } % if ($hide_opts) { body { margin: 0; padding: 0; } % } div.displayclean { background-color:#F8F8F8; border-width:1px 2px; width:100%; margin-bottom: 5em; } div.displayclean > ul { position:relative; width:100%; background-color:#F8F8F8; list-style-type:none; margin:0; padding:0; border-bottom: 1px solid #cccccc; } div.displayclean > ul > li { min-height:7em; background-color:#F8F8F8; display:block; border-width:1px 0; border-style:solid; border-color:#CCCCCC; width:100%; position:relative; } div.displayclean li .line { color:#FFFFFF; background-color:#666666; font-weight:bold; font-size: 3em; padding:3px 8px 2px 5px; position:absolute; top:7px; left:2px; } div.displayclean li .route { color:#444444; font-size:2.1em; position:absolute; top:5px; left:8em; height: 1em; width: 70%; overflow: hidden; } div.displayclean li .info { color:#ff0000; font-size:2.1em; position:absolute; top:5px; left:8em; height: 1em; width: 70%; overflow: hidden; } div.displayclean li .moreinfo { color:#000000; font-size:2.1em; position:absolute; top:5px; left:8em; min-height: 1em; width: 70%; background-color: white; border: 1px solid black; z-index: 5; visibility: hidden; } div.displayclean li:hover .moreinfo { visibility: visible; } div.displayclean li .moreinfo .reason { color: #ff0000; } div.displayclean li .dest { color:#000000; font-weight:bold; font-size:4em; position:absolute; top:0.8em; left:4.2em; width: 70%; overflow: hidden; } div.displayclean li .countdown { color:#000000; font-size:3em; position:absolute; right:5px; bottom:2px; } div.displayclean li .header { color:#000000; font-size:2em; 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:1em; color:#FF0000; padding-right:7px; } div.displayclean li .countdown .platform { font-weight: bold; } div.displayclean li .time { color:#000000; font-size:2.4em; position:absolute; right:5px; top:5px; } div.displaymulti { border: 0.2em solid #000066; width: 55em; } div.displaymulti div.display { background-color: #0000ff; color: white; font-family: Sans-Serif; font-weight: bold; position: relative; margin-bottom: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; width: 55em; height: 1.4em; } div.displaymulti div.display div { overflow: hidden; position: absolute; height: 100%; } div.displaymulti div.time { left: 0; width: 6%; font-size: 95%; } div.displaymulti div.train { left: 5%; width: 9%; background-color: white; color: #0000ff; font-size: 95%; } div.displaymulti div.via { left: 15%; width: 35%; } div.displaymulti div.via span { margin-right: 0.4em; font-size: 80%; } div.displaymulti div.destination { left: 50%; width: 25%; font-size: 120%; } div.displaymulti div.platform { left: 75%; width: 5%; } div.displaymulti div.info { left: 80%; width: 20%; background-color: white; color: #0000ff; font-size: 80%; line-height: 150%; } div.displaymulti div.separator { border-bottom: 0.1em solid #000066; } div.displaysingle div.display { background-color: #0000ff; color: white; font-family: Sans-Serif; font-weight: bold; position: relative; margin-left: 1em; margin-top: 1em; float: left; width: 28em; height: 4.5em; border: 0.7em solid #000066; } div.displaysingle div.display div { overflow: hidden; position: absolute; } div.displaysingle div.no_data { top: 0.5em; left: 1em; font-size: 1.7em; } div.displaysingle div.time { top: 0em; left: 0em; font-size: 1.7em; } div.displaysingle div.train { left: 0em; top: 1.8em; } div.displaysingle div.via { top: 1.5em; left: 5.8em; width: 17em; height: 1em; } div.displaysingle div.via span { margin-right: 0.4em; } div.displaysingle div.destination { top: 1.6em; left: 3.6em; width: 12em; font-size: 1.6em; height: 1.2em; } div.displaysingle div.platform { top: 0em; right: 0em; font-size: 3em; } div.displaysingle div.info { top: 0em; left: 5.8em; width: 16.5em; height: 1em; background-color: white; color: #0000ff; } div.about { font-family: Sans-Serif; color: #666666; } div.about a { color: #000066; text-decoration: none; } div.error { font-size: 150%; font-weight: bold; color: #ee0000; } pre { margin-bottom: 2em; } span.optional, span.notes { color: #666666; } div.break { heighT: 1em; } div.field { width: 100%; clear: both; } div.field div.desc { float: left; width: 14em; text-align: right; padding-right: 0.5em; } input, select { border: 1px solid black; } div.notes { margin-top: 4em; } div.notes ul { margin-top: 1em; } </style> %= javascript '/jquery-1.10.2.min.js' %= javascript '/marquee.js' %= javascript begin $(function () { $('marquee').marquee() }); % end </head> <body> % if (my $error = stash 'error') { <div class="error">Received an error from the backend service:</div> <div> <pre> %= $error </pre> </div> % } %= content % if (not $hide_opts) { <div class="input-field"> %= form_for _redirect => begin <div> <div class="field"> <div class="desc">Station name</div> <div> % if (stash('stationlist')) { %= select_field station => stash('stationlist') % } % else { %= text_field 'station' % } %= submit_button 'Display' </div> </div> <div class="break"></div> <span class="optional">optional:</span> <div class="field"> <div class="desc"> only display routes via </div> <div> %= text_field 'via' </div> </div> <div class="field"> <div class="desc"> on platforms </div> <div> %= text_field 'platforms' </div> </div> <div class="field"> <div class="desc"> hide delay < 5 minutes </div> <div> %= check_box 'hidelowdelay' => 1 </div> </div> <div class="field"> <div class="desc"> display type </div> <div> %= select_field mode => [['combined' => 'multi'], ['platform' => 'single'], ['non-DB' => 'clean']] </div> </div> <div class="field"> <div class="desc"> backend </div> <div> %= select_field backend => [['RIS' => 'ris'], ['IRIS' => 'iris']] </div> </div> <div class="field"> <div class="desc"> hide input fields </div> <div> %= check_box 'hide_opts' => 1 </div> </div> </div> % end </div> <!-- input-field --> <div class="notes"> <span class="notes">notes:</span> <ul> <li>Umlauts do not work reliably. Try either ä → ae or ä → a</li> </ul> </div> <!-- notes --> <div class="notes"> <span class="notes">examples:</span> <ul> <li><a href="/Essen%20Hbf">Essen HBf</a> (RIS, combined table)</li> <li><a href="/Dortmund/Bochum%7CHamm">Dortmund HBf</a> (RIS, combined table, only routes via Bochum or Hamm)</li> <li><a href="/Dortmund%20Uni?mode=clean&backend=iris">Dortmund Universität</a> (IRIS, mobile view)</li> <li><a href="/KD?mode=single&backend=iris">Düsseldorf HBf</a> (IRIS, platform view)</li> </ul> </div> <div class="notes"> <span class="notes">see also:</span> <ul> <li><a href="http://reiseauskunft.bahn.de/bin/bhftafel.exe/dn">DeutscheBahn RIS</a></li> <li><a href="https://iris.noncd.db.de/wbt/js/index.html?typ=ab&amd;style=qrab&bhf=EE&SecLang=&Zeilen=40&footer=0&disrupt=1" >DeutscheBahn IRIS</a> (see <a href="http://www.db-netz.de/file/2361656/data/betriebsstellen.pdf">betriebsstellen.pdf</a>)</li> <li><a href="http://www.frubi.net/iris/?station=Essen%20HBf">frubi.net arrival/departure monitor</a></li> <li><a href="http://vrrf.finalrewind.org/">vrr-fakedisplay</a></li> </ul> </div> <!-- notes --> <div class="about"> <a href="http://finalrewind.org/projects/db-fakedisplay/">db-fakedisplay</a> v<%= $version %> </div> % } </body> </html>