feat: BotKonzept Frontend erstellt

Neue Dateien: - index.html: Landing Page mit Registrierung - dashboard.html: Kunden-Dashboard - css/style.css: Haupt-Stylesheet (1500+ Zeilen) - css/dashboard.css: Dashboard-Styles (800+ Zeilen) - js/main.js: Landing Page JavaScript - js/dashboard.js: Dashboard JavaScript - logo/20250119_Logo_Botkozept.svg: Logo Features: - Modernes, responsives Design - Hero-Section mit Chat-Preview Animation - Feature-Übersicht und Pricing-Tabelle - Registrierungsformular mit Validierung - FAQ-Akkordeon - Dashboard mit PDF-Upload (Drag & Drop) - Chatbot-Test-Interface - Embed-Code Generator - Trial-Status und Upgrade-Banner - Mobile-optimiert
2026-01-28 22:31:54 +01:00
parent 13927f8bbf
commit b3224ed296
8 changed files with 5244 additions and 0 deletions
@@ -0,0 +1,181 @@
+# BotKonzept Frontend
+
+Modernes, responsives Frontend für die BotKonzept SaaS-Plattform.
+
+## 📁 Projektstruktur
+
+```
+customer-frontend/
+├── index.html          # Landing Page mit Registrierung
+├── dashboard.html      # Kunden-Dashboard
+├── css/
+│   ├── style.css       # Haupt-Stylesheet
+│   └── dashboard.css   # Dashboard-spezifische Styles
+├── js/
+│   ├── main.js         # Landing Page JavaScript
+│   └── dashboard.js    # Dashboard JavaScript
+└── logo/
+    └── 20250119_Logo_Botkozept.svg
+```
+
+## 🚀 Features
+
+### Landing Page (index.html)
+- ✅ Modernes, responsives Design
+- ✅ Hero-Section mit animiertem Chat-Preview
+- ✅ Feature-Übersicht
+- ✅ "So funktioniert's" Sektion
+- ✅ Pricing-Tabelle mit Rabatt-Timeline
+- ✅ Registrierungsformular
+- ✅ FAQ-Akkordeon
+- ✅ Mobile-optimiert
+
+### Dashboard (dashboard.html)
+- ✅ Übersicht mit Statistiken
+- ✅ PDF-Upload mit Drag & Drop
+- ✅ Dokumenten-Verwaltung
+- ✅ Chatbot-Test-Interface
+- ✅ Embed-Code Generator
+- ✅ Einstellungen
+- ✅ Trial-Status & Upgrade-Banner
+
+## 🎨 Design-System
+
+### Farben
+```css
+--primary: #6366f1;      /* Indigo */
+--secondary: #0ea5e9;    /* Sky Blue */
+--accent: #f59e0b;       /* Amber */
+--success: #10b981;      /* Emerald */
+--error: #ef4444;        /* Red */
+```
+
+### Typografie
+- Font: Inter (Google Fonts)
+- Responsive Schriftgrößen mit `clamp()`
+
+### Komponenten
+- Buttons (Primary, Outline, White)
+- Cards
+- Forms
+- Modals
+- Notifications
+
+## 🔧 Konfiguration
+
+### API-Endpunkte
+
+In `js/main.js`:
+```javascript
+const CONFIG = {
+    WEBHOOK_URL: 'https://n8n.userman.de/webhook/botkonzept-registration',
+    API_BASE_URL: 'https://api.botkonzept.de',
+};
+```
+
+### Webhook-Integration
+
+Das Registrierungsformular sendet folgende Daten an den Webhook:
+```json
+{
+    "firstName": "Max",
+    "lastName": "Mustermann",
+    "email": "max@beispiel.de",
+    "company": "Muster GmbH",
+    "website": "https://beispiel.de",
+    "newsletter": true,
+    "timestamp": "2025-01-25T10:00:00.000Z",
+    "source": "website"
+}
+```
+
+## 📱 Responsive Breakpoints
+
+- Desktop: > 1024px
+- Tablet: 768px - 1024px
+- Mobile: < 768px
+- Small Mobile: < 480px
+
+## 🚀 Deployment
+
+### Lokales Testen
+```bash
+cd customer-frontend
+python3 -m http.server 8000
+# Öffnen: http://localhost:8000
+```
+
+### Produktion
+```bash
+# Dateien auf Webserver kopieren
+rsync -avz . user@botkonzept.de:/var/www/botkonzept/
+```
+
+### NGINX Konfiguration
+```nginx
+server {
+    listen 80;
+    server_name botkonzept.de www.botkonzept.de;
+    
+    root /var/www/botkonzept;
+    index index.html;
+    
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    
+    # Cache static assets
+    location ~* \.(css|js|svg|png|jpg|jpeg|gif|ico)$ {
+        expires 30d;
+        add_header Cache-Control "public, immutable";
+    }
+}
+```
+
+## 🔒 Sicherheit
+
+- HTTPS erforderlich für Produktion
+- CORS-Header für API-Calls
+- Input-Validierung auf Client-Seite
+- XSS-Schutz durch HTML-Escaping
+
+## 📊 Analytics
+
+Google Analytics 4 Integration vorbereitet:
+```html
+<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
+```
+
+Conversion-Tracking:
+```javascript
+trackConversion('registration_complete', { email: '...' });
+```
+
+## 🎯 Customer Journey
+
+1. **Besucher** kommt auf botkonzept.de
+2. **Registrierung** über Formular
+3. **Instanz-Erstellung** (automatisch via n8n Workflow)
+4. **Dashboard-Zugang** per E-Mail
+5. **PDF-Upload** in Wissensdatenbank
+6. **Embed-Code** für Website kopieren
+7. **Trial-Reminder** (Tag 3, 5, 7)
+8. **Upgrade** oder Ablauf
+
+## 📝 TODO
+
+- [ ] Stripe/PayPal Integration
+- [ ] E-Mail-Verifizierung
+- [ ] Passwort-Reset
+- [ ] Multi-Language Support
+- [ ] Dark Mode
+- [ ] PWA Support
+
+## 📄 Lizenz
+
+Proprietär - Alle Rechte vorbehalten
+
+---
+
+**Version:** 1.0.0  
+**Erstellt:** Januar 2025