ac7088c5ca
Features: - Complete Luftglanz drone cleaning website - AI chat assistant integrated with OpenAI API - Expert product advice for AGO Quart and Mellerud cleaning products - Formal German language support (Sie form) - Secure PHP backend for API calls - Responsive design with mobile support - Product-specific knowledge base - Safety statements from manufacturers - Multi-page integration (index, products, services, contact) Technical components: - AI chat widget (js/ai-chat.js) - Chat styling (css/components/ai-chat.css) - Backend API (ai-chat-api.php) - Product knowledge base with detailed specifications - Demo and documentation files
178 lines
6.2 KiB
HTML
178 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Chat Test - Luftglanz</title>
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<link rel="stylesheet" href="css/components/ai-chat.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #e8e9ea, #f5f5f5);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.demo-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
color: #2980b9;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.info-box {
|
|
background: #f8f9fa;
|
|
border-left: 4px solid #00adb8;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
|
|
.test-questions {
|
|
background: #fff;
|
|
border: 1px solid #e1e5e9;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.test-questions h3 {
|
|
color: #2980b9;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.question-button {
|
|
background: linear-gradient(135deg, #2980b9, #00adb8);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
margin: 5px;
|
|
border-radius: 25px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.question-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(41, 128, 185, 0.3);
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.feature {
|
|
background: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.feature h4 {
|
|
color: #2980b9;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="demo-container">
|
|
<h1>🤖 Luftglanz KI-Assistent Demo</h1>
|
|
|
|
<div class="info-box">
|
|
<h3>Willkommen zum KI-Assistenten Test!</h3>
|
|
<p>Dieser intelligente Chatbot wurde speziell für Luftglanz entwickelt und verfügt über umfassendes Wissen über:</p>
|
|
<ul>
|
|
<li><strong>AGO Quart Grünbelagentferner</strong> - Produktdetails, Anwendung, Dosierung</li>
|
|
<li><strong>Drohnen-Reinigungsservices</strong> - Vorteile, Anwendungsgebiete, Preise</li>
|
|
<li><strong>Oberflächenreinigung</strong> - Dächer, Terrassen, Fassaden</li>
|
|
<li><strong>Sicherheitshinweise</strong> - Korrekte Anwendung und Vorsichtsmaßnahmen</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-questions">
|
|
<h3>Testen Sie den Assistenten mit diesen Beispielfragen:</h3>
|
|
<button class="question-button" onclick="askQuestion('Wie wirkt AGO Quart und wie lange hält die Wirkung an?')">
|
|
Wie wirkt AGO Quart?
|
|
</button>
|
|
<button class="question-button" onclick="askQuestion('Welche Mischungsverhältnisse gibt es für verschiedene Verschmutzungen?')">
|
|
Mischungsverhältnisse
|
|
</button>
|
|
<button class="question-button" onclick="askQuestion('Kann AGO Quart bei Regen angewendet werden?')">
|
|
Anwendung bei Regen
|
|
</button>
|
|
<button class="question-button" onclick="askQuestion('Wie viel kostet eine Flaschenreinigung und welche Fläche kann damit behandelt werden?')">
|
|
Preis und Reichweite
|
|
</button>
|
|
<button class="question-button" onclick="askQuestion('Welche Vorteile bietet die Drohnen-Anwendung?')">
|
|
Drohnen-Vorteile
|
|
</button>
|
|
<button class="question-button" onclick="askQuestion('Ist AGO Quart umweltfreundlich und sicher?')">
|
|
Sicherheit & Umwelt
|
|
</button>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<h4>🎯 Präzise Antworten</h4>
|
|
<p>Basiert auf echten Produktdaten und technischen Spezifikationen</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h4>🇩🇪 Auf Deutsch</h4>
|
|
<p>Kommuniziert natürlich in deutscher Sprache</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h4>💡 Intelligent</h4>
|
|
<p>Versteht Kontext und gibt passende Empfehlungen</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h4>📱 Responsiv</h4>
|
|
<p>Funktioniert perfekt auf allen Geräten</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 30px;">
|
|
<p><strong>Der Chat-Button erscheint unten rechts auf der Seite!</strong></p>
|
|
<p>Klicken Sie darauf, um mit dem KI-Assistenten zu sprechen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/ai-chat.js"></script>
|
|
<script>
|
|
function askQuestion(question) {
|
|
// Wait for chat to be initialized
|
|
setTimeout(() => {
|
|
if (window.aiChat) {
|
|
// Open chat if not already open
|
|
if (!window.aiChat.isOpen) {
|
|
window.aiChat.toggleChat();
|
|
}
|
|
|
|
// Set the question in the input field
|
|
setTimeout(() => {
|
|
const input = document.getElementById('chat-input');
|
|
if (input) {
|
|
input.value = question;
|
|
input.focus();
|
|
}
|
|
}, 300);
|
|
}
|
|
}, 500);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|