mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
1263a5238b
- Add organic/bio checkbox to tea form and display 🌱 badge - Add 'Heute' (today) option to stats period filter - Add recent 10 entries display on track page below form - Update tea cards and dropdowns to show bio indicator - Add migration for existing teas without organic field - Style organic badge with green color and hover effect - Update all entry displays to show bio status Generated by Vibe Code Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
238 lines
10 KiB
HTML
238 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>TeeTracker - Dein Tee-Konsum Tracker</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<header>
|
||
<h1>🍵 TeeTracker</h1>
|
||
<p>Verwalte deine Tee-Sorten und tracke deinen Konsum</p>
|
||
</header>
|
||
|
||
<nav class="tabs">
|
||
<button class="tab-button active" data-tab="dashboard">Dashboard</button>
|
||
<button class="tab-button" data-tab="teas">Tee-Sorten</button>
|
||
<button class="tab-button" data-tab="track">Tracken</button>
|
||
<button class="tab-button" data-tab="stats">Statistiken</button>
|
||
</nav>
|
||
|
||
<main class="tab-content">
|
||
<!-- Dashboard Tab -->
|
||
<section id="dashboard" class="tab-pane active">
|
||
<div class="dashboard-cards">
|
||
<div class="card">
|
||
<h3>Gesamt getrunken</h3>
|
||
<div class="card-value" id="total-cups">0 Tassen</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Heute</h3>
|
||
<div class="card-value" id="today-cups">0 Tassen</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Diese Woche</h3>
|
||
<div class="card-value" id="week-cups">0 Tassen</div>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Tee-Sorten</h3>
|
||
<div class="card-value" id="total-teas">0 Sorten</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="recent-activity">
|
||
<h3>Letzte Aktivitäten</h3>
|
||
<div id="recent-entries" class="activity-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tee-Sorten Tab -->
|
||
<section id="teas" class="tab-pane">
|
||
<div class="teas-header">
|
||
<h2>Tee-Sorten</h2>
|
||
<button id="add-tea-btn" class="btn btn-primary">➕ Tee hinzufügen</button>
|
||
</div>
|
||
|
||
<div class="tea-filters">
|
||
<input type="text" id="tea-search" placeholder="Suche nach Tee-Sorten...">
|
||
<select id="tea-type-filter">
|
||
<option value="all">Alle Typen</option>
|
||
<option value="Schwarztee">Schwarztee</option>
|
||
<option value="Grüntee">Grüntee</option>
|
||
<option value="Weißtee">Weißtee</option>
|
||
<option value="Oolong">Oolong</option>
|
||
<option value="Pu-Erh">Pu-Erh</option>
|
||
<option value="Früchtetee">Früchtetee</option>
|
||
<option value="Krätertee">Krätertee</option>
|
||
<option value="Sonstiges">Sonstiges</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="teas-list" class="teas-grid"></div>
|
||
</section>
|
||
|
||
<!-- Tracken Tab -->
|
||
<section id="track" class="tab-pane">
|
||
<h2>Tee-Konsum tracken</h2>
|
||
|
||
<form id="track-form" class="track-form">
|
||
<div class="form-group">
|
||
<label for="track-tea">Tee-Sorte *</label>
|
||
<select id="track-tea" required>
|
||
<option value="">-- Wähle eine Tee-Sorte --</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-date">Datum *</label>
|
||
<input type="date" id="track-date" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-time">Uhrzeit</label>
|
||
<input type="time" id="track-time">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-amount">Menge (Tassen) *</label>
|
||
<input type="number" id="track-amount" min="1" max="10" value="1" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="track-notes">Notizen</label>
|
||
<textarea id="track-notes" rows="3" placeholder="z.B. Mit Honig, besonders stark..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">📝 Tracken</button>
|
||
<button type="button" id="cancel-track" class="btn btn-secondary">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="recent-tracked">
|
||
<h3>Letzte Einträge</h3>
|
||
<div id="track-recent-entries" class="activity-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Statistiken Tab -->
|
||
<section id="stats" class="tab-pane">
|
||
<h2>Statistiken</h2>
|
||
|
||
<div class="stats-filters">
|
||
<label for="stats-period">Zeitraum:</label>
|
||
<select id="stats-period">
|
||
<option value="today">Heute</option>
|
||
<option value="week">Letzte 7 Tage</option>
|
||
<option value="month">Letzter Monat</option>
|
||
<option value="year">Letztes Jahr</option>
|
||
<option value="all">Gesamt</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="stats-container">
|
||
<div class="chart-container">
|
||
<h3>Tee-Konsum nach Sorte</h3>
|
||
<canvas id="tea-type-chart"></canvas>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<h3>Tagesverlauf</h3>
|
||
<canvas id="daily-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stats-details">
|
||
<h3>Detaillierte Statistiken</h3>
|
||
<div id="stats-details" class="details-grid"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Modal für Tee hinzufügen/bearbeiten -->
|
||
<div id="tea-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modal-title">Tee hinzufügen</h2>
|
||
<button id="close-modal" class="close-btn">×</button>
|
||
</div>
|
||
|
||
<form id="tea-form" class="modal-form">
|
||
<input type="hidden" id="tea-id">
|
||
|
||
<div class="form-group">
|
||
<label for="tea-name">Name *</label>
|
||
<input type="text" id="tea-name" required placeholder="z.B. Earl Grey">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-type">Typ *</label>
|
||
<select id="tea-type" required>
|
||
<option value="">-- Wähle einen Typ --</option>
|
||
<option value="Schwarztee">Schwarztee</option>
|
||
<option value="Grüntee">Grüntee</option>
|
||
<option value="Weißtee">Weißtee</option>
|
||
<option value="Oolong">Oolong</option>
|
||
<option value="Pu-Erh">Pu-Erh</option>
|
||
<option value="Früchtetee">Früchtetee</option>
|
||
<option value="Krätertee">Krätertee</option>
|
||
<option value="Sonstiges">Sonstiges</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-brand">Marke</label>
|
||
<input type="text" id="tea-brand" placeholder="z.B. Twinings, Pukka">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-description">Beschreibung</label>
|
||
<textarea id="tea-description" rows="3" placeholder="Beschreibung des Tees..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label>
|
||
<input type="checkbox" id="tea-organic">
|
||
<span class="checkmark"></span>
|
||
Bio-Tee
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tea-color">Farbe</label>
|
||
<input type="color" id="tea-color" value="#8B4513">
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">💾 Speichern</button>
|
||
<button type="button" id="delete-tea-btn" class="btn btn-danger" style="display: none;">🗑️ Löschen</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bestätigungsmodal -->
|
||
<div id="confirm-modal" class="modal">
|
||
<div class="modal-content" style="max-width: 400px;">
|
||
<div class="modal-header">
|
||
<h2>Bestätigung</h2>
|
||
<button id="close-confirm" class="close-btn">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="confirm-message"></p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="confirm-yes" class="btn btn-danger">Ja, löschen</button>
|
||
<button id="confirm-no" class="btn btn-secondary">Abbrechen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|