linus
9278c7fc34
- Dark theme with gradient accents, card-based layout replacing the
bare form/section markup
- Header brand mark + live connection status badge
- Nicer inputs/buttons (focus rings, primary/ghost variants), empty
states for the file and chat lists, auto-scroll on new chat messages
- Fix a broken template literal in app.js: the Authorization header
was rendered as the literal string "*** ${state.token}" instead of
"Bearer ${state.token}" -- guest Wahl submission and file loading
were silently failing auth
- Add basic network-error handling around the three fetch() calls
218 lines
7.3 KiB
HTML
218 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>KC-App</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="bg-decor" aria-hidden="true"></div>
|
|
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="brand-mark">KC</span>
|
|
<div>
|
|
<h1>KC-App</h1>
|
|
<p class="subtitle">Web-Client · Konfi-Castle Events</p>
|
|
</div>
|
|
</div>
|
|
<span id="conn-badge" class="badge badge-muted">nicht angemeldet</span>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="login-section" class="card">
|
|
<div class="card-header">
|
|
<h2>Anmelden</h2>
|
|
<p class="card-hint">Als Gast/Konfi mit Einladungscode oder als Team-Mitglied mit Passwort.</p>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button type="button" class="tab-btn active" data-tab="guest-tab">Gast / Konfi</button>
|
|
<button type="button" class="tab-btn" data-tab="team-tab">Team-Login</button>
|
|
</div>
|
|
|
|
<form id="guest-form" class="form-grid tab-panel" data-panel="guest-tab">
|
|
<label>
|
|
<span>Einladungscode</span>
|
|
<input id="invite-code" name="inviteCode" placeholder="z. B. AB12-CD34" required />
|
|
</label>
|
|
<label>
|
|
<span>Vorname</span>
|
|
<input id="first-name" name="firstName" required />
|
|
</label>
|
|
<label>
|
|
<span>Nachname</span>
|
|
<input id="last-name" name="lastName" required />
|
|
</label>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span>Beitreten</span>
|
|
</button>
|
|
</form>
|
|
|
|
<form id="team-form" class="form-grid tab-panel" data-panel="team-tab" hidden>
|
|
<label>
|
|
<span>Gemeinde-Name</span>
|
|
<input id="team-gemeinde" name="gemeindeName" placeholder="z. B. Mustergemeinde" />
|
|
</label>
|
|
<label>
|
|
<span>Passwort</span>
|
|
<input id="team-password" name="password" type="password" required />
|
|
</label>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span>Anmelden</span>
|
|
</button>
|
|
</form>
|
|
|
|
<p id="login-status" class="status"></p>
|
|
</section>
|
|
|
|
<section id="app-section" class="stack" hidden>
|
|
<div class="card" id="whoami-card" hidden>
|
|
<div class="card-header row">
|
|
<div>
|
|
<h2>Angemeldet als</h2>
|
|
<p class="card-hint" id="whoami-text">–</p>
|
|
</div>
|
|
<button id="logout-btn" class="btn btn-ghost">Abmelden</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" id="gruppen-card" hidden>
|
|
<div class="card-header row">
|
|
<div>
|
|
<h2>Gruppenchat erstellen</h2>
|
|
<p class="card-hint">Team-Mitglieder und Konfis frei auswählen (KC-weit, egal welche Gemeinde).</p>
|
|
</div>
|
|
<button id="load-candidates" class="btn btn-ghost">Kandidaten laden</button>
|
|
</div>
|
|
<div class="form-grid">
|
|
<label>
|
|
<span>KC-ID</span>
|
|
<input id="gruppe-kcid" placeholder="KC-ID" />
|
|
</label>
|
|
<label>
|
|
<span>Name der Gruppe</span>
|
|
<input id="gruppe-name" placeholder="z. B. Ausflugsplanung" />
|
|
</label>
|
|
</div>
|
|
<div class="two-col">
|
|
<div>
|
|
<p class="card-hint">Team-Mitglieder</p>
|
|
<ul id="candidate-users" class="list list-picker">
|
|
<li class="list-empty">Noch nicht geladen.</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p class="card-hint">Konfis</p>
|
|
<ul id="candidate-guests" class="list list-picker">
|
|
<li class="list-empty">Noch nicht geladen.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<button id="create-gruppe" class="btn btn-primary">Gruppenchat erstellen</button>
|
|
<p id="gruppe-status" class="status"></p>
|
|
</div>
|
|
|
|
<div class="card" id="manage-card" hidden>
|
|
<div class="card-header row">
|
|
<div>
|
|
<h2>Teilnehmer verwalten</h2>
|
|
<p class="card-hint">Für einen bestehenden Gruppenchat Teilnehmer hinzufügen/entfernen.</p>
|
|
</div>
|
|
</div>
|
|
<div class="form-grid form-inline">
|
|
<label>
|
|
<span>Channel-ID</span>
|
|
<input id="manage-channel-id" placeholder="Channel-ID des Gruppenchats" />
|
|
</label>
|
|
</div>
|
|
<div class="form-grid form-inline">
|
|
<label>
|
|
<span>User-ID</span>
|
|
<input id="manage-user-id" placeholder="optional" />
|
|
</label>
|
|
<label>
|
|
<span>Gast-ID</span>
|
|
<input id="manage-guest-id" placeholder="optional" />
|
|
</label>
|
|
<button id="add-participant" class="btn btn-primary">Hinzufügen</button>
|
|
<button id="remove-participant" class="btn btn-ghost">Entfernen</button>
|
|
</div>
|
|
<p id="manage-status" class="status"></p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>Workshop-Wahl</h2>
|
|
<p class="card-hint">Wünsche in Reihenfolge deiner Priorität eintragen.</p>
|
|
</div>
|
|
<div class="form-grid">
|
|
<label>
|
|
<span>Wahl-ID</span>
|
|
<input id="wahl-id" placeholder="Wahl-ID" />
|
|
</label>
|
|
<label>
|
|
<span>Prioritäten</span>
|
|
<input id="prioritaeten" placeholder="Workshop-IDs, mit Komma getrennt" />
|
|
</label>
|
|
<button id="submit-wahl" class="btn btn-primary">
|
|
<span>Absenden</span>
|
|
</button>
|
|
</div>
|
|
<p id="wahl-status" class="status"></p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header row">
|
|
<div>
|
|
<h2>Dateien</h2>
|
|
<p class="card-hint">Für dich freigegebene Dokumente.</p>
|
|
</div>
|
|
<button id="load-files" class="btn btn-ghost">Aktualisieren</button>
|
|
</div>
|
|
<ul id="file-list" class="list list-files">
|
|
<li class="list-empty">Noch keine Dateien geladen.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header row">
|
|
<div>
|
|
<h2>Chat</h2>
|
|
<p class="card-hint">Channel-ID eingeben und live mitlesen/schreiben.</p>
|
|
</div>
|
|
<button id="load-channels" class="btn btn-ghost">Meine Chats laden</button>
|
|
</div>
|
|
<ul id="channel-list" class="list list-channels">
|
|
<li class="list-empty">Noch keine Chats geladen.</li>
|
|
</ul>
|
|
<div class="form-grid form-inline">
|
|
<label>
|
|
<span>Channel-ID</span>
|
|
<input id="channel-id" placeholder="Channel-ID" />
|
|
</label>
|
|
<button id="join-channel" class="btn btn-primary">Beitreten</button>
|
|
</div>
|
|
<ul id="chat-log" class="list list-chat">
|
|
<li class="list-empty">Noch keine Nachrichten.</li>
|
|
</ul>
|
|
<div class="form-grid form-inline">
|
|
<label>
|
|
<span>Nachricht</span>
|
|
<input id="chat-message" placeholder="Nachricht schreiben…" />
|
|
</label>
|
|
<button id="send-message" class="btn btn-primary">Senden</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>KC-App · Zero-Dependency Web-Fallback</p>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|