apps/mapix
4
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style: calm palette and square surfaces

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-07 20:22:12 +02:00
parent d7104386d9
commit f81978566a
1 changed files with 73 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/server/request-handler.ts
View File

@@ -62,90 +62,90 @@ function htmlPage(): string {
/>
<style>
:root {
--radius-xl: 16px;
--radius-lg: 12px;
--radius-md: 10px;
--shadow: 0 16px 42px rgba(2, 6, 23, 0.24);
--shadow-soft: 0 10px 24px rgba(2, 6, 23, 0.14);
--chart-grid: rgba(255, 255, 255, 0.04);
--chart-band: rgba(59, 130, 246, 0.18);
--radius-xl: 0;
--radius-lg: 0;
--radius-md: 0;
--shadow: 0 12px 30px rgba(2, 6, 23, 0.14);
--shadow-soft: 0 8px 18px rgba(2, 6, 23, 0.1);
--chart-grid: rgba(255, 255, 255, 0.035);
--chart-band: rgba(100, 116, 139, 0.16);
}
body[data-theme="dark"] {
color-scheme: dark;
--bg: #0b1220;
--bg-accent-a: rgba(37, 99, 235, 0.16);
--bg-accent-b: rgba(14, 116, 144, 0.12);
--panel: rgba(15, 23, 42, 0.82);
--panel-strong: rgba(15, 23, 42, 0.92);
--surface: rgba(15, 23, 42, 0.62);
--surface-strong: rgba(30, 41, 59, 0.84);
--border: rgba(148, 163, 184, 0.16);
--border-strong: rgba(148, 163, 184, 0.24);
--text: #e5eefb;
--muted: #93a3b8;
--accent: #60a5fa;
--accent-strong: #3b82f6;
--input-bg: rgba(15, 23, 42, 0.88);
--button-secondary-bg: rgba(148, 163, 184, 0.12);
--button-secondary-hover: rgba(148, 163, 184, 0.18);
--danger-bg: rgba(239, 68, 68, 0.12);
--danger-hover: rgba(239, 68, 68, 0.18);
--bg: #0f172a;
--bg-accent-a: rgba(71, 85, 105, 0.1);
--bg-accent-b: rgba(30, 41, 59, 0.08);
--panel: rgba(15, 23, 42, 0.84);
--panel-strong: rgba(15, 23, 42, 0.96);
--surface: rgba(15, 23, 42, 0.6);
--surface-strong: rgba(30, 41, 59, 0.88);
--border: rgba(148, 163, 184, 0.14);
--border-strong: rgba(148, 163, 184, 0.2);
--text: #e2e8f0;
--muted: #94a3b8;
--accent: #94a3b8;
--accent-strong: #cbd5e1;
--input-bg: rgba(15, 23, 42, 0.9);
--button-secondary-bg: rgba(148, 163, 184, 0.1);
--button-secondary-hover: rgba(148, 163, 184, 0.16);
--danger-bg: rgba(239, 68, 68, 0.1);
--danger-hover: rgba(239, 68, 68, 0.14);
--danger-text: #fca5a5;
--status-tint: rgba(96, 165, 250, 0.16);
--progress-track: rgba(148, 163, 184, 0.16);
--photo-bg: rgba(15, 23, 42, 0.55);
--photo-active-bg: rgba(37, 99, 235, 0.22);
--photo-active-border: rgba(96, 165, 250, 0.44);
--empty-border: rgba(148, 163, 184, 0.22);
--map-label-bg: rgba(15, 23, 42, 0.92);
--map-label-border: rgba(148, 163, 184, 0.16);
--overlay-bg: rgba(3, 7, 18, 0.84);
--card-border: rgba(148, 163, 184, 0.14);
--status-tint: rgba(148, 163, 184, 0.14);
--progress-track: rgba(148, 163, 184, 0.14);
--photo-bg: rgba(15, 23, 42, 0.56);
--photo-active-bg: rgba(71, 85, 105, 0.22);
--photo-active-border: rgba(148, 163, 184, 0.28);
--empty-border: rgba(148, 163, 184, 0.18);
--map-label-bg: rgba(15, 23, 42, 0.94);
--map-label-border: rgba(148, 163, 184, 0.14);
--overlay-bg: rgba(2, 6, 23, 0.84);
--card-border: rgba(148, 163, 184, 0.12);
--leaflet-popup-bg: rgba(15, 23, 42, 0.96);
--leaflet-popup-text: #e5eefb;
--leaflet-popup-text: #e2e8f0;
--timeline-bg:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)),
radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 42%);
radial-gradient(circle at top left, rgba(71, 85, 105, 0.14), transparent 42%);
--chart-grid: rgba(255, 255, 255, 0.04);
}
body[data-theme="light"] {
color-scheme: light;
--bg: #eef2f7;
--bg-accent-a: rgba(37, 99, 235, 0.12);
--bg-accent-b: rgba(15, 118, 110, 0.08);
--panel: rgba(255, 255, 255, 0.84);
--panel-strong: rgba(255, 255, 255, 0.94);
--surface: rgba(255, 255, 255, 0.72);
--surface-strong: rgba(255, 255, 255, 0.88);
--border: rgba(15, 23, 42, 0.11);
--border-strong: rgba(15, 23, 42, 0.18);
--text: #0f172a;
--muted: #5f6b7a;
--accent: #2563eb;
--accent-strong: #1d4ed8;
--bg: #eef2f6;
--bg-accent-a: rgba(100, 116, 139, 0.08);
--bg-accent-b: rgba(148, 163, 184, 0.06);
--panel: rgba(255, 255, 255, 0.86);
--panel-strong: rgba(255, 255, 255, 0.96);
--surface: rgba(255, 255, 255, 0.8);
--surface-strong: rgba(241, 245, 249, 0.96);
--border: rgba(15, 23, 42, 0.1);
--border-strong: rgba(15, 23, 42, 0.16);
--text: #111827;
--muted: #667085;
--accent: #64748b;
--accent-strong: #475569;
--input-bg: white;
--button-secondary-bg: rgba(15, 23, 42, 0.06);
--button-secondary-hover: rgba(15, 23, 42, 0.1);
--danger-bg: rgba(157, 23, 77, 0.1);
--danger-hover: rgba(157, 23, 77, 0.16);
--button-secondary-bg: rgba(15, 23, 42, 0.05);
--button-secondary-hover: rgba(15, 23, 42, 0.08);
--danger-bg: rgba(120, 53, 15, 0.08);
--danger-hover: rgba(120, 53, 15, 0.14);
--danger-text: #b91c1c;
--status-tint: rgba(37, 99, 235, 0.12);
--status-tint: rgba(100, 116, 139, 0.12);
--progress-track: rgba(15, 23, 42, 0.08);
--photo-bg: rgba(255, 255, 255, 0.72);
--photo-active-bg: rgba(45, 108, 223, 0.12);
--photo-active-border: rgba(45, 108, 223, 0.42);
--photo-bg: rgba(255, 255, 255, 0.76);
--photo-active-bg: rgba(100, 116, 139, 0.12);
--photo-active-border: rgba(100, 116, 139, 0.3);
--empty-border: rgba(15, 23, 42, 0.16);
--map-label-bg: rgba(255, 255, 255, 0.92);
--map-label-bg: rgba(255, 255, 255, 0.94);
--map-label-border: rgba(15, 23, 42, 0.08);
--overlay-bg: rgba(8, 12, 18, 0.82);
--overlay-bg: rgba(8, 12, 18, 0.78);
--card-border: rgba(15, 23, 42, 0.11);
--leaflet-popup-bg: rgba(255, 255, 255, 0.97);
--leaflet-popup-text: #0f172a;
--timeline-bg:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92)),
radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 42%);
radial-gradient(circle at top left, rgba(100, 116, 139, 0.08), transparent 42%);
--chart-grid: rgba(15, 23, 42, 0.06);
}
@@ -300,7 +300,7 @@ function htmlPage(): string {
.primary {
background: var(--accent);
color: white;
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
box-shadow: 0 6px 14px rgba(100, 116, 139, 0.16);
}
.primary:hover {
@@ -413,7 +413,7 @@ function htmlPage(): string {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 8px;
border-radius: 0;
}
.photo strong {
@@ -472,7 +472,7 @@ function htmlPage(): string {
top: 16px;
left: 16px;
padding: 10px 12px;
border-radius: var(--radius-md);
border-radius: 0;
background: var(--map-label-bg);
border: 1px solid var(--map-label-border);
box-shadow: var(--shadow-soft);
@@ -496,7 +496,7 @@ function htmlPage(): string {
.overlay-card {
width: min(1120px, 100%);
overflow: hidden;
border-radius: var(--radius-xl);
border-radius: 0;
}
.overlay-card header {
@@ -531,12 +531,12 @@ function htmlPage(): string {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
border-radius: 0;
}
.thumb button {
border: 0;
border-radius: 8px;
border-radius: 0;
padding: 8px 10px;
background: var(--accent);
color: white;
@@ -581,7 +581,7 @@ function htmlPage(): string {
position: relative;
min-height: 170px;
padding: 14px 12px 10px;
border-radius: var(--radius-lg);
border-radius: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
background: var(--timeline-bg);
overflow: hidden;
@@ -621,7 +621,7 @@ function htmlPage(): string {
display: grid;
align-items: end;
cursor: pointer;
border-radius: 6px 6px 3px 3px;
border-radius: 0;
}
.timeline-bar-fill {
@@ -687,7 +687,7 @@ function htmlPage(): string {
position: absolute;
top: 14px;
bottom: 34px;
border-radius: 8px;
border-radius: 0;
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)),
@@ -708,7 +708,7 @@ function htmlPage(): string {
position: absolute;
top: 14px;
bottom: 34px;
border-radius: 8px;
border-radius: 0;
border: 1px dashed rgba(56, 189, 248, 0.9);
background: rgba(56, 189, 248, 0.16);
pointer-events: none;
@@ -751,7 +751,7 @@ function htmlPage(): string {
}
</style>
</head>
<body data-theme="dark">
<body data-theme="light">
<header>
<div class="brand">
<h1>mapy-mg</h1>
@@ -968,7 +968,7 @@ function htmlPage(): string {
}
const storedTheme = localStorage.getItem("theme");
setTheme(storedTheme === "light" ? "light" : "dark");
setTheme(storedTheme === "dark" ? "dark" : "light");
themeToggle.addEventListener("click", () => {
setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
});