chore: automatic commit 2025-04-30 12:48

docs/ANLEITUNG.md

@@ -0,0 +1,69 @@
+# Anleitung: Animierter Netzwerk-Hintergrund
+
+Diese Anleitung erklärt, wie Sie ein Netzwerk-Bild als animierten Hintergrund für die gesamte Website einrichten können.
+
+## Option 1: Manuelle Installation
+
+1. Kopieren Sie das gewünschte Netzwerk-Bild (z.B. `d2efd014-1325-471f-b9a7-90d025eb81d6.png`) in die Datei `website/static/network-bg.jpg`.
+   
+   Sie können dafür das beiliegende Batch-Skript verwenden:
+   ```
+   copy-network-image.bat d2efd014-1325-471f-b9a7-90d025eb81d6.png
+   ```
+
+2. Starten Sie den Flask-Server mit dem folgenden Befehl:
+   ```
+   python start-flask-server.py
+   ```
+
+3. Öffnen Sie die Website unter http://127.0.0.1:5000/
+
+## Anpassung der Animation
+
+Sie können die Animation des Netzwerk-Hintergrunds anpassen, indem Sie die Datei `website/static/network-background.js` bearbeiten. Hier sind die wichtigsten Parameter:
+
+```javascript
+let animationSpeed = 0.0005; // Geschwindigkeit der Rotation
+let scaleSpeed = 0.0002;     // Geschwindigkeit der Skalierung
+let opacitySpeed = 0.0003;   // Geschwindigkeit der Transparenzänderung
+```
+
+## Animation der Mindmap-Verbindungen
+
+Die Verbindungen zwischen den Knoten in der Mindmap werden jetzt mit einer fließenden Animation dargestellt. Diese Animationen verbessern die Sichtbarkeit der Zusammenhänge und machen die Interaktion mit der Karte intuitiver.
+
+### Funktionen:
+
+1. **Animierte Linien**: Die Verbindungslinien zwischen den Knoten bewegen sich in einem fließenden Muster.
+2. **Hervorhebung bei Hover**: Beim Überfahren eines Knotens oder einer Verbindung mit der Maus werden diese hervorgehoben.
+3. **Kategorien-Beziehungen**: Die visuellen Verbindungen zwischen den Kategorien sind jetzt deutlicher erkennbar.
+
+## Position des Auswahlfelds
+
+Das Auswahlfeld auf der Karte wurde weiter nach links verschoben, sodass es vollständig sichtbar ist, wenn keine Auswahl getroffen wurde. Die Größe wurde ebenfalls angepasst, um die Lesbarkeit zu verbessern.
+
+## Wiederherstellung des ursprünglichen Hintergrunds (optional)
+
+Wenn Sie zum ursprünglichen Sternenhintergrund zurückkehren möchten, müssen Sie folgende Änderungen vornehmen:
+
+1. Bearbeiten Sie die Datei `website/templates/base.html` und ersetzen Sie:
+   ```html
+   <!-- Network Background Script -->
+   <script src="{{ url_for('static', filename='network-background.js') }}"></script>
+   ```
+   
+   mit:
+   ```html
+   <!-- Three.js für den Sternenhintergrund -->
+   <script src="{{ url_for('static', filename='three.min.js') }}"></script>
+   <script src="{{ url_for('static', filename='background.js') }}"></script>
+   ```
+
+2. Bearbeiten Sie die Datei `website/templates/mindmap.html` und entfernen Sie die Zeile:
+   ```html
+   <script src="{{ url_for('static', filename='network-animation.js') }}"></script>
+   ```
+
+3. Entfernen Sie den CSS-Code für `#mindmap-container::before` und die anderen netzwerkspezifischen Stile aus der Datei `website/templates/mindmap.html`.
+
+4. Starten Sie den Flask-Server neu, um die Änderungen zu übernehmen.