Release v0.30.0

2026-06-18 15:18:40 +02:00
commit 16b521f6d9
5 changed files with 723 additions and 0 deletions
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Arbeitszeit-Auswertung</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <main class="app">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">CSV-Auswertung</p>
+        <h1>Arbeitszeit-Saldo berechnen</h1>
+        <p class="intro">CSV-Datei hochladen, Netto-Arbeitszeiten auslesen und Plus-/Minusstunden berechnen: Montag bis Freitag mit 8:00 Stunden Sollzeit, Samstag/Sonntag mit 0:00 Sollzeit.</p>
+      </div>
+      <div class="settings" aria-label="Einstellungen">
+        <label>
+          Sollzeit pro Arbeitstag
+          <input id="targetTime" type="time" value="08:00" step="60">
+          <small>Gilt für Montag bis Freitag. Samstag/Sonntag = 0:00.</small>
+        </label>
+      </div>
+    </section>
+
+    <section id="dropZone" class="drop-zone">
+      <input id="csvFile" type="file" accept=".csv,text/csv">
+      <div class="drop-content">
+        <strong>CSV-Datei hier ablegen</strong>
+        <span>oder Datei auswählen</span>
+      </div>
+    </section>
+
+    <section id="formatHint" class="hint"></section>
+
+    <section id="errorBox" class="error hidden"></section>
+
+    <section id="summary" class="summary hidden" aria-live="polite">
+      <article class="card">
+        <span>Arbeitstage</span>
+        <strong id="totalDays">0</strong>
+      </article>
+      <article class="card">
+        <span>Arbeitszeit gesamt</span>
+        <strong id="totalWork">0:00</strong>
+      </article>
+      <article class="card">
+        <span>Sollzeit gesamt</span>
+        <strong id="totalTarget">0:00</strong>
+      </article>
+      <article class="card saldo-card">
+        <span>Saldo gesamt</span>
+        <strong id="totalSaldo">±0:00</strong>
+      </article>
+    </section>
+
+    <section id="results" class="results hidden">
+      <div class="table-header">
+        <h2>Monatsübersicht</h2>
+        <button id="exportCsv" type="button">Ergebnis als CSV exportieren</button>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Monat</th>
+              <th>Arbeitstage</th>
+              <th>Arbeitszeit</th>
+              <th>Sollzeit</th>
+              <th>Saldo</th>
+            </tr>
+          </thead>
+          <tbody id="monthTable"></tbody>
+        </table>
+      </div>
+
+      <details class="details">
+        <summary>Tagesdetails anzeigen</summary>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Datum</th>
+                <th>Wochentag</th>
+                <th>Beginn</th>
+                <th>Ende</th>
+                <th>Arbeitszeit</th>
+                <th>Sollzeit</th>
+                <th>Saldo</th>
+                <th>Ruhepause</th>
+                <th>Warnungen</th>
+              </tr>
+            </thead>
+            <tbody id="dayTable"></tbody>
+          </table>
+        </div>
+      </details>
+    </section>
+  </main>
+
+  <script src="app.js"></script>
+</body>
+</html>