no clue how this template looks just yet

main.py

@@ -42,19 +42,6 @@ def format_datetime(dt):
     return f"{format_date(dt)} {format_time(dt)}"
 
 
-def pollen_desc(index):
-    if index < 2.5:
-        return f"{index} l"
-    elif index < 4.9:
-        return f"{index} l-m"
-    elif index < 7.3:
-        return f"{index} m"
-    elif index < 9.7:
-        return f"{index} m-h"
-    else:
-        return f"{index} h"
-
-
 def relative_day_to_date(rel_dt):
     dt = datetime.now()
     day = timedelta(days=1)
@@ -69,6 +56,24 @@ def relative_day_to_date(rel_dt):
             return passthrough
 
 
+def build_daily_data(date, pollen_periods, weather_periods):
+    daily_data = {}
+    if date in pollen_periods:
+        daily_data["pollen"] = pollen_periods[date]["index"]
+    if date in weather_periods:
+        weather_data = weather_periods[date]
+        daily_data.update({
+            "low": weather_data["low"],
+            "high": weather_data["high"],
+            "desc": weather_data["desc"],
+            "humidity": weather_data["humidity"],
+            "sunrise": weather_data["sunrise"],
+            "sunset": weather_data["sunset"],
+            "pressure": weather_data["pressure"],
+        })
+    return daily_data
+
+
 def fallback_handler(func):
     @functools.wraps(func)
     async def wrapper(*args, **kwargs):
@@ -106,10 +111,11 @@ async def fetch_pollen(zipcode):
                 ),
                 "periods": [
                     {
-                        "index": pollen_desc(d["Index"]),
+                        "index": int(d["Index"] / 12. * 100),
                         "period": relative_day_to_date(d["Type"]),
                     }
                     for d in data["Location"]["periods"]
+                    if d["Type"].lower().strip() in ["today", "tomorrow"]
                 ],
             }
         ]
@@ -122,7 +128,7 @@ async def fetch_weather(lat, lon, weather_api_key):
         response = await client.get(url)
         response.raise_for_status()
         data = response.json()
-        current, periods = data["current"], data["daily"][:3]
+        current, periods = data["current"], data["daily"][:2]
         return [
             {
                 "forecast_date": format_datetime(datetime.fromtimestamp(current["dt"])),
@@ -163,8 +169,49 @@ async def read_root(token: str):
         fetch_weather(CONFIG["lat"], CONFIG["lon"], CONFIG["weather_api_key"]),
     )
 
-    return {
-        "fetched_at": format_datetime(datetime.now()),
-        "pollen": pollen,
-        "weather": weather,
+    pollen_periods = {p["period"]: p for p in pollen[0]["periods"]} if pollen and pollen[0]["periods"] else {}
+    weather_periods = {p["period"]: p for p in weather[0]["periods"]} if weather and weather[0]["periods"] else {}
+    
+    # Add current weather data as a "current" period
+    if weather and weather[0]:
+        data = weather[0]
+        weather_periods["current"] = {
+            "period": "current",
+            "temp": data["current_temp"],
+            "feels_like": data["current_feels_like"],
+            "humidity": data["current_humidity"],
+            "pressure": data["current_pressure"],
+            "desc": data["current_desc"],
+            "sunrise": data["sunrise"],
+            "sunset": data["sunset"]
         }
+    
+    today_date = format_date(datetime.now())
+    tomorrow_date = format_date(datetime.now() + timedelta(days=1))
+    
+    result = {
+        "fetched_at": format_datetime(datetime.now()),
+        "current": {},
+        "today": {},
+        "tomorrow": {},
+    }
+    
+    if "current" in weather_periods:
+        weather_data = weather_periods["current"]
+        result["current"] = {
+            "temp": weather_data["temp"],
+            "feels_like": weather_data["feels_like"],
+            "desc": weather_data["desc"],
+            "humidity": weather_data["humidity"],
+            "pressure": weather_data["pressure"]
+        }
+    
+    today_data = build_daily_data(today_date, pollen_periods, weather_periods)
+    if today_data:
+        result["today"] = today_data
+    
+    tomorrow_data = build_daily_data(tomorrow_date, pollen_periods, weather_periods)
+    if tomorrow_data:
+        result["tomorrow"] = tomorrow_data
+    
+    return result

template.liquid

@@ -1,94 +1,73 @@
-<div class="columns">
-  <div class="column">
-    <span class="title title--small text--gray-4 text--center">fetched: {{ fetched_at }}</span>
-    {% for pollen in pollen %}
-    <span class="title title--small bg--black text--white text--center">pollen index</span>
-    <div class="richtext gap--xxsmall">
-      <p class="content content--small">forecast at {{pollen.forecast_date}}</p>
+<div>
+  <div class="flex flex--row">
+    <div>
+      <span class="value">{{ current.temp }}°F</span>
+      <span class="label text--gray-4">feels like {{ current.feels_like }}°F</span>
+    </div>
+    <div class="stretch text--right">
+      <span class="value">{{ current.desc }}</span>
+      <span class="label text--gray-4">conditions</span>
+    </div>
   </div>
-      <table class="table table--condensed">
-      <thead>
-        <tr>
-          {% for period in pollen.periods %}
-          <th><span class="label label--small text--center">{{period.period}}</span></th>
-          {% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          {% for period in pollen.periods %}
-          <td><span class="label label--small text--center">{{period.index}}</span></td>
-          {% endfor %}
-        </tr>
-      </tbody>
-    </table>
-    {% endfor %}
 
-    {% for weather in weather %}
-    <span class="title title--small bg--black text--white text--center">weather forecast</span>
-    <div class="richtext gap--xxsmall">
-      <p class="content content--small">forecast at {{weather.forecast_date}}</p>
+  <div class="flex flex--row">
+    <div>
+      <span class="value">{{ current.humidity }}%</span>
+      <span class="label text--gray-4">humidity</span>
     </div>
-      <table class="table table--condensed">
-      <thead>
-        <tr>
-          <th><span class="label label--small w--16"></span></th>
-          {% for period in weather.periods %}
-          <th><span class="label label--small w--16 text--center">{{period.period}}</span></th>
-          {% endfor %}
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><span class="label label--small text--right">low</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.low}} F</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">high</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.high}} F</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">humidity</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.humidity}}%</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">pressure</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.pressure}}</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">sunrise</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.sunrise}}</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">sunset</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small text--center">{{period.sunset}}</span></td>
-          {% endfor %}
-        </tr>
-        <tr>
-          <td><span class="label label--small text--right">desc</span></td>
-          {% for period in weather.periods %}
-          <td><span class="label label--small h--10 clamp--none text--center">{{period.desc}}</span></td>
-          {% endfor %}
-        </tr>
-      </tbody>
-    </table>
-    {% endfor %}
+    <div class="stretch text--center">
+      <span class="value">{{ current.pressure }}</span>
+      <span class="label text--gray-4">pressure</span>
     </div>
-  <div class="column">
-    {{ Content for column 2 }}
-  </div>
-  <div class="column">
-    {{ Content for column 3 }}
+    <div class="text--right">
+      <span class="value">{{ fetched_at }}</span>
+      <span class="label text--gray-4">date</span>
+    </div>
+  </div>
+</div>
+
+<div class="border--h-1 pt--4"></div>
+
+<div class="pt--4">
+  <div class="flex flex--row">
+    {% assign periods = "today,tomorrow" | split: "," %}
+    {% for period in periods %}
+    {% assign data = [period] %}
+      <div class="stretch ">
+        <div>
+          <div class="label label--inverted text--center">{{ period }}</div>
+
+          <div class="pt--2 text--center">
+            <span class="value">
+              {{ data.low }}°F / {{ data.high }}°F
+            </span>
+          </div>
+
+          <div class="text--center">
+            <span class="value">{{ data.desc }}</span>
+          </div>
+
+          <div class="text--center">
+            <span class="value">{{ data.sunrise }} - {{ data.sunset }}</span>
+          </div>
+
+          <div class="flex flex--row">
+            <div class="text--center">
+              <span class="value">{{ data.humidity }}%</span>
+              <span class="label text--gray-4">humidity</span>
+            </div>
+            <div class="stretch text--center">
+              <span class="value">{{ data.pressure }}</span>
+              <span class="label text--gray-4">pressure</span>
+            </div>
+            <div class="text--center">
+              <span class="value">{{ data.pollen }}%</span>
+              <span class="label text--gray-4">pollen</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    {% endfor %}
   </div>
 </div>