Tutorial: Karte im Vollbild mit Markern, echte Drag/Resize-Animationen

Karte (Step 17):
- Oeffnet jetzt die Karten-Vollbild-Ansicht mit eigenem Leaflet-Map
- Zoomt auf Hamburg (Zoom 13) mit 3 farbcodierten Markern
- Cursor faehrt zu Markern, oeffnet Popups (Burchardkai, Innenstadt)
- Legende erklaert Kategorien (Hauptereignisort/Erwaehnt/Kontext)
- Funktionen Orte einlesen + Vollbild werden in der Bubble erklaert
- Map wird beim Step-Exit sauber aus dem Fullscreen entfernt

Drag-Demo (Step 18):
- Kachel bewegt sich jetzt visuell per CSS transform mit dem Cursor
- 150px nach rechts, dann zurueck - echte Verschiebe-Animation
- Kachel erhaelt erhoehten z-index waehrend der Animation

Resize-Demo (Step 19):
- Kachel aendert visuell Breite/Hoehe mit dem Cursor
- 80px breiter + 50px hoeher, dann zurueck
- Echte Groessenaenderung sichtbar statt nur Cursor-Bewegung

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-16 16:09:23 +01:00
Ursprung 6d09c0a5fa
Commit 3a2ea7a8c7
2 geänderte Dateien mit 299 neuen und 38 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=20260316f">
<link rel="stylesheet" href="/static/css/style.css?v=20260316g">
</head>
<body>
<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/network-graph.js?v=20260316a"></script>
<script src="/static/js/app_network.js?v=20260316a"></script>
<script src="/static/js/tutorial.js?v=20260316h"></script>
<script src="/static/js/tutorial.js?v=20260316i"></script>
<script src="/static/js/chat.js?v=20260316f"></script>
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>