27 Commits

Author SHA1 Message Date
c19cb17623 v1.3.12: Verbesserte Farbkontraste für bessere Barrierefreiheit 2025-08-01 13:49:02 +02:00
e2367d0b0e chore: Version auf 1.3.11 erhöht - Sprachausgabe-Funktion und verbesserte Feiertage-Anzeige 2025-08-01 13:10:31 +02:00
1eb55e32dc feat: Sprachausgabe-Funktion für barrierefreie Nutzung hinzugefügt
- Vorlesen-Buttons (🔊) bei allen Ergebnissen
- Web Speech API mit deutscher Sprachausgabe
- Vollständige Tastaturnavigation (Tab, Enter, Leertaste)
- ESC-Taste zum Stoppen der Wiedergabe
- Barrierefreiheit verbessert für Menschen mit Sehbehinderungen
- README aktualisiert mit Sprachausgabe-Dokumentation
2025-08-01 12:51:28 +02:00
9a45444db4 Version 1.3.10: Versionsanzeige im Footer hinzugefügt 2025-07-26 10:28:30 +02:00
386a3f688f Verbessere stats_dashboard.html: Schriftart angepasst und API-Counts entfernt 2025-07-26 10:25:11 +02:00
04dc301e5b CSS-Fixes: Scrollbars auf allen Geräten entfernt, responsive Box-Sizing und Breitenanpassung verbessert 2025-07-26 08:41:06 +02:00
aaf6dbdec0 API: Bundesland-Feiertage für REST API erweitert
- tage_werktage Endpunkt unterstützt jetzt bundesland Parameter
- Swagger-Dokumentation aktualisiert mit bundesland Parameter
- Alle 16 deutschen Bundesländer in der API-Dokumentation aufgelistet
2025-07-25 17:13:39 +02:00
e2a5c1a3fa Feat: Bundesland-Feiertage für Werktagsberechnung hinzugefügt
- Neue Funktion zur Abfrage bundeslandspezifischer Feiertage über feiertage-api.de
- Werktagsberechnung berücksichtigt jetzt optional Feiertage des gewählten Bundeslandes
- Frontend: Dropdown für Bundesland-Auswahl (nur aktiv wenn Werktage-Checkbox aktiviert)
- Anzeige der Anzahl Wochenendtage und Feiertage im Ergebnis
- REST API erweitert um bundesland-Parameter
- README.md aktualisiert mit Dokumentation der neuen Funktion
2025-07-25 17:10:57 +02:00
5009ec1085 Add lighthouse-score.pdf 2025-07-25 15:03:51 +02:00
feb179f7bc Update README 2025-07-25 14:51:15 +02:00
55a05ef2af Hilfe-Button mit Overlay hinzugefügt - Barrierefreier Tooltip und Modal-Dialog implementiert 2025-07-25 14:49:43 +02:00
97aa208bf2 Performance-Optimierungen: CSS inline eingebettet, Touch-Targets vergrößert, Layout-Shifts minimiert 2025-07-25 14:02:36 +02:00
ffa1af560c Code Statistik aktualisiert 2025-07-25 13:42:46 +02:00
5867e3eeb7 Fix 404 errors: Move favicon files to static directory and update all references 2025-07-25 13:19:12 +02:00
8f8c5f42ca Fix apple-mobile-web-app-status-bar-style 2025-07-25 13:13:59 +02:00
fec84005f4 UI: Submit-Buttons vergrößert und einheitlichen vertikalen Abstand hinzugefügt 2025-07-25 13:08:57 +02:00
f2391de8b4 UI: Checkbox-Alignment im Plus/Minus-Bereich verbessert 2025-07-25 12:54:28 +02:00
9361d11dff remove ) 2025-07-25 12:32:16 +02:00
c67df924c6 Update TOC 2025-07-25 12:31:48 +02:00
59145f9ea1 Add batch file 2025-07-25 12:30:05 +02:00
8c56cdeb55 Add cloc code stats 2025-07-25 12:25:06 +02:00
d24f93d039 Swagger/OpenAPI-Doku unter /api-docs, Link im Footer, keine Überschneidung mit API-Endpunkten 2025-07-25 12:14:22 +02:00
77a6b5c2c2 Change Codeberg link to README.md 2025-07-25 11:59:57 +02:00
25b0de1cce Text geändert 2025-07-25 11:28:55 +02:00
8d10c6f891 Refaktoriert: Logdatei-Auswertung in Hilfsfunktion ausgelagert, Redundanz in /stats und /api/stats beseitigt 2025-07-25 11:28:15 +02:00
e44e55af53 Entfernt: redundanter /monitor-Endpunkt, da /api/monitor identische Funktion bietet 2025-07-25 11:25:26 +02:00
34eeed8753 Verbesserte Kontrast- und Farbgestaltung der Accordion-Header für Barrierefreiheit und bessere Unterscheidbarkeit 2025-07-25 11:22:26 +02:00
17 changed files with 1499 additions and 265 deletions

View File

@@ -29,6 +29,7 @@ Diese moderne Python-Webanwendung (Flask) ermöglicht verschiedene Datumsberechn
- [Vibe Coding](#vibe-coding)
- [Statistik-Erfassung, Logging](#statistik-erfassung-logging)
- [Barrierefreiheit (Accessibility)](#barrierefreiheit-accessibility)
- [Code Statistik](#code-statistik)
- [Lizenz](#lizenz)
## Demo
@@ -40,15 +41,40 @@ Datumsrechner Live: [https://date.elpatron.me](https://date.elpatron.me)
## Funktionen
- Anzahl der Tage zwischen zwei Daten
- Anzahl der Werktage zwischen zwei Daten
- Anzahl der Werktage zwischen zwei Daten (mit optionaler Berücksichtigung bundeslandspezifischer Feiertage)
- Anzeige des Wochentags eines Datums
- Datum plus/minus X Tage
- Datum plus/minus X Werktage
- Datum plus/minus X Wochen/Monate
- Kalenderwoche zu Datum
- Start-/Enddatum einer Kalenderwoche eines Jahres
- **Sprachausgabe** für alle Ergebnisse (barrierefrei)
- Statistik-Dashboard mit Passwortschutz unter `/stats`
## Bundesland-Feiertage
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:**
- Baden-Württemberg (BW)
- Bayern (BY)
- Berlin (BE)
- Brandenburg (BB)
- Bremen (HB)
- Hamburg (HH)
- Hessen (HE)
- Mecklenburg-Vorpommern (MV)
- Niedersachsen (NI)
- Nordrhein-Westfalen (NW)
- Rheinland-Pfalz (RP)
- Saarland (SL)
- Sachsen (SN)
- Sachsen-Anhalt (ST)
- Schleswig-Holstein (SH)
- Thüringen (TH)
Die Feiertage werden automatisch für den gewählten Zeitraum abgerufen und bei der Werktagsberechnung als arbeitsfreie Tage behandelt. Im Ergebnis werden zusätzlich die Anzahl der Wochenendtage und Feiertage angezeigt.
## Installation (lokal)
1. Python 3.8+ installieren
@@ -147,7 +173,8 @@ Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptier
{
"start": "2024-06-01",
"end": "2024-06-10",
"werktage": true
"werktage": true,
"bundesland": "BY"
}
```
@@ -155,7 +182,7 @@ Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptier
```bash
curl -X POST http://localhost:5000/api/tage_werktage \
-H "Content-Type: application/json" \
-d '{"start": "2024-06-01", "end": "2024-06-10", "werktage": true}'
-d '{"start": "2024-06-01", "end": "2024-06-10", "werktage": true, "bundesland": "BY"}'
```
**Antwort:**
@@ -163,6 +190,8 @@ curl -X POST http://localhost:5000/api/tage_werktage \
{ "result": 7 }
```
**Hinweis:** Der Parameter `bundesland` ist optional und wird nur bei `"werktage": true` berücksichtigt. Verfügbare Bundesland-Kürzel siehe oben.
#### 2. Wochentag zu einem Datum
**POST** `/api/wochentag`
@@ -380,11 +409,30 @@ Es werden keine IP-Adressen oder sonstigen persönlichen Daten gespeichert, ledi
- *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.
- **Sprachausgabe:** Alle Ergebnisse können über 🔊-Buttons vorgelesen werden (Web Speech API, deutsche Sprache).
- *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.
### Code Statistik
cloc|github.com/AlDanial/cloc v 2.06 T=0.06 s (263.5 files/s, 39193.4 lines/s)
--- | ---
Language|files|blank|comment|code
:-------|-------:|-------:|-------:|-------:
HTML|4|21|6|927
Python|2|34|26|482
Markdown|2|116|0|328
JSON|2|0|0|237
JavaScript|1|0|0|20
SVG|2|0|0|14
Dockerfile|1|5|6|8
DOS Batch|1|0|0|1
--------|--------|--------|--------|--------
SUM:|15|176|38|2017
## Lizenz
Dieses Projekt steht unter der [MIT-Lizenz](LICENSE).

123
app.py
View File

@@ -4,16 +4,32 @@ import numpy as np
from dateutil.relativedelta import relativedelta
import os
import time
import requests
app_start_time = time.time()
app = Flask(__name__)
app.secret_key = os.environ.get('SECRET_KEY', 'dev-key')
# Version der App
APP_VERSION = "1.3.12"
# HTML-Template wird jetzt aus templates/index.html geladen
WOCHENTAGE = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"]
def get_feiertage(year, bundesland):
"""Holt die Feiertage für ein Jahr und Bundesland von feiertage-api.de."""
url = f"https://feiertage-api.de/api/?jahr={year}&nur_land={bundesland}"
try:
resp = requests.get(url, timeout=5)
data = resp.json()
# Die API gibt ein Dict mit Feiertagsnamen als Key, jeweils mit 'datum' als Wert
return [v['datum'] for v in data.values() if 'datum' in v]
except Exception as e:
print(f"Fehler beim Abrufen der Feiertage: {e}")
return []
@app.route('/', methods=['GET', 'POST'])
def index():
# Rudimentäres Logging für Page Impressions
@@ -40,6 +56,7 @@ def index():
from datetime import datetime as dt
f.write(f"{dt.now().isoformat()} PAGEVIEW\n")
tage = werktage = wochentag = datumsrechnung = werktagsrechnung = kw_berechnen = kw_datum = wochen_monate = None
feiertage_anzahl = wochenendtage_anzahl = None
active_idx = 0
plusminus_result = None
if request.method == 'POST':
@@ -53,13 +70,27 @@ def index():
start = request.form.get('start1')
end = request.form.get('end1')
is_werktage = request.form.get('werktage') in ('on', 'true', '1', True)
bundesland = request.form.get('bundesland')
try:
d1 = datetime.strptime(start, '%Y-%m-%d')
d2 = datetime.strptime(end, '%Y-%m-%d')
if d1 > d2:
d1, d2 = d2, d1
# Feiertage bestimmen
holidays = []
if bundesland:
years = set([d1.year, d2.year])
for y in years:
holidays.extend(get_feiertage(y, bundesland))
# Alle Tage im Bereich
all_days = [(d1 + timedelta(days=i)).date() for i in range((d2 - d1).days + 1)]
# Wochenendtage zählen
wochenendtage_anzahl = sum(1 for d in all_days if d.weekday() >= 5)
# Feiertage zählen (nur die, die im Bereich liegen und nicht auf Wochenende fallen)
feiertage_im_zeitraum = [f for f in holidays if d1.date() <= datetime.strptime(f, '%Y-%m-%d').date() <= d2.date()]
feiertage_anzahl = sum(1 for f in feiertage_im_zeitraum if datetime.strptime(f, '%Y-%m-%d').date().weekday() < 5)
if is_werktage:
if d1 > d2:
d1, d2 = d2, d1
tage = np.busday_count(d1.date(), (d2 + timedelta(days=1)).date())
tage = np.busday_count(d1.date(), (d2 + timedelta(days=1)).date(), holidays=holidays)
else:
tage = abs((d2 - d1).days)
except Exception:
@@ -129,22 +160,12 @@ 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')}"
except Exception:
plusminus_result = 'Ungültige Eingabe'
return 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)
return 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
, feiertage_anzahl=feiertage_anzahl, wochenendtage_anzahl=wochenendtage_anzahl, app_version=APP_VERSION
)
@app.route('/stats', methods=['GET', 'POST'])
def stats():
stats_password = os.environ.get('STATS_PASSWORD', 'changeme')
if 'stats_auth' not in session:
if request.method == 'POST':
if request.form.get('password') == stats_password:
session['stats_auth'] = True
return redirect(url_for('stats'))
else:
return render_template('stats_login.html', error='Falsches Passwort!')
return render_template('stats_login.html', error=None)
# Auswertung der Logdatei
log_path = os.path.join('log', 'pageviews.log')
def parse_log_stats(log_path):
pageviews = 0
func_counts = {}
impressions_per_day = {}
@@ -154,7 +175,6 @@ def stats():
for line in f:
if 'PAGEVIEW' in line:
pageviews += 1
# Datum extrahieren (YYYY-MM-DD)
try:
date = line[:10]
if len(date) == 10 and date[4] == '-' and date[7] == '-':
@@ -167,26 +187,22 @@ def stats():
elif 'FUNC_API:' in line:
api = line.split('FUNC_API:')[1].strip()
api_counts[api] = api_counts.get(api, 0) + 1
return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, impressions_per_day=impressions_per_day, api_counts=api_counts)
return pageviews, func_counts, impressions_per_day, api_counts
@app.route('/monitor')
def monitor():
@app.route('/stats', methods=['GET', 'POST'])
def stats():
stats_password = os.environ.get('STATS_PASSWORD', 'changeme')
if 'stats_auth' not in session:
if request.method == 'POST':
if request.form.get('password') == stats_password:
session['stats_auth'] = True
return redirect(url_for('stats'))
else:
return render_template('stats_login.html', error='Falsches Passwort!')
return render_template('stats_login.html', error=None)
log_path = os.path.join('log', 'pageviews.log')
pageviews = 0
if os.path.exists(log_path):
with open(log_path, encoding='utf-8') as f:
for line in f:
if 'PAGEVIEW' in line:
pageviews += 1
uptime = int(time.time() - app_start_time)
return jsonify({
"status": "ok",
"message": "App running",
"time": datetime.now().isoformat(),
"uptime_seconds": uptime,
"pageviews_last_7_days": pageviews
})
pageviews, func_counts, impressions_per_day, api_counts = parse_log_stats(log_path)
return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, impressions_per_day=impressions_per_day, api_counts=api_counts)
# --- REST API ---
def log_api_usage(api_name):
@@ -204,13 +220,20 @@ def api_tage_werktage():
start = data.get('start')
end = data.get('end')
is_werktage = data.get('werktage', False)
bundesland = data.get('bundesland')
try:
d1 = datetime.strptime(start, '%Y-%m-%d')
d2 = datetime.strptime(end, '%Y-%m-%d')
if is_werktage:
if d1 > d2:
d1, d2 = d2, d1
tage = int(np.busday_count(d1.date(), (d2 + timedelta(days=1)).date()))
holidays = []
if bundesland:
# Feiertage für alle Jahre im Bereich holen
years = set([d1.year, d2.year])
for y in years:
holidays.extend(get_feiertage(y, bundesland))
tage = int(np.busday_count(d1.date(), (d2 + timedelta(days=1)).date(), holidays=holidays))
else:
tage = abs((d2 - d1).days)
return jsonify({'result': tage})
@@ -298,27 +321,7 @@ def api_plusminus():
@app.route('/api/stats', methods=['GET'])
def api_stats():
log_path = os.path.join('log', 'pageviews.log')
pageviews = 0
func_counts = {}
impressions_per_day = {}
api_counts = {}
if os.path.exists(log_path):
with open(log_path, encoding='utf-8') as f:
for line in f:
if 'PAGEVIEW' in line:
pageviews += 1
try:
date = line[:10]
if len(date) == 10 and date[4] == '-' and date[7] == '-':
impressions_per_day[date] = impressions_per_day.get(date, 0) + 1
except Exception:
pass
elif 'FUNC:' in line:
func = line.split('FUNC:')[1].strip()
func_counts[func] = func_counts.get(func, 0) + 1
elif 'FUNC_API:' in line:
api = line.split('FUNC_API:')[1].strip()
api_counts[api] = api_counts.get(api, 0) + 1
pageviews, func_counts, impressions_per_day, api_counts = parse_log_stats(log_path)
return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, impressions_per_day=impressions_per_day, api_counts=api_counts)
@app.route('/api/monitor', methods=['GET'])
@@ -339,6 +342,10 @@ def api_monitor():
"pageviews_last_7_days": pageviews
})
@app.route('/api-docs')
def api_docs():
return render_template('swagger.html')
if __name__ == '__main__':
app.run(debug=True, host="0.0.0.0")

1
code-stats.cmd Normal file
View File

@@ -0,0 +1 @@
@cloc . .\templates\ .\static\ --exclude-dir=.venv,.git,log,__pycache__,.pytest_cache --exclude-ext=txt,bak --md

324
h origin main --no-edit Normal file
View File

@@ -0,0 +1,324 @@
SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
Commands marked with * may be preceded by a number, _N.
Notes in parentheses indicate the behavior if _N is given.
A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
h H Display this help.
q :q Q :Q ZZ Exit.
---------------------------------------------------------------------------
MMOOVVIINNGG
e ^E j ^N CR * Forward one line (or _N lines).
y ^Y k ^K ^P * Backward one line (or _N lines).
ESC-j * Forward one file line (or _N file lines).
ESC-k * Backward one file line (or _N file lines).
f ^F ^V SPACE * Forward one window (or _N lines).
b ^B ESC-v * Backward one window (or _N lines).
z * Forward one window (and set window to _N).
w * Backward one window (and set window to _N).
ESC-SPACE * Forward one window, but don't stop at end-of-file.
ESC-b * Backward one window, but don't stop at beginning-of-file.
d ^D * Forward one half-window (and set half-window to _N).
u ^U * Backward one half-window (and set half-window to _N).
ESC-) RightArrow * Right one half screen width (or _N positions).
ESC-( LeftArrow * Left one half screen width (or _N positions).
ESC-} ^RightArrow Right to last column displayed.
ESC-{ ^LeftArrow Left to first column.
F Forward forever; like "tail -f".
ESC-F Like F but stop when search pattern is found.
r ^R ^L Repaint screen.
R Repaint screen, discarding buffered input.
---------------------------------------------------
Default "window" is the screen height.
Default "half-window" is half of the screen height.
---------------------------------------------------------------------------
SSEEAARRCCHHIINNGG
/_p_a_t_t_e_r_n * Search forward for (_N-th) matching line.
?_p_a_t_t_e_r_n * Search backward for (_N-th) matching line.
n * Repeat previous search (for _N-th occurrence).
N * Repeat previous search in reverse direction.
ESC-n * Repeat previous search, spanning files.
ESC-N * Repeat previous search, reverse dir. & spanning files.
^O^N ^On * Search forward for (_N-th) OSC8 hyperlink.
^O^P ^Op * Search backward for (_N-th) OSC8 hyperlink.
^O^L ^Ol Jump to the currently selected OSC8 hyperlink.
ESC-u Undo (toggle) search highlighting.
ESC-U Clear search highlighting.
&_p_a_t_t_e_r_n * Display only matching lines.
---------------------------------------------------
Search is case-sensitive unless changed with -i or -I.
A search pattern may begin with one or more of:
^N or ! Search for NON-matching lines.
^E or * Search multiple files (pass thru END OF FILE).
^F or @ Start search at FIRST file (for /) or last file (for ?).
^K Highlight matches, but don't move (KEEP position).
^R Don't use REGULAR EXPRESSIONS.
^S _n Search for match in _n-th parenthesized subpattern.
^W WRAP search if no match found.
^L Enter next character literally into pattern.
---------------------------------------------------------------------------
JJUUMMPPIINNGG
g < ESC-< * Go to first line in file (or line _N).
G > ESC-> * Go to last line in file (or line _N).
p % * Go to beginning of file (or _N percent into file).
t * Go to the (_N-th) next tag.
T * Go to the (_N-th) previous tag.
{ ( [ * Find close bracket } ) ].
} ) ] * Find open bracket { ( [.
ESC-^F _<_c_1_> _<_c_2_> * Find close bracket _<_c_2_>.
ESC-^B _<_c_1_> _<_c_2_> * Find open bracket _<_c_1_>.
---------------------------------------------------
Each "find close bracket" command goes forward to the close bracket
matching the (_N-th) open bracket in the top line.
Each "find open bracket" command goes backward to the open bracket
matching the (_N-th) close bracket in the bottom line.
m_<_l_e_t_t_e_r_> Mark the current top line with <letter>.
M_<_l_e_t_t_e_r_> Mark the current bottom line with <letter>.
'_<_l_e_t_t_e_r_> Go to a previously marked position.
'' Go to the previous position.
^X^X Same as '.
ESC-m_<_l_e_t_t_e_r_> Clear a mark.
---------------------------------------------------
A mark is any upper-case or lower-case letter.
Certain marks are predefined:
^ means beginning of the file
$ means end of the file
---------------------------------------------------------------------------
CCHHAANNGGIINNGG FFIILLEESS
:e [_f_i_l_e] Examine a new file.
^X^V Same as :e.
:n * Examine the (_N-th) next file from the command line.
:p * Examine the (_N-th) previous file from the command line.
:x * Examine the first (or _N-th) file from the command line.
^O^O Open the currently selected OSC8 hyperlink.
:d Delete the current file from the command line list.
= ^G :f Print current file name.
---------------------------------------------------------------------------
MMIISSCCEELLLLAANNEEOOUUSS CCOOMMMMAANNDDSS
-_<_f_l_a_g_> Toggle a command line option [see OPTIONS below].
--_<_n_a_m_e_> Toggle a command line option, by name.
__<_f_l_a_g_> Display the setting of a command line option.
___<_n_a_m_e_> Display the setting of an option, by name.
+_c_m_d Execute the less cmd each time a new file is examined.
!_c_o_m_m_a_n_d Execute the shell command with $SHELL.
#_c_o_m_m_a_n_d Execute the shell command, expanded like a prompt.
|XX_c_o_m_m_a_n_d Pipe file between current pos & mark XX to shell command.
s _f_i_l_e Save input to a file.
v Edit the current file with $VISUAL or $EDITOR.
V Print version number of "less".
---------------------------------------------------------------------------
OOPPTTIIOONNSS
Most options may be changed either on the command line,
or from within less by using the - or -- command.
Options may be given in one of two forms: either a single
character preceded by a -, or a name preceded by --.
-? ........ --help
Display help (from command line).
-a ........ --search-skip-screen
Search skips current screen.
-A ........ --SEARCH-SKIP-SCREEN
Search starts just after target line.
-b [_N] .... --buffers=[_N]
Number of buffers.
-B ........ --auto-buffers
Don't automatically allocate buffers for pipes.
-c ........ --clear-screen
Repaint by clearing rather than scrolling.
-d ........ --dumb
Dumb terminal.
-D xx_c_o_l_o_r . --color=xx_c_o_l_o_r
Set screen colors.
-e -E .... --quit-at-eof --QUIT-AT-EOF
Quit at end of file.
-f ........ --force
Force open non-regular files.
-F ........ --quit-if-one-screen
Quit if entire file fits on first screen.
-g ........ --hilite-search
Highlight only last match for searches.
-G ........ --HILITE-SEARCH
Don't highlight any matches for searches.
-h [_N] .... --max-back-scroll=[_N]
Backward scroll limit.
-i ........ --ignore-case
Ignore case in searches that do not contain uppercase.
-I ........ --IGNORE-CASE
Ignore case in all searches.
-j [_N] .... --jump-target=[_N]
Screen position of target lines.
-J ........ --status-column
Display a status column at left edge of screen.
-k _f_i_l_e ... --lesskey-file=_f_i_l_e
Use a compiled lesskey file.
-K ........ --quit-on-intr
Exit less in response to ctrl-C.
-L ........ --no-lessopen
Ignore the LESSOPEN environment variable.
-m -M .... --long-prompt --LONG-PROMPT
Set prompt style.
-n ......... --line-numbers
Suppress line numbers in prompts and messages.
-N ......... --LINE-NUMBERS
Display line number at start of each line.
-o [_f_i_l_e] .. --log-file=[_f_i_l_e]
Copy to log file (standard input only).
-O [_f_i_l_e] .. --LOG-FILE=[_f_i_l_e]
Copy to log file (unconditionally overwrite).
-p _p_a_t_t_e_r_n . --pattern=[_p_a_t_t_e_r_n]
Start at pattern (from command line).
-P [_p_r_o_m_p_t] --prompt=[_p_r_o_m_p_t]
Define new prompt.
-q -Q .... --quiet --QUIET --silent --SILENT
Quiet the terminal bell.
-r -R .... --raw-control-chars --RAW-CONTROL-CHARS
Output "raw" control characters.
-s ........ --squeeze-blank-lines
Squeeze multiple blank lines.
-S ........ --chop-long-lines
Chop (truncate) long lines rather than wrapping.
-t _t_a_g .... --tag=[_t_a_g]
Find a tag.
-T [_t_a_g_s_f_i_l_e] --tag-file=[_t_a_g_s_f_i_l_e]
Use an alternate tags file.
-u -U .... --underline-special --UNDERLINE-SPECIAL
Change handling of backspaces, tabs and carriage returns.
-V ........ --version
Display the version number of "less".
-w ........ --hilite-unread
Highlight first new line after forward-screen.
-W ........ --HILITE-UNREAD
Highlight first new line after any forward movement.
-x [_N[,...]] --tabs=[_N[,...]]
Set tab stops.
-X ........ --no-init
Don't use termcap init/deinit strings.
-y [_N] .... --max-forw-scroll=[_N]
Forward scroll limit.
-z [_N] .... --window=[_N]
Set size of window.
-" [_c[_c]] . --quotes=[_c[_c]]
Set shell quote characters.
-~ ........ --tilde
Don't display tildes after end of file.
-# [_N] .... --shift=[_N]
Set horizontal scroll amount (0 = one half screen width).
--exit-follow-on-close
Exit F command on a pipe when writer closes pipe.
--file-size
Automatically determine the size of the input file.
--follow-name
The F command changes files if the input file is renamed.
--form-feed
Stop scrolling when a form feed character is reached.
--header=[_L[,_C[,_N]]]
Use _L lines (starting at line _N) and _C columns as headers.
--incsearch
Search file as each pattern character is typed in.
--intr=[_C]
Use _C instead of ^X to interrupt a read.
--lesskey-context=_t_e_x_t
Use lesskey source file contents.
--lesskey-src=_f_i_l_e
Use a lesskey source file.
--line-num-width=[_N]
Set the width of the -N line number field to _N characters.
--match-shift=[_N]
Show at least _N characters to the left of a search match.
--modelines=[_N]
Read _N lines from the input file and look for vim modelines.
--mouse
Enable mouse input.
--no-edit-warn
Don't warn when using v command on a file opened via LESSOPEN.
--no-keypad
Don't send termcap keypad init/deinit strings.
--no-histdups
Remove duplicates from command history.
--no-number-headers
Don't give line numbers to header lines.
--no-paste
Ignore pasted input.
--no-search-header-lines
Searches do not include header lines.
--no-search-header-columns
Searches do not include header columns.
--no-search-headers
Searches do not include header lines or columns.
--no-vbell
Disable the terminal's visual bell.
--redraw-on-quit
Redraw final screen when quitting.
--rscroll=[_C]
Set the character used to mark truncated lines.
--save-marks
Retain marks across invocations of less.
--search-options=[EFKNRW-]
Set default options for every search.
--show-preproc-errors
Display a message if preprocessor exits with an error status.
--proc-backspace
Process backspaces for bold/underline.
--PROC-BACKSPACE
Treat backspaces as control characters.
--proc-return
Delete carriage returns before newline.
--PROC-RETURN
Treat carriage returns as control characters.
--proc-tab
Expand tabs to spaces.
--PROC-TAB
Treat tabs as control characters.
--status-col-width=[_N]
Set the width of the -J status column to _N characters.
--status-line
Highlight or color the entire line containing a mark.
--use-backslash
Subsequent options use backslash as escape char.
--use-color
Enables colored text.
--wheel-lines=[_N]
Each click of the mouse wheel moves _N lines.
--wordwrap
Wrap lines at spaces.
---------------------------------------------------------------------------
LLIINNEE EEDDIITTIINNGG
These keys can be used to edit text being entered
on the "command line" at the bottom of the screen.
RightArrow ..................... ESC-l ... Move cursor right one character.
LeftArrow ...................... ESC-h ... Move cursor left one character.
ctrl-RightArrow ESC-RightArrow ESC-w ... Move cursor right one word.
ctrl-LeftArrow ESC-LeftArrow ESC-b ... Move cursor left one word.
HOME ........................... ESC-0 ... Move cursor to start of line.
END ............................ ESC-$ ... Move cursor to end of line.
BACKSPACE ................................ Delete char to left of cursor.
DELETE ......................... ESC-x ... Delete char under cursor.
ctrl-BACKSPACE ESC-BACKSPACE ........... Delete word to left of cursor.
ctrl-DELETE .... ESC-DELETE .... ESC-X ... Delete word under cursor.
ctrl-U ......... ESC (MS-DOS only) ....... Delete entire line.
UpArrow ........................ ESC-k ... Retrieve previous command line.
DownArrow ...................... ESC-j ... Retrieve next command line.
TAB ...................................... Complete filename & cycle.
SHIFT-TAB ...................... ESC-TAB Complete filename & reverse cycle.
ctrl-L ................................... Complete filename, list all.

31
info.md Normal file
View File

@@ -0,0 +1,31 @@
# Was ist Elpatrons Datumsrechner?
Der Datumsrechner kann verschiedene Datumsberechnungen durchführen:
- Anzahl der Tage zwischen zwei Daten
- Anzahl der Werktage zwischen zwei Daten
- Anzeige des Wochentags eines Datums
- Datum plus/minus X Tage
- Datum plus/minus X Werktage
- Datum plus/minus X Wochen/Monate
- Kalenderwoche zu Datum
- Start-/Enddatum einer Kalenderwoche eines Jahres
## Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?
Aus zwei Gründen:
- Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!
- Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.
- Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt ([Vibe Coding}(https://www.wikiwand.com/en/articles/Vibe_coding).)
## Was du noch wissen solltest
- Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern.
- Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven.
- Den Quellcode dieser App habe ich auf [Codeberg](https://codeberg.org/elpatron/datecalc) veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.
- Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.
- Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.
- Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)
Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche

BIN
lighthouse-score.pdf Normal file

Binary file not shown.

View File

@@ -2,3 +2,4 @@ Flask==3.0.3
numpy==1.26.4
python-dateutil==2.9.0.post0
pytest==8.2.2
requests

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

Before

Width:  |  Height:  |  Size: 472 B

After

Width:  |  Height:  |  Size: 472 B

View File

@@ -7,8 +7,8 @@
"theme_color": "#2563eb",
"description": "Open Source Web-App für Kalender- und Datumsberechnungen.",
"icons": [
{ "src": "/favicon.png", "sizes": "32x32", "type": "image/png" },
{ "src": "/favicon.ico", "sizes": "48x48 64x64 128x128 256x256", "type": "image/x-icon" },
{ "src": "/static/favicon.png", "sizes": "32x32", "type": "image/png" },
{ "src": "/static/favicon.ico", "sizes": "48x48 64x64 128x128 256x256", "type": "image/x-icon" },
{ "src": "/static/logo.svg", "sizes": "any", "type": "image/svg+xml" }
]
}

View File

@@ -2,9 +2,9 @@ const CACHE_NAME = 'datumsrechner-cache-v1';
const urlsToCache = [
'/',
'/static/style.css',
'/favicon.ico',
'/favicon.png',
'/logo.svg',
'/static/favicon.ico',
'/static/favicon.png',
'/static/logo.svg',
];
self.addEventListener('install', event => {
event.waitUntil(

View File

@@ -1,173 +0,0 @@
:root {
--primary: #2563eb;
--primary-dark: #1e40af;
--background: #f8fafc;
--surface: #fff;
--border: #e5e7eb;
--text: #1e293b;
--shadow: 0 2px 8px rgba(30,41,59,0.07);
}
body {
background: var(--background);
color: var(--text);
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 480px;
margin: 3em auto;
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 2.5em 2em 2em 2em;
border: 1px solid var(--border);
}
h1 {
text-align: center;
margin-bottom: 2em;
font-size: 2.1em;
letter-spacing: 0.01em;
}
form {
margin-bottom: 2.2em;
padding-bottom: 1.2em;
border-bottom: 1px solid var(--border);
}
form:last-of-type {
border-bottom: none;
margin-bottom: 0;
}
h2 {
font-size: 1.15em;
margin-bottom: 0.7em;
color: var(--primary-dark);
}
label {
display: block;
margin-bottom: 0.7em;
font-weight: 500;
}
.date-row {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 0.2em;
}
.date-calc-row {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 0.2em;
}
input[type="date"] {
padding: 0.45em 0.7em;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 1em;
background: #f1f5f9;
color: var(--text);
}
.today-btn {
padding: 0.35em 0.9em;
background: var(--primary-dark);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.95em;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.today-btn:hover {
background: var(--primary);
}
button, .accordion-header {
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 3px rgba(30,41,59,0.05);
transition: background 0.2s;
}
button:hover, .accordion-header:hover {
background: var(--primary-dark);
}
button:focus, .accordion-header:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
z-index: 2;
}
.result {
margin-top: 1em;
font-weight: bold;
background: #e0e7ff;
color: #1e293b;
border-radius: 6px;
padding: 0.7em 1em;
box-shadow: 0 1px 2px rgba(30,41,59,0.04);
border: 2px solid #2563eb;
}
.accordion {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
background: var(--surface);
margin-bottom: 2em;
}
.accordion-item + .accordion-item {
border-top: 1px solid var(--border);
}
.accordion-header {
background: var(--primary-dark);
color: #fff;
cursor: pointer;
padding: 1em 1.2em;
font-size: 1.1em;
font-weight: 600;
border: none;
outline: none;
width: 100%;
text-align: left;
transition: background 0.2s;
}
.accordion-header.active, .accordion-header:hover {
background: var(--primary);
}
.accordion-content {
display: none;
padding: 1.2em 1.2em 1em 1.2em;
background: var(--surface);
}
.accordion-content.active {
display: block;
}
.header-tage { background: #2563eb; }
.header-tage.active, .header-tage:hover { background: #1e40af; }
.header-werktage { background: #059669; }
.header-werktage.active, .header-werktage:hover { background: #047857; }
.header-wochentag { background: #f59e42; color: #fff; }
.header-wochentag.active, .header-wochentag:hover { background: #d97706; }
.header-plusminus-tage { background: #a21caf; }
.header-plusminus-tage.active, .header-plusminus-tage:hover { background: #701a75; }
.header-plusminus-werktage { background: #0ea5e9; }
.header-plusminus-werktage.active, .header-plusminus-werktage:hover { background: #0369a1; }
.header-plusminus-wochenmonate { background: #f43f5e; }
.header-plusminus-wochenmonate.active, .header-plusminus-wochenmonate:hover { background: #be123c; }
.header-kw { background: #a78bfa; color: #1e293b; }
.header-kw.active, .header-kw:hover { background: #7c3aed; }
.header-kw-datum { background: #facc15; color: #1e293b; }
.header-kw-datum.active, .header-kw-datum:hover { background: #ca8a04; }
@media (max-width: 600px) {
.container {
margin: 1em;
padding: 1.2em 0.7em 1em 0.7em;
}
h1 {
font-size: 1.3em;
}
}

228
static/swagger.json Normal file
View File

@@ -0,0 +1,228 @@
{
"openapi": "3.0.3",
"info": {
"title": "Elpatrons Datumsrechner API",
"version": "1.0.0",
"description": "REST-API für Datumsberechnungen."
},
"servers": [
{ "url": "/api" }
],
"paths": {
"/tage_werktage": {
"post": {
"summary": "Berechnet die Anzahl der Tage oder Werktage zwischen zwei Daten.",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"start": { "type": "string", "format": "date" },
"end": { "type": "string", "format": "date" },
"werktage": { "type": "boolean", "default": false },
"bundesland": {
"type": "string",
"description": "Bundesland-Kürzel für Feiertagsberücksichtigung (nur bei werktage=true)",
"enum": ["BW", "BY", "BE", "BB", "HB", "HH", "HE", "MV", "NI", "NW", "RP", "SL", "SN", "ST", "SH", "TH"]
}
},
"required": ["start", "end"]
}
}
}
},
"responses": {
"200": {
"description": "Ergebnis der Berechnung.",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"result": { "type": "integer" }
}
}
}
}
},
"400": { "description": "Ungültige Eingabe" }
}
}
},
"/wochentag": {
"post": {
"summary": "Gibt den Wochentag zu einem Datum zurück.",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"datum": { "type": "string", "format": "date" }
},
"required": ["datum"]
}
}
}
},
"responses": {
"200": {
"description": "Wochentag als Text.",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"result": { "type": "string" }
}
}
}
}
},
"400": { "description": "Ungültige Eingabe" }
}
}
},
"/kw_berechnen": {
"post": {
"summary": "Berechnet die Kalenderwoche zu einem Datum.",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"datum": { "type": "string", "format": "date" }
},
"required": ["datum"]
}
}
}
},
"responses": {
"200": {
"description": "Kalenderwoche und Jahr.",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"result": { "type": "string" },
"kw": { "type": "integer" },
"jahr": { "type": "integer" }
}
}
}
}
},
"400": { "description": "Ungültige Eingabe" }
}
}
},
"/kw_datum": {
"post": {
"summary": "Berechnet Start- und Enddatum einer Kalenderwoche.",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"jahr": { "type": "integer" },
"kw": { "type": "integer" }
},
"required": ["jahr", "kw"]
}
}
}
},
"responses": {
"200": {
"description": "Start- und Enddatum der Kalenderwoche.",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"result": { "type": "string" },
"start": { "type": "string", "format": "date" },
"end": { "type": "string", "format": "date" }
}
}
}
}
},
"400": { "description": "Ungültige Eingabe" }
}
}
},
"/plusminus": {
"post": {
"summary": "Berechnet ein Datum plus/minus X Tage, Wochen oder Monate.",
"requestBody": {
"required": true,
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"datum": { "type": "string", "format": "date" },
"anzahl": { "type": "integer" },
"einheit": { "type": "string", "enum": ["tage", "wochen", "monate"] },
"richtung": { "type": "string", "enum": ["add", "sub"], "default": "add" },
"werktage": { "type": "boolean", "default": false }
},
"required": ["datum", "anzahl", "einheit"]
}
}
}
},
"responses": {
"200": {
"description": "Berechnetes Datum.",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"result": { "type": "string", "format": "date" }
}
}
}
}
},
"400": { "description": "Ungültige Eingabe" }
}
}
},
"/monitor": {
"get": {
"summary": "Status- und Monitoring-Informationen zur App.",
"responses": {
"200": {
"description": "Status-Objekt mit Uptime und Pageviews.",
"content": {
"application/json": {
"schema": {
"type": "object",
"properties": {
"status": { "type": "string" },
"message": { "type": "string" },
"time": { "type": "string", "format": "date-time" },
"uptime_seconds": { "type": "integer" },
"pageviews_last_7_days": { "type": "integer" }
}
}
}
}
}
}
}
}
}
}

View File

@@ -19,14 +19,515 @@
<meta property="og:image" content="/static/logo.svg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="application-name" content="Elpatrons Datumsrechner">
<meta name="msapplication-TileColor" content="#2563eb">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/static/style.css">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<style>
:root {
--primary: #2563eb;
--primary-dark: #1e40af;
--background: #f8fafc;
--surface: #fff;
--border: #e5e7eb;
--text: #1e293b;
--shadow: 0 2px 8px rgba(30,41,59,0.07);
}
* {
box-sizing: border-box;
}
body {
background: var(--background);
color: var(--text);
font-family: 'Segoe UI', Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
box-sizing: border-box;
}
.container {
max-width: 480px;
width: 100%;
margin: 3em auto;
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 2.5em 2em 2em 2em;
border: 1px solid var(--border);
position: relative;
box-sizing: border-box;
}
.help-button-container {
position: absolute;
top: 2.5em;
right: 2em;
z-index: 10;
}
.help-button {
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: rgba(37, 99, 235, 0.15);
color: var(--primary-dark);
border: 1px solid var(--border);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
font-weight: 600;
transition: all 0.2s;
min-width: 44px;
min-height: 44px;
}
.help-button:hover {
background: rgba(37, 99, 235, 0.25);
border-color: var(--primary);
}
.help-button:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
}
.help-tooltip {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--text);
color: white;
padding: 0.5em 0.8em;
border-radius: 6px;
font-size: 0.85em;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
margin-top: 0.5em;
z-index: 20;
}
.help-tooltip::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: var(--text);
}
.help-button:hover + .help-tooltip,
.help-button:focus + .help-tooltip {
opacity: 1;
visibility: visible;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-overlay.active {
display: flex;
}
.modal-content {
background: var(--surface);
border-radius: 12px;
padding: 2em;
max-width: 90%;
width: 90%;
max-height: 90%;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
}
.modal-close {
position: absolute;
top: 1em;
right: 1em;
background: none;
border: none;
font-size: 1.5em;
cursor: pointer;
color: var(--text);
padding: 0.5em;
border-radius: 50%;
transition: background 0.2s;
width: 2.5em;
height: 2.5em;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.modal-close:hover {
background: var(--border);
}
.modal-close:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
}
.modal-content h1 {
margin-top: 0;
color: var(--primary-dark);
}
.modal-content h2 {
color: var(--primary-dark);
margin-top: 1.5em;
margin-bottom: 0.5em;
}
.modal-content p {
line-height: 1.6;
margin-bottom: 1em;
}
.modal-content ul {
margin-bottom: 1em;
padding-left: 1.5em;
}
.modal-content li {
margin-bottom: 0.5em;
}
h1 {
text-align: center;
margin-bottom: 2em;
font-size: 2.1em;
letter-spacing: 0.01em;
}
form {
margin-bottom: 2.2em;
padding-bottom: 1.2em;
border-bottom: 1px solid var(--border);
}
form:last-of-type {
border-bottom: none;
margin-bottom: 0;
}
h2 {
font-size: 1.15em;
margin-bottom: 0.7em;
color: var(--primary-dark);
}
label {
display: block;
margin-bottom: 0.7em;
font-weight: 500;
}
.date-row {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 0.2em;
}
.date-calc-row {
display: flex;
align-items: center;
gap: 0.5em;
margin-top: 0.2em;
}
input[type="date"] {
padding: 0.45em 0.7em;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 1em;
background: #ffffff;
color: var(--text);
}
.today-btn {
padding: 0.35em 0.9em;
background: var(--primary-dark);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.95em;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.today-btn:hover {
background: var(--primary);
}
button, .accordion-header {
background: var(--primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 1em;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 3px rgba(30,41,59,0.05);
transition: background 0.2s;
}
/* Berechnungs-Buttons vergrößern */
button[type="submit"] {
font-size: 1.1em;
padding: 0.8em 1.5em;
min-width: 140px;
margin-top: 1.2em;
}
button:hover, .accordion-header:hover {
background: var(--primary-dark);
}
button:focus, .accordion-header:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
z-index: 2;
}
.result {
margin-top: 1em;
font-weight: bold;
background: #dbeafe;
color: #1e293b;
border-radius: 6px;
padding: 0.7em 1em;
padding-right: 4em;
box-shadow: 0 1px 2px rgba(30,41,59,0.04);
border: 2px solid #2563eb;
position: relative;
min-height: 3.5em;
}
.read-aloud-btn {
position: absolute;
top: 0.5em;
right: 0.5em;
background: rgba(37, 99, 235, 0.15);
color: var(--primary-dark);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.3em 0.6em;
font-size: 0.8em;
cursor: pointer;
transition: all 0.2s;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.read-aloud-btn:hover {
background: rgba(37, 99, 235, 0.25);
border-color: var(--primary);
}
.read-aloud-btn:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
box-shadow: 0 0 0 4px #1e293b;
background: rgba(37, 99, 235, 0.25);
border-color: var(--primary);
}
.read-aloud-btn.playing {
background: var(--primary);
color: white;
}
.accordion {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
background: var(--surface);
margin-bottom: 2em;
/* Layout-Shift-Prävention */
min-height: 200px;
contain: layout style paint;
}
.accordion-item + .accordion-item {
border-top: 1px solid var(--border);
margin-top: 0.5em;
}
.accordion-header {
background: var(--primary-dark);
color: #fff;
cursor: pointer;
padding: 1em 1.2em;
font-size: 1.1em;
font-weight: 600;
border: none;
outline: none;
width: 100%;
text-align: left;
transition: background 0.2s;
}
.accordion-header.active, .accordion-header:hover {
background: var(--primary);
}
.accordion-content {
display: none;
padding: 1.2em 1.2em 1em 1.2em;
background: var(--surface);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
opacity: 0;
}
.accordion-content.active {
display: block;
max-height: 500px;
opacity: 1;
transition: max-height 0.3s ease-in, padding 0.3s ease-in, opacity 0.3s ease-in;
}
.header-tage {
background: #2563eb;
color: #fff;
}
.header-tage.active, .header-tage:hover {
background: #1e40af;
color: #fff;
}
.header-werktage {
background: #059669;
color: #fff;
}
.header-werktage.active, .header-werktage:hover {
background: #047857;
color: #fff;
}
.header-wochentag {
background: #ea580c;
color: #fff;
}
.header-wochentag.active, .header-wochentag:hover {
background: #c2410c;
color: #fff;
}
.header-plusminus-tage {
background: #a21caf;
color: #fff;
}
.header-plusminus-tage.active, .header-plusminus-tage:hover {
background: #701a75;
color: #fff;
}
.header-plusminus-werktage {
background: #0ea5e9;
color: #fff;
}
.header-plusminus-werktage.active, .header-plusminus-werktage:hover {
background: #0369a1;
color: #fff;
}
.header-plusminus-wochenmonate {
background: #f43f5e;
color: #fff;
}
.header-plusminus-wochenmonate.active, .header-plusminus-wochenmonate:hover {
background: #be123c;
color: #fff;
}
.header-kw {
background: #7c3aed;
color: #fff;
}
.header-kw.active, .header-kw:hover {
background: #6d28d9;
color: #fff;
}
.header-kw-datum {
background: #ca8a04;
color: #fff;
}
.header-kw-datum.active, .header-kw-datum:hover {
background: #a16207;
color: #fff;
}
.header-plusminus {
background: #be123c;
color: #fff;
}
.header-plusminus.active, .header-plusminus:hover {
background: #7f1d1d;
color: #fff;
}
@media (max-width: 600px) {
.container {
margin: 1em;
padding: 1.2em 0.7em 1em 0.7em;
width: calc(100% - 2em);
max-width: none;
}
h1 {
font-size: 1.3em;
}
.help-button-container {
top: 1.5em;
right: 1.2em;
}
.help-button {
width: 2em;
height: 2em;
font-size: 0.9em;
min-width: 48px;
min-height: 48px;
}
.help-tooltip {
font-size: 0.8em;
padding: 0.4em 0.6em;
}
.modal-content {
padding: 1.5em;
margin: 1em;
width: calc(100% - 2em);
max-width: none;
left: 0;
transform: none;
}
}
/* Touch-Target Optimierungen für Footer-Links */
footer a {
display: inline-block;
padding: 0.5em 0.8em;
margin: 0.3em 0.2em;
min-height: 44px;
min-width: 44px;
line-height: 1.4;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.2s, color 0.2s;
position: relative;
}
footer a:hover {
background-color: rgba(37, 99, 235, 0.1);
text-decoration: underline;
}
footer a:focus {
outline: 3px solid #facc15;
outline-offset: 2px;
background-color: rgba(37, 99, 235, 0.1);
}
/* Zusätzlicher Abstand zwischen Footer-Links */
footer br + a {
margin-top: 0.5em;
}
/* Responsive Anpassungen für Footer */
@media (max-width: 600px) {
footer a {
padding: 0.6em 1em;
margin: 0.4em 0.3em;
min-height: 48px;
min-width: 48px;
}
}
</style>
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#2563eb">
<script>
@@ -45,10 +546,107 @@
el.classList.toggle('active', i === idx);
});
}
function showHelp() {
const modal = document.getElementById('helpModal');
modal.classList.add('active');
document.body.style.overflow = 'hidden';
// Fokus auf den Schließen-Button setzen
setTimeout(() => {
document.querySelector('.modal-close').focus();
}, 100);
}
function hideHelp() {
const modal = document.getElementById('helpModal');
modal.classList.remove('active');
document.body.style.overflow = '';
// Fokus zurück auf den Hilfe-Button setzen
document.querySelector('.help-button').focus();
}
// Sprachausgabe-Funktionalität
let currentSpeech = null;
function readAloud(text, button) {
// Stoppe vorherige Wiedergabe
if (currentSpeech) {
currentSpeech.cancel();
}
// Entferne "playing" Klasse von allen Buttons
document.querySelectorAll('.read-aloud-btn').forEach(btn => {
btn.classList.remove('playing');
btn.textContent = '🔊';
});
// Erstelle neue Sprachausgabe
currentSpeech = new SpeechSynthesisUtterance(text);
currentSpeech.lang = 'de-DE';
currentSpeech.rate = 0.9;
currentSpeech.pitch = 1;
// Button-Status aktualisieren
button.classList.add('playing');
button.textContent = '⏹️';
// Event-Handler für Ende der Wiedergabe
currentSpeech.onend = function() {
button.classList.remove('playing');
button.textContent = '🔊';
currentSpeech = null;
};
currentSpeech.onerror = function() {
button.classList.remove('playing');
button.textContent = '🔊';
currentSpeech = null;
};
// Wiedergabe starten
speechSynthesis.speak(currentSpeech);
}
function readAloudFromElement(button) {
// Finde das Ergebnis-Element (das div mit class="result")
const resultElement = button.closest('.result');
if (!resultElement) return;
// Entferne den Button-Text aus dem zu lesenden Text
const buttonText = button.textContent;
let textToRead = resultElement.textContent.replace(buttonText, '').trim();
// Bereinige den Text (entferne HTML-Tags und überschüssige Leerzeichen)
textToRead = textToRead.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
readAloud(textToRead, button);
}
function stopReading() {
if (currentSpeech) {
currentSpeech.cancel();
currentSpeech = null;
}
document.querySelectorAll('.read-aloud-btn').forEach(btn => {
btn.classList.remove('playing');
btn.textContent = '🔊';
});
}
document.addEventListener('DOMContentLoaded', function() {
openAccordion(parseInt("{{ active_idx|default(0) }}"));
// Tastatursteuerung für Accordion
// Sofortige Aktivierung der ersten Accordion-Sektion um Layout-Shifts zu vermeiden
const activeIdx = parseInt("{{ active_idx|default(0) }}");
const headers = document.querySelectorAll('.accordion-header');
const panels = document.querySelectorAll('.accordion-content');
// Sofort den aktiven Zustand setzen
headers.forEach((btn, i) => {
btn.classList.toggle('active', i === activeIdx);
btn.setAttribute('aria-expanded', i === activeIdx ? 'true' : 'false');
});
panels.forEach((el, i) => {
el.classList.toggle('active', i === activeIdx);
});
// Tastatursteuerung für Accordion
headers.forEach((header, idx) => {
header.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
@@ -66,6 +664,21 @@
}
});
});
// ESC-Taste zum Schließen des Modals
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
hideHelp();
stopReading();
}
});
// Klick außerhalb des Modals zum Schließen
document.getElementById('helpModal').addEventListener('click', function(e) {
if (e.target === this) {
hideHelp();
}
});
});
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
@@ -76,23 +689,27 @@
</head>
<body>
<div class="container">
<div class="help-button-container">
<button type="button" class="help-button" onclick="showHelp()" aria-label="Hilfe anzeigen" title="Hilfe anzeigen" aria-describedby="help-tooltip">?</button>
<div id="help-tooltip" class="help-tooltip" role="tooltip">Öffnet ein Hilfefenster mit Informationen über den Datumsrechner</div>
</div>
<div style="text-align:center; margin-bottom:1.2em;">
<div style="font-size:1.1em; font-style:italic; color:#64748b;">Elpatrons</div>
<div style="font-size:1.1em; font-style:italic; color:#475569;">Elpatrons</div>
<h1 style="margin:0;">Datumsrechner</h1>
<div style="font-size:1.08em; color:#2563eb; margin-top:0.3em;">
Ein <em>freier</em> Datumsrechner: barriereFrei, werbeFrei, trackingFrei, lizenzFrei.
<div style="font-size:0.9em; color:#1e293b; margin-top:0.3em;">
Eine <em>freie</em> Web-App: barriere<em>frei</em>, werbe<em>frei</em>, tracking<em>frei</em>, lizenz<em>frei</em> und kosten<em>frei</em>.
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<button type="button" class="accordion-header header-tage" id="accordion-header-0" aria-expanded="true" aria-controls="accordion-panel-0" role="button" tabindex="0" onclick="openAccordion(0)">
<button type="button" class="accordion-header header-tage active" id="accordion-header-0" aria-expanded="true" aria-controls="accordion-panel-0" role="button" tabindex="0" onclick="openAccordion(0)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit Doppelpfeil -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="5" width="18" height="16" rx="4" fill="#fff" stroke="#2563eb" stroke-width="2"/><rect x="3" y="5" width="18" height="4" rx="2" fill="#2563eb"/><rect x="6" y="2" width="2" height="4" rx="1" fill="#2563eb"/><rect x="16" y="2" width="2" height="4" rx="1" fill="#2563eb"/><path d="M8 15h8M8 15l2-2M8 15l2 2M16 15l-2-2M16 15l-2 2" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round"/></svg>
</span>
Anzahl der Tage/Werktage zwischen zwei Daten
</button>
<div class="accordion-content" id="accordion-panel-0" role="region" aria-labelledby="accordion-header-0">
<div class="accordion-content active" id="accordion-panel-0" role="region" aria-labelledby="accordion-header-0">
<form method="post">
<label for="start1">Startdatum:<br>
<span class="date-row">
@@ -110,15 +727,49 @@
<legend class="sr-only">Optionen</legend>
<input type="checkbox" name="werktage" id="werktage" {% if request.form.get('werktage') %}checked{% endif %} aria-checked="{{ 'true' if request.form.get('werktage') else 'false' }}">
<label for="werktage" style="margin:0;">Nur Werktage</label>
<label for="bundesland" style="margin-left:1em;">Feiertage berücksichtigen für:
<select name="bundesland" id="bundesland" {% if not request.form.get('werktage') %}disabled{% endif %}>
<option value="">(kein Bundesland)</option>
<option value="BW" {% if request.form.get('bundesland') == 'BW' %}selected{% endif %}>Baden-Württemberg</option>
<option value="BY" {% if request.form.get('bundesland') == 'BY' %}selected{% endif %}>Bayern</option>
<option value="BE" {% if request.form.get('bundesland') == 'BE' %}selected{% endif %}>Berlin</option>
<option value="BB" {% if request.form.get('bundesland') == 'BB' %}selected{% endif %}>Brandenburg</option>
<option value="HB" {% if request.form.get('bundesland') == 'HB' %}selected{% endif %}>Bremen</option>
<option value="HH" {% if request.form.get('bundesland') == 'HH' %}selected{% endif %}>Hamburg</option>
<option value="HE" {% if request.form.get('bundesland') == 'HE' %}selected{% endif %}>Hessen</option>
<option value="MV" {% if request.form.get('bundesland') == 'MV' %}selected{% endif %}>Mecklenburg-Vorpommern</option>
<option value="NI" {% if request.form.get('bundesland') == 'NI' %}selected{% endif %}>Niedersachsen</option>
<option value="NW" {% if request.form.get('bundesland') == 'NW' %}selected{% endif %}>Nordrhein-Westfalen</option>
<option value="RP" {% if request.form.get('bundesland') == 'RP' %}selected{% endif %}>Rheinland-Pfalz</option>
<option value="SL" {% if request.form.get('bundesland') == 'SL' %}selected{% endif %}>Saarland</option>
<option value="SN" {% if request.form.get('bundesland') == 'SN' %}selected{% endif %}>Sachsen</option>
<option value="ST" {% if request.form.get('bundesland') == 'ST' %}selected{% endif %}>Sachsen-Anhalt</option>
<option value="SH" {% if request.form.get('bundesland') == 'SH' %}selected{% endif %}>Schleswig-Holstein</option>
<option value="TH" {% if request.form.get('bundesland') == 'TH' %}selected{% endif %}>Thüringen</option>
</select>
</label>
</fieldset>
<button name="action" value="tage_werktage" type="submit">Berechnen</button>
</form>
{% if tage is not none %}
<div class="result" aria-live="polite">
<button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
{% 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>: {{ 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 %}
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 %}
{% if wochenendtage_anzahl is not none or (feiertage_anzahl is not none and request.form.get('bundesland')) %}
<br>
<span style="font-size:0.98em; color:#1e293b;">
{% if wochenendtage_anzahl is not none %}
<b>Davon sind {{ wochenendtage_anzahl }}</b> Tage Wochenendtage.
{% endif %}
{% if feiertage_anzahl is not none and request.form.get('bundesland') %}
{% if wochenendtage_anzahl is not none %}, {% endif %}
<b>{{ feiertage_anzahl }}</b> Feiertage (Mo-Fr, {{ request.form.get('bundesland') }})
{% endif %}
</span>
{% endif %}
</div>
{% endif %}
@@ -143,7 +794,10 @@
<button name="action" value="wochentag" type="submit">Anzeigen</button>
</form>
{% if wochentag is not none %}
<div class="result" aria-live="polite">Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}</div>
<div class="result" aria-live="polite">
<button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}
</div>
{% endif %}
</div>
</div>
@@ -166,7 +820,10 @@
<button name="action" value="kw_berechnen" type="submit">Kalenderwoche berechnen</button>
</form>
{% if kw_berechnen is not none %}
<div class="result" aria-live="polite">Kalenderwoche von <b>{{ format_date(request.form.get('datum6', '')) }}</b>: {{ kw_berechnen }}</div>
<div class="result" aria-live="polite">
<button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
Kalenderwoche von <b>{{ format_date(request.form.get('datum6', '')) }}</b>: {{ kw_berechnen }}
</div>
{% endif %}
</div>
</div>
@@ -189,7 +846,10 @@
<button name="action" value="kw_datum" type="submit">Start-/Enddatum berechnen</button>
</form>
{% if kw_datum is not none %}
<div class="result" aria-live="polite">Start-/Enddatum der KW <b>{{ request.form.get('kw7', '') }}</b> im Jahr <b>{{ request.form.get('jahr7', '') }}</b>: {{ kw_datum }}</div>
<div class="result" aria-live="polite">
<button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
Start-/Enddatum der KW <b>{{ request.form.get('kw7', '') }}</b> im Jahr <b>{{ request.form.get('jahr7', '') }}</b>: {{ kw_datum }}
</div>
{% endif %}
</div>
</div>
@@ -217,9 +877,9 @@
<label for="richtung_pm_add"><input type="radio" name="richtung_pm" id="richtung_pm_add" value="add" checked> addieren</label>
<label for="richtung_pm_sub"><input type="radio" name="richtung_pm" id="richtung_pm_sub" value="sub"> subtrahieren</label>
</fieldset>
<fieldset class="date-calc-row" style="border:none; padding:0;">
<fieldset style="display:flex; align-items:center; gap:0.5em; margin-top:0.7em; border:none; padding:0;">
<legend class="sr-only">Einheit und Werktage</legend>
<label for="einheit_pm">Einheit:
<label for="einheit_pm" style="margin:0;">Einheit:
<select name="einheit_pm" id="einheit_pm">
<option value="tage">Tage</option>
<option value="wochen">Wochen</option>
@@ -227,20 +887,90 @@
</select>
</label>
<input type="checkbox" name="werktage_pm" id="werktage_pm">
<label for="werktage_pm" style="margin-left:1em;">Nur Werktage</label>
<label for="werktage_pm" style="margin:0;">Nur Werktage</label>
</fieldset>
<button name="action" value="plusminus" type="submit">Berechnen</button>
</form>
{% if plusminus_result is not none %}
<div class="result" aria-live="polite">{{ plusminus_result }}</div>
<div class="result" aria-live="polite">
<button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
{{ plusminus_result }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
<footer style="text-align:center; margin-top:2em; color:#64748b; font-size:0.98em; padding-bottom:1.5em;">
Dies ist ein werbe- und trackingfreier <a href="https://codeberg.org/elpatron/datecalc" target="_blank" style="color:#2563eb; text-decoration:underline;">Open Source Datumsrechner</a><br>
© 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#2563eb; text-decoration:underline;">M. Busche</a>
<!-- Help Modal Overlay -->
<div id="helpModal" class="modal-overlay" role="dialog" aria-labelledby="help-title" aria-describedby="help-content">
<div class="modal-content">
<button type="button" class="modal-close" onclick="hideHelp()" aria-label="Hilfe schließen">&times;</button>
<h1 id="help-title">Was ist Elpatrons Datumsrechner?</h1>
<p>Der Datumsrechner kann verschiedene Datumsberechnungen durchführen:</p>
<ul>
<li>Anzahl der Tage zwischen zwei Daten</li>
<li>Anzahl der Werktage zwischen zwei Daten</li>
<li>Anzeige des Wochentags eines Datums</li>
<li>Datum plus/minus X Tage</li>
<li>Datum plus/minus X Werktage</li>
<li>Datum plus/minus X Wochen/Monate</li>
<li>Kalenderwoche zu Datum</li>
<li>Start-/Enddatum einer Kalenderwoche eines Jahres</li>
</ul>
<h2>Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?</h2>
<p>Aus zwei Gründen:</p>
<ul>
<li>Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!</li>
<li>Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.
<ul>
<li>Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt (Vibe Coding).</li>
</ul>
</li>
</ul>
<h2>Was du noch wissen solltest</h2>
<ul>
<li>Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern.</li>
<li>Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven.</li>
<li>Den Quellcode dieser App habe ich auf <a href="https://codeberg.org/elpatron/datecalc" target="_blank">Codeberg</a> veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.</li>
<li>Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.</li>
<li>Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.</li>
<li>Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)</li>
</ul>
<p><strong>Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche</strong></p>
</div>
<div id="help-content" class="sr-only">
Hilfe-Informationen für den Datumsrechner mit Erklärungen zu allen Funktionen
</div>
</div>
<footer style="text-align:center; margin-top:2em; color:#475569; font-size:0.98em; padding-bottom:1.5em;">
Dies ist ein werbe- und trackingfreier <a href="https://codeberg.org/elpatron/datecalc/src/branch/main/README.md" target="_blank" style="color:#1e40af; text-decoration:underline;">Open Source Datumsrechner</a><br>
<a href="/api-docs" target="_blank" style="color:#1e40af; text-decoration:underline;">REST API Dokumentation (Swagger)</a><br>
© 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#1e40af; text-decoration:underline;">M. Busche</a>
<div style="margin-top:0.5em; font-size:0.85em; color:#64748b;">v{{ app_version }}</div>
</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>
</html>

View File

@@ -6,6 +6,13 @@
<link rel="stylesheet" href="/static/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #f8fafc;
color: #1e293b;
margin: 0;
padding: 0;
}
.dashboard-box { max-width: 600px; margin: 3em auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #cbd5e1; padding: 2em 2em 1.5em 2em; border: 1px solid #e5e7eb; }
.dashboard-box h2 { text-align: center; margin-bottom: 1.2em; }
.stats-row { display: flex; justify-content: space-between; margin-bottom: 2em; }
@@ -16,9 +23,9 @@
</head>
<body>
<div class="dashboard-box">
<h2>Statistik-Dashboard</h2>
<h1>Statistik-Dashboard</h1>
<div class="stats-row">
<div class="stats-label">Gesamt-Pageviews:</div>
<div class="stats-label">Gesamt-Pageviews (7 Tage):</div>
<div class="stats-value">{{ pageviews }}</div>
</div>
<div class="chart-container">
@@ -32,12 +39,12 @@
<canvas id="apiChart" width="400" height="220"></canvas>
</div>
{% endif %}
<pre style="background:#f3f4f6; color:#334155; padding:0.5em; border-radius:6px; font-size:0.9em;">API-Counts: {{ api_counts|tojson }}</pre>
<a href="/" style="color:#2563eb;">Zurück zur App</a>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// Impressions pro Tag
// eslint-disable-next-line
const imprData = {{ impressions_per_day|tojson }};
const imprLabels = Object.keys(imprData);
const imprCounts = Object.values(imprData);
@@ -62,6 +69,7 @@
}
});
// Funktionsaufrufe
// eslint-disable-next-line
const funcCounts = {{ func_counts|tojson }};
const labels = Object.keys(funcCounts);
const data = Object.values(funcCounts);
@@ -83,6 +91,7 @@
}
});
// API-Nutzung
// eslint-disable-next-line
const apiCounts = {{ api_counts|tojson }};
if (Object.keys(apiCounts).length > 0 && document.getElementById('apiChart')) {
new Chart(document.getElementById('apiChart').getContext('2d'), {

28
templates/swagger.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>API-Dokumentation Swagger UI</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui.css">
<style>
body { margin: 0; background: #f8fafc; }
#swagger-ui { max-width: 900px; margin: 2em auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(30,41,59,0.07); }
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui-bundle.js"></script>
<script>
window.onload = function() {
SwaggerUIBundle({
url: '/static/swagger.json',
dom_id: '#swagger-ui',
presets: [SwaggerUIBundle.presets.apis],
layout: "BaseLayout",
docExpansion: 'list',
defaultModelsExpandDepth: 1
});
};
</script>
</body>
</html>