diff --git a/README.md b/README.md index 9c7739f..d113ad3 100644 --- a/README.md +++ b/README.md @@ -20,6 +20,87 @@ Datumsrechner Live: [https://date.elpatron.me](https://date.elpatron.me) - Start-/Enddatum einer Kalenderwoche eines Jahres - Statistik-Dashboard mit Passwortschutz unter `/stats` +## Installation (lokal) + +1. Python 3.8+ installieren +2. Abhängigkeiten installieren: + +```bash +pip install -r requirements.txt +``` + +## Starten der App + +```bash +python app.py +``` + +Die App ist dann unter http://localhost:5000 erreichbar. + +## Statistik-Dashboard (/stats) & Passwortschutz + +Das Dashboard ist mit einem statischen Passwort geschützt, das über die Umgebungsvariable `STATS_PASSWORD` gesetzt wird. + +![image-20250725100127004](./assets/image-20250725100127004.png) + +Beispiel (PowerShell): + +```powershell +$env:STATS_PASSWORD = "meinSicheresPasswort" +python app.py +``` + +Für Docker: + +```powershell +$env:STATS_PASSWORD = "meinSicheresPasswort" +docker run -e STATS_PASSWORD=$env:STATS_PASSWORD -p 5000:5000 datumsrechner +``` + +## Docker (empfohlen für Produktion) + +Die App läuft im Container mit dem WSGI-Server **Gunicorn**: + +```bash +docker build -t datumsrechner . +docker run -p 5000:5000 datumsrechner +``` + +- Gunicorn startet automatisch (siehe Dockerfile) +- Empfohlen für produktiven Einsatz + +### Log-Verzeichnis mounten (Logs auf dem Host speichern) + +Um die Logdateien außerhalb des Containers zu speichern, kannst du das log-Verzeichnis mounten: + +**PowerShell-Beispiel:** + +```powershell +docker run -e STATS_PASSWORD=deinPasswort -p 5000:5000 -v ${PWD}/log:/app/log datumsrechner +``` + +### docker-compose Beispiel + +Erstelle eine Datei `docker-compose.yml`: + +```yaml +services: + datumsrechner: + build: . + ports: + - "5000:5000" + environment: + - STATS_PASSWORD=deinPasswort + volumes: + - ./log:/app/log +``` + +Starte mit: + +```bash +docker-compose up --build +``` + ## REST API Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptiert und liefert JSON. @@ -194,87 +275,6 @@ curl http://localhost:5000/api/monitor { "error": "Ungültige Eingabe", "details": "..." } ``` -## Installation (lokal) - -1. Python 3.8+ installieren -2. Abhängigkeiten installieren: - -```bash -pip install -r requirements.txt -``` - -## Starten der App - -```bash -python app.py -``` - -Die App ist dann unter http://localhost:5000 erreichbar. - -## Statistik-Dashboard (/stats) & Passwortschutz - -Das Dashboard ist mit einem statischen Passwort geschützt, das über die Umgebungsvariable `STATS_PASSWORD` gesetzt wird. - -![image-20250725100127004](./assets/image-20250725100127004.png) - -Beispiel (PowerShell): - -```powershell -$env:STATS_PASSWORD = "meinSicheresPasswort" -python app.py -``` - -Für Docker: - -```powershell -$env:STATS_PASSWORD = "meinSicheresPasswort" -docker run -e STATS_PASSWORD=$env:STATS_PASSWORD -p 5000:5000 datumsrechner -``` - -## Docker (empfohlen für Produktion) - -Die App läuft im Container mit dem WSGI-Server **Gunicorn**: - -```bash -docker build -t datumsrechner . -docker run -p 5000:5000 datumsrechner -``` - -- Gunicorn startet automatisch (siehe Dockerfile) -- Empfohlen für produktiven Einsatz - -### Log-Verzeichnis mounten (Logs auf dem Host speichern) - -Um die Logdateien außerhalb des Containers zu speichern, kannst du das log-Verzeichnis mounten: - -**PowerShell-Beispiel:** - -```powershell -docker run -e STATS_PASSWORD=deinPasswort -p 5000:5000 -v ${PWD}/log:/app/log datumsrechner -``` - -### docker-compose Beispiel - -Erstelle eine Datei `docker-compose.yml`: - -```yaml -services: - datumsrechner: - build: . - ports: - - "5000:5000" - environment: - - STATS_PASSWORD=deinPasswort - volumes: - - ./log:/app/log -``` - -Starte mit: - -```bash -docker-compose up --build -``` - ## Progressive Web App (PWA) Elpatrons Datumsrechner ist als PWA installierbar (z.B. auf Android/iOS-Homescreen oder Desktop). Die App funktioniert offline für die Startseite und statische Ressourcen, die Datumsberechnung bleibt serverseitig. @@ -293,11 +293,13 @@ Die App bietet einen Monitoring-Endpunkt unter `/monitor`, der Statusinformation - Pageviews der letzten 7 Tage Beispiel-Aufruf: + ``` GET https://date.elpatron.me/monitor ``` Antwort: + ```json { "status": "ok", @@ -339,24 +341,24 @@ Dieses Projekt wurde zu nahezu 100% mit Unterstützung künsticher Intelligenz ( Es werden keine IP-Adressen oder sonstigen persönlichen Daten gespeichert, lediglich die Zahl der Aufrufe der Funktionen in einer kumulierten Darstellung. Die Logdatei enthält nur Einträge der letzten sieben Tage. +### Barrierefreiheit (Accessibility) + +*Elpatrons Datumsrechner* ist barrierefrei gestaltet und erfüllt zentrale Anforderungen an Accessibility (a11y): + +- *Semantische HTML-Struktur:* Überschriften, Labels und Formularelemente sind korrekt ausgezeichnet und verknüpft. +- *ARIA-Attribute:* Accordion und Statusmeldungen sind mit ARIA-Attributen versehen, damit Screenreader die Struktur und Zustände erkennen. +- *Tastaturbedienbarkeit:* Alle interaktiven Elemente (Accordion, Buttons, Formulare) sind vollständig per Tastatur bedienbar (inkl. Fokus-Indikator und Pfeiltasten-Navigation im Accordion). +- *Fokus-Indikatoren:* Deutliche visuelle Hervorhebung des Fokus für alle Bedienelemente. +- *Farbkontraste:* Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien. +- *Status- und Fehlermeldungen:* Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht. +- *Mobile Optimierung:* Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern. +- *SEO:* Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar. + +Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Sehbehinderung, motorische Einschränkungen) gut nutzbar und entspricht modernen Webstandards. + ## Lizenz Dieses Projekt steht unter der [MIT-Lizenz](LICENSE). --- (c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron) - -## Barrierefreiheit (Accessibility) - -Elpatrons Datumsrechner ist barrierefrei gestaltet und erfüllt zentrale Anforderungen an Accessibility (a11y): - -- **Semantische HTML-Struktur:** Überschriften, Labels und Formularelemente sind korrekt ausgezeichnet und verknüpft. -- **ARIA-Attribute:** Accordion und Statusmeldungen sind mit ARIA-Attributen versehen, damit Screenreader die Struktur und Zustände erkennen. -- **Tastaturbedienbarkeit:** Alle interaktiven Elemente (Accordion, Buttons, Formulare) sind vollständig per Tastatur bedienbar (inkl. Fokus-Indikator und Pfeiltasten-Navigation im Accordion). -- **Fokus-Indikatoren:** Deutliche visuelle Hervorhebung des Fokus für alle Bedienelemente. -- **Farbkontraste:** Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien. -- **Status- und Fehlermeldungen:** Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht. -- **Mobile Optimierung:** Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern. -- **SEO:** Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar. - -Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Sehbehinderung, motorische Einschränkungen) gut nutzbar und entspricht modernen Webstandards. \ No newline at end of file