diff --git a/website/__pycache__/app.cpython-311.pyc b/website/__pycache__/app.cpython-311.pyc index 896763e..f024fec 100644 Binary files a/website/__pycache__/app.cpython-311.pyc and b/website/__pycache__/app.cpython-311.pyc differ diff --git a/website/static/network-background.js b/website/static/network-background.js index 9f615a0..2274539 100644 --- a/website/static/network-background.js +++ b/website/static/network-background.js @@ -11,6 +11,8 @@ let scaleDirection = 1; let opacityDirection = 1; let animationFrameId = null; let isDarkMode = document.documentElement.classList.contains('dark'); +let loadAttempts = 0; +const MAX_LOAD_ATTEMPTS = 2; // Initialize the canvas and load the image function initNetworkBackground() { @@ -36,16 +38,34 @@ function initNetworkBackground() { // Get context with alpha enabled ctx = canvas.getContext('2d', { alpha: true }); - // Load the network image + // Load the network image - versuche zuerst die SVG-Version networkImage = new Image(); networkImage.crossOrigin = "anonymous"; // Vermeidet CORS-Probleme - networkImage.src = '/static/network-bg.jpg'; - // Fallback auf lokalen Pfad, falls der absolute Pfad fehlschlägt + // Event-Handler für Fehler - Fallback auf Standard-Hintergrund networkImage.onerror = function() { - networkImage.src = 'static/network-bg.jpg'; + loadAttempts++; + if (loadAttempts < MAX_LOAD_ATTEMPTS) { + // Wenn SVG fehlschlägt, versuche JPG + if (networkImage.src.endsWith('svg')) { + networkImage.src = '/static/network-bg.jpg'; + } else { + // Wenn beide fehlschlagen, starte einfach Animation ohne Hintergrund + console.log("Konnte kein Hintergrundbild laden, verwende einfachen Hintergrund"); + isImageLoaded = true; // Trotzdem Animation starten + startAnimation(); + } + } else { + // Zu viele Versuche, verwende einfachen Hintergrund + console.log("Konnte kein Hintergrundbild laden, verwende einfachen Hintergrund"); + isImageLoaded = true; // Trotzdem Animation starten + startAnimation(); + } }; + // Versuche zuerst die SVG-Version zu laden + networkImage.src = '/static/network-bg.svg'; + networkImage.onload = function() { isImageLoaded = true; startAnimation(); @@ -102,9 +122,6 @@ function resizeCanvas() { // Start animation function startAnimation() { - if (!isImageLoaded) return; - - // Cancel any existing animation if (animationFrameId) { cancelAnimationFrame(animationFrameId); } @@ -115,7 +132,7 @@ function startAnimation() { // Draw network image function drawNetworkImage() { - if (!isImageLoaded || !ctx) return; + if (!ctx) return; // Clear canvas with proper clear method ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1)); @@ -135,33 +152,57 @@ function drawNetworkImage() { // Set global opacity, angepasst für Dark Mode ctx.globalAlpha = isDarkMode ? opacity : opacity * 0.8; - // Bildgröße berechnen, um den Bildschirm abzudecken - const imgAspect = networkImage.width / networkImage.height; - const canvasAspect = canvas.width / canvas.height; - - let drawWidth, drawHeight; - - if (canvasAspect > imgAspect) { - drawWidth = canvas.width / (window.devicePixelRatio || 1); - drawHeight = drawWidth / imgAspect; + if (isImageLoaded && networkImage.complete) { + // Bildgröße berechnen, um den Bildschirm abzudecken + const imgAspect = networkImage.width / networkImage.height; + const canvasAspect = canvas.width / canvas.height; + + let drawWidth, drawHeight; + + if (canvasAspect > imgAspect) { + drawWidth = canvas.width / (window.devicePixelRatio || 1); + drawHeight = drawWidth / imgAspect; + } else { + drawHeight = canvas.height / (window.devicePixelRatio || 1); + drawWidth = drawHeight * imgAspect; + } + + // Draw image centered + ctx.drawImage( + networkImage, + -drawWidth / 2, + -drawHeight / 2, + drawWidth, + drawHeight + ); } else { - drawHeight = canvas.height / (window.devicePixelRatio || 1); - drawWidth = drawHeight * imgAspect; + // Fallback: Zeichne einen einfachen Hintergrund mit Punkten + drawFallbackBackground(); } - // Draw image centered - ctx.drawImage( - networkImage, - -drawWidth / 2, - -drawHeight / 2, - drawWidth, - drawHeight - ); - // Restore context state ctx.restore(); } +// Fallback-Hintergrund mit Punkten und Linien +function drawFallbackBackground() { + const width = canvas.width / (window.devicePixelRatio || 1); + const height = canvas.height / (window.devicePixelRatio || 1); + + // Zeichne einige zufällige Punkte + ctx.fillStyle = isDarkMode ? 'rgba(139, 92, 246, 0.2)' : 'rgba(139, 92, 246, 0.1)'; + + for (let i = 0; i < 50; i++) { + const x = Math.random() * width; + const y = Math.random() * height; + const radius = Math.random() * 3 + 1; + + ctx.beginPath(); + ctx.arc(x - width/2, y - height/2, radius, 0, Math.PI * 2); + ctx.fill(); + } +} + // Animation loop function animate() { // Update animation parameters diff --git a/website/static/network-bg.jpg b/website/static/network-bg.jpg index 71ca67d..25e474e 100644 --- a/website/static/network-bg.jpg +++ b/website/static/network-bg.jpg @@ -1,5 +1,7 @@ -/* Dies ist ein Platzhalter für das Netzwerk-Hintergrundbild. +/* Dies ist ein Platzhalter für das Netzwerk-Hintergrundbild mit Base64-Kodierung. Das eigentliche Bild sollte hier durch eine echte JPG-Datei ersetzt werden. Empfohlene Bildgröße: mindestens 1920x1080px - Optimaler Stil: Dunkler Hintergrund mit abstrakten Verbindungslinien und Punkten */ \ No newline at end of file + Optimaler Stil: Dunkler Hintergrund mit abstrakten Verbindungslinien und Punkten + + Da wir keine echte JPG-Datei erstellen können, verwende stattdessen eine SVG-Datei mit dem gleichen Namen. */ diff --git a/website/static/network-bg.svg b/website/static/network-bg.svg new file mode 100644 index 0000000..7ae76ba --- /dev/null +++ b/website/static/network-bg.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file