From e094745cd902a7aaadae5c3e74e576a0471c0f54 Mon Sep 17 00:00:00 2001
From: Arne Baeumler <arne@br0tkasten.de>
Date: Sun, 7 Jun 2026 20:10:51 +0200
Subject: [PATCH] style: modernize interface spacing and corners

---
 src/server/request-handler.ts | 85 ++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index e30a655..dc6f262 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -63,14 +63,17 @@ function htmlPage(): string {
     <style>
       :root {
         color-scheme: light;
-        --bg: #f3efe6;
-        --panel: rgba(255, 255, 255, 0.82);
-        --border: rgba(15, 23, 42, 0.12);
-        --text: #16202a;
-        --muted: #5b6472;
-        --accent: #2d6cdf;
-        --accent-strong: #1f56c2;
-        --shadow: 0 18px 50px rgba(23, 31, 45, 0.14);
+        --bg: #eef2f7;
+        --panel: rgba(255, 255, 255, 0.84);
+        --border: rgba(15, 23, 42, 0.11);
+        --text: #0f172a;
+        --muted: #5f6b7a;
+        --accent: #2563eb;
+        --accent-strong: #1d4ed8;
+        --shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
+        --radius-xl: 16px;
+        --radius-lg: 12px;
+        --radius-md: 10px;
       }
 
       * {
@@ -89,8 +92,8 @@ function htmlPage(): string {
         font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
         color: var(--text);
         background:
-          radial-gradient(circle at top left, rgba(45, 108, 223, 0.16), transparent 30%),
-          radial-gradient(circle at bottom right, rgba(220, 167, 47, 0.18), transparent 28%),
+          radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 28%),
+          radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.08), transparent 26%),
           var(--bg);
       }
 
@@ -122,8 +125,8 @@ function htmlPage(): string {
         min-height: 0;
         display: grid;
         grid-template-columns: 360px 1fr;
-        gap: 16px;
-        padding: 0 16px 16px;
+        gap: 14px;
+        padding: 0 14px 14px;
       }
 
       aside,
@@ -132,20 +135,20 @@ function htmlPage(): string {
         background: var(--panel);
         backdrop-filter: blur(14px);
         border: 1px solid var(--border);
-        border-radius: 20px;
+        border-radius: var(--radius-xl);
         box-shadow: var(--shadow);
       }
 
       aside {
         min-height: 0;
-        padding: 18px;
+        padding: 16px;
         display: grid;
-        gap: 16px;
+        gap: 14px;
       }
 
       .card {
-        padding: 16px;
-        border-radius: 16px;
+        padding: 15px;
+        border-radius: var(--radius-lg);
         border: 1px solid var(--border);
         background: rgba(255, 255, 255, 0.72);
       }
@@ -170,8 +173,8 @@ function htmlPage(): string {
       input {
         width: 100%;
         border: 1px solid rgba(15, 23, 42, 0.18);
-        border-radius: 12px;
-        padding: 12px 14px;
+        border-radius: var(--radius-md);
+        padding: 11px 13px;
         font: inherit;
         background: white;
       }
@@ -185,8 +188,8 @@ function htmlPage(): string {
 
       button {
         border: 0;
-        border-radius: 999px;
-        padding: 10px 14px;
+        border-radius: var(--radius-md);
+        padding: 10px 13px;
         font: inherit;
         cursor: pointer;
         display: inline-flex;
@@ -212,6 +215,7 @@ function htmlPage(): string {
       .primary {
         background: var(--accent);
         color: white;
+        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
       }
 
       .primary:hover {
@@ -219,17 +223,17 @@ function htmlPage(): string {
       }
 
       .secondary {
-        background: rgba(15, 23, 42, 0.08);
+        background: rgba(15, 23, 42, 0.06);
         color: var(--text);
       }
 
       .danger {
-        background: rgba(157, 23, 77, 0.12);
-        color: #9d174d;
+        background: rgba(157, 23, 77, 0.1);
+        color: #b91c1c;
       }
 
       .danger:hover {
-        background: rgba(157, 23, 77, 0.18);
+        background: rgba(157, 23, 77, 0.16);
       }
 
       .status {
@@ -276,9 +280,9 @@ function htmlPage(): string {
 
       .progress-bar {
         height: 10px;
-        border-radius: 999px;
+        border-radius: var(--radius-md);
         overflow: hidden;
-        background: rgba(15, 23, 42, 0.1);
+        background: rgba(15, 23, 42, 0.08);
       }
 
       .progress-fill {
@@ -310,8 +314,8 @@ function htmlPage(): string {
         grid-template-columns: 52px 1fr;
         gap: 12px;
         align-items: center;
-        padding: 10px;
-        border-radius: 14px;
+        padding: 11px;
+        border-radius: var(--radius-md);
         background: rgba(255, 255, 255, 0.72);
         border: 1px solid rgba(15, 23, 42, 0.06);
       }
@@ -320,7 +324,7 @@ function htmlPage(): string {
         width: 52px;
         height: 52px;
         object-fit: cover;
-        border-radius: 10px;
+        border-radius: 8px;
       }
 
       .photo strong {
@@ -340,7 +344,7 @@ function htmlPage(): string {
 
       .empty-state {
         padding: 14px;
-        border-radius: 14px;
+        border-radius: var(--radius-md);
         border: 1px dashed rgba(15, 23, 42, 0.16);
         color: var(--muted);
         background: rgba(255, 255, 255, 0.45);
@@ -360,7 +364,7 @@ function htmlPage(): string {
         position: relative;
         min-height: 0;
         overflow: hidden;
-        border-radius: 20px;
+        border-radius: var(--radius-xl);
         border: 1px solid var(--border);
         background: var(--panel);
         backdrop-filter: blur(14px);
@@ -379,7 +383,7 @@ function htmlPage(): string {
         top: 16px;
         left: 16px;
         padding: 10px 12px;
-        border-radius: 999px;
+        border-radius: var(--radius-md);
         background: rgba(255, 255, 255, 0.92);
         border: 1px solid rgba(15, 23, 42, 0.08);
         box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
@@ -403,6 +407,7 @@ function htmlPage(): string {
       .overlay-card {
         width: min(1120px, 100%);
         overflow: hidden;
+        border-radius: var(--radius-xl);
       }
 
       .overlay-card header {
@@ -436,12 +441,12 @@ function htmlPage(): string {
         width: 100%;
         aspect-ratio: 4 / 3;
         object-fit: cover;
-        border-radius: 12px;
+        border-radius: 8px;
       }
 
       .thumb button {
         border: 0;
-        border-radius: 10px;
+        border-radius: 8px;
         padding: 8px 10px;
         background: var(--accent);
         color: white;
@@ -457,7 +462,7 @@ function htmlPage(): string {
       }
 
       .timeline {
-        padding: 16px;
+        padding: 15px;
         display: grid;
         gap: 12px;
       }
@@ -484,7 +489,7 @@ function htmlPage(): string {
         position: relative;
         min-height: 170px;
         padding: 14px 12px 10px;
-        border-radius: 16px;
+        border-radius: var(--radius-lg);
         border: 1px solid rgba(148, 163, 184, 0.18);
         background:
           linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.88)),
@@ -592,7 +597,7 @@ function htmlPage(): string {
         position: absolute;
         top: 14px;
         bottom: 34px;
-        border-radius: 10px;
+        border-radius: 8px;
         border: 1px solid rgba(56, 189, 248, 0.55);
         background:
           linear-gradient(180deg, rgba(56, 189, 248, 0.18), rgba(14, 165, 233, 0.08)),
@@ -613,7 +618,7 @@ function htmlPage(): string {
         position: absolute;
         top: 14px;
         bottom: 34px;
-        border-radius: 10px;
+        border-radius: 8px;
         border: 1px dashed rgba(56, 189, 248, 0.9);
         background: rgba(56, 189, 248, 0.16);
         pointer-events: none;
@@ -632,7 +637,7 @@ function htmlPage(): string {
       }
 
       .timeline-footer span:last-child {
-        color: rgba(51, 65, 85, 0.92);
+        color: rgba(30, 41, 59, 0.92);
       }
 
       @media (max-width: 920px) {