3ddruckkalkulation/DESIGN.md

---
version: alpha
name: CANCOM Simple Signage
description: "Digital-Signage-Plattform für CANCOM: Admin-UI zur Verwaltung von Screens, Playlists, Medien und Standorten sowie ein kioskartiger Player-Vollbildmodus."

colors:
  primary: "#DA002D"
  primary-hover: "#B00024"
  header: "#2B2F36"
  header-dark: "#0F1720"
  surface: "#FFFFFF"
  surface-dark: "#15181D"
  bg: "#F4F6F8"
  bg-dark: "#15181D"
  text: "#212121"
  text-dark: "#E5E7EB"
  border: "#D9DEE3"
  border-dark: "#2B3440"
  muted: "#6B7280"
  muted-dark: "#9AA4B2"
  online: "#2FB344"
  offline: "#D63939"
  badge-admin: "#DA002D"
  badge-superuser: "#8B5CF6"
  badge-user: "#3B82F6"
  newsticker-bg: "#DA002D"
  newsticker-text: "#FFFFFF"
  card-header-light: "#EEEEEE"
  card-header-dark: "#1A1E24"
  input-bg-dark: "#11161D"

typography:
  body:
    fontFamily: "Segoe UI, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  heading:
    fontFamily: "Segoe UI, Arial, sans-serif"
    fontWeight: 600
  heading-lg:
    fontFamily: "Segoe UI, Arial, sans-serif"
    fontSize: 1.75rem
    fontWeight: 600
  heading-md:
    fontFamily: "Segoe UI, Arial, sans-serif"
    fontSize: 1.25rem
    fontWeight: 600
  player-clock:
    fontFamily: monospace
    fontSize: 1.1em
  newsticker-track:
    fontFamily: "Segoe UI, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
  mute:
    fontFamily: "Segoe UI, Arial, sans-serif"
    fontSize: 0.82rem

rounded:
  card: 16px
  button: 20px
  small: 4px
  logo-box: 12px
  full: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 64px
  gutter: 24px
  page-top: 24px
  footer-padding-y: 0.65rem
  footer-padding-x: 1.5rem
  card-header-padding: 16px
  card-margin-bottom: 64px

components:
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderLeft: "6px solid {colors.primary}"
    rounded: "{rounded.card}"
  card-dark:
    backgroundColor: "{colors.bg-dark}"
    borderColor: "{colors.border-dark}"
  card-header:
    backgroundColor: "{colors.card-header-light}"
  card-header-dark:
    backgroundColor: "{colors.card-header-dark}"
  btn-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.button}"
  btn-primary-hover:
    backgroundColor: "{colors.primary-hover}"
  action-button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.button}"
    fontWeight: 600
  online-badge:
    backgroundColor: "{colors.online}"
    textColor: "#FFFFFF"
  offline-badge:
    backgroundColor: "{colors.offline}"
    textColor: "#FFFFFF"
  newsticker-bar:
    backgroundColor: "{colors.newsticker-bg}"
    textColor: "{colors.newsticker-text}"
    height: 40px
  overlay-button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.button}"
    fontWeight: 600
    boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
---

## Overview

CANCOM Simple Signage is a corporate digital-signage platform. The UI follows a **keyadmin dashboard** aesthetic: clean, card-based layouts with a dark header bar, a red navigation bar (CANCOM brand red #DA002D), and generous white space. The tone is professional, trustworthy, and functional — suitable for a B2B enterprise environment.

The admin UI manages screens, playlists, media uploads, and multi-site locations. The player UI is a fullscreen, kiosk-style view with no browser chrome, designed for unattended TV/monitor displays.

Two themes are supported: **light** (default, `data-bs-theme="light"`) and **dark** (`data-bs-theme="dark"`), persisted via `localStorage("signage-theme")`.

## Colors

The palette is rooted in CANCOM's corporate red and high-contrast neutrals.

- **Primary (#DA002D):** CANCOM signature red. Used for navigation bar, button backgrounds, card left-border accent, form-check focus rings, newsticker bar, and all primary interactive elements. The single most important action per screen uses this color.
- **Primary Hover (#B00024):** Darkened red for button hover/focus states.
- **Header (#2B2F36 / #0F1720 Dark):** Dark surface for top header bar. White text and icons on this surface.
- **Surface (#FFFFFF / #15181D Dark):** Card backgrounds and content areas.
- **Background (#F4F6F8 / #15181D Dark):** Page-level background.
- **Border (#D9DEE3 / #2B3440 Dark):** Card borders, table borders, form borders, list-group dividers.
- **Muted (#6B7280 / #9AA4B2 Dark):** Secondary text, captions, metadata, placeholders.
- **Online/Offline:** Green (#2FB344) for online status badge, Red (#D63939) for offline.
- **Role Badges:** Red for Admin, Purple (#8B5CF6) for Superuser, Blue (#3B82F6) for User.
- **Newsticker:** Red bar (#DA002D) with white text.

### States

Interactive elements use the following hover/active color shifts:
- **Primary button hover:** `primary-hover` (#B00024)
- **Secondary/outline buttons:** inherit background, use border with slight darkening
- **Dark-mode form controls:** input background #11161D

## Typography

The typography strategy uses the system font stack **Segoe UI** for all text, ensuring consistent rendering across Windows-based signage players.

- **Body:** Segoe UI Regular at 16px base. Line-height 1.5 for readability. This is the default for all body text, form labels, table cells.
- **Headings:** Segoe UI Semi-Bold (600). Three levels: page-title (1.75rem), card-title (1.25rem), and section headings.
- **Player Clock:** Monospace font at 1.1em for the live clock in the newsticker bar.
- **Newsticker Track:** Same as body (16px, Segoe UI), scrolling horizontally in the red bar.
- **Footer/Muted Text:** 0.82rem for copyright and secondary information.
- **Button Labels:** 1rem (action buttons), 1.05rem (voice agent button), both weight 600.
- **Code/Monospace:** Used for IP addresses and file listings in info tabs.

## Layout & Spacing

The layout follows a **single-column fluid** model with a fixed max-width container (1320px) on the admin pages.

### Layout Structure

**Admin pages** follow a two-tier horizontal bar layout:
1. **Upper bar (brand-surface):** Logo, site dropdown, theme toggle, user menu
2. **Lower bar (nav-surface):** Red (#DA002D) navigation with action buttons

**Player pages** have no layout bars — the entire viewport is used for media display.

### Spacing Scale

A strict spacing scale is used with 4px as the base unit:
- `xs` (4px) — tight gaps, micro-adjustments
- `sm` (8px) — tight gaps between related elements
- `md` (16px) — standard padding inside cards, gaps between buttons
- `lg` (24px) — generous card internal padding, gap between sections
- `xl` (32px) — major section spacing
- `xxl` (64px) — spacing between screen cards

### Card Layout

Screen management cards have:
- Internal padding: 1rem (16px) on body
- Card-header padding: 1rem (16px) left, with font-weight 600
- Gap below each card: 64px (`mb-6`)
- Tab content offset: 1rem (16px) top padding

### Grid Areas

The playlist row uses a fixed grid: `28px 1fr 90px 80px 90px 32px` for checkbox, name, type badge, size, delete button, drag handle.

## Elevation & Depth

Elevation is conveyed primarily through **border distinction** rather than shadows. Cards use a 1px solid border plus a distinctive 6px left-border accent in primary red (#DA002D). This provides clear visual separation without heavy drop shadows.

- **Cards:** 1px border + 6px left red accent + 1rem border-radius
- **Logo preview boxes:** 2px dashed border with 0.75rem border-radius
- **Player overlay buttons:** Light box-shadow (0 2px 8px rgba(0,0,0,0.08)), elevated to 0 4px 12px on hover
- **Willkommensseite card:** Elevated with 0 20px 60px rgba(0,0,0,0.08) shadow for premium feel

In dark mode, depth is achieved through tonal layering: card backgrounds match the page background, but card headers use a slightly lighter/different shade (#1A1E24) to create subtle hierarchy.

## Shapes

The shape language is defined by **consistent generous rounding**.

- **Cards:** 1rem (16px) border-radius with 1rem inner border-radius
- **Buttons (admin):** Tabler default rounded (approximately 4px)
- **Player action buttons (custom URL + voice agent):** 20px border-radius for a pill-like appearance
- **Logo preview boxes:** 0.75rem (12px) border-radius
- **Interactive overlays:** 20px border-radius on the back button
- **Small avatars/badges:** Fully rounded (9999px)
- **Form controls:** Tabler default (approximately 4px)

### Consistency Rule

All interactive player buttons (custom URL, voice agent, overlay back button) share identical shape: 20px border-radius, white background, black text, font-weight 600. This ensures visual consistency across all floating buttons on the player screen.

## Components

### Header (brand-surface)

Dark background (`--ccm-header` / `#0F1720` in dark mode). Contains:
- **Logo:** CANCOM SVG (height: 1.85rem, width: auto)
- **Wordmark:** Two-line (brand name + subtitle), 0.92rem, white
- **Site Dropdown:** `btn-outline-secondary` style
- **Theme Toggle:** Square button (2.5rem), moon/sun icon
- **User Dropdown:** Email + role badge (Admin=red, Superuser=purple, User=blue)

### Navigation Bar (nav-surface)

Red background (`--ccm-primary`). Contains white outline buttons (`btn-white`):
- Active state: white background, red text, inset shadow
- Icons: 1rem, vertically centered at -2px
- Gap: 8px between buttons, 8px vertical padding
- Used on admin, customer, dashboard, priority pages

### Cards

- `rounded: 1rem`, `border: 1px solid var(--ccm-border)`
- `border-left: 6px solid var(--ccm-primary)`
- Header: `background: #eee` (light) / `#1a1e24` (dark), font-weight 600
- Body contains Tabler tabs (6 tabs for screen cards)
- Tab background matches card surface; tab link text uses muted color; active tab uses surface background

### Player Media Elements

- img, video, iframe: fullscreen (`100vw × 100vh`), fixed position, centered via `top:50%; left:50%; transform:translate(-50%,-50%)`
- Only one element visible at a time (`display:none` default)
- `object-fit: contain` for images and video
- Background: pure black (`#000`)

### Action Button (Custom URL / Voice Agent)

The player supports floating action buttons with identical styling:
- `background: #fff; color: #000; border: none; border-radius: 20px; font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08)`
- 9 fixed positions: top/middle/bottom × left/center/right
- Bottom positions offset 56px from bottom when newsticker is active, 16px otherwise
- Two target behaviors: overlay (iframe with back button) or redirect (direct navigation)

### Voice Agent Button

Same base as action button plus:
- Integrated animated bars (5 bars, staggered delay 0–0.4s, 0.6s wave animation)
- Typewriter tagline: 11 multilingual phrases, character-by-character (50ms + 30ms random), 2.5s pause, 0.8s fade-out
- Optional DVA image (200px, aspect-ratio 648/596) above button
- Min-width: 280px, height: 56px, gap: 12px between icon and text

### Overlay (iframe Modal)

- Fullscreen (`position:fixed; inset:0; z-index:99999; background:#000`)
- iframe fills entire viewport
- Back button positioned at the same location as the clicked trigger button (9 positions)
- Closing the overlay resumes player (`playNext()`)

### Newsticker

- Fixed bottom bar: `height:40px; background:#DA002D; color:#fff; z-index:10000`
- Scrolling text: `animation: ticker-scroll 40s linear infinite`
- Live clock: monospace, right-aligned, hh:mm:ss, updated every second

### Online/Offline Status

- Online: green filled button (`btn-success`), not interactive
- Offline: red filled button (`btn-danger`), not interactive
- Tooltip on hover: browser, resolution, IP, last seen timestamp
- Determined by heartbeat file mtime (< 60s)

### Charts (Admin Dashboard)

- Sparkline area charts using ApexCharts
- Height: 32px, width: 100%, stroke width: 1.5, curve: straight
- Color: primary red (#DA002D), fill opacity: 0.25
- No tooltip, no animation

### Form Controls

- Switches use primary red for checked state
- Focus ring: `0 0 0 0.2rem rgba(218, 0, 45, 0.25)`
- Dark mode: background `#11161D`, text `#E5E7EB`, border `#2B3440`

### Dropdown Menus

- Hover/focus: `background: #e9ecef` (light) / `#3a3f45` (dark)
- Active item: primary red background with white text

### Alerts (Dark Mode)

- Danger: background `#2d0d0d`, text `#f0a0a0`, border `#4a1a1a`
- Success: background `#0d2b1d`, text `#a3d9b1`, border `#1a4730`

## Do's and Don'ts

- Do use primary red (#DA002D) only for the most important interactive elements and the nav bar
- Do maintain the two-tier header pattern (dark brand bar + red nav bar) on all admin pages
- Do keep player pages completely chromeless — no headers, navs, or footers
- Don't add shadows to cards; use border + left accent instead
- Don't use more than one red accent per card (the 6px left border is sufficient)
- Don't mix corner radii: cards use 1rem, player buttons use 20px — keep each category consistent
- Do set `data-bs-theme` synchronously before rendering to prevent dark-mode flash
- Do persist theme preference in `localStorage("signage-theme")`
- Don't use emojis in the UI; use Tabler Icons (`ti-*`) consistently
- Do respect the 9-position system for all floating player buttons
- Do offset bottom-positioned buttons 56px above the newsticker bar
- Do hide all media elements by default; show only the active one
- Do ensure WCAG AA contrast ratios for all text-on-background combinations