# 🍵 TeeTracker

> **Dein persönlicher Tee-Konsum Tracker** – Verwalte deine Tee-Sorten und tracke, wie viel Tee du trinkst!

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![HTML5](https://img.shields.io/badge/HTML5-E34F26?logo=html5&logoColor=white)]
[![CSS3](https://img.shields.io/badge/CSS3-1572B6?logo=css3&logoColor=white)]
[![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](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) |

*(Screenshots werden automatisch generiert, sobald die App live ist)*

---

## ✨ Funktionen

### 📊 Dashboard
- **Gesamtübersicht**: Alle getrunkenen Tassen seit Beginn
- **Heute**: Wie viel Tee du heute schon getrunken hast
- **Diese Woche**: Wöchentlicher Konsum
- **Tee-Sorten**: Anzahl deiner gespeicherten Sorten
- **Letzte Aktivitäten**: Die letzten 5 getrackten Einträge

### 🍃 Tee-Sorten verwalten
- **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)
  - Marke (optional)
  - Beschreibung (optional)
  - Farbe (für individuelle Darstellung)
- **Bearbeiten**: Bestehende Sorten anpassen
- **Löschen**: Sorten entfernen (mit Bestätigung)
- **Suche & Filter**: Schnell finden, was du suchst
  - Textsuche nach Name, Marke oder Beschreibung
  - Filter nach Tee-Typ

### 📝 Tee-Konsum tracken
- **Tee-Sorte** auswählen (Pflichtfeld)
- **Datum** auswählen (Pflichtfeld, standardmäßig heute)
- **Uhrzeit** angeben (optional)
- **Menge** in Tassen (Pflichtfeld, 1-10)
- **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")

### 📈 Statistiken
- **Diagramme**: Visuelle Darstellung deines Konsums
  - Donut-Chart: Verteilung nach Tee-Typen
  - Balkendiagramm: Tagesverlauf
- **Detaillierte Statistiken**
  - Gesamt getrunken
  - Durchschnitt pro Tag
  - Aktive Tage
  - Verschiedene Tees
  - Meist getrunkener Tee
- **Zeitraum-Filter**: Letzte 7 Tage, Monat, Jahr oder Gesamt

---

## 🚀 Schnellstart

### Option 1: Lokal nutzen

1. **Repository klonen** (oder Dateien herunterladen):
   ```bash
   git clone https://github.com/trevor1969/teatracker.git
   cd teatracker
   ```

2. **index.html öffnen**:
   - Einfach die `index.html` Datei in deinem Browser öffnen
   - Oder einen lokalen Server starten:
     ```bash
     # Mit Python 3
     python -m http.server 8000
     
     # Mit Node.js (npx)
     npx serve
     ```
   - Dann im Browser `http://localhost:8000` öffnen

### Option 2: GitHub Pages

1. Gehe zu deinem Repository auf GitHub
2. Aktiviere GitHub Pages:
   - Settings → Pages
   - Branch: `main` auswählen
   - Folder: `/ (root)` auswählen
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar

### Option 3: Netlify/Vercel

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/trevor1969/teatracker)

Einfach auf den Button klicken und deine eigene Instanz deployen!

---

## 🛠 Technologien

- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
- **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
- **Speicher**: localStorage (Daten bleiben im Browser erhalten)
- **Design**: Responsive, Mobile-First, Tee-inspirierte Farben

---

## 📦 Projektstruktur

```
teatracker/
├── index.html      # Haupt-HTML-Datei
├── styles.css      # Alle Styles und Design
├── app.js          # gesamte Anwendungslogik
└── README.md       # Diese Datei
```

---

## 🎨 Design

### Farben
| Farbe | Hex | Verwendung |
|-------|-----|------------|
| ![#8B4513](https://via.placeholder.com/20/8B4513/000000?text=+) `#8B4513` | Primärfarbe (Braun) |
| ![#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 |

### Responsive Design
- ✅ Desktop (ab 1200px)
- ✅ Tablet (768px - 1199px)
- ✅ Mobile (unter 768px)
- ✅ Kleine Geräte (unter 480px)

---

## 💡 Tipps & Tricks

### Daten sichern
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)
2. Folgenden Code ausführen:
   ```javascript
   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
```javascript
const backupTeas = [/* deine gesicherten Tees */];
const backupEntries = [/* deine gesicherten Einträge */];
localStorage.setItem('teatracker_teas', JSON.stringify(backupTeas));
localStorage.setItem('teatracker_entries', JSON.stringify(backupEntries));
location.reload();
```

### Daten zurücksetzen
Falls du von vorne beginnen möchtest:
```javascript
localStorage.removeItem('teatracker_teas');
localStorage.removeItem('teatracker_entries');
location.reload();
```

---

## 🤝 Mitwirken

Beiträge sind willkommen! Wenn du Ideen für Verbesserungen hast oder Fehler findest:

1. Fork das Repository
2. Erstelle einen neuen Branch (`git checkout -b feature/amazing-feature`)
3. Commit deine Änderungen (`git commit -m 'Add amazing feature'`)
4. Push zum Branch (`git push origin feature/amazing-feature`)
5. Öffne einen Pull Request

---

## 📜 Lizenz

Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) Datei für Details.

---

## 🙏 Danksagung

- [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme
- Alle Tee-Liebhaber da draußen! ☕🍵

---

## 📞 Kontakt

Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/teatracker/issues) oder einen [Pull Request](https://github.com/trevor1969/teatracker/pulls).

---

**Viel Spaß beim Tee-Tracken!** 🍵✨

*Made with ❤️ and JavaScript*