diff options
author | dakkar <dakkar@thenautilus.net> | 2024-02-03 17:13:21 +0000 |
---|---|---|
committer | dakkar <dakkar@thenautilus.net> | 2024-02-03 17:13:21 +0000 |
commit | fb1e64ec617774c79e86ba157951dc5df0117016 (patch) | |
tree | 259c8fbe8fec32cccb7594c0545301816ea01f14 | |
parent | nicer icons (diff) | |
download | HomePanel-fb1e64ec617774c79e86ba157951dc5df0117016.tar.gz HomePanel-fb1e64ec617774c79e86ba157951dc5df0117016.tar.bz2 HomePanel-fb1e64ec617774c79e86ba157951dc5df0117016.zip |
some colours
-rw-r--r-- | forecast.html.tt | 211 |
1 files changed, 118 insertions, 93 deletions
diff --git a/forecast.html.tt b/forecast.html.tt index 7b90714..ae3402b 100644 --- a/forecast.html.tt +++ b/forecast.html.tt @@ -1,94 +1,119 @@ [% - USE Number.Format(DECIMAL_DIGITS=1); - cur = f.currently; today = f.daily.data.0; - today_start = f.hourly.data.0.time.clone - today_stop = f.hourly.data.0.time.clone.add('days'=>1); - hourly = f.hourly.slice('from', today_start, 'to', today_stop); - MACRO hours_length(span) BLOCK; - d=span.stop_time.subtract_datetime(span.start_time); - format_duration( - 'pattern','%k', - 'base',span.start_time, - 'normalize',1).format_duration(d); - END; - MACRO time(d) BLOCK; - d.clone.set_time_zone('Europe/London').strftime('%H:%M'); - END; - MACRO minsec_until(d) BLOCK; - dur=d.subtract_datetime(now); - format_duration( - 'pattern','%M:%S', - 'base',now, - 'normalize',1).format_duration(dur); - END; + USE Number.Format(DECIMAL_DIGITS=1); + cur = f.currently; today = f.daily.data.0; + today_start = f.hourly.data.0.time.clone + today_stop = f.hourly.data.0.time.clone.add('days'=>1); + hourly = f.hourly.slice('from', today_start, 'to', today_stop); + MACRO hours_length(span) BLOCK; + d=span.stop_time.subtract_datetime(span.start_time); + format_duration( + 'pattern','%k', + 'base',span.start_time, + 'normalize',1).format_duration(d); + END; + MACRO time(d) BLOCK; + d.clone.set_time_zone('Europe/London').strftime('%H:%M'); + END; + MACRO minsec_until(d) BLOCK; + dur=d.subtract_datetime(now); + format_duration( + 'pattern','%M:%S', + 'base',now, + 'normalize',1).format_duration(dur); + END; -%] <html> <head> <title>Forecast</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh" content="5" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> - body, table { - font-size: 30px; - } - - table { border-collapse: collapse; empty-cells: show } - table td { border: dotted thin black; padding: 3px } - - div.forecast dt { display: none } - div.forecast dd { display: inline; margin: 0; border: 0 } - - .icon img { - width: 2em; height: 2em; - float: left; margin: 0 5px 5px 0; - } - - div.currently, div.next-hour, div.next-day, div.next-week { - width: 24%; - position: absolute; top: 5px; - } - - div.currently { left: 5px } - div.next-hour { left: 25% } - div.next-day { left: 50% } - div.next-week { right: 5px } - - div.today { - position: absolute; top: 8em; left: 5px; - float: left; clear: none; - width: 40%; - margin-right: 5px; - } - - dl.today dt.temperature, dl.today dd.temperature { display: inherit } - dl.today dt.sunrise, dl.today dt.sunset { display: inline } - - div.bus { - position: absolute; left: 38%; top: 10em; - } - - div.bus td.destination { width: 5em } - - div.tube { - position: absolute; left: 5px; top: 20em; - width: 75%; - } - - div.tube table { font-size: 75% } - - div.tube td.status { width: 8em } - div.tube td.details { width: 10em } - - div.timeline { position: absolute; right: 5px; bottom: 5px; } - div.timeline table { font-size: 75% } - - .stripes { - text-align: center; - border: solid thin black; - } - .stripes span { - vertical-align: middle; - } + body, table { + font-size: 30px; + } + + table { border-collapse: collapse; empty-cells: show } + table td { border: dotted thin black; padding: 3px } + + div.forecast dt { display: none } + div.forecast dd { display: inline; margin: 0; border: 0 } + + .icon img { + height: 2em; + float: left; margin: 0 5px 5px 0; + } + + div.currently, div.next-hour, div.next-day, div.next-week { + width: 24%; + position: absolute; top: 5px; + } + + div.currently { left: 5px } + div.next-hour { left: 25% } + div.next-day { left: 50% } + div.next-week { right: 5px } + + div.today { + position: absolute; top: 8em; left: 5px; + float: left; clear: none; + width: 40%; + margin-right: 5px; + } + + dl.today dt.temperature, dl.today dd.temperature { display: inherit } + dl.today dt.sunrise, dl.today dt.sunset { display: inline } + + td.line { + font-family: sans; + font-weight: bold; + text-transform: uppercase; + text-align: center; + } + + div.bus { + position: absolute; left: 38%; top: 10em; + } + + div.bus td.line { background-color: #DC241F; color: #fff } + + div.bus td.destination { width: 5em } + + div.tube { + position: absolute; left: 5px; top: 20em; + width: 75%; + } + + .bakerloo { background-color: #B26300; color: #fff; } + .central { background-color: #DC241F; color: #fff; } + .circle { background-color: #FFC80A; color: #fff; } + .district { background-color: #007D32; color: #fff; } + .dlr { background-color: #00AFAD; color: #fff; } + .elizabeth { background-color: #60399E; color: #fff; } + .hammersmith-city { background-color: #F589A6; color: #fff; } + .jubilee { background-color: #838D93; color: #fff; } + .london-overground { background-color: #FA7B05; color: #fff; } + .metropolitan { background-color: #9B0058; color: #fff; } + .northern { background-color: #000000; color: #fff; } + .piccadilly { background-color: #0019A8; color: #fff; } + .victoria { background-color: #039BE5; color: #fff; } + .waterloo-city { background-color: #76D0BD; color: #fff; } + + div.tube table { font-size: 75% } + + div.tube td.status { width: 8em } + div.tube td.details { width: 10em } + + div.timeline { position: absolute; right: 5px; bottom: 5px; } + div.timeline table { font-size: 75% } + + .stripes { + text-align: center; + border: solid thin black; + } + .stripes span { + vertical-align: middle; + } </style> </head> <body> @@ -151,11 +176,11 @@ </thead> <tbody> [% FOREACH p IN b.predictions %] - <tr> - <td class="line">[% p.lineName %]</td> - <td class="destination">[% p.destinationName %]</td> - <td class="eta">[% minsec_until(p.expectedArrival) %]</td> - </tr> + <tr> + <td class="line">[% p.lineName %]</td> + <td class="destination">[% p.destinationName %]</td> + <td class="eta">[% minsec_until(p.expectedArrival) %]</td> + </tr> [% END %] </tbody> </table> @@ -178,11 +203,11 @@ </thead> <tbody> [% FOREACH line IN t.lines %] - <tr> - <td class="line">[% line.name %]</td> - <td class="status">[% line.status.statusSeverityDescription %]</td> - <td class="details">[% line.status.reason %]</td> - </tr> + <tr> + <td class="line [% line.id %]">[% line.name %]</td> + <td class="status">[% line.status.statusSeverityDescription %]</td> + <td class="details">[% line.status.reason %]</td> + </tr> [% END %] </tbody> </table> |