From bebb6a30284525da7a3a1d0d8769d04baaf5d2e7 Mon Sep 17 00:00:00 2001 From: Kroonk Date: Sun, 12 Apr 2026 22:04:25 +0200 Subject: [PATCH] Initial commit: MischLabs landing page Static landing page with tile-based overview of all 8 self-hosted services. Dark theme with responsive grid layout, SVG icons, and hover animations. Co-Authored-By: Claude Opus 4.6 --- .gitignore | 6 ++ Brain.md | 47 +++++++++ index.html | 155 +++++++++++++++++++++++++++ style.css | 303 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 511 insertions(+) create mode 100644 .gitignore create mode 100644 Brain.md create mode 100644 index.html create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..42d6a8a --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +Thumbs.db +*.swp +*.swo +*~ +.vscode/ diff --git a/Brain.md b/Brain.md new file mode 100644 index 0000000..7c97cc6 --- /dev/null +++ b/Brain.md @@ -0,0 +1,47 @@ +# 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 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e587e4a --- /dev/null +++ b/index.html @@ -0,0 +1,155 @@ + + + + + + MischLabs - Services + + + + + + +
+
+ +
+ +

Self-Hosted Services

+
+ +
+
+ + +
+ + + +
+
+

Drive

+

Cloud-Speicher

+
+ drive.mischlabs.de + + + +
+ + + + +
+
+

Git

+

Code-Repositories

+
+ git.mischlabs.de + + + +
+ + + + + + + +
+
+

Movies

+

Filme & Serien

+
+ movies.mischlabs.de + + + +
+ + + + +
+
+

Audiobooks

+

Hoerbuecher

+
+ audiobook.mischlabs.de + + + +
+ + + + + + + +
+
+

FoodLabs

+

Rezepte

+
+ foodlabs.mischlabs.de + + + +
+ + + + + +
+
+

Passwords

+

Passwort-Manager

+
+ password.mischlabs.de + + + +
+ + + + + + + +
+
+

Docs

+

Dokumentation

+
+ docs.mischlabs.de + + + +
+ + + + +
+
+

Tom

+

Persoenliche Seite

+
+ tom.mischlabs.de + + +
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..63db909 --- /dev/null +++ b/style.css @@ -0,0 +1,303 @@ +/* ===== Reset & Base ===== */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --bg: #0a0a0f; + --surface: #13131a; + --surface-hover: #1a1a24; + --border: rgba(255, 255, 255, 0.06); + --border-hover: rgba(255, 255, 255, 0.12); + --text: #e4e4e7; + --text-muted: #71717a; + --text-dim: #52525b; + --radius: 16px; +} + +html { + font-size: 16px; + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: var(--bg); + color: var(--text); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + overflow-x: hidden; + position: relative; +} + +/* ===== Background Glows ===== */ +.bg-glow { + position: fixed; + border-radius: 50%; + filter: blur(120px); + opacity: 0.15; + pointer-events: none; + z-index: 0; +} + +.bg-glow-1 { + width: 600px; + height: 600px; + background: #4285f4; + top: -200px; + left: -100px; +} + +.bg-glow-2 { + width: 500px; + height: 500px; + background: #a855f7; + bottom: -150px; + right: -100px; +} + +/* ===== Header ===== */ +header { + text-align: center; + padding: 4rem 2rem 2rem; + position: relative; + z-index: 1; +} + +.logo { + display: flex; + align-items: center; + justify-content: center; + gap: 0.75rem; + margin-bottom: 0.5rem; +} + +.logo-icon { + font-size: 2rem; + opacity: 0.6; + animation: spin 20s linear infinite; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +h1 { + font-size: 2.5rem; + font-weight: 700; + letter-spacing: -0.03em; + 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 ===== */ +main { + width: 100%; + max-width: 1100px; + padding: 2rem; + position: relative; + z-index: 1; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1.25rem; +} + +/* ===== Card ===== */ +.card { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 1.5rem; + background: var(--surface); + 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: hidden; +} + +.card::before { + 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% + ); + opacity: 0; + transition: opacity 0.3s; +} + +.card:hover::before { + opacity: 1; +} + +.card:hover { + border-color: var(--border-hover); + transform: translateY(-4px); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +/* ===== Card Icon ===== */ +.card-icon { + 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; +} + +.card:hover .card-icon { + background: color-mix(in srgb, var(--accent) 25%, transparent); + transform: scale(1.05); +} + +.card-icon svg { + width: 24px; + height: 24px; +} + +/* ===== Card Content ===== */ +.card-content h2 { + font-size: 1.15rem; + font-weight: 600; + color: #fff; + letter-spacing: -0.01em; +} + +.card-content p { + font-size: 0.85rem; + color: var(--text-muted); + margin-top: 0.15rem; +} + +/* ===== Card Domain ===== */ +.card-domain { + font-size: 0.75rem; + color: var(--text-dim); + font-family: 'SF Mono', 'Fira Code', monospace; + padding-top: 0.5rem; + border-top: 1px solid var(--border); + transition: color 0.3s; +} + +.card:hover .card-domain { + color: var(--text-muted); +} + +/* ===== Footer ===== */ +footer { + margin-top: auto; + padding: 3rem 2rem 2rem; + text-align: center; + position: relative; + z-index: 1; +} + +footer p { + color: var(--text-dim); + font-size: 0.8rem; +} + +/* ===== Responsive ===== */ +@media (max-width: 768px) { + header { + padding: 3rem 1.5rem 1.5rem; + } + + h1 { + font-size: 2rem; + } + + main { + padding: 1rem; + } + + .grid { + grid-template-columns: 1fr 1fr; + gap: 0.75rem; + } + + .card { + padding: 1.25rem; + } + + .card-icon { + width: 40px; + height: 40px; + border-radius: 10px; + } + + .card-icon svg { + width: 20px; + height: 20px; + } +} + +@media (max-width: 480px) { + .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; }