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

feat: implement automatic smart mobile app launcher with custom schemes and web fallbacks
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 22:28:22 +02:00
parent e663534000
commit 0d4377aed2
7 changed files with 107 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
admin.html
View File

@@ -6,7 +6,7 @@
<title>MischLabs Admin</title> <title>MischLabs Admin</title>
<meta name="description" content="MischLabs dashboard administration."> <meta name="description" content="MischLabs dashboard administration.">
<meta name="theme-color" content="#0f172a"> <meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=26"> <link rel="stylesheet" href="/style.css?v=27">
</head> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">
@@ -235,6 +235,6 @@
</div> </div>
</div> </div>
<script src="/admin.js?v=21" defer></script> <script src="/admin.js?v=27" defer></script>
</body> </body>
</html> </html>

4
admin.js
View File

@@ -204,6 +204,10 @@ function renderEditor() {
URL URL
<input data-field="url" value="${service.url}"> <input data-field="url" value="${service.url}">
</label> </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> <button class="ghost-button check-one" type="button">Pruefen</button>
<div class="diagnostic">Noch nicht geprueft.</div> <div class="diagnostic">Noch nicht geprueft.</div>
</article> </article>

20
app.js
View File

@@ -80,6 +80,26 @@ function createServiceCard(service) {
</div> </div>
<span class="card-domain">${service.domain}</span> <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; return card;
} }

74
brain.old Normal file
View File

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

4
index.html
View File

@@ -13,7 +13,7 @@
<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=26"> <link rel="stylesheet" href="style.css?v=27">
</head> </head>
<body> <body>
<header class="shell hero"> <header class="shell hero">
@@ -117,6 +117,6 @@
</svg> </svg>
</div> </div>
<script src="/app.js?v=6" defer></script> <script src="/app.js?v=27" defer></script>
</body> </body>
</html> </html>

4
services.json
View File

@@ -39,6 +39,7 @@
"description": "Cloud-Speicher", "description": "Cloud-Speicher",
"domain": "drive.mischlabs.de", "domain": "drive.mischlabs.de",
"url": "https://drive.mischlabs.de", "url": "https://drive.mischlabs.de",
"mobileUrl": "nextcloud://",
"category": "media", "category": "media",
"accent": "#60a5fa", "accent": "#60a5fa",
"icon": "folder", "icon": "folder",
@@ -50,6 +51,7 @@
"description": "Passwort-Manager", "description": "Passwort-Manager",
"domain": "password.mischlabs.de", "domain": "password.mischlabs.de",
"url": "https://password.mischlabs.de", "url": "https://password.mischlabs.de",
"mobileUrl": "bitwarden://",
"category": "access", "category": "access",
"accent": "#eab308", "accent": "#eab308",
"icon": "lock", "icon": "lock",
@@ -61,6 +63,7 @@
"description": "Filme & Serien", "description": "Filme & Serien",
"domain": "movies.mischlabs.de", "domain": "movies.mischlabs.de",
"url": "https://movies.mischlabs.de", "url": "https://movies.mischlabs.de",
"mobileUrl": "jellyfin://",
"category": "media", "category": "media",
"accent": "#a78bfa", "accent": "#a78bfa",
"icon": "film", "icon": "film",
@@ -72,6 +75,7 @@
"description": "Hoerbuecher", "description": "Hoerbuecher",
"domain": "audiobook.mischlabs.de", "domain": "audiobook.mischlabs.de",
"url": "https://audiobook.mischlabs.de", "url": "https://audiobook.mischlabs.de",
"mobileUrl": "audiobookshelf://",
"category": "media", "category": "media",
"accent": "#22c55e", "accent": "#22c55e",
"icon": "headphones", "icon": "headphones",

2
style.css
View File

@@ -668,7 +668,7 @@ main {
.admin-row { .admin-row {
display: grid; 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; gap: 10px;
align-items: end; align-items: end;
padding: 12px; padding: 12px;