8

Profice WebSite/scripts/tech-onepager.js

@@ -21,8 +21,26 @@ document.addEventListener('DOMContentLoaded', function() {
         const nodes = systemGraphic.querySelectorAll('.node');
         const centralNode = systemGraphic.querySelector('.central-node');
         
-        // Draw connection lines
-        drawConnections();
+        // Draw connection lines after layout is complete
+        requestAnimationFrame(() => {
+            requestAnimationFrame(drawConnections);
+        });
+        
+        // Also redraw after a short delay for CSS transitions
+        setTimeout(drawConnections, 300);
+        setTimeout(drawConnections, 600);
+        
+        // Redraw on resize
+        let resizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = setTimeout(drawConnections, 100);
+        });
+        
+        // Redraw on orientation change (mobile)
+        window.addEventListener('orientationchange', function() {
+            setTimeout(drawConnections, 300);
+        });
         
         // Initialize tooltip system
         initializeTooltips();
@@ -139,19 +157,30 @@ document.addEventListener('DOMContentLoaded', function() {
         const centralNode = systemGraphic.querySelector('.central-node');
         const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)');
         
-        const centralRect = centralNode.getBoundingClientRect();
-        const graphicRect = systemGraphic.getBoundingClientRect();
+        if (!centralNode || !systemGraphic) return;
         
+        const graphicRect = systemGraphic.getBoundingClientRect();
+        const centralRect = centralNode.getBoundingClientRect();
+        
+        // Calculate center position relative to the graphic container
         const centerX = centralRect.left - graphicRect.left + centralRect.width / 2;
         const centerY = centralRect.top - graphicRect.top + centralRect.height / 2;
         
+        // Set SVG viewBox to match container
+        connections.setAttribute('viewBox', `0 0 ${graphicRect.width} ${graphicRect.height}`);
+        connections.style.width = '100%';
+        connections.style.height = '100%';
+        
         connections.innerHTML = '';
         
         otherNodes.forEach(node => {
             const nodeRect = node.getBoundingClientRect();
+            
+            // Calculate node center position relative to the graphic container
             const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2;
             const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2;
             
+            // Create dashed line for better visibility
             const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
             line.setAttribute('x1', centerX);
             line.setAttribute('y1', centerY);