Lago/mc_cars_gmbh_infraestructure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: revert Admin UI to main website dark theme color schema

Browse Source
This commit is contained in:
Lago
2026-04-17 23:54:03 +02:00
parent 5d68dc173c
commit b6659a6d3a
3 changed files with 79 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/admin.html
+23 -35
View File
@@ -4,23 +4,11 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Admin · MC Cars</title>
<link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script type="module">
import {
provideFluentDesignSystem,
fluentButton,
fluentCard
} from "https://esm.sh/@fluentui/web-components@2.6.1";
provideFluentDesignSystem().register(
fluentButton(),
fluentCard()
);
</script>
<script>document.write('<scr'+'ipt src="config.js?v='+Date.now()+'"><\/scr'+'ipt>')</script>
</head>
<body class="admin-fluent">
<body>
<!-- Login -->
<section id="loginView" class="admin-login" style="display:none;">
<div class="logo" style="justify-content:center;margin-bottom:1.5rem;">
@@ -36,7 +24,7 @@
<span>Passwort</span>
<input type="password" name="password" required autocomplete="current-password" />
</label>
<fluent-button id="loginSubmit" appearance="accent" type="button">Anmelden</fluent-button>
<button class="btn" type="submit">Anmelden</button>
<p class="form-feedback error" id="loginError"></p>
<p style="color:var(--muted);font-size:0.82rem;text-align:center;">
Only admins. Self-registration is disabled.
@@ -63,7 +51,7 @@
<span>Wiederholen</span>
<input type="password" name="pw2" minlength="10" required autocomplete="new-password" />
</label>
<fluent-button id="rotateSubmit" appearance="accent" type="button">Speichern</fluent-button>
<button class="btn" type="submit">Speichern</button>
<p class="form-feedback error" id="rotateError"></p>
</form>
</section>
@@ -73,29 +61,29 @@
<div class="admin-bar">
<h1>MC Cars · Admin</h1>
<div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;">
<a href="index.html"><fluent-button appearance="stealth">Website</fluent-button></a>
<a href="index.html" class="btn ghost small">Website</a>
<span id="adminWho" style="color:var(--muted);font-size:0.85rem;"></span>
<fluent-button id="changePwBtn" appearance="outline">Passwort aendern</fluent-button>
<fluent-button id="logoutBtn" appearance="accent">Logout</fluent-button>
<button id="changePwBtn" class="btn ghost small">Passwort aendern</button>
<button id="logoutBtn" class="btn small">Logout</button>
</div>
</div>
<!-- Tabs -->
<div class="admin-tabs" role="tablist">
<fluent-button class="tab active" data-tab="leads" role="tab" appearance="stealth">Leads <span id="leadsBadge" class="tab-badge">0</span></fluent-button>
<fluent-button class="tab" data-tab="customers" role="tab" appearance="stealth">Kunden <span id="customersBadge" class="tab-badge">0</span></fluent-button>
<fluent-button class="tab" data-tab="vehicles" role="tab" appearance="stealth">Fahrzeuge</fluent-button>
<button class="tab active" data-tab="leads" role="tab">Leads <span id="leadsBadge" class="tab-badge">0</span></button>
<button class="tab" data-tab="customers" role="tab">Kunden <span id="customersBadge" class="tab-badge">0</span></button>
<button class="tab" data-tab="vehicles" role="tab">Fahrzeuge</button>
</div>
<!-- LEADS -->
<div class="tab-panel" id="tab-leads">
<fluent-card class="panel">
<div class="panel">
<div style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;">
<h2 style="margin:0;">Leads</h2>
<div class="sub-tabs" role="tablist">
<fluent-button class="sub-tab active" data-lview="active" appearance="stealth">Aktive Leads</fluent-button>
<fluent-button class="sub-tab" data-lview="inactive" appearance="stealth">Abgeschlossen</fluent-button>
<button class="sub-tab active" data-lview="active">Aktive Leads</button>
<button class="sub-tab" data-lview="inactive">Abgeschlossen</button>
</div>
</div>
<table class="admin-table" id="leadsTable">
@@ -112,12 +100,12 @@
<tbody></tbody>
</table>
<p id="leadsEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Keine Leads in dieser Ansicht.</p>
</fluent-card>
</div>
</div>
<!-- CUSTOMERS -->
<div class="tab-panel" id="tab-customers" style="display:none;">
<fluent-card class="panel">
<div class="panel">
<h2>Kunden</h2>
<p class="muted" style="margin-top:-0.4rem;">Entstehen automatisch, sobald ein Lead qualifiziert wird. Die Quelle bleibt als <code>lead_id</code> verknuepft.</p>
<table class="admin-table" id="customersTable">
@@ -134,13 +122,13 @@
<tbody></tbody>
</table>
<p id="customersEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Noch keine Kunden.</p>
</fluent-card>
</div>
</div>
<!-- VEHICLES -->
<div class="tab-panel" id="tab-vehicles" style="display:none;">
<div class="admin-grid">
<fluent-card class="panel">
<div class="panel">
<h2 id="formTitle">Neues Fahrzeug</h2>
<form class="admin-form" id="vehicleForm">
<input type="hidden" name="vid" />
@@ -192,14 +180,14 @@
</label>
<div style="display:flex;gap:0.5rem;">
<fluent-button appearance="accent" type="button" id="saveBtn">Speichern</fluent-button>
<fluent-button appearance="outline" type="button" id="resetBtn">Neu</fluent-button>
<button class="btn" type="submit" id="saveBtn">Speichern</button>
<button class="btn ghost" type="button" id="resetBtn">Neu</button>
</div>
<p class="form-feedback" id="formFeedback"></p>
</form>
</fluent-card>
</div>
<fluent-card class="panel">
<div class="panel">
<h2>Alle Fahrzeuge</h2>
<table class="admin-table" id="adminTable">
<thead>
@@ -213,7 +201,7 @@
</thead>
<tbody></tbody>
</table>
</fluent-card>
</div>
</div>
</div>
</section>
@@ -222,7 +210,7 @@
<dialog id="leadDialog">
<div class="dialog-head">
<h3 id="leadDialogTitle" style="margin:0;">Lead</h3>
<fluent-button class="dialog-close" id="leadDialogClose" aria-label="Close" appearance="stealth">×</fluent-button>
<button class="dialog-close" id="leadDialogClose" aria-label="Close">×</button>
</div>
<div class="dialog-body" id="leadDialogBody"></div>
</dialog>
frontend/admin.js
+11 -17
View File
@@ -17,8 +17,6 @@ const loginForm = document.querySelector("#loginForm");
const loginError = document.querySelector("#loginError");
const rotateForm = document.querySelector("#rotateForm");
const rotateError = document.querySelector("#rotateError");
const loginSubmit = document.querySelector("#loginSubmit");
const rotateSubmit = document.querySelector("#rotateSubmit");
const logoutBtn = document.querySelector("#logoutBtn");
const changePwBtn = document.querySelector("#changePwBtn");
const adminWho = document.querySelector("#adminWho");
@@ -43,10 +41,6 @@ const photoInput = document.querySelector("#photoInput");
const photoPreview = document.querySelector("#photoPreview");
const tableBody = document.querySelector("#adminTable tbody");
loginSubmit?.addEventListener("click", () => loginForm.requestSubmit());
rotateSubmit?.addEventListener("click", () => rotateForm.requestSubmit());
saveBtn?.addEventListener("click", () => vehicleForm.requestSubmit());
// ----- State -----
const state = {
user: null,
@@ -210,8 +204,8 @@ function renderVehicles() {
<td>€ ${v.daily_price_eur}</td>
<td>${v.is_active ? "✅" : "—"}</td>
<td style="white-space:nowrap;">
<fluent-button appearance="outline" data-edit="${v.id}">Edit</fluent-button>
<fluent-button appearance="accent" data-del="${v.id}">Del</fluent-button>
<button class="btn small ghost" data-edit="${v.id}">Edit</button>
<button class="btn small danger" data-del="${v.id}">Del</button>
</td>`;
tableBody.appendChild(tr);
}
@@ -358,12 +352,12 @@ function renderLeads() {
<td>${esc(l.date_from || "—")} → ${esc(l.date_to || "—")}</td>
<td><span class="pill pill-${esc(l.status)}">${esc(l.status)}</span></td>
<td style="white-space:nowrap;">
<fluent-button appearance="outline" data-open="${l.id}">Details</fluent-button>
<button class="btn small ghost" data-open="${l.id}">Details</button>
${wantActive ? `
<fluent-button appearance="accent" data-qual="${l.id}">Qualifizieren</fluent-button>
<fluent-button appearance="outline" data-disq="${l.id}">Ablehnen</fluent-button>
<button class="btn small" data-qual="${l.id}">Qualifizieren</button>
<button class="btn small danger" data-disq="${l.id}">Ablehnen</button>
` : `
<fluent-button appearance="outline" data-reopen="${l.id}">Wieder oeffnen</fluent-button>
<button class="btn small ghost" data-reopen="${l.id}">Wieder oeffnen</button>
`}
</td>`;
leadsTableBody.appendChild(tr);
@@ -391,9 +385,9 @@ function openLead(id) {
</dl>
<div style="display:flex;gap:0.5rem;justify-content:flex-end;margin-top:0.8rem;">
${l.is_active ? `
<fluent-button appearance="outline" id="dlgDisq">Ablehnen</fluent-button>
<fluent-button appearance="accent" id="dlgQual">Qualifizieren</fluent-button>
` : `<fluent-button appearance="outline" id="dlgReopen">Wieder oeffnen</fluent-button>`}
<button class="btn danger" id="dlgDisq">Ablehnen</button>
<button class="btn" id="dlgQual">Qualifizieren</button>
` : `<button class="btn ghost" id="dlgReopen">Wieder oeffnen</button>`}
</div>`;
leadDialog.showModal();
const note = () => document.querySelector("#leadNote").value;
@@ -453,9 +447,9 @@ function renderCustomers() {
<td><code class="muted">${esc(c.lead_id?.slice(0, 8) || "—")}</code></td>
<td><span class="pill pill-${esc(c.status)}">${esc(c.status)}</span></td>
<td style="white-space:nowrap;">
<fluent-button appearance="outline" data-toggle="${c.id}" data-status="${c.status}">
<button class="btn small ghost" data-toggle="${c.id}" data-status="${c.status}">
${c.status === "active" ? "Inaktiv setzen" : "Aktiv setzen"}
</fluent-button>
</button>
</td>`;
customersTableBody.appendChild(tr);
}
frontend/styles.css
+45 -136
View File
@@ -504,84 +504,31 @@ dialog::backdrop { background: rgba(0,0,0,0.6); }
}
/* ---------------- Admin ---------------- */
body.admin-fluent {
--bg: #faf9f8;
--bg-elev: #ffffff;
--bg-card: #ffffff;
--line: #edebe9;
--text: #201f1e;
--muted: #605e5c;
--accent: #0f6cbd;
--accent-strong: #115ea3;
--danger: #d13438;
--ok: #107c10;
--radius: 8px;
--shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.06);
background: var(--bg);
color: var(--text);
font-family: "Segoe UI", "Segoe UI Web (West European)", system-ui, -apple-system, sans-serif;
}
body.admin-fluent h1,
body.admin-fluent h2,
body.admin-fluent h3,
body.admin-fluent h4 {
font-family: inherit;
letter-spacing: 0;
color: var(--text);
}
body.admin-fluent .logo-mark {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
color: #ffffff;
border-radius: 4px;
}
body.admin-fluent input,
body.admin-fluent select,
body.admin-fluent textarea {
background: var(--bg-elev);
border: 1px solid #8a8886;
color: var(--text);
border-radius: 4px;
padding: 0.5rem 0.75rem;
}
body.admin-fluent input:focus,
body.admin-fluent select:focus,
body.admin-fluent textarea:focus {
border-color: var(--accent);
outline: 2px solid var(--accent);
outline-offset: -1px;
}
.admin-page {
max-width: 1200px;
max-width: 1100px;
margin: 2rem auto;
padding: 0 1.5rem;
padding: 0 1rem;
}
.admin-login {
max-width: 440px;
margin: 6rem auto;
padding: 2.5rem;
max-width: 420px;
margin: 5rem auto;
padding: 2rem;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.admin-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
margin-bottom: 2rem;
padding: 1rem 0;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
}
.admin-bar h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.admin-bar h1 { margin: 0; font-size: 1.4rem; }
.admin-grid {
display: grid;
@@ -589,116 +536,78 @@ body.admin-fluent textarea:focus {
gap: 1.5rem;
}
body.admin-fluent .panel {
.panel {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
padding: 1.4rem;
}
body.admin-fluent .panel h2 { font-size: 1.25rem; margin-bottom: 1.25rem; font-weight: 600; }
.panel h2 { font-size: 1.1rem; font-family: "Inter", sans-serif; margin-bottom: 1rem; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.admin-table th, table.admin-table td {
text-align: left;
padding: 0.75rem 0.6rem;
padding: 0.55rem 0.5rem;
border-bottom: 1px solid var(--line);
}
table.admin-table th {
color: var(--text);
font-weight: 600;
font-size: 0.8rem;
border-bottom: 2px solid var(--line);
}
table.admin-table tr:hover { background: #f3f2f1; }
table.admin-table th { color: var(--muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
table.admin-table tr:hover { background: rgba(255,255,255,0.02); }
.admin-form { display: grid; gap: 1rem; }
.admin-form label { display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--text); font-weight: 500; }
.admin-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin-form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.admin-form { display: grid; gap: 0.7rem; }
.admin-form label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.admin-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.admin-form .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.admin-photo-preview {
width: 100%;
aspect-ratio: 16 / 9;
background: #f3f2f1 center / cover no-repeat;
border: 1px dashed #8a8886;
border-radius: 4px;
background: var(--bg-elev) center / cover no-repeat;
border: 1px dashed var(--line);
border-radius: 10px;
margin-bottom: 0.5rem;
}
/* Admin tabs */
.admin-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--line);
padding-bottom: 0;
flex-wrap: wrap;
}
.admin-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); padding-bottom: 0.2rem; flex-wrap: wrap; }
.admin-tabs .tab {
color: var(--text);
padding: 0.75rem 1.25rem;
border-radius: 4px 4px 0 0;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; gap: 0.5rem;
border-bottom: 3px solid transparent;
background: transparent; border: none; color: var(--muted);
padding: 0.6rem 1rem; border-radius: 10px 10px 0 0;
font-family: "Inter", sans-serif; font-weight: 500; cursor: pointer;
display: inline-flex; align-items: center; gap: 0.4rem;
border-bottom: 2px solid transparent;
}
.admin-tabs .tab:hover { color: var(--accent); background: #f3f2f1; }
.admin-tabs .tab:hover { color: var(--fg); }
.admin-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-badge {
background: #edebe9; color: var(--text);
font-size: 0.75rem; padding: 0.15rem 0.6rem;
border-radius: 12px; min-width: 1.5rem; text-align: center;
font-weight: 400;
background: var(--bg-elev); color: var(--fg);
font-size: 0.7rem; padding: 0.1rem 0.5rem;
border-radius: 999px; min-width: 1.3rem; text-align: center;
}
.admin-tabs .tab.active .tab-badge { background: var(--accent); color: #ffffff; }
.admin-tabs .tab.active .tab-badge { background: var(--accent); color: #111; }
.sub-tabs { display: inline-flex; gap: 0.4rem; }
.sub-tabs { display: inline-flex; gap: 0.3rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; }
.sub-tab {
color: var(--text);
padding: 0.4rem 1rem; border-radius: 4px; cursor: pointer;
font-size: 0.85rem; font-weight: 500;
background: transparent; border: none; color: var(--muted);
padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer;
font-size: 0.82rem; font-family: "Inter", sans-serif;
}
.sub-tab:hover { background: #f3f2f1; }
.sub-tab.active { background: #edebe9; color: var(--text); font-weight: 600; }
.sub-tab.active { background: var(--accent); color: #111; font-weight: 600; }
/* Pills */
.pill {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid transparent;
}
.pill-new { background: #e8f3ff; color: #005a9e; border-color: #c7e0f4; }
.pill-qualified { background: #dff6dd; color: #107c10; border-color: #c3eec0; }
.pill-disqualified { background: #fde7e9; color: #a4262c; border-color: #fbd0d5; }
.pill-active { background: #dff6dd; color: #107c10; border-color: #c3eec0; }
.pill-inactive { background: #f3f2f1; color: #605e5c; border-color: #edebe9; }
.pill { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--line); }
.pill-new { background: rgba(200, 150, 80, 0.15); color: #e4b676; border-color: rgba(200, 150, 80, 0.4); }
.pill-qualified { background: rgba(90, 180, 120, 0.15); color: #6ecf96; border-color: rgba(90, 180, 120, 0.4); }
.pill-disqualified { background: rgba(180, 90, 90, 0.15); color: #d48a8a; border-color: rgba(180, 90, 90, 0.4); }
.pill-active { background: rgba(90, 180, 120, 0.15); color: #6ecf96; border-color: rgba(90, 180, 120, 0.4); }
.pill-inactive { background: rgba(160, 160, 160, 0.12); color: var(--muted); }
body.admin-fluent .muted { color: var(--muted); }
.muted { color: var(--muted); }
.btn.small { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.btn.danger { background: #7a2b2b; color: #fff; }
.btn.danger:hover { background: #8f3535; }
body.admin-fluent fluent-button {
vertical-align: middle;
}
body.admin-fluent td fluent-button {
margin-right: 0.4rem;
}
body.admin-fluent td fluent-button:last-child {
margin-right: 0;
}
/* Dialog */
dialog#leadDialog {
border: 1px solid var(--line); border-radius: var(--radius);