Mobile-Update + Bericht

internal/app/web/index.html

@@ -8,7 +8,7 @@
   <title>Pocketwatch</title>
   <link rel="stylesheet" href="/static/app.css">
 </head>
-<body>
+<body class="mobile-compact">
 <div class="app-shell">
   <header class="topbar">
     <div class="brand"><span class="brand-dot"></span><span>pocketwatch</span></div>
@@ -29,7 +29,7 @@
           <input id="client-input" list="client-list" maxlength="200" placeholder="Kunde / Projekt">
           <datalist id="client-list"></datalist>
         </label>
-        <label class="field-label">Tätigkeit
+        <label class="field-label activity-field">Tätigkeit
           <textarea id="activity-input" rows="4" maxlength="4000" placeholder="Woran arbeitest du?"></textarea>
         </label>
         <div class="timer-display" id="timer-display">00:00:00</div>
@@ -69,6 +69,12 @@
       <footer class="history-footer"><span><strong id="result-count">0</strong> Einträge</span><span>Gesamt <strong id="result-total">0:00</strong></span></footer>
     </section>
   </main>
+
+  <nav class="mobile-view-nav" aria-label="Mobile Ansicht">
+    <button type="button" id="mobile-nav-track" class="mobile-nav-button active" aria-current="page"><span class="mobile-nav-icon">◷</span><span>Timer</span></button>
+    <button type="button" id="mobile-nav-history" class="mobile-nav-button"><span class="mobile-nav-icon">☷</span><span>Übersicht</span></button>
+    <button type="button" id="mobile-nav-settings" class="mobile-nav-button"><span class="mobile-nav-icon">⚙</span><span>Mehr</span></button>
+  </nav>
 </div>
 
 <dialog id="entry-dialog" class="modal">
@@ -96,6 +102,7 @@
         <label class="check-row"><input id="setting-week" type="checkbox"><span>Wochensumme anzeigen</span></label>
         <label class="check-row"><input id="setting-sticky" type="checkbox"><span>Tagesüberschriften fixieren</span></label>
         <label class="check-row"><input id="setting-reminder" type="checkbox"><span>Warnung bei langem Timer</span></label>
+        <label class="check-row"><input id="setting-mobile-compact" type="checkbox"><span>Kompaktansicht auf Mobilgeräten</span></label>
       </section>
       <section>
         <h3>Export</h3>
@@ -111,7 +118,7 @@
       <div id="user-list" class="user-list"></div>
     </section>
     <p id="settings-error" class="error-box" hidden></p>
-    <div class="modal-actions"><button type="button" class="btn subtle" data-close="settings-dialog">Abbrechen</button><button type="submit" class="btn primary">Speichern</button></div>
+    <div class="modal-actions"><button type="button" id="mobile-logout" class="btn danger mobile-compact-only">Abmelden</button><div class="spacer"></div><button type="button" class="btn subtle" data-close="settings-dialog">Abbrechen</button><button type="submit" class="btn primary">Speichern</button></div>
   </form>
 </dialog>
 
@@ -164,10 +171,34 @@
       <label class="check-row export-compact"><input id="export-compact" type="checkbox"><span>Nur Zeiten (ohne Tätigkeit)</span></label>
     </div>
     <p id="export-preview" class="export-preview">0 Einträge · 0:00</p>
-    <div class="export-buttons"><button id="export-pdf" class="btn primary">PDF herunterladen</button><button id="export-csv" class="btn subtle">CSV herunterladen</button></div>
+    <div class="export-buttons"><button id="export-service" class="btn subtle service-report-button">Service-Bericht für Unterschrift</button><button id="export-pdf" class="btn primary">PDF herunterladen</button><button id="export-csv" class="btn subtle">CSV herunterladen</button></div>
   </div>
 </dialog>
 
+<dialog id="service-report-dialog" class="modal modal-wide">
+  <form id="service-report-form" class="modal-card">
+    <div class="modal-head"><div><p class="eyebrow">SERVICE</p><h2>Service-Bericht erstellen</h2></div><button type="button" class="icon-btn" data-close="service-report-dialog">×</button></div>
+    <p class="muted">Der Bericht übernimmt den Zeitraum aus dem Export und enthält nur abgeschlossene Tätigkeiten des ausgewählten Kunden.</p>
+    <div class="two-col">
+      <label>Kunde *<input id="service-client" list="client-list" maxlength="200" required placeholder="Kunde / Projekt"></label>
+      <label>Ansprechpartner<input id="service-contact" maxlength="200" placeholder="Name beim Kunden"></label>
+    </div>
+    <div class="two-col">
+      <label>Einsatzort<input id="service-location" maxlength="400" placeholder="Standort / Adresse"></label>
+      <label>Auftrag / Ticket<input id="service-order" maxlength="120" placeholder="z. B. SR-2026-0042"></label>
+    </div>
+    <label>Betreff<input id="service-subject" maxlength="200" value="Service-Bericht"></label>
+    <label>Zusammenfassung / Bemerkungen<textarea id="service-notes" rows="4" maxlength="6000" placeholder="Optional: Ergebnis, Hinweise, offene Punkte …"></textarea></label>
+    <div class="two-col">
+      <label>Ort<input id="service-place" maxlength="120" placeholder="Ort der Unterschrift"></label>
+      <label>Berichtsdatum<input id="service-date" type="date" required></label>
+    </div>
+    <p id="service-preview" class="export-preview">Kunde und Zeitraum wählen.</p>
+    <p id="service-error" class="error-box" hidden></p>
+    <div class="modal-actions"><button type="button" class="btn subtle" data-close="service-report-dialog">Abbrechen</button><button type="submit" class="btn primary">Service-Bericht PDF</button></div>
+  </form>
+</dialog>
+
 <div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
 <script src="/static/app.js" defer></script>
 </body>