diff options
Diffstat (limited to 'cgi/templates')
| -rw-r--r-- | cgi/templates/display.html.ep | 59 | ||||
| -rw-r--r-- | cgi/templates/infoscreen.html.ep | 188 | ||||
| -rw-r--r-- | cgi/templates/main.html.ep | 67 |
3 files changed, 8 insertions, 306 deletions
diff --git a/cgi/templates/display.html.ep b/cgi/templates/display.html.ep index 02f974c..e65fdc9 100644 --- a/cgi/templates/display.html.ep +++ b/cgi/templates/display.html.ep @@ -3,62 +3,11 @@ <head> <title><%= $title %></title> <meta charset="utf-8"> - <style type="text/css"> - - @font-face { - font-family: VRRR; - src: url('/VRRR.ttf'); - } - - body { - font-family: VRRR; - background-color: #000000; - color: #<%= join(q{}, map { sprintf('%02x', $_) } @{$color} ) %>; - font-size: <%= $scale * 100 %>%; - } - - div.outer { - width: 12em; - margin-left: auto; - margin-right: auto; - } - - div.row { - position: relative; - margin-bottom: 0; - margin-top: 0; - padding-bottom: 0; - padding-top: 0; - width: 12em; - height: 0.68em; - } - - div.row div { - overflow: hidden; - position: absolute; - height: 100%; - } - - div.line { - left: 0; - width: 13%; - } - - div.dest { - left: 14%; - width: 67%; - } - - div.time { - right: 0; - width: 19%; - text-align: right; - } - - </style> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> + %= stylesheet '/display.css' + %= javascript '/jquery-2.1.1.min.js' </head> -<body> +<body style="color: #<%= join(q{}, map { sprintf('%02x', $_) } @{$color} ) %>; + font-size: <%= $scale * 100 %>%;"> <div class="outer"> % for my $d (@{$departures}) { diff --git a/cgi/templates/infoscreen.html.ep b/cgi/templates/infoscreen.html.ep index f94e47f..47c435c 100644 --- a/cgi/templates/infoscreen.html.ep +++ b/cgi/templates/infoscreen.html.ep @@ -7,192 +7,8 @@ <meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/> % } - <style type="text/css"> - - html { - font-family: Sans-Serif; - } - - div.displayclean { - background-color:#F8F8F8; - position:absolute; - top:5px; - left:5px; - border-width:1px 2px; - width:100%; - } - - div.displayclean ul { - position:absolute; - width:100%; - background-color:#F8F8F8; - top: -3px; - left: 0; - - list-style-type:none; - margin:0; - padding:0; - border-bottom: 1px solid #cccccc; - } - - div.displayclean li { - height: 7em; - background-color:#F8F8F8; - display:block; - padding-bottom: 5px; - padding-top: 5px; - 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 .tram { - background-color:#CC0000; - } - - div.displayclean li .sbahn { - background-color:#006E10; - -webkit-border-radius: 30px; - -moz-border-radius: 30px; - border-radius: 30px; - } - - div.displayclean li .ubahn { - background-color:#001090; - } - - div.displayclean li .bus { - background-color:#991199; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - } - - div.displayclean li .route { - color:#444444; - font-size:2.1em; - position:absolute; - top:5px; - left:4.8em; - height:1em; - width: 70%; - overflow: hidden; - } - - div.displayclean li .dest { - color:#000000; - font-weight:bold; - font-size:4em; - position:absolute; - top:0.8em; - left:2.5em; - 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 .time { - color:#000000; - font-size: 2.4em; - position:absolute; - right:5px; - top:5px; - } - - 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> + %= stylesheet '/infoscreen.css' + %= javascript '/jquery-2.1.1.min.js' </head> <body> diff --git a/cgi/templates/main.html.ep b/cgi/templates/main.html.ep index b2fb7ea..cc93bed 100644 --- a/cgi/templates/main.html.ep +++ b/cgi/templates/main.html.ep @@ -3,71 +3,8 @@ <head> <title><%= $title %></title> <meta charset="utf-8"> - <style type="text/css"> - - body { - font-family: Sans-Serif; - } - - iframe { - border: none; - } - - div.about { - margin-top: 2em; - 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' + %= stylesheet '/main.css' + %= javascript '/jquery-2.1.1.min.js' </head> <body> |