b3224ed296
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
182 lines
3.8 KiB
Markdown
182 lines
3.8 KiB
Markdown
# 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
|