From a16da66c2d7ee3da59b77781a81068b4742c5fb7 Mon Sep 17 00:00:00 2001
From: Vibe Nuage Agent <vibe@mistral.ai>
Date: Thu, 4 Jun 2026 18:26:16 +0000
Subject: [PATCH] fix: Add missing background image section to index.html

- Background image section was missing from previous commit
- Add bg-image-upload, bg-enabled, save-bg, remove-bg elements
- This fixes the non-responsive buttons issue for background settings

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
---
 index.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/index.html b/index.html
index f67f3d3..dc42916 100644
--- a/index.html
+++ b/index.html
@@ -181,6 +181,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>