wezm.net/v1/content/weather.html

60 lines
1.8 KiB
HTML

<section class="temperature">
<h2>Temperature</h2>
<div class="loading"><img src="/images/spinner.gif" width="64" height="64" alt="Loading" /> Loading</div>
<div class="temperature">
<h3>History <button id="today">Today</button></h3>
<div class="chart"></div>
</div>
<section class="extremes"></section>
</section>
<section class="rain">
<h2>Rainfall</h2>
<h3>Today</h3>
<p>Total: <span class="total rain">--</span> mm</p>
<div class="rainfall today chart"></div>
<h3>Last 7 Days</h3>
<div class="rainfall week chart"></div>
</section>
<small>Forecast icons by <a href="http://lavana.deviantart.com/art/Flat-Weather-Icons-32021664">LavAna</a>. Data from my <a href="/personal/2010/09/weather-station/">weather station</a>.</small>
<script id="current-template" type="text/x-handlebars-template">
<div id="current">
<figure class="forecast">
<img src="/images/weather/{{forecast}}.png" width="48" height="48" alt="{{forecast}}" />
<figcaption>Forecast</figcaption>
</figure>
<div class="temperature">
<div class="current temperature">{{temperature}}&deg;C</div>
<time datetime="{{isoDate timestamp}}">{{datetime timestamp}}</time>
</div>
</div>
</script>
<script id="extremes-template" type="text/x-handlebars-template">
<section class="extremes">
<h3>Extremes</h3>
{{#extremes}}
<div class="extreme">
<time datetime="{{isoDate date}}" class="day">{{day date}}</time>
<div class="min">
Min <span class="temperature">{{min/temperature}}&deg;C</span> at
<time datetime="{{isoDate min/time}}">{{time min/time}}</time>
</div>
<div class="max">
Max <span class="temperature">{{max/temperature}}&deg;C</span> at
<time datetime="{{isoDate max/time}}">{{time max/time}}</time>
</div>
</div>
{{/extremes}}
</section>
</script>