Fix: Korrigiert Aufruf von migrateToDataDirectory - muss auf nextcloudStorage-Instanz aufgerufen werden, nicht auf TeeTracker-Instanz

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>

README.md

@@ -7,14 +7,15 @@
 [![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)]
+[![Nextcloud](https://img.shields.io/badge/Nextcloud-0082C9?logo=nextcloud&logoColor=white)]
 
 ---
 
 ## 📸 Screenshots
 
-| Dashboard | Tee-Sorten | Tracken | Statistiken |
+| Dashboard | Tee-Sorten | Tracken | Statistiken | Einstellungen |
-|-----------|------------|---------|-------------|
+|-----------|------------|---------|-------------|--------------|
-| ![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) |
+| ![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) | ![Einstellungen](https://via.placeholder.com/300x200/6c757d/FFFFFF?text=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!)
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](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
+├── app.js              # gesamte Anwendungslogik + Nextcloud-Integration
-└── README.md       # Diese Datei
+├── 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](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 |
+| ![#28a745](https://via.placeholder.com/20/28a745/000000?text=+) `#28a745` | Erfolg (Grün) |
 
 ### Responsive Design
 - ✅ Desktop (ab 1200px)
@@ -143,35 +226,93 @@ teatracker/
 
 ## 💡 Tipps & Tricks
 
-### Daten sichern
+### Daten sichern (Backup)
-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)
+**Option 1: Automatisch (Nextcloud)**
-2. Folgenden Code ausführen:
+- Die Daten werden automatisch in deiner Nextcloud gespeichert
-   ```javascript
+- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt
-   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
+**Option 2: Manuell (Export)**
-```javascript
+1. Gehe zu **Einstellungen → Datenverwaltung**
-const backupTeas = [/* deine gesicherten Tees */];
+2. Klicke auf **📤 Daten exportieren**
-const backupEntries = [/* deine gesicherten Einträge */];
+3. Speichere die JSON-Datei an einem sicheren Ort
-localStorage.setItem('teatracker_teas', JSON.stringify(backupTeas));
+
-localStorage.setItem('teatracker_entries', JSON.stringify(backupEntries));
+### Daten wiederherstellen (Restore)
-location.reload();
+
-```
+**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
+1. Gehe zu **Einstellungen → Datenverwaltung**
-localStorage.removeItem('teatracker_teas');
+2. Klicke auf **🗑️ Alle Daten löschen**
-localStorage.removeItem('teatracker_entries');
+3. Bestätige die Aktion
-location.reload();
+
-```
+**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*

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">
@@ -100,6 +101,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 +123,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 +323,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 +373,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">&times;</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>

styles.css

@@ -815,3 +815,224 @@ 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;
+}