mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
Compare commits
22 Commits
1263a5238b
...
v3.0
| Author | SHA1 | Date | |
|---|---|---|---|
| daf742e309 | |||
| c628cf2069 | |||
| f111153bde | |||
| 0baceb14c6 | |||
| 91367a7198 | |||
| 7e1f52a5b2 | |||
| 7f059c9b4c | |||
| a16da66c2d | |||
| 073834a5dc | |||
| ac12cc5cab | |||
| 394480c516 | |||
| ff37d35134 | |||
| 4f8890da7f | |||
| 733e2db3c4 | |||
| 30e0077c6e | |||
| 7b9f509728 | |||
| 6addc628e8 | |||
| 58e2a70201 | |||
| b3c1041792 | |||
| 233647be4a | |||
| 990ebb134d | |||
| 142a671016 |
234
README.md
234
README.md
@ -7,14 +7,15 @@
|
||||
[]
|
||||
[]
|
||||
[]
|
||||
[]
|
||||
|
||||
---
|
||||
|
||||
## 📸 Screenshots
|
||||
|
||||
| Dashboard | Tee-Sorten | Tracken | Statistiken |
|
||||
|-----------|------------|---------|-------------|
|
||||
|  |  |  |  |
|
||||
| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
|
||||
|-----------|------------|---------|-------------|--------------|
|
||||
|  |  |  |  |  |
|
||||
|
||||
*(Screenshots werden automatisch generiert, sobald die App live ist)*
|
||||
|
||||
@ -33,6 +34,7 @@
|
||||
- **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)
|
||||
- **Bio-Checkbox** 🌱: Kennzeichnung für Bio-Tees
|
||||
- Marke (optional)
|
||||
- Beschreibung (optional)
|
||||
- Farbe (für individuelle Darstellung)
|
||||
@ -48,6 +50,7 @@
|
||||
- **Uhrzeit** angeben (optional)
|
||||
- **Menge** in Tassen (Pflichtfeld, 1-10)
|
||||
- **Notizen** hinzufügen (z.B. "Mit Honig", "besonders stark")
|
||||
- **Letzte 10 Einträge** werden unter dem Formular angezeigt
|
||||
|
||||
### 📈 Statistiken
|
||||
- **Diagramme**: Visuelle Darstellung deines Konsums
|
||||
@ -59,7 +62,22 @@
|
||||
- Aktive Tage
|
||||
- Verschiedene Tees
|
||||
- Meist getrunkener Tee
|
||||
- **Zeitraum-Filter**: Letzte 7 Tage, Monat, Jahr oder Gesamt
|
||||
- **Zeitraum-Filter**: **Heute**, Letzte 7 Tage, Monat, Jahr oder Gesamt
|
||||
|
||||
### ⚙️ Einstellungen (NEU!)
|
||||
- **Nextcloud-Synchronisation** 🌐
|
||||
- Verbindung zu deiner Nextcloud-Instanz herstellen
|
||||
- Automatische Synchronisation zwischen Geräten
|
||||
- Verbindungstest
|
||||
- Synchronisationsstatus-Anzeige
|
||||
- **Datenverwaltung**
|
||||
- 📤 **Daten exportieren** (JSON-Datei herunterladen)
|
||||
- 📥 **Daten importieren** (JSON-Datei hochladen)
|
||||
- 🗑️ **Alle Daten löschen** (mit Bestätigung)
|
||||
- **Statistik-Übersicht**
|
||||
- Gesamt Tassen
|
||||
- Anzahl Tee-Sorten
|
||||
- Erster/Letzter Eintrag
|
||||
|
||||
---
|
||||
|
||||
@ -94,11 +112,21 @@
|
||||
- Folder: `/ (root)` auswählen
|
||||
3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
|
||||
|
||||
### Option 3: Netlify/Vercel
|
||||
### Option 3: Mit Nextcloud-Synchronisation (empfohlen!)
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/trevor1969/teatracker)
|
||||
1. **App öffnen** (lokal oder über GitHub Pages)
|
||||
2. Gehe zum Tab **⚙️ Einstellungen**
|
||||
3. Aktiviere **Nextcloud-Synchronisation**
|
||||
4. Trage deine Nextcloud-Daten ein:
|
||||
- **URL**: `https://wralto.org/nextcloud3`
|
||||
- **Benutzername**: `teetracker`
|
||||
- **App-Passwort**: (dein App-Passwort aus Nextcloud)
|
||||
- **Speicherpfad**: `/TeeTracker/` (Standard)
|
||||
5. Klicke auf **🔍 Verbindung testen**
|
||||
6. Speichere die Konfiguration mit **💾 Speichern**
|
||||
7. **Fertig!** 🎉 Deine Daten werden jetzt automatisch synchronisiert
|
||||
|
||||
Einfach auf den Button klicken und deine eigene Instanz deployen!
|
||||
**Hinweis:** Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage).
|
||||
|
||||
---
|
||||
|
||||
@ -106,7 +134,8 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
|
||||
|
||||
- **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
|
||||
- **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
|
||||
- **Speicher**: localStorage (Daten bleiben im Browser erhalten)
|
||||
- **Cloud-Speicher**: [Nextcloud WebDAV API](https://docs.nextcloud.com/server/latest/developer_manual/third_party/webdav.html)
|
||||
- **Lokaler Speicher**: localStorage (Fallback)
|
||||
- **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
|
||||
|
||||
---
|
||||
@ -115,14 +144,67 @@ Einfach auf den Button klicken und deine eigene Instanz deployen!
|
||||
|
||||
```
|
||||
teatracker/
|
||||
├── index.html # Haupt-HTML-Datei
|
||||
├── index.html # Haupt-HTML-Datei mit allen Tabs
|
||||
├── styles.css # Alle Styles und Design
|
||||
├── app.js # gesamte Anwendungslogik
|
||||
└── README.md # Diese Datei
|
||||
├── app.js # gesamte Anwendungslogik + Nextcloud-Integration
|
||||
├── README.md # Diese Datei
|
||||
└── LICENSE # MIT License
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Nextcloud-Integration
|
||||
|
||||
### Wie es funktioniert
|
||||
|
||||
Die App nutzt die **WebDAV-API** von Nextcloud, um Daten als JSON-Dateien zu speichern:
|
||||
|
||||
```
|
||||
/TeeTracker/
|
||||
├── teas.json # Deine Tee-Sorten
|
||||
├── entries.json # Deine Tracking-Einträge
|
||||
└── backup/ # Automatische Backups
|
||||
└── teetracker_backup_2024-06-05T10-30-00.json
|
||||
```
|
||||
|
||||
### Vorteile
|
||||
|
||||
| Vorteil | Beschreibung |
|
||||
|---------|--------------|
|
||||
| **🌍 Plattformübergreifend** | Zugriff von allen Geräten mit Internetverbindung |
|
||||
| **🔄 Echtzeit-Sync** | Änderungen werden sofort synchronisiert |
|
||||
| **💾 Automatische Backups** | Daten bleiben in Nextcloud erhalten |
|
||||
| **⚡ Schnell** | Keine Datenbank nötig, einfache Dateispeicherung |
|
||||
| **🔒 Sicher** | HTTPS-Verschlüsselung, App-Passwort (nicht Hauptpasswort) |
|
||||
|
||||
### Fallback-Mechanismus
|
||||
|
||||
Falls Nextcloud nicht erreichbar ist:
|
||||
1. Die App **funktioniert weiter** mit lokalen Daten (localStorage)
|
||||
2. Änderungen werden **lokal gespeichert**
|
||||
3. Beim nächsten erfolgreichen Verbindungsaufbau werden die Daten **automatisch synchronisiert**
|
||||
|
||||
### 🔐 Sicherheitshinweise
|
||||
|
||||
**WICHTIG:** Aus Sicherheitsgründen wird dein Passwort **NICHT** im Klartext in der App oder im localStorage gespeichert!
|
||||
|
||||
- **sessionStorage**: Das Passwort wird nur in `sessionStorage` gespeichert (wird beim Schließen des Browsers gelöscht)
|
||||
- **Keine Vorbefüllung**: Du musst dein Passwort manuell eingeben
|
||||
- **Kein Klartext in Dateien**: Das Passwort erscheint nirgends im Code
|
||||
|
||||
### App-Passwort erstellen
|
||||
|
||||
Falls du ein neues Passwort brauchst:
|
||||
1. Logge dich in deine Nextcloud ein (`https://wralto.org/nextcloud3`)
|
||||
2. Gehe zu **Einstellungen → Sicherheit**
|
||||
3. Suche nach **"App-Passwörter"**
|
||||
4. Erstelle ein neues Passwort mit dem Namen **"TeeTracker"**
|
||||
5. Kopiere das Passwort und trage es in den Einstellungen ein
|
||||
|
||||
**Tipp:** Speichere das App-Passwort in einem Passwort-Manager, da es nach dem Erstellen nicht mehr angezeigt wird.
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design
|
||||
|
||||
### Farben
|
||||
@ -132,6 +214,7 @@ teatracker/
|
||||
|  `#4ECDC4` | Sekundärfarbe (Türkis) |
|
||||
|  `#228B22` | Grüntee |
|
||||
|  `#FF6347` | Akzentfarbe |
|
||||
|  `#28a745` | Erfolg (Grün) |
|
||||
|
||||
### Responsive Design
|
||||
- ✅ Desktop (ab 1200px)
|
||||
@ -143,35 +226,93 @@ teatracker/
|
||||
|
||||
## 💡 Tipps & Tricks
|
||||
|
||||
### Daten sichern
|
||||
Da die Daten im localStorage gespeichert werden, sind sie nur in deinem Browser verfügbar. Um ein Backup zu erstellen:
|
||||
### Daten sichern (Backup)
|
||||
|
||||
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
|
||||
**Option 1: Automatisch (Nextcloud)**
|
||||
- Die Daten werden automatisch in deiner Nextcloud gespeichert
|
||||
- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt
|
||||
|
||||
### 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();
|
||||
```
|
||||
**Option 2: Manuell (Export)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **📤 Daten exportieren**
|
||||
3. Speichere die JSON-Datei an einem sicheren Ort
|
||||
|
||||
### Daten wiederherstellen (Restore)
|
||||
|
||||
**Option 1: Automatisch (Nextcloud)**
|
||||
- Einfach die App auf einem neuen Gerät öffnen
|
||||
- Die Daten werden automatisch von Nextcloud geladen
|
||||
|
||||
**Option 2: Manuell (Import)**
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **📥 Daten importieren**
|
||||
3. Füge deine exportierten Daten ein oder lade die JSON-Datei hoch
|
||||
4. Wähle, ob du die Daten **ersetzen** oder **zusammenführen** möchtest
|
||||
|
||||
### Daten zurücksetzen
|
||||
|
||||
Falls du von vorne beginnen möchtest:
|
||||
```javascript
|
||||
localStorage.removeItem('teatracker_teas');
|
||||
localStorage.removeItem('teatracker_entries');
|
||||
location.reload();
|
||||
```
|
||||
1. Gehe zu **Einstellungen → Datenverwaltung**
|
||||
2. Klicke auf **🗑️ Alle Daten löschen**
|
||||
3. Bestätige die Aktion
|
||||
|
||||
**Achtung:** Dieser Vorgang kann nicht rückgängig gemacht werden!
|
||||
|
||||
### Nextcloud-Verbindung prüfen
|
||||
|
||||
Falls die Synchronisation nicht funktioniert:
|
||||
1. Gehe zu **Einstellungen → Nextcloud-Synchronisation**
|
||||
2. Klicke auf **🔍 Verbindung testen**
|
||||
3. Prüfe die Fehlermeldung und korrigiere deine Eingaben
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Problembehebung
|
||||
|
||||
### ❌ Verbindung zu Nextcloud fehlgeschlagen
|
||||
|
||||
**Mögliche Ursachen:**
|
||||
- Falsche URL (muss mit `https://` beginnen)
|
||||
- Falscher Benutzername oder Passwort
|
||||
- Nextcloud ist nicht erreichbar
|
||||
- WebDAV ist deaktiviert (standardmäßig aktiv)
|
||||
- CORS-Probleme (Browser-Beschränkungen)
|
||||
|
||||
**Lösungen:**
|
||||
1. Prüfe, ob du dich manuell in Nextcloud einloggen kannst
|
||||
2. Teste die WebDAV-URL direkt im Browser:
|
||||
```
|
||||
https://wralto.org/nextcloud3/remote.php/dav/
|
||||
```
|
||||
3. Erstelle ein neues App-Passwort in Nextcloud
|
||||
4. Versuche einen anderen Browser
|
||||
5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
|
||||
|
||||
### ❌ Daten werden nicht synchronisiert
|
||||
|
||||
**Mögliche Ursachen:**
|
||||
- Nextcloud ist offline
|
||||
- Browser blockiert die Verbindung
|
||||
- Zu viele Anfragen in kurzer Zeit
|
||||
|
||||
**Lösungen:**
|
||||
1. Prüfe deine Internetverbindung
|
||||
2. Lade die Seite neu
|
||||
3. Warte einige Minuten und versuche es erneut
|
||||
4. Prüfe die Browser-Konsole auf Fehler
|
||||
5. Versuche, die Daten manuell zu exportieren/importieren
|
||||
|
||||
### ❌ Daten sind verschwunden
|
||||
|
||||
**Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
|
||||
1. **Nextcloud** (falls verbunden)
|
||||
2. **localStorage** (Fallback)
|
||||
|
||||
**Lösungen:**
|
||||
1. Lade die Seite neu
|
||||
2. Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist
|
||||
3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
|
||||
4. Falls nötig: Importiere deine exportierten Daten
|
||||
|
||||
---
|
||||
|
||||
@ -196,16 +337,37 @@ Dieses Projekt steht unter der **MIT License** – sieh die [LICENSE](LICENSE) D
|
||||
## 🙏 Danksagung
|
||||
|
||||
- [Chart.js](https://www.chartjs.org/) – Für die tollen Diagramme
|
||||
- [Nextcloud](https://nextcloud.com/) – Für die sichere Cloud-Speicherung
|
||||
- Alle Tee-Liebhaber da draußen! ☕🍵
|
||||
|
||||
---
|
||||
|
||||
## 📞 Kontakt
|
||||
## 📞 Kontakt & Support
|
||||
|
||||
Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/teatracker/issues) oder einen [Pull Request](https://github.com/trevor1969/teatracker/pulls).
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Changelog
|
||||
|
||||
### 🆕 Neueste Änderungen
|
||||
|
||||
- **🌐 Nextcloud-Integration** – Plattformübergreifende Synchronisation via WebDAV
|
||||
- **⚙️ Einstellungen-Tab** – Nextcloud-Konfiguration, Daten-Export/Import
|
||||
- **🌱 Bio-Checkbox** – Kennzeichnung für Bio-Tees
|
||||
- **📅 Zeitraum "Heute"** – Filter für aktuelle Tagesdaten in Statistiken
|
||||
- **📝 Letzte 10 Einträge** – Anzeige auf der Tracken-Seite
|
||||
|
||||
### 📅 Versionshistorie
|
||||
|
||||
| Version | Datum | Änderungen |
|
||||
|---------|-------|-----------|
|
||||
| 1.2.0 | Juni 2024 | Nextcloud-Integration, Einstellungen-Tab, Bio-Checkbox, "Heute"-Filter, letzte Einträge |
|
||||
| 1.1.0 | Juni 2024 | Bio-Checkbox, "Heute"-Zeitraum, letzte 10 Einträge auf Tracken-Seite |
|
||||
| 1.0.0 | Juni 2024 | Erste Version mit Dashboard, Tee-Verwaltung, Tracking, Statistiken |
|
||||
|
||||
---
|
||||
|
||||
**Viel Spaß beim Tee-Tracken!** 🍵✨
|
||||
|
||||
*Made with ❤️ and JavaScript*
|
||||
|
||||
182
index.html
182
index.html
@ -18,6 +18,7 @@
|
||||
<button class="tab-button" data-tab="teas">Tee-Sorten</button>
|
||||
<button class="tab-button" data-tab="track">Tracken</button>
|
||||
<button class="tab-button" data-tab="stats">Statistiken</button>
|
||||
<button class="tab-button" data-tab="settings">⚙️ Einstellungen</button>
|
||||
</nav>
|
||||
|
||||
<main class="tab-content">
|
||||
@ -42,6 +43,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tea Timer -->
|
||||
<div class="timer-section">
|
||||
<h3>⏱️ Tee-Timer</h3>
|
||||
<div class="timer-controls">
|
||||
<div class="timer-display" id="timer-display">03:00</div>
|
||||
<div class="timer-input-group">
|
||||
<button id="timer-decrease" class="timer-btn">-</button>
|
||||
<input type="number" id="timer-input" min="1" max="15" value="3" class="timer-input">
|
||||
<button id="timer-increase" class="timer-btn">+</button>
|
||||
<span class="timer-unit">Minuten</span>
|
||||
</div>
|
||||
<div class="timer-actions">
|
||||
<button id="timer-start" class="btn btn-primary">Start</button>
|
||||
<button id="timer-pause" class="btn btn-secondary" disabled>Pause</button>
|
||||
<button id="timer-reset" class="btn btn-secondary">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="timer-notification" class="timer-notification" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="recent-activity">
|
||||
<h3>Letzte Aktivitäten</h3>
|
||||
<div id="recent-entries" class="activity-list"></div>
|
||||
@ -100,6 +121,11 @@
|
||||
<input type="number" id="track-amount" min="1" max="10" value="1" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="track-teaspoons">Menge Tee-Pulver (Teelöffel)</label>
|
||||
<input type="number" id="track-teaspoons" min="0" max="10" value="1" step="0.5">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="track-notes">Notizen</label>
|
||||
<textarea id="track-notes" rows="3" placeholder="z.B. Mit Honig, besonders stark..."></textarea>
|
||||
@ -117,6 +143,123 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Einstellungen Tab -->
|
||||
<section id="settings" class="tab-pane">
|
||||
<h2>⚙️ Einstellungen</h2>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>🌐 Nextcloud-Synchronisation</h3>
|
||||
<p>Verbinde TeeTracker mit deiner Nextcloud-Instanz für plattformübergreifende Synchronisation.</p>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="nc-enabled">
|
||||
<span class="checkmark"></span>
|
||||
Nextcloud-Synchronisation aktivieren
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="nc-config" style="display: none;">
|
||||
<div class="form-group">
|
||||
<label for="nc-url">Nextcloud-URL *</label>
|
||||
<input type="url" id="nc-url" placeholder="https://deine-nextcloud.de">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nc-username">Benutzername *</label>
|
||||
<input type="text" id="nc-username" placeholder="Dein Nextcloud-Benutzername">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nc-password">App-Passwort *</label>
|
||||
<input type="password" id="nc-password" placeholder="App-Passwort aus Nextcloud" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="nc-path">Speicherpfad</label>
|
||||
<input type="text" id="nc-path" placeholder="/TeeTracker/" value="/TeeTracker/">
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button id="test-nc-connection" class="btn btn-secondary">🔍 Verbindung testen</button>
|
||||
<button id="save-nc-config" class="btn btn-primary">💾 Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="nc-status" class="status-message"></div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>💾 Datenverwaltung</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Synchronisationsstatus</label>
|
||||
<div id="sync-status" class="status-badge">Lokaler Modus</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button id="export-data" class="btn btn-secondary">📤 Daten exportieren</button>
|
||||
<button id="import-data" class="btn btn-secondary">📥 Daten importieren</button>
|
||||
<button id="clear-data" class="btn btn-danger">🗑️ Alle Daten löschen</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>🎨 Hintergrundbild</h3>
|
||||
<p>Wähle ein Hintergrundbild für deine TeeTracker-App.</p>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bg-image-upload">Hintergrundbild hochladen:</label>
|
||||
<input type="file" id="bg-image-upload" accept="image/*">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="bg-image-preview">Vorschau:</label>
|
||||
<div id="bg-image-preview" class="bg-preview" style="display: none;">
|
||||
<img id="bg-preview-img" style="max-width: 200px; max-height: 150px; border-radius: 8px; margin-top: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="bg-enabled">
|
||||
<span class="checkmark"></span>
|
||||
Hintergrundbild aktivieren
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button id="remove-bg" class="btn btn-secondary" style="display: none;">🗑️ Hintergrund entfernen</button>
|
||||
<button id="save-bg" class="btn btn-primary">💾 Hintergrund speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h3>📊 Statistik</h3>
|
||||
<div class="stats-overview">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Gesamt Tassen:</span>
|
||||
<span id="settings-total-cups">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Tee-Sorten:</span>
|
||||
<span id="settings-total-teas">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Erster Eintrag:</span>
|
||||
<span id="settings-first-entry">-</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Letzter Eintrag:</span>
|
||||
<span id="settings-last-entry">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Statistiken Tab -->
|
||||
<section id="stats" class="tab-pane">
|
||||
<h2>Statistiken</h2>
|
||||
@ -200,6 +343,27 @@
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Bewertung</label>
|
||||
<div class="star-rating" id="tea-rating">
|
||||
<span class="star" data-value="1">★</span>
|
||||
<span class="star" data-value="2">★</span>
|
||||
<span class="star" data-value="3">★</span>
|
||||
<span class="star" data-value="4">★</span>
|
||||
<span class="star" data-value="5">★</span>
|
||||
</div>
|
||||
<input type="hidden" id="tea-rating-value" value="3">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tea-image-upload">Tee-Foto</label>
|
||||
<input type="file" id="tea-image-upload" accept="image/*">
|
||||
<div id="tea-image-preview" class="image-preview" style="display: none; margin-top: 10px;">
|
||||
<img id="tea-image-preview-img" style="max-width: 150px; max-height: 150px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
|
||||
</div>
|
||||
<input type="hidden" id="tea-image-data" value="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="tea-color">Farbe</label>
|
||||
<input type="color" id="tea-color" value="#8B4513">
|
||||
@ -229,6 +393,24 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Modal -->
|
||||
<div id="import-modal" class="modal">
|
||||
<div class="modal-content" style="max-width: 600px;">
|
||||
<div class="modal-header">
|
||||
<h2>Daten importieren</h2>
|
||||
<button id="close-import-modal" class="close-btn">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Füge deine exportierten TeeTracker-Daten hier ein:</p>
|
||||
<textarea id="import-data-textarea" class="modal-textarea" placeholder="{\n \"teas\": [...],\n \"entries\": [...]\n}"></textarea>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="import-data-btn" class="btn btn-primary">📥 Importieren</button>
|
||||
<button id="cancel-import-btn" class="btn btn-secondary">Abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
||||
320
styles.css
320
styles.css
@ -815,3 +815,323 @@ header p {
|
||||
.organic-badge:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Settings Section */
|
||||
.settings-section {
|
||||
background-color: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
margin-bottom: 15px;
|
||||
color: var(--text-color);
|
||||
border-bottom: 2px solid var(--primary-light);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.settings-section p {
|
||||
color: var(--text-light);
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Status Message */
|
||||
.status-message {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background-color: rgba(40, 167, 69, 0.1);
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-color);
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
color: var(--danger-color);
|
||||
border: 1px solid var(--danger-color);
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background-color: rgba(78, 205, 196, 0.1);
|
||||
color: var(--secondary-color);
|
||||
border: 1px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
/* Status Badge */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-badge.local {
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.connected {
|
||||
background-color: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.disconnected {
|
||||
background-color: var(--danger-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-badge.syncing {
|
||||
background-color: var(--warning-color);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Stats Overview */
|
||||
.stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Modal for Import/Export */
|
||||
.modal-textarea {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
background-color: #f5f5f5;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 12px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.modal-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Background Image Settings */
|
||||
.bg-preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.bg-preview img {
|
||||
max-width: 200px;
|
||||
max-height: 150px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Background Image for App */
|
||||
.app-container {
|
||||
background-image: var(--bg-image, none);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Overlay for better text readability */
|
||||
.app-container::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Star Rating */
|
||||
.star-rating {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.star-rating .star {
|
||||
color: #ccc;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.star-rating .star:hover,
|
||||
.star-rating .star.active {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.star-rating .star:hover ~ .star {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Rating display on tea cards */
|
||||
.rating-display {
|
||||
color: #FFD700;
|
||||
font-size: 0.9rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Rating display on tea cards */
|
||||
.tea-rating-display {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tea-rating-display .star {
|
||||
color: #FFD700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Image Upload Preview */
|
||||
.image-preview {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.image-preview img {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--box-shadow);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Tea card image */
|
||||
.tea-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: var(--border-radius);
|
||||
object-fit: cover;
|
||||
box-shadow: var(--box-shadow);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Tea Timer Styles */
|
||||
.timer-section {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
|
||||
.timer-section h3 {
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.timer-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.timer-display {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: var(--primary-color);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.timer-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.timer-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.timer-btn:hover {
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.timer-btn:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.timer-input {
|
||||
width: 60px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--card-bg);
|
||||
}
|
||||
|
||||
.timer-unit {
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.timer-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.timer-notification {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border-radius: var(--border-radius);
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.timer-notification.success {
|
||||
background-color: rgba(40, 167, 69, 0.2);
|
||||
color: var(--success-color);
|
||||
border: 1px solid var(--success-color);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user