Checkout Server bestätigung, Darkmode Checkout server

views/checkin-result.ejs

@@ -6,15 +6,40 @@
   <title><%= title %> - Stundenerfassung</title>
   <%- include('header') %>
   <style>
+    :root {
+      --ci-bg-from: #2c3e50;
+      --ci-bg-to: #3498db;
+      --ci-card-bg: #ffffff;
+      --ci-card-shadow: 0 10px 40px rgba(0,0,0,0.2);
+      --ci-title: #2c3e50;
+      --ci-text: #555;
+      --ci-footer: rgba(255, 255, 255, 0.95);
+      --ci-toggle-bg: #ffffff;
+      --ci-toggle-text: #2c3e50;
+      --ci-toggle-border: rgba(0,0,0,0.1);
+    }
+    [data-theme="dark"] {
+      --ci-bg-from: #0f172a;
+      --ci-bg-to: #1e293b;
+      --ci-card-bg: #1e293b;
+      --ci-card-shadow: 0 10px 40px rgba(0,0,0,0.5);
+      --ci-title: #f1f5f9;
+      --ci-text: #cbd5e1;
+      --ci-footer: rgba(241, 245, 249, 0.85);
+      --ci-toggle-bg: #1e293b;
+      --ci-toggle-text: #f1f5f9;
+      --ci-toggle-border: rgba(255,255,255,0.15);
+    }
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-      background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+      background: linear-gradient(135deg, var(--ci-bg-from) 0%, var(--ci-bg-to) 100%);
       min-height: 100vh;
       display: flex;
       flex-direction: column;
       padding: 20px;
-      color: #333;
+      color: var(--ci-text);
+      transition: background 0.3s ease, color 0.3s ease;
     }
     .checkin-main {
       flex: 1;
@@ -23,13 +48,14 @@
       justify-content: center;
     }
     .card {
-      background: #fff;
+      background: var(--ci-card-bg);
       border-radius: 12px;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+      box-shadow: var(--ci-card-shadow);
       padding: 2.5rem;
       max-width: 420px;
       width: 100%;
       text-align: center;
+      transition: background 0.3s ease;
     }
     .icon {
       font-size: 4rem;
@@ -39,10 +65,10 @@
     .card h1 {
       font-size: 1.5rem;
       margin-bottom: 0.75rem;
-      color: #2c3e50;
+      color: var(--ci-title);
     }
     .card .message {
-      color: #555;
+      color: var(--ci-text);
       font-size: 1rem;
       line-height: 1.5;
     }
@@ -50,10 +76,46 @@
     .card.success h1 { color: #27ae60; }
     .card.error .icon { color: #e74c3c; }
     .card.error h1 { color: #e74c3c; }
+    .confirm-btn {
+      display: inline-block;
+      margin-top: 1.5rem;
+      padding: 0.85rem 1.5rem;
+      background: #e67e22;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 1rem;
+      transition: background 0.2s;
+    }
+    .confirm-btn:hover { background: #d35400; }
     .app-footer {
       width: 100%;
       text-align: center;
-      color: rgba(255, 255, 255, 0.95);
+      color: var(--ci-footer);
+    }
+    .theme-toggle-btn {
+      border: 1px solid var(--ci-toggle-border);
+      background: var(--ci-toggle-bg);
+      color: var(--ci-toggle-text);
+      padding: 8px 14px;
+      border-radius: 999px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 1;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    .theme-toggle-btn:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+    }
+    .theme-toggle-floating {
+      position: fixed;
+      right: 16px;
+      bottom: 16px;
+      z-index: 10000;
     }
   </style>
 </head>
@@ -63,6 +125,16 @@
       <div class="icon" aria-hidden="true"><%= success ? '✓' : '!' %></div>
       <h1><%= title %></h1>
       <p class="message"><%= message %></p>
+      <% if (typeof confirmUrl !== 'undefined' && confirmUrl) { %>
+        <% var _method = (typeof confirmMethod !== 'undefined' && confirmMethod) ? confirmMethod : 'GET'; %>
+        <% if (_method.toUpperCase() === 'POST') { %>
+          <form method="POST" action="<%= confirmUrl %>" style="margin:0;">
+            <button type="submit" class="confirm-btn"><%= confirmLabel || 'Bestätigen' %></button>
+          </form>
+        <% } else { %>
+          <a class="confirm-btn" href="<%= confirmUrl %>"><%= confirmLabel || 'Bestätigen' %></a>
+        <% } %>
+      <% } %>
     </div>
   </main>
   <%- include('footer') %>