Der Banner stand im Fluss (relative) und schob den Kopf nach unten, das am Handy feste Blatt begann aber fest bei der Kopfhöhe: es deckte den unteren Teil des Kopfs samt Profilbild ab (Konto und Abmelden nicht erreichbar); am Desktop blieb das Menü bei fest 36 px stehen, der Banner ist aber 40 px hoch und beim Scrollen blieb eine Lücke. Jetzt bleibt der Banner oben stehen (sticky), huelle.js setzt --kn-banner-h auf seine Höhe (auch bei Umbruch am Handy), und Kopf, Menü, Blatt und Konto-Popover beginnen darunter. Werkzeug-Ansicht kn-huelle-banner-blatt. Co-Authored-By: Claude Sonnet 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.
E-Mails
Alle automatischen Mails sind HTML-Vorlagen mit Textfassung in server/mail-templates/
(K01–K11 an Kunden, T01–T11 ans Team; Design aus Claude Design). Jede Vorlage nennt im
Kopfkommentar Betreff, Platzhalter ({{name}}) und optionale Blöcke
(<!-- WENN x --> … <!-- ENDE x -->). Eine neue Fassung aus dem Design kann die Datei direkt
ersetzen, solange Platzhalter und Blöcke gleich heißen; npm test prüft das. Das Logo in den
Mails liegt unter public/webklar-logo.png.
Deployment
npm start
# Reverse Proxy (nginx) → Port 3000
# PREVIEW_DEPLOY_ROOT für statische Vorschau-Dateien