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');