From 2bce6906ef86e2b5a478e37a0d801c3b334a6c69 Mon Sep 17 00:00:00 2001 From: Vibe Nuage Agent Date: Thu, 4 Jun 2026 10:40:40 +0000 Subject: [PATCH] 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 --- LICENSE | 21 ++++++ README.md | 211 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 232 insertions(+) create mode 100644 LICENSE create mode 100644 README.md diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..5066943 --- /dev/null +++ b/LICENSE @@ -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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..dc8e5da --- /dev/null +++ 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*