diff --git a/frontend/admin.html b/frontend/admin.html index bc30746..a8e18eb 100644 --- a/frontend/admin.html +++ b/frontend/admin.html @@ -4,11 +4,23 @@ Admin · MC Cars - + + - + @@ -61,29 +73,29 @@

MC Cars · Admin

- Website + Website - - + Passwort aendern + Logout
- - - + Leads 0 + Kunden 0 + Fahrzeuge
-
+

Leads

- - + Aktive Leads + Abgeschlossen
@@ -100,12 +112,12 @@
-
+
@@ -210,7 +222,7 @@

Lead

- + ×
diff --git a/frontend/admin.js b/frontend/admin.js index 6e6ef0d..7ff781f 100644 --- a/frontend/admin.js +++ b/frontend/admin.js @@ -17,6 +17,8 @@ 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"); @@ -41,6 +43,10 @@ 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, @@ -204,8 +210,8 @@ function renderVehicles() { € ${v.daily_price_eur} ${v.is_active ? "✅" : "—"} - - + Edit + Del `; tableBody.appendChild(tr); } @@ -352,12 +358,12 @@ function renderLeads() { ${esc(l.date_from || "—")} → ${esc(l.date_to || "—")} ${esc(l.status)} - + Details ${wantActive ? ` - - + Qualifizieren + Ablehnen ` : ` - + Wieder oeffnen `} `; leadsTableBody.appendChild(tr); @@ -385,9 +391,9 @@ function openLead(id) {
${l.is_active ? ` - - - ` : ``} + Ablehnen + Qualifizieren + ` : `Wieder oeffnen`}
`; leadDialog.showModal(); const note = () => document.querySelector("#leadNote").value; @@ -447,9 +453,9 @@ function renderCustomers() { ${esc(c.lead_id?.slice(0, 8) || "—")} ${esc(c.status)} - + `; customersTableBody.appendChild(tr); } diff --git a/frontend/styles.css b/frontend/styles.css index eab273f..3f2a826 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -504,6 +504,39 @@ dialog::backdrop { background: rgba(0,0,0,0.6); } } /* ---------------- Admin ---------------- */ +body.admin-fluent { + background: #f5f7fb; + color: #1b1a19; + 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: "Segoe UI", "Segoe UI Web (West European)", system-ui, sans-serif; + letter-spacing: 0; +} + +body.admin-fluent .logo-mark { + background: linear-gradient(135deg, #0f6cbd 0%, #0a4f8f 100%); + color: #fff; +} + +body.admin-fluent input, +body.admin-fluent select, +body.admin-fluent textarea { + background: #ffffff; + border: 1px solid #c8d1dc; + color: #1b1a19; +} + +body.admin-fluent input:focus, +body.admin-fluent select:focus, +body.admin-fluent textarea:focus { + border-color: #0f6cbd; +} + .admin-page { max-width: 1100px; margin: 2rem auto; @@ -514,9 +547,10 @@ dialog::backdrop { background: rgba(0,0,0,0.6); } max-width: 420px; margin: 5rem auto; padding: 2rem; - background: var(--bg-card); - border: 1px solid var(--line); - border-radius: var(--radius); + background: #ffffff; + border: 1px solid #dde3ea; + border-radius: 12px; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); } .admin-bar { @@ -525,7 +559,7 @@ dialog::backdrop { background: rgba(0,0,0,0.6); } align-items: center; padding: 1rem 0; margin-bottom: 1.5rem; - border-bottom: 1px solid var(--line); + border-bottom: 1px solid #dde3ea; } .admin-bar h1 { margin: 0; font-size: 1.4rem; } @@ -537,10 +571,11 @@ dialog::backdrop { background: rgba(0,0,0,0.6); } } .panel { - background: var(--bg-card); - border: 1px solid var(--line); - border-radius: var(--radius); + background: #ffffff; + border: 1px solid #dde3ea; + border-radius: 12px; padding: 1.4rem; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); } .panel h2 { font-size: 1.1rem; font-family: "Inter", sans-serif; margin-bottom: 1rem; } @@ -549,65 +584,77 @@ 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.55rem 0.5rem; - border-bottom: 1px solid var(--line); + border-bottom: 1px solid #ecf0f4; } -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); } +table.admin-table th { color: #616161; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } +table.admin-table tr:hover { background: #f8fafc; } .admin-form { display: grid; gap: 0.7rem; } -.admin-form label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); } +.admin-form label { display: grid; gap: 0.25rem; font-size: 0.82rem; color: #616161; } .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: var(--bg-elev) center / cover no-repeat; - border: 1px dashed var(--line); + background: #f3f5f8 center / cover no-repeat; + border: 1px dashed #c8d1dc; border-radius: 10px; margin-bottom: 0.5rem; } /* Admin tabs */ -.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 { display: flex; gap: 0.4rem; margin-bottom: 1.2rem; border-bottom: 1px solid #dde3ea; padding-bottom: 0.2rem; flex-wrap: wrap; } .admin-tabs .tab { - background: transparent; border: none; color: var(--muted); + color: #616161; padding: 0.6rem 1rem; border-radius: 10px 10px 0 0; - font-family: "Inter", sans-serif; font-weight: 500; cursor: pointer; + font-family: "Segoe UI", sans-serif; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; border-bottom: 2px solid transparent; } -.admin-tabs .tab:hover { color: var(--fg); } -.admin-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); } +.admin-tabs .tab:hover { color: #0f6cbd; } +.admin-tabs .tab.active { color: #0f6cbd; border-bottom-color: #0f6cbd; } .tab-badge { - background: var(--bg-elev); color: var(--fg); + background: #eef2f7; color: #323130; 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: #111; } +.admin-tabs .tab.active .tab-badge { background: #0f6cbd; color: #fff; } -.sub-tabs { display: inline-flex; gap: 0.3rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; } +.sub-tabs { display: inline-flex; gap: 0.3rem; background: #f3f5f8; border: 1px solid #d8e0ea; border-radius: 999px; padding: 0.2rem; } .sub-tab { - background: transparent; border: none; color: var(--muted); + color: #616161; padding: 0.35rem 0.9rem; border-radius: 999px; cursor: pointer; - font-size: 0.82rem; font-family: "Inter", sans-serif; + font-size: 0.82rem; font-family: "Segoe UI", sans-serif; } -.sub-tab.active { background: var(--accent); color: #111; font-weight: 600; } +.sub-tab.active { background: #0f6cbd; color: #fff; font-weight: 600; } /* Pills */ -.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); } +.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 #dde3ea; } +.pill-new { background: #e8f3ff; color: #0f6cbd; border-color: #bbd8f2; } +.pill-qualified { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; } +.pill-disqualified { background: #fdeeee; color: #a4262c; border-color: #efb7bc; } +.pill-active { background: #ebf7ee; color: #0b6a38; border-color: #b8ddc5; } +.pill-inactive { background: #f3f2f1; color: #605e5c; } -.muted { color: var(--muted); } +.muted { color: #616161; } .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.35rem; +} + +body.admin-fluent td fluent-button:last-child { + margin-right: 0; +} + /* Dialog */ dialog#leadDialog { border: 1px solid var(--line); border-radius: var(--radius);