135 lines
5.7 KiB
HTML
135 lines
5.7 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="theme-color" content="#f8f4ef">
|
||
<meta name="robots" content="noindex, nofollow">
|
||
<title>Einladungen verwalten · Vicky & Daniel</title>
|
||
<link rel="stylesheet" href="/styles.css">
|
||
<link rel="stylesheet" href="/admin.css">
|
||
<script src="/admin.js" defer></script>
|
||
</head>
|
||
<body class="admin-body">
|
||
<main class="admin-shell">
|
||
<header class="admin-header">
|
||
<div>
|
||
<p class="hello">Vicky & Daniel</p>
|
||
<h1>Gästeliste</h1>
|
||
</div>
|
||
<div class="header-actions" id="header-actions" hidden>
|
||
<button id="refresh-button" class="small secondary" type="button">Aktualisieren</button>
|
||
<button id="logout-button" class="small secondary" type="button">Abmelden</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="login-panel" class="admin-card login-card">
|
||
<div class="state-icon" aria-hidden="true">↗</div>
|
||
<h2>Admin-Zugang</h2>
|
||
<p>Gib den Admin-Schlüssel ein, den du beim Deployment als <code>ADMIN_KEY</code> gesetzt hast.</p>
|
||
<form id="login-form">
|
||
<label for="admin-key">Admin-Schlüssel</label>
|
||
<input id="admin-key" type="password" required autocomplete="current-password">
|
||
<p id="login-error" class="form-error" role="alert" hidden></p>
|
||
<button type="submit">Anmelden</button>
|
||
</form>
|
||
</section>
|
||
|
||
<div id="dashboard" hidden>
|
||
<section class="stats" aria-label="Zusammenfassung">
|
||
<div><strong id="stat-total">0</strong><span>Einladungen</span></div>
|
||
<div><strong id="stat-opened">0</strong><span>geöffnet</span></div>
|
||
<div><strong id="stat-responded">0</strong><span>geantwortet</span></div>
|
||
<div><strong id="stat-attending">0</strong><span>Gäste kommen</span></div>
|
||
</section>
|
||
|
||
<section class="admin-grid">
|
||
<div class="admin-card create-card">
|
||
<p class="eyebrow">Neue Links</p>
|
||
<h2>Einladungen erstellen</h2>
|
||
<p>Ein Name pro Zeile, maximal 200 auf einmal.</p>
|
||
<form id="create-form">
|
||
<label for="guest-names">Namen</label>
|
||
<textarea id="guest-names" rows="8" required placeholder="Max Mustermann Erika Musterfrau"></textarea>
|
||
<p id="create-error" class="form-error" role="alert" hidden></p>
|
||
<button id="create-button" type="submit">Persönliche Links erstellen</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="admin-card links-card">
|
||
<p class="eyebrow">Gerade erstellt</p>
|
||
<h2>Links versenden</h2>
|
||
<div id="created-empty" class="empty">Neu erstellte Links erscheinen hier.</div>
|
||
<div id="created-links" hidden>
|
||
<div class="created-actions">
|
||
<button id="copy-all-button" class="small secondary" type="button">Alle kopieren</button>
|
||
</div>
|
||
<ul id="created-list"></ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="admin-card response-card">
|
||
<div class="section-heading">
|
||
<div>
|
||
<p class="eyebrow">Live-Übersicht</p>
|
||
<h2>Antworten</h2>
|
||
</div>
|
||
<button id="csv-button" class="small" type="button">CSV herunterladen</button>
|
||
</div>
|
||
<p class="tracking-note">„Geöffnet“ wird gezählt, sobald die RSVP-Seite im Browser geladen wird. Automatische Link-Vorschauen können in seltenen Fällen ebenfalls als Öffnung erscheinen.</p>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Gast</th>
|
||
<th>Status</th>
|
||
<th>Begleitung</th>
|
||
<th>Erstmals geöffnet</th>
|
||
<th>Zuletzt geöffnet</th>
|
||
<th>Zuletzt gespeichert</th>
|
||
<th>Link</th>
|
||
<th>Aktion</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="response-body"></tbody>
|
||
</table>
|
||
<p id="table-empty" class="empty">Noch keine Einladungen erstellt.</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<dialog id="response-dialog" class="response-dialog">
|
||
<form id="response-editor-form">
|
||
<div class="dialog-heading">
|
||
<div>
|
||
<p class="eyebrow">Antwort bearbeiten</p>
|
||
<h2 id="response-dialog-title">Gast</h2>
|
||
</div>
|
||
<button id="response-dialog-close" class="dialog-close" type="button" aria-label="Dialog schließen">×</button>
|
||
</div>
|
||
|
||
<label for="admin-answer">Antwort</label>
|
||
<select id="admin-answer" required>
|
||
<option value="" disabled>Bitte auswählen</option>
|
||
<option value="not_coming">Kommt nicht</option>
|
||
<option value="alone">Kommt alleine</option>
|
||
<option value="with_someone">Kommt mit Begleitung</option>
|
||
</select>
|
||
|
||
<div id="admin-companion-wrap" hidden>
|
||
<label for="admin-companion-name">Name der Begleitung</label>
|
||
<input id="admin-companion-name" type="text" maxlength="100" autocomplete="off">
|
||
</div>
|
||
|
||
<p id="response-editor-error" class="form-error" role="alert" hidden></p>
|
||
<div class="dialog-actions">
|
||
<button id="response-dialog-cancel" class="small secondary" type="button">Abbrechen</button>
|
||
<button id="response-save-button" class="small" type="submit">Antwort speichern</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
</main>
|
||
</body>
|
||
</html>
|