add styles

build.js

@@ -10,7 +10,7 @@ const config = {
   format: "iife", // o 'iife' se serve per un tag <script> classico
   target: "es2020",
   sourcemap: isDev,
-  minify: !isDev,
+  minify: true,
   logLevel: "info",
 };
 

frontend/static/frontend/css/base.css

@@ -1,6 +1,37 @@
+:root {
+    color-scheme: dark;
+    --map-ink: #041005;
+    --map-void: #020a03;
+    --map-forest: #0b1f0e;
+    --map-grid: #0f2f17;
+    --map-road: #1de85b;
+    --map-road-soft: #119a3b;
+    --map-node: #6dff9d;
+    --map-label: #7dffa6;
+    --map-glow: rgba(19, 240, 97, 0.35);
+    --map-glow-strong: rgba(19, 240, 97, 0.65);
+    --map-surface: rgba(6, 20, 9, 0.85);
+    --map-surface-strong: rgba(6, 24, 10, 0.96);
+    --map-border: rgba(29, 232, 91, 0.35);
+    --map-border-strong: rgba(29, 232, 91, 0.6);
+    --map-text: #b5ffd0;
+    --map-muted: #6bbf83;
+    --map-accent: #1de85b;
+    --map-accent-hot: #9bff5c;
+}
+
+body {
+    background: radial-gradient(circle at top, #0b1f0e 0%, #041005 45%, #020a03 100%);
+    color: var(--map-text);
+    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+        monospace;
+}
+
 #map {
     width: 100%;
     height: 100vh;
+    background: radial-gradient(circle at 20% 10%, rgba(12, 48, 20, 0.85), rgba(4, 14, 7, 0.9)),
+        linear-gradient(140deg, rgba(5, 24, 10, 0.95), rgba(2, 8, 4, 0.98));
 }
 
 .site-header {
@@ -15,14 +46,13 @@
     justify-content: space-between;
     padding: 0.85rem 1.5rem;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.85);
+    background: linear-gradient(120deg, rgba(7, 24, 11, 0.9), rgba(6, 20, 9, 0.75));
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.6);
+    border: 1px solid var(--map-border);
-    box-shadow: 0 18px 40px rgba(24, 31, 59, 0.16);
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--map-glow);
-    font-family:
+    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
-        "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
         monospace;
-    color: #111827;
+    color: var(--map-text);
 }
 
 .site-brand {
@@ -32,6 +62,7 @@
     color: inherit;
     text-decoration: none;
     font-weight: 600;
+    text-shadow: 0 0 12px var(--map-glow);
 }
 
 .site-actions {
@@ -42,16 +73,16 @@
 }
 
 .site-user {
-    color: #4b5563;
+    color: var(--map-muted);
     font-weight: 500;
 }
 
 .site-link {
     text-decoration: none;
-    color: #111827;
+    color: var(--map-text);
     padding: 0.45rem 0.9rem;
     border-radius: 999px;
-    border: 1px solid rgba(17, 24, 39, 0.12);
+    border: 1px solid rgba(29, 232, 91, 0.25);
     transition:
         transform 0.2s ease,
         box-shadow 0.2s ease,
@@ -60,15 +91,16 @@
 
 .site-link:hover {
     transform: translateY(-1px);
-    border-color: rgba(17, 24, 39, 0.28);
+    border-color: var(--map-border-strong);
-    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35), 0 0 16px var(--map-glow);
 }
 
 .site-link--accent {
     border: none;
-    background: linear-gradient(130deg, #f97316, #facc15);
+    background: linear-gradient(130deg, #0fd64f, #9bff5c);
-    color: #1f2937;
+    color: #041005;
     font-weight: 600;
+    box-shadow: 0 0 18px rgba(15, 214, 79, 0.45);
 }
 
 @media (max-width: 720px) {
@@ -95,26 +127,19 @@
     align-items: center;
     justify-content: center;
     padding: 4rem 1.5rem;
-    background: radial-gradient(
+    background: radial-gradient(circle at top, #0e2613, #07180c 35%, #041106 65%, #020a03);
-        circle at top,
+    color: var(--map-text);
-        #eef5ff,
+    font-family: "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
-        #f7f0ff 35%,
-        #f7f6ff 65%,
-        #fdf6ef
-    );
-    color: #1f1f1f;
-    font-family:
-        "JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
         monospace;
 }
 
 .auth-card {
     width: min(420px, 100%);
-    background: #ffffff;
+    background: var(--map-surface);
     border-radius: 24px;
     padding: 2.5rem;
-    box-shadow: 0 24px 60px rgba(24, 31, 59, 0.12);
+    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 22px var(--map-glow);
-    border: 1px solid rgba(0, 0, 0, 0.05);
+    border: 1px solid var(--map-border);
 }
 
 .auth-header {
@@ -125,28 +150,28 @@
     text-transform: uppercase;
     letter-spacing: 0.2em;
     font-size: 0.7rem;
-    color: #57606a;
+    color: var(--map-muted);
     margin-bottom: 0.75rem;
 }
 
 .auth-title {
     font-size: 1.6rem;
     margin-bottom: 0.5rem;
-    color: #111827;
+    color: var(--map-text);
 }
 
 .auth-subtitle {
     font-size: 0.95rem;
-    color: #6b7280;
+    color: var(--map-muted);
 }
 
 .auth-messages {
     margin-bottom: 1.5rem;
-    background: #fff4f4;
+    background: rgba(18, 55, 26, 0.75);
-    border: 1px solid #ffccd2;
+    border: 1px solid rgba(110, 255, 157, 0.35);
     border-radius: 16px;
     padding: 0.75rem 1rem;
-    color: #b42318;
+    color: var(--map-accent-hot);
 }
 
 .auth-message {
@@ -158,6 +183,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    width: 100%;
 }
 
 .auth-field {
@@ -165,20 +191,26 @@
     flex-direction: column;
     gap: 0.45rem;
     font-size: 0.85rem;
-    color: #374151;
+    color: var(--map-muted);
+    width: 100%;
 }
 
 .auth-field input {
     padding: 0.7rem 0.9rem;
     border-radius: 12px;
-    border: 1px solid #d1d5db;
+    border: 1px solid rgba(109, 255, 157, 0.3);
     font-size: 0.95rem;
     font-family: inherit;
+    background: var(--map-surface-strong);
+    color: var(--map-text);
+    box-shadow: inset 0 0 0 1px rgba(3, 18, 7, 0.8);
+    width: 100%;
+    min-width: 0;
 }
 
 .auth-field input:focus {
-    outline: 2px solid rgba(76, 110, 245, 0.35);
+    outline: 2px solid rgba(29, 232, 91, 0.35);
-    border-color: #6d7bf7;
+    border-color: var(--map-accent);
 }
 
 .auth-submit {
@@ -186,8 +218,8 @@
     padding: 0.8rem 1rem;
     border-radius: 999px;
     border: none;
-    background: linear-gradient(130deg, #f97316, #facc15);
+    background: linear-gradient(130deg, #0fd64f, #9bff5c);
-    color: #1f2937;
+    color: #041005;
     font-weight: 600;
     cursor: pointer;
     transition:
@@ -197,17 +229,17 @@
 
 .auth-submit:hover {
     transform: translateY(-1px);
-    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.3);
+    box-shadow: 0 12px 25px rgba(15, 214, 79, 0.35), 0 0 18px var(--map-glow-strong);
 }
 
 .auth-footer {
     margin-top: 1.5rem;
     font-size: 0.85rem;
-    color: #6b7280;
+    color: var(--map-muted);
 }
 
 .auth-footer a {
-    color: #111827;
+    color: var(--map-text);
     font-weight: 600;
     text-decoration: none;
 }

frontend/static/frontend/ts/layers.ts

@@ -0,0 +1,13 @@
+import { AddLayerObject } from "maplibre-gl";
+
+export const HIGHLIGHT_LAYER = {
+  id: "buildings-highlight", // nome arbitrario del layer
+  type: "fill",
+  source: "buildings",
+  "source-layer": "building",
+  paint: {
+    "fill-color": "#41ff44",
+    "fill-opacity": 1,
+  },
+  filter: ["==", ["id"], ""],
+} as AddLayerObject;

frontend/static/frontend/ts/main.ts

@@ -1,3 +1,4 @@
+import { HIGHLIGHT_LAYER } from "./layers";
 import add from "./lib/add";
 
 import { Map } from "maplibre-gl";
@@ -8,7 +9,7 @@ const map = new Map({
   style:
     "https://api.maptiler.com/maps/019be805-c88e-7c8b-9850-bc704d72e604/style.json?key=8nmgHEIZQiIgqQj3RZNa",
   container: "map",
-  zoom: 15,
+  zoom: 14,
 });
 
 map.on("load", () => {
@@ -20,17 +21,7 @@ map.on("load", () => {
   });
 
   // Il layer per gli highlight
-  map.addLayer({
+  map.addLayer(HIGHLIGHT_LAYER);
-    id: "buildings-highlight", // nome arbitrario del layer
-    type: "fill",
-    source: "buildings",
-    "source-layer": "building",
-    paint: {
-      "fill-color": "#41ff44",
-      "fill-opacity": 1,
-    },
-    filter: ["==", ["id"], ""],
-  });
 
   map.on("mousemove", (ev) => {
     const features = map.queryRenderedFeatures(ev.point, {