Rework MischLabs into service dashboard

Brain.md

@@ -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`
+  - 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.
-- `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.

Dockerfile

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

app.js

@@ -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();
+

index.html

@@ -3,178 +3,254 @@
 <head>
     <meta charset="UTF-8">
     <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-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>
+    <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>
-        <p class="subtitle">Self-Hosted Services</p>
     </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">
+            <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">
+                        <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 d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
-                    <path d="M9 12l2 2 4-4"/>
+                            <path d="M9 12l2 2 4-4"></path>
                         </svg>
                     </div>
                     <div class="card-content">
-                <h2>Single Sign-On</h2>
+                        <h3>Single Sign-On</h3>
-                <p>Zentrales Login fuer alle Dienste</p>
+                        <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 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>
-            <a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">
+                    <div class="card-icon" style="--accent: #60a5fa;">
-                <div class="card-icon" style="--accent: #4285f4;">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                    <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"></path>
-                        <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>
                     </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">
+                <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>
+                            <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>
+                        <h3>Passwords</h3>
-                    <p>Code-Repositories</p>
+                        <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">
+        <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"/>
+                </div>
-                        <line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/>
+                <span class="section-count">3 Dienste</span>
-                        <line x1="17" y1="7" x2="22" y2="7"/>
+            </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>
+                        <h3>Movies</h3>
-                    <p>Filme &amp; Serien</p>
+                        <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">
+                        <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 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 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">
+                <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: #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">
-                        <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">
                     <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">
+                        <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 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 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>
+                        <h3>Books</h3>
-                    <p>Buecher &amp; Bibliothek</p>
+                        <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">
+        <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"/>
+                </div>
-                        <path d="M9 7L6 10.5c-.6.7-.2 1.5.7 1.5h10.6c.9 0 1.3-.8.7-1.5L15 7"/>
+                <span class="section-count">3 Dienste</span>
-                        <path d="M9 12v4"/>
+            </div>
-                        <path d="M15 12v4"/>
+
+            <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">
+                        <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 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 cx="12" cy="7" r="4"></circle>
                         </svg>
                     </div>
                     <div class="card-content">
-                    <h2>Tom</h2>
+                        <h3>Tom</h3>
-                    <p>Persoenliche Seite</p>
+                        <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>
+    <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>
-    <script>
+
-        if ('serviceWorker' in navigator) {
+    <script src="/app.js?v=1" defer></script>
-            window.addEventListener('load', () => {
-                navigator.serviceWorker.register('/sw.js').catch(() => {});
-            });
-        }
-    </script>
 </body>
 </html>

manifest.webmanifest

@@ -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": [
     {

nginx.conf

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

offline.html

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

style.css

@@ -1,368 +1,487 @@
-/* ===== Reset & Base ===== */
 *,
 *::before,
 *::after {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
+* {
+    margin: 0;
+}
+
 :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 {
+    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;
+    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;
     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;
     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;
-    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;
 }
 
-/* ===== 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%;
+    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;
-    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));
+    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 {
-    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-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);
+    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;
 }
 
-.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;
-    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;
+    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 {
-    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;
-    letter-spacing: -0.01em;
+    font-size: 1.04rem;
+    letter-spacing: 0;
 }
 
 .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 {
-    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);
-    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;
-    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;
 }
 
-/* ===== 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-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 {
-        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; }

sw.js

@@ -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',
+  '/offline.html',
-  '/manifest.webmanifest?v=2',
+  '/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;
   }