From c2d08f460d38d75016e07fb8dc9719e52ba4e0c1 Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Mon, 16 Mar 2026 17:03:16 +0100 Subject: [PATCH] Tutorial: Pulsierender Rand bei Demos, Weiter-Button erst nach Abschluss Waehrend automatischer Demos (disableNav-Steps): - Bubble-Rand pulsiert gold (animation: tutorial-bubble-pulse) - Statt Vor/Zurueck-Buttons wird "Demo laeuft..." angezeigt - Nach Abschluss der Demo: Pulsieren stoppt, Zurueck/Weiter erscheinen Bei normalen Steps (keine Demo): - Zurueck/Weiter-Buttons sind sofort sichtbar, kein Pulsieren Co-Authored-By: Claude Opus 4.6 (1M context) --- src/static/css/style.css | 17 +++++++++++++++++ src/static/dashboard.html | 4 ++-- src/static/js/tutorial.js | 30 ++++++++++++++++++++---------- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/static/css/style.css b/src/static/css/style.css index dd0fa68..2943f4e 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -5242,3 +5242,20 @@ body.tutorial-active .tutorial-bubble, body.tutorial-active .tutorial-cursor { pointer-events: auto !important; } + +/* Tutorial Bubble: Pulsieren waehrend automatischer Demo */ +@keyframes tutorial-bubble-pulse { + 0%, 100% { border-color: var(--accent); box-shadow: var(--shadow-lg), 0 0 0 0 rgba(150, 121, 26, 0); } + 50% { border-color: var(--accent-hover); box-shadow: var(--shadow-lg), 0 0 0 6px rgba(150, 121, 26, 0.25); } +} +.tutorial-bubble-pulsing { + animation: tutorial-bubble-pulse 1.5s ease-in-out infinite; +} +.tutorial-demo-hint { + font-size: 12px; + color: var(--text-secondary); + font-style: italic; + text-align: center; + width: 100%; + display: block; +} diff --git a/src/static/dashboard.html b/src/static/dashboard.html index 93bf427..30cb7bb 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -17,7 +17,7 @@ - + @@ -764,7 +764,7 @@ - + diff --git a/src/static/js/tutorial.js b/src/static/js/tutorial.js index f0f0da5..76229b8 100644 --- a/src/static/js/tutorial.js +++ b/src/static/js/tutorial.js @@ -1313,17 +1313,20 @@ const Tutorial = { // Navigation var navHtml = '
'; - if (index > 0 && !step.disableNav) { - navHtml += ''; + if (step.disableNav) { + // Automatische Demo läuft - keine Buttons, wird pulsieren + navHtml += 'Demo läuft...'; } else { - navHtml += ''; - } - if (index < total - 1 && !step.disableNav) { - navHtml += ''; - } else if (index === total - 1) { - navHtml += ''; - } else { - navHtml += ''; + if (index > 0) { + navHtml += ''; + } else { + navHtml += ''; + } + if (index < total - 1) { + navHtml += ''; + } else { + navHtml += ''; + } } navHtml += '
'; @@ -1335,6 +1338,13 @@ const Tutorial = { // Positionierung this._positionBubble(step); + // Pulsieren bei automatischen Demos + if (step.disableNav) { + bubble.classList.add('tutorial-bubble-pulsing'); + } else { + bubble.classList.remove('tutorial-bubble-pulsing'); + } + // Sichtbar machen bubble.classList.add('visible');