Foundation
- Pull in Tailwind via CDN with the full Stitch design tokens
(palette, typography, spacing, radius) inline in <head>. Preflight
disabled so the rest of the legacy inline CSS keeps applying until
each screen is migrated.
- Add Hanken Grotesk + JetBrains Mono + Material Symbols Outlined
via Google Fonts.
- Replace the page header with the Stitch dark-slate top bar: brand
on the left, segmented tab nav in the middle, user pill + logout
on the right. Floating userBadge removed; renderUserBadge() now
writes the display name into #headerUserName and wires the
existing logout button.
Login
- Single card mirroring the Stitch login mockup with icon-prefixed
inputs (person/lock), focus ring, error banner and a primary CTA
that includes the login glyph. Setup mode swaps the heading,
shows the orange info bar with admin_panel_settings glyph and
changes the button to "Administrator anlegen".
Wizard (Schaltung erfassen)
- Step 1: anbieter button grid in Stitch style — bordered cards
with a material icon, hover lift and primary-coloured outline.
- Step 2: white card with a "← Anbieter ändern" pill in the
header, two-column layout (Aktivierungsdaten / Vertragsdaten),
label-caps form labels, JetBrains-Mono numeric inputs for
dates/ID/phone and a dashed file-drop zone. Save button gains
the save glyph.
Other screens (Übersicht, Provisionen, Gelöschte, Administration,
Benutzer) still render in the legacy style — those migrations
follow in the next steps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
kerimatilganandClaude Opus 4.7
a535dcee38