Initial commit: Luftglanz drone website with integrated AI chat assistant
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
This commit is contained in:
Luftglanz
177
ai-chat-demo.html
Normal file
177
ai-chat-demo.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user