Merge branch 'login'

# Conflicts:
#	WEBROOT/style.css

WEBROOT/login.php

@@ -36,23 +36,55 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 <head>
     <meta charset="UTF-8">
     <title>Login</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
 
-    <h2>Login</h2>
+    <body>
+
+        <div class="login-container">
+            <button id="darkModeToggle">🌙 Dark Mode</button>
+
+            <div class="login-box">
+
+                <h2>Login</h2>
+
+                <?php if ($error): ?>
+                <p class="login-error"><?= htmlspecialchars($error) ?></p>
+                <?php endif; ?>
+
+                <form method="post">
+                    <input type="text" name="username" placeholder="Benutzername" required>
+                    <input type="password" name="password" placeholder="Passwort" required>
+                    <button type="submit">Login</button>
+                </form>
+
+            </div>
+        </div>
+
+    </body>
+
+    <script>
+    const toggle = document.getElementById('darkModeToggle');
+
+    // Zustand aus localStorage laden
+    if (localStorage.getItem('darkMode') === 'enabled') {
+        document.body.classList.add('dark-mode');
+    }
+
+    toggle.addEventListener('click', () => {
+        document.body.classList.toggle('dark-mode');
+
+        if (document.body.classList.contains('dark-mode')) {
+            localStorage.setItem('darkMode', 'enabled');
+        } else {
+            localStorage.setItem('darkMode', 'disabled');
+        }
+    });
+    </script>
 
-    <?php if ($error): ?>
-    <p style="color:red;"><?= htmlspecialchars($error) ?></p>
-    <?php endif; ?>
 
-    <form method="post">
-        <input type="text" name="username" placeholder="Benutzername" required>
-        <br>
-        <input type="password" name="password" placeholder="Passwort" required>
-        <br>
-        <button type="submit">Login</button>
-    </form>
 
 </body>
 

WEBROOT/style.css

@@ -146,4 +146,88 @@ body.dark-mode #darkModeToggle {
 
 .service-group.open .arrow {
     transform: rotate(90deg);
+}
+
+/* ===== Login Page ===== */
+
+.login-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f6f8;
+}
+
+body.dark-mode .login-container {
+    background-color: #121212;
+}
+
+.login-box {
+    background-color: white;
+    padding: 30px 35px;
+    border-radius: 8px;
+    width: 320px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+body.dark-mode .login-box {
+    background-color: #1a1a1a;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+}
+
+.login-box h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.login-box input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 12px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    font-size: 1rem;
+}
+
+body.dark-mode .login-box input {
+    background-color: #333;
+    border: 1px solid #555;
+    color: #f0f0f0;
+}
+
+.login-box button {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.login-box button:hover {
+    background-color: #0056b3;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+
+.login-error {
+    color: #dc3545;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+body.dark-mode .login-box h2 {
+    color: #f0f0f0;
+}
+
+body.dark-mode .login-error {
+    color: #ff6b6b;
 }