admin/DroneWars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add styles

Browse Source
This commit is contained in:
Matteo Rosati
2026-02-11 21:52:15 +01:00
parent 9587995354
commit f05e91c2ce
5 changed files with 90 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build.js
View File

@@ -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",
};

BIN
db.sqlite3
View File

Binary file not shown.

114
frontend/static/frontend/css/base.css
View File

@@ -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);
box-shadow: 0 18px 40px rgba(24, 31, 59, 0.16);
font-family:
"JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
border: 1px solid var(--map-border);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 24px var(--map-glow);
font-family: "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);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
border-color: var(--map-border-strong);
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);
color: #1f2937;
background: linear-gradient(130deg, #0fd64f, #9bff5c);
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(
circle at top,
#eef5ff,
#f7f0ff 35%,
#f7f6ff 65%,
#fdf6ef
);
color: #1f1f1f;
font-family:
"JetBrains Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas",
background: radial-gradient(circle at top, #0e2613, #07180c 35%, #041106 65%, #020a03);
color: var(--map-text);
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);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 22px var(--map-glow);
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;
border: 1px solid #ffccd2;
background: rgba(18, 55, 26, 0.75);
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);
border-color: #6d7bf7;
outline: 2px solid rgba(29, 232, 91, 0.35);
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);
color: #1f2937;
background: linear-gradient(130deg, #0fd64f, #9bff5c);
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;
}

13
frontend/static/frontend/ts/layers.ts Normal file
View File

@@ -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;

15
frontend/static/frontend/ts/main.ts
View File

@@ -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({
id: "buildings-highlight", // nome arbitrario del layer
type: "fill",
source: "buildings",
"source-layer": "building",
paint: {
"fill-color": "#41ff44",
"fill-opacity": 1,
},
filter: ["==", ["id"], ""],
});
map.addLayer(HIGHLIGHT_LAYER);
map.on("mousemove", (ev) => {
const features = map.queryRenderedFeatures(ev.point, {