215 lines
8.7 KiB
HTML
215 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>Encore – Discover Events</title>
|
||
|
||
<!-- Bootstrap 5.3 – CSS-Framework für responsives Layout -->
|
||
<link
|
||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
||
rel="stylesheet">
|
||
|
||
<!-- Eigene Styles -->
|
||
<link rel="stylesheet" href="css/components.css">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- HEADER – Hauptnavigation und Authentifizierungsbereich -->
|
||
<header class="site-header" role="banner">
|
||
<nav class="container d-flex justify-content-between align-items-center" aria-label="Hauptnavigation">
|
||
|
||
<h1 class="site-logo">Encore</h1>
|
||
|
||
<ul class="nav" role="list">
|
||
<li class="nav-item">
|
||
<a class="nav-link d-none" href="#" id="nav-events" aria-label="Zur Event-Suche">Events</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link d-none" href="#" id="nav-my-events" aria-label="Meine gespeicherten Events">My Events</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link d-none" href="#" id="nav-invitations" aria-label="Meine Einladungen">Invitations</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- ANMELDEBEREICH – öffnet Modal -->
|
||
<div id="auth-area" role="region" aria-label="Anmeldung" class="d-flex gap-2">
|
||
<button id="login-btn" type="button" class="btn header-btn-outline" aria-label="Anmelden">Login</button>
|
||
<button id="register-btn" type="button" class="btn header-btn-accent" aria-label="Neues Konto erstellen">Register</button>
|
||
</div>
|
||
|
||
<!-- NUTZERBEREICH (sichtbar wenn eingeloggt) -->
|
||
<div id="user-area" class="d-none" role="region" aria-label="Nutzerprofil">
|
||
<span id="user-name" aria-live="polite"></span>
|
||
<button id="logout-btn" type="button" class="btn header-btn-outline btn-sm" aria-label="Abmelden">Logout</button>
|
||
</div>
|
||
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- AUTH MODAL -->
|
||
<div class="modal fade" id="auth-modal" tabindex="-1" aria-labelledby="auth-modal-label" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content auth-modal-content">
|
||
|
||
<div class="modal-header auth-modal-header">
|
||
<h2 class="modal-title auth-modal-title" id="auth-modal-label">Willkommen bei Encore</h2>
|
||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Schliessen"></button>
|
||
</div>
|
||
|
||
<div class="modal-body auth-modal-body">
|
||
|
||
<ul class="nav auth-tabs mb-4" id="auth-tabs" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="auth-tab-btn active" id="login-tab-btn" data-bs-toggle="tab"
|
||
data-bs-target="#login-pane" type="button" role="tab"
|
||
aria-controls="login-pane" aria-selected="true">Anmelden</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="auth-tab-btn" id="register-tab-btn" data-bs-toggle="tab"
|
||
data-bs-target="#register-pane" type="button" role="tab"
|
||
aria-controls="register-pane" aria-selected="false">Registrieren</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content">
|
||
|
||
<div class="tab-pane fade show active" id="login-pane" role="tabpanel" aria-labelledby="login-tab-btn">
|
||
<div class="mb-3">
|
||
<label for="modal-username" class="auth-label">Benutzername</label>
|
||
<input type="text" id="modal-username" class="form-control auth-input"
|
||
placeholder="Dein Benutzername" autocomplete="username">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="modal-password" class="auth-label">Passwort</label>
|
||
<input type="password" id="modal-password" class="form-control auth-input"
|
||
placeholder="Dein Passwort" autocomplete="current-password">
|
||
</div>
|
||
<p id="login-error" class="auth-error" hidden></p>
|
||
<button type="button" id="modal-login-btn" class="btn btn-accent w-100">Anmelden</button>
|
||
</div>
|
||
|
||
<div class="tab-pane fade" id="register-pane" role="tabpanel" aria-labelledby="register-tab-btn">
|
||
<div class="mb-3">
|
||
<label for="modal-reg-username" class="auth-label">Benutzername wählen</label>
|
||
<input type="text" id="modal-reg-username" class="form-control auth-input"
|
||
placeholder="z.B. maxmustermann" autocomplete="username">
|
||
</div>
|
||
<p id="register-error" class="auth-error" hidden></p>
|
||
<div id="register-success" class="register-success d-none mb-3" aria-live="polite">
|
||
<p class="mb-2 fw-semibold">Konto erstellt!</p>
|
||
<p class="mb-1 small text-muted">Dein automatisch generiertes Passwort:</p>
|
||
<div class="password-display">
|
||
<code id="reg-password"></code>
|
||
</div>
|
||
<p class="small mt-2 mb-0 text-muted-custom">
|
||
Notiere dir das Passwort – du brauchst es beim nächsten Login.
|
||
</p>
|
||
</div>
|
||
<button type="button" id="modal-register-btn" class="btn btn-accent w-100">Konto erstellen</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HAUPTINHALT -->
|
||
<main id="main-content">
|
||
|
||
<!-- HERO / SUCHBEREICH – Volle Breite mit Gradient-Hintergrund -->
|
||
<section class="hero" id="search-section" aria-labelledby="search-heading">
|
||
<div class="container">
|
||
|
||
<div class="hero__text">
|
||
<h2 class="hero__title" id="search-heading">Events entdecken.</h2>
|
||
<p class="hero__subtitle">Konzerte, Sport & Kultur – weltweit, in Echtzeit.</p>
|
||
</div>
|
||
|
||
<!-- Schwebende Suchkarte -->
|
||
<div class="search" role="search">
|
||
<div class="search__controls">
|
||
|
||
<label for="city-input" class="visually-hidden">Stadt eingeben</label>
|
||
<input
|
||
id="city-input"
|
||
type="text"
|
||
class="form-control"
|
||
placeholder="Stadt (z.B. Zürich)"
|
||
aria-label="Stadt für Event-Suche"
|
||
>
|
||
|
||
<label for="date-from">Von</label>
|
||
<input id="date-from" type="date" aria-label="Startdatum">
|
||
|
||
<label for="date-to">Bis</label>
|
||
<input id="date-to" type="date" aria-label="Enddatum">
|
||
|
||
<label for="category-input" class="visually-hidden">Kategorie</label>
|
||
<select id="category-input" class="form-control" aria-label="Event-Kategorie">
|
||
<option value="">Alle Kategorien</option>
|
||
<option value="music">Musik</option>
|
||
<option value="sports">Sport</option>
|
||
<option value="arts & theatre">Kunst & Theater</option>
|
||
</select>
|
||
|
||
<button id="load-events" type="button" class="btn btn-primary" aria-label="Events suchen">
|
||
Suchen
|
||
</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- EVENTLISTE – Suchergebnisse -->
|
||
<section class="events-section container" id="events-section" aria-labelledby="events-heading">
|
||
<h2 id="events-heading">Kommende Events</h2>
|
||
<div id="event-list" aria-live="polite" aria-label="Event-Ergebnisse">
|
||
<div class="empty-state">
|
||
<div class="empty-state__icon" aria-hidden="true">🔍</div>
|
||
<p class="empty-state__text">Suche nach Events um zu starten</p>
|
||
<p class="empty-state__sub">Gib eine Stadt ein und klicke auf Suchen</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MY EVENTS – Gespeicherte Events -->
|
||
<section id="saved-section" class="events-section container d-none" aria-labelledby="saved-heading">
|
||
<h2 id="saved-heading">My Events</h2>
|
||
<div id="saved-list" aria-live="polite">
|
||
<p class="text-muted">Noch keine gespeicherten Events.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- EINLADUNGEN -->
|
||
<section id="invitations-section" class="events-section container d-none" aria-labelledby="invitations-heading">
|
||
<h2 id="invitations-heading">Meine Einladungen</h2>
|
||
<div id="invitation-list" aria-live="polite">
|
||
<p class="text-muted">Keine Einladungen vorhanden.</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="site-footer text-center" role="contentinfo">
|
||
<p>© 2026 Encore – Event Discovery</p>
|
||
</footer>
|
||
|
||
<!-- Bootstrap JS (für Modal und Tabs) -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- JavaScript – ES-Module -->
|
||
<script type="module" src="js/app.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |