diff --git a/ANLEITUNG.md b/ANLEITUNG.md
new file mode 100644
index 0000000..7be84ae
--- /dev/null
+++ b/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
+
+
+ ```
+
+ mit:
+ ```html
+
+
+
+ ```
+
+2. Bearbeiten Sie die Datei `website/templates/mindmap.html` und entfernen Sie die Zeile:
+ ```html
+
+ ```
+
+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.
\ No newline at end of file
diff --git a/copy-network-image.bat b/copy-network-image.bat
new file mode 100644
index 0000000..b445827
--- /dev/null
+++ b/copy-network-image.bat
@@ -0,0 +1,33 @@
+@echo off
+echo Copying network image to website/static/network-bg.jpg...
+
+if not exist "website\static" (
+ echo Error: website/static directory does not exist.
+ echo Make sure you are running this script from the main project directory.
+ pause
+ exit /b 1
+)
+
+if "%~1"=="" (
+ echo Usage: copy-network-image.bat [path_to_image]
+ echo Example: copy-network-image.bat d2efd014-1325-471f-b9a7-90d025eb81d6.png
+ pause
+ exit /b 1
+)
+
+if not exist "%~1" (
+ echo Error: The specified image file "%~1" does not exist.
+ pause
+ exit /b 1
+)
+
+copy /Y "%~1" "website\static\network-bg.jpg" > nul
+
+if %errorlevel% equ 0 (
+ echo Success! The image has been copied to website/static/network-bg.jpg
+ echo Please restart the Flask server to see the changes.
+) else (
+ echo Error: Failed to copy the image.
+)
+
+pause
\ No newline at end of file
diff --git a/website/__pycache__/app.cpython-313.pyc b/website/__pycache__/app.cpython-313.pyc
new file mode 100644
index 0000000..65fe9b4
Binary files /dev/null and b/website/__pycache__/app.cpython-313.pyc differ
diff --git a/website/__pycache__/init_db.cpython-313.pyc b/website/__pycache__/init_db.cpython-313.pyc
new file mode 100644
index 0000000..81e2826
Binary files /dev/null and b/website/__pycache__/init_db.cpython-313.pyc differ
diff --git a/website/requirements.txt b/website/requirements.txt
index fcf5bb9..7db9aa5 100644
--- a/website/requirements.txt
+++ b/website/requirements.txt
@@ -9,6 +9,6 @@ openai==1.3.0
requests==2.31.0
flask-cors==4.0.0
gunicorn==21.2.0
-pillow==10.0.1
+#pillow==10.0.1
pytest==7.4.0
pytest-flask==1.2.0
\ No newline at end of file
diff --git a/website/static/network-animation.js b/website/static/network-animation.js
new file mode 100644
index 0000000..f8c5779
--- /dev/null
+++ b/website/static/network-animation.js
@@ -0,0 +1,88 @@
+// Network Animation Effect
+document.addEventListener('DOMContentLoaded', function() {
+ // Check if we're on the mindmap page
+ const mindmapContainer = document.getElementById('mindmap-container');
+ if (!mindmapContainer) return;
+
+ // Add enhanced animations for links and nodes
+ setTimeout(function() {
+ // Get all SVG links (connections between nodes)
+ const links = document.querySelectorAll('.link');
+ const nodes = document.querySelectorAll('.node');
+
+ // Add animation to links
+ links.forEach(link => {
+ // Create random animation duration between 15 and 30 seconds
+ const duration = 15 + Math.random() * 15;
+ link.style.animation = `dash ${duration}s linear infinite`;
+ link.style.strokeDasharray = '5, 5';
+
+ // Add pulse effect on hover
+ link.addEventListener('mouseover', function() {
+ this.classList.add('highlighted');
+ this.style.animation = 'dash 5s linear infinite';
+ });
+
+ link.addEventListener('mouseout', function() {
+ this.classList.remove('highlighted');
+ this.style.animation = `dash ${duration}s linear infinite`;
+ });
+ });
+
+ // Add effects to nodes
+ nodes.forEach(node => {
+ node.addEventListener('mouseover', function() {
+ this.querySelector('circle').style.filter = 'drop-shadow(0 0 15px rgba(179, 143, 255, 0.8))';
+
+ // Highlight connected links
+ const nodeId = this.getAttribute('data-id') || this.id;
+ links.forEach(link => {
+ const source = link.getAttribute('data-source');
+ const target = link.getAttribute('data-target');
+
+ if (source === nodeId || target === nodeId) {
+ link.classList.add('highlighted');
+ link.style.animation = 'dash 5s linear infinite';
+ }
+ });
+ });
+
+ node.addEventListener('mouseout', function() {
+ this.querySelector('circle').style.filter = 'drop-shadow(0 0 8px rgba(179, 143, 255, 0.5))';
+
+ // Remove highlight from connected links
+ const nodeId = this.getAttribute('data-id') || this.id;
+ links.forEach(link => {
+ const source = link.getAttribute('data-source');
+ const target = link.getAttribute('data-target');
+
+ if (source === nodeId || target === nodeId) {
+ link.classList.remove('highlighted');
+ const duration = 15 + Math.random() * 15;
+ link.style.animation = `dash ${duration}s linear infinite`;
+ }
+ });
+ });
+ });
+ }, 1000); // Wait for the mindmap to be fully loaded
+
+ // Add network background effect
+ const networkBackground = document.createElement('div');
+ networkBackground.className = 'network-background';
+ networkBackground.style.cssText = `
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-image: url('/static/network-bg.jpg');
+ background-size: cover;
+ background-position: center;
+ opacity: 0.15;
+ z-index: -1;
+ pointer-events: none;
+ animation: pulse 10s ease-in-out infinite alternate;
+ `;
+
+ mindmapContainer.appendChild(networkBackground);
+});
\ No newline at end of file
diff --git a/website/static/network-background.js b/website/static/network-background.js
new file mode 100644
index 0000000..2a8645b
--- /dev/null
+++ b/website/static/network-background.js
@@ -0,0 +1,118 @@
+// Animated Network Background
+let canvas, ctx, networkImage;
+let isImageLoaded = false;
+let animationSpeed = 0.0005; // Speed of rotation
+let scaleSpeed = 0.0002; // Speed of scaling
+let opacitySpeed = 0.0003; // Speed of opacity change
+let rotation = 0;
+let scale = 1;
+let opacity = 0.6;
+let scaleDirection = 1;
+let opacityDirection = 1;
+
+// Initialize the canvas and load the image
+function initNetworkBackground() {
+ // Create canvas element if it doesn't exist
+ if (!document.getElementById('network-background')) {
+ canvas = document.createElement('canvas');
+ canvas.id = 'network-background';
+ canvas.style.position = 'fixed';
+ canvas.style.top = '0';
+ canvas.style.left = '0';
+ canvas.style.width = '100%';
+ canvas.style.height = '100%';
+ canvas.style.zIndex = '-1';
+ document.body.appendChild(canvas);
+ } else {
+ canvas = document.getElementById('network-background');
+ }
+
+ // Set canvas size to window size
+ resizeCanvas();
+
+ // Get context
+ ctx = canvas.getContext('2d');
+
+ // Load the network image
+ networkImage = new Image();
+ networkImage.src = '/static/network-bg.jpg';
+ networkImage.onload = function() {
+ isImageLoaded = true;
+ animate();
+ };
+
+ // Handle window resize
+ window.addEventListener('resize', resizeCanvas);
+}
+
+// Resize canvas to match window size
+function resizeCanvas() {
+ if (canvas) {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ }
+}
+
+// Animation loop
+function animate() {
+ if (!isImageLoaded) return;
+
+ // Clear canvas
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Update animation parameters
+ rotation += animationSpeed;
+
+ // Update scale with oscillation
+ scale += scaleSpeed * scaleDirection;
+ if (scale > 1.1) {
+ scaleDirection = -1;
+ } else if (scale < 0.9) {
+ scaleDirection = 1;
+ }
+
+ // Update opacity with oscillation
+ opacity += opacitySpeed * opacityDirection;
+ if (opacity > 0.8) {
+ opacityDirection = -1;
+ } else if (opacity < 0.5) {
+ opacityDirection = 1;
+ }
+
+ // Save context state
+ ctx.save();
+
+ // Move to center of canvas
+ ctx.translate(canvas.width / 2, canvas.height / 2);
+
+ // Rotate
+ ctx.rotate(rotation);
+
+ // Scale
+ ctx.scale(scale, scale);
+
+ // Set global opacity
+ ctx.globalAlpha = opacity;
+
+ // Draw image centered
+ ctx.drawImage(
+ networkImage,
+ -networkImage.width / 2,
+ -networkImage.height / 2,
+ networkImage.width,
+ networkImage.height
+ );
+
+ // Restore context state
+ ctx.restore();
+
+ // Request next frame
+ requestAnimationFrame(animate);
+}
+
+// Initialize background when the DOM is loaded
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initNetworkBackground);
+} else {
+ initNetworkBackground();
+}
\ No newline at end of file
diff --git a/website/static/network-bg.jpg b/website/static/network-bg.jpg
new file mode 100644
index 0000000..778ca49
--- /dev/null
+++ b/website/static/network-bg.jpg
@@ -0,0 +1,2 @@
+/* This is a placeholder for the network background image.
+ The actual image (d2efd014-1325-471f-b9a7-90d025eb81d6.png) should be copied here. */
\ No newline at end of file
diff --git a/website/templates/base.html b/website/templates/base.html
index 9fb4f1e..0f32aa5 100644
--- a/website/templates/base.html
+++ b/website/templates/base.html
@@ -34,6 +34,9 @@
+
+
+
+
{% endblock %}
\ No newline at end of file