diff --git a/admin.html b/admin.html index 83ef64e..f1434b8 100644 --- a/admin.html +++ b/admin.html @@ -6,7 +6,7 @@ MischLabs Admin - +
@@ -235,6 +235,6 @@ - + diff --git a/admin.js b/admin.js index d175db4..9cb63ba 100644 --- a/admin.js +++ b/admin.js @@ -204,6 +204,10 @@ function renderEditor() { URL +
Noch nicht geprueft.
diff --git a/app.js b/app.js index cb9ba62..35cc1e9 100644 --- a/app.js +++ b/app.js @@ -80,6 +80,26 @@ function createServiceCard(service) { ${service.domain} `; + + 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; } diff --git a/brain.old b/brain.old new file mode 100644 index 0000000..1a379d3 --- /dev/null +++ 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 diff --git a/index.html b/index.html index a18184d..99aa891 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@ - +
@@ -117,6 +117,6 @@ - + diff --git a/services.json b/services.json index 3fb1e8f..fd33a25 100644 --- 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", diff --git a/style.css b/style.css index 82ddd38..a06a07d 100644 --- 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;