UI redesign step 1/N: Tailwind foundation + Stitch theme + Login + Wizard
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:
1 parent
bea45b9d2b
commit
a535dcee38
5 files changed
+434
-278
No files matched your search
+247
-143
@@ -4,6 +4,90 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Provisions-Tracker</title>
|
||||
|
||||
<!-- Tailwind via CDN + Stitch design theme. Preflight is disabled so the
|
||||
remaining legacy inline CSS keeps applying to screens we haven't
|
||||
migrated yet. -->
|
||||
<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 = {
|
||||
corePlugins: { preflight: false },
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#004ac6",
|
||||
"primary-container": "#2563eb",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#eeefff",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary": "#943700",
|
||||
"tertiary-container": "#bc4800",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"background": "#f8f9ff",
|
||||
"on-background": "#0b1c30",
|
||||
"surface": "#f8f9ff",
|
||||
"surface-bright": "#f8f9ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#eff4ff",
|
||||
"surface-container": "#e5eeff",
|
||||
"surface-container-high": "#dce9ff",
|
||||
"surface-container-highest": "#d3e4fe",
|
||||
"surface-variant": "#d3e4fe",
|
||||
"surface-dim": "#cbdbf5",
|
||||
"on-surface": "#0b1c30",
|
||||
"on-surface-variant": "#434655",
|
||||
"inverse-surface": "#213145",
|
||||
"inverse-on-surface": "#eaf1ff",
|
||||
"outline": "#737686",
|
||||
"outline-variant": "#c3c6d7"
|
||||
},
|
||||
spacing: {
|
||||
"base": "4px", "xs": "4px", "sm": "8px", "md": "16px",
|
||||
"lg": "24px", "xl": "32px", "gutter": "16px", "margin": "24px"
|
||||
},
|
||||
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"],
|
||||
"display-lg": ["Hanken Grotesk", "sans-serif"],
|
||||
"label-caps": ["Hanken Grotesk", "sans-serif"],
|
||||
"label-numeric": ["JetBrains Mono", "monospace"]
|
||||
},
|
||||
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" }],
|
||||
"display-lg": ["32px", { lineHeight: "40px", letterSpacing: "-0.02em", fontWeight: "700" }],
|
||||
"label-caps": ["11px", { lineHeight: "16px", letterSpacing: "0.05em", fontWeight: "700" }],
|
||||
"label-numeric": ["13px", { lineHeight: "16px", fontWeight: "500" }]
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -18,73 +102,38 @@
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
/* Layout primitives now use Tailwind in the markup; the legacy
|
||||
.container/.tab-content keep working so non-migrated screens stay
|
||||
styled. body padding-top reserves space for the fixed header. */
|
||||
body {
|
||||
padding-top: 56px;
|
||||
}
|
||||
.container {
|
||||
max-width: 1600px;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
flex: 1;
|
||||
padding: 15px 20px;
|
||||
background: #95a5a6;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
border-right: 1px solid #7f8c8d;
|
||||
}
|
||||
|
||||
.nav-tab:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
box-shadow: inset 0 -3px 0 #2980b9;
|
||||
}
|
||||
|
||||
.nav-tab:hover:not(.active) {
|
||||
background: #7f8c8d;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-tab.active:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Nav-tab active state — paired with the Tailwind classes on the
|
||||
inactive baseline. Override colour + bottom border for active tab. */
|
||||
header .nav-tab {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0 8px;
|
||||
font-family: inherit;
|
||||
}
|
||||
header .nav-tab.active {
|
||||
color: #eaf1ff !important;
|
||||
border-bottom: 2px solid #b4c5ff !important;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
@@ -909,143 +958,198 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Provisions-Tracker</h1>
|
||||
<p>Erfassung und Verwaltung von Mitarbeiter-Provisionen</p>
|
||||
</header>
|
||||
|
||||
<div class="nav-tabs">
|
||||
<button class="nav-tab active" onclick="showTab('schaltung')">Schaltung erfassen</button>
|
||||
<button class="nav-tab" onclick="showTab('overview')">Übersicht</button>
|
||||
<button class="nav-tab" onclick="showTab('provisionen')">Provisionen</button>
|
||||
<button class="nav-tab" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button>
|
||||
<button class="nav-tab" onclick="showTab('admin')">Administration</button>
|
||||
<button class="nav-tab admin-only" onclick="showTab('users')" style="display:none">Benutzer</button>
|
||||
<body class="bg-background min-h-screen text-on-background" style="font-family: 'Hanken Grotesk', sans-serif;">
|
||||
|
||||
<!-- Stitch-style top nav: dark slate header with brand on the left,
|
||||
tab navigation in the middle, user pill on the right. The nav-tab
|
||||
class is kept as a JS hook; CSS is now Tailwind. -->
|
||||
<header class="bg-inverse-surface border-b border-outline-variant fixed top-0 left-0 right-0 z-50 h-14">
|
||||
<div class="flex justify-between items-center w-full px-lg h-full max-w-[1440px] mx-auto">
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="material-symbols-outlined text-inverse-on-surface">monitoring</span>
|
||||
<span class="text-title-sm font-semibold text-inverse-on-surface">Provisions-Tracker</span>
|
||||
</div>
|
||||
<nav class="hidden md:flex items-end h-full">
|
||||
<ul class="flex gap-lg h-full">
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab active h-full flex items-center px-sm text-body-md text-inverse-on-surface border-b-2 border-primary-fixed-dim pt-[2px] transition-colors" onclick="showTab('schaltung')">Schaltung erfassen</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('overview')">Übersicht</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('provisionen')">Provisionen</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('admin')">Administration</button>
|
||||
</li>
|
||||
<li class="h-full flex items-center admin-only" style="display:none">
|
||||
<button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('users')">Benutzer</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="flex items-center gap-md">
|
||||
<span id="headerUserName" class="text-body-sm text-inverse-on-surface/90 hidden lg:inline-block"></span>
|
||||
<div class="h-6 w-px bg-outline-variant/30"></div>
|
||||
<button id="headerLogoutBtn" class="text-body-md text-primary-fixed-dim hover:text-inverse-on-surface transition-colors flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[18px]">logout</span>
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<!-- Schaltung erfassen Tab (2-step wizard) -->
|
||||
<div id="schaltung" class="tab-content active">
|
||||
|
||||
<!-- Step 1: Anbieter wählen -->
|
||||
<div id="wizardStep1">
|
||||
<h2>Neue Schaltung — Schritt 1 von 2</h2>
|
||||
<p style="color:#666; margin-bottom:20px;">Wählen Sie einen Anbieter.</p>
|
||||
<div id="wizardAnbieterButtons" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
|
||||
<div id="wizardStep1" class="bg-surface-container-lowest border border-outline-variant rounded-lg p-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)]">
|
||||
<div class="mb-lg border-b border-outline-variant pb-md">
|
||||
<h1 class="text-headline-md text-on-surface mb-xs">Neue Schaltung</h1>
|
||||
<p class="text-body-sm text-on-surface-variant">Schritt 1 von 2: Anbieter wählen</p>
|
||||
</div>
|
||||
<div id="wizardAnbieterButtons" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-md"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: VO + Tarif + Tarifoptionen + Kundendaten -->
|
||||
<div id="wizardStep2" style="display:none;">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
|
||||
<h2 style="margin:0;">Neue Schaltung — Schritt 2 von 2 <small id="wizardAnbieterLabel" style="color:#3498db; font-weight:normal;"></small></h2>
|
||||
<button type="button" onclick="wizardBackToStep1()" style="padding:6px 12px;">← Anbieter ändern</button>
|
||||
<div id="wizardStep2" style="display:none;" class="bg-surface-container-lowest border border-outline-variant rounded-lg p-lg shadow-[0_2px_4px_rgba(0,0,0,0.04)]">
|
||||
<div class="mb-lg border-b border-outline-variant pb-md flex justify-between items-start gap-md">
|
||||
<div>
|
||||
<h2 class="text-headline-md text-on-surface mb-xs">Neue Schaltung</h2>
|
||||
<p class="text-body-sm text-on-surface-variant">Schritt 2 von 2: Vertragsdetails erfassen<span id="wizardAnbieterLabel" class="text-primary"></span></p>
|
||||
</div>
|
||||
<button type="button" onclick="wizardBackToStep1()" class="px-md py-sm rounded-lg border border-outline-variant bg-surface text-on-surface text-body-sm hover:bg-surface-container-low transition-colors flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_back</span>
|
||||
Anbieter ändern
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form id="schaltungForm">
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:30px;">
|
||||
<div class="flex flex-col xl:flex-row gap-lg">
|
||||
<!-- Linke Spalte: Aktivierungsdaten -->
|
||||
<div>
|
||||
<h3 style="margin-top:0; margin-bottom:15px;">Aktivierungsdaten</h3>
|
||||
<div class="flex-1 flex flex-col gap-md">
|
||||
<h3 class="text-title-sm text-on-surface border-b border-outline-variant pb-xs">Aktivierungsdaten</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="wizardVo">VO-Auswahl <span class="required">*</span></label>
|
||||
<select id="wizardVo" required onchange="loadTarifeForWizard()">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="wizardVo">VO-Auswahl <span class="text-primary">*</span></label>
|
||||
<select id="wizardVo" required onchange="loadTarifeForWizard()"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
<option value="">VO wählen...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="wizardTarif">Tarif <span class="required">*</span></label>
|
||||
<select id="wizardTarif" name="tarif_id" required onchange="loadTarifoptionenForWizard()">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="wizardTarif">Tarif <span class="text-primary">*</span></label>
|
||||
<select id="wizardTarif" name="tarif_id" required onchange="loadTarifoptionenForWizard()"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
<option value="">Erst VO wählen...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="tarifoptionenSection" style="display:none;">
|
||||
<label>Tarifoptionen</label>
|
||||
<div id="tarifoptionenList" style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; margin-top:8px;"></div>
|
||||
<div id="noTarifoptionen" style="display:none; color:#666; font-style:italic; margin-top:8px;">Keine Tarifoptionen verfügbar</div>
|
||||
<div class="flex flex-col gap-base" id="tarifoptionenSection" style="display:none;">
|
||||
<label class="text-label-caps text-on-surface-variant">Tarifoptionen</label>
|
||||
<div id="tarifoptionenList" class="grid grid-cols-1 gap-xs"></div>
|
||||
<div id="noTarifoptionen" style="display:none;" class="text-body-sm text-on-surface-variant italic">Keine Tarifoptionen verfügbar</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="eingabeDatum">Erfassung <span class="required">*</span></label>
|
||||
<input type="date" id="eingabeDatum" name="eingabe_datum" required>
|
||||
<div class="grid grid-cols-2 gap-md">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="eingabeDatum">Erfassung <span class="text-primary">*</span></label>
|
||||
<input type="date" id="eingabeDatum" name="eingabe_datum" required
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm font-label-numeric text-label-numeric text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="schaltungsDatum">Vertragsbeginn <span class="required">*</span></label>
|
||||
<input type="date" id="schaltungsDatum" name="schaltungs_datum" required>
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="schaltungsDatum">Vertragsbeginn <span class="text-primary">*</span></label>
|
||||
<input type="date" id="schaltungsDatum" name="schaltungs_datum" required
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm font-label-numeric text-label-numeric text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Erfasser</label>
|
||||
<input type="text" id="wizardErfasser" readonly style="background:#f5f5f5;">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant">Erfasser</label>
|
||||
<input type="text" id="wizardErfasser" readonly
|
||||
class="w-full bg-surface-container-low border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface-variant outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rechte Spalte: Vertrags-/Kundendaten -->
|
||||
<div>
|
||||
<h3 style="margin-top:0; margin-bottom:15px;">Vertragsdaten</h3>
|
||||
<!-- Rechte Spalte: Vertragsdaten -->
|
||||
<div class="flex-1 flex flex-col gap-md">
|
||||
<h3 class="text-title-sm text-on-surface border-b border-outline-variant pb-xs">Vertragsdaten</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="schaltungsId">Schaltungs-ID <span class="required">*</span></label>
|
||||
<input type="text" id="schaltungsId" name="schaltungs_id" required>
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="schaltungsId">Schaltungs-ID <span class="text-primary">*</span></label>
|
||||
<input type="text" id="schaltungsId" name="schaltungs_id" required
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm font-label-numeric text-label-numeric text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
|
||||
<div class="form-row-thirds">
|
||||
<div class="form-group">
|
||||
<label for="firma">Firma (optional)</label>
|
||||
<input type="text" id="firma" name="firma">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="firma">Firma (optional)</label>
|
||||
<input type="text" id="firma" name="firma"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-md">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="vorname">Vorname <span class="text-primary">*</span></label>
|
||||
<input type="text" id="vorname" name="vorname" required
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="vorname">Vorname <span class="required">*</span></label>
|
||||
<input type="text" id="vorname" name="vorname" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nachname">Nachname <span class="required">*</span></label>
|
||||
<input type="text" id="nachname" name="nachname" required>
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="nachname">Nachname <span class="text-primary">*</span></label>
|
||||
<input type="text" id="nachname" name="nachname" required
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="rufnummer">Rufnummer (optional)</label>
|
||||
<input type="text" id="rufnummer" name="rufnummer">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="rufnummer">Rufnummer (optional)</label>
|
||||
<input type="text" id="rufnummer" name="rufnummer"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm font-label-numeric text-label-numeric text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="hardware">Hardware (optional, 15 Zeichen)</label>
|
||||
<input type="text" id="hardware" name="hardware" onchange="toggleHardwarePricing()">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="hardware">Hardware (optional, 15 Zeichen)</label>
|
||||
<input type="text" id="hardware" name="hardware" onchange="toggleHardwarePricing()"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm text-body-md text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
|
||||
<div id="hardwarePricingFields" style="display:none;">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="hardwareEk">Hardware-EK</label>
|
||||
<input type="number" id="hardwareEk" name="hardware_ek" step="0.01" min="0" placeholder="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="kundenverkaufspreis">Kundenverkaufspreis</label>
|
||||
<input type="number" id="kundenverkaufspreis" name="kundenverkaufspreis_netto" step="0.01" min="0" placeholder="0.00">
|
||||
</div>
|
||||
<div id="hardwarePricingFields" style="display:none;" class="grid grid-cols-2 gap-md">
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="hardwareEk">Hardware-EK</label>
|
||||
<input type="number" id="hardwareEk" name="hardware_ek" step="0.01" min="0" placeholder="0.00"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm font-label-numeric text-label-numeric text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant" for="kundenverkaufspreis">Kundenverkaufspreis</label>
|
||||
<input type="number" id="kundenverkaufspreis" name="kundenverkaufspreis_netto" step="0.01" min="0" placeholder="0.00"
|
||||
class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg h-10 px-sm font-label-numeric text-label-numeric text-on-surface focus:border-primary focus:ring-4 focus:ring-primary/20 outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Dokumente hochladen</label>
|
||||
<div class="file-upload-area" id="fileUploadArea">
|
||||
<p>Dateien hier hineinziehen oder klicken zum Auswählen</p>
|
||||
<div class="flex flex-col gap-base">
|
||||
<label class="text-label-caps text-on-surface-variant">Dokumente hochladen</label>
|
||||
<div class="file-upload-area border border-dashed border-outline-variant rounded-lg p-md flex flex-col items-center justify-center bg-surface-container-lowest hover:bg-surface-container-low transition-colors cursor-pointer" id="fileUploadArea">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[28px] mb-xs">upload_file</span>
|
||||
<p class="text-body-sm text-on-surface-variant">Dateien hier ablegen oder klicken</p>
|
||||
<input type="file" id="documentUpload" multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" style="display:none;">
|
||||
</div>
|
||||
<div id="uploadedFiles" class="documents-list"></div>
|
||||
<div id="uploadedFiles" class="flex flex-col gap-xs mt-xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="anbieter" name="anbieter_id">
|
||||
|
||||
<div style="margin-top:25px;">
|
||||
<button type="submit" class="btn-success">Schaltung speichern</button>
|
||||
<div class="mt-xl pt-md border-t border-outline-variant flex justify-end">
|
||||
<button type="submit" class="px-md py-sm rounded-lg bg-primary-container text-on-primary text-title-sm hover:bg-primary transition-colors flex items-center gap-xs shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">save</span>
|
||||
Schaltung speichern
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user