Lago
233 lines
11 KiB
HTML
233 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<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 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">
|
||
<!-- Login -->
|
||
<section id="loginView" class="admin-login" style="display:none;">
|
||
<div class="logo" style="justify-content:center;margin-bottom:1.5rem;">
|
||
<span class="logo-mark">MC</span>
|
||
<span>MC Cars Admin</span>
|
||
</div>
|
||
<form id="loginForm" class="admin-form">
|
||
<label>
|
||
<span>E-Mail</span>
|
||
<input type="email" name="email" required autocomplete="username" />
|
||
</label>
|
||
<label>
|
||
<span>Passwort</span>
|
||
<input type="password" name="password" required autocomplete="current-password" />
|
||
</label>
|
||
<fluent-button id="loginSubmit" appearance="accent" type="button">Anmelden</fluent-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.
|
||
</p>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Forced password rotation (first login OR user-triggered) -->
|
||
<section id="rotateView" class="admin-login" style="display:none;">
|
||
<div class="logo" style="justify-content:center;margin-bottom:1rem;">
|
||
<span class="logo-mark">MC</span>
|
||
<span>Passwort setzen</span>
|
||
</div>
|
||
<p style="color:var(--muted);font-size:0.9rem;text-align:center;max-width:38ch;margin:0 auto 1rem;">
|
||
Das Bootstrap-Passwort muss ersetzt werden. Das neue Passwort muss sich vom
|
||
Start-Passwort unterscheiden.
|
||
</p>
|
||
<form id="rotateForm" class="admin-form">
|
||
<label>
|
||
<span>Neues Passwort (mind. 10 Zeichen)</span>
|
||
<input type="password" name="pw1" minlength="10" required autocomplete="new-password" />
|
||
</label>
|
||
<label>
|
||
<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>
|
||
<p class="form-feedback error" id="rotateError"></p>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Admin -->
|
||
<section id="adminView" class="admin-page" style="display:none;">
|
||
<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>
|
||
|
||
<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>
|
||
</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>
|
||
</div>
|
||
|
||
<!-- LEADS -->
|
||
<div class="tab-panel" id="tab-leads">
|
||
<fluent-card 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>
|
||
</div>
|
||
</div>
|
||
<table class="admin-table" id="leadsTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Eingang</th>
|
||
<th>Name / E-Mail</th>
|
||
<th>Fahrzeug</th>
|
||
<th>Zeitraum</th>
|
||
<th>Status</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<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>
|
||
|
||
<!-- CUSTOMERS -->
|
||
<div class="tab-panel" id="tab-customers" style="display:none;">
|
||
<fluent-card 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">
|
||
<thead>
|
||
<tr>
|
||
<th>Erster Kontakt</th>
|
||
<th>Name / E-Mail</th>
|
||
<th>Telefon</th>
|
||
<th>Quelle (Lead)</th>
|
||
<th>Status</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
<p id="customersEmpty" class="muted" style="display:none;text-align:center;padding:2rem 0;">Noch keine Kunden.</p>
|
||
</fluent-card>
|
||
</div>
|
||
|
||
<!-- VEHICLES -->
|
||
<div class="tab-panel" id="tab-vehicles" style="display:none;">
|
||
<div class="admin-grid">
|
||
<fluent-card class="panel">
|
||
<h2 id="formTitle">Neues Fahrzeug</h2>
|
||
<form class="admin-form" id="vehicleForm">
|
||
<input type="hidden" name="vid" />
|
||
|
||
<div class="admin-photo-preview" id="photoPreview"></div>
|
||
<label>
|
||
<span>Foto hochladen (JPG/PNG/WebP, max 50 MB)</span>
|
||
<input type="file" id="photoInput" accept="image/*" />
|
||
</label>
|
||
<label>
|
||
<span>Foto-URL (wird automatisch gesetzt nach Upload)</span>
|
||
<input type="url" name="photo_url" placeholder="https://..." />
|
||
</label>
|
||
|
||
<div class="row2">
|
||
<label><span>Marke</span><input name="brand" required /></label>
|
||
<label><span>Modell</span><input name="model" required /></label>
|
||
</div>
|
||
|
||
<div class="row3">
|
||
<label><span>PS</span><input type="number" name="power_hp" min="0" /></label>
|
||
<label><span>Top-Speed km/h</span><input type="number" name="top_speed_kmh" min="0" /></label>
|
||
<label><span>0-100</span><input name="acceleration" placeholder="3.2s" /></label>
|
||
</div>
|
||
|
||
<div class="row3">
|
||
<label><span>Sitze</span><input type="number" name="seats" min="1" value="2" /></label>
|
||
<label><span>Preis / Tag (€)</span><input type="number" name="daily_price_eur" min="0" required /></label>
|
||
<label><span>Reihenfolge</span><input type="number" name="sort_order" value="100" /></label>
|
||
</div>
|
||
|
||
<label>
|
||
<span>Standort</span>
|
||
<input name="location" value="Steiermark (TBD)" />
|
||
</label>
|
||
|
||
<label>
|
||
<span>Beschreibung (Deutsch)</span>
|
||
<textarea name="description_de" rows="3"></textarea>
|
||
</label>
|
||
<label>
|
||
<span>Description (English)</span>
|
||
<textarea name="description_en" rows="3"></textarea>
|
||
</label>
|
||
|
||
<label style="flex-direction:row;align-items:center;gap:0.5rem;">
|
||
<input type="checkbox" name="is_active" checked style="width:auto;" />
|
||
<span>Aktiv / auf Website sichtbar</span>
|
||
</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>
|
||
</div>
|
||
<p class="form-feedback" id="formFeedback"></p>
|
||
</form>
|
||
</fluent-card>
|
||
|
||
<fluent-card class="panel">
|
||
<h2>Alle Fahrzeuge</h2>
|
||
<table class="admin-table" id="adminTable">
|
||
<thead>
|
||
<tr>
|
||
<th>Foto</th>
|
||
<th>Marke / Modell</th>
|
||
<th>€ / Tag</th>
|
||
<th>Aktiv</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</fluent-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Lead detail / qualify dialog -->
|
||
<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>
|
||
</div>
|
||
<div class="dialog-body" id="leadDialogBody"></div>
|
||
</dialog>
|
||
|
||
<script type="module" src="admin.js"></script>
|
||
</body>
|
||
</html>
|