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

Local changes

Browse Source
This commit is contained in:
elpatron
2025-07-22 17:06:57 +02:00
parent 30ca90fd69
commit 7b233b027f
4 changed files with 74 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
templates/index.html
View File

@@ -149,6 +149,22 @@
.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: #facc15; color: #1e293b; }
.header-kw.active, .header-kw:hover { background: #ca8a04; }
.header-kw-datum { background: #38bdf8; }
.header-kw-datum.active, .header-kw-datum:hover { background: #0ea5e9; }
@media (max-width: 600px) {
.container {
margin: 1em;
@@ -173,16 +189,16 @@
});
}
document.addEventListener('DOMContentLoaded', function() {
openAccordion({{ active_idx|default(0) }});
openAccordion(parseInt("{{ active_idx|default(0) }}"));
});
</script>
</head>
<body>
<div class="container">
<h1>Datumsberechnungen</h1>
<h1>Elpatrons Datumsrechner</h1>
<div class="accordion">
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(0)">
<button type="button" class="accordion-header header-tage" 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>
@@ -211,7 +227,7 @@
</div>
</div>
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(1)">
<button type="button" class="accordion-header header-werktage" onclick="openAccordion(1)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit Mo-Fr Symbol -->
<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="8" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">Mo-Fr</text></svg>
@@ -240,7 +256,7 @@
</div>
</div>
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(2)">
<button type="button" class="accordion-header header-wochentag" onclick="openAccordion(2)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- 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>
@@ -263,7 +279,7 @@
</div>
</div>
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(3)">
<button type="button" class="accordion-header header-plusminus-tage" onclick="openAccordion(3)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- 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>
@@ -293,7 +309,7 @@
</div>
</div>
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(4)">
<button type="button" class="accordion-header header-plusminus-werktage" onclick="openAccordion(4)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- Kalender mit ± und Mo-Fr -->
<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="14" text-anchor="middle" font-size="10" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">±</text><text x="12" y="20" text-anchor="middle" font-size="7" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">Mo-Fr</text></svg>
@@ -323,30 +339,41 @@
</div>
</div>
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(5)">
<button type="button" class="accordion-header header-plusminus-wochenmonate" onclick="openAccordion(5)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- 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>
<!-- Kalender mit ± und W/M -->
<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="14" text-anchor="middle" font-size="10" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">±</text><text x="12" y="20" text-anchor="middle" font-size="7" font-family="Segoe UI, Arial, sans-serif" fill="#2563eb" font-weight="bold">W/M</text></svg>
</span>
Kalenderwoche zu Datum
Datum plus/minus X Wochen/Monate
</button>
<div class="accordion-content">
<form method="post">
<label>Datum:<br>
<span class="date-row">
<input type="date" name="datum6" id="datum6">
<button type="button" class="today-btn" onclick="setToday('datum6')">Heute</button>
<input type="date" name="datum8" id="datum8">
<button type="button" class="today-btn" onclick="setToday('datum8')">Heute</button>
</span>
</label>
<button name="action" value="kw_berechnen" type="submit">Kalenderwoche berechnen</button>
<label>Anzahl:<br>
<input type="number" name="anzahl8" id="anzahl8" style="width: 6em;">
</label>
<span class="date-calc-row">
<label><input type="radio" name="einheit8" value="wochen" checked> Wochen</label>
<label><input type="radio" name="einheit8" value="monate"> Monate</label>
</span>
<span class="date-calc-row">
<label><input type="radio" name="richtung8" value="add" checked> addieren</label>
<label><input type="radio" name="richtung8" value="sub"> subtrahieren</label>
</span>
<button name="action" value="wochen_monate" type="submit">Berechnen</button>
</form>
{% if kw_berechnen is not none %}
<div class="result">Kalenderwoche: {{ kw_berechnen }}</div>
{% if wochen_monate is not none %}
<div class="result">Ergebnis: {{ wochen_monate }}</div>
{% endif %}
</div>
</div>
<div class="accordion-item">
<button type="button" class="accordion-header" onclick="openAccordion(6)">
<button type="button" class="accordion-header header-kw" onclick="openAccordion(6)">
<span style="vertical-align:middle;display:inline-block;width:1.5em;">
<!-- 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>
@@ -370,5 +397,9 @@
</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://gitea.elpatron.me/elpatron/datecalc" target="_blank" style="color:#2563eb; text-decoration:underline;">Open Source Datumsrechner</a><br>
© 2025 M. Busche
</footer>
</body>
</html>