M7 abschliessen: Landingpage mit Kernabläufen, Demo-Screenshot und FAQ
Ergaenzt die beiden letzten offenen M7-Punkte und schaerft nebenbei die Copy insgesamt: - Neue Sektion 'So funktioniert's' mit dem im Plan vorgesehenen Drei-Schritte-Ablauf (Kaffee nehmen, Strich setzen, bei Bedarf bezahlen), bisher komplett gefehlt. - Funktionsuebersicht von drei auf sechs Karten erweitert (Mitglieder/ Rollen, Guthaben/Einzahlungen, PayPal, CSV-Import/-Export, Mandantenfaehigkeit, Hinweise/Info-Mails) statt der bisherigen, eher technischen Kurzbeschreibung. - Demo-Screenshot: bereinigter Screenshot der Gesamtuebersicht mit Testdaten (keine echten Kundendaten) aus docs/m0/screenshots/ als assets/images/demo-kaffeeliste.png eingebunden. - FAQ-Auszug: fuenf produktbezogene Fragen (Einrichtung, Mandanten- trennung, Rollen, Export/Loeschung, PayPal) direkt auf der Landingpage. Bewusst nicht die bestehende faq.php excerpted, da die komplett AOK-spezifisch ist (Kaffeemaschinen-Bedienung, interner Ansprechpartner) und fuer Interessenten nicht generisch verstaendlich waere. - Neue CSS-Klassen fuer Schritte/Demo-Rahmen/FAQ-Grid/Abschluss-CTA in assets/css/public.css, konsistent mit dem bestehenden Grundton (gruener Akzent, schlichte Kartenoptik, keine Marketing-Verspieltheit). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -147,7 +147,76 @@ body.public-page {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.public-steps .public-feature {
|
||||
position: relative;
|
||||
padding-top: 2.75rem;
|
||||
}
|
||||
|
||||
.public-step-number {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 50%;
|
||||
background: #38761d;
|
||||
color: #ffffff;
|
||||
font-family: "Roboto Slab", serif;
|
||||
font-weight: 700;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.public-demo-frame {
|
||||
max-width: 72rem;
|
||||
border: solid 1px rgba(210, 215, 217, 0.75);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0.75rem 2.25rem rgba(61, 68, 73, 0.08);
|
||||
}
|
||||
|
||||
.public-demo-frame img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.public-faq {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1.25rem;
|
||||
max-width: 72rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.public-faq .public-panel h3 {
|
||||
font-size: 1.05em;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.public-faq .public-panel p {
|
||||
margin-bottom: 0;
|
||||
color: #3d4449;
|
||||
}
|
||||
|
||||
.public-cta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.public-cta .major {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 980px) {
|
||||
.public-faq {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.public-hero {
|
||||
min-height: 78vh;
|
||||
padding: 5.5rem 2rem 3rem 2rem;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
@@ -307,7 +307,7 @@ Nicht tun:
|
||||
| M4 | Datenmigration | Gestartet: Ledger-Tabelle, Legacy-Backfill, Paritätscheck, Ledger-Service und Preview sind umgesetzt |
|
||||
| M5 | App-Kern | Weit fortgeschritten: Kernseiten lesen und schreiben tenant-sicher gegen das Ledger, inklusive Hinweise und rollenbasiertem Zugang; offen ist ein eigener Zahlungs-Screen |
|
||||
| M6 | Betriebsflows | Abgeschlossen: Import, Export, Mail und Jahresabschluss sind auditierbar |
|
||||
| M7 | Landingpage | Public-Seite und Auth-Seiten sind im gemeinsamen Stil nutzbar; spätere Ausbaustufen folgen |
|
||||
| M7 | Landingpage | Abgeschlossen: Public-Seite mit Kernabläufen, Funktionsübersicht, Demo-Screenshot und FAQ-Auszug; Auth-Seiten im gemeinsamen Stil |
|
||||
| M8 | Härtung | Abgeschlossen: Security-Headers, Rate-Limits, Audit-Log, Mandanten-Isolation/Rollenmatrix getestet, Datenexport, Löschung/Anonymisierung, Backup/Monitoring dokumentiert (CSP als bewusst offener Punkt) |
|
||||
| M9 | Cutover | Produktivumstellung ist vorbereitet und Legacy ist read-only |
|
||||
|
||||
@@ -615,19 +615,31 @@ Schritte:
|
||||
|
||||
- Public-Layout mit bestehender Typografie und grünem Akzent bauen. Erster
|
||||
Stand als `landing.php` und `assets/css/public.css` erledigt.
|
||||
- Landingpage-Inhalte erstellen. Erster Stand erledigt.
|
||||
- Demo-Screenshot oder Demo-Ansicht einbinden.
|
||||
- Landingpage-Inhalte erstellen: erledigt und überarbeitet. Klarere
|
||||
Nutzenbeschreibung, expliziter Drei-Schritte-Ablauf (Kaffee nehmen →
|
||||
Strich setzen → bei Bedarf bezahlen) und erweiterte Funktionsübersicht
|
||||
(Mitglieder/Rollen, Guthaben/Einzahlungen, PayPal, CSV-Import/-Export,
|
||||
Mandantenfähigkeit, Hinweise/Info-Mails).
|
||||
- Demo-Screenshot oder Demo-Ansicht einbinden: erledigt. Bereinigter
|
||||
Screenshot der Gesamtübersicht (Testdaten, keine echten Kundendaten)
|
||||
aus `docs/m0/screenshots/` als `assets/images/demo-kaffeeliste.png`.
|
||||
- CTA zu Registrierung und Login. Erledigt.
|
||||
- Login, Registrierung und Passwort-Reset in den Public-Stil integrieren.
|
||||
Erledigt.
|
||||
- App-Sidebar von Public-Links trennen. Erledigt.
|
||||
- FAQ-Auszug strukturieren.
|
||||
- FAQ-Auszug strukturieren: erledigt. Fünf produktbezogene Fragen
|
||||
(Einrichtung, Mandantentrennung, Rollen, Export/Löschung, PayPal) direkt
|
||||
auf der Landingpage, mit Verweis auf die vollständige FAQ. Die
|
||||
bestehende `faq.php` bleibt bewusst unverändert AOK-spezifisch
|
||||
(Kaffeemaschine, Ansprechpartner) und wurde nicht 1:1 auf die
|
||||
Landingpage übernommen.
|
||||
- Keine App-Sidebar im Public-Bereich.
|
||||
|
||||
Ergebnis:
|
||||
|
||||
- Interessenten verstehen das Produkt und können sich registrieren.
|
||||
- Bestehende App bleibt optisch eigenständig und arbeitsorientiert.
|
||||
- Stand: abgeschlossen.
|
||||
|
||||
Abhängigkeiten:
|
||||
|
||||
|
||||
+97
-9
@@ -2,9 +2,10 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>Kaffeeliste</title>
|
||||
<title>Kaffeeliste – die digitale Kaffeekasse für Teams</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<meta name="description" content="Kaffeeliste ist die digitale Kaffeekasse für Teams, Büros und Vereine: Striche erfassen, Guthaben im Blick behalten, bequem per PayPal ausgleichen." />
|
||||
<link rel="stylesheet" href="assets/css/main.css" />
|
||||
<link rel="stylesheet" href="assets/css/public.css" />
|
||||
</head>
|
||||
@@ -19,34 +20,121 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="public-hero-content">
|
||||
<h1>Kaffeeliste</h1>
|
||||
<p>Die digitale Kaffeekasse für Teams, Büros und Vereine: Striche, Einzahlungen und offene Beträge bleiben nachvollziehbar an einem Ort.</p>
|
||||
<h1>Die Kaffeekasse, die von allein mitrechnet</h1>
|
||||
<p>Schluss mit Strichlisten auf Papier und Kopfrechnen beim Kassensturz: Kaffeeliste hält für dein Team, Büro oder deinen Verein fest, wer wie viele Striche gemacht hat, wer bezahlt hat und wer gerade offen ist – jederzeit einsehbar, für jeden nachvollziehbar.</p>
|
||||
<ul class="actions">
|
||||
<li><a href="register.php" class="button primary big">Kundenkonto anlegen</a></li>
|
||||
<li><a href="register.php" class="button primary big">Kostenlos einrichten</a></li>
|
||||
<li><a href="login.php" class="button big">Zur App</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="public-section">
|
||||
<header class="major">
|
||||
<h2>So funktioniert's</h2>
|
||||
</header>
|
||||
<div class="public-grid public-steps">
|
||||
<article class="public-feature">
|
||||
<span class="public-step-number">1</span>
|
||||
<h3>Kaffee nehmen</h3>
|
||||
<p>Wie bisher: Kaffee holen, Tee, Wasser – ganz ohne App am Automaten oder an der Maschine selbst.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<span class="public-step-number">2</span>
|
||||
<h3>Strich setzen</h3>
|
||||
<p>Der Strich landet in der Kaffeeliste – entweder durch eine verantwortliche Person gesammelt oder, wenn gewünscht, direkt selbst im eigenen Dashboard.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<span class="public-step-number">3</span>
|
||||
<h3>Bei Bedarf bezahlen</h3>
|
||||
<p>Der aktuelle Stand ist jederzeit sichtbar. Ausgleich bequem per PayPal, wenn dein Team das nutzt – ganz ohne Bargeld und Wechselgeld.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="public-section">
|
||||
<header class="major">
|
||||
<h2>Alles rund um die Kaffeekasse</h2>
|
||||
</header>
|
||||
<div class="public-grid">
|
||||
<article class="public-feature">
|
||||
<h3>Striche erfassen</h3>
|
||||
<p>Teilnehmer und Admins behalten Verbrauch, Einzahlungen und Salden im Blick.</p>
|
||||
<h3>Mitglieder & Rollen</h3>
|
||||
<p>Mitglieder anlegen, deaktivieren oder anonymisieren. Zugang mit passender Rolle (Admin, Kassenwart, Mitglied) gezielt vergeben oder wieder entziehen.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<h3>Guthaben & Einzahlungen</h3>
|
||||
<p>Striche, Einzahlungen und Korrekturen laufen über ein durchgängiges Journal – jede Buchung bleibt nachvollziehbar, auch nachträglich.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<h3>PayPal-Zahlung</h3>
|
||||
<p>Offene Beträge lassen sich optional direkt per PayPal ausgleichen, inklusive automatischem Abgleich in der Liste.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<h3>CSV-Import & Export</h3>
|
||||
<p>Zahlungen aus einem PayPal-Export einlesen, mit Vorschau und Dublettenprüfung vor der Übernahme. Kaffeeliste als PDF für den Ausdruck exportieren.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<h3>Mandantenfähig</h3>
|
||||
<p>Jeder Kunde arbeitet in seinem eigenen Bereich mit eigenen Einstellungen.</p>
|
||||
<p>Jeder Kunde arbeitet in einem eigenen, streng getrennten Bereich mit eigenen Mitgliedern, Einstellungen und Buchungen.</p>
|
||||
</article>
|
||||
<article class="public-feature">
|
||||
<h3>Webspace-tauglich</h3>
|
||||
<p>Der Start erfolgt über eine zentrale App-Adresse mit Login und Mandantenauswahl.</p>
|
||||
<h3>Hinweise & Info-Mails</h3>
|
||||
<p>Aktuelle Hinweise für alle sichtbar einblenden, und bei Bedarf eine Info-Mail mit dem aktuellen Stand an alle Mitglieder verschicken.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="public-section public-demo">
|
||||
<header class="major">
|
||||
<h2>So sieht's in der App aus</h2>
|
||||
<p>Klares Layout, aufgeräumte Tabellen, alles auf einen Blick – die Kaffeeliste bleibt bewusst eine Arbeitsoberfläche statt einer verspielten Marketing-App.</p>
|
||||
</header>
|
||||
<div class="public-demo-frame">
|
||||
<img src="assets/images/demo-kaffeeliste.png" alt="Ausschnitt aus der Kaffeeliste: Gesamtübersicht mit aktivem Mitglied, Stand, Ausgabe, Strichen und Einzahlungen" loading="lazy">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="public-section">
|
||||
<header class="major">
|
||||
<h2>Häufige Fragen</h2>
|
||||
</header>
|
||||
<div class="public-faq">
|
||||
<div class="public-panel">
|
||||
<h3>Wie schnell ist meine Kaffeeliste startklar?</h3>
|
||||
<p>Kundenkonto anlegen, Mitglieder eintragen, loslegen. Es ist keine Einrichtung durch uns nötig, und die bestehenden Abläufe rund um Striche und Einzahlungen bleiben dieselben.</p>
|
||||
</div>
|
||||
<div class="public-panel">
|
||||
<h3>Sind unsere Daten von denen anderer Kunden getrennt?</h3>
|
||||
<p>Ja. Jeder Kunde hat einen eigenen, isolierten Bereich für Mitglieder, Buchungen und Einstellungen. Diese Trennung ist fester Bestandteil der App und wird automatisiert geprüft.</p>
|
||||
</div>
|
||||
<div class="public-panel">
|
||||
<h3>Wer darf in unserem Team was ändern?</h3>
|
||||
<p>Ihr vergebt Rollen wie Administrator, Kassenwart oder Mitglied gezielt pro Person – und könnt den Zugang jederzeit wieder entziehen, ohne den Mitgliedseintrag selbst zu löschen.</p>
|
||||
</div>
|
||||
<div class="public-panel">
|
||||
<h3>Können wir unsere Daten exportieren oder löschen lassen?</h3>
|
||||
<p>Ja. Ihr könnt alle gespeicherten Daten jederzeit als Export herunterladen und einzelne Mitglieder oder euren gesamten Kundenbereich selbstständig wieder entfernen lassen.</p>
|
||||
</div>
|
||||
<div class="public-panel">
|
||||
<h3>Müssen wir PayPal nutzen?</h3>
|
||||
<p>Nein, PayPal ist optional und lässt sich in den Mandant-Einstellungen aktivieren. Einzahlungen können weiterhin auch manuell erfasst werden.</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="actions">
|
||||
<li><a href="faq.php" class="button">Weitere Fragen ansehen</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="public-section public-cta">
|
||||
<header class="major">
|
||||
<h2>Bereit für eine Kaffeekasse, die mitdenkt?</h2>
|
||||
<p>In wenigen Minuten eingerichtet, für dein ganzes Team nutzbar.</p>
|
||||
</header>
|
||||
<ul class="actions">
|
||||
<li><a href="register.php" class="button primary big">Kundenkonto anlegen</a></li>
|
||||
<li><a href="login.php" class="button big">Zur App</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user