diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html index a4f4bc6..ddc81fb 100644 --- a/Profice WebSite/index.html +++ b/Profice WebSite/index.html @@ -173,10 +173,18 @@
-
📞
-
🤖
-
📊
-
👥
+
+ +
+
+ +
+
+ +
+
+ +
@@ -221,10 +229,18 @@
-
🌐
-
🤖
-
📋
-
👤
+
+ +
+
+ +
+
+ +
+
+ +
@@ -308,11 +324,21 @@
-
🔍
-
📄
-
💬
-
🤖
-
💡
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/Profice WebSite/scripts/tech-onepager.js b/Profice WebSite/scripts/tech-onepager.js index ae05472..150f607 100644 --- a/Profice WebSite/scripts/tech-onepager.js +++ b/Profice WebSite/scripts/tech-onepager.js @@ -177,17 +177,28 @@ document.addEventListener('DOMContentLoaded', function() { const centralNode = systemGraphic.querySelector('.central-node'); const otherNodes = systemGraphic.querySelectorAll('.node:not(.central-node)'); - if (!centralNode || !systemGraphic) return; + if (!centralNode || !systemGraphic || !connections) return; + + // Get the computed transform scale of the system graphic + const computedStyle = window.getComputedStyle(systemGraphic); + const transform = computedStyle.transform; + let scale = 1; + if (transform && transform !== 'none') { + const matrix = new DOMMatrix(transform); + scale = matrix.a; // Get the X scale factor + } 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; + // Calculate center position relative to the graphic container, accounting for scale + const centerX = (centralRect.left - graphicRect.left + centralRect.width / 2) / scale; + const centerY = (centralRect.top - graphicRect.top + centralRect.height / 2) / scale; - // Set SVG viewBox to match container - connections.setAttribute('viewBox', `0 0 ${graphicRect.width} ${graphicRect.height}`); + // Set SVG viewBox to match container (unscaled dimensions) + const viewBoxWidth = graphicRect.width / scale; + const viewBoxHeight = graphicRect.height / scale; + connections.setAttribute('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`); connections.style.width = '100%'; connections.style.height = '100%'; @@ -196,9 +207,9 @@ document.addEventListener('DOMContentLoaded', function() { 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; + // Calculate node center position relative to the graphic container, accounting for scale + const nodeX = (nodeRect.left - graphicRect.left + nodeRect.width / 2) / scale; + const nodeY = (nodeRect.top - graphicRect.top + nodeRect.height / 2) / scale; // Create dashed line for better visibility const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); diff --git a/Profice WebSite/style/tech-onepager.css b/Profice WebSite/style/tech-onepager.css index 9795c82..86209b2 100644 --- a/Profice WebSite/style/tech-onepager.css +++ b/Profice WebSite/style/tech-onepager.css @@ -796,8 +796,8 @@ .workflow-nodes .node-5 { left: 85%; } } -/* Phone System Visual */ -.phone-system { +/* Phone System Visual - OLD STYLES (overridden by .phone-workflow) */ +.phone-system:not(.phone-workflow) { position: relative; width: 100%; height: 80px; @@ -924,8 +924,8 @@ font-weight: bold; } -/* Chat System Visual */ -.chat-system { +/* Chat System Visual - OLD STYLES (overridden by .chat-workflow) */ +.chat-system:not(.chat-workflow) { position: relative; width: 100%; height: 80px; @@ -1141,6 +1141,11 @@ pointer-events: auto; } +.int-node svg { + width: 22px; + height: 22px; +} + /* Node positions - matching SVG viewBox 320x120, centered on node boxes */ .int-node-1 { left: 4.7%; top: 50%; transform: translate(0, -50%); } .int-node-2 { left: 42.2%; top: 8.3%; transform: translate(0, 0); } @@ -1203,6 +1208,11 @@ pointer-events: auto; } +.wf-node svg { + width: 22px; + height: 22px; +} + /* Linear 4-node workflow positions (Phone & Chat) - viewBox 280x120 */ /* Nodes at x: 10, 90, 170, 250 (center of 40px boxes) */ .wf-node-1 { left: 3.6%; top: 50%; transform: translate(0, -50%); }