🍵 TeeTracker

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

[] [] [] []

---

📸 Screenshots

Dashboard	Tee-Sorten	Tracken	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):

   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:

     # 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

Einfach auf den Button klicken und deine eigene Instanz deployen!

---

🛠 Technologien

• Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
• Charts: Chart.js (ü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	Primärfarbe (Braun)
#4ECDC4	Sekundärfarbe (Türkis)
#228B22	Grüntee
#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:

   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

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:

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 Datei für Details.

---

🙏 Danksagung

• Chart.js – Für die tollen Diagramme
• Alle Tee-Liebhaber da draußen! ☕🍵

---

📞 Kontakt

Fragen oder Feedback? Öffne einfach ein Issue oder einen Pull Request.

---

Viel Spaß beim Tee-Tracken! 🍵✨

Made with ❤️ and JavaScript