From a2d78fa4a98102213bc27101b220de5e08a9df7e Mon Sep 17 00:00:00 2001
From: sraffauf <schn33fuchs@web.de>
Date: Thu, 22 Jan 2026 19:44:46 +0100
Subject: [PATCH] Implementation of dark mode

Dark mode is now enabled if the users device is set to use it.
Also minor stylistic changes were made
---
 css/style.css    | 177 ++++++++++++++++++++++++++++++++++++++++++++++-
 pages/login.html |   1 -
 2 files changed, 176 insertions(+), 2 deletions(-)

diff --git a/css/style.css b/css/style.css
index f37d08d..0053f9f 100644
--- a/css/style.css
+++ b/css/style.css
@@ -29,7 +29,6 @@ body {
 /* Formular Styles */
 input, textarea, select, button {
   width: 100%;
-  margin-top: 1rem;
   padding: 0.75rem;
   font-size: 1rem;
   border-radius: 0.5rem;
@@ -42,6 +41,7 @@ button {
   color: white;
   border: none;
   cursor: pointer;
+  margin-bottom: 15px;
 }
 
 button:hover {
@@ -61,6 +61,7 @@ button:hover {
   cursor: pointer;
   border: none;
   transition: all 0.2s ease-in-out;
+  margin-bottom: 15px;
 }
 
 .login-btn:hover {
@@ -166,3 +167,177 @@ button:hover {
 .status.To-Do { background: #ffcccc; color: #a00; }
 .status.InProgress { background: #fff3cd; color: #856404; }
 .status.Done { background: #d4edda; color: #155724; }
+
+@media (prefers-color-scheme: dark) {
+    /* Grundstyles */
+    body {
+      font-family: Arial, sans-serif;
+      background: #121212;
+      padding: 2rem;
+      margin: 0;
+      color: #e2e2e2;
+    }
+
+    .container {
+      max-width: 900px;
+      margin: auto;
+      background: #333333;
+      padding: 2rem;
+      border-radius: 1rem;
+      box-shadow: 0 0 15px rgba(0,0,0,0.1);
+    }
+
+    .header-with-image {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    .header-with-image img {
+      height: 60px;
+    }
+
+    /* Formular Styles */
+    input, textarea, select, button {
+      width: 100%;
+      background-color: #6b6b6b;
+      margin-bottom: 15px;
+      padding: 0.75rem;
+      font-size: 1rem;
+      border-radius: 0.5rem;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+    }
+
+    button {
+      background-color: #2b79c2;
+      color: white;
+      border: none;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: #1d5fa0;
+    }
+
+    /* Login Button (Index-Seite) */
+    .login-btn {
+      display: inline-block;
+      padding: 12px 400px;
+      background: #2b79c2;
+      color: white;
+      border-radius: 10px;
+      text-decoration: none;
+      font-weight: bold;
+      font-size: 1rem;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s ease-in-out;
+      margin-bottom: 15px;
+    }
+
+    .login-btn:hover {
+      background: #1d5fa0;
+      transform: scale(1.05);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
+
+    /* Logout Button */
+    .logout-btn {
+      display: inline-block;
+      padding: 10px 20px;
+      background: #ff4d4d;
+      color: white;
+      border-radius: 10px;
+      text-decoration: none;
+      font-weight: bold;
+      transition: 0.2s ease-in-out;
+      margin-bottom: 20px;
+    }
+
+    .logout-btn:hover {
+      background: #e60000;
+      transform: scale(1.05);
+    }
+
+    /* Tickets */
+    .ticket {
+      border: 1px solid #ccc;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      border-radius: 10px;
+      background: #fff;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+
+    .ticket h3 {
+      margin-top: 0;
+      color: #2b79c2;
+    }
+
+    .ticket p {
+      margin: 0.3rem 0;
+    }
+
+    /* Status Labels */
+    .status {
+      display: inline-block;
+      padding: 4px 10px;
+      border-radius: 8px;
+      font-size: 0.8rem;
+      font-weight: bold;
+      margin-top: 8px;
+    }
+
+    /* Logout Button */
+    .logout-btn {
+        display: inline-block;
+        padding: 10px 20px;
+        background: #ff4d4d;
+        color: white;
+        border-radius: 10px;
+        text-decoration: none;
+        font-weight: bold;
+        transition: 0.2s ease-in-out;
+        margin-bottom: 20px;
+    }
+
+    .logout-btn:hover {
+        background: #e60000;
+        transform: scale(1.05);
+    }
+
+    /* Tickets */
+    .ticket {
+        border: 1px solid #ccc;
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 10px;
+        background: #333333;
+        box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    }
+
+    .ticket h3 {
+        margin-top: 0;
+        color: #2b79c2;
+    }
+
+    .ticket p {
+        margin: 0.3rem 0;
+    }
+
+    /* Status Labels */
+    .status {
+        display: inline-block;
+        padding: 4px 10px;
+        border-radius: 8px;
+        font-size: 0.8rem;
+        font-weight: bold;
+        margin-top: 8px;
+    }
+
+    .status.To-Do { background: #ffcccc; color: #a00; }
+    .status.InProgress { background: #fff3cd; color: #856404; }
+    .
+}
diff --git a/pages/login.html b/pages/login.html
index 4a8fd72..6b3c28b 100644
--- a/pages/login.html
+++ b/pages/login.html
@@ -19,7 +19,6 @@
       <input type="password" id="password" name="password" required />
       <button type="submit">Einloggen</button>
     </form>
-    <p id="errorMsg" style="color: red;"></p>
   </div>
   <!--<script src="../js/login.js"></script>-->
 </body>