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

v1.3.12: Verbesserte Farbkontraste für bessere Barrierefreiheit

Browse Source
This commit is contained in:
elpatron
2025-08-01 13:49:02 +02:00
parent e2367d0b0e
commit c19cb17623
3 changed files with 360 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
templates/index.html
View File

@@ -71,21 +71,21 @@ body {
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: rgba(37, 99, 235, 0.1);
color: var(--primary);
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: 500;
font-weight: 600;
transition: all 0.2s;
min-width: 44px;
min-height: 44px;
}
.help-button:hover {
background: rgba(37, 99, 235, 0.2);
background: rgba(37, 99, 235, 0.25);
border-color: var(--primary);
}
.help-button:focus {
@@ -243,7 +243,7 @@ input[type="date"] {
border: 1px solid var(--border);
border-radius: 6px;
font-size: 1em;
background: #f1f5f9;
background: #ffffff;
color: var(--text);
}
.today-btn {
@@ -292,7 +292,7 @@ button:focus, .accordion-header:focus {
.result {
margin-top: 1em;
font-weight: bold;
background: #e0e7ff;
background: #dbeafe;
color: #1e293b;
border-radius: 6px;
padding: 0.7em 1em;
@@ -300,13 +300,14 @@ button:focus, .accordion-header:focus {
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.1);
color: var(--primary);
background: rgba(37, 99, 235, 0.15);
color: var(--primary-dark);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.3em 0.6em;
@@ -321,14 +322,14 @@ button:focus, .accordion-header:focus {
z-index: 5;
}
.read-aloud-btn:hover {
background: rgba(37, 99, 235, 0.2);
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.2);
background: rgba(37, 99, 235, 0.25);
border-color: var(--primary);
}
.read-aloud-btn.playing {
@@ -397,11 +398,11 @@ button:focus, .accordion-header:focus {
color: #fff;
}
.header-wochentag {
background: #f59e42;
color: #1e293b;
background: #ea580c;
color: #fff;
}
.header-wochentag.active, .header-wochentag:hover {
background: #d97706;
background: #c2410c;
color: #fff;
}
.header-plusminus-tage {
@@ -429,19 +430,19 @@ button:focus, .accordion-header:focus {
color: #fff;
}
.header-kw {
background: #a78bfa;
color: #1e293b;
}
.header-kw.active, .header-kw:hover {
background: #7c3aed;
color: #fff;
}
.header-kw.active, .header-kw:hover {
background: #6d28d9;
color: #fff;
}
.header-kw-datum {
background: #facc15;
color: #1e293b;
background: #ca8a04;
color: #fff;
}
.header-kw-datum.active, .header-kw-datum:hover {
background: #ca8a04;
background: #a16207;
color: #fff;
}
.header-plusminus {
@@ -693,9 +694,9 @@ footer br + a {
<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:0.9em; color:#353535; margin-top:0.3em;">
<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>
@@ -754,19 +755,19 @@ footer br + a {
<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>{% if request.form.get('bundesland') %} (Feiertage {{ request.form.get('bundesland') }}){% endif %}: {{ tage }}
Anzahl der Werktage zwischen <b>{{ format_date(request.form.get('start1', '')) }}</b> und <b>{{ format_date(request.form.get('end1', '')) }}:</b>{% if request.form.get('bundesland') %} (Feiertage: {{ request.form.get('bundesland') }}){% endif %}: {{ tage }}
{% else %}
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 %}
{% 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>{{ wochenendtage_anzahl }}</b> Wochenendtage
<b>Davon sind {{ wochenendtage_anzahl }}</b> Tage Wochenendtage.
{% endif %}
{% if feiertage_anzahl is not none %}
{% if wochenendtage_anzahl is not none %} | {% endif %}
<b>{{ feiertage_anzahl }}</b> Feiertage (Mo-Fr{% if request.form.get('bundesland') %}, {{ request.form.get('bundesland') }}{% 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 %}
@@ -951,11 +952,11 @@ footer br + a {
</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/src/branch/main/README.md" target="_blank" style="color:#2563eb; text-decoration:underline;">Open Source Datumsrechner</a><br>
<a href="/api-docs" target="_blank" style="color:#2563eb; text-decoration:underline;">REST API Dokumentation (Swagger)</a><br>
© 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#2563eb; text-decoration:underline;">M. Busche</a>
<div style="margin-top:0.5em; font-size:0.85em; color:#94a3b8;">v{{ app_version }}</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() {