Update app.js

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>

.htaccess

@@ -0,0 +1,38 @@
+# TeeTracker .htaccess Configuration
+# Enable PUT and DELETE methods for the data directory
+# Required for file-based storage to work on Apache servers
+
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    
+    # Allow PUT and DELETE for data directory
+    RewriteCond %{REQUEST_METHOD} ^(PUT|DELETE)$
+    RewriteCond %{REQUEST_URI} ^/data/ [NC]
+    RewriteRule ^ - [L]
+</IfModule>
+
+# Enable all HTTP methods for the data directory
+<Limit GET POST PUT DELETE OPTIONS>
+    Require all granted
+</Limit>
+
+<LimitExcept GET POST PUT DELETE OPTIONS>
+    Require all denied
+</LimitExcept>
+
+# Set proper MIME types for JSON files
+<IfModule mod_mime.c>
+    AddType application/json .json
+</IfModule>
+
+# Disable caching for data files
+<FilesMatch "\.(json|txt)$">
+    <IfModule mod_expires.c>
+        ExpiresActive Off
+    </IfModule>
+    <IfModule mod_headers.c>
+        Header set Cache-Control "no-cache, no-store, must-revalidate"
+        Header set Pragma "no-cache"
+        Header set Expires 0
+    </IfModule>
+</FilesMatch>

README.md

@@ -8,13 +8,14 @@
 [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)]
 [![Chart.js](https://img.shields.io/badge/Chart.js-FF6384?logo=chart.js&logoColor=white)]
 
+
 ---
 
 ## 📸 Screenshots
 
-| Dashboard | Tee-Sorten | Tracken | Statistiken |
+| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
-|-----------|------------|---------|-------------|
+|-----------|------------|---------|-------------|--------------|
-| ![Dashboard](https://via.placeholder.com/300x200/8B4513/FFFFFF?text=Dashboard) | ![Tee-Sorten](https://via.placeholder.com/300x200/4ECDC4/FFFFFF?text=Tee-Sorten) | ![Tracken](https://via.placeholder.com/300x200/228B22/FFFFFF?text=Tracken) | ![Statistiken](https://via.placeholder.com/300x200/FF6347/FFFFFF?text=Statistiken) |
+| ![Dashboard](https://via.placeholder.com/300x200/8B4513/FFFFFF?text=Dashboard) | ![Tee-Sorten](https://via.placeholder.com/300x200/4ECDC4/FFFFFF?text=Tee-Sorten) | ![Tracken](https://via.placeholder.com/300x200/228B22/FFFFFF?text=Tracken) | ![Statistiken](https://via.placeholder.com/300x200/FF6347/FFFFFF?text=Statistiken) | ![Einstellungen](https://via.placeholder.com/300x200/6c757d/FFFFFF?text=Einstellungen) |
 
 *(Screenshots werden automatisch generiert, sobald die App live ist)*
 
@@ -33,6 +34,7 @@
 - **Hinzufügen**: Neue Tee-Sorten mit allen Details anlegen
   - Name (Pflichtfeld)
   - Typ (Schwarztee, Grüntee, Weißtee, Oolong, Pu-Erh, Früchtetee, Kräutertee, Sonstiges)
+  - **Bio-Checkbox** 🌱: Kennzeichnung für Bio-Tees
   - Marke (optional)
   - Beschreibung (optional)
   - Farbe (für individuelle Darstellung)
@@ -48,6 +50,7 @@
 - **Uhrzeit** angeben (optional)
 - **Menge** in Tassen (Pflichtfeld, 1-10)
 - **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")
+- **Letzte 10 Einträge** werden unter dem Formular angezeigt
 
 ### 📈 Statistiken
 - **Diagramme**: Visuelle Darstellung deines Konsums
@@ -59,7 +62,21 @@
   - Aktive Tage
   - Verschiedene Tees
   - Meist getrunkener Tee
-- **Zeitraum-Filter**: Letzte 7 Tage, Monat, Jahr oder Gesamt
+- **Zeitraum-Filter**: **Heute**, Letzte 7 Tage, Monat, Jahr oder Gesamt
+
+### ⚙️ Einstellungen (NEU!)
+- **Lokale Dateispeicherung** 💾
+  - Daten werden im `data/`-Verzeichnis gespeichert (falls ein lokaler Server läuft)
+  - Automatischer Fallback auf Browser-Speicher (localStorage)
+  - Export/Import-Funktionen für Datensicherung
+- **Datenverwaltung**
+  - 📤 **Daten exportieren** (JSON-Datei herunterladen)
+  - 📥 **Daten importieren** (JSON-Datei hochladen)
+  - 🗑️ **Alle Daten löschen** (mit Bestätigung)
+- **Statistik-Übersicht**
+  - Gesamt Tassen
+  - Anzahl Tee-Sorten
+  - Erster/Letzter Eintrag
 
 ---
 
@@ -94,11 +111,27 @@
    - Folder: `/ (root)` auswählen
 3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
 
-### Option 3: Netlify/Vercel
+### Option 2: Mit lokalem Server (empfohlen für Dateispeicherung)
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/trevor1969/teatracker)
+1. **Repository klonen** (oder Dateien herunterladen):
+   ```bash
+   git clone https://github.com/trevor1969/teatracker.git
+   cd teatracker
+   ```
 
-Einfach auf den Button klicken und deine eigene Instanz deployen!
+2. **Lokalen Server starten**:
+   ```bash
+   # Mit Python 3
+   python -m http.server 8000
+   
+   # Mit Node.js (npx)
+   npx serve
+   ```
+
+3. **App öffnen** im Browser: `http://localhost:8000`
+4. **Fertig!** 🎉 Deine Daten werden automatisch im `data/`-Verzeichnis gespeichert
+
+**Hinweis:** Die App versucht zunächst, Dateien im `data/`-Verzeichnis zu speichern. Falls das nicht funktioniert (z.B. bei direkter Datei-Öffnung ohne Server), fällt sie automatisch auf localStorage zurück.
 
 ---
 
@@ -106,7 +139,8 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
 
 - **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
 - **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
-- **Speicher**: localStorage (Daten bleiben im Browser erhalten)
+- **Lokale Speicherung**: Dateisystem (data/-Verzeichnis) oder Browser localStorage
+- **Lokaler Speicher**: localStorage (Fallback)
 - **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
 
 ---
@@ -115,14 +149,72 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
 
 ```
 teatracker/
-├── index.html      # Haupt-HTML-Datei
+├── index.html          # Haupt-HTML-Datei mit allen Tabs
 ├── styles.css          # Alle Styles und Design
-├── app.js          # gesamte Anwendungslogik
+├── app.js              # gesamte Anwendungslogik + lokale Dateispeicherung
-└── README.md       # Diese Datei
+├── README.md           # Diese Datei
+└── LICENSE             # MIT License
 ```
 
 ---
 
+## 💾 Lokale Dateispeicherung (Version 4.0)
+
+Ab Version 4.0 werden die Daten lokal im `data/`-Verzeichnis gespeichert, das sich im selben Verzeichnis wie die Programmdateien befindet.
+
+### Wie es funktioniert
+
+Die App speichert Daten als JSON-Dateien im lokalen Dateisystem:
+
+```
+data/
+├── teas.json          # Deine Tee-Sorten
+├── entries.json       # Deine Tracking-Einträge
+└── backup/           # Manuelle Backups (optional)
+    └── teetracker_backup_2024-06-05T10-30-00.json
+```
+
+### Speichermechanismus
+
+1. **Mit lokalem Server**: Wenn die App über einen lokalen Server (z.B. `python -m http.server`) geöffnet wird, werden die Daten im `data/`-Verzeichnis gespeichert
+2. **Ohne Server**: Falls die App direkt als Datei geöffnet wird, fällt sie automatisch auf Browser-Speicher (localStorage) zurück
+3. **Export/Import**: Daten können jederzeit als JSON-Datei exportiert und importiert werden
+
+### Vorteile
+
+| Vorteil | Beschreibung |
+|---------|--------------|
+| **📁 Einfache Dateispeicherung** | Daten liegen direkt bei den Programmdateien |
+| **🔄 Automatische Erkennung** | Erkennt automatisch, ob Dateispeicherung möglich ist |
+| **💾 Fallback auf localStorage** | Funktioniert auch ohne Server |
+| **⚡ Schnell** | Keine externe Abhängigkeiten, einfache JSON-Dateien |
+| **🔒 Privatsphäre** | Alle Daten bleiben lokal auf deinem Gerät |
+
+### Daten sichern (Backup)
+
+**Option 1: Automatisch (Dateisystem)**
+- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
+- Einfach das gesamte `data/`-Verzeichnis sichern
+
+**Option 2: Manuell (Export)**
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **📤 Daten exportieren**
+3. Speichere die JSON-Datei an einem sicheren Ort
+
+### Daten wiederherstellen (Restore)
+
+**Option 1: Automatisch (Dateisystem)**
+- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
+- Starte die App neu
+
+**Option 2: Manuell (Import)**
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **📥 Daten importieren**
+3. Füge deine exportierten Daten ein oder lade die JSON-Datei hoch
+4. Wähle, ob du die Daten **ersetzen** oder **zusammenführen** möchtest
+
+---
+
 ## 🎨 Design
 
 ### Farben
@@ -132,6 +224,7 @@ teatracker/
 | ![#4ECDC4](https://via.placeholder.com/20/4ECDC4/000000?text=+) `#4ECDC4` | Sekundärfarbe (Türkis) |
 | ![#228B22](https://via.placeholder.com/20/228B22/000000?text=+) `#228B22` | Grüntee |
 | ![#FF6347](https://via.placeholder.com/20/FF6347/000000?text=+) `#FF6347` | Akzentfarbe |
+| ![#28a745](https://via.placeholder.com/20/28a745/000000?text=+) `#28a745` | Erfolg (Grün) |
 
 ### Responsive Design
 - ✅ Desktop (ab 1200px)
@@ -143,35 +236,80 @@ teatracker/
 
 ## 💡 Tipps & Tricks
 
-### Daten sichern
+### Daten sichern (Backup)
-Da die Daten im localStorage gespeichert werden, sind sie nur in deinem Browser verfügbar. Um ein Backup zu erstellen:
 
-1. Browser-Konsole öffnen (F12 → Console)
+**Option 1: Automatisch (Dateisystem)**
-2. Folgenden Code ausführen:
+- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
-   ```javascript
+- Einfach das gesamte `data/`-Verzeichnis kopieren
-   const teas = JSON.parse(localStorage.getItem('teatracker_teas'));
-   const entries = JSON.parse(localStorage.getItem('teatracker_entries'));
-   console.log('Teas:', teas);
-   console.log('Entries:', entries);
-   ```
-3. Daten kopieren und in einer Datei speichern
 
-### Daten wiederherstellen
+**Option 2: Manuell (Export)**
-```javascript
+1. Gehe zu **Einstellungen → Datenverwaltung**
-const backupTeas = [/* deine gesicherten Tees */];
+2. Klicke auf **📤 Daten exportieren**
-const backupEntries = [/* deine gesicherten Einträge */];
+3. Speichere die JSON-Datei an einem sicheren Ort
-localStorage.setItem('teatracker_teas', JSON.stringify(backupTeas));
+
-localStorage.setItem('teatracker_entries', JSON.stringify(backupEntries));
+### Daten wiederherstellen (Restore)
-location.reload();
+
-```
+**Option 1: Automatisch (Dateisystem)**
+- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
+- Starte die App neu
+
+**Option 2: Manuell (Import)**
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **📥 Daten importieren**
+3. Füge deine exportierten Daten ein oder lade die JSON-Datei hoch
+4. Wähle, ob du die Daten **ersetzen** oder **zusammenführen** möchtest
 
 ### Daten zurücksetzen
+
 Falls du von vorne beginnen möchtest:
-```javascript
+1. Gehe zu **Einstellungen → Datenverwaltung**
-localStorage.removeItem('teatracker_teas');
+2. Klicke auf **🗑️ Alle Daten löschen**
-localStorage.removeItem('teatracker_entries');
+3. Bestätige die Aktion
-location.reload();
+
-```
+**Achtung:** Dieser Vorgang kann nicht rückgängig gemacht werden!
+
+---
+
+## 🔧 Problembehebung
+
+### ❌ Dateispeicherung funktioniert nicht
+
+**Mögliche Ursachen:**
+- App wird direkt als Datei geöffnet (ohne lokalen Server)
+- Keine Schreibrechte im Verzeichnis
+- Browser-Beschränkungen für Fetch-API
+
+**Lösungen:**
+1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
+2. Öffne die App über `http://localhost:8000`
+3. Prüfe, ob das `data/`-Verzeichnis existiert und beschreibbar ist
+4. Falls nötig: Nutze die Export/Import-Funktionen für manuelles Speichern
+5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
+
+### ❌ Daten werden nicht gespeichert
+
+**Mögliche Ursachen:**
+- App wird direkt als Datei geöffnet (ohne lokalen Server)
+- Keine Schreibrechte im `data/`-Verzeichnis
+- Browser blockiert Fetch-Anfragen
+
+**Lösungen:**
+1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
+2. Öffne die App über `http://localhost:8000`
+3. Prüfe die Browser-Konsole auf Fehler
+4. Nutze die Export/Import-Funktionen als Alternative
+
+### ❌ Daten sind verschwunden
+
+**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
+1. **Dateisystem** (`data/`-Verzeichnis, falls Server läuft)
+2. **localStorage** (Fallback)
+
+**Lösungen:**
+1. Lade die Seite neu
+2. Prüfe, ob das `data/`-Verzeichnis existiert
+3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
+4. Falls nötig: Importiere deine exportierten Daten
 
 ---
 
@@ -196,16 +334,38 @@ Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) D
 ## 🙏 Danksagung
 
 - [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme
+
 - Alle Tee-Liebhaber da draußen! ☕🍵
 
 ---
 
-## 📞 Kontakt
+## 📞 Kontakt & Support
 
 Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/teatracker/issues) oder einen [Pull Request](https://github.com/trevor1969/teatracker/pulls).
 
 ---
 
+## 🎉 Changelog
+
+### 🆕 Neueste Änderungen
+
+- **💾 Lokale Dateispeicherung** – Daten werden im `data/`-Verzeichnis gespeichert (Version 4.0)
+- **⚙️ Einstellungen-Tab** – Datenverwaltung, Export/Import, Hintergrundbild
+- **🌱 Bio-Checkbox** – Kennzeichnung für Bio-Tees
+- **📅 Zeitraum "Heute"** – Filter für aktuelle Tagesdaten in Statistiken
+- **📝 Letzte 10 Einträge** – Anzeige auf der Tracken-Seite
+
+### 📅 Versionshistorie
+
+| Version | Datum | Änderungen |
+|---------|-------|-----------|
+| 4.0.0 | Juni 2025 | Lokale Dateispeicherung im data/-Verzeichnis, Nextcloud-Integration entfernt |
+| 1.2.0 | Juni 2024 | Nextcloud-Integration, Einstellungen-Tab, Bio-Checkbox, "Heute"-Filter, letzte Einträge |
+| 1.1.0 | Juni 2024 | Bio-Checkbox, "Heute"-Zeitraum, letzte 10 Einträge auf Tracken-Seite |
+| 1.0.0 | Juni 2024 | Erste Version mit Dashboard, Tee-Verwaltung, Tracking, Statistiken |
+
+---
+
 **Viel Spaß beim Tee-Tracken!** 🍵✨
 
 *Made with ❤️ and JavaScript*

SERVER_SETUP.md

@@ -0,0 +1,193 @@
+# TeeTracker Server Setup
+
+## Problem: Dateispeicherung funktioniert nicht
+
+Die TeeTracker-App versucht, Daten im `data/`-Verzeichnis zu speichern, aber auf den meisten Webservern funktioniert das nicht standardmäßig. Hier sind die Lösungen:
+
+---
+
+## Lösung 1: LocalStorage (Empfohlen für Shared Hosting)
+
+**Funktioniert immer, ohne Server-Konfiguration!**
+
+Die App fällt automatisch auf localStorage zurück, wenn die Dateispeicherung nicht verfügbar ist. 
+- Alle Daten werden im Browser gespeichert
+- Funktioniert auf jedem Webserver
+- Daten sind nur auf dem aktuellen Gerät/Browser verfügbar
+
+**Status prüfen:**
+- Gehe zu "Einstellungen" → "Datenverwaltung"
+- Wenn "Lokaler Modus (localStorage)" angezeigt wird, funktioniert die Dateispeicherung nicht
+- Wenn "Dateispeicherung aktiv" angezeigt wird, funktioniert die Dateispeicherung
+
+---
+
+## Lösung 2: Apache Server (.htaccess)
+
+Falls dein Server Apache verwendet (häufig bei Shared Hosting):
+
+1. **Stelle sicher, dass die `.htaccess`-Datei aktiv ist:**
+   - Die Datei liegt bereits im Hauptverzeichnis
+   - Prüfe, ob `mod_rewrite` aktiviert ist
+   - Kontaktiere deinen Hosting-Anbieter, falls `.htaccess` ignoriert wird
+
+2. **Erlaube PUT und DELETE Methoden:**
+   Die `.htaccess`-Datei enthält bereits die notwendigen Regeln:
+   ```apache
+   <Limit GET POST PUT DELETE OPTIONS>
+       Require all granted
+   </Limit>
+   ```
+
+3. **Setze die richtigen Berechtigungen:**
+   ```bash
+   chmod 755 data/
+   chmod 644 data/.gitkeep
+   ```
+
+4. **Aktiviere die notwendigen Apache-Module:**
+   ```bash
+   a2enmod rewrite
+   a2enmod headers
+   a2enmod expires
+   service apache2 restart
+   ```
+
+---
+
+## Lösung 3: PHP-Backend (Alternative)
+
+Falls dein Server PHP unterstützt, kannst du ein einfaches Backend erstellen:
+
+### 1. Erstelle `save_data.php`:
+```php
+<?php
+header('Content-Type: application/json');
+
+$filename = 'data/' . ($_GET['file'] ?? '');
+$allowed_files = ['teas.json', 'entries.json'];
+
+if (!in_array(basename($filename), $allowed_files)) {
+    http_response_code(403);
+    die(json_encode(['error' => 'Not allowed']));
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+    if (file_exists($filename)) {
+        readfile($filename);
+    } else {
+        echo '[]';
+    }
+} elseif ($_SERVER['REQUEST_METHOD'] === 'PUT' || $_SERVER['REQUEST_METHOD'] === 'POST') {
+    $data = file_get_contents('php://input');
+    file_put_contents($filename, $data);
+    echo json_encode(['success' => true]);
+} elseif ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
+    if (file_exists($filename)) {
+        unlink($filename);
+    }
+    echo json_encode(['success' => true]);
+}
+```
+
+### 2. Ändere die `LocalFileStorage`-Klasse:
+Ersetze die `fetch()`-Aufrufe durch Aufrufe an dein PHP-Skript.
+
+---
+
+## Lösung 4: Node.js/Express Server
+
+Falls du Node.js verwenden kannst:
+
+```javascript
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const app = express();
+
+app.use(express.json());
+app.use(express.static('public'));
+
+// Enable PUT and DELETE for data directory
+app.use('/data', express.raw({ type: '*/*' }));
+
+app.put('/data/:file', (req, res) => {
+    const filePath = path.join(__dirname, 'data', req.params.file);
+    fs.writeFile(filePath, req.body, (err) => {
+        if (err) return res.status(500).send(err.message);
+        res.sendStatus(200);
+    });
+});
+
+app.get('/data/:file', (req, res) => {
+    const filePath = path.join(__dirname, 'data', req.params.file);
+    if (fs.existsSync(filePath)) {
+        res.sendFile(filePath);
+    } else {
+        res.status(404).send('[]');
+    }
+});
+
+app.delete('/data/:file', (req, res) => {
+    const filePath = path.join(__dirname, 'data', req.params.file);
+    if (fs.existsSync(filePath)) {
+        fs.unlink(filePath, (err) => {
+            if (err) return res.status(500).send(err.message);
+            res.sendStatus(200);
+        });
+    } else {
+        res.sendStatus(200);
+    }
+});
+
+app.listen(3000, () => console.log('Server running on port 3000'));
+```
+
+---
+
+## Häufige Probleme und Lösungen
+
+### Problem: "405 Method Not Allowed"
+**Lösung:** Der Server unterstützt PUT/DELETE nicht. Verwende Lösung 2, 3 oder 4.
+
+### Problem: "403 Forbidden"
+**Lösung:** Die Berechtigungen sind falsch. Führe aus:
+```bash
+chmod 755 data/
+chmod 644 data/*
+```
+
+### Problem: "404 Not Found" für data/-Dateien
+**Lösung:** Das `data/`-Verzeichnis existiert nicht oder die Dateien sind nicht hochgeladen.
+
+### Problem: CORS-Fehler
+**Lösung:** Falls du die App von einer anderen Domain lädst, musst du CORS-Header setzen:
+```apache
+Header set Access-Control-Allow-Origin "*"
+Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
+Header set Access-Control-Allow-Headers "Content-Type"
+```
+
+---
+
+## Testen der Dateispeicherung
+
+1. Öffne die Browser-Konsole (F12 → Console)
+2. Gib ein:
+```javascript
+fetch('data/test.txt', { method: 'PUT', body: 'test' })
+  .then(r => r.text())
+  .then(console.log)
+  .catch(console.error);
+```
+3. Wenn du eine erfolgreiche Antwort erhältst, funktioniert die Dateispeicherung
+
+---
+
+## Empfehlung
+
+**Für Shared Hosting:** Verwende einfach localStorage (Lösung 1). Die Daten werden im Browser gespeichert und funktionieren ohne Server-Konfiguration.
+
+**Für eigene Server:** Konfiguriere Apache mit der `.htaccess`-Datei (Lösung 2) oder verwende das PHP-Backend (Lösung 3).
+
+**Für Entwickler:** Verwende den Node.js-Server (Lösung 4) oder einen lokalen Entwicklungsserver wie `python -m http.server`.

app.js

@@ -1,952 +1 @@
-// TeeTracker - Main Application
 
-// ============================================
-// Data Storage & Management
-// ============================================
-
-const STORAGE_KEY_TEAS = 'teatracker_teas';
-const STORAGE_KEY_ENTRIES = 'teatracker_entries';
-
-class TeaTracker {
-    constructor() {
-        this.teas = this.loadTeas();
-        this.entries = this.loadEntries();
-        this.currentTeaId = null;
-        this.charts = {};
-        
-        this.init();
-    }
-    
-    // Load data from localStorage
-    loadTeas() {
-        const data = localStorage.getItem(STORAGE_KEY_TEAS);
-        if (!data) return [];
-        
-        const teas = JSON.parse(data);
-        // Migrate existing teas to add organic field if missing
-        return teas.map(tea => ({
-            ...tea,
-            organic: tea.organic !== undefined ? tea.organic : false
-        }));
-    }
-    
-    loadEntries() {
-        const data = localStorage.getItem(STORAGE_KEY_ENTRIES);
-        return data ? JSON.parse(data) : [];
-    }
-    
-    // Save data to localStorage
-    saveTeas() {
-        localStorage.setItem(STORAGE_KEY_TEAS, JSON.stringify(this.teas));
-    }
-    
-    saveEntries() {
-        localStorage.setItem(STORAGE_KEY_ENTRIES, JSON.stringify(this.entries));
-    }
-    
-    // Generate unique ID
-    generateId() {
-        return Date.now().toString(36) + Math.random().toString(36).substr(2);
-    }
-    
-    // Get tea by ID
-    getTeaById(id) {
-        return this.teas.find(tea => tea.id === id);
-    }
-    
-    // Get tea index by ID
-    getTeaIndexById(id) {
-        return this.teas.findIndex(tea => tea.id === id);
-    }
-    
-    // ============================================
-    // Tea Management
-    // ============================================
-    
-    addTea(tea) {
-        const newTea = {
-            id: this.generateId(),
-            name: tea.name,
-            type: tea.type,
-            brand: tea.brand || '',
-            description: tea.description || '',
-            color: tea.color || '#8B4513',
-            organic: tea.organic || false,
-            createdAt: new Date().toISOString()
-        };
-        this.teas.push(newTea);
-        this.saveTeas();
-        return newTea;
-    }
-    
-    updateTea(id, updates) {
-        const index = this.getTeaIndexById(id);
-        if (index !== -1) {
-            this.teas[index] = { ...this.teas[index], ...updates };
-            this.saveTeas();
-            return this.teas[index];
-        }
-        return null;
-    }
-    
-    deleteTea(id) {
-        const index = this.getTeaIndexById(id);
-        if (index !== -1) {
-            // Remove entries that reference this tea
-            this.entries = this.entries.filter(entry => entry.teaId !== id);
-            this.saveEntries();
-            
-            this.teas.splice(index, 1);
-            this.saveTeas();
-            return true;
-        }
-        return false;
-    }
-    
-    // ============================================
-    // Entry Management
-    // ============================================
-    
-    addEntry(entry) {
-        const newEntry = {
-            id: this.generateId(),
-            teaId: entry.teaId,
-            date: entry.date,
-            time: entry.time || '',
-            amount: parseInt(entry.amount) || 1,
-            notes: entry.notes || '',
-            createdAt: new Date().toISOString()
-        };
-        this.entries.push(newEntry);
-        this.saveEntries();
-        return newEntry;
-    }
-    
-    deleteEntry(id) {
-        const index = this.entries.findIndex(entry => entry.id === id);
-        if (index !== -1) {
-            this.entries.splice(index, 1);
-            this.saveEntries();
-            return true;
-        }
-        return false;
-    }
-    
-    // ============================================
-    // Statistics
-    // ============================================
-    
-    getTotalCups() {
-        return this.entries.reduce((sum, entry) => sum + entry.amount, 0);
-    }
-    
-    getTodayCups() {
-        const today = new Date().toISOString().split('T')[0];
-        return this.entries
-            .filter(entry => entry.date === today)
-            .reduce((sum, entry) => sum + entry.amount, 0);
-    }
-    
-    getCupsByPeriod(period) {
-        const now = new Date();
-        let startDate;
-        
-        switch (period) {
-            case 'today':
-                startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-                break;
-            case 'week':
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-                break;
-            case 'month':
-                startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
-                break;
-            case 'year':
-                startDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());
-                break;
-            case 'all':
-                startDate = new Date(0);
-                break;
-            default:
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-        }
-        
-        return this.entries
-            .filter(entry => new Date(entry.date) >= startDate)
-            .reduce((sum, entry) => sum + entry.amount, 0);
-    }
-    
-    getWeekCups() {
-        const now = new Date();
-        const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-        
-        return this.entries
-            .filter(entry => new Date(entry.date) >= weekAgo)
-            .reduce((sum, entry) => sum + entry.amount, 0);
-    }
-    
-    getEntriesByPeriod(period) {
-        const now = new Date();
-        let startDate;
-        
-        switch (period) {
-            case 'today':
-                startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-                break;
-            case 'week':
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-                break;
-            case 'month':
-                startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
-                break;
-            case 'year':
-                startDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());
-                break;
-            case 'all':
-                startDate = new Date(0);
-                break;
-            default:
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-        }
-        
-        return this.entries.filter(entry => new Date(entry.date) >= startDate);
-    }
-    
-    getCupsByPeriod(period) {
-        const entries = this.getEntriesByPeriod(period);
-        return entries.reduce((sum, entry) => sum + entry.amount, 0);
-    }
-    
-    getCupsByTeaType(period = 'all') {
-        const entries = this.getEntriesByPeriod(period);
-        const typeCounts = {};
-        
-        entries.forEach(entry => {
-            const tea = this.getTeaById(entry.teaId);
-            if (tea) {
-                typeCounts[tea.type] = (typeCounts[tea.type] || 0) + entry.amount;
-            }
-        });
-        
-        return typeCounts;
-    }
-    
-    getCupsByTea(period = 'all') {
-        const entries = this.getEntriesByPeriod(period);
-        const teaCounts = {};
-        
-        entries.forEach(entry => {
-            const tea = this.getTeaById(entry.teaId);
-            if (tea) {
-                teaCounts[tea.name] = (teaCounts[tea.name] || 0) + entry.amount;
-            }
-        });
-        
-        return teaCounts;
-    }
-    
-    getDailyConsumption(period = 'week') {
-        const entries = this.getEntriesByPeriod(period);
-        const dailyCounts = {};
-        
-        entries.forEach(entry => {
-            const date = entry.date;
-            dailyCounts[date] = (dailyCounts[date] || 0) + entry.amount;
-        });
-        
-        return dailyCounts;
-    }
-    
-    getEntriesByPeriod(period) {
-        const now = new Date();
-        let startDate;
-        
-        switch (period) {
-            case 'week':
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-                break;
-            case 'month':
-                startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
-                break;
-            case 'year':
-                startDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());
-                break;
-            case 'all':
-                startDate = new Date(0);
-                break;
-            default:
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-        }
-        
-        return this.entries.filter(entry => new Date(entry.date) >= startDate);
-    }
-    
-    getMostConsumedTea(period = 'all') {
-        const teaCounts = this.getCupsByTea(period);
-        let maxCount = 0;
-        let mostConsumed = null;
-        
-        for (const [teaName, count] of Object.entries(teaCounts)) {
-            if (count > maxCount) {
-                maxCount = count;
-                mostConsumed = teaName;
-            }
-        }
-        
-        return { name: mostConsumed, count: maxCount };
-    }
-    
-    getAverageDailyConsumption(period = 'month') {
-        const entries = this.getEntriesByPeriod(period);
-        if (entries.length === 0) return 0;
-        
-        const totalDays = this.countUniqueDays(entries);
-        const totalCups = entries.reduce((sum, entry) => sum + entry.amount, 0);
-        
-        return Math.round(totalCups / totalDays);
-    }
-    
-    countUniqueDays(entries) {
-        const days = new Set();
-        entries.forEach(entry => days.add(entry.date));
-        return days.size;
-    }
-    
-    // ============================================
-    // UI Initialization
-    // ============================================
-    
-    init() {
-        this.setupEventListeners();
-        this.renderAll();
-        this.initCharts();
-    }
-    
-    setupEventListeners() {
-        // Tab navigation
-        document.querySelectorAll('.tab-button').forEach(button => {
-            button.addEventListener('click', (e) => this.switchTab(e.target.dataset.tab));
-        });
-        
-        // Add tea button
-        document.getElementById('add-tea-btn').addEventListener('click', () => this.openTeaModal());
-        
-        // Tea modal
-        document.getElementById('close-modal').addEventListener('click', () => this.closeTeaModal());
-        document.getElementById('tea-form').addEventListener('submit', (e) => this.handleTeaFormSubmit(e));
-        document.getElementById('delete-tea-btn').addEventListener('click', () => this.handleDeleteTea());
-        
-        // Confirm modal
-        document.getElementById('close-confirm').addEventListener('click', () => this.closeConfirmModal());
-        document.getElementById('confirm-no').addEventListener('click', () => this.closeConfirmModal());
-        document.getElementById('confirm-yes').addEventListener('click', () => this.confirmDelete());
-        
-        // Track form
-        document.getElementById('track-form').addEventListener('submit', (e) => this.handleTrackFormSubmit(e));
-        document.getElementById('cancel-track').addEventListener('click', () => this.resetTrackForm());
-        
-        // Tea search and filter
-        document.getElementById('tea-search').addEventListener('input', (e) => this.filterTeas());
-        document.getElementById('tea-type-filter').addEventListener('change', (e) => this.filterTeas());
-        
-        // Stats period filter
-        document.getElementById('stats-period').addEventListener('change', (e) => this.updateStats());
-        
-        // Close modals on outside click
-        document.getElementById('tea-modal').addEventListener('click', (e) => {
-            if (e.target.id === 'tea-modal') this.closeTeaModal();
-        });
-        
-        document.getElementById('confirm-modal').addEventListener('click', (e) => {
-            if (e.target.id === 'confirm-modal') this.closeConfirmModal();
-        });
-    }
-    
-    switchTab(tabId) {
-        // Save current form data if needed
-        
-        // Switch tabs
-        document.querySelectorAll('.tab-button').forEach(button => {
-            button.classList.toggle('active', button.dataset.tab === tabId);
-        });
-        
-        document.querySelectorAll('.tab-pane').forEach(pane => {
-            pane.classList.toggle('active', pane.id === tabId);
-        });
-        
-        // Refresh content for specific tabs
-        if (tabId === 'teas') {
-            this.renderTeasList();
-        } else if (tabId === 'track') {
-            this.renderTrackForm();
-        } else if (tabId === 'stats') {
-            this.updateStats();
-        } else if (tabId === 'dashboard') {
-            this.updateDashboard();
-        }
-    }
-    
-    renderAll() {
-        this.updateDashboard();
-        this.renderTeasList();
-        this.renderTrackForm();
-        this.updateStats();
-    }
-    
-    // ============================================
-    // Dashboard
-    // ============================================
-    
-    updateDashboard() {
-        document.getElementById('total-cups').textContent = `${this.getTotalCups()} Tassen`;
-        document.getElementById('today-cups').textContent = `${this.getTodayCups()} Tassen`;
-        document.getElementById('week-cups').textContent = `${this.getWeekCups()} Tassen`;
-        document.getElementById('total-teas').textContent = `${this.teas.length} Sorten`;
-        
-        this.renderRecentEntries();
-    }
-    
-    renderRecentEntries() {
-        const container = document.getElementById('recent-entries');
-        const recentEntries = [...this.entries]
-            .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-            .slice(0, 5);
-        
-        if (recentEntries.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">📝</div>
-                    <div class="empty-state-text">Keine Einträge vorhanden</div>
-                    <div class="empty-state-subtext">Fange an, deinen Tee-Konsum zu tracken!</div>
-                </div>
-            `;
-            return;
-        }
-        
-        container.innerHTML = recentEntries.map(entry => {
-            const tea = this.getTeaById(entry.teaId);
-            const date = new Date(entry.date);
-            const formattedDate = date.toLocaleDateString('de-DE');
-            const formattedTime = entry.time ? entry.time.substring(0, 5) : '';
-            
-            return `
-                <div class="activity-item">
-                    <div class="activity-info">
-                        <div class="activity-tea">${tea ? tea.name : 'Unbekannter Tee'} ${tea && tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
-                        <div class="activity-details">${formattedDate} ${formattedTime ? `um ${formattedTime}` : ''}</div>
-                    </div>
-                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}</div>
-                </div>
-            `;
-        }).join('');
-    }
-    
-    // ============================================
-    // Tea Management UI
-    // ============================================
-    
-    renderTeasList() {
-        const container = document.getElementById('teas-list');
-        
-        if (this.teas.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">🍵</div>
-                    <div class="empty-state-text">Keine Tee-Sorten vorhanden</div>
-                    <div class="empty-state-subtext">Klicke auf "Tee hinzufügen", um deine erste Sorte anzulegen</div>
-                </div>
-            `;
-            return;
-        }
-        
-        container.innerHTML = this.teas.map(tea => `
-            <div class="tea-card" data-id="${tea.id}">
-                <div class="tea-card-header">
-                    <div>
-                        <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
-                        <span class="tea-type">${tea.type}</span>
-                    </div>
-                </div>
-                ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
-                ${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
-                <div class="tea-actions">
-                    <button class="tea-action-btn tea-edit-btn" onclick="app.editTea('${tea.id}')">Bearbeiten</button>
-                    <button class="tea-action-btn tea-delete-btn" onclick="app.showDeleteTeaConfirm('${tea.id}')">Löschen</button>
-                </div>
-            </div>
-        `).join('');
-    }
-    
-    filterTeas() {
-        const searchTerm = document.getElementById('tea-search').value.toLowerCase();
-        const typeFilter = document.getElementById('tea-type-filter').value;
-        
-        const filteredTeas = this.teas.filter(tea => {
-            const matchesSearch = tea.name.toLowerCase().includes(searchTerm) ||
-                                 tea.brand.toLowerCase().includes(searchTerm) ||
-                                 tea.description.toLowerCase().includes(searchTerm);
-            const matchesType = typeFilter === 'all' || tea.type === typeFilter;
-            return matchesSearch && matchesType;
-        });
-        
-        const container = document.getElementById('teas-list');
-        
-        if (filteredTeas.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">🔍</div>
-                    <div class="empty-state-text">Keine Tee-Sorten gefunden</div>
-                    <div class="empty-state-subtext">Versuche andere Suchbegriffe oder Filter</div>
-                </div>
-            `;
-            return;
-        }
-        
-        container.innerHTML = filteredTeas.map(tea => `
-            <div class="tea-card" data-id="${tea.id}">
-                <div class="tea-card-header">
-                    <div>
-                        <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
-                        <span class="tea-type">${tea.type}</span>
-                    </div>
-                </div>
-                ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
-                ${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
-                <div class="tea-actions">
-                    <button class="tea-action-btn tea-edit-btn" onclick="app.editTea('${tea.id}')">Bearbeiten</button>
-                    <button class="tea-action-btn tea-delete-btn" onclick="app.showDeleteTeaConfirm('${tea.id}')">Löschen</button>
-                </div>
-            </div>
-        `).join('');
-    }
-    
-    // Render recent entries on track page
-    renderTrackRecentEntries() {
-        const container = document.getElementById('track-recent-entries');
-        const recentEntries = [...this.entries]
-            .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
-            .slice(0, 10);
-        
-        if (recentEntries.length === 0) {
-            container.innerHTML = `
-                <div class="empty-state">
-                    <div class="empty-state-icon">📝</div>
-                    <div class="empty-state-text">Keine Einträge vorhanden</div>
-                    <div class="empty-state-subtext">Fange an, deinen Tee-Konsum zu tracken!</div>
-                </div>
-            `;
-            return;
-        }
-        
-        container.innerHTML = recentEntries.map(entry => {
-            const tea = this.getTeaById(entry.teaId);
-            const date = new Date(entry.date);
-            const formattedDate = date.toLocaleDateString('de-DE');
-            const formattedTime = entry.time ? entry.time.substring(0, 5) : '';
-            
-            return `
-                <div class="activity-item">
-                    <div class="activity-info">
-                        <div class="activity-tea">${tea ? tea.name : 'Unbekannter Tee'} ${tea && tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
-                        <div class="activity-details">${formattedDate} ${formattedTime ? `um ${formattedTime}` : ''}</div>
-                    </div>
-                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}</div>
-                </div>
-            `;
-        }).join('');
-    }
-    
-    openTeaModal(teaId = null) {
-        const modal = document.getElementById('tea-modal');
-        const form = document.getElementById('tea-form');
-        const deleteBtn = document.getElementById('delete-tea-btn');
-        
-        if (teaId) {
-            const tea = this.getTeaById(teaId);
-            if (tea) {
-                document.getElementById('modal-title').textContent = 'Tee bearbeiten';
-                document.getElementById('tea-id').value = tea.id;
-                document.getElementById('tea-name').value = tea.name;
-                document.getElementById('tea-type').value = tea.type;
-                document.getElementById('tea-brand').value = tea.brand || '';
-                document.getElementById('tea-description').value = tea.description || '';
-                document.getElementById('tea-color').value = tea.color || '#8B4513';
-                document.getElementById('tea-organic').checked = tea.organic || false;
-                deleteBtn.style.display = 'inline-flex';
-                this.currentTeaId = tea.id;
-            }
-        } else {
-            document.getElementById('modal-title').textContent = 'Tee hinzufügen';
-            form.reset();
-            document.getElementById('tea-id').value = '';
-            deleteBtn.style.display = 'none';
-            this.currentTeaId = null;
-        }
-        
-        modal.classList.add('active');
-    }
-    
-    closeTeaModal() {
-        document.getElementById('tea-modal').classList.remove('active');
-        document.getElementById('tea-form').reset();
-        this.currentTeaId = null;
-    }
-    
-    handleTeaFormSubmit(e) {
-        e.preventDefault();
-        
-        const formData = {
-            name: document.getElementById('tea-name').value.trim(),
-            type: document.getElementById('tea-type').value,
-            brand: document.getElementById('tea-brand').value.trim(),
-            description: document.getElementById('tea-description').value.trim(),
-            color: document.getElementById('tea-color').value,
-            organic: document.getElementById('tea-organic').checked
-        };
-        
-        const teaId = document.getElementById('tea-id').value;
-        
-        if (teaId) {
-            // Update existing tea
-            this.updateTea(teaId, formData);
-            this.showToast('Tee erfolgreich aktualisiert!', 'success');
-        } else {
-            // Add new tea
-            this.addTea(formData);
-            this.showToast('Tee erfolgreich hinzugefügt!', 'success');
-        }
-        
-        this.closeTeaModal();
-        this.renderTeasList();
-        this.renderTrackForm();
-        this.updateDashboard();
-        this.updateStats();
-    }
-    
-    editTea(teaId) {
-        this.openTeaModal(teaId);
-    }
-    
-    showDeleteTeaConfirm(teaId) {
-        this.currentTeaId = teaId;
-        const tea = this.getTeaById(teaId);
-        document.getElementById('confirm-message').textContent = 
-            `Möchtest du den Tee "${tea.name}" wirklich löschen? Alle zugehörigen Einträge werden ebenfalls gelöscht.`;
-        document.getElementById('confirm-modal').classList.add('active');
-    }
-    
-    handleDeleteTea() {
-        if (this.currentTeaId) {
-            const tea = this.getTeaById(this.currentTeaId);
-            if (tea) {
-                document.getElementById('confirm-message').textContent = 
-                    `Möchtest du den Tee "${tea.name}" wirklich löschen? Alle zugehörigen Einträge werden ebenfalls gelöscht.`;
-                document.getElementById('confirm-modal').classList.add('active');
-            }
-        }
-    }
-    
-    confirmDelete() {
-        if (this.currentTeaId) {
-            const tea = this.getTeaById(this.currentTeaId);
-            if (tea) {
-                this.deleteTea(this.currentTeaId);
-                this.showToast(`Tee "${tea.name}" wurde gelöscht.`, 'success');
-                this.closeConfirmModal();
-                this.closeTeaModal();
-                this.renderTeasList();
-                this.renderTrackForm();
-                this.updateDashboard();
-                this.updateStats();
-            }
-        }
-    }
-    
-    closeConfirmModal() {
-        document.getElementById('confirm-modal').classList.remove('active');
-        this.currentTeaId = null;
-    }
-    
-    // ============================================
-    // Track Form
-    // ============================================
-    
-    renderTrackForm() {
-        const teaSelect = document.getElementById('track-tea');
-        const today = new Date().toISOString().split('T')[0];
-        
-        // Set default date to today
-        document.getElementById('track-date').value = today;
-        
-        // Populate tea dropdown
-        if (this.teas.length === 0) {
-            teaSelect.innerHTML = '<option value="">-- Keine Tee-Sorten verfügbar --</option>';
-        } else {
-            teaSelect.innerHTML = '<option value="">-- Wähle eine Tee-Sorte --</option>' +
-                this.teas.map(tea => 
-                    `<option value="${tea.id}">${tea.name} (${tea.type})${tea.organic ? ' 🌱' : ''}</option>`
-                ).join('');
-        }
-        
-        // Render recent entries
-        this.renderTrackRecentEntries();
-    }
-    
-    handleTrackFormSubmit(e) {
-        e.preventDefault();
-        
-        const teaId = document.getElementById('track-tea').value;
-        const date = document.getElementById('track-date').value;
-        const time = document.getElementById('track-time').value;
-        const amount = document.getElementById('track-amount').value;
-        const notes = document.getElementById('track-notes').value.trim();
-        
-        if (!teaId || !date || !amount) {
-            this.showToast('Bitte fülle alle Pflichtfelder aus!', 'error');
-            return;
-        }
-        
-        const entry = {
-            teaId,
-            date,
-            time,
-            amount,
-            notes
-        };
-        
-        this.addEntry(entry);
-        this.showToast('Tee-Konsum erfolgreich getrackt!', 'success');
-        
-        // Reset form
-        this.resetTrackForm();
-        
-        // Update UI
-        this.updateDashboard();
-        this.updateStats();
-        this.renderTrackRecentEntries();
-    }
-    
-    resetTrackForm() {
-        const form = document.getElementById('track-form');
-        form.reset();
-        const today = new Date().toISOString().split('T')[0];
-        document.getElementById('track-date').value = today;
-        document.getElementById('track-amount').value = 1;
-    }
-    
-    // ============================================
-    // Statistics
-    // ============================================
-    
-    initCharts() {
-        // Initialize Chart.js
-        this.createTeaTypeChart();
-        this.createDailyChart();
-    }
-    
-    createTeaTypeChart() {
-        const ctx = document.getElementById('tea-type-chart');
-        if (!ctx) return;
-        
-        const period = document.getElementById('stats-period').value || 'week';
-        const typeCounts = this.getCupsByTeaType(period);
-        
-        const labels = Object.keys(typeCounts);
-        const data = Object.values(typeCounts);
-        
-        const backgroundColors = labels.map((type, index) => {
-            const colors = [
-                '#8B4513', '#228B22', '#90EE90', '#FFD700', 
-                '#FF6347', '#FF69B4', '#4169E1', '#8A2BE2'
-            ];
-            return colors[index % colors.length];
-        });
-        
-        if (this.charts.teaType) {
-            this.charts.teaType.destroy();
-        }
-        
-        this.charts.teaType = new Chart(ctx, {
-            type: 'doughnut',
-            data: {
-                labels: labels,
-                datasets: [{
-                    data: data,
-                    backgroundColor: backgroundColors,
-                    borderWidth: 2,
-                    borderColor: '#fff'
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: {
-                        position: 'right',
-                        labels: {
-                            padding: 15,
-                            font: {
-                                size: 12
-                            }
-                        }
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: function(context) {
-                                const label = context.label || '';
-                                const value = context.raw || 0;
-                                return `${label}: ${value} Tasse${value > 1 ? 'n' : ''}`;
-                            }
-                        }
-                    }
-                },
-                layout: {
-                    padding: 20
-                }
-            }
-        });
-    }
-    
-    createDailyChart() {
-        const ctx = document.getElementById('daily-chart');
-        if (!ctx) return;
-        
-        const period = document.getElementById('stats-period').value || 'week';
-        const dailyCounts = this.getDailyConsumption(period);
-        
-        // Sort dates chronologically
-        const sortedDates = Object.keys(dailyCounts).sort();
-        const labels = sortedDates.map(date => {
-            const d = new Date(date);
-            return period === 'year' ? d.toLocaleDateString('de-DE', { month: 'short', day: 'numeric' }) : d.toLocaleDateString('de-DE', { weekday: 'short', day: 'numeric' });
-        });
-        const data = sortedDates.map(date => dailyCounts[date]);
-        
-        if (this.charts.daily) {
-            this.charts.daily.destroy();
-        }
-        
-        this.charts.daily = new Chart(ctx, {
-            type: 'bar',
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Tassen pro Tag',
-                    data: data,
-                    backgroundColor: 'rgba(139, 69, 19, 0.7)',
-                    borderColor: 'rgba(139, 69, 19, 1)',
-                    borderWidth: 2
-                }]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: function(context) {
-                                return `${context.raw} Tasse${context.raw > 1 ? 'n' : ''}`;
-                            }
-                        }
-                    }
-                },
-                scales: {
-                    y: {
-                        beginAtZero: true,
-                        ticks: {
-                            stepSize: 1,
-                            callback: function(value) {
-                                return value + (value === 1 ? ' Tasse' : ' Tassen');
-                            }
-                        }
-                    }
-                },
-                layout: {
-                    padding: 20
-                }
-            }
-        });
-    }
-    
-    updateStats() {
-        const period = document.getElementById('stats-period').value || 'week';
-        
-        // Update charts
-        this.createTeaTypeChart();
-        this.createDailyChart();
-        
-        // Update detailed stats
-        this.renderDetailedStats(period);
-    }
-    
-    renderDetailedStats(period) {
-        const container = document.getElementById('stats-details');
-        const entries = this.getEntriesByPeriod(period);
-        const totalCups = entries.reduce((sum, entry) => sum + entry.amount, 0);
-        const uniqueDays = this.countUniqueDays(entries);
-        const avgDaily = uniqueDays > 0 ? Math.round(totalCups / uniqueDays) : 0;
-        const mostConsumed = this.getMostConsumedTea(period);
-        const teaCount = new Set(entries.map(entry => entry.teaId)).size;
-        
-        container.innerHTML = `
-            <div class="detail-item">
-                <div class="detail-item-label">Gesamt getrunken</div>
-                <div class="detail-item-value">${totalCups} Tassen</div>
-            </div>
-            <div class="detail-item">
-                <div class="detail-item-label">Durchschnitt pro Tag</div>
-                <div class="detail-item-value">${avgDaily} Tassen</div>
-            </div>
-            <div class="detail-item">
-                <div class="detail-item-label">Aktive Tage</div>
-                <div class="detail-item-value">${uniqueDays} Tage</div>
-            </div>
-            <div class="detail-item">
-                <div class="detail-item-label">Verschiedene Tees</div>
-                <div class="detail-item-value">${teaCount} Sorten</div>
-            </div>
-            ${mostConsumed.name ? `
-            <div class="detail-item">
-                <div class="detail-item-label">Meist getrunken</div>
-                <div class="detail-item-value">${mostConsumed.name}</div>
-            </div>
-            <div class="detail-item">
-                <div class="detail-item-label">Favorit (Anzahl)</div>
-                <div class="detail-item-value">${mostConsumed.count} Tassen</div>
-            </div>
-            ` : ''}
-        `;
-    }
-    
-    // ============================================
-    // Utility Functions
-    // ============================================
-    
-    showToast(message, type = 'info') {
-        // Remove existing toasts
-        const existingToast = document.querySelector('.toast');
-        if (existingToast) {
-            existingToast.remove();
-        }
-        
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        toast.textContent = message;
-        document.body.appendChild(toast);
-        
-        setTimeout(() => {
-            toast.style.animation = 'toastSlideIn 0.3s ease reverse';
-            setTimeout(() => toast.remove(), 300);
-        }, 3000);
-    }
-}
-
-// Initialize the application
-let app;
-document.addEventListener('DOMContentLoaded', () => {
-    app = new TeaTracker();
-    window.app = app;
-});

data/.gitkeep

@@ -0,0 +1,2 @@
+# This file ensures the data directory exists and is tracked by git
+# TeeTracker stores teas.json and entries.json in this directory

index.html

@@ -18,6 +18,7 @@
             <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>
+            <button class="tab-button" data-tab="settings">⚙️ Einstellungen</button>
         </nav>
 
         <main class="tab-content">
@@ -42,6 +43,26 @@
                     </div>
                 </div>
                 
+                <!-- Tea Timer -->
+                <div class="timer-section">
+                    <h3>⏱️ Tee-Timer</h3>
+                    <div class="timer-controls">
+                        <div class="timer-display" id="timer-display">03:00</div>
+                        <div class="timer-input-group">
+                            <button id="timer-decrease" class="timer-btn">-</button>
+                            <input type="number" id="timer-input" min="1" max="15" value="3" class="timer-input">
+                            <button id="timer-increase" class="timer-btn">+</button>
+                            <span class="timer-unit">Minuten</span>
+                        </div>
+                        <div class="timer-actions">
+                            <button id="timer-start" class="btn btn-primary">Start</button>
+                            <button id="timer-pause" class="btn btn-secondary" disabled>Pause</button>
+                            <button id="timer-reset" class="btn btn-secondary">Reset</button>
+                        </div>
+                    </div>
+                    <div id="timer-notification" class="timer-notification" style="display: none;"></div>
+                </div>
+                
                 <div class="recent-activity">
                     <h3>Letzte Aktivitäten</h3>
                     <div id="recent-entries" class="activity-list"></div>
@@ -100,6 +121,11 @@
                         <input type="number" id="track-amount" min="1" max="10" value="1" required>
                     </div>
                     
+                    <div class="form-group">
+                        <label for="track-teaspoons">Menge Tee-Pulver (Teelöffel)</label>
+                        <input type="number" id="track-teaspoons" min="0" max="10" value="1" step="0.5">
+                    </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>
@@ -117,6 +143,81 @@
                 </div>
             </section>
 
+            <!-- Einstellungen Tab -->
+            <section id="settings" class="tab-pane">
+                <h2>⚙️ Einstellungen</h2>
+                
+                <div class="settings-section">
+                    <h3>💾 Datenverwaltung</h3>
+                    <p>Daten werden im <code>data/</code>-Verzeichnis gespeichert (falls ein lokaler Server läuft) oder im Browser-Speicher (localStorage).</p>
+                    
+                    <div class="form-group">
+                        <label>Speicherstatus</label>
+                        <div id="sync-status" class="status-badge">Lokaler Modus</div>
+                    </div>
+                    
+                    <div class="form-actions">
+                        <button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button>
+                        <button id="import-data" class="btn btn-secondary">📥 Daten importieren</button>
+                        <button id="clear-data" class="btn btn-danger">🗑️ Alle Daten löschen</button>
+                    </div>
+                </div>
+                
+                <div class="settings-section">
+                    <h3>🎨 Hintergrundbild</h3>
+                    <p>Wähle ein Hintergrundbild für deine TeeTracker-App.</p>
+                    
+                    <div class="form-group">
+                        <label for="bg-image-upload">Hintergrundbild hochladen:</label>
+                        <input type="file" id="bg-image-upload" accept="image/*">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="bg-image-preview">Vorschau:</label>
+                        <div id="bg-image-preview" class="bg-preview" style="display: none;">
+                            <img id="bg-preview-img" style="max-width: 200px; max-height: 150px; border-radius: 8px; margin-top: 10px;">
+                        </div>
+                    </div>
+                    
+                    <div class="form-group checkbox-group">
+                        <label>
+                            <input type="checkbox" id="bg-enabled">
+                            <span class="checkmark"></span>
+                            Hintergrundbild aktivieren
+                        </label>
+                    </div>
+                    
+                    <div class="form-actions">
+                        <button id="remove-bg" class="btn btn-secondary" style="display: none;">🗑️ Hintergrund entfernen</button>
+                        <button id="save-bg" class="btn btn-primary">💾 Hintergrund speichern</button>
+                    </div>
+                </div>
+
+                </div>
+                
+                <div class="settings-section">
+                    <h3>📊 Statistik</h3>
+                    <div class="stats-overview">
+                        <div class="stat-item">
+                            <span class="stat-label">Gesamt Tassen:</span>
+                            <span id="settings-total-cups">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Tee-Sorten:</span>
+                            <span id="settings-total-teas">0</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Erster Eintrag:</span>
+                            <span id="settings-first-entry">-</span>
+                        </div>
+                        <div class="stat-item">
+                            <span class="stat-label">Letzter Eintrag:</span>
+                            <span id="settings-last-entry">-</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
             <!-- Statistiken Tab -->
             <section id="stats" class="tab-pane">
                 <h2>Statistiken</h2>
@@ -200,6 +301,27 @@
                         </label>
                     </div>
                     
+                    <div class="form-group">
+                        <label>Bewertung</label>
+                        <div class="star-rating" id="tea-rating">
+                            <span class="star" data-value="1">★</span>
+                            <span class="star" data-value="2">★</span>
+                            <span class="star" data-value="3">★</span>
+                            <span class="star" data-value="4">★</span>
+                            <span class="star" data-value="5">★</span>
+                        </div>
+                        <input type="hidden" id="tea-rating-value" value="3">
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="tea-image-upload">Tee-Foto</label>
+                        <input type="file" id="tea-image-upload" accept="image/*">
+                        <div id="tea-image-preview" class="image-preview" style="display: none; margin-top: 10px;">
+                            <img id="tea-image-preview-img" style="max-width: 150px; max-height: 150px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
+                        </div>
+                        <input type="hidden" id="tea-image-data" value="">
+                    </div>
+                    
                     <div class="form-group">
                         <label for="tea-color">Farbe</label>
                         <input type="color" id="tea-color" value="#8B4513">
@@ -229,7 +351,28 @@
                 </div>
             </div>
         </div>
+
+        <!-- Import Modal -->
+        <div id="import-modal" class="modal">
+            <div class="modal-content" style="max-width: 600px;">
+                <div class="modal-header">
+                    <h2>Daten importieren</h2>
+                    <button id="close-import-modal" class="close-btn">&times;</button>
                 </div>
+                <div class="modal-body">
+                    <p>Füge deine exportierten TeeTracker-Daten hier ein:</p>
+                    <textarea id="import-data-textarea" class="modal-textarea" placeholder="{\n  \"teas\": [...],\n  \"entries\": [...]\n}"></textarea>
+                </div>
+                <div class="modal-footer">
+                    <button id="import-data-btn" class="btn btn-primary">📥 Importieren</button>
+                    <button id="cancel-import-btn" class="btn btn-secondary">Abbrechen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Toast Container -->
+    <div id="toast-container" class="toast-container"></div>
 
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="app.js"></script>

styles.css

@@ -815,3 +815,323 @@ header p {
 .organic-badge:hover {
     transform: scale(1.1);
 }
+
+/* Settings Section */
+.settings-section {
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 20px;
+    box-shadow: var(--box-shadow);
+    margin-bottom: 20px;
+}
+
+.settings-section h3 {
+    margin-bottom: 15px;
+    color: var(--text-color);
+    border-bottom: 2px solid var(--primary-light);
+    padding-bottom: 10px;
+}
+
+.settings-section p {
+    color: var(--text-light);
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+/* Status Message */
+.status-message {
+    margin-top: 15px;
+    padding: 10px;
+    border-radius: var(--border-radius);
+    font-size: 0.9rem;
+}
+
+.status-message.success {
+    background-color: rgba(40, 167, 69, 0.1);
+    color: var(--success-color);
+    border: 1px solid var(--success-color);
+}
+
+.status-message.error {
+    background-color: rgba(220, 53, 69, 0.1);
+    color: var(--danger-color);
+    border: 1px solid var(--danger-color);
+}
+
+.status-message.info {
+    background-color: rgba(78, 205, 196, 0.1);
+    color: var(--secondary-color);
+    border: 1px solid var(--secondary-color);
+}
+
+/* Status Badge */
+.status-badge {
+    display: inline-block;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.status-badge.local {
+    background-color: #6c757d;
+    color: white;
+}
+
+.status-badge.connected {
+    background-color: var(--success-color);
+    color: white;
+}
+
+.status-badge.disconnected {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+.status-badge.syncing {
+    background-color: var(--warning-color);
+    color: #333;
+}
+
+/* Stats Overview */
+.stats-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-top: 15px;
+}
+
+.stat-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border-radius: var(--border-radius);
+}
+
+.stat-label {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+.stat-value {
+    color: var(--text-color);
+    font-weight: 600;
+}
+
+/* Modal for Import/Export */
+.modal-textarea {
+    width: 100%;
+    min-height: 200px;
+    font-family: monospace;
+    font-size: 0.85rem;
+    background-color: #f5f5f5;
+    border: 2px solid #ddd;
+    border-radius: var(--border-radius);
+    padding: 12px;
+    resize: vertical;
+}
+
+.modal-textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+}
+
+/* Background Image Settings */
+.bg-preview {
+    margin-top: 10px;
+}
+
+.bg-preview img {
+    max-width: 200px;
+    max-height: 150px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    object-fit: cover;
+}
+
+/* Background Image for App */
+.app-container {
+    background-image: var(--bg-image, none);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+}
+
+/* Overlay for better text readability */
+.app-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.85);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* Star Rating */
+.star-rating {
+    display: flex;
+    gap: 5px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    margin-top: 5px;
+}
+
+.star-rating .star {
+    color: #ccc;
+    transition: color 0.2s;
+}
+
+.star-rating .star:hover,
+.star-rating .star.active {
+    color: #FFD700;
+}
+
+.star-rating .star:hover ~ .star {
+    color: #ccc;
+}
+
+/* Rating display on tea cards */
+.rating-display {
+    color: #FFD700;
+    font-size: 0.9rem;
+    margin-left: 5px;
+}
+
+/* Rating display on tea cards */
+.tea-rating-display {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 0.9rem;
+}
+
+.tea-rating-display .star {
+    color: #FFD700;
+    font-size: 1rem;
+}
+
+/* Image Upload Preview */
+.image-preview {
+    margin-top: 10px;
+}
+
+.image-preview img {
+    max-width: 150px;
+    max-height: 150px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    object-fit: cover;
+}
+
+/* Tea card image */
+.tea-image {
+    width: 60px;
+    height: 60px;
+    border-radius: var(--border-radius);
+    object-fit: cover;
+    box-shadow: var(--box-shadow);
+    margin-right: 10px;
+}
+
+/* Tea Timer Styles */
+.timer-section {
+    background: var(--card-bg);
+    border-radius: var(--border-radius);
+    padding: 20px;
+    margin-top: 20px;
+    box-shadow: var(--box-shadow);
+}
+
+.timer-section h3 {
+    margin-bottom: 15px;
+    color: var(--primary-color);
+}
+
+.timer-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 15px;
+}
+
+.timer-display {
+    font-size: 3rem;
+    font-weight: bold;
+    color: var(--primary-color);
+    font-family: monospace;
+}
+
+.timer-input-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.timer-btn {
+    width: 30px;
+    height: 30px;
+    border: none;
+    background-color: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+
+.timer-btn:hover {
+    background-color: var(--primary-dark);
+}
+
+.timer-btn:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+}
+
+.timer-input {
+    width: 60px;
+    padding: 8px;
+    text-align: center;
+    font-size: 1rem;
+    border: 1px solid #ddd;
+    border-radius: var(--border-radius);
+    background-color: var(--card-bg);
+}
+
+.timer-unit {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+.timer-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.timer-notification {
+    margin-top: 15px;
+    padding: 10px;
+    border-radius: var(--border-radius);
+    text-align: center;
+    font-weight: bold;
+    animation: pulse 1s infinite;
+}
+
+.timer-notification.success {
+    background-color: rgba(40, 167, 69, 0.2);
+    color: var(--success-color);
+    border: 1px solid var(--success-color);
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}