123
This commit is contained in:
@@ -157,19 +157,27 @@
|
||||
<!-- KI Telefonassistent -->
|
||||
<div class="system-card" data-system="phone">
|
||||
<div class="system-visual">
|
||||
<div class="phone-system">
|
||||
<div class="phone-icon">📞</div>
|
||||
<div class="waveform">
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="waveform-bar"></div>
|
||||
<div class="phone-system phone-workflow">
|
||||
<!-- SVG for connections -->
|
||||
<svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Background dashed connection paths -->
|
||||
<g class="workflow-bg-paths">
|
||||
<!-- Path from Phone to KI Processor -->
|
||||
<path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from KI Processor to CRM -->
|
||||
<path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from CRM to Team -->
|
||||
<path d="M 210 60 L 250 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Node elements positioned over SVG -->
|
||||
<div class="workflow-nodes">
|
||||
<div class="wf-node wf-node-1" title="Telefon">📞</div>
|
||||
<div class="wf-node wf-node-2" title="KI Verarbeitung">🤖</div>
|
||||
<div class="wf-node wf-node-3" title="CRM">📊</div>
|
||||
<div class="wf-node wf-node-4" title="Team">👥</div>
|
||||
</div>
|
||||
<div class="ki-processor">🤖</div>
|
||||
<div class="crm-output">📊</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>KI Telefonassistent</h3>
|
||||
@@ -197,14 +205,27 @@
|
||||
<!-- KI Chat -->
|
||||
<div class="system-card" data-system="chat">
|
||||
<div class="system-visual">
|
||||
<div class="chat-system">
|
||||
<div class="website-input">🌐</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="ki-processor">🤖</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="category-output">📋</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="human-output">👤</div>
|
||||
<div class="chat-system chat-workflow">
|
||||
<!-- SVG for connections -->
|
||||
<svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Background dashed connection paths -->
|
||||
<g class="workflow-bg-paths">
|
||||
<!-- Path from Website to KI Processor -->
|
||||
<path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from KI Processor to Category -->
|
||||
<path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from Category to Human -->
|
||||
<path d="M 210 60 L 250 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Node elements positioned over SVG -->
|
||||
<div class="workflow-nodes">
|
||||
<div class="wf-node wf-node-1" title="Website">🌐</div>
|
||||
<div class="wf-node wf-node-2" title="KI Verarbeitung">🤖</div>
|
||||
<div class="wf-node wf-node-3" title="Kategorisierung">📋</div>
|
||||
<div class="wf-node wf-node-4" title="Mitarbeiter">👤</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>KI Chat</h3>
|
||||
@@ -232,14 +253,67 @@
|
||||
<!-- Interne KI -->
|
||||
<div class="system-card" data-system="internal">
|
||||
<div class="system-visual">
|
||||
<div class="internal-system">
|
||||
<div class="search-input">🔍</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="documents-cloud">💬</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="ki-processor">🤖</div>
|
||||
<div class="flow-arrow">→</div>
|
||||
<div class="answer-output">💡</div>
|
||||
<div class="internal-system internal-workflow">
|
||||
<!-- SVG for connections and animated glow -->
|
||||
<svg class="internal-workflow-svg" viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet">
|
||||
<defs>
|
||||
<!-- Glow filter for the green light effect -->
|
||||
<filter id="internalGlow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background dashed connection paths -->
|
||||
<g class="internal-bg-paths">
|
||||
<!-- Path from Search to split point -->
|
||||
<path id="int-path1-bg" d="M 55 60 L 95 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from split to Document (top) -->
|
||||
<path id="int-path2a-bg" d="M 95 60 L 115 60 L 115 30 L 135 30" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from split to Message (bottom) -->
|
||||
<path id="int-path2b-bg" d="M 95 60 L 115 60 L 115 90 L 135 90" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from Document to merge point -->
|
||||
<path id="int-path3a-bg" d="M 175 30 L 195 30 L 195 60 L 205 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from Message to merge point -->
|
||||
<path id="int-path3b-bg" d="M 175 90 L 195 90 L 195 60 L 205 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from merge to KI Processor -->
|
||||
<path id="int-path4-bg" d="M 205 60 L 215 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
<!-- Path from KI Processor to Lightbulb -->
|
||||
<path id="int-path5-bg" d="M 255 60 L 275 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
|
||||
</g>
|
||||
|
||||
<!-- Animated green glow paths -->
|
||||
<g class="internal-glow-paths">
|
||||
<path id="int-path1" d="M 55 60 L 95 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path2a" d="M 95 60 L 115 60 L 115 30 L 135 30" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path2b" d="M 95 60 L 115 60 L 115 90 L 135 90" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path3a" d="M 175 30 L 195 30 L 195 60 L 205 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path3b" d="M 175 90 L 195 90 L 195 60 L 205 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path4" d="M 205 60 L 215 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
<path id="int-path5" d="M 255 60 L 275 60" stroke="var(--accent-green)" stroke-width="3" fill="none" class="int-glow-path"/>
|
||||
</g>
|
||||
|
||||
<!-- Node border rectangles for glow animation -->
|
||||
<g class="internal-node-borders">
|
||||
<rect id="int-node1-border" x="15" y="40" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node2-border" x="135" y="10" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node3-border" x="135" y="70" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node4-border" x="215" y="40" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
<rect id="int-node5-border" x="275" y="40" width="40" height="40" rx="8" class="int-node-border"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<!-- Node elements positioned over SVG -->
|
||||
<div class="internal-nodes">
|
||||
<div class="int-node int-node-1" title="Suchanfrage">🔍</div>
|
||||
<div class="int-node int-node-2" title="Dokumente">📄</div>
|
||||
<div class="int-node int-node-3" title="Nachrichten">💬</div>
|
||||
<div class="int-node int-node-4" title="KI Verarbeitung">🤖</div>
|
||||
<div class="int-node int-node-5" title="Antwort">💡</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Interne KI</h3>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user