diff --git a/frontend/src/app.js b/frontend/src/app.js index a9cc3e0..d91d01c 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -1265,25 +1265,90 @@ function showUpdateDebug(){ position: fixed; bottom: 10px; right: 10px; - background: rgba(0,0,0,0.8); + background: rgba(0,0,0,0.9); color: #0F766E; - padding: 8px 12px; + padding: 12px; border-radius: 4px; font-size: 11px; font-family: monospace; - max-width: 200px; - max-height: 100px; + max-width: 240px; + max-height: 150px; overflow-y: auto; z-index: 999; border: 1px solid #0F766E; - cursor: pointer; + display: flex; + flex-direction: column; + gap: 8px; `; - panel.title = 'Update Debug Panel – Klick zum Schließen'; + panel.title = 'Update Debug Panel – für Testing'; document.body.appendChild(panel); - panel.addEventListener('click', () => panel.remove()); + + /* Log-Text Container */ + const logText = document.createElement('div'); + logText.id = 'updateDebugLog'; + logText.style.cssText = `flex: 1; overflow-y: auto; cursor: auto;`; + logText.addEventListener('click', e => e.stopPropagation()); + panel.appendChild(logText); + + /* Reset-Button */ + const resetBtn = document.createElement('button'); + resetBtn.textContent = '🔄 Reset'; + resetBtn.title = 'App auf Defaults zurücksetzen (alle Einstellungen + Editor löschen)'; + resetBtn.style.cssText = ` + background: rgba(15, 118, 110, 0.2); + border: 1px solid #0F766E; + color: #0F766E; + cursor: pointer; + font-size: 10px; + padding: 3px 6px; + border-radius: 3px; + font-family: monospace; + transition: all 0.2s ease; + `; + resetBtn.addEventListener('mouseenter', () => { + resetBtn.style.background = 'rgba(15, 118, 110, 0.4)'; + }); + resetBtn.addEventListener('mouseleave', () => { + resetBtn.style.background = 'rgba(15, 118, 110, 0.2)'; + }); + resetBtn.addEventListener('click', e => { + e.stopPropagation(); + resetToDefaults(); + }); + panel.appendChild(resetBtn); + + /* Close-Button */ + const closeBtn = document.createElement('button'); + closeBtn.textContent = '✕ Close'; + closeBtn.style.cssText = ` + background: rgba(15, 118, 110, 0.2); + border: 1px solid #0F766E; + color: #0F766E; + cursor: pointer; + font-size: 10px; + padding: 3px 6px; + border-radius: 3px; + font-family: monospace; + transition: all 0.2s ease; + `; + closeBtn.addEventListener('mouseenter', () => { + closeBtn.style.background = 'rgba(15, 118, 110, 0.4)'; + }); + closeBtn.addEventListener('mouseleave', () => { + closeBtn.style.background = 'rgba(15, 118, 110, 0.2)'; + }); + closeBtn.addEventListener('click', e => { + e.stopPropagation(); + panel.remove(); + }); + panel.appendChild(closeBtn); } + const log = localStorage.getItem('werkbaum-update-log') || ''; - panel.textContent = log ? log.split('\n').slice(-6).join('\n') : 'Keine Einträge'; + const logText = panel.querySelector('#updateDebugLog'); + if(logText) { + logText.textContent = log ? log.split('\n').slice(-6).join('\n') : 'Keine Einträge'; + } } /* Erste Prüfung nach 2 Sekunden */