From 14f8d303803a8c217af07380992bcf5cbd868664 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Wed, 23 Jul 2025 10:58:10 +0200
Subject: [PATCH] CSS ausgelagert: style.css im static-Ordner, Template
 angepasst

---
 static/style.css     | 168 +++++++++++++++++++++++++++++++++++++
 templates/index.html | 192 ++++---------------------------------------
 2 files changed, 183 insertions(+), 177 deletions(-)
 create mode 100644 static/style.css

diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..c46cb0d
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,168 @@
+: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 {
+    margin-top: 0.7em;
+    padding: 0.55em 1.3em;
+    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 {
+    background: var(--primary-dark);
+}
+.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);
+}
+.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: #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;
+        padding: 1.2em 0.7em 1em 0.7em;
+    }
+    h1 {
+        font-size: 1.3em;
+    }
+} 
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 37dc117..6a1eaeb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,3 +1,10 @@
+{% macro format_date(date_str) %}
+    {%- if date_str and '-' in date_str and date_str|length == 10 -%}
+        {{ date_str[8:10] }}.{{ date_str[5:7] }}.{{ date_str[0:4] }}
+    {%- else -%}
+        {{ date_str }}
+    {%- endif -%}
+{% endmacro %}
 <!doctype html>
 <html lang="de">
 <head>
@@ -5,176 +12,7 @@
     <title>Elpatrons Datumsrechner</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="/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);
-        }
-        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 {
-            margin-top: 0.7em;
-            padding: 0.55em 1.3em;
-            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 {
-            background: var(--primary-dark);
-        }
-        .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);
-        }
-        .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: #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;
-                padding: 1.2em 0.7em 1em 0.7em;
-            }
-            h1 {
-                font-size: 1.3em;
-            }
-        }
-    </style>
+    <link rel="stylesheet" href="/static/style.css">
     <script>
         function setToday(id) {
             const today = new Date().toISOString().split('T')[0];
@@ -222,7 +60,7 @@
                         <button name="action" value="tage" type="submit">Berechnen</button>
                     </form>
                     {% if tage is not none %}
-                        <div class="result">Anzahl der Tage: {{ tage }}</div>
+                        <div class="result">Anzahl der Tage zwischen <b>{{ format_date(request.form.get('start1', '')) }}</b> und <b>{{ format_date(request.form.get('end1', '')) }}</b>: {{ tage }}</div>
                     {% endif %}
                 </div>
             </div>
@@ -251,7 +89,7 @@
                         <button name="action" value="werktage" type="submit">Berechnen</button>
                     </form>
                     {% if werktage is not none %}
-                        <div class="result">Anzahl der Werktage: {{ werktage }}</div>
+                        <div class="result">Anzahl der Werktage zwischen <b>{{ format_date(request.form.get('start2', '')) }}</b> und <b>{{ format_date(request.form.get('end2', '')) }}</b>: {{ werktage }}</div>
                     {% endif %}
                 </div>
             </div>
@@ -274,7 +112,7 @@
                         <button name="action" value="wochentag" type="submit">Anzeigen</button>
                     </form>
                     {% if wochentag is not none %}
-                        <div class="result">Wochentag: {{ wochentag }}</div>
+                        <div class="result">Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}</div>
                     {% endif %}
                 </div>
             </div>
@@ -304,7 +142,7 @@
                         <button name="action" value="datumsrechnung" type="submit">Berechnen</button>
                     </form>
                     {% if datumsrechnung is not none %}
-                        <div class="result">Ergebnis: {{ datumsrechnung }}</div>
+                        <div class="result">Datum <b>{{ format_date(request.form.get('datum4', '')) }}</b> {{ 'plus' if request.form.get('richtung4') == 'add' else 'minus' }} <b>{{ request.form.get('tage4', '') }}</b> Tage: {{ datumsrechnung }}</div>
                     {% endif %}
                 </div>
             </div>
@@ -334,7 +172,7 @@
                         <button name="action" value="werktagsrechnung" type="submit">Berechnen</button>
                     </form>
                     {% if werktagsrechnung is not none %}
-                        <div class="result">Ergebnis: {{ werktagsrechnung }}</div>
+                        <div class="result">Datum <b>{{ format_date(request.form.get('datum5', '')) }}</b> {{ 'plus' if request.form.get('richtung5') == 'add' else 'minus' }} <b>{{ request.form.get('tage5', '') }}</b> Werktage: {{ werktagsrechnung }}</div>
                     {% endif %}
                 </div>
             </div>
@@ -368,7 +206,7 @@
                         <button name="action" value="wochen_monate" type="submit">Berechnen</button>
                     </form>
                     {% if wochen_monate is not none %}
-                        <div class="result">Ergebnis: {{ wochen_monate }}</div>
+                        <div class="result">Datum <b>{{ format_date(request.form.get('datum8', '')) }}</b> {{ 'plus' if request.form.get('richtung8') == 'add' else 'minus' }} <b>{{ request.form.get('anzahl8', '') }}</b> {{ 'Wochen' if request.form.get('einheit8') == 'wochen' else 'Monate' }}: {{ wochen_monate }}</div>
                     {% endif %}
                 </div>
             </div>
@@ -391,7 +229,7 @@
                         <button name="action" value="kw_datum" type="submit">Start-/Enddatum berechnen</button>
                     </form>
                     {% if kw_datum is not none %}
-                        <div class="result">{{ kw_datum }}</div>
+                        <div class="result">Start-/Enddatum der KW <b>{{ request.form.get('kw7', '') }}</b> im Jahr <b>{{ request.form.get('jahr7', '') }}</b>: {{ kw_datum }}</div>
                     {% endif %}
                 </div>
             </div>