Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

KI Chat Bubble

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-03-25 15:20:00 +01:00
parent 64e1959a1b
commit b21ade22f3
13 changed files with 262 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
Profice WebSite/index.html
View File

@@ -208,8 +208,8 @@
</div>
</section>
<!-- KI Demo Widgets Section -->
<section class="ki-demo-section" id="demo-section">
<!-- KI Demo Widgets Section — hidden: chat replaced by Flowise bubble; telefon pending relocation -->
<section class="ki-demo-section" id="demo-section" style="display:none">
<div class="container">
<span class="section-label">LIVE DEMO</span>
<h2 class="demo-section-title">Testen Sie es selbst. Jetzt.</h2>
@@ -239,30 +239,6 @@
</div>
</div>
<!-- KI Chat Widget -->
<div class="demo-widget chat-demo">
<div class="demo-icon-circle chat-icon">
<img src="images/icons/chat.png" alt="Chat" style="width: 56px; height: 56px;">
</div>
<h3>KI-Chat</h3>
<p>Stellen Sie eine Frage – die KI antwortet sofort und qualifiziert Ihr Anliegen.</p>
<div class="chat-preview">
<div class="chat-header">
<span class="online-dot"></span>
Profice KI · Online
</div>
<div class="chat-messages">
<div class="chat-bubble">
<span>Hallo! Ich bin der Profice KI-Assistent. Stellen Sie mir eine Frage – ich zeige Ihnen, wie das System funktioniert.</span>
</div>
</div>
<div class="chat-input-area">
<input type="text" class="chat-input-field" placeholder="Ihre Nachricht...">
<button class="chat-send-btn">Senden</button>
</div>
<p style="font-size: 0.75rem; color: #999999; margin: 4px 8px 0; line-height: 1.3;">Dies ist ein KI-System. Bitte geben Sie keine sensiblen personenbezogenen Daten ein.</p>
</div>
</div>
</div>
</div>
</section>
@@ -373,48 +349,6 @@
</div>
</section>
<!-- Investition Section -->
<section class="pricing-section" id="pricing">
<div class="container">
<span class="section-label">INVESTITION</span>
<h2 class="pricing-headline">Klare Preise. Keine Überraschungen.</h2>
<div class="pricing-box">
<div class="pricing-cards">
<div class="pricing-card">
<div class="pricing-amount">
<span class="pricing-prefix">ab</span>
<span class="pricing-value">3.000 €</span>
</div>
<div class="pricing-label">Einmalig Setup</div>
<div class="pricing-detail">je nach Umfang & Integrationen</div>
</div>
<div class="pricing-card">
<div class="pricing-amount">
<span class="pricing-prefix">ab</span>
<span class="pricing-value">990 €</span>
<span class="pricing-suffix">/Monat</span>
</div>
<div class="pricing-label">Laufender Betrieb</div>
<div class="pricing-detail">inkl. Monitoring, Support & Optimierung</div>
</div>
</div>
<p class="pricing-note">Der genaue Preis hängt davon ab, welche Module Sie brauchen und welche Systeme angebunden werden. In einem 15-Minuten-Gespräch können wir das klären.</p>
<div class="pricing-cta">
<a href="sites/offers.html" class="pricing-btn">Unverbindlich anfragen</a>
</div>
<div class="pricing-benefits">
<span class="pricing-benefit">✓ Keine Mindestlaufzeit über 3 Monate</span>
<span class="pricing-benefit">✓ Danach monatlich kündbar</span>
<span class="pricing-benefit">✓ Keine versteckten Kosten</span>
</div>
</div>
</div>
</section>
<!-- 3 Schritte Section -->
<section class="process-section" id="process">
@@ -578,5 +512,20 @@
<script src="scripts/chat.js?v=20260320e" defer></script>
<script src="scripts/demo-chat.js?v=20260320e" defer></script>
<!-- KI Chat Bubble — remove this block (and ki-chat-bubble.js) to disable -->
<style>
flowise-chatbot::part(button) {
box-shadow: 0 4px 20px rgba(90, 82, 82, 0.3);
border-radius: 50%;
}
flowise-chatbot::part(chatwindow) {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(90, 82, 82, 0.2);
font-family: 'Montserrat', sans-serif;
}
</style>
<script type="module" src="scripts/ki-chat-bubble.js"></script>
</body>
</html>