From a535dcee38701fb4c8041caaee811a9de1b42804 Mon Sep 17 00:00:00 2001 From: Kerim Atilgan Date: Fri, 15 May 2026 17:38:55 +0200 Subject: [PATCH] UI redesign step 1/N: Tailwind foundation + Stitch theme + Login + Wizard MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Foundation - Pull in Tailwind via CDN with the full Stitch design tokens (palette, typography, spacing, radius) inline in . 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) --- .gitignore | 4 + public/index.html | 390 +++++++++++++++++++++++++++++----------------- public/login.html | 190 +++++++++++----------- public/login.js | 32 ++-- public/script.js | 96 +++++++----- 5 files changed, 434 insertions(+), 278 deletions(-) diff --git a/.gitignore b/.gitignore index e4baee2..458879a 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,10 @@ uploads/ .env.*.local sessions.db +# Stitch design exports / drafts +stitch_*.zip +stitch_*/ + # OS / Editor .DS_Store Thumbs.db diff --git a/public/index.html b/public/index.html index e2c370e..6f5dee8 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,90 @@ Provisions-Tracker + + + + + + + + + + - -
-
-

Provisions-Tracker

-

Erfassung und Verwaltung von Mitarbeiter-Provisionen

-
- -
- - - - - - + + + +
+
+
+ monitoring + Provisions-Tracker +
+ +
+ +
+ +
+
+ +
+ -
-

Neue Schaltung — Schritt 1 von 2

-

Wählen Sie einen Anbieter.

-
+
+
+

Neue Schaltung

+

Schritt 1 von 2: Anbieter wählen

+
+
-