Mercurial > personal > weather-server

diff weather_server/templates/location.html @ 8:d54155a199d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Improve template; add stylesheet.
author Paul Fisher <paul@pfish.zone>
date Sun, 29 Sep 2019 20:32:48 -0400
parents cda47993a193
children 9e6289598d8c
line wrap: on
line diff
--- a/weather_server/templates/location.html	Sun Sep 29 15:23:26 2019 -0400
+++ b/weather_server/templates/location.html	Sun Sep 29 20:32:48 2019 -0400
@@ -1,15 +1,43 @@
 <!doctype html>
 <html>
     <head>
-        <title>Weather for {{ location.name }}</title>
+        <title>{{ location.name }}</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link
+            rel="stylesheet"
+            href="{{ url_for('static', filename='style.css') }}">
     </head>
     <body>
+        <h1><span>{{ location.name }} conditions</span></h1>
         {% if last_reading %}
-            Temperature: {{ last_reading.temp_f }}<br>
-            Dew point: {{ last_reading.dew_point_f }}<br>
-            As of: {{ date }}
+            <p class="important" id="temp">
+                <span class="key">Temperature</span>
+                <span class="value">
+                    <span class="pad"> </span>
+                    <span class="n">
+                        {{- last_reading.temp_f|round|int -}}
+                    </span>
+                    <span class="unit">&deg;F</span>
+                </span>
+            </p>
+            <p class="important" id="dewpoint">
+                <span class="key">Dew point</span>
+                <span class="value">
+                    <span class="pad"> </span>
+                    <span class="n">
+                        {{- last_reading.dew_point_f|round|int -}}
+                    </span>
+                    <span class="unit">&deg;F</span>
+                </span>
+            </p>
+            <p id="timestamp">
+                <span>
+                    <span class="key">Reported</span>
+                    <span class="value">{{ "{:%H:%M}".format(date) }}</span>
+                </span>
+            </p>
         {% else %}
-            No weather yet
+            <p id="big-question-mark">?</p>
         {% endif %}
     </body>
 </html>