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 ## 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. 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 ## Status
- [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git) - [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] Dienste-Liste vom Screenshot erfasst (9 Services inkl. MiChess)
- [x] Landing Page Design und Implementierung (index.html + style.css) - [x] Landing Page Design und Implementierung (index.html + style.css)
- [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf) - [x] Docker-Setup (Dockerfile, docker-compose.yml, nginx.conf)
- [x] PWA-Grundlage fuer iOS/Home-Screen-Installation - [x] PWA-Grundlage fuer iOS/Home-Screen-Installation
- [x] Dashboard v2 mit Kategorien, Suche und Live-Statusindikatoren
- [x] Push zum Remote - [x] Push zum Remote
- [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler) - [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
- [ ] Push des MiChess-Commits (Git-Auth-Token erneuern) - [ ] 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) | | 8 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) |
## Technische Entscheidungen ## 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) - **nginx:alpine** als Base-Image - extrem leichtgewichtig (~5MB)
- **Google Fonts (Inter)** fuer moderne Typografie - **Google Fonts (Inter)** fuer moderne Typografie
- **Inline SVG Icons** - keine externen Dependencies - **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 - **Dark Theme** mit subtilen Glow-Effekten
- **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck) - **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck)
- **PWA**: Manifest, Apple-Touch-Icon, App-Icons und Service Worker fuer installierbare iOS/Web-App - **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 ## Docker-Setup
- **Container-Name**: `mischlabs` - **Container-Name**: `mischlabs`
@@ -53,6 +58,8 @@ Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln m
mischlabs/ mischlabs/
index.html - Haupt-HTML mit allen 9 Service-Kacheln index.html - Haupt-HTML mit allen 9 Service-Kacheln
style.css - Komplettes Styling (Dark Theme, Grid, Animationen) 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 manifest.webmanifest - PWA-Metadaten fuer installierbare App
sw.js - Schlanker Service Worker mit App-Shell-Cache sw.js - Schlanker Service Worker mit App-Shell-Cache
icons/ - App-Icons fuer iOS/PWA icons/ - App-Icons fuer iOS/PWA
@@ -98,8 +105,19 @@ mischlabs/
- `icons/icon-512.png` (512x512) - `icons/icon-512.png` (512x512)
- `icons/maskable-512.png` (512x512, maskable) - `icons/maskable-512.png` (512x512, maskable)
- Service Worker: - Service Worker:
- Cache-Name: `mischlabs-pwa-v1` - Cache-Name: `mischlabs-pwa-v3`
- Cached die App-Shell (`/`, `index.html`, `style.css?v=8`, Manifest und Icons) - Cached die App-Shell (`/`, `index.html`, `offline.html`, `style.css?v=9`, `app.js?v=1`, Manifest und Icons)
- Navigationen fallen offline auf `index.html` zurueck - Navigationen fallen offline auf `offline.html` zurueck
- Dockerfile kopiert Manifest, Service Worker und Icons in das Nginx-Image. - 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 nginx.conf /etc/nginx/conf.d/default.conf
COPY index.html /usr/share/nginx/html/ COPY index.html /usr/share/nginx/html/
COPY offline.html /usr/share/nginx/html/
COPY style.css /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 manifest.webmanifest /usr/share/nginx/html/
COPY sw.js /usr/share/nginx/html/ COPY sw.js /usr/share/nginx/html/
COPY icons/ /usr/share/nginx/html/icons/ 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();

366
index.html
View File

@@ -3,178 +3,254 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MischLabs - Services</title> <title>MischLabs - Dashboard</title>
<meta name="description" content="MischLabs service hub for self-hosted apps."> <meta name="description" content="MischLabs service dashboard for self-hosted apps.">
<meta name="theme-color" content="#10b981"> <meta name="theme-color" content="#0f172a">
<meta name="apple-mobile-web-app-capable" content="yes"> <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-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MischLabs"> <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="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="192x192" href="/icons/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.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> </head>
<body> <body>
<div class="bg-glow bg-glow-1"></div> <header class="shell hero">
<div class="bg-glow bg-glow-2"></div> <div class="brand">
<img class="brand-mark" src="/icons/app-icon-source.png" alt="" width="72" height="72">
<header> <div>
<div class="logo"> <p class="eyebrow">Self-hosted dashboard</p>
<span class="logo-icon">&#9881;</span> <h1>MischLabs</h1>
<h1>Misch<span>Labs</span></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> </div>
<p class="subtitle">Self-Hosted Services</p>
</header> </header>
<main> <main class="shell">
<a href="https://auth.mischlabs.de" class="card card-banner" target="_blank" rel="noopener"> <section class="control-bar" aria-label="Dienste filtern">
<div class="card-icon" style="--accent: #f59e0b;"> <label class="search-box">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <span class="search-icon" aria-hidden="true">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 12l2 2 4-4"/> <circle cx="11" cy="11" r="7"></circle>
</svg> <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> </div>
<div class="card-content"> </section>
<h2>Single Sign-On</h2>
<p>Zentrales Login fuer alle Dienste</p> <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>
<span class="card-domain">auth.mischlabs.de</span>
</a>
<div class="grid"> <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.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">
<h3>Single Sign-On</h3>
<p>Account, Sitzungen und Sicherheit</p>
</div>
<span class="card-domain">auth.mischlabs.de</span>
</a>
<a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener"> <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">
<div class="card-icon" style="--accent: #4285f4;"> <span class="status-dot" aria-label="Status wird geprueft"></span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <div class="card-icon" style="--accent: #60a5fa;">
<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"/> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
</svg> <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>
</div> </svg>
<div class="card-content"> </div>
<h2>Drive</h2> <div class="card-content">
<p>Cloud-Speicher</p> <h3>Drive</h3>
</div> <p>Cloud-Speicher</p>
<span class="card-domain">drive.mischlabs.de</span> </div>
</a> <span class="card-domain">drive.mischlabs.de</span>
</a>
<a href="https://git.mischlabs.de" class="card" target="_blank" rel="noopener"> <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">
<div class="card-icon" style="--accent: #f05033;"> <span class="status-dot" aria-label="Status wird geprueft"></span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <div class="card-icon" style="--accent: #eab308;">
<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"/> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 1.05V7"/><path d="M12 17.01v5.95"/> <rect x="3" y="11" width="18" height="11" rx="2"></rect>
</svg> <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</div> <circle cx="12" cy="16" r="1"></circle>
<div class="card-content"> </svg>
<h2>Git</h2> </div>
<p>Code-Repositories</p> <div class="card-content">
</div> <h3>Passwords</h3>
<span class="card-domain">git.mischlabs.de</span> <p>Passwort-Manager</p>
</a> </div>
<span class="card-domain">password.mischlabs.de</span>
</a>
</div>
</section>
<a href="https://movies.mischlabs.de" class="card" target="_blank" rel="noopener"> <section class="section">
<div class="card-icon" style="--accent: #a855f7;"> <div class="section-heading">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <div>
<rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/> <p class="section-kicker">Medien</p>
<line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/> <h2>Bibliothek & Streaming</h2>
<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"/>
</svg>
</div> </div>
<div class="card-content"> <span class="section-count">3 Dienste</span>
<h2>Movies</h2> </div>
<p>Filme &amp; Serien</p>
</div>
<span class="card-domain">movies.mischlabs.de</span>
</a>
<a href="https://audiobook.mischlabs.de" class="card" target="_blank" rel="noopener"> <div class="grid">
<div class="card-icon" style="--accent: #22c55e;"> <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">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <span class="status-dot" aria-label="Status wird geprueft"></span>
<path d="M3 18v-6a9 9 0 0 1 18 0v6"/> <div class="card-icon" style="--accent: #a78bfa;">
<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">
</svg> <rect x="2" y="2" width="20" height="20" rx="2.2"></rect>
</div> <line x1="7" y1="2" x2="7" y2="22"></line>
<div class="card-content"> <line x1="17" y1="2" x2="17" y2="22"></line>
<h2>Audiobooks</h2> <line x1="2" y1="12" x2="22" y2="12"></line>
<p>Hoerbuecher</p> </svg>
</div> </div>
<span class="card-domain">audiobook.mischlabs.de</span> <div class="card-content">
</a> <h3>Movies</h3>
<p>Filme & Serien</p>
</div>
<span class="card-domain">movies.mischlabs.de</span>
</a>
<a href="https://password.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">
<div class="card-icon" style="--accent: #eab308;"> <span class="status-dot" aria-label="Status wird geprueft"></span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <div class="card-icon" style="--accent: #22c55e;">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 11V7a5 5 0 0 1 10 0v4"/> <path d="M3 18v-6a9 9 0 0 1 18 0v6"></path>
<circle cx="12" cy="16" r="1"/> <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> </svg>
</div> </div>
<div class="card-content"> <div class="card-content">
<h2>Passwords</h2> <h3>Audiobooks</h3>
<p>Passwort-Manager</p> <p>Hoerbuecher</p>
</div> </div>
<span class="card-domain">password.mischlabs.de</span> <span class="card-domain">audiobook.mischlabs.de</span>
</a> </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">
<div class="card-icon" style="--accent: #06b6d4;"> <span class="status-dot" aria-label="Status wird geprueft"></span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <div class="card-icon" style="--accent: #06b6d4;">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/> <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
</svg> <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
</div> </svg>
<div class="card-content"> </div>
<h2>Books</h2> <div class="card-content">
<p>Buecher &amp; Bibliothek</p> <h3>Books</h3>
</div> <p>Buecher & Bibliothek</p>
<span class="card-domain">books.mischlabs.de</span> </div>
</a> <span class="card-domain">books.mischlabs.de</span>
</a>
</div>
</section>
<a href="https://michess.mischlabs.de" class="card" target="_blank" rel="noopener"> <section class="section">
<div class="card-icon" style="--accent: #10b981;"> <div class="section-heading">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <div>
<path d="M8 16l-1 4h10l-1-4"/> <p class="section-kicker">Arbeit</p>
<path d="M6.5 16h11"/> <h2>Code, Projekte & Spiel</h2>
<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"/>
</svg>
</div> </div>
<div class="card-content"> <span class="section-count">3 Dienste</span>
<h2>MiChess</h2> </div>
<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"> <div class="grid">
<div class="card-icon" style="--accent: #ec4899;"> <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">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <span class="status-dot" aria-label="Status wird geprueft"></span>
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> <div class="card-icon" style="--accent: #f97316;">
<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">
</svg> <circle cx="12" cy="12" r="4"></circle>
</div> <line x1="1.05" y1="12" x2="7" y2="12"></line>
<div class="card-content"> <line x1="17.01" y1="12" x2="22.96" y2="12"></line>
<h2>Tom</h2> <path d="M12 1.05V7"></path>
<p>Persoenliche Seite</p> <path d="M12 17.01v5.95"></path>
</div> </svg>
<span class="card-domain">tom.mischlabs.de</span> </div>
</a> <div class="card-content">
<h3>Git</h3>
<p>Code-Repositories</p>
</div>
<span class="card-domain">git.mischlabs.de</span>
</a>
</div> <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 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.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">
<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> </main>
<footer> <footer class="shell footer">
<p>&copy; 2026 MischLabs &mdash; Self-Hosted with care</p> <span>MischLabs</span>
<span id="lastChecked">Status wird im Hintergrund geprueft.</span>
</footer> </footer>
<script>
if ('serviceWorker' in navigator) { <script src="/app.js?v=1" defer></script>
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js').catch(() => {});
});
}
</script>
</body> </body>
</html> </html>

4
manifest.webmanifest
View File

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

3
nginx.conf
View File

@@ -16,7 +16,8 @@ server {
location = /sw.js { location = /sw.js {
default_type application/javascript; 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 # 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, *::before,
*::after { *::after {
margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
* {
margin: 0;
}
:root { :root {
--bg: #0a0a0f; color-scheme: dark;
--surface: #13131a; --bg: #070914;
--surface-hover: #1a1a24; --surface: #111624;
--border: rgba(255, 255, 255, 0.06); --surface-2: #171d2d;
--border-hover: rgba(255, 255, 255, 0.12); --surface-hover: #1c2435;
--text: #e4e4e7; --border: rgba(226, 232, 240, 0.1);
--text-muted: #71717a; --border-strong: rgba(226, 232, 240, 0.18);
--text-dim: #52525b; --text: #eef2ff;
--radius: 16px; --muted: #9aa6bd;
--dim: #647085;
--ok: #34d399;
--warn: #fbbf24;
--down: #fb7185;
--radius: 8px;
} }
html { html {
min-height: 100%;
font-size: 16px; font-size: 16px;
scroll-behavior: smooth; background: var(--bg);
} }
body { body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh; min-height: 100vh;
display: flex; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
flex-direction: column; color: var(--text);
align-items: center; background:
overflow-x: hidden; linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(8, 13, 27, 0.98)),
position: relative; repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 120px);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
/* ===== Background Glows ===== */ a,
.bg-glow { button,
position: fixed; input {
border-radius: 50%; font: inherit;
filter: blur(80px);
opacity: 0.15;
pointer-events: none;
z-index: 0;
} }
.bg-glow-1 { button,
width: 600px; input {
height: 600px; border: 0;
background: #4285f4;
top: -200px;
left: -100px;
} }
.bg-glow-2 { .shell {
width: 500px; width: min(1160px, calc(100% - 32px));
height: 500px; margin-inline: auto;
background: #a855f7;
bottom: -150px;
right: -100px;
} }
/* ===== Header ===== */ .hero {
header { display: grid;
text-align: center; grid-template-columns: minmax(0, 1fr) auto;
padding: 4rem 2rem 2rem; gap: 24px;
position: relative; align-items: end;
z-index: 1; padding: 32px 0 22px;
} }
.logo { .brand {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 16px;
gap: 0.75rem; min-width: 0;
margin-bottom: 0.5rem;
} }
.logo-icon { .brand-mark {
font-size: 2rem; width: 72px;
opacity: 0.6; height: 72px;
animation: spin 20s linear infinite; 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 { .eyebrow,
from { transform: rotate(0deg); } .section-kicker {
to { transform: rotate(360deg); } color: #67e8f9;
} font-size: 0.72rem;
h1 {
font-size: 2.5rem;
font-weight: 700; font-weight: 700;
letter-spacing: -0.03em; letter-spacing: 0.12em;
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;
text-transform: uppercase; 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 { main {
width: 100%; padding-bottom: 20px;
max-width: 1100px; }
padding: 2rem;
.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; 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 { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem; 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 { .card {
display: flex; position: relative;
flex-direction: column; display: grid;
gap: 1rem; grid-template-columns: 48px minmax(0, 1fr);
padding: 1.5rem; grid-template-rows: auto auto;
background: var(--surface); 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: 1px solid var(--border);
border-radius: var(--radius); 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; isolation: isolate;
overflow: visible;
touch-action: manipulation; touch-action: manipulation;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
} }
.card > * { .card > * {
position: relative; position: relative;
z-index: 3; z-index: 2;
} }
.card::before { .card::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; 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; z-index: 1;
border-radius: inherit; border-radius: inherit;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 48%);
opacity: 0.4;
pointer-events: none; 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 { .card::after {
content: ''; content: "";
position: absolute; position: absolute;
top: -36px; top: -36px;
right: 1.15rem; right: 1.1rem;
z-index: 0;
width: 78px; width: 78px;
height: 62px; 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-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-repeat: no-repeat;
background-size: contain; background-size: contain;
opacity: 0; opacity: 0;
transform: translateY(34px) rotate(-7deg); transform: translateY(28px) rotate(-7deg);
transition: transition: opacity 0.18s ease, transform 0.24s ease;
opacity 0.22s ease,
transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 0;
pointer-events: none; pointer-events: none;
} }
.card:hover { .card:hover,
border-color: var(--border-hover); .card:focus-visible {
transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
box-shadow: background: linear-gradient(180deg, rgba(29, 37, 56, 0.98), rgba(17, 22, 36, 0.98));
0 8px 32px rgba(0, 0, 0, 0.3), transform: translateY(-2px);
0 0 0 1px rgba(255, 255, 255, 0.05);
z-index: 3;
} }
.card:hover::after { .card:hover::after,
.card:focus-visible::after {
opacity: 1; 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 { .card-icon {
display: grid;
place-items: center;
width: 48px; width: 48px;
height: 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); color: var(--accent);
transition: all 0.3s ease; 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:hover .card-icon {
background: color-mix(in srgb, var(--accent) 25%, transparent);
transform: scale(1.05);
} }
.card-icon svg { .card-icon svg {
width: 24px; width: 23px;
height: 24px; height: 23px;
} }
/* ===== Card Content ===== */ .card-content {
.card-content h2 { min-width: 0;
font-size: 1.15rem; }
font-weight: 600;
.card-content h3 {
color: #fff; color: #fff;
letter-spacing: -0.01em; font-size: 1.04rem;
letter-spacing: 0;
} }
.card-content p { .card-content p {
font-size: 0.85rem; margin-top: 4px;
color: var(--text-muted); color: var(--muted);
margin-top: 0.15rem; font-size: 0.86rem;
line-height: 1.35;
} }
/* ===== Card Domain ===== */
.card-domain { .card-domain {
font-size: 0.75rem; grid-column: 1 / -1;
color: var(--text-dim); align-self: end;
font-family: 'SF Mono', 'Fira Code', monospace; padding-top: 10px;
padding-top: 0.5rem; color: var(--dim);
border-top: 1px solid var(--border); 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 { .status-dot {
color: var(--text-muted); 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 ===== */ .service-card.is-online .status-dot {
footer { background: var(--ok);
margin-top: auto; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.1);
padding: 3rem 2rem 2rem; }
.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; text-align: center;
position: relative; background: rgba(17, 22, 36, 0.72);
z-index: 1; border: 1px solid var(--border);
border-radius: var(--radius);
} }
footer p { .footer {
color: var(--text-dim); display: flex;
justify-content: space-between;
gap: 16px;
padding: 28px 0 32px;
color: var(--dim);
font-size: 0.8rem; font-size: 0.8rem;
} }
/* ===== Responsive ===== */ @media (max-width: 900px) {
@media (max-width: 768px) { .hero {
.bg-glow { grid-template-columns: 1fr;
display: none; align-items: start;
} }
header { .hero-meta {
padding: 3rem 1.5rem 1.5rem; width: 100%;
} }
h1 { .control-bar {
font-size: 2rem; grid-template-columns: 1fr;
} }
main { .segments {
padding: 1rem; justify-content: flex-start;
} }
.grid { .grid {
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem; }
}
@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 { .card {
padding: 1.25rem; min-height: 112px;
animation: none; padding: 14px;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
} }
.card-icon { .section-heading {
width: 40px; align-items: start;
height: 40px;
border-radius: 10px;
} }
.card-icon svg { .section-count {
width: 20px; display: none;
height: 20px;
} }
.card-banner { .footer {
margin-bottom: 0.75rem; flex-direction: column;
padding-bottom: 24px;
} }
} }
@@ -376,49 +495,13 @@ footer p {
} }
} }
@media (max-width: 480px) { @media (prefers-reduced-motion: reduce) {
.card-banner { *,
flex-direction: column; *::before,
align-items: flex-start; *::after {
} scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
.card-banner .card-domain { animation-duration: 0.01ms !important;
border-left: none; animation-iteration-count: 1 !important;
padding-left: 0;
border-top: 1px solid var(--border);
padding-top: 0.5rem;
}
.grid {
grid-template-columns: 1fr;
}
h1 {
font-size: 1.75rem;
} }
} }
/* ===== 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 = [ const APP_SHELL = [
'/', '/',
'/index.html', '/index.html',
'/style.css?v=8', '/offline.html',
'/manifest.webmanifest?v=2', '/style.css?v=9',
'/app.js?v=1',
'/manifest.webmanifest?v=3',
'/icons/icon-192.png', '/icons/icon-192.png',
'/icons/icon-512.png', '/icons/icon-512.png',
'/icons/apple-touch-icon-v2.png' '/icons/apple-touch-icon-v2.png'
@@ -34,7 +36,7 @@ self.addEventListener('fetch', (event) => {
if (request.mode === 'navigate') { if (request.mode === 'navigate') {
event.respondWith( event.respondWith(
fetch(request).catch(() => caches.match('/index.html')) fetch(request).catch(() => caches.match('/offline.html'))
); );
return; return;
} }