MBTimer – Webseite & Demo

Marketing-Webseite und klickbare Demo für MBTimer, eine webbasierte Arbeitszeiterfassung mit Personalverwaltung für Betriebe jeder Branche mit Mitarbeitern. Rein statisch: kein Backend, keine Datenbank, keine Cookies, kein Tracking, keine externen Schriften oder CDNs.

• Webseite (/, /preise, /impressum, /datenschutz): wird beim Build als statisches HTML vorgerendert.
• Demo (/demo): läuft komplett im Browser mit erfundenen Daten eines Beispielbetriebs (fiktive „Zahnarztpraxis Sonnenschein“).

Voraussetzungen

• Node.js 22 (getestet mit 22.23) und npm 10

Installieren, starten, bauen

npm install          # Abhängigkeiten installieren
npm run dev          # Entwicklungsserver: http://localhost:5173
npm run build        # Typprüfung, Build und Prerendering → dist/
npm run preview      # gebaute Seite lokal ansehen: http://localhost:4173

Weitere Befehle:

npm test             # Unit-Tests (Vitest): Preisrechner, URL-Parameter, Zeitberechnung, Feiertage, Demo-Store
npm run lint         # ESLint (inkl. jsx-a11y)
npm run screenshots  # Demo-Screenshots für die Webseite neu erzeugen (public/screenshots/*.webp)
npm run screenshots -- --pricing <ordner>   # Preisseite Desktop + Handy als PNG

Für npm run screenshots wird einmalig der Playwright-Browser benötigt: npx playwright install chromium. Das Skript startet selbst einen Dev-Server, meldet sich in der Demo an und fotografiert sie mit fester Uhrzeit 10:15.

Hinweis zu npm run preview: Der Vite-Preview-Server liefert für /preise (ohne Schrägstrich am Ende) die Startseiten-Datei aus. Die Seite funktioniert trotzdem (sie wird dann im Browser gerendert), nur das Prerendering greift lokal dort nicht. Auf Cloudflare wird preise/index.html direkt ausgeliefert.

Deployment (Vercel)

Live: https://mbtimer.vercel.app

Das Vercel-Projekt mbtimer ist mit diesem GitHub-Repository verbunden: Jeder Push auf main wird automatisch gebaut und veröffentlicht. Andere Branches erhalten Vorschau-URLs.

Konfiguration in vercel.json:

• Build npm run build (inkl. Prerendering), Ausgabe dist/, nur statische Dateien, kein Server-Code.
• Vorgerenderte Seiten (z. B. dist/preise/index.html) werden direkt ausgeliefert; alle anderen Pfade (z. B. /demo/kiosk) bekommen index.html. Ein kleines Inline-Skript blendet deren Inhalt aus, bis die App die richtige Seite im Browser gerendert hat.
• trailingSlash: false: /preise/ leitet auf /preise um.
• Gehashte Dateien unter /assets/ werden ein Jahr lang gecacht.

Manuell geht es auch per CLI: npx vercel deploy --prod.

Preise ändern

Alle Preise und preisbezogenen Texte stehen ausschließlich in src/config/pricing.ts. Nirgends sonst sind Beträge hartcodiert – Tarifkarten, Kostenrechner, Vergleichstabelle, FAQ und Meta-Texte lesen alle aus dieser Datei.

Feld	Bedeutung
vatMode	'net' → Beträge werden standardmäßig brutto („inkl. 19 % MwSt.“) angezeigt, im Rechner gibt es den Schalter „Nettopreise für Unternehmen anzeigen“ (?netto=1); 'kleinunternehmer' → „gem. § 19 UStG keine Umsatzsteuer“, kein Schalter
vatRate	MwSt.-Satz für die Brutto-Anzeige (z. B. 0.19)
yearlyFreeMonths	Gratis-Monate bei Jahreszahlung (2 → Jahrespreis = 10 × Monatspreis)
trialDays	Testzeitraum (erscheint in „30 Tage kostenlos testen …“)
tiers	Tarife: name, maxEmployees (Grenze; null = individuelle Kalkulation), monthlyNet (netto/Monat; null = „auf Anfrage“), tagline, extras, optional badge (z. B. „Beliebt“)
setupService	Einrichtungsservice: price (einmalig), label, items
includedFeatures	Funktionen, die in allen Tarifen enthalten sind
calculator	Bereich des Mitarbeiter-Reglers (1–60; Werte über der höchsten Grenze zeigen „50+“)

Ebenfalls dort: PRICE_DISCLAIMER (Pflichthinweis „Unverbindliche Beispielrechnung – kein Angebot …“), priceNote() (Steuerhinweis brutto/netto), vatFactor() (Umrechnung netto → brutto) und trialNote().

Regeln, die der Code automatisch einhält:

• Vor jedem Betrag steht „ca.“. Beträge werden auf ganze Euro gerundet, pro Kopf auf 10 Cent.
• Der Rechner wählt den kleinsten Tarif, dessen Grenze reicht. Oberhalb der höchsten Grenze erscheint „individuelle Kalkulation“ ohne Betrag.
• Upgrade-Hinweis bei Grenze − 1 und Grenze (z. B. 9 oder 10 von 10).

Nach Änderungen bitte npm test ausführen. Die Tests in src/site/pricing/calculate.test.ts prüfen die Tarifgrenzen 1/10/11/25/26/50/51, Jahrespreis, Ersparnis, Einrichtung, Pro-Kopf-Wert, Brutto und ungültige Eingaben. Sie gehen von den aktuellen Werten aus (Starter/Team/Plus: 49/89/149 €, Grenzen 10/25/50) und müssen bei geänderten Preisen mit angepasst werden.

Eine Rechnung lässt sich als Link teilen, z. B. /preise?ma=18&zahlweise=jahr&einrichtung=1 (optional &brutto=1).

Texte und Platzhalter

Webseitentexte (Hero, Funktionen, FAQ, Kontakt) stehen in src/config/site.ts, Seitentitel und Meta-Beschreibungen in src/site/seo.ts.

Rechtliches und Kontakt:

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗