AegisSight/AegisSight-Monitor
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Tutorial: Pulsierender Rand bei Demos, Weiter-Button erst nach Abschluss

Quellcode durchsuchen 
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) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-16 17:03:16 +01:00
Ursprung 47b0ec306f
Commit c2d08f460d
3 geänderte Dateien mit 39 neuen und 12 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

17
src/static/css/style.css
Datei anzeigen

@@ -5242,3 +5242,20 @@ body.tutorial-active .tutorial-bubble,
body.tutorial-active .tutorial-cursor { body.tutorial-active .tutorial-cursor {
pointer-events: auto !important; 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;
}

4
src/static/dashboard.html
Datei anzeigen

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="/static/vendor/MarkerCluster.css"> <link rel="stylesheet" href="/static/vendor/MarkerCluster.css">
<link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css"> <link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css">
<link rel="stylesheet" href="/static/css/network.css?v=20260316a"> <link rel="stylesheet" href="/static/css/network.css?v=20260316a">
<link rel="stylesheet" href="/static/css/style.css?v=20260316g"> <link rel="stylesheet" href="/static/css/style.css?v=20260316h">
</head> </head>
<body> <body>
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a> <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
@@ -764,7 +764,7 @@
<script src="/static/js/api_network.js?v=20260316a"></script> <script src="/static/js/api_network.js?v=20260316a"></script>
<script src="/static/js/network-graph.js?v=20260316a"></script> <script src="/static/js/network-graph.js?v=20260316a"></script>
<script src="/static/js/app_network.js?v=20260316a"></script> <script src="/static/js/app_network.js?v=20260316a"></script>
<script src="/static/js/tutorial.js?v=20260316p"></script> <script src="/static/js/tutorial.js?v=20260316q"></script>
<script src="/static/js/chat.js?v=20260316f"></script> <script src="/static/js/chat.js?v=20260316f"></script>
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script> <script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>

30
src/static/js/tutorial.js
Datei anzeigen

@@ -1313,17 +1313,20 @@ const Tutorial = {
// Navigation // Navigation
var navHtml = '<div class="tutorial-bubble-nav">'; var navHtml = '<div class="tutorial-bubble-nav">';
if (index > 0 && !step.disableNav) { if (step.disableNav) {
navHtml += '<button class="tutorial-btn tutorial-btn-back" onclick="Tutorial.prev()">Zurück</button>'; // Automatische Demo läuft - keine Buttons, wird pulsieren
navHtml += '<span class="tutorial-demo-hint">Demo läuft...</span>';
} else { } else {
navHtml += '<span></span>'; if (index > 0) {
} navHtml += '<button class="tutorial-btn tutorial-btn-back" onclick="Tutorial.prev()">Zur\u00fcck</button>';
if (index < total - 1 && !step.disableNav) { } else {
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.next()">Weiter</button>'; navHtml += '<span></span>';
} else if (index === total - 1) { }
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.stop()">Fertig</button>'; if (index < total - 1) {
} else { navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.next()">Weiter</button>';
navHtml += '<span></span>'; } else {
navHtml += '<button class="tutorial-btn tutorial-btn-next" onclick="Tutorial.stop()">Fertig</button>';
}
} }
navHtml += '</div>'; navHtml += '</div>';
@@ -1335,6 +1338,13 @@ const Tutorial = {
// Positionierung // Positionierung
this._positionBubble(step); 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 // Sichtbar machen
bubble.classList.add('visible'); bubble.classList.add('visible');