Implement cybernetwork background features: Add routes for serving cybernetwork CSS and JavaScript files, update base.html to include the new CSS and initialization script, and enhance style.css with smooth scrolling and background imports. This update improves the visual experience and functionality of the cybernetwork background in the application.

2025-04-27 15:01:38 +02:00
parent edf3049e42
commit b8ad3aea13
8 changed files with 491 additions and 5 deletions
--- a/static/js/modules/cyber-network-init.js
+++ b/static/js/modules/cyber-network-init.js
@@ -0,0 +1,95 @@
+/**
+ * Initialisierungsmodul für den CyberNetwork-Hintergrund
+ * Importiert und startet die Animation
+ */
+
+import CyberNetwork from './cyber-network.js';
+
+// Beim Laden des Dokuments starten
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('CyberNetwork: Initialisierung gestartet');
+  
+  // Prüfen ob das CSS bereits geladen ist, wenn nicht, dann laden
+  if (!document.querySelector('link[href*="cybernetwork-bg.css"]')) {
+    console.log('CyberNetwork: CSS wird geladen');
+    const cyberNetworkCss = document.createElement('link');
+    cyberNetworkCss.rel = 'stylesheet';
+    cyberNetworkCss.href = '/static/css/src/cybernetwork-bg.css';
+    document.head.appendChild(cyberNetworkCss);
+  }
+  
+  // Container-Element für das Netzwerk finden
+  const container = document.getElementById('cyber-background-container');
+  
+  if (!container) {
+    console.error('CyberNetwork: Container #cyber-background-container nicht gefunden!');
+    return;
+  }
+  
+  console.log('CyberNetwork: Container gefunden', container);
+  
+  // Konfiguration für den Netzwerk-Hintergrund
+  const networkConfig = {
+    container: container,
+    nodeCount: window.innerWidth < 768 ? 15 : 30, // Weniger Nodes auf mobilen Geräten
+    connectionCount: window.innerWidth < 768 ? 25 : 50,
+    packetCount: window.innerWidth < 768 ? 8 : 15,
+    animationSpeed: 1.0
+  };
+  
+  // Netzwerk erstellen und initialisieren
+  const cyberNetwork = new CyberNetwork(networkConfig);
+  cyberNetwork.init();
+  console.log('CyberNetwork: Netzwerk initialisiert');
+  
+  // Globale Referenz für Debug-Zwecke
+  window.cyberNetwork = cyberNetwork;
+});
+
+// Funktion zum manuellen Initialisieren, falls notwendig
+export function initCyberNetwork(config = {}) {
+  console.log('CyberNetwork: Manuelle Initialisierung gestartet');
+  
+  // CSS laden, falls nicht vorhanden
+  if (!document.querySelector('link[href*="cybernetwork-bg.css"]')) {
+    console.log('CyberNetwork: CSS wird geladen (manuell)');
+    const cyberNetworkCss = document.createElement('link');
+    cyberNetworkCss.rel = 'stylesheet';
+    cyberNetworkCss.href = '/static/css/src/cybernetwork-bg.css';
+    document.head.appendChild(cyberNetworkCss);
+  }
+  
+  // Container-Element für das Netzwerk finden
+  const container = document.getElementById('cyber-background-container');
+  
+  if (!container) {
+    console.error('CyberNetwork: Container #cyber-background-container nicht gefunden!');
+    return null;
+  }
+  
+  // Bestehende Instanz zurücksetzen, falls vorhanden
+  if (window.cyberNetwork) {
+    console.log('CyberNetwork: Bestehende Instanz wird zurückgesetzt');
+    window.cyberNetwork.reset();
+  }
+  
+  // Netzwerk mit benutzerdefinierten Optionen erstellen
+  const networkConfig = {
+    container: container,
+    nodeCount: window.innerWidth < 768 ? 15 : 30,
+    connectionCount: window.innerWidth < 768 ? 25 : 50,
+    packetCount: window.innerWidth < 768 ? 8 : 15,
+    animationSpeed: 1.0,
+    ...config
+  };
+  
+  // Neue Instanz erstellen und initialisieren
+  const cyberNetwork = new CyberNetwork(networkConfig);
+  cyberNetwork.init();
+  console.log('CyberNetwork: Netzwerk manuell initialisiert');
+  
+  // Globale Referenz aktualisieren
+  window.cyberNetwork = cyberNetwork;
+  
+  return cyberNetwork;
+}