feat: enhance app layout with new shell and navigation styles

.vscode/tasks.json

@@ -22,6 +22,15 @@
             ],
             "problemMatcher": "$msCompile",
             "group": "build"
+        },
+        {
+            "label": "Build Docker Image",
+            "type": "shell",
+            "command": "${workspaceFolder}\\.venv\\Scripts\\python.exe",
+            "args": [
+                "${workspaceFolder}/docker/build_image.py"
+            ],
+            "problemMatcher": []
         }
     ]
 }

docker/build_image.py

@@ -0,0 +1,44 @@
+from __future__ import annotations
+
+import datetime as dt
+import subprocess
+from pathlib import Path
+
+
+def get_timestamp_tag(today: dt.date) -> str:
+    year_suffix = today.year % 100
+    day_of_year = today.timetuple().tm_yday
+    return f"{year_suffix}.{day_of_year}"
+
+
+def main() -> int:
+    repo_root = Path(__file__).resolve().parents[1]
+    dockerfile_path = repo_root / "docker" / "Dockerfile"
+
+    today = dt.date.today()
+    timestamp_tag = get_timestamp_tag(today)
+
+    image_name = "troogs/astrain"
+    tags = ["latest", timestamp_tag]
+
+    build_cmd = [
+        "docker",
+        "build",
+        "-f",
+        str(dockerfile_path),
+        "-t",
+        f"{image_name}:{tags[0]}",
+        "-t",
+        f"{image_name}:{tags[1]}",
+        str(repo_root),
+    ]
+
+    print(f"Building Docker image with tags: {', '.join(tags)}")
+    print(" ".join(build_cmd))
+
+    result = subprocess.run(build_cmd, cwd=str(repo_root))
+    return result.returncode
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())

src/ASTRAIN.Api/Program.cs

@@ -1,5 +1,7 @@
 using ASTRAIN.Api.Data;
 using ASTRAIN.Api.Endpoints;
+using Microsoft.AspNetCore.StaticFiles;
+using Microsoft.Extensions.FileProviders;
 using Microsoft.EntityFrameworkCore;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -42,7 +44,12 @@ if (app.Environment.IsDevelopment())
 // app.UseHttpsRedirection();
 app.UseCors();
 app.UseDefaultFiles();
-app.UseStaticFiles();
+
+app.UseStaticFiles(new StaticFileOptions
+{
+    ServeUnknownFileTypes = true
+});
+
 
 using (var scope = app.Services.CreateScope())
 {

src/ASTRAIN.Client/wwwroot/css/app.css

@@ -205,6 +205,118 @@ p {
     gap: 1rem;
 }
 
+.app-shell {
+    min-height: 100vh;
+    background: #0b0b0b;
+    color: #f5f5f5;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-content {
+    flex: 1;
+    padding: 1.5rem 1.25rem 6rem;
+}
+
+.brand-header {
+    text-align: center;
+    font-weight: 800;
+    font-size: 1.1rem;
+    padding: 1.25rem 0 0.25rem;
+}
+
+.brand-white {
+    color: #ffffff;
+}
+
+.brand-red {
+    color: #ff3b3b;
+}
+
+.bottom-nav {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 96px;
+    background: #141414;
+    border-top: 1px solid #2a2a2a;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding: 0 1.5rem;
+    gap: 1rem;
+    z-index: 10;
+}
+
+.nav-item {
+    color: #bdbdbd;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 44px;
+    border: 1px solid transparent;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    width: 100%;
+    max-width: 160px;
+    margin: 0 auto;
+    justify-self: center;
+    text-align: center;
+    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+
+.nav-item.active {
+    color: #ffffff;
+    font-weight: 700;
+    border-color: #ff3b3b;
+    box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.15);
+    background: rgba(255, 59, 59, 0.12);
+}
+
+.nav-item:hover {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.06);
+}
+
+.nav-logo {
+    width: 80px;
+    height: 80px;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    border-radius: 999px;
+    font-size: 0.7rem;
+    letter-spacing: 0.1em;
+}
+
+.nav-logo img {
+    width: 80px;
+    height: 80px;
+    border-radius: 10px;
+    object-fit: cover;
+}
+
+@media (min-width: 768px) {
+    .main-content {
+        padding: 2rem 2.5rem 7rem;
+        max-width: 960px;
+        margin: 0 auto;
+    }
+
+    .bottom-nav {
+        left: 50%;
+        transform: translateX(-50%);
+        max-width: 720px;
+        border-radius: 24px 24px 0 0;
+    }
+}
+
 .loading-screen img {
     width: 96px;
     height: 96px;