Merge pull request #1 from trevor1969/v3.0

v3.0: Tea-Timer Feature

app.js

@@ -8,6 +8,9 @@ const STORAGE_KEY_TEAS = 'teatracker_teas';
 const STORAGE_KEY_ENTRIES = 'teatracker_entries';
 const STORAGE_KEY_NC_CONFIG = 'teatracker_nextcloud_config';
 
+// Data directory for Nextcloud storage
+const DATA_DIRECTORY = 'data/';
+
 // ============================================
 // Nextcloud Storage Integration
 // ============================================
@@ -63,12 +66,44 @@ class NextcloudStorage {
         }
     }
 
+    
+    // Migrate old files from root to data/ directory
+    async migrateToDataDirectory() {
+        try {
+            // Check if old teas.json exists in root
+            const oldTeasUrl = this.getFileUrl('teas.json');
+            const oldTeasResponse = await fetch(oldTeasUrl, {
+                headers: { 'Authorization': this.authHeader }
+            });
+            
+            if (oldTeasResponse.ok) {
+                const oldTeas = await oldTeasResponse.json();
+                await this.saveFile(DATA_DIRECTORY + 'teas.json', oldTeas);
+                console.log('Migrated teas.json to data/ directory');
+            }
+            
+            // Check if old entries.json exists in root
+            const oldEntriesUrl = this.getFileUrl('entries.json');
+            const oldEntriesResponse = await fetch(oldEntriesUrl, {
+                headers: { 'Authorization': this.authHeader }
+            });
+            
+            if (oldEntriesResponse.ok) {
+                const oldEntries = await oldEntriesResponse.json();
+                await this.saveFile(DATA_DIRECTORY + 'entries.json', oldEntries);
+                console.log('Migrated entries.json to data/ directory');
+            }
+        } catch (error) {
+            console.log('No old files to migrate or migration failed:', error.message);
+        }
+    }
     async ensureDirectory() {
         try {
             const response = await fetch(this.getDirectoryUrl(), {
                 method: 'MKCOL',
                 headers: { 'Authorization': this.authHeader }
             });
+            await this.ensureSubDirectory('data');
             await this.ensureSubDirectory('backup');
             return response.ok || response.status === 405;
         } catch (error) {
@@ -100,7 +135,8 @@ class NextcloudStorage {
 
             if (response.ok) {
                 const text = await response.text();
-                return text ? JSON.parse(text) : null;
+                // Return empty array if file is empty, otherwise parse JSON
+                return text.trim() === '' ? [] : (text ? JSON.parse(text) : null);
             } else if (response.status === 404) {
                 return null;
             }
@@ -144,6 +180,7 @@ class NextcloudStorage {
 
     async createBackup(backupName, teas, entries) {
         try {
+            await this.ensureSubDirectory('data');
             await this.ensureSubDirectory('backup');
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const backupData = { timestamp, teas, entries };
@@ -185,11 +222,23 @@ class TeeTracker {
         this.entries = [];
         this.currentTeaId = null;
         this.charts = {};
+        this.currentBgImage = null;
+        
+        // Tea Timer
+        this.timer = null;
+        this.timerSeconds = 180; // 3 minutes in seconds
+        this.timerRunning = false;
+        this.timerPaused = false;
+        this.remainingSeconds = 180;
         
         // Initialize
         this.initStorage();
+        this.setupEventListeners();
+        this.setupTimerListeners();
         this.loadData().then(() => {
-            this.init();
+            this.renderAll();
+            this.initCharts();
+            this.updateSettingsStats();
         });
     }
     
@@ -237,23 +286,57 @@ class TeeTracker {
             // Try to load from Nextcloud first
             await this.nextcloudStorage.ensureDirectory();
             
-            const teas = await this.nextcloudStorage.loadFile('teas.json');
-            const entries = await this.nextcloudStorage.loadFile('entries.json');
+            // Check if old files exist in root directory and migrate to data/ directory
+            await this.nextcloudStorage.migrateToDataDirectory();
             
+            const teas = await this.nextcloudStorage.loadFile(DATA_DIRECTORY + 'teas.json');
+            const entries = await this.nextcloudStorage.loadFile(DATA_DIRECTORY + 'entries.json');
+            
+            // Always load from localStorage first as backup
+            const localTeas = localStorage.getItem(STORAGE_KEY_TEAS);
+            const localEntries = localStorage.getItem(STORAGE_KEY_ENTRIES);
+            
+            // Load from Nextcloud if available, otherwise use local data
             if (teas) {
                 this.teas = teas.map(tea => ({
                     ...tea,
-                    organic: tea.organic !== undefined ? tea.organic : false
+                    organic: tea.organic !== undefined ? tea.organic : false,
+                    rating: tea.rating !== undefined ? tea.rating : 3
                 }));
+            } else if (localTeas) {
+                // Nextcloud has no teas, use local data
+                try {
+                    this.teas = JSON.parse(localTeas).map(tea => ({
+                        ...tea,
+                        organic: tea.organic !== undefined ? tea.organic : false,
+                        rating: tea.rating !== undefined ? tea.rating : 3
+                    }));
+                } catch (error) {
+                    console.error('Error loading local teas:', error);
+                    this.teas = [];
+                }
+            } else {
+                this.teas = [];
             }
             
             if (entries) {
-                this.entries = entries;
+                this.entries = entries.map(entry => ({
+                    ...entry,
+                    teaspoons: entry.teaspoons !== undefined ? entry.teaspoons : 1
+                }));
+            } else if (localEntries) {
+                // Nextcloud has no entries, use local data
+                try {
+                    this.entries = JSON.parse(localEntries).map(entry => ({
+                        ...entry,
+                        teaspoons: entry.teaspoons !== undefined ? entry.teaspoons : 1
+                    }));
+                } catch (error) {
+                    console.error('Error loading local entries:', error);
+                    this.entries = [];
                 }
-            
-            // If Nextcloud loading failed, fall back to localStorage
-            if (!teas || !entries) {
-                this.loadFromLocalStorage();
+            } else {
+                this.entries = [];
             }
         } else {
             // Load from localStorage
@@ -269,7 +352,8 @@ class TeeTracker {
             try {
                 this.teas = JSON.parse(teasData).map(tea => ({
                     ...tea,
-                    organic: tea.organic !== undefined ? tea.organic : false
+                    organic: tea.organic !== undefined ? tea.organic : false,
+                    rating: tea.rating !== undefined ? tea.rating : 3
                 }));
             } catch (error) {
                 this.teas = [];
@@ -278,7 +362,10 @@ class TeeTracker {
         
         if (entriesData) {
             try {
-                this.entries = JSON.parse(entriesData);
+                this.entries = JSON.parse(entriesData).map(entry => ({
+                    ...entry,
+                    teaspoons: entry.teaspoons !== undefined ? entry.teaspoons : 1
+                }));
             } catch (error) {
                 this.entries = [];
             }
@@ -294,8 +381,8 @@ class TeeTracker {
                 await this.nextcloudStorage.ensureDirectory();
                 
                 // Save to Nextcloud
-                const teasSaved = await this.nextcloudStorage.saveFile('teas.json', this.teas);
-                const entriesSaved = await this.nextcloudStorage.saveFile('entries.json', this.entries);
+                const teasSaved = await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'teas.json', this.teas);
+                const entriesSaved = await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'entries.json', this.entries);
                 
                 // Also save locally as backup
                 this.saveToLocalStorage();
@@ -373,6 +460,8 @@ class TeeTracker {
             description: tea.description || '',
             color: tea.color || '#8B4513',
             organic: tea.organic || false,
+            rating: tea.rating || 3,
+            image: tea.image || '',
             createdAt: new Date().toISOString()
         };
         this.teas.push(newTea);
@@ -412,6 +501,7 @@ class TeeTracker {
             date: entry.date,
             time: entry.time || '',
             amount: parseInt(entry.amount) || 1,
+            teaspoons: entry.teaspoons ? parseFloat(entry.teaspoons) : 1,
             notes: entry.notes || '',
             createdAt: new Date().toISOString()
         };
@@ -552,7 +642,8 @@ class TeeTracker {
     // ============================================
     
     init() {
-        this.setupEventListeners();
+        // Initialization is now handled in constructor
+        // This method is kept for backward compatibility
         this.renderAll();
         this.initCharts();
         this.updateSettingsStats();
@@ -569,6 +660,23 @@ class TeeTracker {
             document.getElementById('add-tea-btn').addEventListener('click', () => this.openTeaModal());
         }
         
+        // Event delegation for tea action buttons (edit/delete)
+        const teasListContainer = document.getElementById('teas-list');
+        if (teasListContainer) {
+            teasListContainer.addEventListener('click', (e) => {
+                const editBtn = e.target.closest('.tea-edit-btn');
+                const deleteBtn = e.target.closest('.tea-delete-btn');
+                
+                if (editBtn) {
+                    const teaId = editBtn.dataset.teaId;
+                    if (teaId) this.editTea(teaId);
+                } else if (deleteBtn) {
+                    const teaId = deleteBtn.dataset.teaId;
+                    if (teaId) this.showDeleteTeaConfirm(teaId);
+                }
+            });
+        }
+        
         // Tea modal
         if (document.getElementById('close-modal')) {
             document.getElementById('close-modal').addEventListener('click', () => this.closeTeaModal());
@@ -580,6 +688,18 @@ class TeeTracker {
             document.getElementById('delete-tea-btn').addEventListener('click', () => this.handleDeleteTea());
         }
         
+        // Star rating for tea form
+        const teaRating = document.getElementById('tea-rating');
+        if (teaRating) {
+            teaRating.addEventListener('click', (e) => this.handleStarRatingClick(e));
+        }
+        
+        // Tea image upload
+        const teaImageUpload = document.getElementById('tea-image-upload');
+        if (teaImageUpload) {
+            teaImageUpload.addEventListener('change', (e) => this.handleImageUpload(e));
+        }
+        
         // Confirm modal
         if (document.getElementById('close-confirm')) {
             document.getElementById('close-confirm').addEventListener('click', () => this.closeConfirmModal());
@@ -625,8 +745,44 @@ class TeeTracker {
             });
         }
         
+        // Background image settings
+        this.setupBackgroundListeners();
+        
         // Nextcloud settings
         this.setupNextcloudListeners();
+        
+        // Tea Timer controls
+        this.setupTimerListeners();
+    }
+    
+    setupTimerListeners() {
+        // Timer control buttons
+        const startBtn = document.getElementById('timer-start');
+        const pauseBtn = document.getElementById('timer-pause');
+        const resetBtn = document.getElementById('timer-reset');
+        const decreaseBtn = document.getElementById('timer-decrease');
+        const increaseBtn = document.getElementById('timer-increase');
+        const timerInput = document.getElementById('timer-input');
+        
+        if (startBtn) {
+            startBtn.addEventListener('click', () => this.startTimer());
+        }
+        if (pauseBtn) {
+            pauseBtn.addEventListener('click', () => this.pauseTimer());
+        }
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => this.resetTimer());
+        }
+        if (decreaseBtn) {
+            decreaseBtn.addEventListener('click', () => this.decreaseTimer());
+        }
+        if (increaseBtn) {
+            increaseBtn.addEventListener('click', () => this.increaseTimer());
+        }
+        if (timerInput) {
+            timerInput.addEventListener('change', (e) => this.updateTimerFromInput(e));
+            timerInput.addEventListener('input', (e) => this.validateTimerInput(e));
+        }
     }
     
     setupNextcloudListeners() {
@@ -717,6 +873,111 @@ class TeeTracker {
         }
     }
     
+    setupBackgroundListeners() {
+        // Background image upload
+        const bgUpload = document.getElementById('bg-image-upload');
+        if (bgUpload) {
+            bgUpload.addEventListener('change', (e) => this.handleBackgroundUpload(e));
+        }
+        
+        // Background enable toggle
+        const bgEnabled = document.getElementById('bg-enabled');
+        if (bgEnabled) {
+            bgEnabled.addEventListener('change', () => this.toggleBackground());
+        }
+        
+        // Save background button
+        const saveBgBtn = document.getElementById('save-bg');
+        if (saveBgBtn) {
+            saveBgBtn.addEventListener('click', () => this.saveBackgroundSettings());
+        }
+        
+        // Remove background button
+        const removeBgBtn = document.getElementById('remove-bg');
+        if (removeBgBtn) {
+            removeBgBtn.addEventListener('click', () => this.removeBackground());
+        }
+        
+        // Load saved background settings
+        this.loadBackgroundSettings();
+    }
+    
+    handleBackgroundUpload(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+        
+        const preview = document.getElementById('bg-preview-img');
+        const previewContainer = document.getElementById('bg-image-preview');
+        const removeBtn = document.getElementById('remove-bg');
+        
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                preview.src = event.target.result;
+                previewContainer.style.display = 'block';
+                removeBtn.style.display = 'inline-flex';
+                this.currentBgImage = event.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    
+    toggleBackground() {
+        const enabled = document.getElementById('bg-enabled').checked;
+        if (enabled && this.currentBgImage) {
+            document.documentElement.style.setProperty('--bg-image', `url("${this.currentBgImage}")`);
+        } else {
+            document.documentElement.style.setProperty('--bg-image', 'none');
+        }
+    }
+    
+    saveBackgroundSettings() {
+        const enabled = document.getElementById('bg-enabled').checked;
+        const bgImage = this.currentBgImage;
+        
+        if (enabled && bgImage) {
+            localStorage.setItem('teatracker_bg_enabled', 'true');
+            localStorage.setItem('teatracker_bg_image', bgImage);
+            this.showToast('Hintergrundbild gespeichert!', 'success');
+        } else {
+            localStorage.removeItem('teatracker_bg_enabled');
+            localStorage.removeItem('teatracker_bg_image');
+            this.showToast('Hintergrundbild deaktiviert!', 'success');
+        }
+        this.toggleBackground();
+    }
+    
+    removeBackground() {
+        this.currentBgImage = null;
+        document.getElementById('bg-preview-img').src = '';
+        document.getElementById('bg-image-preview').style.display = 'none';
+        document.getElementById('remove-bg').style.display = 'none';
+        document.getElementById('bg-enabled').checked = false;
+        this.toggleBackground();
+    }
+    
+    loadBackgroundSettings() {
+        this.currentBgImage = localStorage.getItem('teatracker_bg_image');
+        const enabled = localStorage.getItem('teatracker_bg_enabled') === 'true';
+        
+        if (this.currentBgImage) {
+            document.getElementById('bg-enabled').checked = enabled;
+            if (enabled) {
+                document.documentElement.style.setProperty('--bg-image', `url("${this.currentBgImage}")`);
+            }
+            
+            // Show preview
+            const preview = document.getElementById('bg-preview-img');
+            const previewContainer = document.getElementById('bg-image-preview');
+            const removeBtn = document.getElementById('remove-bg');
+            if (preview && previewContainer && removeBtn) {
+                preview.src = this.currentBgImage;
+                previewContainer.style.display = 'block';
+                removeBtn.style.display = 'inline-flex';
+            }
+        }
+    }
+    
     // ============================================
     // Nextcloud Functions
     // ============================================
@@ -778,30 +1039,6 @@ class TeeTracker {
                     return;
                 }
                 
-                // Load existing data from localStorage before switching to Nextcloud
-                // This prevents data loss when connecting to Nextcloud for the first time
-                const existingTeas = localStorage.getItem(STORAGE_KEY_TEAS);
-                const existingEntries = localStorage.getItem(STORAGE_KEY_ENTRIES);
-                
-                if (existingTeas) {
-                    try {
-                        this.teas = JSON.parse(existingTeas).map(tea => ({
-                            ...tea,
-                            organic: tea.organic !== undefined ? tea.organic : false
-                        }));
-                    } catch (error) {
-                        console.error('Error loading existing teas:', error);
-                    }
-                }
-                
-                if (existingEntries) {
-                    try {
-                        this.entries = JSON.parse(existingEntries);
-                    } catch (error) {
-                        console.error('Error loading existing entries:', error);
-                    }
-                }
-                
                 // Save config WITHOUT password for security
                 // Password will be requested each time or stored in sessionStorage
                 const config = { baseUrl: url, username, path };
@@ -814,8 +1051,38 @@ class TeeTracker {
                 this.nextcloudStorage = ncStorage;
                 this.useNextcloud = true;
                 
-                // Save current data to Nextcloud
+                // Load data from Nextcloud first (this is the critical fix!)
+                // This will automatically fall back to localStorage if Nextcloud has no data
+                await this.loadData();
+                
+                // Only save to Nextcloud if we actually have data to save
+                // This prevents overwriting existing Nextcloud data with empty arrays
+                if (this.teas.length > 0 || this.entries.length > 0) {
                     await this.saveData();
+                } else {
+                    // No data to save, but check if Nextcloud has existing data
+                    const existingTeas = await ncStorage.loadFile(DATA_DIRECTORY + 'teas.json');
+                    const existingEntries = await ncStorage.loadFile(DATA_DIRECTORY + 'entries.json');
+                    
+                    // If Nextcloud has data, keep it and load it
+                    if (existingTeas || existingEntries) {
+                        if (existingTeas) {
+                            this.teas = existingTeas.map(tea => ({
+                                ...tea,
+                                organic: tea.organic !== undefined ? tea.organic : false,
+                                rating: tea.rating !== undefined ? tea.rating : 3
+                            }));
+                        }
+                        if (existingEntries) {
+                            this.entries = existingEntries.map(entry => ({
+                                ...entry,
+                                teaspoons: entry.teaspoons !== undefined ? entry.teaspoons : 1
+                            }));
+                        }
+                        // Don't save, just use the existing Nextcloud data
+                    }
+                    // If Nextcloud has no data and we have no data, nothing to do
+                }
                 
                 this.showStatusMessage('✅ Konfiguration gespeichert und Daten synchronisiert!', 'success');
             } else {
@@ -938,8 +1205,8 @@ class TeeTracker {
         localStorage.removeItem(STORAGE_KEY_ENTRIES);
         
         if (this.useNextcloud && this.nextcloudStorage) {
-            await this.nextcloudStorage.saveFile('teas.json', []);
-            await this.nextcloudStorage.saveFile('entries.json', []);
+            await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'teas.json', []);
+            await this.nextcloudStorage.saveFile(DATA_DIRECTORY + 'entries.json', []);
         }
         
         this.closeConfirmModal();
@@ -1059,7 +1326,7 @@ class TeeTracker {
                         <div class="activity-tea">${tea ? tea.name : 'Unbekannter Tee'} ${tea && tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
                         <div class="activity-details">${formattedDate} ${formattedTime ? `um ${formattedTime}` : ''}</div>
                     </div>
-                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}</div>
+                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}${entry.teaspoons ? ` (${entry.teaspoons} TL)` : ''}</div>
                 </div>
             `;
         }).join('');
@@ -1087,16 +1354,20 @@ class TeeTracker {
         container.innerHTML = this.teas.map(tea => `
             <div class="tea-card" data-id="${tea.id}">
                 <div class="tea-card-header">
+                    <div>
+                        ${tea.image ? `<img src="${tea.image}" class="tea-image" alt="${tea.name}">` : ''}
                         <div>
                             <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                            <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
                             <span class="tea-type">${tea.type}</span>
                         </div>
                     </div>
+                </div>
                 ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
                 ${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
                 <div class="tea-actions">
-                    <button class="tea-action-btn tea-edit-btn" onclick="window.app.editTea('${tea.id}')">Bearbeiten</button>
-                    <button class="tea-action-btn tea-delete-btn" onclick="window.app.showDeleteTeaConfirm('${tea.id}')">Löschen</button>
+                    <button class="tea-action-btn tea-edit-btn" data-tea-id="${tea.id}" data-action="edit">Bearbeiten</button>
+                    <button class="tea-action-btn tea-delete-btn" data-tea-id="${tea.id}" data-action="delete">Löschen</button>
                 </div>
             </div>
         `).join('');
@@ -1131,16 +1402,20 @@ class TeeTracker {
         container.innerHTML = filteredTeas.map(tea => `
             <div class="tea-card" data-id="${tea.id}">
                 <div class="tea-card-header">
+                    <div>
+                        ${tea.image ? `<img src="${tea.image}" class="tea-image" alt="${tea.name}">` : ''}
                         <div>
                             <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                            <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
                             <span class="tea-type">${tea.type}</span>
                         </div>
                     </div>
+                </div>
                 ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
                 ${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
                 <div class="tea-actions">
-                    <button class="tea-action-btn tea-edit-btn" onclick="window.app.editTea('${tea.id}')">Bearbeiten</button>
-                    <button class="tea-action-btn tea-delete-btn" onclick="window.app.showDeleteTeaConfirm('${tea.id}')">Löschen</button>
+                    <button class="tea-action-btn tea-edit-btn" data-tea-id="${tea.id}" data-action="edit">Bearbeiten</button>
+                    <button class="tea-action-btn tea-delete-btn" data-tea-id="${tea.id}" data-action="delete">Löschen</button>
                 </div>
             </div>
         `).join('');
@@ -1164,6 +1439,17 @@ class TeeTracker {
                 document.getElementById('tea-description').value = tea.description || '';
                 document.getElementById('tea-color').value = tea.color || '#8B4513';
                 document.getElementById('tea-organic').checked = tea.organic || false;
+                document.getElementById('tea-rating-value').value = tea.rating || 3;
+                this.renderStarRating(tea.rating || 3, 'tea-rating');
+                if (tea.image) {
+                    document.getElementById('tea-image-data').value = tea.image;
+                    document.getElementById('tea-image-preview-img').src = tea.image;
+                    document.getElementById('tea-image-preview').style.display = 'block';
+                } else {
+                    document.getElementById('tea-image-data').value = '';
+                    document.getElementById('tea-image-preview-img').src = '';
+                    document.getElementById('tea-image-preview').style.display = 'none';
+                }
                 deleteBtn.style.display = 'inline-flex';
                 this.currentTeaId = tea.id;
             }
@@ -1171,6 +1457,11 @@ class TeeTracker {
             document.getElementById('modal-title').textContent = 'Tee hinzufügen';
             form.reset();
             document.getElementById('tea-id').value = '';
+            document.getElementById('tea-rating-value').value = 3;
+            this.renderStarRating(3, 'tea-rating');
+            document.getElementById('tea-image-data').value = '';
+            document.getElementById('tea-image-preview-img').src = '';
+            document.getElementById('tea-image-preview').style.display = 'none';
             deleteBtn.style.display = 'none';
             this.currentTeaId = null;
         }
@@ -1197,7 +1488,9 @@ class TeeTracker {
             brand: document.getElementById('tea-brand').value.trim(),
             description: document.getElementById('tea-description').value.trim(),
             color: document.getElementById('tea-color').value,
-            organic: document.getElementById('tea-organic').checked
+            organic: document.getElementById('tea-organic').checked,
+            rating: parseInt(document.getElementById('tea-rating-value').value) || 3,
+            image: document.getElementById('tea-image-data').value || ''
         };
         
         const teaId = document.getElementById('tea-id').value;
@@ -1218,6 +1511,63 @@ class TeeTracker {
         this.updateSettingsStats();
     }
     
+    handleStarRatingClick(e) {
+        const star = e.target.closest('.star');
+        if (!star) return;
+        
+        const value = parseInt(star.dataset.value);
+        const ratingContainer = document.getElementById('tea-rating');
+        const ratingInput = document.getElementById('tea-rating-value');
+        
+        if (ratingContainer && ratingInput) {
+            // Update active stars
+            ratingContainer.querySelectorAll('.star').forEach((s, index) => {
+                s.classList.toggle('active', index < value);
+            });
+            
+            // Set the hidden input value
+            ratingInput.value = value;
+        }
+    }
+    
+    handleImageUpload(e) {
+        const file = e.target.files[0];
+        if (!file || !file.type.startsWith('image/')) return;
+        
+        const preview = document.getElementById('tea-image-preview-img');
+        const previewContainer = document.getElementById('tea-image-preview');
+        const imageDataInput = document.getElementById('tea-image-data');
+        
+        if (preview && previewContainer && imageDataInput) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                preview.src = event.target.result;
+                previewContainer.style.display = 'block';
+                imageDataInput.value = event.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    
+    renderStarRating(rating, containerId) {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        
+        const stars = [];
+        for (let i = 1; i <= 5; i++) {
+            stars.push(`<span class="star ${i <= rating ? 'active' : ''}" data-value="${i}">★</span>`);
+        }
+        container.innerHTML = stars.join('');
+    }
+    
+    renderStarRatingStatic(rating) {
+        const stars = [];
+        for (let i = 1; i <= 5; i++) {
+            stars.push(`<span class="star ${i <= rating ? 'active' : ''}">★</span>`);
+        }
+        return stars.join('');
+    }
+    
     editTea(teaId) {
         this.openTeaModal(teaId);
     }
@@ -1306,6 +1656,7 @@ class TeeTracker {
         const date = document.getElementById('track-date').value;
         const time = document.getElementById('track-time').value;
         const amount = document.getElementById('track-amount').value;
+        const teaspoons = document.getElementById('track-teaspoons').value;
         const notes = document.getElementById('track-notes').value.trim();
         
         if (!teaId || !date || !amount) {
@@ -1318,6 +1669,7 @@ class TeeTracker {
             date,
             time,
             amount,
+            teaspoons,
             notes
         };
         
@@ -1373,7 +1725,7 @@ class TeeTracker {
                         <div class="activity-tea">${tea ? tea.name : 'Unbekannter Tee'} ${tea && tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</div>
                         <div class="activity-details">${formattedDate} ${formattedTime ? `um ${formattedTime}` : ''}</div>
                     </div>
-                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}</div>
+                    <div class="activity-amount">${entry.amount} Tasse${entry.amount > 1 ? 'n' : ''}${entry.teaspoons ? ` (${entry.teaspoons} TL)` : ''}</div>
                 </div>
             `;
         }).join('');
@@ -1579,6 +1931,172 @@ class TeeTracker {
     }
 }
 
+// ============================================
+// Tea Timer Methods
+// ============================================
+
+TeeTracker.prototype.startTimer = function() {
+    if (this.timerRunning && !this.timerPaused) return;
+    
+    if (this.timerPaused) {
+        // Resume from paused state
+        this.timerPaused = false;
+    } else {
+        // Start new timer
+        const input = document.getElementById('timer-input');
+        let minutes = parseInt(input.value) || 3;
+        
+        // Clamp to valid range
+        minutes = Math.max(1, Math.min(15, minutes));
+        this.timerSeconds = minutes * 60;
+        this.remainingSeconds = this.timerSeconds;
+        input.value = minutes;
+    }
+    
+    this.timerRunning = true;
+    this.updateTimerButtons();
+    this.updateTimerDisplay();
+    
+    this.timer = setInterval(() => {
+        this.remainingSeconds--;
+        this.updateTimerDisplay();
+        
+        if (this.remainingSeconds <= 0) {
+            this.stopTimer();
+            this.showTimerNotification('⏰ Timer abgelaufen! Zeit für deinen Tee!');
+            
+            // Play notification sound if possible
+            if (typeof Audio !== 'undefined') {
+                try {
+                    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                    const oscillator = audioContext.createOscillator();
+                    const gainNode = audioContext.createGain();
+                    oscillator.connect(gainNode);
+                    gainNode.connect(audioContext.destination);
+                    oscillator.frequency.value = 800;
+                    oscillator.type = 'sine';
+                    gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+                    oscillator.start(audioContext.currentTime);
+                    oscillator.stop(audioContext.currentTime + 0.5);
+                } catch (e) {
+                    console.log('Audio notification not supported');
+                }
+            }
+        }
+    }, 1000);
+};
+
+TeeTracker.prototype.pauseTimer = function() {
+    if (!this.timerRunning || this.timerPaused) return;
+    
+    this.timerPaused = true;
+    this.timerRunning = false;
+    this.updateTimerButtons();
+    
+    if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+};
+
+TeeTracker.prototype.stopTimer = function() {
+    if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+    this.timerRunning = false;
+    this.timerPaused = false;
+    this.updateTimerButtons();
+};
+
+TeeTracker.prototype.resetTimer = function() {
+    this.stopTimer();
+    const input = document.getElementById('timer-input');
+    const minutes = parseInt(input.value) || 3;
+    this.timerSeconds = Math.max(1, Math.min(15, minutes)) * 60;
+    this.remainingSeconds = this.timerSeconds;
+    this.updateTimerDisplay();
+    this.updateTimerButtons();
+};
+
+TeeTracker.prototype.decreaseTimer = function() {
+    const input = document.getElementById('timer-input');
+    let minutes = parseInt(input.value) || 3;
+    minutes = Math.max(1, minutes - 1);
+    input.value = minutes;
+    this.timerSeconds = minutes * 60;
+    this.remainingSeconds = this.timerSeconds;
+    this.updateTimerDisplay();
+};
+
+TeeTracker.prototype.increaseTimer = function() {
+    const input = document.getElementById('timer-input');
+    let minutes = parseInt(input.value) || 3;
+    minutes = Math.min(15, minutes + 1);
+    input.value = minutes;
+    this.timerSeconds = minutes * 60;
+    this.remainingSeconds = this.timerSeconds;
+    this.updateTimerDisplay();
+};
+
+TeeTracker.prototype.updateTimerFromInput = function(e) {
+    let minutes = parseInt(e.target.value) || 3;
+    minutes = Math.max(1, Math.min(15, minutes));
+    e.target.value = minutes;
+    this.timerSeconds = minutes * 60;
+    this.remainingSeconds = this.timerSeconds;
+    this.updateTimerDisplay();
+};
+
+TeeTracker.prototype.validateTimerInput = function(e) {
+    let value = e.target.value;
+    // Remove non-numeric characters
+    value = value.replace(/\D/g, '');
+    if (value === '') value = '3';
+    let minutes = parseInt(value) || 3;
+    minutes = Math.max(1, Math.min(15, minutes));
+    e.target.value = minutes;
+};
+
+TeeTracker.prototype.updateTimerDisplay = function() {
+    const display = document.getElementById('timer-display');
+    if (!display) return;
+    
+    const minutes = Math.floor(this.remainingSeconds / 60);
+    const seconds = this.remainingSeconds % 60;
+    display.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+};
+
+TeeTracker.prototype.updateTimerButtons = function() {
+    const startBtn = document.getElementById('timer-start');
+    const pauseBtn = document.getElementById('timer-pause');
+    const resetBtn = document.getElementById('timer-reset');
+    const decreaseBtn = document.getElementById('timer-decrease');
+    const increaseBtn = document.getElementById('timer-increase');
+    const timerInput = document.getElementById('timer-input');
+    
+    if (startBtn) startBtn.disabled = this.timerRunning && !this.timerPaused;
+    if (pauseBtn) pauseBtn.disabled = !this.timerRunning || this.timerPaused;
+    if (resetBtn) resetBtn.disabled = false;
+    if (decreaseBtn) decreaseBtn.disabled = this.timerRunning && !this.timerPaused;
+    if (increaseBtn) increaseBtn.disabled = this.timerRunning && !this.timerPaused;
+    if (timerInput) timerInput.disabled = this.timerRunning && !this.timerPaused;
+};
+
+TeeTracker.prototype.showTimerNotification = function(message) {
+    const notification = document.getElementById('timer-notification');
+    if (notification) {
+        notification.textContent = message;
+        notification.className = 'timer-notification success';
+        notification.style.display = 'block';
+        
+        // Hide after 5 seconds
+        setTimeout(() => {
+            notification.style.display = 'none';
+        }, 5000);
+    }
+};
+
 // Initialize the application
 let app;
 document.addEventListener('DOMContentLoaded', () => {

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>
@@ -101,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>
@@ -176,6 +201,39 @@
                         <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>
                 
@@ -285,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">
@@ -327,8 +406,8 @@
                     <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>

styles.css

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