feat: implement automatic smart mobile app launcher with custom schemes and web fallbacks

2026-05-21 22:28:22 +02:00
parent e663534000
commit 0d4377aed2
7 changed files with 107 additions and 5 deletions
--- a/admin.html
+++ b/admin.html
@@ -6,7 +6,7 @@
    <title>MischLabs Admin</title>
    <meta name="description" content="MischLabs dashboard administration.">
    <meta name="theme-color" content="#0f172a">
-    <link rel="stylesheet" href="/style.css?v=26">
+    <link rel="stylesheet" href="/style.css?v=27">
 </head>
 <body>
    <header class="shell hero admin-hero">
@@ -235,6 +235,6 @@
        </div>
    </div>

-    <script src="/admin.js?v=21" defer></script>
+    <script src="/admin.js?v=27" defer></script>
 </body>
 </html>
--- a/admin.js
+++ b/admin.js
@@ -204,6 +204,10 @@ function renderEditor() {
        URL
        <input data-field="url" value="${service.url}">
      </label>
+      <label>
+        Mobile URL (App Scheme)
+        <input data-field="mobileUrl" value="${service.mobileUrl || ''}" placeholder="z.B. nextcloud://">
+      </label>
      <button class="ghost-button check-one" type="button">Pruefen</button>
      <div class="diagnostic">Noch nicht geprueft.</div>
    </article>
--- a/app.js
+++ b/app.js
@@ -80,6 +80,26 @@ function createServiceCard(service) {
    </div>
    <span class="card-domain">${service.domain}</span>
  `;
+
+  if (service.mobileUrl) {
+    card.addEventListener('click', (e) => {
+      const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+      if (isMobile) {
+        e.preventDefault();
+        const start = Date.now();
+        // Versuch, die mobile App über ihr registriertes Custom URL-Schema zu öffnen
+        window.location.href = service.mobileUrl;
+        
+        // Web-Fallback nach 800ms, falls die App nicht installiert ist
+        setTimeout(() => {
+          if (Date.now() - start < 1500) {
+            window.open(service.url, '_blank');
+          }
+        }, 800);
+      }
+    });
+  }
+
  return card;
 }

--- a/brain.old
+++ b/brain.old
@@ -0,0 +1,74 @@
+# Brain.md - Projekt mischlabs.de Landing Page
+
+## 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.
+
+## 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] Push zum Remote
+- [x] MiChess-Kachel hinzugefuegt (Commit lokal, Push steht aus wg. Auth-Fehler)
+- [ ] Push des MiChess-Commits (Git-Auth-Token erneuern)
+
+## Verwandte Projekte
+- **auth** (d:\Vibecoding\Website\auth) - Keycloak SSO fuer alle Dienste
+  - Repo: https://git.mischlabs.de/MrDiderot/auth.git
+  - Subdomain: auth.mischlabs.de
+  - Siehe auth/Brain.md fuer Details
+
+## Dienste-Uebersicht (8 Stueck)
+| # | Subdomain | Beschreibung | Farbe/Accent |
+|---|-----------|-------------|--------------|
+| 1 | drive.mischlabs.de | Cloud-Speicher | #4285f4 (Blau) |
+| 2 | git.mischlabs.de | Code-Repositories | #f05033 (Rot) |
+| 3 | movies.mischlabs.de | Filme & Serien | #a855f7 (Lila) |
+| 4 | audiobook.mischlabs.de | Hoerbuecher | #22c55e (Gruen) |
+| 5 | password.mischlabs.de | Passwort-Manager | #eab308 (Gelb) |
+| 6 | docs.mischlabs.de | Dokumentation | #06b6d4 (Cyan) |
+| 7 | michess.mischlabs.de | Schach | #10b981 (Gruen) |
+| 8 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) |
+
+## Technische Entscheidungen
+- **Reines HTML + CSS** (kein Framework, kein JS) - 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
+- **CSS Grid** mit `auto-fill` + `minmax(240px, 1fr)` fuer responsives Layout
+- **Dark Theme** mit subtilen Glow-Effekten
+- **Staggered Animations**: Kacheln faden nacheinander ein (9 Stueck)
+
+## Docker-Setup
+- **Container-Name**: `mischlabs`
+- **Base-Image**: `nginx:alpine`
+- **Port-Mapping**: `8085:80` (anpassbar in docker-compose.yml)
+- **Restart-Policy**: `unless-stopped`
+- **nginx.conf**: Caching fuer Static Assets (7 Tage), Security-Headers
+
+## Dateistruktur
+```
+mischlabs/
+  index.html          - Haupt-HTML mit allen 9 Service-Kacheln
+  style.css           - Komplettes Styling (Dark Theme, Grid, Animationen)
+  Dockerfile          - nginx:alpine mit kopierten Static Files
+  docker-compose.yml  - Container-Definition (Name: mischlabs, Port 8085)
+  nginx.conf          - Server-Konfiguration, Caching, Security-Headers
+  .gitignore          - Git-Ausschluesse
+  Brain.md            - Dieses Dokument (KI-Uebergabe)
+```
+
+## Deployment-Workflow
+1. Code aendern und committen
+2. Push zu git.mischlabs.de
+3. Auf dem Server: `git pull && docker compose up -d --build`
+
+## Erkenntnisse & Notizen
+- Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports
+- Oeffentlich erreichbar ueber *.mischlabs.de Subdomains (Cloudflare Tunnel)
+- Port 8085 gewaehlt da gaengige Ports (80, 8080, 8090) bereits belegt
+- Kein JavaScript noetig - pure CSS reicht fuer alle Effekte
+- `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende
+- Git-Push-Fehler aufgetreten (Authentication failed) - Token muss erneuert werden
+- DNS: Alte A-Records (185.181.104.242) von INWX wurden geloescht, nur noch Tunnel-Eintraege
+- NAS hat kein git installiert - entweder Git Server Paket installieren oder wget nutzen
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
    <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=26">
+    <link rel="stylesheet" href="style.css?v=27">
 </head>
 <body>
    <header class="shell hero">
@@ -117,6 +117,6 @@
        </svg>
    </div>

-    <script src="/app.js?v=6" defer></script>
+    <script src="/app.js?v=27" defer></script>
 </body>
 </html>
--- a/services.json
+++ b/services.json
@@ -39,6 +39,7 @@
      "description": "Cloud-Speicher",
      "domain": "drive.mischlabs.de",
      "url": "https://drive.mischlabs.de",
+      "mobileUrl": "nextcloud://",
      "category": "media",
      "accent": "#60a5fa",
      "icon": "folder",
@@ -50,6 +51,7 @@
      "description": "Passwort-Manager",
      "domain": "password.mischlabs.de",
      "url": "https://password.mischlabs.de",
+      "mobileUrl": "bitwarden://",
      "category": "access",
      "accent": "#eab308",
      "icon": "lock",
@@ -61,6 +63,7 @@
      "description": "Filme & Serien",
      "domain": "movies.mischlabs.de",
      "url": "https://movies.mischlabs.de",
+      "mobileUrl": "jellyfin://",
      "category": "media",
      "accent": "#a78bfa",
      "icon": "film",
@@ -72,6 +75,7 @@
      "description": "Hoerbuecher",
      "domain": "audiobook.mischlabs.de",
      "url": "https://audiobook.mischlabs.de",
+      "mobileUrl": "audiobookshelf://",
      "category": "media",
      "accent": "#22c55e",
      "icon": "headphones",
--- a/style.css
+++ b/style.css
@@ -668,7 +668,7 @@ main {

 .admin-row {
    display: grid;
-    grid-template-columns: minmax(170px, 1.1fr) minmax(150px, 0.7fr) minmax(220px, 1.2fr) auto;
+    grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.6fr) minmax(180px, 1.1fr) minmax(130px, 0.9fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;