docs: add landing page design spec and implementation plan

2026-04-27 09:02:00 +02:00
parent 9e60fbb7cf
commit d33864c119
2 changed files with 491 additions and 0 deletions
@@ -0,0 +1,121 @@
+# Design Spec: Landing Page & Shared Layout
+
+**Datum:** 2026-04-27
+**Status:** Genehmigt
+
+---
+
+## Ziel
+
+Aufbau einer Landing Page mit gemeinsamem Layout-System für alle zukünftigen Seiten des University Process Hub (UPH). Das Layout ersetzt Bootstrap der Vorversion durch Tailwind CSS.
+
+---
+
+## Farbpalette
+
+| Rolle | Farbe | Hex |
+|---|---|---|
+| Primär / Navbar | TH-Rot | `#e2001a` |
+| Hintergrund Seite | Hellgrau | `#f5f5f5` |
+| Hintergrund Karten / Navbar-Content | Weiß | `#ffffff` |
+| Text primär | Fast-Schwarz | `#1a1a1a` |
+| Text sekundär | Mittelgrau | `#666666` |
+| Text deaktiviert / Labels | Hellgrau | `#888888` |
+| Trennlinien / Borders | Sehr hell | `#e8e8e8` |
+| Akzent hover (Karten) | Rot 12% opacity | `rgba(226,0,26,0.12)` |
+
+Kein Dunkelgrau in der Navbar — Rot trägt allein die Markenpräsenz.
+
+---
+
+## Layout-System (Base Template)
+
+**Aufbau jeder Seite (top → bottom):**
+
+```
+┌─────────────────────────────────────────┐
+│  NAVBAR (rot, 56px)                     │
+│  Logo · Nav-Links · Anmelden-Button     │
+├─────────────────────────────────────────┤
+│  PAGE CONTENT (slot — variabel)         │
+│  - Hero / Section-Header               │
+│  - Hauptinhalt                          │
+├─────────────────────────────────────────┤
+│  FOOTER (hellgrau, 44px)                │
+│  Brand · Hochschulname · Version        │
+└─────────────────────────────────────────┘
+```
+
+**Navbar-Details:**
+- Hintergrund `#e2001a`
+- Logo: `EFIHub` (Hub in 70% Opacity)
+- Nav-Links: `rgba(255,255,255,0.85)`, aktiver Link weiß mit weißem Bottom-Border
+- Login-Button: Ghost-Style (`rgba(255,255,255,0.15)`, weißer Border)
+- Höhe: `56px`, Padding `0 32px`
+
+**Footer:**
+- Hintergrund `#f5f5f5`, Border-Top `#e0e0e0`
+- Dreispaltiges Layout: Brand | Hochschulname | Version
+
+---
+
+## Landing Page
+
+### Hero-Bereich
+- Hintergrund Weiß, Border-Bottom `#e8e8e8`
+- Kleines rotes Label oben: `Fakultät EFI · TH Nürnberg`
+- H1: `University Process Hub`
+- Beschreibungstext (max. 560px Breite)
+
+### Modul-Karten
+- 3-spaltiges Grid auf Desktop, responsive (2-spaltig tablet, 1-spaltig mobile)
+- Weiße Karten, Border `#e8e8e8`, 3px roter Top-Stripe
+- Hover: Schatten `rgba(226,0,26,0.12)`, Border-Farbe `#e2001a`
+- Jede Karte: Icon · Name · Kurzbeschreibung · Status-Badge
+- Status-Badges: Aktiv (grün), Geplant (grau), + leere Placeholder-Karte (gestrichelt)
+
+### Info-Strip (zwischen Grid und Footer)
+- Weiß, Border-Top `#e8e8e8`
+- Systeminfos: API-Version, Datenbank-Modus, WebSocket-Status
+- Rechts: `● System online` in Rot
+
+---
+
+## Template-Architektur
+
+**Technologie:** Jinja2 (FastAPI-nativ) + Tailwind CSS via Play CDN (kein Build-Step nötig)
+
+**Dateien:**
+```
+app/
+├── templates/
+│   ├── base.html          # Navbar + Footer + Tailwind-Imports
+│   └── index.html         # Landing Page (extends base.html)
+└── static/                # Für custom CSS / Assets (später)
+```
+
+**FastAPI-Integration:**
+- `Jinja2Templates` in `main.py` konfigurieren
+- `StaticFiles` für `app/static/` mounten
+- `GET /` liefert `index.html` mit Modul-Liste aus Config
+
+**Modul-Liste:** Zur Laufzeit aus einer Liste in `config.py` oder einem statischen Dict in `main.py` — kein DB-Zugriff auf der Landing Page.
+
+---
+
+## Responsive Breakpoints
+
+| Breakpoint | Modul-Grid |
+|---|---|
+| `< 640px` | 1 Spalte |
+| `640px – 1024px` | 2 Spalten |
+| `> 1024px` | 3 Spalten |
+
+---
+
+## Out of Scope
+
+- Authentifizierung (separates Modul)
+- Dynamische Modul-Metadaten aus DB
+- Dark Mode
+- Animationen / Transitions