161 lines
5.6 KiB
HTML
161 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>eventlens</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="/static/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<header class="hero">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">eventlens</p>
|
|
<h1>Konzerte und Events im Blick, bevor sie an dir vorbeiziehen.</h1>
|
|
<p class="hero-text">
|
|
Beobachte Kuenstler oder Ereignisse fuer Hamburg oder ganz Deutschland,
|
|
synchronisiere neue Termine und markiere gekaufte Tickets fuer die
|
|
Erinnerungsfunktion.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<button id="sync-button" class="primary-button">Jetzt synchronisieren</button>
|
|
<a class="ghost-button" href="/docs" target="_blank" rel="noreferrer">API Docs</a>
|
|
</div>
|
|
</div>
|
|
<aside class="status-panel">
|
|
<div class="stat-card">
|
|
<span class="stat-label">Watchlist</span>
|
|
<strong id="watch-count">0</strong>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-label">Gefundene Events</span>
|
|
<strong id="event-count">0</strong>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-label">Mit Ticket</span>
|
|
<strong id="ticket-count">0</strong>
|
|
</div>
|
|
<div class="stat-card wide">
|
|
<span class="stat-label">Letzte Aktion</span>
|
|
<strong id="sync-status">Noch kein Sync ausgefuehrt</strong>
|
|
</div>
|
|
<div class="stat-card wide">
|
|
<span class="stat-label">Quellen</span>
|
|
<div id="provider-summary" class="provider-summary">
|
|
<span class="provider-chip">Noch keine Daten</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</header>
|
|
|
|
<main class="dashboard-grid">
|
|
<section class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-kicker">Watchlist</p>
|
|
<h2>Neue Beobachtung anlegen</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="watch-form" class="watch-form">
|
|
<label>
|
|
Name
|
|
<input id="watch-name" name="name" type="text" placeholder="z. B. Deichkind" required />
|
|
</label>
|
|
|
|
<label>
|
|
Typ
|
|
<select id="watch-type" name="watch_type">
|
|
<option value="artist">Kuenstler</option>
|
|
<option value="event">Event</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label>
|
|
Region
|
|
<select id="watch-region" name="region_scope">
|
|
<option value="hamburg">Hamburg</option>
|
|
<option value="germany">Deutschland</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="full-width">
|
|
Notiz
|
|
<textarea id="watch-notes" name="notes" rows="3" placeholder="Optional, z. B. bevorzugte Venue oder Tourname"></textarea>
|
|
</label>
|
|
|
|
<button type="submit" class="primary-button">Zur Watchlist hinzufuegen</button>
|
|
</form>
|
|
|
|
<div id="watch-items" class="watch-list empty-state">
|
|
Noch keine Eintraege vorhanden.
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-kicker">Events</p>
|
|
<h2>Gefundene Termine</h2>
|
|
</div>
|
|
<div class="panel-tools">
|
|
<select id="event-filter">
|
|
<option value="all">Alle</option>
|
|
<option value="ticketed">Nur mit Ticket</option>
|
|
<option value="open">Nur offen</option>
|
|
</select>
|
|
<select id="provider-filter">
|
|
<option value="all">Alle Quellen</option>
|
|
<option value="ticketmaster">Ticketmaster</option>
|
|
<option value="bandsintown">Bandsintown</option>
|
|
<option value="eventim">Eventim</option>
|
|
<option value="barclays_arena">Barclays Arena</option>
|
|
<option value="fabrik">Fabrik</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="events" class="event-list empty-state">
|
|
Noch keine Events vorhanden.
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-wide">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-kicker">Provider</p>
|
|
<h2>Status der Quellen</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="provider-status-list" class="provider-status-list empty-state">
|
|
Noch keine Provider-Statusdaten vorhanden.
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel panel-wide">
|
|
<div class="panel-header">
|
|
<div>
|
|
<p class="section-kicker">Benachrichtigungen</p>
|
|
<h2>Versandprotokoll</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="notifications" class="notification-list empty-state">
|
|
Noch keine Benachrichtigungen protokolliert.
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="toast" class="toast" aria-live="polite"></div>
|
|
<script src="/static/app.js" defer></script>
|
|
</body>
|
|
</html>
|