103 lines
4.3 KiB
HTML
103 lines
4.3 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>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="response-body"></tbody>
|
|
</table>
|
|
<p id="table-empty" class="empty">Noch keine Einladungen erstellt.</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|