96 lines
3.9 KiB
Markdown
96 lines
3.9 KiB
Markdown
|
# CLAUDE.md
|
|||
|
|
|
|||
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|||
|
|
|
|||
|
|
## Project Overview
|
|||
|
|
|
|||
|
|
BotKonzept Frontend — a static SaaS landing page and customer dashboard for an AI chatbot service. Users can upload PDFs, create chatbots trained on their documents, and embed them on their websites.
|
|||
|
|
|
|||
|
|
**Stack:** Vanilla HTML5 / CSS3 / JavaScript (ES6+). No framework, no bundler, no package manager.
|
|||
|
|
|
|||
|
|
## Local Development
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
python3 -m http.server 8000
|
|||
|
|
# → http://localhost:8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
No build step required. Edit files and refresh the browser.
|
|||
|
|
|
|||
|
|
## Architecture
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
index.html # Public landing page: hero, features, pricing, registration form, FAQ
|
|||
|
|
dashboard.html # Authenticated customer dashboard
|
|||
|
|
css/
|
|||
|
|
style.css # Landing page styles (~30KB) — CSS variables, components, animations
|
|||
|
|
dashboard.css # Dashboard styles (~21KB) — sidebar layout, chat UI, file upload
|
|||
|
|
js/
|
|||
|
|
main.js # Landing page logic — registration form, FAQ accordion, scroll animations
|
|||
|
|
dashboard.js # Dashboard logic — file upload, chatbot chat, embed code, settings
|
|||
|
|
logo/ # SVG logo asset
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Key Implementation Details
|
|||
|
|
|
|||
|
|
### API / Webhook Integration
|
|||
|
|
|
|||
|
|
Endpoints are defined as `CONFIG` objects at the top of each JS file:
|
|||
|
|
|
|||
|
|
- **Registration webhook:** `https://n8n.userman.de/webhook/botkonzept-registration` (`main.js`)
|
|||
|
|
- **API base:** `https://api.botkonzept.de` (`dashboard.js`)
|
|||
|
|
|
|||
|
|
The dashboard has a full **demo mode** that works without a backend — it uses `localStorage` for session state and simulates uploads/responses with dummy data.
|
|||
|
|
|
|||
|
|
### dashboard.js Feature Areas
|
|||
|
|
|
|||
|
|
- **Auth:** Session check via `localStorage`; falls back to demo mode
|
|||
|
|
- **File Upload:** Drag-and-drop + click, PDF-only, max 10 MB; simulates upload progress
|
|||
|
|
- **Chat:** User/bot message UI, typing indicator, webhook call with demo fallback
|
|||
|
|
- **Embed Code:** Clipboard API copy with `document.execCommand` fallback
|
|||
|
|
- **Trial Banner:** Dynamic discount logic — 30% on day 3, 15% on day 5, 48-hour countdown
|
|||
|
|
- **Settings:** Bot name, welcome message, and color saved to `localStorage`
|
|||
|
|
|
|||
|
|
### main.js Feature Areas
|
|||
|
|
|
|||
|
|
- Registration form: validates email + URL, POSTs to n8n webhook with German error messages
|
|||
|
|
- FAQ accordion (one item open at a time)
|
|||
|
|
- Scroll animations via `IntersectionObserver`
|
|||
|
|
- Typing animation in chat preview section
|
|||
|
|
|
|||
|
|
### CSS Design Tokens
|
|||
|
|
|
|||
|
|
Defined as CSS variables in `style.css`:
|
|||
|
|
- Primary: `#6366f1` (indigo), Secondary: `#0ea5e9` (sky blue), Accent: amber, Success: emerald, Error: red
|
|||
|
|
- Font: Inter (Google Fonts CDN)
|
|||
|
|
- Responsive breakpoints: `>1024px` desktop, `768–1024px` tablet, `<768px` mobile, `<480px` small mobile
|
|||
|
|
|
|||
|
|
### Security
|
|||
|
|
|
|||
|
|
- Chat messages are HTML-escaped before insertion to prevent XSS
|
|||
|
|
- Form inputs validated client-side before submission
|
|||
|
|
|
|||
|
|
## React-Migration (landing-react/)
|
|||
|
|
|
|||
|
|
Vollständige React-SPA unter `landing-react/` — originalgetreue Portierung der `index.html`-Landingpage.
|
|||
|
|
|
|||
|
|
**Stack:** Vite · React 18 · TypeScript · Tailwind CSS · Lucide React
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd landing-react
|
|||
|
|
npm install
|
|||
|
|
npm run dev # Entwicklungsserver → http://localhost:5173
|
|||
|
|
npm run build # Produktions-Build → dist/
|
|||
|
|
npm run preview # Build lokal vorschauen
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Komponenten:** `Navbar`, `Hero`, `TrustedBy`, `Features`, `Steps`, `Pricing`, `RegistrationSection`, `FAQ`, `CTA`, `Footer`
|
|||
|
|
|
|||
|
|
**Registrierungsformular:** POST an `https://n8n.zq0.de/webhook-test/test`. Status-States: `idle → loading → success | error`. Erfolgsantwort wird als JSON-Karte oder Bild dargestellt.
|
|||
|
|
|
|||
|
|
**Globale Stile:** Gradient-Utilities (`.gradient-text`, `.bg-gradient-primary`, `.btn-gradient`), Typing-Dots-Animation und FAQ-Accordion-Transition in `src/index.css`. Tailwind-Farberweiterungen (`primary`, `primary-dark`, `primary-light`, `secondary`, `accent`, `success`, `error`) in `tailwind.config.js`.
|
|||
|
|
|
|||
|
|
## Localization
|
|||
|
|
|
|||
|
|
All user-facing strings are in **German (de-DE)**. Number/date formatting uses `de-DE` locale.
|