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

@@ -4,6 +4,11 @@ ENV WEB_DOCUMENT_ROOT=/app
COPY ["Profice WebSite/", "/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 EXPOSE 80

View File

@@ -157,19 +157,27 @@
<!-- KI Telefonassistent --> <!-- KI Telefonassistent -->
<div class="system-card" data-system="phone"> <div class="system-card" data-system="phone">
<div class="system-visual"> <div class="system-visual">
<div class="phone-system"> <div class="phone-system phone-workflow">
<div class="phone-icon">📞</div> <!-- SVG for connections -->
<div class="waveform"> <svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
<div class="waveform-bar"></div> <!-- Background dashed connection paths -->
<div class="waveform-bar"></div> <g class="workflow-bg-paths">
<div class="waveform-bar"></div> <!-- Path from Phone to KI Processor -->
<div class="waveform-bar"></div> <path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
<div class="waveform-bar"></div> <!-- Path from KI Processor to CRM -->
<div class="waveform-bar"></div> <path d="M 130 60 L 170 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
<div class="waveform-bar"></div> <!-- 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>
<div class="ki-processor">🤖</div>
<div class="crm-output">📊</div>
</div> </div>
</div> </div>
<h3>KI Telefonassistent</h3> <h3>KI Telefonassistent</h3>
@@ -197,14 +205,27 @@
<!-- KI Chat --> <!-- KI Chat -->
<div class="system-card" data-system="chat"> <div class="system-card" data-system="chat">
<div class="system-visual"> <div class="system-visual">
<div class="chat-system"> <div class="chat-system chat-workflow">
<div class="website-input">🌐</div> <!-- SVG for connections -->
<div class="flow-arrow"></div> <svg class="workflow-svg" viewBox="0 0 280 120" preserveAspectRatio="xMidYMid meet">
<div class="ki-processor">🤖</div> <!-- Background dashed connection paths -->
<div class="flow-arrow"></div> <g class="workflow-bg-paths">
<div class="category-output">📋</div> <!-- Path from Website to KI Processor -->
<div class="flow-arrow"></div> <path d="M 50 60 L 90 60" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="6,4" fill="none" opacity="0.4"/>
<div class="human-output">👤</div> <!-- 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>
</div> </div>
<h3>KI Chat</h3> <h3>KI Chat</h3>
@@ -232,14 +253,67 @@
<!-- Interne KI --> <!-- Interne KI -->
<div class="system-card" data-system="internal"> <div class="system-card" data-system="internal">
<div class="system-visual"> <div class="system-visual">
<div class="internal-system"> <div class="internal-system internal-workflow">
<div class="search-input">🔍</div> <!-- SVG for connections and animated glow -->
<div class="flow-arrow"></div> <svg class="internal-workflow-svg" viewBox="0 0 320 120" preserveAspectRatio="xMidYMid meet">
<div class="documents-cloud">💬</div> <defs>
<div class="flow-arrow"></div> <!-- Glow filter for the green light effect -->
<div class="ki-processor">🤖</div> <filter id="internalGlow" x="-50%" y="-50%" width="200%" height="200%">
<div class="flow-arrow"></div> <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<div class="answer-output">💡</div> <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>
</div> </div>
<h3>Interne KI</h3> <h3>Interne KI</h3>

View File

@@ -29,17 +29,37 @@ document.addEventListener('DOMContentLoaded', function() {
// Also redraw after a short delay for CSS transitions // Also redraw after a short delay for CSS transitions
setTimeout(drawConnections, 300); setTimeout(drawConnections, 300);
setTimeout(drawConnections, 600); setTimeout(drawConnections, 600);
setTimeout(drawConnections, 1000);
// Redraw on resize // Redraw on resize with multiple delayed calls to handle CSS transitions
let resizeTimeout; let resizeTimeout;
let resizeRAF;
window.addEventListener('resize', function() { window.addEventListener('resize', function() {
// Cancel any pending animation frame
if (resizeRAF) cancelAnimationFrame(resizeRAF);
clearTimeout(resizeTimeout); 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) // Redraw on orientation change (mobile)
window.addEventListener('orientationchange', function() { window.addEventListener('orientationchange', function() {
setTimeout(drawConnections, 300); 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 // Initialize tooltip system

View File

@@ -130,6 +130,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
transition: transform 0.3s ease;
} }
.connections { .connections {
@@ -1096,6 +1097,173 @@
50% { transform: scale(1.2); opacity: 0.8; } 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 { .chat-message {
background: transparent; background: transparent;
border-radius: 8px; border-radius: 8px;
@@ -2304,72 +2472,72 @@
} }
.system-graphic { .system-graphic {
transform: scale(0.75); transform: scale(0.85);
width: 130%; width: 120%;
margin-left: -15%; margin-left: -10%;
} }
.central-node { .central-node {
min-width: 100px; min-width: 120px;
max-width: 120px; max-width: 140px;
padding: 6px 12px; padding: 8px 14px;
border-radius: 16px; border-radius: 18px;
} }
.central-node .node-icon { .central-node .node-icon {
font-size: 0.9rem; font-size: 1.1rem;
} }
.central-node .node-label { .central-node .node-label {
font-size: 0.65rem; font-size: 0.75rem;
} }
.node { .node {
min-width: 70px; min-width: 85px;
padding: 8px; padding: 10px;
font-size: 0.7rem; font-size: 0.8rem;
} }
.node-icon { .node-icon {
font-size: 1rem; font-size: 1.3rem;
} }
.node-label { .node-label {
font-size: 0.65rem; font-size: 0.75rem;
} }
/* Compact circular layout for mobile */ /* Compact circular layout for mobile */
.phone-node { .phone-node {
top: 5%; top: 5%;
left: 50%; left: 50%;
transform: translateX(-50%) scale(0.85); transform: translateX(-50%);
} }
.chat-node { .chat-node {
top: 25%; top: 25%;
right: 5%; right: 5%;
left: auto; left: auto;
transform: scale(0.85); transform: none;
} }
.crm-node { .crm-node {
bottom: 25%; bottom: 25%;
right: 5%; right: 5%;
left: auto; left: auto;
transform: scale(0.85); transform: none;
} }
.ticket-node { .ticket-node {
bottom: 5%; bottom: 5%;
left: 50%; left: 50%;
transform: translateX(-50%) scale(0.85); transform: translateX(-50%);
} }
.team-node { .team-node {
top: 25%; top: 25%;
left: 5%; left: 5%;
right: auto; right: auto;
transform: scale(0.85); transform: none;
} }
} }
@@ -2390,13 +2558,32 @@
} }
.hero-right { .hero-right {
height: 280px; height: 300px;
} }
.system-graphic { .system-graphic {
transform: scale(0.65); transform: scale(0.8);
width: 150%; width: 130%;
margin-left: -25%; 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 { .cta-btn {