lucasacchi/home.lucasacchi.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: serve static site from public folder in docker

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-23 18:20:55 +02:00
parent 14941aa6c8
commit b8fd07463d
5 changed files with 281 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+2
View File
@@ -7,6 +7,7 @@ Landing page statica per i servizi pubblici HomeLab del dominio `*.home.lucasacc
- `index.html`: pagina principale moderna con Tailwind CSS compilato localmente, ricerca live e card servizi.
- `tailwind.input.css`: file sorgente Tailwind.
- `tailwind.css`: CSS compilato usato in produzione.
- `public/`: root statica servita dal container (`index.html`, `tailwind.css`, `favicon.svg`).
- `docker-compose.yml`: avvio rapido con web server `nginx:alpine`.
## Avvio rapido
@@ -30,6 +31,7 @@ Build CSS (quando cambi classi Tailwind in `index.html`):
```bash
npm install
npm run build
cp index.html tailwind.css favicon.svg public/
```
Comandi:
docker-compose.yml
+1 -3
View File
@@ -5,7 +5,5 @@ services:
ports:
- "8380:80"
volumes:
- ./index.html:/usr/share/nginx/html/index.html:ro
- ./tailwind.css:/usr/share/nginx/html/tailwind.css:ro
- ./favicon.svg:/usr/share/nginx/html/favicon.svg:ro
- ./public:/usr/share/nginx/html:ro
restart: unless-stopped
public/favicon.svg
+11
View File
@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="home.lucasacchi.net favicon">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#06b6d4"/>
<stop offset="100%" stop-color="#22c55e"/>
</linearGradient>
</defs>
<rect x="4" y="4" width="56" height="56" rx="14" fill="#0b1b33"/>
<path d="M12 34L32 14L52 34V50C52 53 49 56 46 56H18C15 56 12 53 12 50V34Z" fill="url(#bg)"/>
<rect x="26" y="39" width="12" height="17" rx="3" fill="#0b1b33"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 546 B

public/index.html
+266
View File
@@ -0,0 +1,266 @@
<!doctype html>
<html lang="it" class="h-full scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
<title>Servizi Pubblici | home.lucasacchi.net</title>
<meta
name="description"
content="Directory moderna dei servizi pubblici sul dominio home.lucasacchi.net"
/>
<link rel="stylesheet" href="./tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
--bg-0: #061124;
--bg-1: #0c1b34;
--bg-2: #13284d;
--card: rgba(10, 20, 40, 0.7);
--accent: #6ee7ff;
--accent-2: #7ef29a;
}
.bg-atmo {
background:
radial-gradient(1200px 500px at -10% -10%, rgba(110, 231, 255, 0.22), transparent 45%),
radial-gradient(900px 420px at 110% -20%, rgba(126, 242, 154, 0.14), transparent 40%),
linear-gradient(145deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
}
.grid-pattern {
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 24px 24px;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal {
animation: rise 0.45s ease-out both;
}
.font-display {
font-family: "Space Grotesk", ui-sans-serif, system-ui;
}
.font-body {
font-family: "Manrope", ui-sans-serif, system-ui;
}
.shadow-glow {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(8, 20, 40, 0.28);
}
</style>
</head>
<body class="min-h-full bg-atmo text-slate-100 font-body antialiased">
<div class="min-h-screen grid-pattern">
<main class="mx-auto w-full max-w-6xl px-4 pb-16 pt-10 sm:px-6 lg:px-8">
<header class="reveal">
<p class="inline-flex items-center gap-2 rounded-full border border-cyan-200/20 bg-cyan-300/10 px-3 py-1 text-xs font-semibold tracking-wide text-cyan-100">
Public Service Directory
</p>
<h1 class="mt-4 font-display text-4xl font-bold tracking-tight text-white sm:text-5xl">
home.lucasacchi.net
</h1>
<p class="mt-4 max-w-2xl text-sm text-slate-200/90 sm:text-base">
Elenco dei servizi pubblici individuati nel dominio <span class="font-semibold text-cyan-200">*.home.lucasacchi.net</span>.
Apertura rapida, ricerca istantanea e visual pulito per desktop e mobile.
</p>
</header>
<section class="reveal mt-8" style="animation-delay: 90ms">
<label for="search" class="sr-only">Cerca servizio</label>
<div class="relative">
<input
id="search"
type="search"
placeholder="Cerca per nome o URL..."
class="w-full rounded-2xl border border-white/15 bg-slate-900/60 px-4 py-3 pr-12 text-sm text-slate-100 placeholder:text-slate-400 focus:border-cyan-300/60 focus:outline-none focus:ring-2 focus:ring-cyan-300/40"
/>
<span class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-slate-400">⌕</span>
</div>
</section>
<section class="mt-8">
<ul id="service-list" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<li class="reveal" style="animation-delay: 140ms" data-name="LogWhispererAI" data-url="https://logwhispererai.lab.home.lucasacchi.net/">
<a href="https://logwhispererai.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">LogWhispererAI</h2>
<p class="mt-2 break-all text-sm text-slate-300">logwhispererai.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 170ms" data-name="n8n Lab" data-url="https://n8n.lab.home.lucasacchi.net">
<a href="https://n8n.lab.home.lucasacchi.net" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">n8n Lab</h2>
<p class="mt-2 break-all text-sm text-slate-300">n8n.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 200ms" data-name="Uptime Home" data-url="http://uptime.lab.home.lucasacchi.net/status/home">
<a href="http://uptime.lab.home.lucasacchi.net/status/home" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Uptime Home</h2>
<p class="mt-2 break-all text-sm text-slate-300">uptime.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 230ms" data-name="Gitea" data-url="https://gitea.lab.home.lucasacchi.net/">
<a href="https://gitea.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Gitea</h2>
<p class="mt-2 break-all text-sm text-slate-300">gitea.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 260ms" data-name="Pastebin" data-url="https://pastebin.lab.home.lucasacchi.net/">
<a href="https://pastebin.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Pastebin</h2>
<p class="mt-2 break-all text-sm text-slate-300">pastebin.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 290ms" data-name="DrawIO" data-url="https://drawio.lab.home.lucasacchi.net/">
<a href="https://drawio.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">DrawIO</h2>
<p class="mt-2 break-all text-sm text-slate-300">drawio.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 320ms" data-name="Tube Archivist" data-url="https://archive.lab.home.lucasacchi.net">
<a href="https://archive.lab.home.lucasacchi.net" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Tube Archivist</h2>
<p class="mt-2 break-all text-sm text-slate-300">archive.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 350ms" data-name="Mattermost" data-url="https://mattermost.lab.home.lucasacchi.net/">
<a href="https://mattermost.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Mattermost</h2>
<p class="mt-2 break-all text-sm text-slate-300">mattermost.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 380ms" data-name="Jitsi" data-url="https://jitsi.lab.home.lucasacchi.net/">
<a href="https://jitsi.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Jitsi</h2>
<p class="mt-2 break-all text-sm text-slate-300">jitsi.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 410ms" data-name="ProxmoxVE" data-url="https://lab.home.lucasacchi.net/">
<a href="https://lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">ProxmoxVE</h2>
<p class="mt-2 break-all text-sm text-slate-300">lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 440ms" data-name="Chatbot OpenWeb-UI" data-url="https://friday.lab.home.lucasacchi.net/">
<a href="https://friday.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Chatbot OpenWeb-UI</h2>
<p class="mt-2 break-all text-sm text-slate-300">friday.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 470ms" data-name="Vikunja" data-url="https://vikunja.lab.home.lucasacchi.net/">
<a href="https://vikunja.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Vikunja</h2>
<p class="mt-2 break-all text-sm text-slate-300">vikunja.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 500ms" data-name="Guacamole" data-url="https://guacamole.lab.home.lucasacchi.net/">
<a href="https://guacamole.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Guacamole</h2>
<p class="mt-2 break-all text-sm text-slate-300">guacamole.lab.home.lucasacchi.net</p>
</a>
</li>
<li class="reveal" style="animation-delay: 530ms" data-name="Nexterm" data-url="https://nexterm.home.lucasacchi.net/servers">
<a href="https://nexterm.home.lucasacchi.net/servers" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Nexterm</h2>
<p class="mt-2 break-all text-sm text-slate-300">nexterm.home.lucasacchi.net/servers</p>
</a>
</li>
<li class="reveal" style="animation-delay: 560ms" data-name="Portainer" data-url="https://portainer.lab.home.lucasacchi.net/#!/auth">
<a href="https://portainer.lab.home.lucasacchi.net/#!/auth" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">Portainer</h2>
<p class="mt-2 break-all text-sm text-slate-300">portainer.lab.home.lucasacchi.net/#!/auth</p>
</a>
</li>
<li class="reveal" style="animation-delay: 590ms" data-name="IT-Tools" data-url="https://it-tools.lab.home.lucasacchi.net/">
<a href="https://it-tools.lab.home.lucasacchi.net/" target="_blank" rel="noopener noreferrer" class="group block h-full rounded-2xl border border-white/15 bg-slate-950/55 p-5 shadow-glow transition hover:-translate-y-0.5 hover:border-cyan-200/40 hover:bg-slate-900/70">
<p class="text-xs font-semibold uppercase tracking-wider text-cyan-200/80">Servizio pubblico</p>
<h2 class="mt-2 text-lg font-bold text-white">IT-Tools</h2>
<p class="mt-2 break-all text-sm text-slate-300">it-tools.lab.home.lucasacchi.net</p>
</a>
</li>
</ul>
<p id="empty-state" class="mt-6 hidden rounded-xl border border-amber-300/20 bg-amber-200/10 px-4 py-3 text-sm text-amber-100">
Nessun servizio trovato con il filtro attuale.
</p>
</section>
</main>
</div>
<script>
const searchInput = document.getElementById("search");
const cards = Array.from(document.querySelectorAll("#service-list > li"));
const emptyState = document.getElementById("empty-state");
function filterServices(term) {
const query = term.trim().toLowerCase();
let visible = 0;
for (const card of cards) {
const name = card.dataset.name.toLowerCase();
const url = card.dataset.url.toLowerCase();
const show = name.includes(query) || url.includes(query);
card.classList.toggle("hidden", !show);
if (show) visible += 1;
}
emptyState.classList.toggle("hidden", visible > 0);
}
searchInput.addEventListener("input", (event) => {
filterServices(event.target.value);
});
</script>
</body>
</html>
public/tailwind.css
+1
View File
File diff suppressed because one or more lines are too long