121 lines
3.8 KiB
Markdown
121 lines
3.8 KiB
Markdown
# 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 |