aboutsummaryrefslogtreecommitdiff
path: root/src/templates
diff options
context:
space:
mode:
authorSam Chudnick <sam@chudnick.com>2023-06-10 06:31:09 -0400
committerSam Chudnick <sam@chudnick.com>2023-06-10 06:31:09 -0400
commit80e5ebc04346b1aba37158dedbdd4045c0a7c042 (patch)
treebddff185f21dde037d39973f82b4a5a8997ff7c9 /src/templates
parent6fa3d04aad627ffa4786b91acc24e4f3e8b70312 (diff)
Moved files to src directory. Continued work on frontend.
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/base.html21
-rw-r--r--src/templates/index.html15
-rw-r--r--src/templates/location.html15
-rw-r--r--src/templates/weather.html91
4 files changed, 142 insertions, 0 deletions
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 0000000..a909aca
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,21 @@
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>{% block title %} {% endblock %}</title>
7 <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
8 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css' ) }}">
9 </head>
10 <body>
11
12 <div class="container">
13 {% block content %} {% endblock %}
14 </div>
15
16 <footer>
17 {% block footer %}
18 {% endblock %}
19 </footer>
20 </body>
21</html>
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..da2a19a
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,15 @@
1{% extends 'base.html' %}
2{% block content %}
3<div class=content-noborder>
4 <div class=index-title>
5 <h1>Enter a Location</h1>
6 </div>
7 <div class=index-form>
8 <form method="post">
9 {{ form.csrf_token }}
10 {{ form.location }}
11 {{ form.submit() }}
12 </form>
13 </div>
14</div>
15{% endblock %}
diff --git a/src/templates/location.html b/src/templates/location.html
new file mode 100644
index 0000000..fa691ea
--- /dev/null
+++ b/src/templates/location.html
@@ -0,0 +1,15 @@
1{% extends 'base.html' %}
2{% block content %}
3<div class=content-noborder>
4 <div class=index-title>
5 <h1>Select a Location</h1>
6 </div>
7 <div class=index-form>
8 <form method="post">
9 {{ form.csrf_token }}
10 {{ form.location }}
11 {{ form.submit() }}
12 </form>
13 </div>
14</div>
15{% endblock %}
diff --git a/src/templates/weather.html b/src/templates/weather.html
new file mode 100644
index 0000000..64aabbd
--- /dev/null
+++ b/src/templates/weather.html
@@ -0,0 +1,91 @@
1{% extends 'base.html' %}
2{% block content %}
3<div class=content>
4 <div class=searchbar>
5 <form method="post">
6 {{ form.csrf_token }}
7 {{ form.location }}
8 {{ form.submit() }}
9 </form>
10 </div>
11 <div class=current>
12 {% set is_day = data["current_weather"]["is_day"] %}
13 {% set weather_code = data["current_weather"]["weathercode"] %}
14 <div class=current-info>
15 <div class=current-weather>{{ weather_codes[weather_code] }}</div>
16 <div class=current-temp> {{ data["current_weather"]["temperature"]}}°F </div>
17 <div class=current-wind>
18 Wind: {{ data["current_weather"]["windspeed"] }} MPH
19 <img class=wind-icon src="/static/icons/directions/{{get_direction_icon(data["current_weather"]["winddirection"])}}.svg">
20 </div>
21 <div class=current-sunrise>Sunrise: {{ data["daily"]["sunrise"][0] }} </div>
22 <div class=current-sunset>Sunset: {{ data["daily"]["sunset"][0] }} </div>
23 </div>
24 <div class=current-icon>
25 <img class=weather-icon src="/static/icons/svg/{{ weather_icons[weather_code][is_day]}}.svg" width=100px height=100px>
26 </div>
27 </div>
28 <div class=forecast-header> <h2 class=forecast-header>Hourly Forecast</h2> </div>
29 <div class=hourly>
30 {% for i in range(hour, hour + 24) %}
31 <div class=hourly-box>
32 <div class=hourly-info>
33 <div class=hourly-time><strong>{{ data["hourly"]["time"][i] }}</strong></div>
34 <div class=hourly-weather>
35 {{ weather_codes[data["hourly"]["weathercode"][i]] }}
36 {% if data["hourly"]["weathercode"][i] > 50 %}
37 ({{ data["hourly"]["precipitation"][i] }}in, {{ data["hourly"]["precipitation_probability"][i] }}%)
38 {% endif %}
39 </div>
40 <div class=hourly-temp>{{ data["hourly"]["temperature_2m"][i]}}°F</div>
41 <div class=hourly-humidity>Humidity: {{ data["hourly"]["relativehumidity_2m"][i] }}%</div>
42 <div class=hourly-wind>
43 Wind: {{ data["hourly"]["windspeed_10m"][i] }}MPH
44 <img class=wind-icon src="/static/icons/directions/{{get_direction_icon(data["hourly"]["winddirection_10m"][i])}}.svg">
45 </div>
46 </div>
47 <div class=hourly-icon>
48 {% set time = datetime.datetime.strptime(data["hourly"]["time"][i], "%a %x %I:%M %p") %}
49 {% set sunrise = datetime.datetime.strptime(data["daily"]["sunrise"][0], "%I:%M %p").replace(year=time.year, month=time.month, day=time.day) %}
50
51 {% set sunset = datetime.datetime.strptime(data["daily"]["sunset"][0], "%I:%M %p").replace(year=time.year, month=time.month, day=time.day) %}
52 {% set is_day = 1 %}
53 {% if time > sunrise and time < sunset %}
54 {% set is_day = 0 %}
55 {% endif %}
56 {% set weather_code = data["hourly"]["weathercode"][i] %}
57 <img class=weather-icon src="/static/icons/svg/{{weather_icons[weather_code][is_day]}}.svg" width=100px height=100px>
58 </div>
59 </div>
60 {% endfor %}
61 </div>
62 <div class=forecast-header>
63 <h2 class=forecast-header>Daily Forecast</h2>
64 </div>
65 <div class=daily>
66 {% for i in range(7) %}
67 <div class=daily-box>
68 <div class=daily-info>
69 <div class=daily-time><strong>{{ data["daily"]["time"][i] }}</strong></div>
70 <div class=daily-weather>
71 {{ weather_codes[data["daily"]["weathercode"][i]] }}
72 {% if data["daily"]["weathercode"][i] > 50 %}
73 ({{ data["daily"]["precipitation_sum"][i] }}in, {{ data["daily"]["precipitation_probability_max"][i] }}%)
74 {% endif %}
75 </div>
76 <div class=daily-high>High: {{ data["daily"]["temperature_2m_max"][i] }}°F</div>
77 <div class=daily-low>Low: {{ data["daily"]["temperature_2m_min"][i] }}°F</div>
78 <div class=daily-sunrise>Sunrise: {{ data["daily"]["sunrise"][i] }}</div>
79 <div class=daily-sunset>Sunset: {{ data["daily"]["sunset"][i] }}</div>
80 </div>
81 <div class=daily-icon>
82 {% set weather_code = data["daily"]["weathercode"][i] %}
83 <img class=weather-icon src="/static/icons/svg/{{ weather_icons[weather_code][0]}}.svg" width=100px height=100px>
84 </div>
85 </div>
86 {% endfor %}
87 </div>
88
89</div>
90{% endblock %}
91