From 68f35123af6873ef3966d33d6f180a7d32676ef5 Mon Sep 17 00:00:00 2001 From: Ihor_Zhekov Date: Mon, 9 Feb 2026 11:02:15 +0100 Subject: [PATCH] 123 --- Dockerfile | 7 +- Profice WebSite/index.html | 130 ++++++++++--- Profice WebSite/scripts/tech-onepager.js | 24 ++- Profice WebSite/style/tech-onepager.css | 233 ++++++++++++++++++++--- 4 files changed, 340 insertions(+), 54 deletions(-) diff --git a/Dockerfile b/Dockerfile index 458159c..9b4fdf4 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,6 +4,11 @@ ENV WEB_DOCUMENT_ROOT=/app COPY ["Profice WebSite/", "/app/"] -RUN chown -R application:application /app +RUN echo 'location / { \ + try_files $uri $uri/ $uri.html /index.php?$query_string; \ + index index.html index.php; \ +}' > /opt/docker/etc/nginx/vhost.common.d/10-location-root.conf + +RUN chown -R application:application /app && chmod -R 755 /app EXPOSE 80 \ No newline at end of file diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html index ebc3a2f..a4f4bc6 100644 --- a/Profice WebSite/index.html +++ b/Profice WebSite/index.html @@ -157,19 +157,27 @@
-
-
📞
-
-
-
-
-
-
-
-
+
+ + + + + + + + + + + + + + +
+
📞
+
🤖
+
📊
+
👥
-
🤖
-
📊

KI Telefonassistent

@@ -197,14 +205,27 @@
-
-
🌐
-
→
-
🤖
-
→
-
📋
-
→
-
👤
+
+ + + + + + + + + + + + + + +
+
🌐
+
🤖
+
📋
+
👤
+

KI Chat

@@ -232,14 +253,67 @@
-
-
🔍
-
→
-
💬
-
→
-
🤖
-
→
-
💡
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
🔍
+
📄
+
💬
+
🤖
+
💡
+

Interne KI

diff --git a/Profice WebSite/scripts/tech-onepager.js b/Profice WebSite/scripts/tech-onepager.js index 14a9188..ae05472 100644 --- a/Profice WebSite/scripts/tech-onepager.js +++ b/Profice WebSite/scripts/tech-onepager.js @@ -29,17 +29,37 @@ document.addEventListener('DOMContentLoaded', function() { // Also redraw after a short delay for CSS transitions setTimeout(drawConnections, 300); setTimeout(drawConnections, 600); + setTimeout(drawConnections, 1000); - // Redraw on resize + // Redraw on resize with multiple delayed calls to handle CSS transitions let resizeTimeout; + let resizeRAF; window.addEventListener('resize', function() { + // Cancel any pending animation frame + if (resizeRAF) cancelAnimationFrame(resizeRAF); clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(drawConnections, 100); + + // Immediate redraw + resizeRAF = requestAnimationFrame(drawConnections); + + // Delayed redraws to catch CSS transition completion + resizeTimeout = setTimeout(() => { + drawConnections(); + setTimeout(drawConnections, 200); + setTimeout(drawConnections, 400); + }, 100); }); // Redraw on orientation change (mobile) window.addEventListener('orientationchange', function() { setTimeout(drawConnections, 300); + setTimeout(drawConnections, 600); + setTimeout(drawConnections, 1000); + }); + + // Also listen for transitionend on the system graphic + systemGraphic.addEventListener('transitionend', function() { + requestAnimationFrame(drawConnections); }); // Initialize tooltip system diff --git a/Profice WebSite/style/tech-onepager.css b/Profice WebSite/style/tech-onepager.css index 66f0c1e..9795c82 100644 --- a/Profice WebSite/style/tech-onepager.css +++ b/Profice WebSite/style/tech-onepager.css @@ -130,6 +130,7 @@ position: relative; width: 100%; height: 100%; + transition: transform 0.3s ease; } .connections { @@ -1096,6 +1097,173 @@ 50% { transform: scale(1.2); opacity: 0.8; } } +/* ===== INTERNAL WORKFLOW - SVG ANIMATED FLOW ===== */ +.internal-workflow { + position: relative; + width: 100%; + height: 120px; + display: flex; + align-items: center; + justify-content: center; +} + +.internal-workflow-svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +.internal-nodes { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + pointer-events: none; +} + +.int-node { + position: absolute; + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.95); + border: 2px solid var(--primary-mid); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + transition: all 0.3s ease; + pointer-events: auto; +} + +/* 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); } +.int-node-3 { left: 42.2%; top: 58.3%; transform: translate(0, 0); } +.int-node-4 { left: 67.2%; top: 50%; transform: translate(0, -50%); } +.int-node-5 { left: 86%; top: 50%; transform: translate(0, -50%); } + +/* Node border styling for SVG - hidden (no animation) */ +.int-node-border { + display: none; +} + +/* Glow path styling - hidden (no animation) */ +.int-glow-path { + display: none; +} + +/* ===== UNIFIED WORKFLOW STYLES (Phone, Chat, Internal) ===== */ +.phone-workflow, +.chat-workflow { + position: relative; + width: 100%; + height: 120px; + display: flex; + align-items: center; + justify-content: center; +} + +.workflow-svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} + +.workflow-nodes { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 2; + pointer-events: none; +} + +.wf-node { + position: absolute; + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.95); + border: 2px solid var(--primary-mid); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + transition: all 0.3s ease; + pointer-events: auto; +} + +/* 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%); } +.wf-node-2 { left: 32.1%; top: 50%; transform: translate(0, -50%); } +.wf-node-3 { left: 60.7%; top: 50%; transform: translate(0, -50%); } +.wf-node-4 { left: 82.1%; top: 50%; transform: translate(0, -50%); } + +/* Responsive adjustments for workflow */ +@media (max-width: 768px) { + .phone-workflow, + .chat-workflow { + height: 100px; + } + + .wf-node { + width: 32px; + height: 32px; + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .phone-workflow, + .chat-workflow { + height: 90px; + } + + .wf-node { + width: 28px; + height: 28px; + font-size: 0.9rem; + border-radius: 6px; + } +} + +/* Responsive adjustments for internal workflow */ +@media (max-width: 768px) { + .internal-workflow { + height: 100px; + } + + .int-node { + width: 32px; + height: 32px; + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .internal-workflow { + height: 90px; + } + + .int-node { + width: 28px; + height: 28px; + font-size: 0.9rem; + border-radius: 6px; + } +} + .chat-message { background: transparent; border-radius: 8px; @@ -2304,72 +2472,72 @@ } .system-graphic { - transform: scale(0.75); - width: 130%; - margin-left: -15%; + transform: scale(0.85); + width: 120%; + margin-left: -10%; } .central-node { - min-width: 100px; - max-width: 120px; - padding: 6px 12px; - border-radius: 16px; + min-width: 120px; + max-width: 140px; + padding: 8px 14px; + border-radius: 18px; } .central-node .node-icon { - font-size: 0.9rem; + font-size: 1.1rem; } .central-node .node-label { - font-size: 0.65rem; + font-size: 0.75rem; } .node { - min-width: 70px; - padding: 8px; - font-size: 0.7rem; + min-width: 85px; + padding: 10px; + font-size: 0.8rem; } .node-icon { - font-size: 1rem; + font-size: 1.3rem; } .node-label { - font-size: 0.65rem; + font-size: 0.75rem; } /* Compact circular layout for mobile */ .phone-node { top: 5%; left: 50%; - transform: translateX(-50%) scale(0.85); + transform: translateX(-50%); } .chat-node { top: 25%; right: 5%; left: auto; - transform: scale(0.85); + transform: none; } .crm-node { bottom: 25%; right: 5%; left: auto; - transform: scale(0.85); + transform: none; } .ticket-node { bottom: 5%; left: 50%; - transform: translateX(-50%) scale(0.85); + transform: translateX(-50%); } .team-node { top: 25%; left: 5%; right: auto; - transform: scale(0.85); + transform: none; } } @@ -2390,13 +2558,32 @@ } .hero-right { - height: 280px; + height: 300px; } .system-graphic { - transform: scale(0.65); - width: 150%; - margin-left: -25%; + transform: scale(0.8); + width: 130%; + margin-left: -15%; + } + + .central-node { + min-width: 110px; + max-width: 130px; + padding: 7px 12px; + } + + .node { + min-width: 75px; + padding: 8px; + } + + .node-icon { + font-size: 1.2rem; + } + + .node-label { + font-size: 0.7rem; } .cta-btn {