Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Oelchen Support - KI-basierter Hilfebereich</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| } | |
| .chat-message { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-dot { | |
| animation: typing 1.4s infinite ease-in-out both; | |
| } | |
| .typing-dot:nth-child(1) { animation-delay: -0.32s; } | |
| .typing-dot:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes typing { | |
| 0%, 80%, 100% { transform: scale(0); } | |
| 40% { transform: scale(1); } | |
| } | |
| .hover-lift { | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="sticky top-0 z-50 glass-effect border-b border-gray-200 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16 items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white font-bold text-xl"> | |
| O | |
| </div> | |
| <span class="font-bold text-xl text-gray-900">Oelchen Support</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#ki-assistent" class="text-gray-600 hover:text-purple-600 font-medium transition">KI-Assistent</a> | |
| <a href="#faq" class="text-gray-600 hover:text-purple-600 font-medium transition">FAQ</a> | |
| <a href="#kontakt" class="text-gray-600 hover:text-purple-600 font-medium transition">Kontakt</a> | |
| <button onclick="toggleChat()" class="gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition flex items-center gap-2"> | |
| <i data-lucide="message-circle" class="w-4 h-4"></i> | |
| Live Chat | |
| </button> | |
| </div> | |
| <button class="md:hidden" onclick="toggleMobileMenu()"> | |
| <i data-lucide="menu" class="w-6 h-6 text-gray-600"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200"> | |
| <div class="px-4 pt-2 pb-4 space-y-2"> | |
| <a href="#ki-assistent" class="block px-3 py-2 text-gray-600 hover:bg-purple-50 rounded-lg">KI-Assistent</a> | |
| <a href="#faq" class="block px-3 py-2 text-gray-600 hover:bg-purple-50 rounded-lg">FAQ</a> | |
| <a href="#kontakt" class="block px-3 py-2 text-gray-600 hover:bg-purple-50 rounded-lg">Kontakt</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section mit Suche --> | |
| <section class="gradient-bg text-white py-20 px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Wie können wir dir helfen?</h1> | |
| <p class="text-xl text-purple-100 mb-8">Finde sofortige Antworten mit unserer KI oder durchsuche unsere Wissensdatenbank</p> | |
| <div class="relative max-w-2xl mx-auto"> | |
| <input type="text" | |
| id="searchInput" | |
| placeholder="Stelle eine Frage oder suche nach Stichworten..." | |
| class="w-full px-6 py-4 rounded-2xl text-gray-800 text-lg shadow-2xl focus:outline-none focus:ring-4 focus:ring-purple-300 transition" | |
| onkeyup="handleSearch(event)"> | |
| <button class="absolute right-3 top-3 bg-purple-600 text-white p-2 rounded-xl hover:bg-purple-700 transition"> | |
| <i data-lucide="search" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 flex flex-wrap justify-center gap-3 text-sm"> | |
| <span class="text-purple-200">Beliebt:</span> | |
| <button onclick="quickSearch('Passwort zurücksetzen')" class="bg-white/20 hover:bg-white/30 px-4 py-1 rounded-full transition">Passwort zurücksetzen</button> | |
| <button onclick="quickSearch('Rechnung')" class="bg-white/20 hover:bg-white/30 px-4 py-1 rounded-full transition">Rechnung</button> | |
| <button onclick="quickSearch('Konto löschen')" class="bg-white/20 hover:bg-white/30 px-4 py-1 rounded-full transition">Konto löschen</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Schnellzugriff Kategorien --> | |
| <section class="py-12 px-4 -mt-10"> | |
| <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg hover-lift cursor-pointer border border-gray-100" onclick="quickSearch('Konto')"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-lucide="user" class="w-6 h-6 text-blue-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Konto & Profil</h3> | |
| <p class="text-gray-600 text-sm">Verwalte deine Einstellungen und persönlichen Daten</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg hover-lift cursor-pointer border border-gray-100" onclick="quickSearch('Zahlung')"> | |
| <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-lucide="credit-card" class="w-6 h-6 text-green-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Zahlungen & Abos</h3> | |
| <p class="text-gray-600 text-sm">Rechnungen, Zahlungsmethoden und Abonnements</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg hover-lift cursor-pointer border border-gray-100" onclick="quickSearch('Technisch')"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-lucide="settings" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Technischer Support</h3> | |
| <p class="text-gray-600 text-sm">Fehlerbehebung und technische Probleme</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg hover-lift cursor-pointer border border-gray-100" onclick="quickSearch('Sicherheit')"> | |
| <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-lucide="shield" class="w-6 h-6 text-red-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Sicherheit & Datenschutz</h3> | |
| <p class="text-gray-600 text-sm">Datenschutz, Sicherheitseinstellungen und 2FA</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- KI-Assistent Section --> | |
| <section id="ki-assistent" class="py-16 px-4 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <span class="bg-purple-100 text-purple-700 px-4 py-1 rounded-full text-sm font-semibold">NEU</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mt-4 mb-4">KI-Support Assistent</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Unser intelligenter Assistent beantwortet deine Fragen in Echtzeit. Verfügbar 24/7 für sofortige Hilfe.</p> | |
| </div> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <!-- Chat Interface --> | |
| <div class="lg:col-span-2 bg-gray-50 rounded-3xl border border-gray-200 overflow-hidden shadow-xl"> | |
| <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <div class="relative"> | |
| <div class="w-10 h-10 gradient-bg rounded-full flex items-center justify-center"> | |
| <i data-lucide="bot" class="w-5 h-5 text-white"></i> | |
| </div> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-gray-900">Oelchen AI</h3> | |
| <p class="text-xs text-gray-500">Online • Antwortet sofort</p> | |
| </div> | |
| </div> | |
| <button onclick="clearChat()" class="text-gray-400 hover:text-gray-600 transition"> | |
| <i data-lucide="trash-2" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div id="chat-messages" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50"> | |
| <!-- Willkommensnachricht --> | |
| <div class="flex gap-3 chat-message"> | |
| <div class="w-8 h-8 gradient-bg rounded-full flex-shrink-0 flex items-center justify-center"> | |
| <i data-lucide="bot" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm max-w-[80%] border border-gray-100"> | |
| <p class="text-gray-800">Hallo! 👋 Ich bin dein KI-Assistent für Oelchen. Wie kann ich dir heute helfen?</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <button onclick="sendQuickMessage('Wie ändere ich mein Passwort?')" class="text-xs bg-purple-50 text-purple-700 px-3 py-1 rounded-full hover:bg-purple-100 transition">Passwort ändern</button> | |
| <button onclick="sendQuickMessage('Wie kündige ich mein Abo?')" class="text-xs bg-purple-50 text-purple-700 px-3 py-1 rounded-full hover:bg-purple-100 transition">Abo kündigen</button> | |
| <button onclick="sendQuickMessage('Ich habe einen Fehler gefunden')" class="text-xs bg-purple-50 text-purple-700 px-3 py-1 rounded-full hover:bg-purple-100 transition">Fehler melden</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-white border-t border-gray-200"> | |
| <div class="flex gap-2"> | |
| <input type="text" | |
| id="chat-input" | |
| placeholder="Schreibe deine Nachricht..." | |
| class="flex-1 px-4 py-3 rounded-xl border border-gray-200 focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200 transition" | |
| onkeypress="handleChatKeypress(event)"> | |
| <button onclick="sendMessage()" class="gradient-bg text-white px-6 py-3 rounded-xl hover:opacity-90 transition flex items-center gap-2"> | |
| <i data-lucide="send" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-2 text-center">Powered by Oelchen AI • Antworten werden generiert</p> | |
| </div> | |
| </div> | |
| <!-- Info Sidebar --> | |
| <div class="space-y-6"> | |
| <div class="bg-purple-50 rounded-2xl p-6 border border-purple-100"> | |
| <h4 class="font-bold text-purple-900 mb-3 flex items-center gap-2"> | |
| <i data-lucide="sparkles" class="w-5 h-5"></i> | |
| KI-Funktionen | |
| </h4> | |
| <ul class="space-y-3 text-sm text-purple-800"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> | |
| <span>Natürliche Sprachverarbeitung für komplexe Anfragen</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> | |
| <span>Kontextbewusste Antworten basierend auf deinem Konto</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> | |
| <span>Automatische Eskalation zu menschlichen Agenten</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm"> | |
| <h4 class="font-bold text-gray-900 mb-3">Betriebszeiten</h4> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">KI-Assistent:</span> | |
| <span class="text-green-600 font-bold">24/7</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Menschliche Agenten:</span> | |
| <span class="text-gray-800">Mo-Fr: 8-20 Uhr</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">E-Mail Support:</span> | |
| <span class="text-gray-800">24h Antwortzeit</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-purple-600 to-indigo-700 rounded-2xl p-6 text-white shadow-lg"> | |
| <h4 class="font-bold text-lg mb-2">Brauchst du mehr Hilfe?</h4> | |
| <p class="text-purple-100 text-sm mb-4">Unser Team steht dir rund um die Uhr zur Verfügung.</p> | |
| <button onclick="contactSupport()" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-50 transition w-full"> | |
| Jetzt Kontakt aufnehmen | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-16 px-4 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-900">Häufig gestellte Fragen</h2> | |
| <div class="space-y-4"> | |
| <details class="bg-white rounded-2xl shadow-sm border border-gray-200 group"> | |
| <summary class="p-6 cursor-pointer font-medium flex justify-between items-center"> | |
| Wie kann ich mein Passwort zurücksetzen? | |
| <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i> | |
| </summary> | |
| <div class="px-6 pb-6 text-gray-600"> | |
| Gehe auf deine Kontoeinstellungen, klicke auf "Sicherheit" und wähle "Passwort zurücksetzen". Wir senden dir dann eine E-Mail mit einem Link, um dein Passwort neu zu setzen. | |
| </div> | |
| </details> | |
| <details class="bg-white rounded-2xl shadow-sm border border-gray-200 group"> | |
| <summary class="p-6 cursor-pointer font-medium flex justify-between items-center"> | |
| Wie kündige ich mein Abo? | |
| <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i> | |
| </summary> | |
| <div class="px-6 pb-6 text-gray-600"> | |
| Du kannst dein Abo jederzeit in den Abo-Einstellungen kündigen. Die Kündigung tritt zum Ende des aktuellen Abonnement-Perioden ein. | |
| </div> | |
| </details> | |
| <details class="bg-white rounded-2xl shadow-sm border border-gray-200 group"> | |
| <summary class="p-6 cursor-pointer font-medium flex justify-between items-center"> | |
| Wie aktualisiere ich meine Zahlungsmethode? | |
| <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i> | |
| </summary> | |
| <div class="px-6 pb-6 text-gray-600"> | |
| Gehe zu "Zahlungen" in deinen Kontoeinstellungen und klicke auf "Zahlungsmethode ändern". Dort kannst du neue Kreditkarten oder Bankverbindungen hinzufügen. | |
| </div> | |
| </details> | |
| <details class="bg-white rounded-2xl shadow-sm border border-gray-200 group"> | |
| <summary class="p-6 cursor-pointer font-medium flex justify-between items-center"> | |
| Wie kann ich mein Konto löschen? | |
| <i data-lucide="chevron-down" class="w-5 h-5 transition group-open:rotate-180"></i> | |
| </summary> | |
| <div class="px-6 pb-6 text-gray-600"> | |
| Du kannst dein Konto in den Einstellungen unter "Sicherheit" löschen. Beachte, dass dies eine dauerhafte Aktion ist und alle deine Daten entfernt werden. | |
| </div> | |
| </details> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Kontakt Section --> | |
| <section id="kontakt" class="py-16 px-4 bg-white"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-900">Kontaktiere uns</h2> | |
| <p class="text-gray-600 mb-10 max-w-2xl mx-auto">Hast du noch Fragen? Unser Support-Team hilft dir gerne weiter.</p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-purple-50 rounded-2xl p-6 border border-purple-100"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4 mx-auto"> | |
| <i data-lucide="mail" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">E-Mail</h3> | |
| <p class="text-gray-600 mb-2">support@oelchen.app</p> | |
| <p class="text-sm text-gray-500">24h Antwortzeit</p> | |
| </div> | |
| <div class="bg-purple-50 rounded-2xl p-6 border border-purple-100"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4 mx-auto"> | |
| <i data-lucide="message-circle" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Live Chat</h3> | |
| <p class="text-gray-600 mb-2">24/7 verfügbar</p> | |
| <p class="text-sm text-gray-500">Sofortige Antworten</p> | |
| </div> | |
| <div class="bg-purple-50 rounded-2xl p-6 border border-purple-100"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4 mx-auto"> | |
| <i data-lucide="phone" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Telefon</h3> | |
| <p class="text-gray-600 mb-2">+49 (0) 30 1234567</p> | |
| <p class="text-sm text-gray-500">Mo-Fr: 8-20 Uhr</p> | |
| </div> | |
| </div> | |
| <form class="mt-12 max-w-2xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> | |
| <input type="text" placeholder="Dein Name" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 transition"> | |
| <input type="email" placeholder="E-Mail Adresse" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 transition"> | |
| </div> | |
| <textarea placeholder="Deine Nachricht..." rows="5" class="w-full px-4 py-3 rounded-xl border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 transition mb-4"></textarea> | |
| <button type="button" onclick="submitContactForm()" class="w-full gradient-bg text-white px-8 py-3 rounded-xl font-semibold hover:opacity-90 transition"> | |
| Nachricht senden | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-12 px-4"> | |
| <div class="max-w-7xl mx-auto grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center text-white font-bold"> | |
| O | |
| </div> | |
| <span class="font-bold text-xl text-white">Oelchen</span> | |
| </div> | |
| <p class="text-sm">Deine tägliche Portion Inspiration und Information.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Produkt</h4> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-purple-400 transition">Features</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">Preise</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">Apps</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#ki-assistent" class="hover:text-purple-400 transition">KI-Assistent</a></li> | |
| <li><a href="#faq" class="hover:text-purple-400 transition">Hilfezentrum</a></li> | |
| <li><a href="#kontakt" class="hover:text-purple-400 transition">Kontakt</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Rechtliches</h4> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:text-purple-400 transition">Impressum</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">Datenschutz</a></li> | |
| <li><a href="#" class="hover:text-purple-400 transition">AGB</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="max-w-7xl mx-auto mt-12 pt-8 border-t border-gray-800 text-center text-sm"> | |
| <p>© 2025 Oelchen. Alle Rechte vorbehalten.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Lucide Icons | |
| lucide.createIcons(); | |
| // Mobile Menu Toggle | |
| function toggleMobileMenu() { | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenu.classList.toggle('hidden'); | |
| } | |
| // Chat Toggle | |
| function toggleChat() { | |
| const chatSection = document.getElementById('ki-assistent'); | |
| chatSection.scrollIntoView({ behavior: 'smooth' }); | |
| } | |
| // Quick Search | |
| function quickSearch(query) { | |
| const searchInput = document.getElementById('searchInput'); | |
| searchInput.value = query; | |
| performSearch(query); | |
| } | |
| // Search Handler | |
| function handleSearch(event) { | |
| if (event.key === 'Enter') { | |
| performSearch(event.target.value); | |
| } | |
| } | |
| function performSearch(query) { | |
| if (query.trim() === '') return; | |
| // In a real application, this would search your knowledge base | |
| // For demo, we'll just show a notification | |
| showNotification(`Suche nach "${query}"...`, 'info'); | |
| } | |
| // Chat Functions | |
| function handleChatKeypress(event) { | |
| if (event.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| } | |
| function sendMessage() { | |
| const chatInput = document.getElementById('chat-input'); | |
| const message = chatInput.value.trim(); | |
| if (message === '') return; | |
| // Add user message | |
| addMessageToChat(message, 'user'); | |
| chatInput.value = ''; | |
| // Simulate AI thinking | |
| showTypingIndicator(); | |
| // Simulate AI response | |
| setTimeout(() => { | |
| removeTypingIndicator(); | |
| const aiResponse = generateAIResponse(message); | |
| addMessageToChat(aiResponse, 'ai'); | |
| }, 1500); | |
| } | |
| function sendQuickMessage(message) { | |
| const chatInput = document.getElementById('chat-input'); | |
| chatInput.value = message; | |
| sendMessage(); | |
| } | |
| function addMessageToChat(message, sender) { | |
| const chatContainer = document.getElementById('chat-messages'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `flex gap-3 chat-message ${sender === 'user' ? 'flex-row-reverse' : ''}`; | |
| const avatarDiv = document.createElement('div'); | |
| avatarDiv.className = `w-8 h-8 ${sender === 'user' ? 'bg-gray-600' : 'gradient-bg'} rounded-full flex-shrink-0 flex items-center justify-center`; | |
| avatarDiv.innerHTML = sender === 'user' ? '<i data-lucide="user" class="w-4 h-4 text-white"></i>' : '<i data-lucide="bot" class="w-4 h-4 text-white"></i>'; | |
| const messageContentDiv = document.createElement('div'); | |
| messageContentDiv.className = `max-w-[80%] p-4 rounded-2xl shadow-sm ${sender === 'user' | |
| ? 'bg-purple-600 text-white rounded-tr-none' | |
| : 'bg-white text-gray-800 rounded-tl-none border border-gray-100'}`; | |
| messageContentDiv.innerHTML = message; | |
| messageDiv.appendChild(sender === 'user' ? messageContentDiv : avatarDiv); | |
| messageDiv.appendChild(sender === 'user' ? avatarDiv : messageContentDiv); | |
| chatContainer.appendChild(messageDiv); | |
| // Scroll to bottom | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Update icons | |
| lucide.createIcons(); | |
| } | |
| function showTypingIndicator() { | |
| const chatContainer = document.getElementById('chat-messages'); | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'flex gap-3 chat-message'; | |
| typingDiv.id = 'typing-indicator'; | |
| const avatarDiv = document.createElement('div'); | |
| avatarDiv.className = 'w-8 h-8 gradient-bg rounded-full flex-shrink-0 flex items-center justify-center'; | |
| avatarDiv.innerHTML = '<i data-lucide="bot" class="w-4 h-4 text-white"></i>'; | |
| const typingContentDiv = document.createElement('div'); | |
| typingContentDiv.className = 'max-w-[80%] p-4 rounded-2xl rounded-tl-none shadow-sm bg-white border border-gray-100'; | |
| typingContentDiv.innerHTML = '<div class="flex gap-1"><div class="w-2 h-2 bg-gray-400 rounded-full typing-dot"></div><div class="w-2 h-2 bg-gray-400 rounded-full typing-dot"></div><div class="w-2 h-2 bg-gray-400 rounded-full typing-dot"></div></div>'; | |
| typingDiv.appendChild(avatarDiv); | |
| typingDiv.appendChild(typingContentDiv); | |
| chatContainer.appendChild(typingDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| lucide.createIcons(); | |
| } | |
| function removeTypingIndicator() { | |
| const indicator = document.getElementById('typing-indicator'); | |
| if (indicator) { | |
| indicator.remove(); | |
| } | |
| } | |
| function clearChat() { | |
| const chatContainer = document.getElementById('chat-messages'); | |
| chatContainer.innerHTML = ` | |
| <div class="flex gap-3 chat-message"> | |
| <div class="w-8 h-8 gradient-bg rounded-full flex-shrink-0 flex items-center justify-center"> | |
| <i data-lucide="bot" class="w-4 h-4 text-white"></i> | |
| </div> | |
| <div class="bg-white p-4 rounded-2xl rounded-tl-none shadow-sm max-w-[80%] border border-gray-100"> | |
| <p class="text-gray-800">Chatverlauf gelöscht. Wie kann ich dir jetzt helfen?</p> | |
| </div> | |
| </div>`; | |
| lucide.createIcons(); | |
| } | |
| function generateAIResponse(message) { | |
| const responses = { | |
| 'passwort': 'Um dein Passwort zurückzusetzen, gehe auf deine Kontoeinstellungen, klicke auf "Sicherheit" und wähle "Passwort zurücksetzen". Wir senden dir dann eine E-Mail mit einem Link, um dein Passwort neu zu setzen.', | |
| 'kündigen': 'Du kannst dein Abo jederzeit in den Abo-Einstellungen kündigen. Die Kündigung tritt zum Ende des aktuellen Abonnement-Perioden ein.', | |
| 'zahlung': 'Um deine Zahlungsmethode zu ändern, gehe zu "Zahlungen" in deinen Kontoeinstellungen und klicke auf "Zahlungsmethode ändern". Dort kannst du neue Kreditkarten oder Bankverbindungen hinzufügen.', | |
| 'fehler': 'Tut mir leid zu hören, dass du einen Fehler gefunden hast! Könntest du mir mehr Details geben? Ich melde das sofort unserem Technik-Team.', | |
| 'kontakt': 'Du kannst uns über den Live-Chat, per E-Mail unter support@oelchen.app oder telefonisch erreichen. Unsere Öffnungszeiten sind Mo-Fr von 8-20 Uhr.', | |
| 'default': 'Das ist eine interessante Frage! Um dir bestmöglich zu helfen, könnte ich mehr Details wissen. Alternativ kannst du auch unsere FAQ-Bereich besuchen oder direkt mit uns per Live-Chat verbinden.' | |
| }; | |
| const lowerMessage = message.toLowerCase(); | |
| for (const key in responses) { | |
| if (lowerMessage.includes(key)) { | |
| return responses[key]; | |
| } | |
| } | |
| return responses['default']; | |
| } | |
| function showNotification(message, type = 'info') { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-xl shadow-lg transition-all transform translate-y-20 opacity-0 z-50 ${ | |
| type === 'info' ? 'bg-purple-600 text-white' : | |
| type === 'error' ? 'bg-red-600 text-white' : 'bg-green-600 text-white' | |
| }`; | |
| notification.innerHTML = `${type === 'info' ? '<i data-lucide="info" class="inline-block w-5 h-5 mr-2"></i>' : ''}${message}`; | |
| document.body.appendChild(notification); | |
| // Show notification | |
| setTimeout(() => { | |
| notification.classList.remove('translate-y-20', 'opacity-0'); | |
| }, 100); | |
| // Remove after 3 seconds | |
| setTimeout(() => { | |
| notification.classList.add('translate-y-20', 'opacity-0'); | |
| setTimeout(() => { | |
| if (notification.parentNode) { | |
| notification.parentNode.removeChild(notification); | |
| } | |
| }, 300); | |
| }, 3000); | |
| lucide.createIcons(); | |
| } | |
| function contactSupport() { | |
| showNotification('Verbinde mit Support-Agenten...', 'info'); | |
| } | |
| function submitContactForm() { | |
| showNotification('Nachricht erfolgreich gesendet!', 'success'); | |
| // In a real application, this would submit the form data | |
| } | |
| // Initialize icons on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| lucide.createIcons(); | |
| // Add keyboard listener for chat | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Escape') { | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| toggleMobileMenu(); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |