# Brain.md - Projekt mischlabs.de Landing Page ## Projektziel Eine ansprechende Landing Page fuer mischlabs.de, die alle Dienste als Kacheln mit direkten Verlinkungen anzeigt. ## Status - [x] Git-Repo initialisiert und Remote verbunden (https://git.mischlabs.de/MrDiderot/mischlabs.git) - [x] Dienste-Liste vom Screenshot erfasst - [x] Landing Page Design und Implementierung (index.html + style.css) - [ ] Erster Commit + Push ## Dienste-Uebersicht (8 Stueck) | # | Subdomain | Beschreibung | Farbe/Accent | |---|-----------|-------------|--------------| | 1 | audiobook.mischlabs.de | Hoerbuecher | #22c55e (Gruen) | | 2 | foodlabs.mischlabs.de | Rezepte | #f97316 (Orange) | | 3 | movies.mischlabs.de | Filme & Serien | #a855f7 (Lila) | | 4 | drive.mischlabs.de | Cloud-Speicher | #4285f4 (Blau) | | 5 | password.mischlabs.de | Passwort-Manager | #eab308 (Gelb) | | 6 | tom.mischlabs.de | Persoenliche Seite | #ec4899 (Pink) | | 7 | git.mischlabs.de | Code-Repositories | #f05033 (Rot) | | 8 | docs.mischlabs.de | Dokumentation | #06b6d4 (Cyan) | ## Technische Entscheidungen - **Reines HTML + CSS** (kein Framework, kein JS noetig) - maximale Performance - **Google Fonts (Inter)** fuer moderne Typografie - **Inline SVG Icons** - keine externen Icon-Libraries noetig, kein zusaetzlicher HTTP-Request - **CSS Grid** mit `auto-fill` + `minmax(240px, 1fr)` fuer responsives Layout - **Dark Theme** mit subtilen Glow-Effekten im Hintergrund - **Card-Hover-Effekte**: translateY, Box-Shadow, radial-gradient Spotlight - **Staggered Animations**: Kacheln faden nacheinander ein (fadeInUp) - **Responsive Breakpoints**: 768px (2 Spalten), 480px (1 Spalte) ## Dateistruktur ``` mischlabs/ index.html - Haupt-HTML mit allen 8 Service-Kacheln style.css - Komplettes Styling (Dark Theme, Grid, Animationen) Brain.md - Dieses Dokument ``` ## Erkenntnisse & Notizen - Daten stammen aus Caddy/Reverse-Proxy-Konfiguration (Screenshot) - Alle Dienste laufen auf 192.168.178.88 mit verschiedenen Ports - Oeffentlich erreichbar ueber *.mischlabs.de Subdomains - Kein JavaScript noetig - pure CSS reicht fuer alle Effekte - `color-mix()` CSS-Funktion fuer dynamische Icon-Hintergruende basierend auf Accent-Farbe