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

MC Cars · Admin

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

Leads

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

Lead

- × +
diff --git a/frontend/admin.js b/frontend/admin.js index 7ff781f..6e6ef0d 100644 --- a/frontend/admin.js +++ b/frontend/admin.js @@ -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() { € ${v.daily_price_eur} ${v.is_active ? "✅" : "—"} - Edit - Del + + `; tableBody.appendChild(tr); } @@ -358,12 +352,12 @@ function renderLeads() { ${esc(l.date_from || "—")} → ${esc(l.date_to || "—")} ${esc(l.status)} - Details + ${wantActive ? ` - Qualifizieren - Ablehnen + + ` : ` - Wieder oeffnen + `} `; leadsTableBody.appendChild(tr); @@ -391,9 +385,9 @@ function openLead(id) {
${l.is_active ? ` - Ablehnen - Qualifizieren - ` : `Wieder oeffnen`} + + + ` : ``}
`; leadDialog.showModal(); const note = () => document.querySelector("#leadNote").value; @@ -453,9 +447,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 1e4068f..eab273f 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -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);