kerimatilgan/prov
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI redesign step 1/N: Tailwind foundation + Stitch theme + Login + Wizard

Browse Source 
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>
This commit is contained in:
kerimatilganandClaude Opus 4.7 committed 2026-05-15 17:38:55 +02:00
1 parent bea45b9d2b
commit a535dcee38
5 files changed
+434 -278
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/login.html
+102 -88
View File
@@ -3,103 +3,117 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anmeldung - Provisions-Tracker</title>
<title>Anmeldung — Provisions-Tracker</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700&amp;family=JetBrains+Mono:wght@500&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
"primary": "#004ac6",
"primary-container": "#2563eb",
"primary-fixed-dim": "#b4c5ff",
"on-primary": "#ffffff",
"tertiary-container": "#bc4800",
"on-surface": "#0b1c30",
"on-surface-variant": "#434655",
"outline": "#737686",
"outline-variant": "#c3c6d7",
"surface-bright": "#f8f9ff",
"surface-container-lowest": "#ffffff",
"surface-container-low": "#eff4ff",
"surface-variant": "#d3e4fe",
"error": "#ba1a1a",
"error-container": "#ffdad6",
"on-error-container": "#93000a"
},
spacing: { "xs":"4px","sm":"8px","md":"16px","lg":"24px","xl":"32px","margin":"24px","gutter":"16px","base":"4px" },
fontFamily: {
"body-md": ["Hanken Grotesk", "sans-serif"],
"body-sm": ["Hanken Grotesk", "sans-serif"],
"title-sm": ["Hanken Grotesk", "sans-serif"],
"headline-md": ["Hanken Grotesk", "sans-serif"],
"label-caps": ["Hanken Grotesk", "sans-serif"]
},
fontSize: {
"body-md": ["14px", { lineHeight: "20px", fontWeight: "400" }],
"body-sm": ["13px", { lineHeight: "18px", fontWeight: "400" }],
"title-sm": ["18px", { lineHeight: "24px", fontWeight: "600" }],
"headline-md": ["24px", { lineHeight: "32px", letterSpacing: "-0.01em", fontWeight: "600" }],
"label-caps": ["11px", { lineHeight: "16px", letterSpacing: "0.05em", fontWeight: "700" }]
},
borderRadius: { "DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px" }
}
}
};
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #2c3e50;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.card {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
width: 100%;
max-width: 400px;
}
h1 {
color: #2c3e50;
margin-bottom: 8px;
font-size: 24px;
}
.subtitle {
color: #7f8c8d;
margin-bottom: 28px;
font-size: 14px;
}
label {
display: block;
margin-bottom: 6px;
color: #34495e;
font-weight: 500;
font-size: 14px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px;
border: 1px solid #bdc3c7;
border-radius: 6px;
font-size: 15px;
margin-bottom: 18px;
}
input:focus { outline: none; border-color: #3498db; }
button {
width: 100%;
padding: 12px;
background: #3498db;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
}
button:hover { background: #2980b9; }
button:disabled { background: #95a5a6; cursor: not-allowed; }
.error {
background: #fee;
color: #c0392b;
padding: 10px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 14px;
display: none;
}
.error.visible { display: block; }
.setup-note {
background: #fff8e1;
color: #8a6d3b;
padding: 10px;
border-radius: 6px;
margin-bottom: 16px;
font-size: 13px;
body { font-family: 'Hanken Grotesk', sans-serif; }
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body>
<div class="card">
<h1 id="title">Anmeldung</h1>
<p class="subtitle" id="subtitle">Provisions-Tracker</p>
<div id="setupNote" class="setup-note" style="display:none">
Noch kein Benutzer eingerichtet. Dieser Account wird als Administrator angelegt.
<body class="bg-surface-container-low min-h-screen text-on-surface flex items-center justify-center p-margin">
<div class="w-full max-w-[400px] bg-surface-container-lowest rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.06)] border border-outline-variant/30 p-xl flex flex-col gap-lg relative overflow-hidden">
<!-- Decorative top border, switched on in setup mode -->
<div id="setupTopBar" class="absolute top-0 left-0 right-0 h-1 bg-tertiary-container" style="display:none;"></div>
<!-- Logo & Brand -->
<div class="flex flex-col items-center gap-sm mb-sm text-center pt-xs">
<div id="brandIcon" class="w-12 h-12 bg-primary rounded-lg flex items-center justify-center text-on-primary mb-sm">
<span class="material-symbols-outlined">monitoring</span>
</div>
<h1 id="title" class="text-headline-md text-on-surface">Anmeldung</h1>
<p id="subtitle" class="text-body-md text-on-surface-variant">Provisions-Tracker</p>
</div>
<div id="errorBox" class="error"></div>
<form id="loginForm" autocomplete="on">
<label for="username">Benutzername</label>
<input type="text" id="username" name="username" required autocomplete="username">
<label for="password">Passwort</label>
<input type="password" id="password" name="password" required autocomplete="current-password">
<!-- Setup-Info-Banner (only shown in setup mode) -->
<div id="setupNote" style="display:none;" class="bg-[#fffbeb] border-l-4 border-[#f59e0b] p-md rounded-r-lg flex items-start gap-md">
<span class="material-symbols-outlined text-[#f59e0b] shrink-0">info</span>
<p class="text-body-sm text-[#92400e]">Noch kein Benutzer eingerichtet. Dieser Account wird als Administrator angelegt.</p>
</div>
<button type="submit" id="submitBtn">Anmelden</button>
<!-- Error banner -->
<div id="errorBox" style="display:none;" class="bg-error-container border border-error/20 text-on-error-container p-md rounded-lg text-body-sm flex items-start gap-sm">
<span class="material-symbols-outlined text-error text-[18px] shrink-0">error</span>
<span id="errorText"></span>
</div>
<form id="loginForm" autocomplete="on" class="flex flex-col gap-md">
<div class="flex flex-col gap-xs">
<label class="text-label-caps text-on-surface-variant" for="username">Benutzername</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">person</span>
<input type="text" id="username" name="username" required autocomplete="username"
class="w-full h-10 pl-10 pr-3 rounded-lg border border-outline-variant bg-surface-bright text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all outline-none">
</div>
</div>
<div class="flex flex-col gap-xs">
<label class="text-label-caps text-on-surface-variant" for="password">Passwort</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">lock</span>
<input type="password" id="password" name="password" required autocomplete="current-password"
class="w-full h-10 pl-10 pr-3 rounded-lg border border-outline-variant bg-surface-bright text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 transition-all outline-none">
</div>
</div>
<button type="submit" id="submitBtn"
class="w-full h-10 bg-primary-container text-on-primary rounded-lg text-title-sm hover:bg-primary-container/90 transition-colors mt-sm shadow-sm flex items-center justify-center gap-sm disabled:opacity-60 disabled:cursor-not-allowed">
<span id="submitLabel">Anmelden</span>
<span class="material-symbols-outlined text-[20px]" id="submitIcon">login</span>
</button>
</form>
</div>
<script src="/login.js"></script>
</body>
</html>