# Frontend Overhaul Design — MORZ Infoboard

**Date:** 2026-03-24
**Status:** Approved
**Scope:** All server-rendered HTML templates in `server/backend/internal/httpapi/`

---

## Summary

Overhaul the frontend of the MORZ Infoboard management UI to be professional, visually polished, and fun to use — while keeping the Go server-side rendering architecture and Bulma CSS framework intact. The MORZ red accent color anchors the brand identity throughout. Tenant and screen-user views are simplified to be idiot-proof; the admin section targets computer-literate users. The playlist editor becomes more interactive with inline editing and no-reload updates.

---

## 1. Design Tokens & Global Styles

A shared `<style>` block (or inline in each template) provides CSS custom properties overriding Bulma defaults:

| Token | Value | Usage |
|---|---|---|
| `--morz-red` | `#E30613` | Primary accent: buttons, active tabs, badges, focus rings |
| `--morz-red-dark` | `#B8000F` | Hover/active state for red elements |
| `--bg` | `#F7F8FA` | Page background |
| `--surface` | `#FFFFFF` | Cards, panels |
| `--shadow` | `0 1px 4px rgba(0,0,0,.08)` | Card elevation |
| `--nav-bg` | `#1A1A2E` | Top navbar background |
| `--radius-card` | `8px` | Card border radius |
| `--radius-btn` | `6px` | Button border radius |

**Typography:** `system-ui, -apple-system, "Segoe UI", sans-serif` — no web font load, familiar, fast.

**Bulma overrides:** Set `--bulma-primary` to `--morz-red` so all Bulma primary-colored components (buttons, links, focus) automatically pick up the brand color.

---

## 2. Navigation & Layout

### Top Navbar (all views)
- Background: `#1A1A2E` (charcoal)
- Left: "**MORZ** Infoboard" wordmark — "MORZ" in MORZ red, "Infoboard" in white
- Right: role-dependent links (admin: "Diagnose" link) + logout button (outlined white, small)
- Mobile: hamburger collapse

### Admin layout
- Max-width container: `960px`, generous padding
- Tab navigation: underline style (red 3px underline on active tab, not Bulma boxed tabs)

### Tenant/Screen-user layout
- Same navbar without Diagnose link
- Single-focus pages — no tabs where avoidable

### Responsive
- Cards go single-column below 768px
- Manage page: two-column layout stacks vertically on mobile

---

## 3. Login Page

- Full-height centered layout, off-white background
- Card: white, `box-shadow`, `border-radius: 8px`, **4px top border in MORZ red**
- Above form: "**MORZ** Infoboard" heading — "MORZ" in red
- Fields: clean, red focus ring (`outline: 2px solid var(--morz-red)`)
- Submit button: solid MORZ red, full-width, `border-radius: 6px`
- Error: soft red background banner inside the card (no separate notification)
- Password toggle: eye icon preserved

---

## 4. Admin Dashboard

### Screens Tab
- Replaces plain striped table with a responsive card grid (3-col desktop, 2-col tablet, 1-col mobile)
- Each screen card contains:
  - Name (bold, `1rem`)
  - Slug (monospace, muted gray)
  - Orientation badge (pill: "Querformat" / "Hochformat")
  - Online status dot (green/yellow/red)
  - Action buttons: "Playlist" (primary red, small) + "Löschen" (danger outline, small)
- Header row above grid: "Neuer Bildschirm" button (red) + "Provisionieren" button (outlined)

### Users Tab
- Stays table-based (dense data, admin-appropriate)
- Better spacing, clear "Neuer Benutzer" button top-right
- Per-screen user modal: visually cleaned up, same functionality

### Modals
- Existing delete-confirmation and screen-users modals retained, visual polish only
- Cards use `--radius-card`, header uses charcoal background

### Toast Notifications
- Existing JS toast system retained
- Style update: rounded pill (`border-radius: 24px`), subtle shadow, slides in from top-right with CSS transition

---

## 5. Manage / Playlist Editor

The primary daily-use screen. Two-column desktop layout, stacked on mobile.

### Left Panel — Playlist (~60% width)
- Header: screen name + orientation icon, back-link (← Dashboard or ← Admin), screen-switcher dropdown if user has multiple screens
- Each playlist item is a draggable card:
  - Left: drag handle (⠿ icon, cursor grab)
  - Type icon (from existing `typeIcon` template func)
  - **Title**: click to edit inline (contenteditable or small input, saves on blur via fetch POST)
  - **Duration**: click to edit inline (number input, saves on blur)
  - **Enabled toggle**: pill switch (green=on, gray=off), instant toggle via fetch POST
  - **Validity dates**: collapsed by default, expand with a chevron; date inputs shown when expanded
  - Delete button: appears on card hover (right side, red icon)
- Disabled items: 50% opacity
- Drag-reorder: SortableJS (already bundled at `/static/Sortable.min.js`), sends reorder fetch on drop
- Inline save confirmation: subtle green checkmark icon fades in/out next to the field

### Right Panel — Media Library (~40% width)
- Upload section: collapsed by default, expand with "+ Medium hinzufügen" button; contains drag-and-drop zone (dashed border) + file picker fallback + URL input for web type
- Asset grid: cards with thumbnail (image/video) or type icon (PDF/web), title, type badge
- Per-card CTA: "Hinzufügen" (red button) → becomes "✓ Hinzugefügt" (gray, disabled) if already in playlist
- Delete asset: small trash icon on card hover

### Interactions (no page reloads)
- Toggle enabled → `fetch POST /manage/{screenSlug}/items/{itemId}` (existing update endpoint)
- Inline title/duration edit → `fetch POST /manage/{screenSlug}/items/{itemId}` on blur
- Reorder → `fetch POST /manage/{screenSlug}/reorder`
- Add to playlist → standard form POST (redirect back, which reloads — acceptable)
- All other destructive actions retain redirect-based flow for safety

---

## 6. Tenant Dashboard

- Replaces two-tab layout with a single-page card-first design
- **Screens section**: large, touch-friendly cards — screen icon, name, status dot, single CTA "Playlist bearbeiten →" (red)
- **Media section**: below screens, or accessible via a simple toggle — drag-and-drop upload zone (dashed border), asset grid below
- No dense tables anywhere
- Status dots live-updated via `setInterval` fetch to player status API

---

## 7. Screen Overview (screen_users with multiple screens)

- Full-page grid of large tappable screen cards
- Each card: orientation icon (large), screen name, status dot
- One tap → direct link to `/manage/{slug}`
- No other UI elements — maximum simplicity

---

## 8. Provision Wizard

Visual polish only, no functional changes:
- Step numbers: circles in MORZ red
- Code blocks: dark terminal style (already present, refine padding/font)
- Copy buttons: icon-only with tooltip, confirmation checkmark on click
- Completion card: prominent green checkmark, "Playlist befüllen →" CTA in red

---

## 9. Status Indicators

Live status dots used across all views (Tenant dashboard, Screen overview, Admin screen cards):
- Green: online (last heartbeat < 2 min)
- Yellow: stale (< 10 min)
- Red: offline (> 10 min or never seen)
- Implementation: small `setInterval` (30s) fetches `/api/v1/screens/status` (bulk), matches results by `screen_id` field and updates dot color per screen

---

## Architecture Notes

- All templates remain in Go `const` string variables in their respective `templates.go` files
- No new build step, no npm, no bundler
- Bulma CDN link replaced with local `/static/bulma.min.css` (already present)
- Bulma variable overrides via CSS custom properties in each template's `<style>` block
- SortableJS already available at `/static/Sortable.min.js`
- Inline JS kept minimal and vanilla — no new JS libraries introduced
- CSRF tokens flow unchanged through all form POST operations
- All existing URL routes and redirect flows preserved exactly

---

## Files to Modify

| File | Changes |
|---|---|
| `internal/httpapi/manage/templates.go` | `loginTmpl`, `adminTmpl`, `manageTmpl`, `screenOverviewTmpl`, `provisionTmpl` |
| `internal/httpapi/tenant/templates.go` | `tenantDashTmpl` |
| `internal/httpapi/manage/ui.go` | Inline JS fetch handlers for playlist inline editing (no new Go handlers needed — existing endpoints are sufficient) |

No database changes. No new API endpoints needed for the visual overhaul (existing update/reorder endpoints cover the inline editing interactions).

**Important implementation note:** `HandleUpdateItemUI` currently calls `http.Redirect` on success. When called via `fetch` (inline editing), the redirect will be silently followed by the browser and the caller receives the full redirected page — not a clean response. `HandleUpdateItemUI` must be updated to return `204 No Content` when the request is a `fetch` call (detect via `X-Requested-With: fetch` header sent by the JS, or simply always return `204` since the manage page JS never needs the redirect). The existing redirect-based HTML form flow for other callers (add item, delete item) is unaffected.