Update app.js

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

.htaccess

@@ -0,0 +1,38 @@
+# TeeTracker .htaccess Configuration
+# Enable PUT and DELETE methods for the data directory
+# Required for file-based storage to work on Apache servers
+
+<IfModule mod_rewrite.c>
+    RewriteEngine On
+    
+    # Allow PUT and DELETE for data directory
+    RewriteCond %{REQUEST_METHOD} ^(PUT|DELETE)$
+    RewriteCond %{REQUEST_URI} ^/data/ [NC]
+    RewriteRule ^ - [L]
+</IfModule>
+
+# Enable all HTTP methods for the data directory
+<Limit GET POST PUT DELETE OPTIONS>
+    Require all granted
+</Limit>
+
+<LimitExcept GET POST PUT DELETE OPTIONS>
+    Require all denied
+</LimitExcept>
+
+# Set proper MIME types for JSON files
+<IfModule mod_mime.c>
+    AddType application/json .json
+</IfModule>
+
+# Disable caching for data files
+<FilesMatch "\.(json|txt)$">
+    <IfModule mod_expires.c>
+        ExpiresActive Off
+    </IfModule>
+    <IfModule mod_headers.c>
+        Header set Cache-Control "no-cache, no-store, must-revalidate"
+        Header set Pragma "no-cache"
+        Header set Expires 0
+    </IfModule>
+</FilesMatch>

README.md

@@ -7,7 +7,7 @@
 [![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)]
+
 
 ---
 
@@ -65,11 +65,10 @@
 - **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
+- **Lokale Dateispeicherung** 💾
+  - Daten werden im `data/`-Verzeichnis gespeichert (falls ein lokaler Server läuft)
+  - Automatischer Fallback auf Browser-Speicher (localStorage)
+  - Export/Import-Funktionen für Datensicherung
 - **Datenverwaltung**
   - 📤 **Daten exportieren** (JSON-Datei herunterladen)
   - 📥 **Daten importieren** (JSON-Datei hochladen)
@@ -112,21 +111,27 @@
    - Folder: `/ (root)` auswählen
 3. Deine App ist dann unter `https://trevor1969.github.io/teatracker/` erreichbar
 
-### Option 3: Mit Nextcloud-Synchronisation (empfohlen!)
+### Option 2: Mit lokalem Server (empfohlen für Dateispeicherung)
 
-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
+1. **Repository klonen** (oder Dateien herunterladen):
+   ```bash
+   git clone https://github.com/trevor1969/teatracker.git
+   cd teatracker
+   ```
 
-**Hinweis:** Aus Sicherheitsgründen musst du dein Passwort manuell eingeben. Es wird nicht in der App gespeichert (nur temporär in sessionStorage).
+2. **Lokalen Server starten**:
+   ```bash
+   # Mit Python 3
+   python -m http.server 8000
+   
+   # Mit Node.js (npx)
+   npx serve
+   ```
+
+3. **App öffnen** im Browser: `http://localhost:8000`
+4. **Fertig!** 🎉 Deine Daten werden automatisch im `data/`-Verzeichnis gespeichert
+
+**Hinweis:** Die App versucht zunächst, Dateien im `data/`-Verzeichnis zu speichern. Falls das nicht funktioniert (z.B. bei direkter Datei-Öffnung ohne Server), fällt sie automatisch auf localStorage zurück.
 
 ---
 
@@ -134,7 +139,7 @@
 
 - **Frontend**: HTML5, CSS3, Vanilla JavaScript (ES6+)
 - **Charts**: [Chart.js](https://www.chartjs.org/) (über CDN)
-- **Cloud-Speicher**: [Nextcloud WebDAV API](https://docs.nextcloud.com/server/latest/developer_manual/third_party/webdav.html)
+- **Lokale Speicherung**: Dateisystem (data/-Verzeichnis) oder Browser localStorage
 - **Lokaler Speicher**: localStorage (Fallback)
 - **Design**: Responsive, Mobile-First, Tee-inspirierte Farben
 
@@ -146,62 +151,67 @@
 teatracker/
 ├── index.html          # Haupt-HTML-Datei mit allen Tabs
 ├── styles.css          # Alle Styles und Design
-├── app.js              # gesamte Anwendungslogik + Nextcloud-Integration
+├── app.js              # gesamte Anwendungslogik + lokale Dateispeicherung
 ├── README.md           # Diese Datei
 └── LICENSE             # MIT License
 ```
 
 ---
 
-## 🌐 Nextcloud-Integration
+## 💾 Lokale Dateispeicherung (Version 4.0)
+
+Ab Version 4.0 werden die Daten lokal im `data/`-Verzeichnis gespeichert, das sich im selben Verzeichnis wie die Programmdateien befindet.
 
 ### Wie es funktioniert
 
-Die App nutzt die **WebDAV-API** von Nextcloud, um Daten als JSON-Dateien zu speichern:
+Die App speichert Daten als JSON-Dateien im lokalen Dateisystem:
 
 ```
-/TeeTracker/
+data/
 ├── teas.json          # Deine Tee-Sorten
 ├── entries.json       # Deine Tracking-Einträge
-└── backup/           # Automatische Backups
+└── backup/           # Manuelle Backups (optional)
     └── teetracker_backup_2024-06-05T10-30-00.json
 ```
 
+### Speichermechanismus
+
+1. **Mit lokalem Server**: Wenn die App über einen lokalen Server (z.B. `python -m http.server`) geöffnet wird, werden die Daten im `data/`-Verzeichnis gespeichert
+2. **Ohne Server**: Falls die App direkt als Datei geöffnet wird, fällt sie automatisch auf Browser-Speicher (localStorage) zurück
+3. **Export/Import**: Daten können jederzeit als JSON-Datei exportiert und importiert werden
+
 ### 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) |
+| **📁 Einfache Dateispeicherung** | Daten liegen direkt bei den Programmdateien |
+| **🔄 Automatische Erkennung** | Erkennt automatisch, ob Dateispeicherung möglich ist |
+| **💾 Fallback auf localStorage** | Funktioniert auch ohne Server |
+| **⚡ Schnell** | Keine externe Abhängigkeiten, einfache JSON-Dateien |
+| **🔒 Privatsphäre** | Alle Daten bleiben lokal auf deinem Gerät |
 
-### Fallback-Mechanismus
+### Daten sichern (Backup)
 
-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**
+**Option 1: Automatisch (Dateisystem)**
+- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
+- Einfach das gesamte `data/`-Verzeichnis sichern
 
-### 🔐 Sicherheitshinweise
+**Option 2: Manuell (Export)**
+1. Gehe zu **Einstellungen → Datenverwaltung**
+2. Klicke auf **📤 Daten exportieren**
+3. Speichere die JSON-Datei an einem sicheren Ort
 
-**WICHTIG:** Aus Sicherheitsgründen wird dein Passwort **NICHT** im Klartext in der App oder im localStorage gespeichert!
+### Daten wiederherstellen (Restore)
 
-- **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
+**Option 1: Automatisch (Dateisystem)**
+- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
+- Starte die App neu
 
-### 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.
+**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
 
 ---
 
@@ -228,9 +238,9 @@ Falls du ein neues Passwort brauchst:
 
 ### Daten sichern (Backup)
 
-**Option 1: Automatisch (Nextcloud)**
-- Die Daten werden automatisch in deiner Nextcloud gespeichert
-- Backups werden im `/TeeTracker/backup/` Verzeichnis erstellt
+**Option 1: Automatisch (Dateisystem)**
+- Die Daten werden automatisch im `data/`-Verzeichnis gespeichert
+- Einfach das gesamte `data/`-Verzeichnis kopieren
 
 **Option 2: Manuell (Export)**
 1. Gehe zu **Einstellungen → Datenverwaltung**
@@ -239,9 +249,9 @@ Falls du ein neues Passwort brauchst:
 
 ### Daten wiederherstellen (Restore)
 
-**Option 1: Automatisch (Nextcloud)**
-- Einfach die App auf einem neuen Gerät öffnen
-- Die Daten werden automatisch von Nextcloud geladen
+**Option 1: Automatisch (Dateisystem)**
+- Kopiere die gesicherten Dateien zurück in das `data/`-Verzeichnis
+- Starte die App neu
 
 **Option 2: Manuell (Import)**
 1. Gehe zu **Einstellungen → Datenverwaltung**
@@ -258,59 +268,46 @@ Falls du von vorne beginnen möchtest:
 
 **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
+### ❌ Dateispeicherung funktioniert nicht
 
 **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)
+- App wird direkt als Datei geöffnet (ohne lokalen Server)
+- Keine Schreibrechte im Verzeichnis
+- Browser-Beschränkungen für Fetch-API
 
 **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
+1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
+2. Öffne die App über `http://localhost:8000`
+3. Prüfe, ob das `data/`-Verzeichnis existiert und beschreibbar ist
+4. Falls nötig: Nutze die Export/Import-Funktionen für manuelles Speichern
 5. Prüfe die Browser-Konsole (F12 → Console) auf Fehler
 
-### ❌ Daten werden nicht synchronisiert
+### ❌ Daten werden nicht gespeichert
 
 **Mögliche Ursachen:**
-- Nextcloud ist offline
-- Browser blockiert die Verbindung
-- Zu viele Anfragen in kurzer Zeit
+- App wird direkt als Datei geöffnet (ohne lokalen Server)
+- Keine Schreibrechte im `data/`-Verzeichnis
+- Browser blockiert Fetch-Anfragen
 
 **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
+1. Starte einen lokalen Server (z.B. `python -m http.server 8000`)
+2. Öffne die App über `http://localhost:8000`
+3. Prüfe die Browser-Konsole auf Fehler
+4. Nutze die Export/Import-Funktionen als Alternative
 
 ### ❌ Daten sind verschwunden
 
 **Keine Sorge!** Die Daten sind an mehreren Orten gespeichert:
-1. **Nextcloud** (falls verbunden)
+1. **Dateisystem** (`data/`-Verzeichnis, falls Server läuft)
 2. **localStorage** (Fallback)
 
 **Lösungen:**
 1. Lade die Seite neu
-2. Prüfe, ob du mit einem anderen Gerät/Browser verbunden bist
+2. Prüfe, ob das `data/`-Verzeichnis existiert
 3. Gehe zu **Einstellungen → Daten exportieren** und sichere deine Daten
 4. Falls nötig: Importiere deine exportierten Daten
 
@@ -337,7 +334,7 @@ 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! ☕🍵
 
 ---
@@ -352,8 +349,8 @@ Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/t
 
 ### 🆕 Neueste Änderungen
 
-- **🌐 Nextcloud-Integration** – Plattformübergreifende Synchronisation via WebDAV
-- **⚙️ Einstellungen-Tab** – Nextcloud-Konfiguration, Daten-Export/Import
+- **💾 Lokale Dateispeicherung** – Daten werden im `data/`-Verzeichnis gespeichert (Version 4.0)
+- **⚙️ Einstellungen-Tab** – Datenverwaltung, Export/Import, Hintergrundbild
 - **🌱 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
@@ -362,6 +359,7 @@ Fragen oder Feedback? Öffne einfach ein [Issue](https://github.com/trevor1969/t
 
 | Version | Datum | Änderungen |
 |---------|-------|-----------|
+| 4.0.0 | Juni 2025 | Lokale Dateispeicherung im data/-Verzeichnis, Nextcloud-Integration entfernt |
 | 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 |

SERVER_SETUP.md

@@ -0,0 +1,193 @@
+# TeeTracker Server Setup
+
+## Problem: Dateispeicherung funktioniert nicht
+
+Die TeeTracker-App versucht, Daten im `data/`-Verzeichnis zu speichern, aber auf den meisten Webservern funktioniert das nicht standardmäßig. Hier sind die Lösungen:
+
+---
+
+## Lösung 1: LocalStorage (Empfohlen für Shared Hosting)
+
+**Funktioniert immer, ohne Server-Konfiguration!**
+
+Die App fällt automatisch auf localStorage zurück, wenn die Dateispeicherung nicht verfügbar ist. 
+- Alle Daten werden im Browser gespeichert
+- Funktioniert auf jedem Webserver
+- Daten sind nur auf dem aktuellen Gerät/Browser verfügbar
+
+**Status prüfen:**
+- Gehe zu "Einstellungen" → "Datenverwaltung"
+- Wenn "Lokaler Modus (localStorage)" angezeigt wird, funktioniert die Dateispeicherung nicht
+- Wenn "Dateispeicherung aktiv" angezeigt wird, funktioniert die Dateispeicherung
+
+---
+
+## Lösung 2: Apache Server (.htaccess)
+
+Falls dein Server Apache verwendet (häufig bei Shared Hosting):
+
+1. **Stelle sicher, dass die `.htaccess`-Datei aktiv ist:**
+   - Die Datei liegt bereits im Hauptverzeichnis
+   - Prüfe, ob `mod_rewrite` aktiviert ist
+   - Kontaktiere deinen Hosting-Anbieter, falls `.htaccess` ignoriert wird
+
+2. **Erlaube PUT und DELETE Methoden:**
+   Die `.htaccess`-Datei enthält bereits die notwendigen Regeln:
+   ```apache
+   <Limit GET POST PUT DELETE OPTIONS>
+       Require all granted
+   </Limit>
+   ```
+
+3. **Setze die richtigen Berechtigungen:**
+   ```bash
+   chmod 755 data/
+   chmod 644 data/.gitkeep
+   ```
+
+4. **Aktiviere die notwendigen Apache-Module:**
+   ```bash
+   a2enmod rewrite
+   a2enmod headers
+   a2enmod expires
+   service apache2 restart
+   ```
+
+---
+
+## Lösung 3: PHP-Backend (Alternative)
+
+Falls dein Server PHP unterstützt, kannst du ein einfaches Backend erstellen:
+
+### 1. Erstelle `save_data.php`:
+```php
+<?php
+header('Content-Type: application/json');
+
+$filename = 'data/' . ($_GET['file'] ?? '');
+$allowed_files = ['teas.json', 'entries.json'];
+
+if (!in_array(basename($filename), $allowed_files)) {
+    http_response_code(403);
+    die(json_encode(['error' => 'Not allowed']));
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+    if (file_exists($filename)) {
+        readfile($filename);
+    } else {
+        echo '[]';
+    }
+} elseif ($_SERVER['REQUEST_METHOD'] === 'PUT' || $_SERVER['REQUEST_METHOD'] === 'POST') {
+    $data = file_get_contents('php://input');
+    file_put_contents($filename, $data);
+    echo json_encode(['success' => true]);
+} elseif ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
+    if (file_exists($filename)) {
+        unlink($filename);
+    }
+    echo json_encode(['success' => true]);
+}
+```
+
+### 2. Ändere die `LocalFileStorage`-Klasse:
+Ersetze die `fetch()`-Aufrufe durch Aufrufe an dein PHP-Skript.
+
+---
+
+## Lösung 4: Node.js/Express Server
+
+Falls du Node.js verwenden kannst:
+
+```javascript
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const app = express();
+
+app.use(express.json());
+app.use(express.static('public'));
+
+// Enable PUT and DELETE for data directory
+app.use('/data', express.raw({ type: '*/*' }));
+
+app.put('/data/:file', (req, res) => {
+    const filePath = path.join(__dirname, 'data', req.params.file);
+    fs.writeFile(filePath, req.body, (err) => {
+        if (err) return res.status(500).send(err.message);
+        res.sendStatus(200);
+    });
+});
+
+app.get('/data/:file', (req, res) => {
+    const filePath = path.join(__dirname, 'data', req.params.file);
+    if (fs.existsSync(filePath)) {
+        res.sendFile(filePath);
+    } else {
+        res.status(404).send('[]');
+    }
+});
+
+app.delete('/data/:file', (req, res) => {
+    const filePath = path.join(__dirname, 'data', req.params.file);
+    if (fs.existsSync(filePath)) {
+        fs.unlink(filePath, (err) => {
+            if (err) return res.status(500).send(err.message);
+            res.sendStatus(200);
+        });
+    } else {
+        res.sendStatus(200);
+    }
+});
+
+app.listen(3000, () => console.log('Server running on port 3000'));
+```
+
+---
+
+## Häufige Probleme und Lösungen
+
+### Problem: "405 Method Not Allowed"
+**Lösung:** Der Server unterstützt PUT/DELETE nicht. Verwende Lösung 2, 3 oder 4.
+
+### Problem: "403 Forbidden"
+**Lösung:** Die Berechtigungen sind falsch. Führe aus:
+```bash
+chmod 755 data/
+chmod 644 data/*
+```
+
+### Problem: "404 Not Found" für data/-Dateien
+**Lösung:** Das `data/`-Verzeichnis existiert nicht oder die Dateien sind nicht hochgeladen.
+
+### Problem: CORS-Fehler
+**Lösung:** Falls du die App von einer anderen Domain lädst, musst du CORS-Header setzen:
+```apache
+Header set Access-Control-Allow-Origin "*"
+Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
+Header set Access-Control-Allow-Headers "Content-Type"
+```
+
+---
+
+## Testen der Dateispeicherung
+
+1. Öffne die Browser-Konsole (F12 → Console)
+2. Gib ein:
+```javascript
+fetch('data/test.txt', { method: 'PUT', body: 'test' })
+  .then(r => r.text())
+  .then(console.log)
+  .catch(console.error);
+```
+3. Wenn du eine erfolgreiche Antwort erhältst, funktioniert die Dateispeicherung
+
+---
+
+## Empfehlung
+
+**Für Shared Hosting:** Verwende einfach localStorage (Lösung 1). Die Daten werden im Browser gespeichert und funktionieren ohne Server-Konfiguration.
+
+**Für eigene Server:** Konfiguriere Apache mit der `.htaccess`-Datei (Lösung 2) oder verwende das PHP-Backend (Lösung 3).
+
+**Für Entwickler:** Verwende den Node.js-Server (Lösung 4) oder einen lokalen Entwicklungsserver wie `python -m http.server`.

data/.gitkeep

@@ -0,0 +1,2 @@
+# This file ensures the data directory exists and is tracked by git
+# TeeTracker stores teas.json and entries.json in this directory

index.html

@@ -43,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>
@@ -127,53 +147,12 @@
             <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>
+                    <p>Daten werden im <code>data/</code>-Verzeichnis gespeichert (falls ein lokaler Server läuft) oder im Browser-Speicher (localStorage).</p>
                     
                     <div class="form-group">
-                        <label>Synchronisationsstatus</label>
+                        <label>Speicherstatus</label>
                         <div id="sync-status" class="status-badge">Lokaler Modus</div>
                     </div>
                     
@@ -181,7 +160,7 @@
                         <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>
                 
                 <div class="settings-section">
@@ -214,7 +193,6 @@
                     </div>
                 </div>
 
-                    </div>
                 </div>
                 
                 <div class="settings-section">
@@ -386,13 +364,16 @@
                     <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" onclick="window.app.handleImportData()">📥 Importieren</button>
-                    <button id="cancel-import-btn" class="btn btn-secondary" onclick="window.app.closeImportModal()">Abbrechen</button>
+                    <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>
 
+    <!-- Toast Container -->
+    <div id="toast-container" class="toast-container"></div>
+
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="app.js"></script>
 </body>

styles.css

@@ -1036,3 +1036,102 @@ header p {
     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; }
+}