From 15e90041b962987c036d05ecbe6e83992a34d975 Mon Sep 17 00:00:00 2001 From: Leopoldadmin Date: Wed, 8 Jul 2026 06:57:34 +0000 Subject: [PATCH] add ui_design.md with expanded sitemap (legal pages + mietanfrage route) --- docs/ui_design.md | 228 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 docs/ui_design.md diff --git a/docs/ui_design.md b/docs/ui_design.md new file mode 100644 index 0000000..44fffd5 --- /dev/null +++ b/docs/ui_design.md @@ -0,0 +1,228 @@ +# HMS Licht & Ton – UI Design Dokumentation + +## 1. Projekt-Überblick + +**Projekt:** Neue Homepage für HMS Licht & Ton GbR, Veranstaltungstechnik aus Leipheim/Ellzee +**Domain:** hms.media-on.de (nicht öffentlich indexiert – noindex, nofollow) +**Technologie:** Nuxt 3 (Vue 3 + Tailwind CSS, SSR/SSG) + FastAPI Backend + Coolify Deployment + +## 2. Design-Philosophie + +Das Design folgt einer **dunklen, professionellen Ästhetik** orientiert an den Agent Zero WebUI Grautönen. Orange (#EC6925) aus dem HMS-Logo wird **dezent als Akzentfarbe** eingesetzt – ausschließlich für Buttons, Badges, kleine Text-Highlights und den Logo-Rahmen. Keine großen Orange-Flächen. + +**Tonalität:** Professionell, erfahren, zuverlässig, technisch kompetent – nicht werblich oder übertrieben. + +## 3. Design Tokens + +### 3.1 Farbpalette + +#### Agent Zero Dark Theme (Hauptfarben) +| Token | Hex | Verwendung | +|-------|-----|------------| +| `--bg` | `#131313` | Seiten-Hintergrund | +| `--panel` | `#1a1a1a` | Panels, Cards, Header | +| `--surface` | `#212121` | Input-Felder, Surface-Level | +| `--row` | `#272727` | List-Items, Zwischenebenen | +| `--card` | `#2d2d2d` | Card-Hintergrund | +| `--border` | `#444444a8` | Borders (mit Alpha) | +| `--secondary` | `#656565` | Sekundärfarbe, Icons | +| `--primary` | `#737a81` | Primärfarbe (leicht bläuliches Grau) | +| `--text` | `#ffffff` | Haupttext | +| `--text-muted` | `#d4d4d4` | Gedimmter Text | + +#### Orange Akzent (Dezent) +| Token | Wert | Verwendung | +|-------|------|------------| +| `--color-accent` | `#EC6925` | Buttons, Badges, Text-Akzente, Logo-Rahmen | +| `--color-accent-hover` | `#d4581a` | Button Hover | +| `--color-accent-light` | `rgba(236, 105, 37, 0.08)` | Badge-Hintergrund, Nav-Active | +| `--color-accent-border` | `rgba(236, 105, 37, 0.25)` | Card Hover Border | +| `--color-accent-dark` | `#b8461a` | Dunkle Variante | + +#### Status-Farben (Dark Theme adaptiert) +| Token | Hex | Verwendung | +|-------|-----|------------| +| `--color-success` | `#4ade80` | Erfolg-Meldungen | +| `--color-success-bg` | `rgba(74, 222, 128, 0.08)` | Erfolg-Hintergrund | +| `--color-error` | `#f87171` | Fehler-Meldungen, Pflichtfelder | +| `--color-error-bg` | `rgba(248, 113, 113, 0.08)` | Fehler-Hintergrund | +| `--color-warning` | `#fbbf24` | Warnungen | +| `--color-info` | `#60a5fa` | Info-Meldungen | + +### 3.2 Border Radius (Minimal) +| Token | Wert | +|-------|------| +| `--radius-sm` | `2px` | +| `--radius-md` | `3px` | +| `--radius-lg` | `4px` | +| `--radius-xl` | `4px` | +| `--radius-full` | `9999px` (Badges, Pills) | + +### 3.3 Typography +- **Font Family:** Inter (Google Fonts) +- **Weights:** 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold), 800 (Extrabold) +- **Größen:** xs: 0.75rem bis 6xl: 3.75rem +- **Line Height:** 1.6 (Body), 1.1-1.3 (Headings) + +### 3.4 Spacing +| Token | Wert | +|-------|------| +| `--space-xs` | 0.25rem (4px) | +| `--space-sm` | 0.5rem (8px) | +| `--space-md` | 1rem (16px) | +| `--space-lg` | 1.5rem (24px) | +| `--space-xl` | 2rem (32px) | +| `--space-2xl` | 3rem (48px) | +| `--space-3xl` | 4rem (64px) | +| `--space-4xl` | 6rem (96px) | + +### 3.5 Shadows (Dark Theme) +| Token | Wert | +|-------|------| +| `--shadow-sm` | `0 1px 2px 0 rgb(0 0 0 / 0.3)` | +| `--shadow-md` | `0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)` | +| `--shadow-lg` | `0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)` | +| `--shadow-xl` | `0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.3)` | + +### 3.6 Transitions +| Token | Dauer | +|-------|-------| +| `--transition-fast` | 150ms ease | +| `--transition-base` | 250ms ease | +| `--transition-slow` | 400ms ease | + +## 4. Layout-System + +### 4.1 Header +- Sticky, Höhe: 4rem (Desktop), 3.5rem (Mobile) +- Logo links, Desktop-Nav mittig/rechts, Mobile Hamburger rechts +- Background: `var(--panel)`, Border-Bottom: `var(--border)` + +### 4.2 Main Content +- Max-Width: 1280px (`max-w-7xl`) +- Padding: 1rem (Mobile), 1.5rem (sm), 2rem (lg) + +### 4.3 Footer +- 4-Spalten Grid (1-Spalte auf Mobile) +- Background: `var(--bg)`, Border-Top: `var(--border)` + +### 4.4 Responsive Breakpoints +- **sm:** 640px (Tablet Portrait) +- **md:** 768px (Tablet Landscape, Desktop Nav visible) +- **lg:** 1024px (Desktop, 3-4 Column Grids) +- **Mobile-First:** Alle Layouts starten mit 1-Spalte, expandieren bei Breakpoints + +## 5. Seiten-Struktur (Sitemap) + +``` +Home (#/) + ├─ Referenzen (#/referenzen) + ├─ Mietkatalog (#/mietkatalog) + │ └─ Equipment Detail (#/mietkatalog/:id) + ├─ Warenkorb (#/warenkorb) + │ └─ Mietanfrage (#/mietanfrage) + ├─ Kontakt (#/kontakt) + ├─ Admin (#/admin) + ├─ Impressum (#/impressum) + ├─ Datenschutz (#/datenschutz) + └─ AGB Vermietung (#/agb-vermietung) +``` + +**Route-Beschreibungen:** +- `#/warenkorb` – Artikel anzeigen, Mengen steuern, entfernen, CTA → /mietanfrage +- `#/mietanfrage` – Veranstaltungsdaten + Kontaktdaten + Nachricht, Submit an Rentman +- `#/impressum` – Statische rechtliche Angaben (§5 TMG) +- `#/datenschutz` – Statische Datenschutzerklärung (DSGVO) +- `#/agb-vermietung` – Statische AGB Vermietung + +## 6. Komponenten-Design + +### 6.1 Cards +- Background: `var(--panel)` +- Border: `1px solid var(--border)` +- Border-Radius: `4px` (--radius-lg) +- Hover: Border wird heller, Shadow wird stärker + +### 6.2 Buttons +- **Primary:** Orange bg, white text, 3px radius +- **Secondary:** Surface bg, muted text, border, 3px radius +- **Ghost:** Transparent, muted text, hover surface bg + +### 6.3 Inputs +- Background: `var(--surface)` +- Border: `1px solid var(--border-strong)` (#555555) +- Focus: Orange border + subtle orange box-shadow +- Error: Red border + red box-shadow + +### 6.4 Badges +- Border-Radius: `9999px` (pill shape) +- Primary: Orange bg (8% alpha), orange text, orange border (20% alpha) + +### 6.5 Speaker Grid +- CSS Grid: `repeat(auto-fill, minmax(160px, 1fr))` +- Mobile: 2 columns +- Icons: 48x48px SVG, gray default, orange on hover + +## 7. UX States + +Alle Views implementieren Loading, Empty, Error und Success States: +- **Loading:** Skeleton-Shimmer Animationen +- **Empty:** Icon + Titel + Message + CTA Button +- **Error:** Alert-Icon + Titel + Message + Retry Button +- **Success:** Checkmark + Bestätigungstext + Weiter-Button + +**Zusätzliche States pro Seite:** +- **MietanfragePage:** form, submitting, success, error, validation-error +- **AdminPage:** login, idle, syncing, sync-complete, sync-error +- **Legal Pages (Impressum/Datenschutz/AGB):** loading, content + +## 8. Accessibility (WCAG 2.1 AA) + +- **Skip Link:** Zum Hauptinhalt springen am Seitenanfang +- **Semantic HTML:** header, main, footer, nav, section, article +- **ARIA:** aria-label, aria-current, aria-expanded, aria-controls, aria-invalid, aria-describedby, role=alert, role=status +- **Focus Visible:** 2px Orange Outline mit 2px Offset +- **Form Labels:** Jedes Input hat label for=..., Pflichtfelder markiert mit * +- **Heading Hierarchy:** h1 > h2 > h3, keine Levels übersprungen +- **Keyboard Navigation:** Alle interaktiven Elemente per Tab erreichbar, Enter auf Cards +- **Color Contrast:** Text #ffffff auf #131313 = 17.9:1 (AAA), Muted #d4d4d4 auf #131313 = 12.6:1 (AAA) + +## 9. KI-/Meta-Features + +- **robots:** noindex, nofollow, noarchive, nosnippet (KEINE Indexierung gewünscht) +- **JSON-LD:** LocalBusiness Schema mit Adresse, Öffnungszeiten, Services (Schema.org) – KI-tauglich +- **OpenGraph:** type, title, description, locale, site_name, url +- **Twitter Card:** summary_large_image +- **Semantic HTML5:** Korrekte Struktur für KI-Crawler +- **KEINE sitemap.xml** – nicht gewünscht (noindex) +- **KEINE Indexierung** – Domain hms.media-on.de nicht öffentlich indexiert + +## 10. Bilder + +- **Hero:** Unsplash Konzert-Bild (background-image, 35% opacity, dark gradient overlay) +- **Über uns:** Unsplash Veranstaltungstechnik-Setup Bild +- **Referenzen:** 9 echte HMS-Fotos (von hms-licht-ton.de, lokal auf Webspace gespeichert) +- **Equipment:** Platzhalter-Icons, Felder für echte Bilder vorbereitet (item.image) +- **Speaker Grid:** SVG-Icons (6 Lautsprecher-Typen) + +## 11. Prototyp-URLs + +- **Aktuell:** https://webspace.media-on.de/hms-prototype/index.html?v=8 +- **Dateien:** index.html, style.css, app.js, logo.svg, img/ref1-9.jpg + +## 12. Design-Entscheidungen + +| Entscheidung | Begründung | +|-------------|------------| +| Dark Theme (Agent Zero Grautöne) | User-Präferenz, professionelle Wirkung | +| Orange nur als Akzent | User-Feedback: Übergänge zu Orange sollten subtil sein | +| Minimale Border-Radius (2-4px) | User-Feedback: abgerundete Ecken nur ganz minimal | +| Vue 3 SPA für Prototyp | Gleiche Framework wie Produktion (Nuxt 3) | +| Echte HMS-Fotos für Referenzen | Authentizität, keine Stock-Fotos | +| SVG-Icons für Speaker Grid | Kompakt, skalierbar, theme-bar | +| Inter Font | Modern, clean, gute Lesbarkeit | +| noindex meta | Domain hms.media-on.de nicht öffentlich indexiert | +| Mietanfrage separat vom Warenkorb | Warenkorb = Items verwalten, Mietanfrage = Formular mit Event-/Kontaktdaten | +| Legal Pages als eigene Routes | Impressum, Datenschutz, AGB Vermietung als statische Seiten mit eigenem Routing | +| Admin Dashboard mit Sync-States | Post-Login: Sync-Trigger, Status-Anzeige, Sync-Log Viewer | +| JSON-LD trotz noindex | KI-Crawler sollen strukturierte Daten erkennen können, ohne Indexierung |