Interaktives Tutorial-System mit 20 Schritten, Spotlight, Sprechblasen und virtuellen Maus-Demos

Neues Tutorial-System fuer gefuehrten Rundgang durch den Monitor:
- tutorial.js: Tutorial-Engine mit Spotlight-Abdunkelung, Bubble-Navigation,
  virtuellem Cursor fuer Drag/Resize-Demos, Keyboard-Support (Escape/Pfeiltasten)
- 20 Steps: Welcome, Sidebar, Lagen, Kacheln, Layout, Theme, Export, Chat, etc.
- Automatisches Ueberspringen von Steps wenn keine Lage geoeffnet
- Modal-Handling fuer Neue-Lage und Quellenverwaltung Steps
- Chat-Integration: Tutorial-Hinweis beim ersten Oeffnen, Keywords (rundgang/tutorial/tour/fuehrung)
- localStorage-Persistenz (osint_tutorial_seen)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-16 14:23:32 +01:00
Ursprung bbd4821011
Commit e5bcfb3d75
4 geänderte Dateien mit 1027 neuen und 5 gelöschten Zeilen

Datei anzeigen

@@ -17,7 +17,7 @@
<link rel="stylesheet" href="/static/vendor/MarkerCluster.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/style.css?v=20260316b">
<link rel="stylesheet" href="/static/css/style.css?v=20260316c">
</head>
<body>
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
@@ -742,6 +742,13 @@
</div>
</div>
<!-- Tutorial -->
<div class="tutorial-overlay" id="tutorial-overlay">
<div class="tutorial-spotlight" id="tutorial-spotlight"></div>
</div>
<div class="tutorial-bubble" id="tutorial-bubble"></div>
<div class="tutorial-cursor" id="tutorial-cursor"></div>
<!-- Toast Container -->
<div class="toast-container" id="toast-container" aria-live="polite" aria-atomic="true"></div>
@@ -757,8 +764,9 @@
<script src="/static/js/api_network.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/chat.js?v=20260315b"></script>
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init()});</script>
<script src="/static/js/tutorial.js?v=20260316a"></script>
<script src="/static/js/chat.js?v=20260316c"></script>
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
<!-- Map Fullscreen Overlay -->
<div class="map-fullscreen-overlay" id="map-fullscreen-overlay">