📑 Inhaltsverzeichnis
- Allgemeine Präsentation der Website Überblick
- Startseite (Homepage) index.html
- Leistungen (Services) services.html
- Über uns (About) about.html
- Blog blog.html
- Karriere careers.html
- Kontakt contact.html
- Angebot anfragen quote.html
- Anmelden (Login) login.html
- Registrieren register.html
- Mein Konto / Dashboard dashboard.html
- Technische Informationen Tech-Zusammenfassung
01
Allgemeine Präsentation der Website
Proreinigung ist eine professionelle Website für ein Reinigungsunternehmen mit Sitz in Deutschland (Mönchengladbach). Die Website wurde entwickelt, um die Dienstleistungen des Unternehmens zu präsentieren, neue Kunden zu gewinnen und einen umfassenden Kundenbereich mit Dashboard bereitzustellen.
🧭 Navigationsstruktur
📊 Zusammenfassung der Seiten
| Seite | Datei | Hauptziel | Typ |
|---|---|---|---|
| Startseite | index.html | Homepage — Erster Eindruck, Serviceübersicht | Vitrine |
| Leistungen | services.html | Details aller angebotenen Reinigungsdienste | Vitrine |
| Über uns | about.html | Unternehmensvorstellung, Werte und Team | Vitrine |
| Blog | blog.html | Artikel und Neuigkeiten zur professionellen Reinigung | Inhalt |
| Karriere | careers.html | Stellenangebote und Bewerbungsformular | Recruiting |
| Kontakt | contact.html | Kontaktformular, WhatsApp, E-Mail, Standort | Kontakt |
| Angebot anfragen | quote.html | Detailliertes Angebotsformular | Konversion |
| Anmelden | login.html | Login zum Kundenbereich | Auth |
| Registrieren | register.html | Erstellung eines Kundenkontos | Auth |
| Mein Konto | dashboard.html | Kunden-Dashboard: Aufträge, Nachrichten, Rechnungen, Profil | App |
🛠️ Technologie-Stack
- Frontend: HTML5, CSS3, JavaScript (Vanilla)
- Backend: Supabase (BaaS — PostgreSQL, Auth, Realtime)
- Hosting: GitHub Pages (proreinigung.github.io)
- Funktionen: PWA, Benachrichtigungen, Echtzeit-Chat
- Design: Responsive, Dark mode Navbar, Scroll-Animationen
02
Startseite — Homepage
index.html🌐 proreinigung.github.io/index.html
Die Startseite ist das Hauptschaufenster der Website. Sie ist darauf ausgelegt, einen starken und professionellen ersten Eindruck zu hinterlassen, die Dienstleistungen schnell zu präsentieren und den Besucher davon zu überzeugen, ein Angebot anzufordern.
Vollständiger Screenshot der Startseite — Proreinigung
👁️ Was der Benutzer sieht
- Hero-Bereich: Großes Hintergrundbild mit Titel "Professionelle Reinigung — Erster Klasse", Beschreibung des Unternehmens und Statistiken (500+ Kunden, 15 Jahre Erfahrung, 98% Zufriedenheit, 24/7 Verfügbarkeit)
- Schwebende InfoCard: Karte rechts "Warum Proreinigung?" mit den Vorteilen (24h Reaktionszeit, ISO-zertifiziert, Pünktlichkeit, Bio-Produkte) und Bewertung 4.9/5
- Vertrauensleiste: Logos von Partnern/Kunden (BMW Group, Siemens, Allianz, Lufthansa, Deutsche Bank, SAP SE) mit Zähler "5000+ zufriedene Kunden"
- Service-Bereich: Horizontales Karussell mit 8 Servicekarten mit Bildern (Büro-, Industrie-, Glas-, Grund-, Fassaden-, Teppich-, Parkhaus-, Krankenhausreinigung)
- Bereich "Warum Proreinigung": 3 Kernvorteile (lokal, ISO-zertifiziert, zuverlässig) mit Bild und Badge "15 Jahre Erfahrung"
- Bereich "Industriereinigung": Breites Banner mit Titel "Kein Auftrag zu groß für uns" und Aktionsbutton
- Statistik-Zähler: 500+ Kunden, 12.000+ Aufträge, 150+ Mitarbeiter, 15 Jahre Erfahrung
- Partner-Bereich: Tabs (Gewerbe, Privat, Industrie) mit Beschreibung und Bild Glasreinigung
- Testimonials: 3 Kundenbewertungen mit Sternen, Text und Avatar (Markus Kellner, Sandra Braun, Thomas Weber)
- CTA-Band: "Bereit für makellose Sauberkeit? Jetzt Angebot anfordern." mit zwei Buttons
- Footer: Spalten Leistungen, Unternehmen, Kontakt mit sozialen Netzwerken und rechtlichen Hinweisen
✅ Was der Benutzer tun kann
- Navigieren zu allen Seiten über das Hauptmenü (Startseite, Leistungen, Über uns, Blog, Karriere, Kontakt)
- Kostenlos Angebot anfragen durch Klick auf "Kostenlos anfragen" → Weiterleitung zu quote.html
- Dienstleistungen ansehen durch Klick auf "Unsere Leistungen" → Weiterleitung zu services.html
- Services durchscrollen im horizontalen Karussell mit den Buttons ◀ ▶
- Sich anmelden oder auf "Mein Konto" zugreifen über den Button "Anmelden"
- Kontakt über WhatsApp über den grünen schwebenden Button unten rechts
- Nach oben scrollen über den "Back to top" Button (erscheint beim Scrollen)
- Auf Partner/Services klicken, um zu den entsprechenden Seiten zu navigieren
🎨 Design
Transparente Navbar → solide beim Scrollen. Scroll-Reveal-Animationen. Schwebende Karte mit Levitation-Animation.
📱 Responsive
Mobiles Hamburger-Menü. Die Hero-Karte verschwindet auf dem Handy. Das Grid passt sich je nach Bildschirmgröße an 1-2-4 Spalten an.
Permanenter schwebender Button unten rechts, verknüpft mit der Nummer +49 163 7606478. Öffnet sich in einem neuen Fenster.
🔄 Dynamische Authentifizierung
Wenn der Benutzer angemeldet ist, wird der Button "Anmelden" zu "Mein Konto" und leitet zu dashboard.html weiter.
03
Leistungen — Service-Seite
services.html🌐 proreinigung.github.io/services.html
Seite zur detaillierten Präsentation aller von Proreinigung angebotenen Reinigungsdienstleistungen. Jeder Service wird mit seinen Merkmalen und einer Schaltfläche zur Anforderung eines spezifischen Angebots beschrieben.
Screenshot der Service-Seite (Leistungen)
👁️ Was der Benutzer sieht
- Hero-Banner: Titel "Unsere Leistungen" mit Breadcrumb (Startseite / Leistungen) auf dunkelblauem Hintergrund
- Büroreinigung (Service 01): Großer Bereich mit Bild links, Detailbeschreibung rechts — tägliche Reinigung, Sanitäranlagen, Böden, Recycling
- Industriereinigung (Service 02): Invertierter Bereich mit Bild rechts — Produktionshallen, Maschinenreinigung, Entsorgung, ISO-Dokumentation
- Grid mit 6 weiteren Services: Glas-, Grund-, Fassaden-, Teppich-, Parkhaus-, Krankenhausreinigung — jeweils mit Bild, Icon, Kurzbeschreibung und Link "Angebot anfragen →"
- CTA-Band: Identisch mit der Homepage — "Bereit für makellose Sauberkeit?"
- Vollständiger Footer
✅ Was der Benutzer tun kann
- Jeden Service entdecken mit spezifischen Details (Stärken, Inklusivleistungen)
- Angebot pro Service anfragen über die Buttons "Angebot für Büroreinigung", "Angebot für Industriereinigung" etc.
- Die 8 Services vergleichen im visuellen Grid mit Bildern
- Zur Angebotsanfrage navigieren durch Klick auf "Kostenloses Angebot" im CTA
- Direkt anrufen über "Jetzt anrufen" im CTA
04
Über uns — Seite
about.html🌐 proreinigung.github.io/about.html
Präsentation der Geschichte von Proreinigung, ihrer Grundwerte und des Führungsteams. Entwickelt, um Vertrauen zu schaffen und das Unternehmen menschlicher zu machen.
Screenshot der Über uns Seite
👁️ Was der Benutzer sieht
- Hero-Banner: "Über Proreinigung" — "Erfahren Sie mehr über unser Unternehmen, unsere Werte und die Menschen hinter Proreinigung"
- Unsere Geschichte: "Von der Vision zur Realität" — Gegründet 2010 in München, begonnen mit 5 Mitarbeitern, jetzt 150+ in 10+ deutschen Städten
- Animierte Zähler: 2010 (Gründung), 150+ (Mitarbeiter), 500+ (Kunden), 10+ (Städte)
- Unsere Werte: 3 Karten — Exzellenz (kompromisslose Qualität), Vertrauen (Diskretion), Nachhaltigkeit (Bio-Produkte, nachhaltige Methoden)
- Das Team: "Das Team hinter Proreinigung" — 4 Mitglieder: Michael König (CEO & Gründer), Sandra Lang (Qualität), Thomas Roth (Technik), Katharina Müller (Kundenservice)
- CTA + Footer
✅ Was der Benutzer tun kann
- Angebot anfragen über "Angebot anfragen" → Weiterleitung zu quote.html
- Kontakt aufnehmen über "Kontakt aufnehmen" → Weiterleitung zu contact.html
- Auf den CTA zugreifen "Kostenloses Angebot" oder "Jetzt anrufen"
05
Blog — Artikelseite
blog.html🌐 proreinigung.github.io/blog.html
Blog-Bereich mit Artikeln über professionelle Reinigung, Branchentrends und praktischen Tipps. Beinhaltet ein Kategoriensystem und einen Newsletter-Bereich.
Screenshot der Blog-Seite
👁️ Was der Benutzer sieht
- Hero-Banner: "Unser Blog" — "Tipps, Trends und Neuigkeiten rund um Reinigung, Hygiene und Gebäudepflege"
- Kategoriefilter: Buttons — Alle Artikel, Reinigungstipps, Nachhaltigkeit, Industrie, News
- Top-Artikel: Große Karte mit Bild — "Die Zukunft der Reinigungsbranche: KI und Robotik verändern alles" (1. April 2026, 8 Min. Lesezeit)
- Artikel-Grid (6): 5 Tipps für ein sauberes Büro, Umweltfreundliche Reinigungsmittel, Industriereinigung Wartung, Glasreinigung ohne Streifen, Neue Standorte Hamburg/Berlin, Zertifizierung ISO 14001
- Button "Mehr Artikel laden" zum Laden weiterer Artikel
- Newsletter-Bereich: "Keine Neuigkeiten verpassen!" mit E-Mail-Feld und "Abonnieren" Button
✅ Was der Benutzer tun kann
- Artikel filtern nach Kategorien durch Klick auf die Filterbuttons
- Einen Artikel lesen durch Klick auf "Artikel lesen →" beim Top-Artikel
- Mehr Artikel laden über den Button unten
- Newsletter abonnieren durch Eingabe der E-Mail und Klick auf "Abonnieren"
06
Karriere — Karriereseite
careers.html🌐 proreinigung.github.io/careers.html
Seite für das Recruiting mit den Vorteilen einer Beschäftigung bei Proreinigung, aktuellen Stellenangeboten und einem vollständigen Bewerbungsformular.
Screenshot der Karriereseite
👁️ Was der Benutzer sieht
- Hero-Banner: "Karriere bei Proreinigung" — "Wir suchen motivierte Talente, die mit uns wachsen möchten"
- Mitarbeitervorteile (4 Karten): Sicherer Arbeitsplatz, Schulungen & Weiterbildung, Teamgeist, Attraktive Vergütung
- Stellenangebote (6 Positionen):
• Reinigungskraft (m/w/d) — Büroreinigung (Vollzeit, ab 14 €/Std)
• Industriereiniger (m/w/d) — Produktionsanlagen (Deutschland, ab 15 €/Std)
• Teamleiter Reinigung (m/w/d) (München, 1.500–6.000 €/Monat)
• Reinigungshilfe — Abends/Wochenende (Alle Standorte, ab 13 €/Std)
• Glasreiniger/Höhenarbeiter (m/w/d) (Deutschland, ab 16 €/Std)
• Initiativbewerbung (Alle Standorte) - Vollständiges Bewerbungsformular: Persönliche Daten (Name, E-Mail, Telefon, Geburtsdatum), Bewerbungsdetails (Position, Verfügbarkeit, Erfahrung), Motivationsschreiben, CV-Upload (PDF/DOC, max. 5MB) und Foto (JPG/PNG, max. 2MB)
✅ Was der Benutzer tun kann
- Stellenangebote einsehen mit Details (Ort, Typ, Gehalt)
- Direkt bewerben durch Klick auf "Jetzt bewerben" bei jedem Angebot
- Initiativbewerbung senden über "Initiativbewerbung"
- Formular ausfüllen und absenden mit Upload von Lebenslauf und Foto
- Datenschutzerklärung akzeptieren vor dem Absenden
07
Kontakt — Kontaktseite
contact.html🌐 proreinigung.github.io/contact.html
Vollständige Kontaktseite mit mehreren Kommunikationswegen. Die von dieser Seite gesendete Nachricht wird in der Supabase-Datenbank gespeichert und erscheint im Team-Dashboard.
Screenshot der Kontaktseite
👁️ Was der Benutzer sieht
- Hero-Banner: "Kontaktieren Sie uns" — "Haben Sie Fragen oder möchten Sie ein Angebot?"
- 4 Schnellkontakt-Karten:
• 💬 WhatsApp: "Direkt & schnell antworten" → Button "Chat öffnen"
• 📧 E-Mail: "Detaillierte Anfragen" → Button "E-Mail senden"
• 🕐 Öffnungszeiten: Mo–Fr: 07:00–18:00, Sa: 08:00–14:00, Notfall: 24/7
• 📍 Unser Standort: Rheydter Str. 254, 41065 Mönchengladbach - Kontaktformular: Vorname, Nachname, E-Mail, Telefon, Betreff (Dropdown: Allgemeine Anfrage, Angebot anfragen, Lob/Beschwerde, Partnerschaft, Sonstiges), Nachricht
- Karte mit Standort: Adresse + Button "In Google Maps öffnen"
- Grüner WhatsApp-Block: "Lieber per WhatsApp?" — "Schreiben Sie uns direkt" mit Button "Jetzt auf WhatsApp schreiben"
✅ Was der Benutzer tun kann
- Nachricht über das Formular senden — die Nachricht wird in Supabase über
DB.createContactMessage()gespeichert und erscheint im Team-Dashboard - Über WhatsApp kontaktieren über den Button "Chat öffnen" → öffnet wa.me/491637606478
- E-Mail senden über "E-Mail senden" → öffnet mailto:Proreinigung@gmail.com
- Google Maps öffnen, um den Standort des Unternehmens zu sehen
- Bestätigung erhalten nach erfolgreichem Absenden des Formulars
📨 Nachricht → Dashboard
Die von diesem Formular gesendete Nachricht wird in Supabase gespeichert und erscheint sofort im Team-Dashboard von Proreinigung.
💬 Direkt-WhatsApp
Zwei WhatsApp-Zugänge: Button in den Karten + dedizierter grüner Block. Öffnet direkt einen WhatsApp-Chat mit der Nummer des Unternehmens.
✉️ Direkt-E-Mail
Der Button "E-Mail senden" öffnet den nativen E-Mail-Client mit der vorinstallierten Adresse Proreinigung@gmail.com.
📍 Google Maps
Standortkarte mit vollständiger Adresse und Button zum Öffnen in Google Maps.
08
Angebot anfragen — Angebotsanfrage
quote.html🌐 proreinigung.github.io/quote.html
Vollständiges Angebotsformular in 3 Schritten. Verwaltet zwei Fälle: angemeldete Benutzer (erstellt direkt einen Auftrag) und Gastbesucher (Wahl zwischen Registrierung oder Senden als Gast).
👁️ Was der Benutzer sieht
- Hero-Banner: "Angebot anfragen" — "Füllen Sie das Formular aus und wir erstellen Ihnen innerhalb von 24 Stunden ein individuelles Angebot"
- Linke Sidebar: "Warum Proreinigung?" mit 4 Vorteilen (schnelle Antwort, faire Preise, Qualitätsgarantie, volle Versicherung) + Direktkontakte WhatsApp und E-Mail
- Formular in 3 Sektionen:
1. Kontaktdaten: Vorname, Nachname, Unternehmen, E-Mail, Telefon
2. Leistungsdetails: Gewünschter Service (8 Optionen), Fläche (m²), Häufigkeit (Einmalig/Täglich/Wöchentlich/Monatlich), Adresse, Datum, Budget
3. Zusätzliche Info: Freier Kommentar, Datenschutz-Checkbox
✅ Was der Benutzer tun kann
- Wenn angemeldet: Absenden → Die Anfrage erstellt einen Auftrag (Bestellung) in Supabase → Automatische Weiterleitung zum Dashboard nach 1.5s
- Wenn nicht angemeldet: Absenden → Pop-up mit Auswahl:
• "Direkt als Gast senden" → sendet die Anfrage als Gast
• "Anmelden" → leitet zu login.html weiter
• "Kostenloses Konto erstellen" → leitet zu register.html weiter - Client-side Validierung aller Pflichtfelder mit Fehlermeldungen
- Kontakt über WhatsApp/E-Mail direkt aus der Sidebar
09
Anmelden — Loginseite
login.html🌐 proreinigung.github.io/login.html
Screenshot der Loginseite
👁️ Was der Benutzer sieht
- Logo "Proreinigung" zentriert oben
- Titel: "Willkommen zurück" — "Melden Sie sich in Ihrem Konto an"
- Felder: E-Mail-Adresse und Passwort (mit Button Anzeigen/Verbergen 👁️)
- Optionen: Checkbox "Angemeldet bleiben" + Link "Passwort vergessen?"
- Button: "➡️ Anmelden" (groß, dunkelblau)
- Trenner "oder"
- Demo-Konto: Kasten mit E-Mail: max@example.de / Passwort: demo123
- Links: "Noch kein Konto? Jetzt registrieren" und "← Zurück zur Startseite"
✅ Was der Benutzer tun kann
- Sich anmelden mit E-Mail und Passwort → Authentifizierung über Supabase Auth → Weiterleitung zu dashboard.html
- Das Demo-Konto verwenden, um das Dashboard zu testen
- Passwort anzeigen/verbergen
- Angemeldet bleiben über die Checkbox
- Passwort wiederherstellen (Link Passwort vergessen)
- Zur Registrierung gehen über "Jetzt registrieren"
- Zur Startseite zurückkehren
10
Registrieren — Registrierungseite
register.html🌐 proreinigung.github.io/register.html
Screenshot der Registrierungseite
👁️ Was der Benutzer sieht
- Titel: "Konto erstellen" — "Registrieren Sie sich für ein persönliches Kundenkonto"
- Formular: Vorname, Nachname, E-Mail-Adresse, Telefonnummer, Passwort (min. 6 Zeichen), Passwort bestätigen
- Pflicht-Checkbox: Akzeptanz der Allgemeinen Geschäftsbedingungen und Datenschutzerklärung
- Button: "👤 Konto erstellen" (dunkelblau, volle Breite)
- Links: "Bereits ein Konto? Jetzt anmelden" und "← Zurück zur Startseite"
✅ Was der Benutzer tun kann
- Ein Konto erstellen → Registrierung über Supabase Auth → Profilerstellung in der Tabelle profiles → Weiterleitung zu dashboard.html
- Echtzeit-Validierung: Passwort-Bestätigung, Mindestlänge, gültige E-Mail
- Zum Login gehen, falls bereits registriert
11
Mein Konto — Kunden-Dashboard
dashboard.html🌐 proreinigung.github.io/dashboard.html
Vollständiger Kundenbereich mit 5 Sektionen, erreichbar über die Sidebar. Durch Authentifizierung geschützt — automatische Weiterleitung zu login.html, falls nicht angemeldet. Echtzeit-Updates über Supabase Realtime.
📊 11.1 — Übersicht
Dashboard — Tab Übersicht
👁️ Was der Benutzer sieht
- 4 Statistik-Karten: Aufträge gesamt, Aktive Aufträge, Abgeschlossen, Rechnungen
- Willkommensnachricht: "Willkommen zurück, [Vorname]!" mit Beschreibung und Shortcuts zu Aufträgen, Nachrichten, Rechnungen, Kontakt
- Letzte Nachrichten: Liste der 5 letzten Nachrichten mit Absender, Inhalt, Datum und Auftragsnummer
✅ Was der Benutzer tun kann
- Statistiken einsehen auf einen Blick
- Schnell navigieren über die Shortcut-Buttons
- Neuen Auftrag erstellen über "+ Neuer Auftrag" → leitet zu quote.html weiter
- Auf eine Nachricht klicken, um zum Tab Nachrichten zu gelangen
📋 11.2 — Meine Aufträge
Dashboard — Tab Meine Aufträge
👁️ Was der Benutzer sieht
- Tabelle mit Spalten: Auftrags-Nr., Leistung, Adresse, Termin (Datum), Betrag, Status, Aktionen
- Farblich markierte Stati: 🟢 Abgeschlossen, 🟡 Ausstehend, 🔴 Storniert, 🔵 Aktiv
- Aktionen pro Auftrag: Button "Details" + Button "Stornieren" (für nicht abgeschlossene Aufträge)
✅ Was der Benutzer tun kann
- Auftragsdetails einsehen über "Details" → Modal-Pop-up mit Service, Status, Adresse, Datum und Nachrichtenverlauf
- Nachricht senden direkt aus dem Detail-Modal
- Auftrag stornieren über "Stornieren"
- Neuen Auftrag erstellen
💬 11.3 — Nachrichten (Chat)
Dashboard — Tab Nachrichten (Echtzeit-Chat)
👁️ Was der Benutzer sieht
- Konversationen nach Auftrag gruppiert: Jeder Auftrag hat seinen eigenen Chat-Verlauf mit Header (Nummer, Service, Status, Datum)
- Chat-Blasen: Nachrichten des Kunden (blau, rechts) und des Teams (hellblau, links) mit Name und Zeitstempel
- Eingabebereich: Textfeld + Senden-Button für jeden Auftrag
- Bereich Direktkontakt: Buttons "WhatsApp schreiben" (grün) und "E-Mail senden" (Umrandung)
✅ Was der Benutzer tun kann
- Echtzeit-Nachricht senden — Nachrichten erscheinen sofort (Supabase Realtime)
- Konversationen aufklappen/zuklappen
- Das Team über WhatsApp/E-Mail kontaktieren
- Benachrichtigungen erhalten für neue Nachrichten (Badges im Menü)
🧾 11.4 — Rechnungen
Dashboard — Tab Rechnungen
👁️ Was der Benutzer sieht
- Rechnungstabelle: Rechnungs-Nr., Leistung, Datum, Betrag (€), Status (Bezahlt = grün, Offen = gelb), Aktionen
- PDF-Button für jede Rechnung
✅ Was der Benutzer tun kann
- Rechnung als PDF herunterladen → Client-seitige PDF-Generierung via jsPDF im Profi-Design
- Status einsehen (bezahlt oder ausstehend)
👤 11.5 — Mein Profil
Dashboard — Tab Mein Profil
👁️ Was der Benutzer sieht
- Profildaten (links): Formular mit Vorname, Nachname, E-Mail (nicht änderbar), Telefon
- Passwort ändern (rechts): Formular mit Aktuellem Passwort, Neuem Passwort, Passwort bestätigen
✅ Was der Benutzer tun kann
- Daten ändern (Name, Telefon) → "Änderungen speichern"
- Passwort ändern mit Validierung
- Sich abmelden über "Abmelden" in der Sidebar
🔔 Benachrichtigungen
Rote Badges an den Sidebar-Tabs bei neuen Nachrichten, Aufträgen oder ungelesenen Rechnungen.
⚡ Echtzeit
Supabase Realtime: Neue Nachrichten und Auftrags-Updates erscheinen sofort ohne Refresh.
📱 Mobil
Mobile Navigation mit Tab-Bar unten (Übersicht, Aufträge, Chat, Rechnungen, Profil).
🔒 Sicherheit
Geschützte Seite: Auth.requireAuth() prüft die Session. Automatische Weiterleitung zu login.html bei fehlender Authentifizierung.
12
Technische Informationen
📁 Dateistruktur
- index.html — Homepage (1179 Zeilen)
- services.html — Service-Seite
- about.html — Über uns Seite
- blog.html — Blog-Seite
- careers.html — Karriereseite mit Bewerbungsformular
- contact.html — Kontaktseite mit Formular → Supabase
- quote.html — Angebotsformular
- login.html — Authentifizierung (Login)
- register.html — Registrierung
- dashboard.html — Vollständiges Kunden-Dashboard (859 Zeilen)
- css/style.css — Globale Styles (Design-System)
- css/shared.css — Geteilte Styles (interne Seiten)
- js/auth.js — Supabase Authentifizierungsmanagement
- js/db.js — Datenbankoperationen (CRUD)
- js/realtime.js — Supabase Realtime-Abos
- js/main.js — Gemeinsame Utilities (Toasts, Navigation)
- supabase.js — Supabase-Client-Konfiguration
- sw.js — Service Worker (PWA)
- manifest.json — PWA Manifest
🗄️ Datenbank (Supabase)
- profiles — Benutzerprofile (vorname, nachname, email, telefon, rolle)
- orders — Aufträge (order_number, service, adresse, datum, status, preis)
- order_messages — Chat-Nachrichten pro Auftrag (message, sender_role, created_at)
- invoices — Rechnungen (invoice_number, betrag, status, datum)
- notifications — Push-Benachrichtigungen in der DB (typ, user_id, gelesen)
- contact_messages — Nachrichten aus dem Kontaktformular
- guest_requests — Angebotsanfragen von nicht registrierten Besuchern
🎯 Hauptmerkmale
- Sichere Authentifizierung — Supabase Auth mit persistenten Sessions
- Echtzeit-Chat — Sofortige Nachrichten zwischen Kunde ↔ Team via Supabase Realtime
- PDF-Generierung — Herunterladbare Rechnungen via jsPDF
- PWA — Installierbar auf dem Handy, Service Worker für Offline-Cache
- Responsive Design — Mobile-first mit Breakpoints 768px, 900px, 1024px
- Scroll-Animationen — IntersectionObserver für Reveal beim Scrollen
- Multi-Kanal-Kontakt — WhatsApp, E-Mail, Web-Formular, Dashboard-Chat
- Benachrichtigungssystem — Ungelesen-Badges, automatisches Markieren beim Lesen