docs: Add comprehensive README.md and LICENSE

- Add detailed README with: - Project description and badges - Screenshot placeholders - Feature overview for all sections - Quick start guide with multiple options - Technology stack - Project structure - Design information - Tips for backup/restore/reset - Contribution guidelines - License information - Add MIT License file Generated by Vibe Code Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
2026-08-09 10:41:59 +00:00 · 2026-06-04 10:40:40 +00:00
parent fc5d63604e
commit 2bce6906ef
2 changed files with 232 additions and 0 deletions
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 trevor1969
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,211 @@
+# 🍵 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*