11 Commits

Author SHA1 Message Date
53d5309d65 Add sitemap.xml and robots.txt for SEO optimization 2025-08-04 11:29:06 +02:00
a131fc8077 Vorlesen-Buttons kontrastreicher gestaltet: schwarze Symbole auf hellem Hintergrund 2025-08-03 14:07:50 +02:00
deec62fec0 Update Screenshot 2025-08-03 13:54:19 +02:00
9e5906943d Screenshot zur Demo verlinkt 2025-08-03 13:40:52 +02:00
cabe628875 Bump version to 1.4.15 2025-08-03 13:32:43 +02:00
35ecba348b Fix stats route UnboundLocalError and bump version to 1.4.14 2025-08-03 12:59:41 +02:00
31b1c12dcb Code cleanup and dependency updates
- Remove unused imports (abort, g, ngettext) from app.py
- Remove unused variables (werktage, datumsrechnung, werktagsrechnung, wochen_monate)
- Update Flask from 3.0.0 to 3.1.1
- Update requests from 2.31.0 to 2.32.4
- Update pytest from 7.4.3 to 8.4.1
- Update numpy from 1.26.4 to 2.3.2 (safe migration based on NumPy 2.0 guide)
- Add pytest to requirements.txt (was missing)
2025-08-03 12:56:09 +02:00
95ed606796 Update README (manually) 2025-08-03 12:39:26 +02:00
52eac7530a Fix calculator button font (manually) 2025-08-03 12:28:46 +02:00
2f6138b1d6 Bump version to 1.4.13 2025-08-03 12:06:24 +02:00
f5a39e80b4 Taschenrechner-Features hinzugefügt und README aktualisiert 2025-08-03 12:05:02 +02:00
9 changed files with 827 additions and 54 deletions

View File

@@ -42,7 +42,7 @@ Diese moderne Python-Webanwendung (Flask) ermöglicht verschiedene Datumsberechn
Datumsrechner Live: [https://date.elpatron.me](https://date.elpatron.me) Datumsrechner Live: [https://date.elpatron.me](https://date.elpatron.me)
![App Screenshot](./assets/image-20250725095959116.png) [![App Screenshot](./assets/image-20250725095959116.png)](https://date.elpatron.me)
**[Lighthouse](https://en.wikipedia.org/wiki/Lighthouse_(software))-Performance-Score:** **[Lighthouse](https://en.wikipedia.org/wiki/Lighthouse_(software))-Performance-Score:**
@@ -60,6 +60,7 @@ Die Webanwendung erreicht hervorragende Performance-Werte in allen Kategorien (P
- Datum plus/minus X Wochen/Monate - Datum plus/minus X Wochen/Monate
- Kalenderwoche zu Datum - Kalenderwoche zu Datum
- Start-/Enddatum einer Kalenderwoche eines Jahres - Start-/Enddatum einer Kalenderwoche eines Jahres
- Integrierter Taschenrechner mit History und Sprachausgabe
- Mehrsprachige Unterstützung (Deutsch/Englisch) mit automatischer Browser-Spracherkennung - Mehrsprachige Unterstützung (Deutsch/Englisch) mit automatischer Browser-Spracherkennung
- Sprachausgabe für alle Ergebnisse (barrierefrei) - Sprachausgabe für alle Ergebnisse (barrierefrei)
- Statistik-Dashboard mit Passwortschutz unter `/stats` - Statistik-Dashboard mit Passwortschutz unter `/stats`
@@ -69,6 +70,7 @@ Die Webanwendung erreicht hervorragende Performance-Werte in allen Kategorien (P
Die Werktagsberechnung kann optional bundeslandspezifische Feiertage berücksichtigen. Dazu wird die kostenlose API von [feiertage-api.de](https://feiertage-api.de) verwendet. Die Werktagsberechnung kann optional bundeslandspezifische Feiertage berücksichtigen. Dazu wird die kostenlose API von [feiertage-api.de](https://feiertage-api.de) verwendet.
**Verfügbare Bundesländer:** **Verfügbare Bundesländer:**
- Baden-Württemberg (BW) - Baden-Württemberg (BW)
- Bayern (BY) - Bayern (BY)
- Berlin (BE) - Berlin (BE)
@@ -93,24 +95,29 @@ Die Feiertage werden automatisch für den gewählten Zeitraum abgerufen und bei
Die Anwendung unterstützt Deutsch und Englisch mit folgenden Features: Die Anwendung unterstützt Deutsch und Englisch mit folgenden Features:
### Automatische Spracherkennung: ### Automatische Spracherkennung:
- *Browser-Sprache*: Automatische Erkennung der Browser-Einstellung - *Browser-Sprache*: Automatische Erkennung der Browser-Einstellung
- *URL-Parameter*: Sprachauswahl über `?lang=de` oder `?lang=en` - *URL-Parameter*: Sprachauswahl über `?lang=de` oder `?lang=en`
- *localStorage*: Persistente Sprachauswahl im Browser - *localStorage*: Persistente Sprachauswahl im Browser
- *Fallback*: Deutsch als Standardsprache - *Fallback*: Deutsch als Standardsprache
### *Datenschutzfreundliche Implementierung:* ### *Datenschutzfreundliche Implementierung:*
- *Keine Cookies*: Sprachauswahl ohne Cookies - *Keine Cookies*: Sprachauswahl ohne Cookies
- *URL-Parameter*: Transparente Sprachauswahl in der URL - *URL-Parameter*: Transparente Sprachauswahl in der URL
- *localStorage*: Lokale Speicherung im Browser - *localStorage*: Lokale Speicherung im Browser
- *Teilbare URLs*: URLs mit Sprachauswahl können geteilt werden - *Teilbare URLs*: URLs mit Sprachauswahl können geteilt werden
### *Barrierefreiheit:* ### *Barrierefreiheit:*
- *Screenreader*: Vollständige Unterstützung - *Screenreader*: Vollständige Unterstützung
- *Tastatur-Navigation*: Vollständig bedienbar - *Tastatur-Navigation*: Vollständig bedienbar
- *ARIA-Attribute*: Korrekte Beschriftungen - *ARIA-Attribute*: Korrekte Beschriftungen
- *Semantische HTML*: Korrekte Struktur - *Semantische HTML*: Korrekte Struktur
- *Taschenrechner*: Vollständig barrierefrei mit Tastatur-Bedienung und Sprachausgabe
### *Technische Details:* ### *Technische Details:*
- *Flask-Babel*: Professionelle i18n-Implementierung - *Flask-Babel*: Professionelle i18n-Implementierung
- *Gettext*: Standard für Übersetzungen - *Gettext*: Standard für Übersetzungen
- *Responsive Design*: Angepasst für alle Geräte - *Responsive Design*: Angepasst für alle Geräte
@@ -200,8 +207,11 @@ docker-compose up --build
## REST API ## REST API
Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptiert und liefert JSON. Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptiert und liefert JSON.
**Basis-URL:** `http://localhost:5000/api/` **Basis-URL:** `http://localhost:5000/api/`
**Swagger Dokumentation:** [https://date.elpatron.me/api-docs](https://date.elpatron.me/api-docs)
**Hinweis:** Die Nutzung der REST API wird im Statistik-Dashboard ausgewertet und als Diagramm angezeigt. **Hinweis:** Die Nutzung der REST API wird im Statistik-Dashboard ausgewertet und als Diagramm angezeigt.
### Endpunkte und Beispiele ### Endpunkte und Beispiele
@@ -396,6 +406,7 @@ Elpatrons Datumsrechner ist als PWA installierbar (z.B. auf Android/iOS-Homescre
- Manifest und Service Worker sind integriert - Manifest und Service Worker sind integriert
- App-Icon und Theme-Color für Homescreen - App-Icon und Theme-Color für Homescreen
- Installation über Browser-Menü ("Zum Startbildschirm hinzufügen") - Installation über Browser-Menü ("Zum Startbildschirm hinzufügen")
- Taschenrechner funktioniert vollständig clientseitig (offline verfügbar)
## Monitoring & Healthcheck ## Monitoring & Healthcheck
@@ -408,9 +419,7 @@ Die App bietet einen Monitoring-Endpunkt unter `/monitor`, der Statusinformation
Beispiel-Aufruf: Beispiel-Aufruf:
``` `GET https://date.elpatron.me/monitor`
GET https://date.elpatron.me/monitor
```
Antwort: Antwort:
@@ -449,7 +458,7 @@ Finde mal eine Datumsrechner- Webapp, die nicht völlig Werbe- und Tracking vers
### Vibe Coding ### Vibe Coding
Dieses Projekt wurde zu nahezu 100% mit Unterstützung künsticher Intelligenz (*[Vibe Coding](https://de.wikipedia.org/wiki/Vibe_Coding)*) erstellt. Das Grundgerüst war nach ca. 45 Minuten fertig gestellt, insgesamt hat die Entwicklung des Projekts ca. 4 Stunden Zeit beansprucht. Dieses Projekt wurde zu nahezu 100% mit Unterstützung künsticher Intelligenz (*[Vibe Coding](https://de.wikipedia.org/wiki/Vibe_Coding)*) erstellt. Das Grundgerüst war nach ca. 45 Minuten fertig gestellt, insgesamt hat die Entwicklung des Projekts ca. 12 Stunden Zeit beansprucht.
### Statistik-Erfassung, Logging ### Statistik-Erfassung, Logging
@@ -466,6 +475,7 @@ Es werden keine IP-Adressen oder sonstigen persönlichen Daten gespeichert, ledi
- *Farbkontraste:* Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien. - *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. - *Status- und Fehlermeldungen:* Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht.
- *Sprachausgabe:* Alle Ergebnisse können über 🔊-Buttons vorgelesen werden (Web Speech API, deutsche Sprache). - *Sprachausgabe:* Alle Ergebnisse können über 🔊-Buttons vorgelesen werden (Web Speech API, deutsche Sprache).
- *Taschenrechner:* Vollständig barrierefrei mit Tastatur-Bedienung, Sprachausgabe und History-Funktion.
- *Mobile Optimierung:* Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern. - *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. - *SEO:* Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar.
@@ -473,23 +483,23 @@ Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Seh
### Code Statistik ### Code Statistik
cloc|github.com/AlDanial/cloc v 2.06 T=0.17 s (146.7 files/s, 35235.5 lines/s) cloc|github.com/AlDanial/cloc v 2.06 T=0.23 s (109.5 files/s, 30735.0 lines/s)
--- | --- --- | ---
Language|files|blank|comment|code Language|files|blank|comment|code
:-------|-------:|-------:|-------:|-------: :-------|-------:|-------:|-------:|-------:
HTML|8|48|6|2092 HTML|8|159|8|2805
Python|2|59|68|690 Python|2|66|74|739
JavaScript|2|95|87|571 JavaScript|2|95|88|580
Markdown|3|176|0|493 PO File|2|260|266|544
PO File|2|234|240|492 Markdown|3|184|0|498
JSON|3|0|0|243 JSON|3|0|0|243
CSS|1|186|3|188 CSS|1|186|3|188
SVG|2|0|0|14 SVG|2|0|0|14
Dockerfile|1|5|6|8 Dockerfile|1|5|6|8
DOS Batch|1|0|0|1 DOS Batch|1|0|0|1
--------|--------|--------|--------|-------- --------|--------|--------|--------|--------
SUM:|25|803|410|4792 SUM:|25|955|445|5620
## Lizenz ## Lizenz
@@ -498,4 +508,4 @@ Dieses Projekt steht unter der [MIT-Lizenz](LICENSE).
--- ---
(c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron) (c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron)
**Version 1.4.0** - Mehrsprachige Unterstützung hinzugefügt **Version 1.4.12** - Integrierter Taschenrechner mit History und Sprachausgabe hinzugefügt

27
app.py
View File

@@ -1,5 +1,5 @@
from flask import Flask, render_template, request, redirect, url_for, session, abort, jsonify, g, make_response from flask import Flask, render_template, request, redirect, url_for, session, jsonify, make_response
from flask_babel import Babel, gettext, ngettext, get_locale from flask_babel import Babel, gettext, get_locale
from datetime import datetime, timedelta from datetime import datetime, timedelta
import numpy as np import numpy as np
from dateutil.relativedelta import relativedelta from dateutil.relativedelta import relativedelta
@@ -20,7 +20,7 @@ app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations'
babel = Babel() babel = Babel()
# Version der App # Version der App
APP_VERSION = "1.4.11" APP_VERSION = "1.4.15"
def add_cache_headers(response): def add_cache_headers(response):
"""Fügt Cache-Control-Header hinzu, die den Back-Forward-Cache ermöglichen""" """Fügt Cache-Control-Header hinzu, die den Back-Forward-Cache ermöglichen"""
@@ -118,7 +118,7 @@ def index():
with open(log_path, 'a', encoding='utf-8') as f: with open(log_path, 'a', encoding='utf-8') as f:
from datetime import datetime as dt from datetime import datetime as dt
f.write(f"{dt.now().isoformat()} PAGEVIEW\n") f.write(f"{dt.now().isoformat()} PAGEVIEW\n")
tage = werktage = wochentag = datumsrechnung = werktagsrechnung = kw_berechnen = kw_datum = wochen_monate = None tage = wochentag = kw_berechnen = kw_datum = None
feiertage_anzahl = wochenendtage_anzahl = None feiertage_anzahl = wochenendtage_anzahl = None
active_idx = 0 active_idx = 0
plusminus_result = None plusminus_result = None
@@ -245,7 +245,7 @@ def index():
plusminus_result = f"Datum {d.strftime('%d.%m.%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} Monate: {result.strftime('%d.%m.%Y')}" plusminus_result = f"Datum {d.strftime('%d.%m.%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} Monate: {result.strftime('%d.%m.%Y')}"
except Exception: except Exception:
plusminus_result = gettext('Ungültige Eingabe') plusminus_result = gettext('Ungültige Eingabe')
response = make_response(render_template('index.html', tage=tage, werktage=werktage, wochentag=wochentag, plusminus_result=plusminus_result, kw_berechnen=kw_berechnen, kw_datum=kw_datum, active_idx=active_idx response = make_response(render_template('index.html', tage=tage, wochentag=wochentag, plusminus_result=plusminus_result, kw_berechnen=kw_berechnen, kw_datum=kw_datum, active_idx=active_idx
, feiertage_anzahl=feiertage_anzahl, wochenendtage_anzahl=wochenendtage_anzahl, app_version=APP_VERSION, get_locale=get_locale , feiertage_anzahl=feiertage_anzahl, wochenendtage_anzahl=wochenendtage_anzahl, app_version=APP_VERSION, get_locale=get_locale
)) ))
return add_cache_headers(response) return add_cache_headers(response)
@@ -321,10 +321,13 @@ def stats():
session['stats_auth'] = True session['stats_auth'] = True
return redirect(url_for('stats')) return redirect(url_for('stats'))
else: else:
response = make_response(render_template('stats_login.html', error='Falsches Passwort!')) response = make_response(render_template('stats_login.html', error='Falsches Passwort!'))
return add_cache_headers(response) return add_cache_headers(response)
response = make_response(render_template('stats_login.html', error=None)) else:
return add_cache_headers(response) response = make_response(render_template('stats_login.html', error=None))
return add_cache_headers(response)
# Wenn authentifiziert, zeige Dashboard
log_path = os.path.join('log', 'pageviews.log') log_path = os.path.join('log', 'pageviews.log')
pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly = parse_log_stats(log_path) pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly = parse_log_stats(log_path)
response = make_response(render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, func_counts_hourly=func_counts_hourly, impressions_per_day=impressions_per_day, impressions_per_hour=impressions_per_hour, api_counts=api_counts, api_counts_hourly=api_counts_hourly)) response = make_response(render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, func_counts_hourly=func_counts_hourly, impressions_per_day=impressions_per_day, impressions_per_hour=impressions_per_hour, api_counts=api_counts, api_counts_hourly=api_counts_hourly))
@@ -500,6 +503,12 @@ def api_docs():
response = make_response(render_template('swagger.html')) response = make_response(render_template('swagger.html'))
return add_cache_headers(response) return add_cache_headers(response)
@app.route('/sitemap.xml')
def sitemap():
"""Serviert die Sitemap für Suchmaschinen"""
from flask import send_file
return send_file('sitemap.xml', mimetype='application/xml')
if __name__ == '__main__': if __name__ == '__main__':
app.run(debug=True, host="0.0.0.0") app.run(debug=True, host="0.0.0.0")

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 57 KiB

View File

@@ -1,5 +1,6 @@
Flask==3.0.0 Flask==3.1.1
numpy==1.26.4 numpy==2.3.2
python-dateutil==2.9.0.post0 python-dateutil==2.9.0.post0
requests==2.31.0 requests==2.32.4
Flask-Babel==4.0.0 Flask-Babel==4.0.0
pytest==8.4.1

View File

@@ -1,2 +1,14 @@
User-agent: * User-agent: *
Allow: / Allow: /
# Sitemap
Sitemap: https://date.elpatron.me/sitemap.xml
# Disallow private areas
Disallow: /stats
Disallow: /log/
Disallow: /htmlcov/
# Allow API endpoints for documentation
Allow: /api-docs
Allow: /static/swagger.json

83
sitemap.xml Normal file
View File

@@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!-- Hauptseite -->
<url>
<loc>https://date.elpatron.me/</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<!-- API-Dokumentation -->
<url>
<loc>https://date.elpatron.me/api-docs</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<!-- Statische Ressourcen -->
<url>
<loc>https://date.elpatron.me/static/favicon.ico</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>yearly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>https://date.elpatron.me/static/favicon.png</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>yearly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>https://date.elpatron.me/static/favicon.svg</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>yearly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>https://date.elpatron.me/static/logo.svg</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>yearly</changefreq>
<priority>0.1</priority>
</url>
<url>
<loc>https://date.elpatron.me/static/manifest.json</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>monthly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://date.elpatron.me/static/service-worker.js</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>monthly</changefreq>
<priority>0.3</priority>
</url>
<url>
<loc>https://date.elpatron.me/static/swagger.json</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
<!-- Sprachversionen der Hauptseite -->
<url>
<loc>https://date.elpatron.me/?lang=de</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://date.elpatron.me/?lang=en</loc>
<lastmod>2025-08-03</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
</urlset>

View File

@@ -97,6 +97,186 @@ body {
background: rgba(37, 99, 235, 0.25); background: rgba(37, 99, 235, 0.25);
border-color: var(--primary); border-color: var(--primary);
} }
.help-button:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Calculator Styles */
.calculator-btn {
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
font-weight: 500;
width: 100%;
max-width: 480px;
min-height: 44px;
min-width: 44px;
padding: 1em 1.2em;
font-size: 1.1em;
font-weight: bold;
}
.calculator-btn:hover {
background: var(--primary-dark);
}
.calculator-btn:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
}
.calculator-modal {
max-width: 400px;
width: fit-content;
}
.calculator {
background: #f8fafc;
border-radius: 12px;
padding: 0.8em;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: fit-content;
margin: 0 auto;
}
.calculator-display {
margin-bottom: 0.8em;
}
.calculator-history {
margin-bottom: 0.8em;
min-height: 40px;
border: 2px solid #d1d5db;
border-radius: 6px;
background: #f9fafb;
padding: 0.3em;
font-family: 'Courier New', monospace;
font-size: 0.8em;
color: #6b7280;
overflow-y: auto;
max-height: 80px;
}
.history-item {
padding: 0.3em 0;
border-bottom: 1px solid #e5e7eb;
text-align: right;
font-weight: 500;
}
.history-item:last-child {
border-bottom: none;
color: #374151;
font-weight: 600;
}
.calculator-display input {
width: 100%;
padding: 0.8em;
padding-right: 3.5em;
font-size: 1.3em;
text-align: right;
border: 3px solid #374151;
border-radius: 8px;
background: #ffffff;
color: #111827;
font-family: 'Courier New', monospace;
font-weight: 600;
min-height: 48px;
}
.calculator-display input:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
border-color: #1f2937;
}
.calculator-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.3em;
margin: 0 auto;
}
.calc-btn {
padding: 0.7em;
font-size: 1.1em !important;
font-family: 'Segoe UI', Arial, sans-serif !important;
border: 2px solid #374151;
background: #f9fafb;
color: #111827;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
font-weight: 600 !important;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
}
.calc-btn:hover {
background: #e5e7eb;
border-color: #1f2937;
}
.calc-btn:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
background: #e5e7eb;
border-color: #1f2937;
}
.calc-clear {
background: #ef4444;
color: white;
}
.calc-clear:hover {
background: #dc2626;
}
.calc-delete {
background: #f59e0b;
color: white;
}
.calc-delete:hover {
background: #d97706;
}
.calc-operator {
background: var(--primary);
color: white;
}
.calc-operator:hover {
background: var(--primary-dark);
}
.calc-equals {
background: #10b981;
color: white;
grid-row: span 2;
}
.calc-equals:hover {
background: #059669;
}
.calc-zero {
grid-column: span 2;
}
.help-button:focus { .help-button:focus {
outline: 3px solid #facc15; outline: 3px solid #facc15;
outline-offset: 2px; outline-offset: 2px;
@@ -154,7 +334,7 @@ body {
padding: 2em; padding: 2em;
max-width: 90%; max-width: 90%;
width: 90%; width: 90%;
max-height: 90vh; max-height: 95vh;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
@@ -318,9 +498,9 @@ button:focus, .accordion-header:focus {
position: absolute; position: absolute;
top: 0.5em; top: 0.5em;
right: 0.5em; right: 0.5em;
background: rgba(37, 99, 235, 0.15); background: #ffffff;
color: var(--primary-dark); color: #000000;
border: 1px solid var(--border); border: 2px solid #000000;
border-radius: 4px; border-radius: 4px;
padding: 0.3em 0.6em; padding: 0.3em 0.6em;
font-size: 0.8em; font-size: 0.8em;
@@ -334,19 +514,20 @@ button:focus, .accordion-header:focus {
z-index: 5; z-index: 5;
} }
.read-aloud-btn:hover { .read-aloud-btn:hover {
background: rgba(37, 99, 235, 0.25); background: #f0f0f0;
border-color: var(--primary); border-color: #333333;
} }
.read-aloud-btn:focus { .read-aloud-btn:focus {
outline: 3px solid #facc15; outline: 3px solid #facc15;
outline-offset: 2px; outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b; box-shadow: 0 0 0 4px #1e293b;
background: rgba(37, 99, 235, 0.25); background: #f0f0f0;
border-color: var(--primary); border-color: #333333;
} }
.read-aloud-btn.playing { .read-aloud-btn.playing {
background: var(--primary); background: #000000;
color: white; color: #ffffff;
border-color: #000000;
} }
.accordion { .accordion {
border-radius: 12px; border-radius: 12px;
@@ -508,7 +689,7 @@ button:focus, .accordion-header:focus {
padding: 0.4em 0.6em; padding: 0.4em 0.6em;
} }
.modal-content { .modal-content {
padding: 1.5em; padding: 1.2em;
margin: 1em; margin: 1em;
width: calc(100% - 2em); width: calc(100% - 2em);
max-width: none; max-width: none;
@@ -519,6 +700,38 @@ button:focus, .accordion-header:focus {
overflow-x: hidden; overflow-x: hidden;
} }
.calculator-modal {
max-width: 95%;
width: 95%;
}
.calculator {
width: 100%;
padding: 0.8em;
}
.calculator-buttons {
width: 100%;
gap: 0.3em;
}
.calc-btn {
padding: 0.6em;
font-size: 1.1em;
padding: 1em 1.2em;
font-weight: 600;
/* font-family: 'Segoe UI', Arial, sans-serif; */
min-width: 44px;
min-height: 44px;
}
.calculator-display input {
padding: 0.6em;
padding-right: 3em;
font-size: 1.2em;
min-height: 44px;
}
.modal-close { .modal-close {
top: 0.8em; top: 0.8em;
right: 0.8em; right: 0.8em;
@@ -677,6 +890,214 @@ footer br + a {
document.querySelector('.help-button').focus(); document.querySelector('.help-button').focus();
} }
// Taschenrechner-Funktionen
let calculatorDisplay = '0';
let calculatorPreviousValue = null;
let calculatorCurrentOperator = null;
let calculatorWaitingForOperand = false;
let calculatorHistory = [];
function showCalculator() {
const modal = document.getElementById('calculatorModal');
const input = document.getElementById('calculatorInput');
if (modal && input) {
modal.style.display = 'flex';
modal.classList.add('active');
input.focus();
}
}
function hideCalculator() {
const modal = document.getElementById('calculatorModal');
modal.style.display = 'none';
modal.classList.remove('active');
}
function calculatorClear() {
calculatorDisplay = '0';
calculatorPreviousValue = null;
calculatorCurrentOperator = null;
calculatorWaitingForOperand = false;
calculatorHistory = [];
updateCalculatorDisplay();
}
function calculatorDelete() {
if (calculatorDisplay.length === 1) {
calculatorDisplay = '0';
} else {
calculatorDisplay = calculatorDisplay.slice(0, -1);
}
updateCalculatorDisplay();
}
function calculatorNumber(num) {
if (calculatorWaitingForOperand) {
calculatorDisplay = num;
calculatorWaitingForOperand = false;
} else {
calculatorDisplay = calculatorDisplay === '0' ? num : calculatorDisplay + num;
}
updateCalculatorDisplay();
}
function calculatorDecimal() {
if (calculatorWaitingForOperand) {
calculatorDisplay = '0.';
calculatorWaitingForOperand = false;
} else if (calculatorDisplay.indexOf('.') === -1) {
calculatorDisplay += '.';
}
updateCalculatorDisplay();
}
function calculatorOperator(op) {
const inputValue = parseFloat(calculatorDisplay);
if (calculatorPreviousValue === null) {
calculatorPreviousValue = inputValue;
} else if (calculatorCurrentOperator) {
const result = performCalculation(calculatorPreviousValue, inputValue, calculatorCurrentOperator);
calculatorDisplay = String(result);
calculatorPreviousValue = result;
}
calculatorWaitingForOperand = true;
calculatorCurrentOperator = op;
updateCalculatorDisplay();
}
function calculatorEquals() {
const inputValue = parseFloat(calculatorDisplay);
if (calculatorPreviousValue === null || calculatorCurrentOperator === null) {
return;
}
const result = performCalculation(calculatorPreviousValue, inputValue, calculatorCurrentOperator);
// Füge zur History hinzu
const historyEntry = calculatorPreviousValue + ' ' + getOperatorSymbol(calculatorCurrentOperator) + ' ' + inputValue + ' = ' + result;
addToHistory(historyEntry);
calculatorDisplay = String(result);
calculatorPreviousValue = null;
calculatorCurrentOperator = null;
calculatorWaitingForOperand = true;
updateCalculatorDisplay();
}
function performCalculation(firstValue, secondValue, operator) {
switch (operator) {
case '+':
return firstValue + secondValue;
case '-':
return firstValue - secondValue;
case '*':
return firstValue * secondValue;
case '/':
return secondValue !== 0 ? firstValue / secondValue : 'Error';
default:
return secondValue;
}
}
function updateCalculatorDisplay() {
const display = document.getElementById('calculatorInput');
if (calculatorDisplay === 'Error') {
display.value = 'Error';
display.setAttribute('aria-label', '{{ _("Fehler") }}');
calculatorDisplay = '0';
calculatorPreviousValue = null;
calculatorCurrentOperator = null;
calculatorWaitingForOperand = false;
} else {
display.value = calculatorDisplay;
display.setAttribute('aria-label', '{{ _("Taschenrechner Anzeige") }}: ' + calculatorDisplay);
}
updateHistoryDisplay();
}
function readAloudFromCalculator(button) {
// Prüfe, ob bereits eine Wiedergabe läuft
if (currentSpeech && speechSynthesis.speaking) {
// Stoppe die aktuelle Wiedergabe
speechSynthesis.cancel();
currentSpeech = null;
button.classList.remove('playing');
button.textContent = '🔊';
return;
}
// Finde das Eingabefeld
const inputElement = document.getElementById('calculatorInput');
if (!inputElement) return;
let textToRead = inputElement.value;
// Übersetze Zahlen und Operatoren für bessere Sprachausgabe
if (textToRead !== 'Error') {
// Prüfe, ob es sich um ein Ergebnis einer Berechnung handelt
if (calculatorHistory.length > 0) {
// Verwende die letzte Berechnung aus der History
const lastCalculation = calculatorHistory[0];
textToRead = lastCalculation;
// Übersetze mathematische Symbole für bessere Sprachausgabe
textToRead = textToRead.replace(/×/g, ' mal ');
textToRead = textToRead.replace(/÷/g, ' geteilt durch ');
textToRead = textToRead.replace(//g, ' minus ');
textToRead = textToRead.replace(/\+/g, ' plus ');
textToRead = textToRead.replace(/\./g, ' Komma ');
textToRead = textToRead.replace(/=/g, ' ist gleich ');
} else {
// Fallback für einzelne Zahlen
textToRead = textToRead.replace(/\./g, ' Komma ');
if (textToRead === '0') {
textToRead = '{{ _("Null") }}';
} else {
textToRead = '{{ _("Taschenrechner Anzeige") }}: ' + textToRead;
}
}
} else {
textToRead = '{{ _("Fehler") }}';
}
readAloud(textToRead, button);
}
function addToHistory(entry) {
calculatorHistory.unshift(entry);
if (calculatorHistory.length > 3) {
calculatorHistory.pop();
}
}
function updateHistoryDisplay() {
const historyContainer = document.getElementById('calculatorHistory');
if (historyContainer) {
historyContainer.innerHTML = '';
calculatorHistory.forEach((entry, index) => {
const historyItem = document.createElement('div');
historyItem.className = 'history-item';
historyItem.textContent = entry;
historyItem.setAttribute('aria-label', '{{ _("Berechnung") }} ' + (index + 1) + ': ' + entry);
historyContainer.appendChild(historyItem);
});
}
}
function getOperatorSymbol(operator) {
switch(operator) {
case '+': return '+';
case '-': return '';
case '*': return '×';
case '/': return '÷';
default: return operator;
}
}
// Sprachausgabe-Funktionalität // Sprachausgabe-Funktionalität
let currentSpeech = null; let currentSpeech = null;
@@ -889,6 +1310,7 @@ footer br + a {
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') { if (e.key === 'Escape') {
hideHelp(); hideHelp();
hideCalculator();
stopReading(); stopReading();
} }
}); });
@@ -899,6 +1321,101 @@ footer br + a {
hideHelp(); hideHelp();
} }
}); });
// Klick außerhalb des Taschenrechner-Modals zum Schließen
document.getElementById('calculatorModal').addEventListener('click', function(e) {
if (e.target === this) {
hideCalculator();
}
});
// Tastatursteuerung für Taschenrechner-Button
document.getElementById('calculatorBtn').addEventListener('keydown', function(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
showCalculator();
}
});
// Tastatursteuerung für Taschenrechner
document.addEventListener('keydown', function(event) {
const modal = document.getElementById('calculatorModal');
if (modal.style.display === 'flex') {
switch(event.key) {
case '0': case '1': case '2': case '3': case '4':
case '5': case '6': case '7': case '8': case '9':
calculatorNumber(event.key);
event.preventDefault();
break;
case '.':
case ',':
calculatorDecimal();
event.preventDefault();
break;
case '+':
case 'p': case 'P': // Plus
calculatorOperator('+');
event.preventDefault();
break;
case '-':
case 'm': case 'M': // Minus
calculatorOperator('-');
event.preventDefault();
break;
case '*':
case 'x': case 'X': // Multiplikation
case '×':
calculatorOperator('*');
event.preventDefault();
break;
case '/':
case 'd': case 'D': // Division
case '÷':
calculatorOperator('/');
event.preventDefault();
break;
case '=':
case 'Enter':
case ' ': // Leertaste für Gleich
calculatorEquals();
event.preventDefault();
break;
case 'Escape':
hideCalculator();
event.preventDefault();
break;
case 'Backspace':
case 'Delete':
calculatorDelete();
event.preventDefault();
break;
case 'c': case 'C':
case 'Escape':
calculatorClear();
event.preventDefault();
break;
case 'Tab':
// Erlaube normale Tab-Navigation
break;
default:
// Verhindere andere Tastatureingaben
event.preventDefault();
break;
}
}
});
// Werktage-Checkbox Event-Handler
var werktageCheckbox = document.getElementById('werktage');
var bundeslandSelect = document.getElementById('bundesland');
if (werktageCheckbox && bundeslandSelect) {
function toggleBundesland() {
bundeslandSelect.disabled = !werktageCheckbox.checked;
}
werktageCheckbox.addEventListener('change', toggleBundesland);
// Initial setzen
toggleBundesland();
}
}); });
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', function() { window.addEventListener('load', function() {
@@ -983,7 +1500,7 @@ footer br + a {
{% if request.form.get('werktage') %} {% if request.form.get('werktage') %}
{{ _('Anzahl der Werktage zwischen') }} <b>{{ format_date(request.form.get('start1', '')) }}</b> {{ _('und') }} <b>{{ format_date(request.form.get('end1', '')) }}:</b>{% if request.form.get('bundesland') %} {{ _('(Feiertage:') }} {{ request.form.get('bundesland') }}){% endif %}: {{ tage }} {{ _('Anzahl der Werktage zwischen') }} <b>{{ format_date(request.form.get('start1', '')) }}</b> {{ _('und') }} <b>{{ format_date(request.form.get('end1', '')) }}:</b>{% if request.form.get('bundesland') %} {{ _('(Feiertage:') }} {{ request.form.get('bundesland') }}){% endif %}: {{ tage }}
{% else %} {% else %}
{{ _('Anzahl der Tage zwischen') }} <b>{{ format_date(request.form.get('start1', '')) }}</b> {{ _('und') }} <b>{{ format_date(request.form.get('end1', '')) }}</b>: {{ tage }}. {{ _('Anzahl der Tage zwischen') }} <b>{{ format_date(request.form.get('start1', '')) }}</b> {{ _('und') }} <b>{{ format_date(request.form.get('end1', '')) }}</b>: {{ tage }}
{% endif %} {% endif %}
{% if wochenendtage_anzahl is not none or (feiertage_anzahl is not none and request.form.get('bundesland')) %} {% if wochenendtage_anzahl is not none or (feiertage_anzahl is not none and request.form.get('bundesland')) %}
<br> <br>
@@ -1126,6 +1643,56 @@ footer br + a {
</div> </div>
</div> </div>
</div> </div>
<!-- Calculator Button -->
<div style="text-align: center; margin-top: 1.5em;">
<button type="button" id="calculatorBtn" class="calculator-btn" onclick="showCalculator()" aria-label="{{ _('Taschenrechner öffnen') }}" title="{{ _('Taschenrechner öffnen') }}" tabindex="0">
🧮 {{ _('Taschenrechner') }}
</button>
</div>
</div>
<!-- Calculator Modal Overlay -->
<div id="calculatorModal" class="modal-overlay" role="dialog" aria-labelledby="calculator-title" style="display: none;">
<div class="modal-content calculator-modal">
<button type="button" class="modal-close" onclick="hideCalculator()" aria-label="{{ _('Taschenrechner schließen') }}">&times;</button>
<h1 id="calculator-title">{{ _('Taschenrechner') }}</h1>
<p class="sr-only">{{ _('Verwenden Sie die Tab-Taste um durch die Tasten zu navigieren. Tastatur-Kurzbefehle: Zahlen 0-9, Punkt oder Komma für Dezimal, Plus (+) oder P für Addition, Minus (-) oder M für Subtraktion, Stern (*) oder X für Multiplikation, Schrägstrich (/) oder D für Division, Enter oder Leertaste für Gleich, C für Löschen, Backspace für letzte Ziffer löschen.') }}</p>
<div class="calculator">
<div class="calculator-history" id="calculatorHistory" aria-label="{{ _('Berechnungsverlauf') }}" role="log" aria-live="polite"></div>
<div class="calculator-display">
<div style="position: relative; display: flex; align-items: center;">
<input type="text" id="calculatorInput" readonly aria-label="{{ _('Taschenrechner Anzeige') }}" value="0" role="textbox" aria-live="polite">
<button type="button" class="read-aloud-btn" onclick="readAloudFromCalculator(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromCalculator(this); }" aria-label="{{ _('Ergebnis vorlesen') }}" title="{{ _('Ergebnis vorlesen') }}" tabindex="0" style="position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%);">🔊</button>
</div>
</div>
<div class="calculator-buttons">
<button type="button" onclick="calculatorClear()" class="calc-btn calc-clear" aria-label="{{ _('Löschen (Taste: C)') }}" tabindex="0">C</button>
<button type="button" onclick="calculatorDelete()" class="calc-btn calc-delete" aria-label="{{ _('Letzte Ziffer löschen (Taste: Backspace)') }}" tabindex="0"></button>
<button type="button" onclick="calculatorOperator('/')" class="calc-btn calc-operator" aria-label="{{ _('Dividieren (Taste: / oder D)') }}" tabindex="0">÷</button>
<button type="button" onclick="calculatorOperator('*')" class="calc-btn calc-operator" aria-label="{{ _('Multiplizieren (Taste: * oder X)') }}" tabindex="0">×</button>
<button type="button" onclick="calculatorNumber('7')" class="calc-btn" aria-label="{{ _('Sieben') }}" tabindex="0">7</button>
<button type="button" onclick="calculatorNumber('8')" class="calc-btn" aria-label="{{ _('Acht') }}" tabindex="0">8</button>
<button type="button" onclick="calculatorNumber('9')" class="calc-btn" aria-label="{{ _('Neun') }}" tabindex="0">9</button>
<button type="button" onclick="calculatorOperator('-')" class="calc-btn calc-operator" aria-label="{{ _('Subtrahieren (Taste: - oder M)') }}" tabindex="0"></button>
<button type="button" onclick="calculatorNumber('4')" class="calc-btn" aria-label="{{ _('Vier') }}" tabindex="0">4</button>
<button type="button" onclick="calculatorNumber('5')" class="calc-btn" aria-label="{{ _('Fünf') }}" tabindex="0">5</button>
<button type="button" onclick="calculatorNumber('6')" class="calc-btn" aria-label="{{ _('Sechs') }}" tabindex="0">6</button>
<button type="button" onclick="calculatorOperator('+')" class="calc-btn calc-operator" aria-label="{{ _('Addieren (Taste: + oder P)') }}" tabindex="0">+</button>
<button type="button" onclick="calculatorNumber('1')" class="calc-btn" aria-label="{{ _('Eins') }}" tabindex="0">1</button>
<button type="button" onclick="calculatorNumber('2')" class="calc-btn" aria-label="{{ _('Zwei') }}" tabindex="0">2</button>
<button type="button" onclick="calculatorNumber('3')" class="calc-btn" aria-label="{{ _('Drei') }}" tabindex="0">3</button>
<button type="button" onclick="calculatorEquals()" class="calc-btn calc-equals" aria-label="{{ _('Gleich (Taste: Enter oder Leertaste)') }}" tabindex="0">=</button>
<button type="button" onclick="calculatorNumber('0')" class="calc-btn calc-zero" aria-label="{{ _('Null') }}" tabindex="0">0</button>
<button type="button" onclick="calculatorDecimal()" class="calc-btn" aria-label="{{ _('Komma (Taste: . oder ,)') }}" tabindex="0">.</button>
</div>
</div>
</div>
</div> </div>
<!-- Help Modal Overlay --> <!-- Help Modal Overlay -->
@@ -1184,19 +1751,6 @@ footer br + a {
© 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#1e40af; text-decoration:underline;">Markus Busche</a> © 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#1e40af; text-decoration:underline;">Markus Busche</a>
<div style="margin-top:0.5em; font-size:0.85em; color:#64748b;">v{{ app_version }}</div> <div style="margin-top:0.5em; font-size:0.85em; color:#64748b;">v{{ app_version }}</div>
</footer> </footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
var werktageCheckbox = document.getElementById('werktage');
var bundeslandSelect = document.getElementById('bundesland');
if (werktageCheckbox && bundeslandSelect) {
function toggleBundesland() {
bundeslandSelect.disabled = !werktageCheckbox.checked;
}
werktageCheckbox.addEventListener('change', toggleBundesland);
// Initial setzen
toggleBundesland();
}
});
</script>
</body> </body>
</html> </html>

View File

@@ -480,4 +480,108 @@ msgstr "Select German"
#: templates/index.html:131 #: templates/index.html:131
msgid "English auswählen" msgid "English auswählen"
msgstr "Select English" msgstr "Select English"
#: templates/index.html:132
msgid "Taschenrechner"
msgstr "Calculator"
#: templates/index.html:133
msgid "Taschenrechner öffnen"
msgstr "Open calculator"
#: templates/index.html:134
msgid "Taschenrechner schließen"
msgstr "Close calculator"
#: templates/index.html:135
msgid "Verwenden Sie die Tab-Taste um durch die Tasten zu navigieren. Tastatur-Kurzbefehle: Zahlen 0-9, Punkt oder Komma für Dezimal, Plus (+) oder P für Addition, Minus (-) oder M für Subtraktion, Stern (*) oder X für Multiplikation, Schrägstrich (/) oder D für Division, Enter oder Leertaste für Gleich, C für Löschen, Backspace für letzte Ziffer löschen."
msgstr "Use the Tab key to navigate through the buttons. Keyboard shortcuts: Numbers 0-9, period or comma for decimal, Plus (+) or P for addition, Minus (-) or M for subtraction, Asterisk (*) or X for multiplication, Slash (/) or D for division, Enter or Space for equals, C for clear, Backspace for delete last digit."
#: templates/index.html:136
msgid "Taschenrechner Anzeige"
msgstr "Calculator display"
#: templates/index.html:137
msgid "Berechnungsverlauf"
msgstr "Calculation history"
#: templates/index.html:138
msgid "Löschen (Taste: C)"
msgstr "Clear (key: C)"
#: templates/index.html:139
msgid "Letzte Ziffer löschen (Taste: Backspace)"
msgstr "Delete last digit (key: Backspace)"
#: templates/index.html:140
msgid "Dividieren (Taste: / oder D)"
msgstr "Divide (key: / or D)"
#: templates/index.html:141
msgid "Multiplizieren (Taste: * oder X)"
msgstr "Multiply (key: * or X)"
#: templates/index.html:142
msgid "Sieben"
msgstr "Seven"
#: templates/index.html:143
msgid "Acht"
msgstr "Eight"
#: templates/index.html:144
msgid "Neun"
msgstr "Nine"
#: templates/index.html:145
msgid "Subtrahieren (Taste: - oder M)"
msgstr "Subtract (key: - or M)"
#: templates/index.html:146
msgid "Vier"
msgstr "Four"
#: templates/index.html:147
msgid "Fünf"
msgstr "Five"
#: templates/index.html:148
msgid "Sechs"
msgstr "Six"
#: templates/index.html:149
msgid "Addieren (Taste: + oder P)"
msgstr "Add (key: + or P)"
#: templates/index.html:150
msgid "Eins"
msgstr "One"
#: templates/index.html:151
msgid "Zwei"
msgstr "Two"
#: templates/index.html:152
msgid "Drei"
msgstr "Three"
#: templates/index.html:153
msgid "Gleich (Taste: Enter oder Leertaste)"
msgstr "Equals (key: Enter or Space)"
#: templates/index.html:154
msgid "Null"
msgstr "Zero"
#: templates/index.html:155
msgid "Komma (Taste: . oder ,)"
msgstr "Decimal (key: . or ,)"
#: templates/index.html:156
msgid "Fehler"
msgstr "Error"
#: templates/index.html:157
msgid "Berechnung"
msgstr "Calculation"