mirror of
https://github.com/wezm/wezm.net.git
synced 2024-12-22 20:19:54 +00:00
60 lines
1.8 KiB
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}}°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}}°C</span> at
|
|
<time datetime="{{isoDate min/time}}">{{time min/time}}</time>
|
|
</div>
|
|
<div class="max">
|
|
Max <span class="temperature">{{max/temperature}}°C</span> at
|
|
<time datetime="{{isoDate max/time}}">{{time max/time}}</time>
|
|
</div>
|
|
</div>
|
|
{{/extremes}}
|
|
</section>
|
|
</script>
|