redisgn

Profice WebSite/scripts/demo-chat.js

@@ -0,0 +1,140 @@
+/**
+ * Demo Chat Widget - Functional Chat Interface for KI Demo Section
+ * Connects to N8N webhook via send.php
+ */
+
+class DemoChat {
+    constructor() {
+        this.sessionId = this.generateSessionId();
+        this.isTyping = false;
+        this.messages = [];
+        this.chatMessages = null;
+        this.chatInput = null;
+        this.sendBtn = null;
+        
+        this.init();
+    }
+    
+    init() {
+        // Wait for DOM to be ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.setup());
+        } else {
+            this.setup();
+        }
+    }
+    
+    setup() {
+        // Get demo chat elements
+        this.chatMessages = document.querySelector('.chat-demo .chat-messages');
+        this.chatInput = document.querySelector('.chat-demo .chat-input-field');
+        this.sendBtn = document.querySelector('.chat-demo .chat-send-btn');
+        
+        if (!this.chatMessages || !this.chatInput || !this.sendBtn) {
+            console.warn('Demo chat elements not found');
+            return;
+        }
+        
+        this.bindEvents();
+    }
+    
+    generateSessionId() {
+        return 'demo_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+    
+    bindEvents() {
+        // Send on button click
+        this.sendBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.sendMessage();
+        });
+        
+        // Send on Enter key
+        this.chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.sendMessage();
+            }
+        });
+    }
+    
+    addMessageToUI(sender, text) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `chat-bubble ${sender === 'user' ? 'user-bubble' : ''}`;
+        messageDiv.innerHTML = `<span>${this.escapeHtml(text)}</span>`;
+        this.chatMessages.appendChild(messageDiv);
+        this.scrollToBottom();
+    }
+    
+    async sendMessage() {
+        const message = this.chatInput?.value?.trim();
+        
+        if (!message || this.isTyping) return;
+        
+        // Add user message to UI
+        this.addMessageToUI('user', message);
+        this.chatInput.value = '';
+        
+        // Show typing indicator
+        this.showTypingIndicator();
+        this.isTyping = true;
+        
+        try {
+            const response = await fetch('/scripts/add/send.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    type: 'chat',
+                    message: message,
+                    session_id: this.sessionId
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (data.success && data.data && data.data.ai_response) {
+                this.addMessageToUI('ki', data.data.ai_response);
+            } else {
+                this.addMessageToUI('ki', 'Entschuldigung, es gab ein Problem. Bitte versuchen Sie es später erneut.');
+            }
+        } catch (error) {
+            console.error('Demo chat error:', error);
+            this.addMessageToUI('ki', 'Verbindung zum Server fehlgeschlagen. Bitte überprüfen Sie Ihre Internetverbindung.');
+        } finally {
+            this.hideTypingIndicator();
+            this.isTyping = false;
+        }
+    }
+    
+    showTypingIndicator() {
+        if (!this.chatMessages.querySelector('.typing-indicator')) {
+            const typingDiv = document.createElement('div');
+            typingDiv.className = 'chat-bubble typing-indicator';
+            typingDiv.innerHTML = '<span>...</span>';
+            this.chatMessages.appendChild(typingDiv);
+            this.scrollToBottom();
+        }
+    }
+    
+    hideTypingIndicator() {
+        const typingIndicator = this.chatMessages.querySelector('.typing-indicator');
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+    }
+    
+    scrollToBottom() {
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+    }
+    
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// Initialize demo chat
+window.demoChat = new DemoChat();

Profice WebSite/scripts/script.js

@@ -41,6 +41,38 @@ document.addEventListener("DOMContentLoaded", function() {
     
     initSmoothScrolling();
     
+    // ==========================================
+    // 1.5. BUTTON NAVIGATION TO DEMO SECTION
+    // ==========================================
+    
+    function initButtonNavigation() {
+        const kiPhoneBtn = document.getElementById('kiPhoneBtn');
+        const chatBtn = document.getElementById('chatBtn');
+        const demoSection = document.getElementById('demo-section');
+        
+        if (demoSection) {
+            const scrollToDemo = () => {
+                const header = document.querySelector('.top-banner');
+                const headerHeight = header ? header.offsetHeight : 90;
+                
+                window.scrollTo({
+                    top: demoSection.offsetTop - headerHeight - 20,
+                    behavior: 'smooth'
+                });
+            };
+            
+            if (kiPhoneBtn) {
+                kiPhoneBtn.addEventListener('click', scrollToDemo);
+            }
+            
+            if (chatBtn) {
+                chatBtn.addEventListener('click', scrollToDemo);
+            }
+        }
+    }
+    
+    initButtonNavigation();
+    
     // ==========================================
     // 2. MENU TOGGLE
     // ==========================================

Profice WebSite/scripts/tech-onepager.js

@@ -409,8 +409,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     }, 200);
                 }, 100);
                 
-                // Show feedback
-                showInteractionFeedback('KI Telefon wird verbunden...');
+                // Show feedback - removed
             });
         }
     }
@@ -456,7 +455,7 @@ document.addEventListener('DOMContentLoaded', function() {
                         }, 200);
                     }, 100);
                     
-                    showInteractionFeedback('KI Chat wird gestartet...');
+                    // Show feedback - removed
                 });
             }
         }
@@ -497,7 +496,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     if (kiPhoneBtn) {
         kiPhoneBtn.addEventListener('click', () => {
-            showInteractionFeedback('KI Telefon wird verbunden...');
+            // Show feedback - removed
             // Scroll to interaction section
             document.getElementById('interaction')?.scrollIntoView({ 
                 behavior: 'smooth', 
@@ -508,7 +507,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     if (chatBtn) {
         chatBtn.addEventListener('click', () => {
-            showInteractionFeedback('KI Chat wird gestartet...');
+            // Show feedback - removed
             // Scroll to interaction section
             document.getElementById('interaction')?.scrollIntoView({ 
                 behavior: 'smooth',