161 lines
7.2 KiB
HTML
161 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Sportarten-Anmeldung | Schulverwaltung</title>
|
||
<link rel="stylesheet" href="css/styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-content">
|
||
<h1>Sportarten-Anmeldung</h1>
|
||
<div class="inline">
|
||
<button id="theme-toggle" class="theme-toggle" aria-label="Theme umschalten" aria-pressed="false">
|
||
<span class="theme-icon">🌙</span>
|
||
</button>
|
||
<button id="logout-btn" class="btn-ghost hidden">Logout</button>
|
||
</div>
|
||
</div>
|
||
<nav role="tablist" aria-label="Hauptnavigation">
|
||
<button class="nav-btn active" data-view="anmeldung" role="tab" aria-selected="true">Anmeldung</button>
|
||
<button class="nav-btn admin-only hidden" data-view="berichte" role="tab" aria-selected="false">Berichte</button>
|
||
<button class="nav-btn admin-only hidden" data-view="rechnungen" role="tab" aria-selected="false">Rechnungen</button>
|
||
<button class="nav-btn" data-view="login" role="tab" aria-selected="false" id="login-tab-btn">Login</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="anmeldung-view" class="view active" aria-labelledby="anmeldung">
|
||
<h2 id="anmeldung">Kursanmeldung für Schüler</h2>
|
||
<p class="section-subtitle">Wähle Betrieb und Sportarten aus. Mehrfachauswahl ist möglich.</p>
|
||
|
||
<form id="anmelde-form" novalidate>
|
||
<div class="form-group">
|
||
<label for="vorname">Vorname *</label>
|
||
<input type="text" id="vorname" name="vorname" placeholder="Max" required autocomplete="given-name" />
|
||
<span class="error-message" id="vorname-error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="nachname">Nachname *</label>
|
||
<input type="text" id="nachname" name="nachname" placeholder="Mustermann" required autocomplete="family-name" />
|
||
<span class="error-message" id="nachname-error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">E-Mail *</label>
|
||
<input type="email" id="email" name="email" placeholder="max.mustermann@beispiel.de" required autocomplete="email" />
|
||
<span class="error-message" id="email-error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="geburtsdatum">Geburtsdatum
|
||
<span class="tooltip" data-tip="Optional – hilft uns bei der Kursplanung" aria-hidden="true">ℹ️</span>
|
||
</label>
|
||
<input type="date" id="geburtsdatum" name="geburtsdatum" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="betrieb">Betrieb *</label>
|
||
<select id="betrieb" name="betrieb" required>
|
||
<option value="">Bitte wählen...</option>
|
||
</select>
|
||
<span class="error-message" id="betrieb-error"></span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Sportarten auswählen (mehrere möglich) *</label>
|
||
<div id="kurse-container" class="kurse-container" aria-live="polite">
|
||
<div class="loading">Kurse werden geladen...</div>
|
||
</div>
|
||
<span class="error-message" id="kurse-error"></span>
|
||
</div>
|
||
<div class="actions">
|
||
<button type="submit" class="btn-primary" id="submit-btn">
|
||
<span class="btn-text">Anmeldung absenden</span>
|
||
<span class="btn-loader hidden" aria-hidden="true">
|
||
<span class="spinner"></span> Wird gesendet...
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div id="erfolg-meldung" class="meldung erfolg hidden" role="status" aria-live="polite">
|
||
<h3>✅ Anmeldung erfolgreich</h3>
|
||
<p id="erfolg-text"></p>
|
||
<div class="meldungs-actions">
|
||
<button class="btn-secondary" id="neu-anmelden">Weitere Person anmelden</button>
|
||
<button class="btn-ghost" id="zur-uebersicht">Zur Übersicht</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="fehler-meldung" class="meldung fehler hidden" role="alert" aria-live="assertive">
|
||
<h3>⚠️ Fehler bei der Anmeldung</h3>
|
||
<p id="fehler-text"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="login-view" class="view" aria-labelledby="login">
|
||
<h2 id="login">Anmeldung Schulleitung</h2>
|
||
<p class="section-subtitle">Bitte melden Sie sich an, um Berichte und Rechnungen zu sehen.</p>
|
||
<form id="login-form" novalidate>
|
||
<div class="form-group">
|
||
<label for="login-email">E-Mail</label>
|
||
<input type="email" id="login-email" required autocomplete="username" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="login-password">Passwort</label>
|
||
<input type="password" id="login-password" required autocomplete="current-password" />
|
||
</div>
|
||
<div class="actions">
|
||
<button type="submit" class="btn-primary">Einloggen</button>
|
||
</div>
|
||
<span class="error-message" id="login-error"></span>
|
||
</form>
|
||
</section>
|
||
|
||
<section id="berichte-view" class="view" aria-labelledby="berichte">
|
||
<h2 id="berichte">Berichte für Schulleitung</h2>
|
||
<p class="section-subtitle">Abruf der aktuellen Teilnehmerzahlen pro Betrieb und pro Kurs.</p>
|
||
<div class="tabs" role="tablist" aria-label="Berichte Tabs">
|
||
<button class="tab-btn active" data-tab="betrieb" role="tab" aria-selected="true">Teilnehmer pro Betrieb</button>
|
||
<button class="tab-btn" data-tab="kurs" role="tab" aria-selected="false">Teilnehmer pro Kurs</button>
|
||
</div>
|
||
<div id="betrieb-tab" class="tab-content active">
|
||
<h3>Übersicht nach Betrieben</h3>
|
||
<div id="betrieb-bericht" aria-live="polite">
|
||
<div class="loading">Bericht wird geladen...</div>
|
||
</div>
|
||
</div>
|
||
<div id="kurs-tab" class="tab-content">
|
||
<h3>Übersicht nach Kursen</h3>
|
||
<div id="kurs-bericht" aria-live="polite">
|
||
<div class="loading">Bericht wird geladen...</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="rechnungen-view" class="view" aria-labelledby="rechnungen">
|
||
<h2 id="rechnungen">Rechnungen erstellen</h2>
|
||
<p class="section-subtitle">Wählen Sie einen Betrieb und generieren Sie eine aktuelle Rechnung.</p>
|
||
<div class="form-group">
|
||
<label for="rechnung-betrieb">Betrieb auswählen</label>
|
||
<div class="inline">
|
||
<select id="rechnung-betrieb">
|
||
<option value="">Bitte wählen...</option>
|
||
</select>
|
||
<button id="rechnung-erstellen" class="btn-primary">Rechnung anzeigen</button>
|
||
</div>
|
||
</div>
|
||
<div id="rechnung-container"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2024 Schulverwaltung - Alle Rechte vorbehalten</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
|
||
<script src="js/config.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html> |