Added a new ui

HomeApi/Extensions/ContractExtensions.cs

@@ -53,6 +53,8 @@ public static class ContractExtensions
                     So2 = weather.Current.Air_Quality.So2, // Sulfur Dioxide
                     Pm10 = weather.Current.Air_Quality.Pm10, // Particulate Matter 10 micrometers or less
                     Pm2_5 = weather.Current.Air_Quality.Pm2_5, // Particulate Matter 2.5 micrometers or less
+                    Us_Epa_Index = weather.Current.Air_Quality.Us_Epa_Index, // US EPA Air Quality Index
+                    Gb_Defra_Index = weather.Current.Air_Quality.Gb_Defra_Index, // UK DEFRA Air Quality Index
                 },
                 AuroraProbability = new Probability
                 {
@@ -96,6 +98,8 @@ public static class ContractExtensions
             MaxTempC = day.Day.Maxtemp_C,
             MinTempC = day.Day.Mintemp_C,
             DayIcon = day.Day.Condition.Icon,
+            IconCode = day.Day.Condition.Code,
+            ChanceOfRain = day.Day.Daily_Chance_Of_Rain,
             Astro = new Models.Astro
             {
                 Moon_Illumination = day.Astro.Moon_Illumination,
@@ -141,7 +145,8 @@ public static class ContractExtensions
             DepartureTime = $"{dep.Date} {dep.Time}",
             Direction = dep.Direction,
             JourneyDetailRef = dep.JourneyDetailRef?.Ref,
-            Notes = dep.Notes?.Note?.Select(n => n.Value).ToList() ?? []
+            Notes = dep.Notes?.Note?.Select(n => n.Value).ToList() ?? [],
+            InternalTransportationName = dep.ProductAtStop?.InternalName
         }).ToList();
     }
 }

HomeApi/Handlers/ImageGeneration.cs

@@ -1,3 +1,4 @@
+using System.Dynamic;
 using System.Reflection;
 using HomeApi.Models.Configuration;
 using MediatR;
@@ -43,13 +44,17 @@ public static class ImageGeneration
             if(weather is null)
                 throw new Exception("Weather data not found");
             
-            var engine = new RazorLightEngineBuilder().SetOperatingAssembly(Assembly.GetExecutingAssembly())
+            var engine = new RazorLightEngineBuilder()
-                .UseEmbeddedResourcesProject(typeof(ImageGeneration)).UseMemoryCachingProvider().Build();
+                .SetOperatingAssembly(Assembly.GetExecutingAssembly())
-            var path = Path.Combine(_env.WebRootPath, "index.cshtml");
+                .UseEmbeddedResourcesProject(typeof(ImageGeneration))
+                .UseMemoryCachingProvider()
+                .Build();
             
-            var template = await File.ReadAllTextAsync(path);
+            var path = Path.Combine(_env.WebRootPath, "index.cshtml");
 
-            var result = await engine.CompileRenderStringAsync("templateKey", template, model);
+            var template = await File.ReadAllTextAsync(path, cancellationToken);
+
+            var result = await engine.CompileRenderStringAsync("templateKey", template, model, viewBag: new ExpandoObject());
 
             return await CreateImage(result);
         }
@@ -85,15 +90,15 @@ public static class ImageGeneration
         // Reduce to 3-color e-paper palette
         image.ProcessPixelRows(accessor =>
         {
-            for (int y = 0; y < accessor.Height; y++)
+            for (var y = 0; y < accessor.Height; y++)
             {
                 var row = accessor.GetRowSpan(y);
-                for (int x = 0; x < row.Length; x++)
+                for (var x = 0; x < row.Length; x++)
                 {
                     var pixel = row[x];
 
                     // Compute perceived brightness (gray)
-                    float brightness = 0.299f * pixel.R + 0.587f * pixel.G + 0.114f * pixel.B;
+                    var brightness = 0.299f * pixel.R + 0.587f * pixel.G + 0.114f * pixel.B;
 
                     if (pixel.R > 150 && pixel.G < 80 && pixel.B < 80) // RED threshold
                     {

HomeApi/HomeApi.csproj

@@ -6,6 +6,7 @@
         <ImplicitUsings>enable</ImplicitUsings>
         <DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
         <PreserveCompilationContext>true</PreserveCompilationContext>
+        <EnableDefaultContentItems>false</EnableDefaultContentItems>
     </PropertyGroup>
 
     <ItemGroup>
@@ -24,4 +25,10 @@
         <Link>.dockerignore</Link>
       </Content>
     </ItemGroup>
+
+    <ItemGroup>
+        <Content Include="wwwroot\index.cshtml">
+            <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+        </Content>
+    </ItemGroup>
 </Project>

HomeApi/Integration/Client/WeatherClient/WeatherClient.cs

@@ -1,16 +1,15 @@
 using HomeApi.Models.Response;
-
-namespace HomeApi.Integration.Client;
-
 using Refit;
 
+namespace HomeApi.Integration.Client.WeatherClient;
+
 public interface IWeatherClient
 {
     [Get("/forecast.json")]
     Task<WeatherData> GetForecastAsync(
         [AliasAs("key")] string apiKey,
         [AliasAs("q")] string coordinates,
-        [AliasAs("days")] int days = 7,
+        [AliasAs("days")] int days = 14,
         [AliasAs("lang")] string language = "sv",
         [AliasAs("aqi")] string aqi = "yes",
         [AliasAs("alerts")] string alerts = "yes");

HomeApi/Integration/WeatherService.cs

@@ -1,4 +1,4 @@
-using HomeApi.Integration.Client;
+using HomeApi.Integration.Client.WeatherClient;
 using HomeApi.Models.Configuration;
 using HomeApi.Models.Response;
 using Microsoft.Extensions.Options;

HomeApi/Models/TimeTable.cs

@@ -11,4 +11,5 @@ public class TimeTable
     public string Direction { get; set; }           // e.g. "Farsta Strand station"
     public string JourneyDetailRef { get; set; }    // e.g. "1|39437|0|1|15072025"
     public List<string> Notes { get; set; }         // e.g. "Pendeltåg", "Endast 2 klass"
+    public string InternalTransportationName { get; set; } // e.g. "Pendeltåg 43"
 }

HomeApi/Models/WeatherInformation.cs

@@ -62,6 +62,9 @@ public class Forecast
     public WeatherSummary? Day { get; set; }
     public WeatherSummary? Night { get; set; }
     public Astro Astro { get; set; }
+    public int IconCode { get; set; }
+    
+    public int ChanceOfRain { get; set; }
 }
 public class Astro
 {

HomeApi/Program.cs

@@ -11,6 +11,8 @@ builder.Services.AddIntegration(builder.Configuration);
 
 var app = builder.Build();
 
+app.UseStaticFiles();
+
 if (app.Environment.IsDevelopment())
 {
     app.MapOpenApi();

HomeApi/Registration/RegisterIntegration.cs

@@ -1,6 +1,7 @@
 using HomeApi.Extensions;
 using HomeApi.Integration;
 using HomeApi.Integration.Client;
+using HomeApi.Integration.Client.WeatherClient;
 using HomeApi.Models.Configuration;
 using Microsoft.Extensions.Options;
 using Refit;

HomeApi/wwwroot/index.cshtml

@@ -1,212 +1,625 @@
+@using HomeApi.Models
+@using System;
+@using System.Linq;
+@using System.Collections.Generic;
 @model HomeApi.Models.Image
 
+@functions {
+    private string GetDayStatus(string input)
+    {
+        var date = DateTime.Parse(input);
+        var today = DateTime.Today;
+        var dayOfWeek = date.DayOfWeek.ToString();
+
+        if (date.Date == today)
+            return "Today";
+        if (date.Date == today.AddDays(1))
+            return "Tomorrow";
+        if (date >= today.AddDays(1) && date < today.AddDays(7))
+            return dayOfWeek;
+        return $"On {date:dddd, dd MMM yyyy}";
+    }
+    
+    private string GetTransPortIcon(string transportType)
+    {
+        var transportIcons = new Dictionary<string, string>(StringComparer.OrdinalIgnoreCase)
+        {
+            { "buss", "fa-bus" },
+            { "bus", "fa-bus" },
+            { "tunnelbana", "fa-train-subway" },
+            { "metro", "fa-train-subway" },
+            { "tåg", "fa-train" },
+            { "train", "fa-train" },
+            { "båt", "fa-ferry" },
+            { "ferry", "fa-ferry" }
+        };
+
+        foreach (var keyword in transportIcons.Keys)
+        {
+            if (transportType.Contains(keyword, StringComparison.OrdinalIgnoreCase))
+                return transportIcons[keyword];
+        }
+
+        return "fa-question-circle";
+    }
+    
+    private string GetAirQualityStatus(AirQuality data)
+    {
+        var highestAqi = Math.Max(data.Us_Epa_Index, data.Gb_Defra_Index);
+
+        return highestAqi switch
+        {
+            <= 50 => "Good",
+            <= 100 => "Moderate",
+            <= 150 => "Unhealthy for Sensitive Groups",
+            <= 200 => "Unhealthy",
+            <= 300 => "Very Unhealthy",
+            _ => "Hazardous"
+        };
+    }
+    
+    private static string GetWeatherIcon(int code, bool isNight = false)
+    {
+        var map = new Dictionary<int, string>
+        {
+            // Clear/Sunny
+            { 1000, isNight ? "fa-moon" : "fa-sun" },
+            // Partly cloudy
+            { 1003, isNight ? "fa-cloud-moon" : "fa-cloud-sun" },
+            // Cloudy/Overcast
+            { 1006, "fa-cloud" },
+            { 1009, "fa-cloud" },
+            // Mist/Fog
+            { 1030, "fa-smog" },
+            { 1135, "fa-smog" },
+            { 1147, "fa-smog" },
+            // Rain/drizzle
+            { 1063, "fa-cloud-rain" },
+            { 1150, "fa-cloud-drizzle" },
+            { 1153, "fa-cloud-drizzle" },
+            { 1180, "fa-cloud-rain" },
+            { 1183, "fa-cloud-rain" },
+            { 1186, "fa-cloud-showers-heavy" },
+            { 1189, "fa-cloud-showers-heavy" },
+            { 1240, "fa-cloud-showers-heavy" },
+            { 1243, "fa-cloud-showers-heavy" },
+            { 1246, "fa-cloud-showers-heavy" },
+            // Sleet, freezing drizzle/rain
+            { 1069, "fa-cloud-meatball" },
+            { 1072, "fa-cloud-meatball" },
+            { 1168, "fa-cloud-meatball" },
+            { 1171, "fa-cloud-meatball" },
+            { 1198, "fa-cloud-meatball" },
+            { 1201, "fa-cloud-meatball" },
+            { 1204, "fa-cloud-meatball" },
+            { 1207, "fa-cloud-meatball" },
+            { 1249, "fa-cloud-meatball" },
+            { 1252, "fa-cloud-meatball" },
+            // Snow
+            { 1066, "fa-snowflake" },
+            { 1114, "fa-snowflake" },
+            { 1117, "fa-snowflake" },
+            { 1210, "fa-snowflake" },
+            { 1213, "fa-snowflake" },
+            { 1216, "fa-snowflake" },
+            { 1219, "fa-snowflake" },
+            { 1222, "fa-snowflake" },
+            { 1225, "fa-snowflake" },
+            { 1255, "fa-snowflake" },
+            { 1258, "fa-snowflake" },
+            // Snow showers
+            { 1261, "fa-snowflake" },
+            { 1264, "fa-snowflake" },
+            { 1279, "fa-snowflake" },
+            { 1282, "fa-snowflake" },
+            // Thunderstorms
+            { 1087, "fa-bolt" },
+            { 1273, "fa-bolt" },
+            { 1276, "fa-bolt" },
+            // Ice pellets
+            { 1237, "fa-icicles" },
+        };
+
+        return map.TryGetValue(code, out var value) ? value : "fa-question-circle";
+    }
+}
+
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Dashboard</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        html, body {
+        /* Reset and base styles */
-            width: 800px;
+        * {
-            height: 480px;
             margin: 0;
             padding: 0;
-            background: #f0f4f8;
-            color: #333;
-            font-family: Arial, sans-serif;
             box-sizing: border-box;
-            overflow: hidden;
-            font-size: 13px;
         }
-        .section {
+
-            margin-bottom: 6px;
+        body {
-            padding: 4px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         }
-        .card {
+
-            background: white;
+        /* Color Variables */
-            border-radius: 8px;
+        :root {
-            padding: 6px;
+            /* Base colors - Grayscale */
-            box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+            --background: 0 0% 100%;
-            flex: 1;
+            --foreground: 0 0% 20%;
-            font-size: 12px;
+            --card: 0 0% 100%;
+            --card-foreground: 0 0% 20%;
+            --primary: 0 0% 30%;
+            --primary-foreground: 0 0% 98%;
+            --muted: 0 0% 96%;
+            --muted-foreground: 0 0% 50%;
+            --border: 0 0% 85%;
+
+            /* Icon colors - All red */
+            --weather: 0 85% 60%;
+            --weather-sunny: 0 85% 60%;
+            --weather-cloudy: 0 85% 60%;
+            --weather-rainy: 0 85% 60%;
+            --weather-aurora: 0 85% 60%;
+
+            /* Air quality colors - Red */
+            --air-good: 0 85% 60%;
+            --air-moderate: 0 85% 60%;
+            --air-bad: 0 85% 60%;
+
+            /* Transport colors - Red */
+            --transport-color: 0 85% 60%;
         }
-        .scroll {
+
-            max-height: 140px;
+        /* Main weather card */
-            overflow-y: auto;
+        .weather-card {
+            width: 800px;
+            height: 480px;
+            background: linear-gradient(135deg,
+            hsl(var(--card)) 0%,
+            hsl(var(--card)) 50%,
+            hsl(var(--muted) / 0.3) 100%);
+            border: 2px solid hsl(var(--border) / 0.2);
+            border-radius: 12px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+            padding: 24px;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 24px;
+            color: hsl(var(--foreground));
         }
-        table {
+
-            width: 100%;
+        /* Left Column - Current Weather */
-            border-collapse: collapse;
+        .current-weather {
-            font-size: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
         }
-        th, td {
+
-            padding: 2px 4px;
+        .location {
-            border: 1px solid #e0e0e0;
+            display: flex;
-            text-align: left;
+            align-items: center;
+            gap: 8px;
+            color: hsl(var(--foreground));
         }
-        th {
+
-            background: #e8eef3;
+        .location-icon {
+            color: hsl(0 85% 60%);
+            font-size: 14px;
+        }
+
+        .location-text {
+            font-weight: 500;
+            font-size: 14px;
+        }
+
+        .current-temp {
+            text-align: center;
+            margin: 8px 0;
+        }
+
+        .temp-main {
+            font-size: 36px;
             font-weight: bold;
+            color: hsl(var(--foreground));
         }
-        img.icon {
+
-            width: 24px;
+        .feels-like {
-            height: 24px;
+            font-size: 14px;
+            color: hsl(var(--muted-foreground));
+            margin-top: 4px;
+        }
+
+        .weather-details {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        .detail-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .detail-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+        }
+
+        .detail-value {
+            font-size: 14px;
+            font-weight: 500;
+        }
+
+        .cloud-icon {
+            color: hsl(var(--weather-cloudy));
+        }
+
+        .wind-icon, .activity-icon {
+            color: hsl(0 85% 60%);
+        }
+
+        .aurora-icon {
+            color: hsl(var(--weather-aurora));
+        }
+
+        .air-quality-badge {
+            background: hsl(var(--air-good));
+            color: white;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+            text-align: center;
+        }
+
+        /* Middle Column - Forecast */
+        .forecast-section {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .section-title {
+            font-weight: 600;
+            color: hsl(var(--foreground));
+            font-size: 16px;
+        }
+
+        .forecast-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+        }
+
+        .forecast-card {
+            background: hsl(var(--muted) / 0.2);
+            border: 1px solid hsl(var(--border) / 0.5);
+            border-radius: 8px;
+            padding: 8px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        .forecast-date {
+            font-size: 12px;
+            font-weight: 500;
+            color: hsl(var(--foreground));
+        }
+
+        .forecast-icon {
+            display: flex;
+            justify-content: center;
+            margin: 4px 0;
+            color: hsl(var(--weather));
+        }
+
+        .forecast-condition {
+            font-size: 12px;
+            color: hsl(var(--muted-foreground));
+        }
+
+        .forecast-temp {
+            font-size: 14px;
+            font-weight: 600;
+            color: hsl(var(--foreground));
+        }
+
+        .forecast-rain {
+            font-size: 12px;
+            color: hsl(var(--muted-foreground));
+        }
+
+        .weather-sunny {
+            color: hsl(var(--weather-sunny));
+            font-size: 24px;
+        }
+
+        .weather-cloudy {
+            color: hsl(var(--weather-cloudy));
+            font-size: 24px;
+        }
+
+        .weather-rainy {
+            color: hsl(var(--weather-rainy));
+            font-size: 24px;
+        }
+
+        .sun-moon-info {
+            padding-top: 8px;
+            border-top: 1px solid hsl(var(--border));
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .sun-moon-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .sun-moon-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 12px;
+        }
+
+        .sun-moon-value {
+            font-size: 12px;
+            font-weight: 500;
+        }
+
+        .moon-phase-label {
+            font-size: 12px;
+            color: hsl(var(--muted-foreground));
+        }
+
+        .sunrise-icon, .sunset-icon {
+            color: hsl(0 85% 60%);
+        }
+
+        .moon-icon {
+            color: hsl(0 85% 60%);
+        }
+
+        /* Right Column - Transport */
+        .transport-section {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .transport-list {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            flex: 1;
+        }
+
+        .transport-item {
+            background: hsl(var(--card));
+            border: 1px solid hsl(var(--border));
+            border-radius: 8px;
+            padding: 12px;
+            display: flex;
+            align-items: flex-start;
+            gap: 12px;
+            transition: box-shadow 0.2s ease;
+        }
+
+        .transport-item:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        .transport-item i {
+            font-size: 20px;
+            margin-top: 2px;
+        }
+
+        .transport-color {
+            color: hsl(var(--transport-color));
+        }
+
+        .transport-info {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .transport-name {
+            font-weight: 500;
+            font-size: 14px;
+            color: hsl(var(--foreground));
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .transport-destination {
+            font-size: 12px;
+            color: hsl(var(--muted-foreground));
+            white-space: nowrap;
+            overflow: hidden;
+            width: 152px;
+            text-overflow: ellipsis;
+        }
+
+        .transport-time {
+            font-size: 14px;
+            font-weight: 600;
+            color: hsl(var(--primary));
+            text-align: right;
+        }
+
+        .last-updated {
+            padding-top: 16px;
+            margin-top: 16px;
+            border-top: 1px solid hsl(var(--border));
+        }
+
+        .update-text {
+            font-size: 12px;
+            color: hsl(var(--muted-foreground));
+            text-align: center;
         }
     </style>
 </head>
 <body>
-    <div class="section">
+    <div class="weather-card">
-        <h2 style="font-size:16px;">@Model.Weather.CityName</h2>
+        <!-- Left Column - Current Weather -->
-        <div class="flex-row">
+        <div class="current-weather">
-            Current Weather
+            <div class="location">
-            <table>
+                <i class="fas fa-map-marker-alt location-icon"></i>
-                <thead>
+                <span class="location-text">@Model.Weather.CityName</span>
-                <tr>
+            </div>
-                    <th>Temp</th>
+            
-                    <th>Feels</th>
+            <div class="current-temp">
-                    <th>Clouds</th>
+                <div class="temp-main">@Model.Weather.Current.Temperature°C</div>
-                    <th>Wind</th>
+                <div class="feels-like">Feels like @Model.Weather.Current.Feelslike°C</div>
-                    <th>Gusts</th>
+            </div>
-                    <th>Updated</th>
+            
-                </tr>
+            <div class="weather-details">
-                </thead>
+                <div class="detail-item">
-                <tbody>
+                    <div class="detail-label">
-                <tr>
+                        <i class="fas fa-cloud cloud-icon"></i>
-                    <td>@Model.Weather.Current.Temperature °C</td>
+                        <span>Clouds</span>
-                    <td>@Model.Weather.Current.Feelslike °C</td>
+                    </div>
-                    <td>@Model.Weather.Current.Cloud%</td>
+                    <span class="detail-value">@Model.Weather.Current.Cloud%</span>
-                    <td>@Model.Weather.Current.WindPerMeterSecond m/s (@Model.Weather.Current.WindDirection)</td>
+                </div>
-                    <td>@Model.Weather.Current.WindGustPerMeterSecond m/s</td>
+                
-                    <td>@Model.Weather.Current.LastUpdated</td>
+                <div class="detail-item">
-                </tr>
+                    <div class="detail-label">
-                </tbody>
+                        <i class="fas fa-wind wind-icon"></i>
-            </table>
+                        <span>Wind</span>
-            <br/>
+                    </div>
-            Current Air Quality
+                    <span class="detail-value">@Model.Weather.Current.WindPerMeterSecond.ToString("0.##"); m/s @Model.Weather.Current.WindDirection</span>
-            <table>
+                </div>
-                <thead>
+                
-                <tr>
+                <div class="detail-item">
-                    <th>CO</th>
+                    <div class="detail-label">
-                    <th>NO₂</th>
+                        <i class="fas fa-chart-line activity-icon"></i>
-                    <th>O₃</th>
+                        <span>Gusts</span>
-                    <th>SO₂</th>
+                    </div>
-                    <th>PM2.5</th>
+                    <span class="detail-value">@Model.Weather.Current.WindGustPerMeterSecond.ToString("0.##"); m/s</span>
-                    <th>PM10</th>
+                </div>
-                    <th>EPA</th>
+                
-                    <th>DEFRA</th>
+                <div class="detail-item">
-                </tr>
+                    <div class="detail-label">
-                </thead>
+                        <i class="fas fa-star aurora-icon"></i>
-                <tbody>
+                        <span>Aurora</span>
-                <tr>
+                    </div>
-                    <td>@Model.Weather.Current.AirQuality?.Co</td>
+                    <span class="detail-value">@Model.Weather.Current.AuroraProbability.Value%</span>
-                    <td>@Model.Weather.Current.AirQuality?.No2</td>
+                </div>
-                    <td>@Model.Weather.Current.AirQuality?.O3</td>
+            </div>
-                    <td>@Model.Weather.Current.AirQuality?.So2</td>
+            
-                    <td>@Model.Weather.Current.AirQuality?.Pm2_5</td>
+            <div class="air-quality-badge">
-                    <td>@Model.Weather.Current.AirQuality?.Pm10</td>
+                Air Quality: @GetAirQualityStatus(Model.Weather.Current.AirQuality)
-                    <td>@Model.Weather.Current.AirQuality?.Us_Epa_Index</td>
+            </div>
-                    <td>@Model.Weather.Current.AirQuality?.Gb_Defra_Index</td>
+        </div>
-                </tr>
+        
-                </tbody>
+        <!-- Middle Column - Forecast -->
-            </table>
+        <div class="forecast-section">
-            <br/>
+            <h3 class="section-title">@Model.Weather.Forecast.Count-Day Forecast</h3>
-            Aurora Probability
+            
-            <table>
+            <div class="forecast-grid">
-            <thead>
+            @foreach (var day in Model.Weather.Forecast)
-            <tr>
+            {
-                <th>Probability</th>
+                <div class="forecast-card">
-                <th>Color</th>
+                    <div class="forecast-date">@GetDayStatus(day.Date)</div>
-                <th>Highest</th>
+                    <div class="forecast-icon">
-                <th>Location</th>
+                        <i class="fas fa-cloud @GetWeatherIcon(day.IconCode)"></i>
-                <th>Date</th>
+                    </div>
-            </tr>
+                    <div class="forecast-condition">@(day.Day?.ConditionText ?? "Unspecified")</div>
-            </thead>
+                    <div class="forecast-temp">@day.MinTempC°/@day.MaxTempC°</div>
-            <tbody>
+                    <div class="forecast-rain">Rain: @day.ChanceOfRain%</div>
-            <tr>
+                </div>
-                <td>@Model.Weather.Current.AuroraProbability?.Value%</td>
+            }
-                <td>@Model.Weather.Current.AuroraProbability?.Colour</td>
+            </div>
-                <td>@Model.Weather.Current.AuroraProbability?.HighestProbability?.Value%</td>
+            
-                <td>(@Model.Weather.Current.AuroraProbability?.HighestProbability?.Lat, @Model.Weather.Current.AuroraProbability?.HighestProbability?.Long)</td>
+            <div class="sun-moon-info">
-                <td>@Model.Weather.Current.AuroraProbability?.HighestProbability?.Date.ToShortDateString()</td>
+                <div class="sun-moon-item">
-            </tr>
+                    <div class="sun-moon-label">
-            </tbody>
+                        <i class="fas fa-sun sunrise-icon"></i>
-            </table>
+                        <span>Sunrise</span>
-
+                    </div>
+                    <span class="sun-moon-value">@Model.Weather.Forecast[0].Astro.Sunrise</span>
+                </div>
+                
+                <div class="sun-moon-item">
+                    <div class="sun-moon-label">
+                        <i class="fas fa-sun sunset-icon"></i>
+                        <span>Sunset</span>
+                    </div>
+                    <span class="sun-moon-value">@Model.Weather.Forecast[0].Astro.Sunset</span>
+                </div>
+                
+                <div class="sun-moon-item">
+                    <div class="sun-moon-label">
+                        <i class="fas fa-moon moon-icon"></i>
+                        <span>Moonrise</span>
+                    </div>
+                    <span class="sun-moon-value">@Model.Weather.Forecast[0].Astro.Moonrise</span>
+                </div>
+                
+                <div class="sun-moon-item">
+                    <div class="sun-moon-label">
+                        <i class="fas fa-moon moon-icon"></i>
+                        <span>Moonset</span>
+                    </div>
+                    <span class="sun-moon-value">@Model.Weather.Forecast[0].Astro.Moonset</span>
+                </div>
+                
+                <div class="sun-moon-item">
+                    <span class="moon-phase-label">Moon phase</span>
+                    <span class="sun-moon-value">@Model.Weather.Forecast[0].Astro.Moon_Illumination%</span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Right Column - Public Transport -->
+        <div class="transport-section">
+            <h3 class="section-title">Upcoming Departures</h3>
+            
+            <div class="transport-list">
+                @foreach (var transport in Model.TimeTable.Take(5))
+                {
+                 
+                    var departureTime = DateTime.Parse(transport.DepartureTime);
+                    var minutesUntilDeparture = (int)(departureTime - DateTime.Now).TotalMinutes;
+                    
+                    <div class="transport-item">
+                        <i class="fas transport-color @GetTransPortIcon(transport.InternalTransportationName)"></i>
+                        <div class="transport-info">
+                            <div class="transport-name">@transport.LineNumber</div>
+                            <div class="transport-destination">to @transport.Direction</div>
+                        </div>
+                        <div class="transport-time">@DateTime.Parse(transport.DepartureTime).ToShortTimeString() (@minutesUntilDeparture min)</div>
+                    </div>
+                }
+            </div>
+            
+            <div class="last-updated">
+                <div class="update-text">Last updated: <span id="current-time"></span></div>
+            </div>
         </div>
     </div>
 
-    <div class="section scroll">
+<script>
-        <h3 style="font-size:14px;">Forecast</h3>
+    // Update current time
-        <table>
+    function updateTime() {
-            <thead>
+        const now = new Date();
-                <tr>
+        document.getElementById('current-time').textContent = now.toLocaleTimeString();
-                    <th>Date</th>
+    }
-                    <th>Icon</th>
-                    <th>Min</th>
-                    <th>Max</th>
-                    <th>Day</th>
-                    <th>Feels</th>
-                    <th>Rain</th>
-                    <th>Snow</th>
-                    <th>Sunrise</th>
-                    <th>Sunset</th>
-                    <th>Moonrise</th>
-                    <th>Moonset</th>
-                    <th>Moon</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var f in Model.Weather.Forecast)
-                {
-                    <tr>
-                        <td>@f.Date</td>
-                        <td><img class="icon" src="@f.DayIcon" alt="Icon" /></td>
-                        <td>@f.MinTempC°C</td>
-                        <td>@f.MaxTempC°C</td>
-                        <td>@f.Day?.ConditionText</td>
-                        <td>@f.Day?.AvgFeelslikeC°C</td>
-                        <td>@f.Day?.TotalChanceOfRain%</td>
-                        <td>@f.Day?.TotalChanceOfSnow%</td>
-                        <td>@f.Astro.Sunrise</td>
-                        <td>@f.Astro.Sunset</td>
-                        <td>@f.Astro.Moonrise</td>
-                        <td>@f.Astro.Moonset</td>
-                        <td>@f.Astro.Moon_Phase (@f.Astro.Moon_Illumination%)</td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    </div>
 
-    <div class="section scroll">
+    updateTime();
-        <h3 style="font-size:14px;">Public Transport Departures</h3>
+    setInterval(updateTime, 1000);
-        <table>
+</script>
-            <thead>
-                <tr>
-                    <th>Type</th>
-                    <th>Line</th>
-                    <th>Name</th>
-                    <th>Operator</th>
-                    <th>Stop</th>
-                    <th>Departure</th>
-                    <th>Direction</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var t in Model.TimeTable)
-                {
-                    <tr>
-                        <td>@t.TransportType</td>
-                        <td>@t.LineNumber</td>
-                        <td>@t.LineName</td>
-                        <td>@t.Operator</td>
-                        <td>@t.StopName</td>
-                        <td>@t.DepartureTime</td>
-                        <td>@t.Direction</td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    </div>
 </body>
 </html>