elpatron/datecalc
1
0
Fork 0
Code Issues Pull Requests Activity

Barrierefreiheit: Accordion, Formulare, aria-live, Kontraste, SEO und README für Accessibility optimiert

Browse Source
This commit is contained in:
elpatron
2025-07-25 09:38:36 +02:00
parent 142ecb12cf
commit 8a5816a547
3 changed files with 97 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -341,3 +341,18 @@ Dieses Projekt steht unter der [MIT-Lizenz](LICENSE).
--- ---
(c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron) (c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron)
## Barrierefreiheit (Accessibility)
Elpatrons Datumsrechner ist barrierefrei gestaltet und erfüllt zentrale Anforderungen an Accessibility (a11y):
- **Semantische HTML-Struktur:** Überschriften, Labels und Formularelemente sind korrekt ausgezeichnet und verknüpft.
- **ARIA-Attribute:** Accordion und Statusmeldungen sind mit ARIA-Attributen versehen, damit Screenreader die Struktur und Zustände erkennen.
- **Tastaturbedienbarkeit:** Alle interaktiven Elemente (Accordion, Buttons, Formulare) sind vollständig per Tastatur bedienbar (inkl. Fokus-Indikator und Pfeiltasten-Navigation im Accordion).
- **Fokus-Indikatoren:** Deutliche visuelle Hervorhebung des Fokus für alle Bedienelemente.
- **Farbkontraste:** Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien.
- **Status- und Fehlermeldungen:** Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht.
- **Mobile Optimierung:** Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern.
- **SEO:** Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar.
Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Sehbehinderung, motorische Einschränkungen) gut nutzbar und entspricht modernen Webstandards.

13
static/style.css
View File

@@ -82,9 +82,7 @@ input[type="date"] {
.today-btn:hover { .today-btn:hover {
background: var(--primary); background: var(--primary);
} }
button { button, .accordion-header {
margin-top: 0.7em;
padding: 0.55em 1.3em;
background: var(--primary); background: var(--primary);
color: #fff; color: #fff;
border: none; border: none;
@@ -95,9 +93,15 @@ button {
box-shadow: 0 1px 3px rgba(30,41,59,0.05); box-shadow: 0 1px 3px rgba(30,41,59,0.05);
transition: background 0.2s; transition: background 0.2s;
} }
button:hover { button:hover, .accordion-header:hover {
background: var(--primary-dark); 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 { .result {
margin-top: 1em; margin-top: 1em;
font-weight: bold; font-weight: bold;
@@ -106,6 +110,7 @@ button:hover {
border-radius: 6px; border-radius: 6px;
padding: 0.7em 1em; padding: 0.7em 1em;
box-shadow: 0 1px 2px rgba(30,41,59,0.04); box-shadow: 0 1px 2px rgba(30,41,59,0.04);
border: 2px solid #2563eb;
} }
.accordion { .accordion {
border-radius: 12px; border-radius: 12px;

111
templates/index.html
View File

@@ -10,14 +10,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Elpatrons Datumsrechner – Open Source Kalender- und Datumsberechnungen</title> <title>Elpatrons Datumsrechner – Open Source Kalender- und Datumsberechnungen</title>
<meta name="description" content="Elpatrons Datumsrechner: Open Source Web-App für Kalender- und Datumsberechnungen. Tage, Werktage, Wochen, Monate, Kalenderwochen, Wochentage und mehr berechnen – werbefrei, trackingfrei, kostenlos."> <meta name="description" content="Elpatrons Datumsrechner: Open Source Web-App für Kalender- und Datumsberechnungen. Tage, Werktage, Wochen, Monate, Kalenderwochen, Wochentage und mehr berechnen – barrierefrei, werbefrei, trackingfrei, kostenlos.">
<meta name="keywords" content="Datum, Kalender, Datumsrechner, Werktage, Tage zählen, Kalenderwoche, Wochentag, Open Source, Python, Flask, kostenlos, werbefrei, trackingfrei, cookiefrei"> <meta name="keywords" content="Datum, Kalender, Datumsrechner, Werktage, Tage zählen, Kalenderwoche, Wochentag, Open Source, Python, Flask, barrierefreiheit, barrierefrei, kostenlos, werbefrei, trackingfrei, cookiefrei">
<meta property="og:title" content="Elpatrons Datumsrechner – Open Source Kalender- und Datumsberechnungen"> <meta property="og:title" content="Elpatrons Datumsrechner – Open Source Kalender- und Datumsberechnungen">
<meta property="og:description" content="Open Source Web-App für Kalender- und Datumsberechnungen. Werbefrei, trackingfrei, kostenlos."> <meta property="og:description" content="Open Source Web-App für Kalender- und Datumsberechnungen. Werbefrei, trackingfrei, kostenlos.">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://codeberg.org/elpatron/datecalc"> <meta property="og:url" content="https://codeberg.org/elpatron/datecalc">
<meta property="og:image" content="/static/logo.svg"> <meta property="og:image" content="/static/logo.svg">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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="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="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/static/style.css"> <link rel="stylesheet" href="/static/style.css">
<link rel="manifest" href="/static/manifest.json"> <link rel="manifest" href="/static/manifest.json">
@@ -28,15 +35,37 @@
document.getElementById(id).value = today; document.getElementById(id).value = today;
} }
function openAccordion(idx) { function openAccordion(idx) {
document.querySelectorAll('.accordion-header').forEach((btn, i) => { const headers = document.querySelectorAll('.accordion-header');
const panels = document.querySelectorAll('.accordion-content');
headers.forEach((btn, i) => {
btn.classList.toggle('active', i === idx); btn.classList.toggle('active', i === idx);
btn.setAttribute('aria-expanded', i === idx ? 'true' : 'false');
}); });
document.querySelectorAll('.accordion-content').forEach((el, i) => { panels.forEach((el, i) => {
el.classList.toggle('active', i === idx); el.classList.toggle('active', i === idx);
}); });
} }
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
openAccordion(parseInt("{{ active_idx|default(0) }}")); openAccordion(parseInt("{{ active_idx|default(0) }}"));
// Tastatursteuerung für Accordion
const headers = document.querySelectorAll('.accordion-header');
headers.forEach((header, idx) => {
header.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openAccordion(idx);
headers[idx].focus();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
const next = (idx + 1) % headers.length;
headers[next].focus();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
const prev = (idx - 1 + headers.length) % headers.length;
headers[prev].focus();
}
});
});
}); });
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', function() { window.addEventListener('load', function() {
@@ -53,35 +82,36 @@
</div> </div>
<div class="accordion"> <div class="accordion">
<div class="accordion-item"> <div class="accordion-item">
<button type="button" class="accordion-header header-tage" onclick="openAccordion(0)"> <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)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;"> <span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit Doppelpfeil --> <!-- 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> <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> </span>
Anzahl der Tage/Werktage zwischen zwei Daten Anzahl der Tage/Werktage zwischen zwei Daten
</button> </button>
<div class="accordion-content"> <div class="accordion-content" id="accordion-panel-0" role="region" aria-labelledby="accordion-header-0">
<form method="post"> <form method="post">
<label>Startdatum:<br> <label for="start1">Startdatum:<br>
<span class="date-row"> <span class="date-row">
<input type="date" name="start1" id="start1"> <input type="date" name="start1" id="start1">
<button type="button" class="today-btn" onclick="setToday('start1')">Heute</button> <button type="button" class="today-btn" onclick="setToday('start1')">Heute</button>
</span> </span>
</label> </label>
<label>Enddatum:<br> <label for="end1">Enddatum:<br>
<span class="date-row"> <span class="date-row">
<input type="date" name="end1" id="end1"> <input type="date" name="end1" id="end1">
<button type="button" class="today-btn" onclick="setToday('end1')">Heute</button> <button type="button" class="today-btn" onclick="setToday('end1')">Heute</button>
</span> </span>
</label> </label>
<label style="display:flex;align-items:center;gap:0.5em;margin-top:0.7em;"> <fieldset style="display:flex;align-items:center;gap:0.5em;margin-top:0.7em; border:none; padding:0;">
<input type="checkbox" name="werktage" id="werktage" {% if request.form.get('werktage') %}checked{% endif %}> <legend class="sr-only">Optionen</legend>
Nur Werktage <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> <label for="werktage" style="margin:0;">Nur Werktage</label>
</fieldset>
<button name="action" value="tage_werktage" type="submit">Berechnen</button> <button name="action" value="tage_werktage" type="submit">Berechnen</button>
</form> </form>
{% if tage is not none %} {% if tage is not none %}
<div class="result"> <div class="result" aria-live="polite">
{% 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>: {{ tage }} Anzahl der Werktage zwischen <b>{{ format_date(request.form.get('start1', '')) }}</b> und <b>{{ format_date(request.form.get('end1', '')) }}</b>: {{ tage }}
{% else %} {% else %}
@@ -92,16 +122,16 @@
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<button type="button" class="accordion-header header-wochentag" onclick="openAccordion(1)"> <button type="button" class="accordion-header header-wochentag" id="accordion-header-1" aria-expanded="false" aria-controls="accordion-panel-1" role="button" tabindex="0" onclick="openAccordion(1)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;"> <span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit W --> <!-- Kalender mit W -->
<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"/><text x="12" y="17" text-anchor="middle" font-size="12" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">W</text></svg> <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"/><text x="12" y="17" text-anchor="middle" font-size="12" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">W</text></svg>
</span> </span>
Wochentag eines Datums Wochentag eines Datums
</button> </button>
<div class="accordion-content"> <div class="accordion-content" id="accordion-panel-1" role="region" aria-labelledby="accordion-header-1">
<form method="post"> <form method="post">
<label>Datum:<br> <label for="datum3">Datum:<br>
<span class="date-row"> <span class="date-row">
<input type="date" name="datum3" id="datum3"> <input type="date" name="datum3" id="datum3">
<button type="button" class="today-btn" onclick="setToday('datum3')">Heute</button> <button type="button" class="today-btn" onclick="setToday('datum3')">Heute</button>
@@ -110,21 +140,21 @@
<button name="action" value="wochentag" type="submit">Anzeigen</button> <button name="action" value="wochentag" type="submit">Anzeigen</button>
</form> </form>
{% if wochentag is not none %} {% if wochentag is not none %}
<div class="result">Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}</div> <div class="result" aria-live="polite">Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<button type="button" class="accordion-header header-kw-datum" onclick="openAccordion(2)"> <button type="button" class="accordion-header header-kw-datum" id="accordion-header-2" aria-expanded="false" aria-controls="accordion-panel-2" role="button" tabindex="0" onclick="openAccordion(2)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;"> <span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit # --> <!-- Kalender mit # -->
<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"/><text x="12" y="17" text-anchor="middle" font-size="13" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">#</text></svg> <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"/><text x="12" y="17" text-anchor="middle" font-size="13" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">#</text></svg>
</span> </span>
Kalenderwoche eines Datums Kalenderwoche eines Datums
</button> </button>
<div class="accordion-content"> <div class="accordion-content" id="accordion-panel-2" role="region" aria-labelledby="accordion-header-2">
<form method="post"> <form method="post">
<label>Datum:<br> <label for="datum6">Datum:<br>
<span class="date-row"> <span class="date-row">
<input type="date" name="datum6" id="datum6"> <input type="date" name="datum6" id="datum6">
<button type="button" class="today-btn" onclick="setToday('datum6')">Heute</button> <button type="button" class="today-btn" onclick="setToday('datum6')">Heute</button>
@@ -133,70 +163,73 @@
<button name="action" value="kw_berechnen" type="submit">Kalenderwoche berechnen</button> <button name="action" value="kw_berechnen" type="submit">Kalenderwoche berechnen</button>
</form> </form>
{% if kw_berechnen is not none %} {% if kw_berechnen is not none %}
<div class="result">Kalenderwoche von <b>{{ format_date(request.form.get('datum6', '')) }}</b>: {{ kw_berechnen }}</div> <div class="result" aria-live="polite">Kalenderwoche von <b>{{ format_date(request.form.get('datum6', '')) }}</b>: {{ kw_berechnen }}</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<button type="button" class="accordion-header header-kw" onclick="openAccordion(3)"> <button type="button" class="accordion-header header-kw" id="accordion-header-3" aria-expanded="false" aria-controls="accordion-panel-3" role="button" tabindex="0" onclick="openAccordion(3)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;"> <span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit Pfeil nach außen --> <!-- Kalender mit Pfeil nach außen -->
<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="M7 17l5-5 5 5" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><text x="12" y="12" text-anchor="middle" font-size="8" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">KW</text></svg> <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="M7 17l5-5 5 5" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><text x="12" y="12" text-anchor="middle" font-size="8" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">KW</text></svg>
</span> </span>
Start-/Enddatum zu Kalenderwoche Start-/Enddatum zu Kalenderwoche
</button> </button>
<div class="accordion-content"> <div class="accordion-content" id="accordion-panel-3" role="region" aria-labelledby="accordion-header-3">
<form method="post"> <form method="post">
<label>Jahr:<br> <label for="jahr7">Jahr:<br>
<input type="number" name="jahr7" id="jahr7" min="1900" max="2100" style="width: 7em;"> <input type="number" name="jahr7" id="jahr7" min="1900" max="2100" style="width: 7em;">
</label> </label>
<label>Kalenderwoche:<br> <label for="kw7">Kalenderwoche:<br>
<input type="number" name="kw7" id="kw7" min="1" max="53" style="width: 5em;"> <input type="number" name="kw7" id="kw7" min="1" max="53" style="width: 5em;">
</label> </label>
<button name="action" value="kw_datum" type="submit">Start-/Enddatum berechnen</button> <button name="action" value="kw_datum" type="submit">Start-/Enddatum berechnen</button>
</form> </form>
{% if kw_datum is not none %} {% if kw_datum is not none %}
<div class="result">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">Start-/Enddatum der KW <b>{{ request.form.get('kw7', '') }}</b> im Jahr <b>{{ request.form.get('jahr7', '') }}</b>: {{ kw_datum }}</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="accordion-item"> <div class="accordion-item">
<button type="button" class="accordion-header header-plusminus" onclick="openAccordion(4)"> <button type="button" class="accordion-header header-plusminus" id="accordion-header-4" aria-expanded="false" aria-controls="accordion-panel-4" role="button" tabindex="0" onclick="openAccordion(4)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;"> <span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit ± --> <!-- Kalender mit ± -->
<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"/><text x="12" y="17" text-anchor="middle" font-size="16" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">±</text></svg> <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"/><text x="12" y="17" text-anchor="middle" font-size="16" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">±</text></svg>
</span> </span>
Datum plus/minus X Tage/Wochen/Monate Datum plus/minus X Tage/Wochen/Monate
</button> </button>
<div class="accordion-content"> <div class="accordion-content" id="accordion-panel-4" role="region" aria-labelledby="accordion-header-4">
<form method="post"> <form method="post">
<label>Datum:<br> <label for="datum_pm">Datum:<br>
<span class="date-row"> <span class="date-row">
<input type="date" name="datum_pm" id="datum_pm"> <input type="date" name="datum_pm" id="datum_pm">
<button type="button" class="today-btn" onclick="setToday('datum_pm')">Heute</button> <button type="button" class="today-btn" onclick="setToday('datum_pm')">Heute</button>
</span> </span>
</label> </label>
<label>Anzahl:<br> <label for="anzahl_pm">Anzahl:<br>
<input type="number" name="anzahl_pm" id="anzahl_pm" style="width: 6em;"> <input type="number" name="anzahl_pm" id="anzahl_pm" style="width: 6em;">
</label> </label>
<span class="date-calc-row"> <fieldset class="date-calc-row" style="border:none; padding:0;">
<label><input type="radio" name="richtung_pm" value="add" checked> addieren</label> <legend class="sr-only">Rechenrichtung</legend>
<label><input type="radio" name="richtung_pm" value="sub"> subtrahieren</label> <label for="richtung_pm_add"><input type="radio" name="richtung_pm" id="richtung_pm_add" value="add" checked> addieren</label>
</span> <label for="richtung_pm_sub"><input type="radio" name="richtung_pm" id="richtung_pm_sub" value="sub"> subtrahieren</label>
<span class="date-calc-row"> </fieldset>
<label>Einheit: <fieldset class="date-calc-row" style="border:none; padding:0;">
<legend class="sr-only">Einheit und Werktage</legend>
<label for="einheit_pm">Einheit:
<select name="einheit_pm" id="einheit_pm"> <select name="einheit_pm" id="einheit_pm">
<option value="tage">Tage</option> <option value="tage">Tage</option>
<option value="wochen">Wochen</option> <option value="wochen">Wochen</option>
<option value="monate">Monate</option> <option value="monate">Monate</option>
</select> </select>
</label> </label>
<label style="margin-left:1em;"><input type="checkbox" name="werktage_pm" id="werktage_pm"> Nur Werktage</label> <input type="checkbox" name="werktage_pm" id="werktage_pm">
</span> <label for="werktage_pm" style="margin-left:1em;">Nur Werktage</label>
</fieldset>
<button name="action" value="plusminus" type="submit">Berechnen</button> <button name="action" value="plusminus" type="submit">Berechnen</button>
</form> </form>
{% if plusminus_result is not none %} {% if plusminus_result is not none %}
<div class="result">{{ plusminus_result }}</div> <div class="result" aria-live="polite">{{ plusminus_result }}</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>