Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

5678

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-02-09 11:17:35 +01:00
parent 68f35123af
commit b7c26b5229
3 changed files with 73 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
Profice WebSite/index.html
View File

@@ -173,10 +173,18 @@
<!-- Node elements positioned over SVG --> <!-- Node elements positioned over SVG -->
<div class="workflow-nodes"> <div class="workflow-nodes">
<div class="wf-node wf-node-1" title="Telefon">📞</div> <div class="wf-node wf-node-1" title="Telefon">
<div class="wf-node wf-node-2" title="KI Verarbeitung">🤖</div> <svg viewBox="0 0 24 24" fill="none" stroke="#d63384" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<div class="wf-node wf-node-3" title="CRM">📊</div> </div>
<div class="wf-node wf-node-4" title="Team">👥</div> <div class="wf-node wf-node-2" title="KI Verarbeitung">
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
</div>
<div class="wf-node wf-node-3" title="CRM">
<svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
</div>
<div class="wf-node wf-node-4" title="Team">
<svg viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -221,10 +229,18 @@
<!-- Node elements positioned over SVG --> <!-- Node elements positioned over SVG -->
<div class="workflow-nodes"> <div class="workflow-nodes">
<div class="wf-node wf-node-1" title="Website">🌐</div> <div class="wf-node wf-node-1" title="Website">
<div class="wf-node wf-node-2" title="KI Verarbeitung">🤖</div> <svg viewBox="0 0 24 24" fill="none" stroke="#20c997" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
<div class="wf-node wf-node-3" title="Kategorisierung">📋</div> </div>
<div class="wf-node wf-node-4" title="Mitarbeiter">👤</div> <div class="wf-node wf-node-2" title="KI Verarbeitung">
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
</div>
<div class="wf-node wf-node-3" title="Kategorisierung">
<svg viewBox="0 0 24 24" fill="none" stroke="#fd7e14" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
</div>
<div class="wf-node wf-node-4" title="Mitarbeiter">
<svg viewBox="0 0 24 24" fill="none" stroke="#0d6efd" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -308,11 +324,21 @@
<!-- Node elements positioned over SVG --> <!-- Node elements positioned over SVG -->
<div class="internal-nodes"> <div class="internal-nodes">
<div class="int-node int-node-1" title="Suchanfrage">🔍</div> <div class="int-node int-node-1" title="Suchanfrage">
<div class="int-node int-node-2" title="Dokumente">📄</div> <svg viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<div class="int-node int-node-3" title="Nachrichten">💬</div> </div>
<div class="int-node int-node-4" title="KI Verarbeitung">🤖</div> <div class="int-node int-node-2" title="Dokumente">
<div class="int-node int-node-5" title="Antwort">💡</div> <svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
</div>
<div class="int-node int-node-3" title="Nachrichten">
<svg viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<div class="int-node int-node-4" title="KI Verarbeitung">
<svg viewBox="0 0 24 24" fill="none" stroke="#6f42c1" stroke-width="2"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><path d="M12 8v3M7 15h2M15 15h2"/></svg>
</div>
<div class="int-node int-node-5" title="Antwort">
<svg viewBox="0 0 24 24" fill="none" stroke="#ffc107" stroke-width="2"><path d="M9 18h6M10 22h4M12 2v1M4.22 4.22l.71.71M1 12h1M4.22 19.78l.71-.71M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></svg>
</div>
</div> </div>
</div> </div>
</div> </div>

29
Profice WebSite/scripts/tech-onepager.js
View File

@@ -177,17 +177,28 @@ document.addEventListener('DOMContentLoaded', function() {
const centralNode = systemGraphic.querySelector('.central-node'); const centralNode = systemGraphic.querySelector('.central-node');
const otherNodes = systemGraphic.querySelectorAll('.node:not(.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 graphicRect = systemGraphic.getBoundingClientRect();
const centralRect = centralNode.getBoundingClientRect(); const centralRect = centralNode.getBoundingClientRect();
// Calculate center position relative to the graphic container // Calculate center position relative to the graphic container, accounting for scale
const centerX = centralRect.left - graphicRect.left + centralRect.width / 2; const centerX = (centralRect.left - graphicRect.left + centralRect.width / 2) / scale;
const centerY = centralRect.top - graphicRect.top + centralRect.height / 2; const centerY = (centralRect.top - graphicRect.top + centralRect.height / 2) / scale;
// Set SVG viewBox to match container // Set SVG viewBox to match container (unscaled dimensions)
connections.setAttribute('viewBox', `0 0 ${graphicRect.width} ${graphicRect.height}`); const viewBoxWidth = graphicRect.width / scale;
const viewBoxHeight = graphicRect.height / scale;
connections.setAttribute('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`);
connections.style.width = '100%'; connections.style.width = '100%';
connections.style.height = '100%'; connections.style.height = '100%';
@@ -196,9 +207,9 @@ document.addEventListener('DOMContentLoaded', function() {
otherNodes.forEach(node => { otherNodes.forEach(node => {
const nodeRect = node.getBoundingClientRect(); const nodeRect = node.getBoundingClientRect();
// Calculate node center position relative to the graphic container // Calculate node center position relative to the graphic container, accounting for scale
const nodeX = nodeRect.left - graphicRect.left + nodeRect.width / 2; const nodeX = (nodeRect.left - graphicRect.left + nodeRect.width / 2) / scale;
const nodeY = nodeRect.top - graphicRect.top + nodeRect.height / 2; const nodeY = (nodeRect.top - graphicRect.top + nodeRect.height / 2) / scale;
// Create dashed line for better visibility // Create dashed line for better visibility
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');

18
Profice WebSite/style/tech-onepager.css
View File

@@ -796,8 +796,8 @@
.workflow-nodes .node-5 { left: 85%; } .workflow-nodes .node-5 { left: 85%; }
} }
/* Phone System Visual */ /* Phone System Visual - OLD STYLES (overridden by .phone-workflow) */
.phone-system { .phone-system:not(.phone-workflow) {
position: relative; position: relative;
width: 100%; width: 100%;
height: 80px; height: 80px;
@@ -924,8 +924,8 @@
font-weight: bold; font-weight: bold;
} }
/* Chat System Visual */ /* Chat System Visual - OLD STYLES (overridden by .chat-workflow) */
.chat-system { .chat-system:not(.chat-workflow) {
position: relative; position: relative;
width: 100%; width: 100%;
height: 80px; height: 80px;
@@ -1141,6 +1141,11 @@
pointer-events: auto; pointer-events: auto;
} }
.int-node svg {
width: 22px;
height: 22px;
}
/* Node positions - matching SVG viewBox 320x120, centered on node boxes */ /* Node positions - matching SVG viewBox 320x120, centered on node boxes */
.int-node-1 { left: 4.7%; top: 50%; transform: translate(0, -50%); } .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-2 { left: 42.2%; top: 8.3%; transform: translate(0, 0); }
@@ -1203,6 +1208,11 @@
pointer-events: auto; pointer-events: auto;
} }
.wf-node svg {
width: 22px;
height: 22px;
}
/* Linear 4-node workflow positions (Phone & Chat) - viewBox 280x120 */ /* Linear 4-node workflow positions (Phone & Chat) - viewBox 280x120 */
/* Nodes at x: 10, 90, 170, 250 (center of 40px boxes) */ /* 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-1 { left: 3.6%; top: 50%; transform: translate(0, -50%); }