MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework MischLabs into service dashboard
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 15:11:52 +02:00
parent 0c3838da8a
commit 470220b8f4
9 changed files with 750 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Brain.md
View File

@@ -3,12 +3,15 @@
## Projektziel
Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. Laeuft als Docker-Container und wird ueber Git auto-deployed.
Aktueller Stand: Die Seite ist keine reine Linkliste mehr, sondern ein kompaktes Service-Dashboard mit Kategorien, Suche, Hintergrund-Statuscheck und PWA-Unterstuetzung.
## Status
- [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git)
- [x] Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
- [x] Landing Page Design und Implementierung (index.html + style.css)
- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
- [x] PWA-Grundlage fuer iOS/Home-Screen-Installation
- [x] Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
- [x] Push zum Remote
- [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
- [ ] Push des MiChess-Commits (Git-Auth-Token erneuern)
@@ -32,7 +35,7 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
| 8 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) |
## Technische Entscheidungen
- **Reines HTML + CSS mit minimalem PWA-JS** (kein Framework) - maximale Performance, minimales Docker-Image
- **Reines HTML + CSS mit minimalem Dashboard-/PWA-JS** (kein Framework) - maximale Performance, minimales Docker-Image
- **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
- **Google Fonts (Inter)** fuer moderne Typografie
- **Inline SVG Icons** - keine externen Dependencies
@@ -40,6 +43,8 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
- **Dark Theme** mit subtilen Glow-Effekten
- **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck)
- **PWA**: Manifest, Apple-Touch-Icon, App-Icons und Service Worker fuer installierbare iOS/Web-App
- **Dashboard**: Kategorien `Zugang`, `Medien`, `Arbeit`, `Persoenlich`, Suche und clientseitige no-cors Statuschecks
- **Auth-Link**: Zeigt auf die Keycloak Account Console (`/realms/mischlabs/account`), nicht mehr auf die Admin-Konsole
## Docker-Setup
- **Container-Name**: `mischlabs`
@@ -53,6 +58,8 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
mischlabs/
index.html - Haupt-HTML mit allen 9 Service-Kacheln
style.css - Komplettes Styling (Dark Theme, Grid, Animationen)
app.js - Suche, Filter, Statuschecks, Service-Worker-Registrierung
offline.html - Offline-Fallback fuer installierte PWA
manifest.webmanifest - PWA-Metadaten fuer installierbare App
sw.js - Schlanker Service Worker mit App-Shell-Cache
icons/ - App-Icons fuer iOS/PWA
@@ -98,8 +105,19 @@ mischlabs/
- `icons/icon-512.png` (512x512)
- `icons/maskable-512.png` (512x512, maskable)
- Service Worker:
- Cache-Name: `mischlabs-pwa-v1`
- Cached die App-Shell (`/`, `index.html`, `style.css?v=8`, Manifest und Icons)
- Navigationen fallen offline auf `index.html` zurueck
- Cache-Name: `mischlabs-pwa-v3`
- Cached die App-Shell (`/`, `index.html`, `offline.html`, `style.css?v=9`, `app.js?v=1`, Manifest und Icons)
- Navigationen fallen offline auf `offline.html` zurueck
- Dockerfile kopiert Manifest, Service Worker und Icons in das Nginx-Image.
- `nginx.conf` liefert `manifest.webmanifest` mit `application/manifest+json` und `sw.js` mit `no-cache` aus.
- `nginx.conf` liefert `manifest.webmanifest` mit `application/manifest+json` und `sw.js` mit harten No-Cache-Headern aus.
## Dashboard-v2-Stand 2026-05-21
- Neues Logo oben nutzt `icons/app-icon-source.png`.
- Die alte oeffentliche Auth-Kachel wurde auf die Keycloak Account Console umgebogen:
`https://auth.mischlabs.de/realms/mischlabs/account`
- Kategorien:
- Zugang: SSO, Drive, Passwords
- Medien: Movies, Audiobooks, Books
- Arbeit: Git, MiChess
- Persoenlich: Tom
- `app.js` prueft Dienste im Hintergrund per `fetch(..., { mode: "no-cors" })`. Das ist bewusst nur ein Erreichbarkeitsindikator, kein vollwertiges Monitoring.

2
Dockerfile
View File

@@ -2,7 +2,9 @@ FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY index.html /usr/share/nginx/html/
COPY offline.html /usr/share/nginx/html/
COPY style.css /usr/share/nginx/html/
COPY app.js /usr/share/nginx/html/
COPY manifest.webmanifest /usr/share/nginx/html/
COPY sw.js /usr/share/nginx/html/
COPY icons/ /usr/share/nginx/html/icons/

106
app.js Normal file
View File

@@ -0,0 +1,106 @@
const cards = [...document.querySelectorAll('.service-card')];
const sections = [...document.querySelectorAll('.section')];
const searchInput = document.querySelector('#serviceSearch');
const segments = [...document.querySelectorAll('.segment')];
const emptyState = document.querySelector('#emptyState');
const onlineCount = document.querySelector('#onlineCount');
const lastChecked = document.querySelector('#lastChecked');
let activeFilter = 'all';
function normalize(value) {
return value.toLowerCase().trim();
}
function updateVisibility() {
const term = normalize(searchInput.value);
let visibleCards = 0;
cards.forEach((card) => {
const categoryMatches = activeFilter === 'all' || card.dataset.category === activeFilter;
const searchMatches = !term || normalize(card.dataset.name).includes(term);
const isVisible = categoryMatches && searchMatches;
card.hidden = !isVisible;
if (isVisible) visibleCards += 1;
});
sections.forEach((section) => {
const hasVisibleCards = [...section.querySelectorAll('.service-card')].some((card) => !card.hidden);
section.hidden = !hasVisibleCards;
});
emptyState.hidden = visibleCards !== 0;
}
function setActiveFilter(nextFilter) {
activeFilter = nextFilter;
segments.forEach((segment) => {
const isActive = segment.dataset.filter === nextFilter;
segment.classList.toggle('is-active', isActive);
segment.setAttribute('aria-selected', String(isActive));
});
updateVisibility();
}
async function probeService(card) {
const controller = new AbortController();
const timeout = window.setTimeout(() => controller.abort(), 4500);
try {
await fetch(card.dataset.url, {
method: 'GET',
mode: 'no-cors',
cache: 'no-store',
signal: controller.signal
});
card.classList.add('is-online');
card.classList.remove('is-offline');
card.querySelector('.status-dot').setAttribute('aria-label', 'Online');
return true;
} catch {
card.classList.add('is-offline');
card.classList.remove('is-online');
card.querySelector('.status-dot').setAttribute('aria-label', 'Nicht erreichbar');
return false;
} finally {
window.clearTimeout(timeout);
}
}
async function refreshStatus() {
const results = await Promise.allSettled(cards.map(probeService));
const online = results.filter((result) => result.status === 'fulfilled' && result.value).length;
onlineCount.textContent = String(online);
lastChecked.textContent = `Status geprueft: ${new Date().toLocaleTimeString('de-DE', {
hour: '2-digit',
minute: '2-digit'
})}`;
}
segments.forEach((segment) => {
segment.addEventListener('click', () => setActiveFilter(segment.dataset.filter));
});
searchInput.addEventListener('input', updateVisibility);
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(() => {});
});
}
window.addEventListener('load', () => {
const run = () => refreshStatus().catch(() => {
onlineCount.textContent = '--';
lastChecked.textContent = 'Status aktuell nicht verfuegbar.';
});
if ('requestIdleCallback' in window) {
window.requestIdleCallback(run, { timeout: 2000 });
} else {
window.setTimeout(run, 600);
}
});
updateVisibility();

270
index.html
View File

@@ -3,178 +3,254 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs - Services</title>
<meta name="description" content="MischLabs service hub for self-hosted apps.">
<meta name="theme-color" content="#10b981">
<title>MischLabs - Dashboard</title>
<meta name="description" content="MischLabs service dashboard for self-hosted apps.">
<meta name="theme-color" content="#0f172a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MischLabs">
<link rel="manifest" href="/manifest.webmanifest?v=2">
<link rel="manifest" href="/manifest.webmanifest?v=3">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-v2.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
<link rel="stylesheet" href="style.css?v=8">
<link rel="stylesheet" href="style.css?v=9">
</head>
<body>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<header>
<div class="logo">
<span class="logo-icon">&#9881;</span>
<h1>Misch<span>Labs</span></h1>
<header class="shell hero">
<div class="brand">
<img class="brand-mark" src="/icons/app-icon-source.png" alt="" width="72" height="72">
<div>
<p class="eyebrow">Self-hosted dashboard</p>
<h1>MischLabs</h1>
<p class="subtitle">Cloud, Medien, Code und Spielwiese an einem Ort.</p>
</div>
</div>
<div class="hero-meta" aria-label="Systemuebersicht">
<div class="metric">
<span class="metric-value" id="onlineCount">--</span>
<span class="metric-label">Online</span>
</div>
<div class="metric">
<span class="metric-value">9</span>
<span class="metric-label">Dienste</span>
</div>
<div class="metric">
<span class="metric-value">PWA</span>
<span class="metric-label">Installierbar</span>
</div>
</div>
<p class="subtitle">Self-Hosted Services</p>
</header>
<main>
<a href="https://auth.mischlabs.de" class="card card-banner" target="_blank" rel="noopener">
<main class="shell">
<section class="control-bar" aria-label="Dienste filtern">
<label class="search-box">
<span class="search-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="7"></circle>
<path d="m20 20-3.5-3.5"></path>
</svg>
</span>
<input id="serviceSearch" type="search" placeholder="Dienst suchen" autocomplete="off">
</label>
<div class="segments" role="tablist" aria-label="Kategorien">
<button class="segment is-active" type="button" data-filter="all">Alle</button>
<button class="segment" type="button" data-filter="access">Zugang</button>
<button class="segment" type="button" data-filter="media">Medien</button>
<button class="segment" type="button" data-filter="work">Arbeit</button>
<button class="segment" type="button" data-filter="personal">Persoenlich</button>
</div>
</section>
<section class="section">
<div class="section-heading">
<div>
<p class="section-kicker">Zugang</p>
<h2>Accounts & Sicherheit</h2>
</div>
<span class="section-count">3 Dienste</span>
</div>
<div class="grid">
<a href="https://auth.mischlabs.de/realms/mischlabs/account" class="card card-wide service-card" target="_blank" rel="noopener" data-category="access" data-url="https://auth.mischlabs.de/realms/mischlabs/account" data-name="single sign-on keycloak account login auth">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #f59e0b;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
<path d="M9 12l2 2 4-4"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
<path d="M9 12l2 2 4-4"></path>
</svg>
</div>
<div class="card-content">
<h2>Single Sign-On</h2>
<p>Zentrales Login fuer alle Dienste</p>
<h3>Single Sign-On</h3>
<p>Account, Sitzungen und Sicherheit</p>
</div>
<span class="card-domain">auth.mischlabs.de</span>
</a>
<div class="grid">
<a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #4285f4;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
<a href="https://drive.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="access" data-url="https://drive.mischlabs.de" data-name="drive nextcloud cloud speicher dateien">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #60a5fa;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div class="card-content">
<h2>Drive</h2>
<h3>Drive</h3>
<p>Cloud-Speicher</p>
</div>
<span class="card-domain">drive.mischlabs.de</span>
</a>
<a href="https://git.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #f05033;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"/><line x1="1.05" y1="12" x2="7" y2="12"/><line x1="17.01" y1="12" x2="22.96" y2="12"/>
<path d="M12 1.05V7"/><path d="M12 17.01v5.95"/>
<a href="https://password.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="access" data-url="https://password.mischlabs.de" data-name="passwords vaultwarden passwort manager security">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #eab308;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
<circle cx="12" cy="16" r="1"></circle>
</svg>
</div>
<div class="card-content">
<h2>Git</h2>
<p>Code-Repositories</p>
<h3>Passwords</h3>
<p>Passwort-Manager</p>
</div>
<span class="card-domain">git.mischlabs.de</span>
<span class="card-domain">password.mischlabs.de</span>
</a>
</div>
</section>
<a href="https://movies.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #a855f7;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/>
<line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/>
<line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/>
<line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/>
<line x1="17" y1="7" x2="22" y2="7"/>
<section class="section">
<div class="section-heading">
<div>
<p class="section-kicker">Medien</p>
<h2>Bibliothek & Streaming</h2>
</div>
<span class="section-count">3 Dienste</span>
</div>
<div class="grid">
<a href="https://movies.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="media" data-url="https://movies.mischlabs.de" data-name="movies jellyfin filme serien media streaming">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #a78bfa;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="2" width="20" height="20" rx="2.2"></rect>
<line x1="7" y1="2" x2="7" y2="22"></line>
<line x1="17" y1="2" x2="17" y2="22"></line>
<line x1="2" y1="12" x2="22" y2="12"></line>
</svg>
</div>
<div class="card-content">
<h2>Movies</h2>
<p>Filme &amp; Serien</p>
<h3>Movies</h3>
<p>Filme & Serien</p>
</div>
<span class="card-domain">movies.mischlabs.de</span>
</a>
<a href="https://audiobook.mischlabs.de" class="card" target="_blank" rel="noopener">
<a href="https://audiobook.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="media" data-url="https://audiobook.mischlabs.de" data-name="audiobooks audiobookshelf hoerbuecher audio">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #22c55e;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
<path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 18v-6a9 9 0 0 1 18 0v6"></path>
<path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path>
</svg>
</div>
<div class="card-content">
<h2>Audiobooks</h2>
<h3>Audiobooks</h3>
<p>Hoerbuecher</p>
</div>
<span class="card-domain">audiobook.mischlabs.de</span>
</a>
<a href="https://password.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #eab308;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
<circle cx="12" cy="16" r="1"/>
</svg>
</div>
<div class="card-content">
<h2>Passwords</h2>
<p>Passwort-Manager</p>
</div>
<span class="card-domain">password.mischlabs.de</span>
</a>
<a href="https://books.mischlabs.de" class="card" target="_blank" rel="noopener">
<a href="https://books.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="media" data-url="https://books.mischlabs.de" data-name="books calibre calibre-web buecher bibliothek">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #06b6d4;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
</svg>
</div>
<div class="card-content">
<h2>Books</h2>
<p>Buecher &amp; Bibliothek</p>
<h3>Books</h3>
<p>Buecher & Bibliothek</p>
</div>
<span class="card-domain">books.mischlabs.de</span>
</a>
</div>
</section>
<a href="https://michess.mischlabs.de" class="card" target="_blank" rel="noopener">
<div class="card-icon" style="--accent: #10b981;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 16l-1 4h10l-1-4"/>
<path d="M6.5 16h11"/>
<path d="M12 2a2 2 0 0 1 2 2c0 1.1-.9 2-2 3-1.1-1-2-1.9-2-3a2 2 0 0 1 2-2z"/>
<path d="M9 7L6 10.5c-.6.7-.2 1.5.7 1.5h10.6c.9 0 1.3-.8.7-1.5L15 7"/>
<path d="M9 12v4"/>
<path d="M15 12v4"/>
<section class="section">
<div class="section-heading">
<div>
<p class="section-kicker">Arbeit</p>
<h2>Code, Projekte & Spiel</h2>
</div>
<span class="section-count">3 Dienste</span>
</div>
<div class="grid">
<a href="https://git.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="work" data-url="https://git.mischlabs.de" data-name="git gitea code repositories ci actions">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #f97316;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="4"></circle>
<line x1="1.05" y1="12" x2="7" y2="12"></line>
<line x1="17.01" y1="12" x2="22.96" y2="12"></line>
<path d="M12 1.05V7"></path>
<path d="M12 17.01v5.95"></path>
</svg>
</div>
<div class="card-content">
<h2>MiChess</h2>
<h3>Git</h3>
<p>Code-Repositories</p>
</div>
<span class="card-domain">git.mischlabs.de</span>
</a>
<a href="https://michess.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="work" data-url="https://michess.mischlabs.de" data-name="michess schach game chess">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #10b981;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M8 16l-1 4h10l-1-4"></path>
<path d="M6.5 16h11"></path>
<path d="M12 2a2 2 0 0 1 2 2c0 1.1-.9 2-2 3-1.1-1-2-1.9-2-3a2 2 0 0 1 2-2z"></path>
<path d="M9 7 6 10.5c-.6.7-.2 1.5.7 1.5h10.6c.9 0 1.3-.8.7-1.5L15 7"></path>
<path d="M9 12v4"></path>
<path d="M15 12v4"></path>
</svg>
</div>
<div class="card-content">
<h3>MiChess</h3>
<p>Schach</p>
</div>
<span class="card-domain">michess.mischlabs.de</span>
</a>
<a href="https://tom.mischlabs.de" class="card" target="_blank" rel="noopener">
<a href="https://tom.mischlabs.de" class="card service-card" target="_blank" rel="noopener" data-category="personal" data-url="https://tom.mischlabs.de" data-name="tom photography mischkomposition portfolio persoenlich fotos">
<span class="status-dot" aria-label="Status wird geprueft"></span>
<div class="card-icon" style="--accent: #ec4899;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
<circle cx="12" cy="7" r="4"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="card-content">
<h2>Tom</h2>
<p>Persoenliche Seite</p>
<h3>Tom</h3>
<p>Photography</p>
</div>
<span class="card-domain">tom.mischlabs.de</span>
</a>
</div>
</section>
<p class="empty-state" id="emptyState" hidden>Kein Dienst passt zur Suche.</p>
</main>
<footer>
<p>&copy; 2026 MischLabs &mdash; Self-Hosted with care</p>
<footer class="shell footer">
<span>MischLabs</span>
<span id="lastChecked">Status wird im Hintergrund geprueft.</span>
</footer>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(() => {});
});
}
</script>
<script src="/app.js?v=1" defer></script>
</body>
</html>

4
manifest.webmanifest
View File

@@ -1,14 +1,14 @@
{
"name": "MischLabs",
"short_name": "MischLabs",
"description": "Self-hosted service hub for MischLabs.",
"description": "Self-hosted service dashboard for MischLabs.",
"lang": "de",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#0a0a0f",
"theme_color": "#10b981",
"theme_color": "#0f172a",
"categories": ["productivity", "utilities"],
"icons": [
{

3
nginx.conf
View File

@@ -16,7 +16,8 @@ server {
location = /sw.js {
default_type application/javascript;
add_header Cache-Control "no-cache" always;
expires off;
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0" always;
}
# Cache static assets

23
offline.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs - Offline</title>
<meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=9">
</head>
<body>
<main class="shell hero">
<div class="brand">
<img class="brand-mark" src="/icons/app-icon-source.png" alt="" width="72" height="72">
<div>
<p class="eyebrow">Offline</p>
<h1>MischLabs</h1>
<p class="subtitle">Die App ist installiert, aber die Dienste sind gerade nicht erreichbar.</p>
</div>
</div>
</main>
</body>
</html>

647
style.css
View File

@@ -1,368 +1,487 @@
/* ===== Reset & Base ===== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
margin: 0;
}
:root {
--bg: #0a0a0f;
--surface: #13131a;
--surface-hover: #1a1a24;
--border: rgba(255, 255, 255, 0.06);
--border-hover: rgba(255, 255, 255, 0.12);
--text: #e4e4e7;
--text-muted: #71717a;
--text-dim: #52525b;
--radius: 16px;
color-scheme: dark;
--bg: #070914;
--surface: #111624;
--surface-2: #171d2d;
--surface-hover: #1c2435;
--border: rgba(226, 232, 240, 0.1);
--border-strong: rgba(226, 232, 240, 0.18);
--text: #eef2ff;
--muted: #9aa6bd;
--dim: #647085;
--ok: #34d399;
--warn: #fbbf24;
--down: #fb7185;
--radius: 8px;
}
html {
min-height: 100%;
font-size: 16px;
scroll-behavior: smooth;
background: var(--bg);
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
position: relative;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 13, 27, 0.98)),
repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 120px);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ===== Background Glows ===== */
.bg-glow {
position: fixed;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
pointer-events: none;
z-index: 0;
a,
button,
input {
font: inherit;
}
.bg-glow-1 {
width: 600px;
height: 600px;
background: #4285f4;
top: -200px;
left: -100px;
button,
input {
border: 0;
}
.bg-glow-2 {
width: 500px;
height: 500px;
background: #a855f7;
bottom: -150px;
right: -100px;
.shell {
width: min(1160px, calc(100% - 32px));
margin-inline: auto;
}
/* ===== Header ===== */
header {
text-align: center;
padding: 4rem 2rem 2rem;
position: relative;
z-index: 1;
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: end;
padding: 32px 0 22px;
}
.logo {
.brand {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
gap: 16px;
min-width: 0;
}
.logo-icon {
font-size: 2rem;
opacity: 0.6;
animation: spin 20s linear infinite;
.brand-mark {
width: 72px;
height: 72px;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
object-fit: cover;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
h1 {
font-size: 2.5rem;
.eyebrow,
.section-kicker {
color: #67e8f9;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: -0.03em;
color: #fff;
}
h1 span {
background: linear-gradient(135deg, #4285f4, #a855f7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
color: var(--text-muted);
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05em;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ===== Main Grid ===== */
h1 {
margin-top: 4px;
font-size: clamp(2rem, 6vw, 4.4rem);
line-height: 0.95;
letter-spacing: 0;
}
.subtitle {
max-width: 560px;
margin-top: 10px;
color: var(--muted);
font-size: clamp(0.95rem, 2vw, 1.05rem);
}
.hero-meta {
display: grid;
grid-template-columns: repeat(3, minmax(82px, 1fr));
gap: 10px;
}
.metric {
min-width: 88px;
padding: 13px 14px;
background: rgba(17, 22, 36, 0.78);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.metric-value {
display: block;
color: #fff;
font-size: 1.05rem;
font-weight: 750;
line-height: 1.1;
}
.metric-label {
display: block;
margin-top: 4px;
color: var(--dim);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
main {
width: 100%;
max-width: 1100px;
padding: 2rem;
padding-bottom: 20px;
}
.control-bar {
position: sticky;
top: 0;
z-index: 10;
display: grid;
grid-template-columns: minmax(220px, 360px) 1fr;
gap: 12px;
align-items: center;
padding: 12px 0;
backdrop-filter: blur(16px);
}
.search-box {
position: relative;
z-index: 1;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
left: 13px;
width: 18px;
height: 18px;
color: var(--dim);
pointer-events: none;
}
.search-box input {
width: 100%;
height: 44px;
padding: 0 14px 0 40px;
color: var(--text);
background: rgba(17, 22, 36, 0.92);
border: 1px solid var(--border);
border-radius: var(--radius);
outline: none;
}
.search-box input:focus {
border-color: rgba(103, 232, 249, 0.45);
box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.08);
}
.segments {
display: flex;
justify-content: flex-end;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
}
.segments::-webkit-scrollbar {
display: none;
}
.segment {
min-width: max-content;
height: 36px;
padding: 0 13px;
color: var(--muted);
background: rgba(17, 22, 36, 0.78);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
}
.segment.is-active {
color: #061014;
background: #67e8f9;
border-color: #67e8f9;
}
.section {
margin-top: 18px;
}
.section[hidden],
.service-card[hidden] {
display: none;
}
.section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.section-heading h2 {
margin-top: 4px;
font-size: 1.08rem;
letter-spacing: 0;
}
.section-count {
color: var(--dim);
font-size: 0.78rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* ===== Banner Card (Auth) ===== */
.card.card-banner {
flex-direction: row !important;
align-items: center;
gap: 1rem;
padding: 0.75rem 1.5rem;
margin-bottom: 1.25rem;
animation: fadeInUp 0.5s ease backwards;
}
.card.card-banner .card-icon {
width: 36px;
height: 36px;
border-radius: 8px;
}
.card.card-banner .card-icon svg {
width: 18px;
height: 18px;
}
.card.card-banner .card-content {
flex: 1;
}
.card.card-banner .card-content h2 {
font-size: 0.95rem;
}
.card.card-banner .card-content p {
font-size: 0.75rem;
}
.card.card-banner .card-domain {
border-top: none;
padding-top: 0;
border-left: 1px solid var(--border);
padding-left: 1rem;
}
/* ===== Card ===== */
.card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
background: var(--surface);
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 12px 14px;
min-height: 134px;
padding: 16px;
color: var(--text);
text-decoration: none;
background: linear-gradient(180deg, rgba(23, 29, 45, 0.96), rgba(14, 19, 31, 0.96));
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--text);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
isolation: isolate;
overflow: visible;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.card > * {
position: relative;
z-index: 3;
z-index: 2;
}
.card::before {
content: '';
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.03),
transparent 40%
),
var(--surface);
opacity: 1;
transition: background 0.3s;
z-index: 1;
border-radius: inherit;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 48%);
opacity: 0.4;
pointer-events: none;
}
.card:hover::before {
background:
radial-gradient(
600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(255, 255, 255, 0.03),
transparent 40%
),
var(--surface-hover);
}
.card::after {
content: '';
content: "";
position: absolute;
top: -36px;
right: 1.15rem;
right: 1.1rem;
z-index: 0;
width: 78px;
height: 62px;
background-image: url("data:image/svg+xml,%3Csvg width='96' height='76' viewBox='0 0 96 76' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 31 17 7l22 13 18-1L79 7l-5 24c7 6 11 14 11 23 0 17-16 22-37 22S11 71 11 54c0-9 4-17 11-23Z' fill='%23f7c98f'/%3E%3Cpath d='M24 30 20 13l16 10M72 30l4-17-16 10' fill='%23f09f7f'/%3E%3Cellipse cx='35' cy='45' rx='6.5' ry='7.5' fill='%2325221f'/%3E%3Cellipse cx='61' cy='45' rx='6.5' ry='7.5' fill='%2325221f'/%3E%3Ccircle cx='37' cy='42' r='2.1' fill='%23fff8ef'/%3E%3Ccircle cx='63' cy='42' r='2.1' fill='%23fff8ef'/%3E%3Ccircle cx='33' cy='48' r='1.1' fill='%23fff8ef' opacity='.75'/%3E%3Ccircle cx='59' cy='48' r='1.1' fill='%23fff8ef' opacity='.75'/%3E%3Cpath d='M48 52c-2 0-4 1-4 3s2 3 4 3 4-1 4-3-2-3-4-3Z' fill='%23b65f53'/%3E%3Cpath d='M48 58c-3 5-9 5-12 1M48 58c3 5 9 5 12 1' fill='none' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M24 51H4M26 58H7M72 51h20M70 58h19' stroke='%2325221f' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M19 31c8-7 18-10 29-10s21 3 29 10' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
transform: translateY(34px) rotate(-7deg);
transition:
opacity 0.22s ease,
transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 0;
transform: translateY(28px) rotate(-7deg);
transition: opacity 0.18s ease, transform 0.24s ease;
pointer-events: none;
}
.card:hover {
border-color: var(--border-hover);
transform: translateY(-4px);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.05);
z-index: 3;
.card:hover,
.card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
background: linear-gradient(180deg, rgba(29, 37, 56, 0.98), rgba(17, 22, 36, 0.98));
transform: translateY(-2px);
}
.card:hover::after {
.card:hover::after,
.card:focus-visible::after {
opacity: 1;
transform: translateY(-10px) rotate(-7deg);
transform: translateY(-9px) rotate(-7deg);
}
.card:focus-visible {
outline: 3px solid rgba(103, 232, 249, 0.2);
outline-offset: 3px;
}
.card-wide {
grid-column: span 1;
}
/* ===== Card Icon ===== */
.card-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--accent) 15%, transparent);
color: var(--accent);
transition: all 0.3s ease;
}
.card:hover .card-icon {
background: color-mix(in srgb, var(--accent) 25%, transparent);
transform: scale(1.05);
background: color-mix(in srgb, var(--accent) 15%, rgba(255, 255, 255, 0.02));
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
border-radius: var(--radius);
}
.card-icon svg {
width: 24px;
height: 24px;
width: 23px;
height: 23px;
}
/* ===== Card Content ===== */
.card-content h2 {
font-size: 1.15rem;
font-weight: 600;
.card-content {
min-width: 0;
}
.card-content h3 {
color: #fff;
letter-spacing: -0.01em;
font-size: 1.04rem;
letter-spacing: 0;
}
.card-content p {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 0.15rem;
margin-top: 4px;
color: var(--muted);
font-size: 0.86rem;
line-height: 1.35;
}
/* ===== Card Domain ===== */
.card-domain {
font-size: 0.75rem;
color: var(--text-dim);
font-family: 'SF Mono', 'Fira Code', monospace;
padding-top: 0.5rem;
grid-column: 1 / -1;
align-self: end;
padding-top: 10px;
color: var(--dim);
border-top: 1px solid var(--border);
transition: color 0.3s;
font: 0.74rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
overflow-wrap: anywhere;
}
.card:hover .card-domain {
color: var(--text-muted);
.status-dot {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--warn);
box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.1);
}
/* ===== Footer ===== */
footer {
margin-top: auto;
padding: 3rem 2rem 2rem;
.service-card.is-online .status-dot {
background: var(--ok);
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.1);
}
.service-card.is-offline .status-dot {
background: var(--down);
box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.1);
}
.empty-state {
margin: 32px 0;
padding: 18px;
color: var(--muted);
text-align: center;
position: relative;
z-index: 1;
background: rgba(17, 22, 36, 0.72);
border: 1px solid var(--border);
border-radius: var(--radius);
}
footer p {
color: var(--text-dim);
.footer {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 28px 0 32px;
color: var(--dim);
font-size: 0.8rem;
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.bg-glow {
display: none;
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
align-items: start;
}
header {
padding: 3rem 1.5rem 1.5rem;
.hero-meta {
width: 100%;
}
h1 {
font-size: 2rem;
.control-bar {
grid-template-columns: 1fr;
}
main {
padding: 1rem;
.segments {
justify-content: flex-start;
}
.grid {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.shell {
width: min(100% - 24px, 1160px);
}
.hero {
padding-top: 22px;
}
.brand {
align-items: flex-start;
}
.brand-mark {
width: 58px;
height: 58px;
}
.hero-meta {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.metric {
min-width: 0;
padding: 11px 10px;
}
.metric-value {
font-size: 0.94rem;
}
.grid {
grid-template-columns: 1fr;
gap: 10px;
}
.card {
padding: 1.25rem;
animation: none;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
min-height: 112px;
padding: 14px;
}
.card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
.section-heading {
align-items: start;
}
.card-icon svg {
width: 20px;
height: 20px;
.section-count {
display: none;
}
.card-banner {
margin-bottom: 0.75rem;
.footer {
flex-direction: column;
padding-bottom: 24px;
}
}
@@ -376,49 +495,13 @@ footer p {
}
}
@media (max-width: 480px) {
.card-banner {
flex-direction: column;
align-items: flex-start;
}
.card-banner .card-domain {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--border);
padding-top: 0.5rem;
}
.grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.75rem;
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ===== Animations ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeInUp 0.5s ease backwards;
}
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }
.card:nth-child(7) { animation-delay: 0.35s; }
.card:nth-child(8) { animation-delay: 0.4s; }
.card:nth-child(9) { animation-delay: 0.45s; }

10
sw.js
View File

@@ -1,9 +1,11 @@
const CACHE_NAME = 'mischlabs-pwa-v2';
const CACHE_NAME = 'mischlabs-pwa-v3';
const APP_SHELL = [
'/',
'/index.html',
'/style.css?v=8',
'/manifest.webmanifest?v=2',
'/offline.html',
'/style.css?v=9',
'/app.js?v=1',
'/manifest.webmanifest?v=3',
'/icons/icon-192.png',
'/icons/icon-512.png',
'/icons/apple-touch-icon-v2.png'
@@ -34,7 +36,7 @@ self.addEventListener('fetch', (event) => {
if (request.mode === 'navigate') {
event.respondWith(
fetch(request).catch(() => caches.match('/index.html'))
fetch(request).catch(() => caches.match('/offline.html'))
);
return;
}