diff --git a/templates/index.html b/templates/index.html index 49aba83..d71f5cc 100644 --- a/templates/index.html +++ b/templates/index.html @@ -81,21 +81,37 @@ font-size: 1.2em; } - /* Schriftfarbe und Hintergrund für Dropdowns und Eingabefelder korrigieren */ + /* Nur für Dropdowns und Eingabefelder (NICHT für den Button!) */ .toolbar-controls select, - .toolbar-controls input, - .toolbar-controls button { + .toolbar-controls input { padding: 5px 10px; border-radius: 4px; border: 1px solid #bdc3c7; - color: #2c3e50; /* Dunkle Schriftfarbe! */ - background-color: white; /* Weißer Grund! */ + color: #2c3e50; /* Dunkle Schrift */ + background-color: white; /* Weißer Grund */ font-size: 14px; + outline: none; } - /* Der Container für die URL (standardmäßig versteckt) */ + /* Spezifisches Styling für den Speichern-Button */ + .toolbar-controls .save-btn { + background-color: #27ae60; + color: white; /* Weiße Schrift */ + border: none; + cursor: pointer; + font-weight: bold; + padding: 6px 15px; + border-radius: 4px; + transition: background 0.2s; + } + + .toolbar-controls .save-btn:hover { + background-color: #2ecc71; + } + + /* Der Container für die URL */ #ollama-url-container { - display: none; + display: none; /* Standardmäßig versteckt */ align-items: center; gap: 10px; margin-left: 10px; @@ -401,31 +417,41 @@ const modelSelect = document.getElementById('ai-model'); const urlContainer = document.getElementById('ollama-url-container'); - // Dropdown leeren und neu befüllen - modelSelect.innerHTML = ''; - modelOptions[provider].forEach(m => { - const opt = document.createElement('option'); - opt.value = m; - opt.textContent = m; - modelSelect.appendChild(opt); - }); - - // Zeige das URL-Feld NUR bei Ollama an + // 1. Sichtbarkeit sofort umschalten (bevor etwas anderes schiefgehen kann) if (provider === "ollama") { urlContainer.style.display = "flex"; } else { urlContainer.style.display = "none"; } - if (isInitialLoad) { + // 2. Dropdown leeren und neu befüllen + modelSelect.innerHTML = ''; + + // Sicherheitscheck: Gibt es den Provider in unserer Liste? + if (modelOptions[provider]) { + modelOptions[provider].forEach(m => { + const opt = document.createElement('option'); + opt.value = m; + opt.textContent = m; + modelSelect.appendChild(opt); + }); + } + + // 3. Wenn es der Start der Seite ist, setzen wir den gespeicherten Wert + if (isInitialLoad && currentSettings) { const savedModel = currentSettings[`${provider}_model`]; + + // Falls das Modell in der DB ist, aber nicht im Dropdown, fügen wir es als Option hinzu if (savedModel && !modelOptions[provider].includes(savedModel)) { const opt = document.createElement('option'); opt.value = savedModel; opt.textContent = savedModel; modelSelect.appendChild(opt); } - if (savedModel) modelSelect.value = savedModel; + + if (savedModel) { + modelSelect.value = savedModel; + } } }