~pvsr/weather

weather/templates/weather.html -rw-r--r-- 1.6 KiB
db8a58a0Peter Rice Reduce temperature graph from 48 to 36 hours 9 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<title>Weather for {{ current_location.long_name }}</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

<h1>Weather for {{ current_location.long_name }}</h1>

<nav>
{% for short_name in available_locations %}
<span>
{% if short_name == current_location.short_name %}
<span class="pseudo-link">{{ short_name }}</span>
{% else %}
<a class="no-visited" href="/{{ short_name }}">{{ short_name }}</a>
{% endif %}
</span>
{% endfor %}
</nav>

{% if alerts %}
{% for alert in alerts %}
<!-- TODO differentiate by severity -->
<div class="severe-alert">
  <h2>{{ alert.event }} until {{ alert.expires }}</h2>
  <p>{{ alert.description }}</p>
</div>
{% endfor %}
{% endif %}

<div class="ct-chart"></div>
<script>
{% include 'chart.js' %}
</script>
<!-- TODO noscript>
  {% for hour in hourly %}
  <div>
    <p>{{ hour.startTime }}</p>
    <p>{{ hour.fahrenheit }}°F / {{ hour.celsius }}°C</p>
    <p>{{ hour.shortForecast }}</p>
    <p>{{ hour.endTime }}</p>
  </div>
{% endfor %}
</noscript -->

<div class="weather-container">
  {% for period in forecast %}
  <div>
    <h1>{{ period.name }}</h1>
    <h2>{{ period.fahrenheit }}°F / {{ period.celsius }}°C</h2>
    <img src="{{ period.icon | replace('medium', 'large') }}" alt="weather icon"/>
    <p>{{ period.detailedForecast }}</p>
  </div>
  {% endfor %}
</div>

<footer><a href="https://git.sr.ht/~pvsr/weather">Source code</a></footer>