20bf5afe28d77459b89092466d302c9485941f65
Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie eine App; der Desktop bleibt pixelgleich. - Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar - Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab "Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste) - Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen, Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar - Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch nach der Android-Zurueck-Geste wieder) - Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis "Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite, Kundendaten werden nicht zwischengespeichert - Installierte App: Kuendigen/Widerrufen mit Link zurueck in den Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster - Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken - Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Webklar Kundenbereich
Kundenportal für Website-Projekte. Liest ausschließlich aus woms-database auf ticket.webklar.com (Ticketsystem). Es gibt keine eigene Portal-Datenbank mehr.
- Keine Kundenanlage im Portal
- Keine Admin-Funktionen
- Login über Appwrite Auth (ein User pro Kunde, verknüpft über
customers.appwriteUserId)
Verwaltung (Kunden, Passwörter, Projekte, Freischaltung): Ticketsystem.
Struktur
server/ Express-API, Appwrite, Gitea-Webhook
public/ Login & Dashboard (statisch)
Schnellstart
cp .env.example .env
# SESSION_SECRET (min. 32 Zeichen) und APPWRITE_API_KEY setzen
npm install
npm run dev
Öffnen: http://localhost:3000
API
| Methode | Pfad | Beschreibung |
|---|---|---|
| POST | /api/auth/login |
Appwrite Login + Portal-Prüfungen |
| POST | /api/auth/logout |
Session beenden |
| GET | /api/auth/me |
Aktueller Kunde |
| GET | /api/projects |
Eigene websiteProjects |
| GET | /api/features |
Eigene portalFeatures (enabled) |
| POST | /webhook/gitea?token=… |
Gitea Push → Deploy + DB-Update |
Appwrite
Schema und Collection-Anlage: siehe APPWRITE_SCHEMA.md.
Endpoint: https://ticket.webklar.com/v1
Project: 6a1058610003c5a13a05
Database: woms-database
Gitea / Preview
- Template: https://git.webklar.com/knso/webklar-preview-template.git
- Webhook-URL:
https://project.webklar.com/webhook/gitea - Secret:
GITEA_WEBHOOK_TOKENin.env - Vorschau:
https://<subdomain>.project.webklar.com
customerId wird im Ticketsystem am websiteProjects-Eintrag gesetzt, nicht im Webhook.
Deployment
npm start
# Reverse Proxy (nginx) → Port 3000
# PREVIEW_DEPLOY_ROOT für statische Vorschau-Dateien
Repositories
Languages
JavaScript
86.2%
HTML
11%
CSS
2.7%