mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
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>
This commit is contained in:
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -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.
|
||||||
211
README.md
Normal file
211
README.md
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
# 🍵 TeeTracker
|
||||||
|
|
||||||
|
> **Dein persönlicher Tee-Konsum Tracker** – Verwalte deine Tee-Sorten und tracke, wie viel Tee du trinkst!
|
||||||
|
|
||||||
|
[](https://opensource.org/licenses/MIT)
|
||||||
|
[]
|
||||||
|
[]
|
||||||
|
[]
|
||||||
|
[]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📸 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):
|
||||||
|
```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
|
||||||
|
|
||||||
|
[](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` | 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:
|
||||||
|
```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*
|
||||||
Reference in New Issue
Block a user