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

feat: add public services landing page and docker compose setup

Browse Source
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-23 17:36:18 +02:00
parent 0bb12429d7
commit b0eee358c9
3 changed files with 303 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+66 -1
View File
@@ -1,3 +1,68 @@
# home.lucasacchi.net
Website HomeLab Public Services
Landing page statica per i servizi pubblici HomeLab del dominio `*.home.lucasacchi.net`.
## Contenuto progetto
- `index.html`: pagina principale moderna con Tailwind CSS (CDN), ricerca live e card servizi.
- `docker-compose.yml`: avvio rapido con web server `nginx:alpine`.
## Avvio rapido
### Opzione 1: anteprima locale (Five Server o simili)
1. Apri il progetto in VS Code.
2. Avvia il server statico (es. Five Server) sulla root del repository.
3. Apri la pagina nel browser sull'URL mostrato dall'estensione.
### Opzione 2: Docker Compose (consigliato)
Prerequisiti:
- Docker
- Docker Compose v2 (`docker compose`)
Comandi:
```bash
docker compose up -d
```
La pagina sarà disponibile su:
- `http://localhost:8080`
Stop:
```bash
docker compose down
```
## Aggiornare i servizi nella pagina
Per aggiungere/modificare un servizio:
1. Apri `index.html`.
2. Duplica una card `<li>` dentro `#service-list`.
3. Aggiorna questi campi:
- `data-name`
- `data-url`
- `href` del link
- titolo `<h2>`
- hostname mostrato nel `<p>`
La ricerca live funziona automaticamente leggendo `data-name` e `data-url`.
## Servizi attualmente pubblicati in pagina
- `logwhispererai.lab.home.lucasacchi.net`
- `n8n.lab.home.lucasacchi.net`
- `uptime.lab.home.lucasacchi.net`
- `gitea.lab.home.lucasacchi.net`
- `pastebin.lab.home.lucasacchi.net`
- `drawio.lab.home.lucasacchi.net`
- `archive.lab.home.lucasacchi.net`
- `mattermost.lab.home.lucasacchi.net`
- `jitsi.lab.home.lucasacchi.net`
- `lab.home.lucasacchi.net` (ProxmoxVE)
- `friday.lab.home.lucasacchi.net` (Chatbot OpenWeb-UI)
docker-compose.yml
+9
View File
@@ -0,0 +1,9 @@
services:
web:
image: nginx:alpine
container_name: home-lucasacchi-web
ports:
- "8080:80"
volumes:
- ./index.html:/usr/share/nginx/html/index.html:ro
restart: unless-stopped
index.html
+228
View File
@@ -0,0 +1,228 @@
<!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" />
<title>Servizi Pubblici | home.lucasacchi.net</title>
<meta
name="description"
content="Directory moderna dei servizi pubblici sul dominio home.lucasacchi.net"
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
display: ["Space Grotesk", "ui-sans-serif", "system-ui"],
body: ["Manrope", "ui-sans-serif", "system-ui"]
},
boxShadow: {
glow: "0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(8, 20, 40, .28)"
}
}
}
};
</script>
<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;
}
</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>
</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>