<!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; } div.outer { border: 0.2em solid #000066; width: 55em; } 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.display div { overflow: hidden; position: absolute; height: 100%; } div.time { left: 0; width: 6%; font-size: 95%; } div.train { left: 5%; width: 9%; background-color: white; color: #0000ff; font-size: 95%; } div.via { left: 15%; width: 35%; } div.via span { margin-right: 0.4em; font-size: 80%; } div.destination { left: 50%; width: 25%; font-size: 120%; } div.platform { left: 75%; width: 5%; } div.info { left: 80%; width: 20%; background-color: white; color: #0000ff; font-size: 80%; line-height: 150%; } div.separator { border-bottom: 0.1em solid #000066; } div.s_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.s_display div { overflow: hidden; position: absolute; } div.s_no_data { top: 0.5em; left: 1em; font-size: 1.7em; } div.s_time { top: 0em; left: 0em; font-size: 1.7em; } div.s_train { left: 0em; top: 1.8em; } div.s_via { top: 1.5em; left: 5.8em; width: 17em; height: 1em; } div.s_via span { margin-right: 0.4em; } div.s_destination { top: 1.6em; left: 3.6em; width: 12em; font-size: 1.6em; height: 1.2em; } div.s_platform { top: 0em; right: 0em; font-size: 3em; } div.s_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> %= 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']] </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="about"> <a href="http://finalrewind.org/projects/db-fakedisplay/">db-fakedisplay</a> v<%= $version %> </div> % } </body> </html>