kerimatilganandClaude Opus 4.7
a535dcee38
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>
120 lines
6.9 KiB
HTML
120 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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>
|
|
body { font-family: 'Hanken Grotesk', sans-serif; }
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|