This commit is contained in:
2026-02-09 11:02:15 +01:00
parent 1f0f9abc2e
commit 68f35123af
4 changed files with 340 additions and 54 deletions

View File

@@ -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>