mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
feat: Add TeeTracker web application
- Add index.html with responsive layout and tab navigation - Add styles.css with modern design and tea-themed colors - Add app.js with full functionality: - Tea management (add, edit, delete, search, filter) - Consumption tracking with date, time, amount, notes - Dashboard with statistics cards and recent activity - Statistics with Chart.js visualizations - Data persistence using localStorage - Toast notifications for user feedback - Confirmation modals for deletions Features: - Dashboard: Total cups, today's cups, weekly cups, tea count - Tea Management: Add, edit, delete teas with type, brand, description - Tracking: Record tea consumption with date, time, amount, notes - Statistics: Charts and detailed stats with period filtering - Responsive design for mobile and desktop - German language interface Generated by Vibe Code Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
This commit is contained in:
Vibe Nuage Agent
223
index.html
Normal file
223
index.html
Normal file
@ -0,0 +1,223 @@
|
||||
<!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>
|
||||
</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="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">
|
||||
<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>
|
||||
Reference in New Issue
Block a user