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

3.8 KiB Raw Blame History Unescape Escape