# 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. 