templates/weather.tmpl: add bidaily forecast

2 files changed, 63 insertions, 6 deletions

diff --git a/static/peach.css b/static/peach.css
index cb5b889..404400e 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -80,7 +80,7 @@ body {
 .temperature-forecast-container .forecast {
     font-size: 1.8em;
     font-weight: 500;
-    color: rgb(90,90,90);
+    color: rgb(10,10,10);
     text-align: center;
 }
 
@@ -89,30 +89,66 @@ body {
     flex-direction: row;
     justify-content: center;
     column-gap: 10px;
-    color: rgb(90,90,90);
+    color: rgb(10,10,10);
 }
 
+/**  Q2H Timeline **/
 .timeline-container {
     display: flex;
     justify-content: center;
 }
 
-.periods-container {
+.timeline-container .periods-container {
     width: 440px;
     display: flex;
     justify-content: space-around;
     align-content: space-around;
 }
 
-.periods-container .period  .temperature {
+.timeline-container .periods-container .period  .temperature {
     font-size: 1.2em;
 }
 
-.periods-container .period  .hour {
+.timeline-container .periods-container .period  .hour {
     font-size: 0.8em;
-    color: rgb(150,150,150)
+    color: rgb(0,0,0);
+}
+
+/** BiDaily Timeline **/
+.bd-timeline-container {
+    display: flex;
+    justify-content: center;
+}
+
+.bd-timeline-container .periods-container {
+    width: 440px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+}
+
+.bd-timeline-container .periods-container  .period {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1px;
+    border-radius: 3px;
+    border: 2px solid rgb(0,0,0);
+    padding: 10px 10px;
+}
+
+.bd-timeline-container .periods-container  .period .name {
+    font-size: 1.5em;
+}
+
+.bd-timeline-container .periods-container  .period .temperature {
+    font-size: 1.2em;
+}
+
+.bd-timeline-container .periods-container  .period .forecast {
+    font-size: 0.9em;
 }
 
+/** Search **/
 .search-link-container {
     position: absolute;
     right: 10px;
diff --git a/templates/weather.tmpl b/templates/weather.tmpl
index 60257fa..d23bc99 100644
--- a/templates/weather.tmpl
+++ b/templates/weather.tmpl
@@ -61,6 +61,27 @@
 				</div>
 				{{ end }}
 
+
+				{{ if .BiDailyTimeline }}
+				<div class="bd-timeline-container">
+					<div class="periods-container">
+						{{ range .BiDailyTimeline.Periods }}
+						<div class="period">
+							<div class="name">
+								{{ .Name }}
+							</div>
+							<div class="temperature">
+								{{.Temperature}}{{.TemperatureUnit}}
+							</div>
+							<div class="forecast">
+								{{ .Forecast }}
+							</div>
+						</div>
+						{{ end }}
+					</div>
+				</div>
+				{{ end }}
+
 				<div class="search-link-container">
 					<a href="/search">
 						➤