[%
cur = f.currently; today = f.daily.data.0;
MACRO hours_length BLOCK;
span.stop_time.subtract_datetime(span.start_time).in_units('hours');
END;
-%]
<html>
<head>
<title>Forecast</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.icon img {
width: 2em; height: 2em;
float: left;
}
.timeline {
position: relative;
}
.stripes {
position: absolute;
text-align: center;
border: solid thin black;
height: 2em; line-height: 2em;
}
.stripes span {
font-size: 30%;
vertical-align: middle;
}
.timeline .summary > span {
top: 0;
}
.timeline .hours > span {
top: 2em;
}
.timeline .temperature > span {
top: 4em;
}
</style>
</head>
<body>
<div class="currently">
<h2>Currently</h2>
<span class="icon"><img src="[% icon_for(cur.icon) %]" alt="[% cur.icon %]" /></span>
<dl class="currently">
<dt class="temperature">Temperature:</dt>
<dd class="temperature">[% cur.temperature %]°</dd>
<dt class="summary">Summary:</dt>
<dd class="summary">[% cur.summary %]</dd>
</dl>
</div>
<div class="next-hour">
<h2>Next hour</h2>
<span class="icon"><img src="[% icon_for(f.minutely.icon) %]" alt="[% f.minutely.icon %]" /></span>
<dl class="next-hour">
<dt class="summary">Summary:</dt>
<dd class="summary">[% f.minutely.summary %]</dd>
</dl>
</div>
<div class="next-day">
<h2>Next 24 hours</h2>
<span class="icon"><img src="[% icon_for(f.hourly.icon) %]" alt="[% f.hourly.icon %]" /></span>
<dl class="next-day">
<dt class="summary">Summary:</dt>
<dd class="summary">[% f.hourly.summary %]</dd>
</dl>
</div>
<div class="next-week">
<h2>Next 7 days</h2>
<span class="icon"><img src="[% icon_for(f.daily.icon) %]" alt="[% f.daily.icon %]" /></span>
<dl class="next-week">
<dt class="summary">Summary:</dt>
<dd class="summary">[% f.daily.summary %]</dd>
</dl>
</div>
<div class="days">
<div class="day today">
<span class="icon"><img src="[% icon_for(today.icon) %]" alt="[% today.icon %]" /></span>
<dl class="today">
<dt class="summary">Summary:</dt>
<dd class="summary">[% today.summary %]</dd>
<dt class="temperature min">Min temperature:</dt>
<dd class="temperature min">[% today.temperatureMin %]° <span class="time">[% today.temperatureMinTime.strftime('%H:%M') %]</span></dd>
<dt class="temperature max">Max temperature:</dt>
<dd class="temperature max">[% today.temperatureMax %]° <span class="time">[% today.temperatureMaxTime.strftime('%H:%M') %]</span></dd>
<dt class="sunrise">Sunrise:</dt>
<dd class="sunrise"><span class="time">[% today.sunriseTime.strftime('%H:%M') %]</span></dd>
<dt class="sunset">Sunset:</dt>
<dd class="sunset"><span class="time">[% today.sunsetTime.strftime('%H:%M') %]</span></dd>
</dl>
<div class="timeline">
<div class="summary">
[% left=0 ;FOR span IN f.hourly.spans_by_string('summary');
width=3*hours_length(span=span) %]
<span class="stripes" style="width: [% width %]em; left: [% left %]em"><span>[% span.value %] [% span.start_time %] [% span.stop_time %]</span></span>
[% left=left+width; END %]
</div>
<div class="hours">
[% left=0; FOR span IN [ 0 .. 23 ] %]
<span class="stripes" style="width: 3em; left: [% left %]em"><span>[% span %]</span></span>
[% left=left+3; END %]
</div>
<div class="temperature">
[% left=0; FOR h IN f.hourly.data %]
<span class="stripes" style="width: 3em; left: [% left %]em"><span>[% h.temperature %]°</span></span>
[% left=left+3; END %]
</div>
</div>
</div>
</div>
</body>
</html>