update

WEBROOT/config.php

@@ -1,7 +1,52 @@
 <?php
-$services = [
+$serviceGroups = [
-    'request_logs' => ['name' => 'Request Logs', 'active' => true],
+    'Info' => [
-    'request_chart' => ['name' => 'Request Statics', 'active' => true],
+        'label' => 'Home',
-    'services_control' => ['name' => 'Site Control', 'active' => true],
+        'defaultOpen' => true,
+        'services' => [
+            'home_info'
+        ]
+    ],
+    'Logs' => [
+        'label' => 'Webserver Logs',
+        'defaultOpen' => true,
+        'services' => [
+            'request_logs', 
+            'request_chart',
+            'overtime'
+        ]
+    ],
+    'System' => [
+        'label' => 'Administration',
+        'defaultOpen' => true,
+        'services' => [
+            'services_control'
+        ]
+    ],
 ];
+
+$services = [
+    'home_info' => [
+        'name' => 'Home', 
+        'active' => true
+    ],
+    'request_logs' => [
+        'name' => 'Request Logs', 
+        'active' => true
+    ],
+    'overtime' => [
+        'name' => 'Ueberstunden', 
+        'active' => true
+    ],
+    'request_chart' => [
+        'name' => 'Request Statisktik', 
+        'active' => true
+    ],
+    'services_control' => [
+        'name' => 'Site Control', 
+        'active' => true
+    ],
+];
+
+
 ?>

WEBROOT/services/home_info.php

@@ -0,0 +1,22 @@
+<?php
+// Wir prüfen, ob der Name in der Session existiert, 
+// ansonsten nutzen wir 'Gast' als Fallback.
+$username = $_SESSION['username'] ?? 'Gast';
+?>
+
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Home Info</title>
+</head>
+
+<body>
+    <?php
+        // htmlspecialchars schützt vor XSS (Cross-Site Scripting)
+        echo '<h3>Hallo ' . htmlspecialchars($username) . '!</h3>';
+    ?>
+</body>
+
+</html>

WEBROOT/services/overtime.php

@@ -0,0 +1,50 @@
+<h1>Überstunden Rechner</h1>
+<div class="overtime-container">
+    <label for="startTime">Arbeitsstartzeit:</label>
+    <input type="time" id="startTime" step="60">
+    <button id="startBtn">Start</button>
+
+    <div class="overtime-result">
+        <p>Überstunden / Restzeit:</p>
+        <div id="result">0:00</div>
+    </div>
+</div>
+
+<script>
+document.getElementById('startBtn').addEventListener('click', startCalculating);
+
+let timer;
+
+function startCalculating() {
+    clearInterval(timer);
+
+    const startTimeInput = document.getElementById('startTime').value;
+    if (!startTimeInput) {
+        alert("Bitte eine Startzeit eingeben!");
+        return;
+    }
+
+    const now = new Date();
+    const [hours, minutes] = startTimeInput.split(':').map(Number);
+
+    let startDate = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hours, minutes, 0);
+    const targetWorkMs = 8.5 * 60 * 60 * 1000; // 8,5 Stunden
+
+    const resultEl = document.getElementById('result');
+
+    timer = setInterval(() => {
+        const currentTime = new Date();
+        let workedMs = currentTime - startDate;
+        let diffMs = workedMs - targetWorkMs;
+
+        let negative = diffMs < 0;
+        let absMs = Math.abs(diffMs);
+
+        const hoursPart = Math.floor(absMs / (1000 * 60 * 60));
+        const minutesPart = Math.floor((absMs % (1000 * 60 * 60)) / (1000 * 60));
+
+        resultEl.innerText = `${negative ? '-' : '+'}${hoursPart}:${minutesPart < 10 ? '0' : ''}${minutesPart}`;
+        resultEl.parentElement.classList.toggle('negative', negative);
+    }, 1000);
+}
+</script>

WEBROOT/style.css

@@ -95,3 +95,209 @@ body.dark-mode #darkModeToggle {
     background-color: #333;
     color: white;
 }
+
+.service-group {
+    margin-bottom: 10px;
+}
+
+.group-title {
+    font-weight: bold;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.group-services {
+    margin-left: 10px;
+}
+
+.service-group {
+    margin-bottom: 8px;
+}
+
+.group-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px;
+    font-weight: bold;
+    user-select: none;
+}
+
+.group-title:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.group-services {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    margin-left: 10px;
+}
+
+.service-group.open .group-services {
+    max-height: 500px;
+    /* genug für alle Buttons */
+}
+
+.arrow {
+    transition: transform 0.3s ease;
+}
+
+.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;
+}
+
+.overtime-container {
+    max-width: 400px;
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 20px;
+}
+
+body.dark-mode .overtime-container {
+    background-color: #1e1e1e;
+    color: #f0f0f0;
+}
+
+.overtime-container label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.overtime-container input,
+.overtime-container button {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    font-size: 1rem;
+}
+
+body.dark-mode .overtime-container input {
+    background-color: #333;
+    border: 1px solid #555;
+    color: #f0f0f0;
+}
+
+.overtime-container button {
+    background-color: #007bff;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.overtime-container button:hover {
+    background-color: #0056b3;
+}
+
+.overtime-result {
+    text-align: center;
+    font-size: 1.3rem;
+    font-weight: bold;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #e0f7e0;
+}
+
+body.dark-mode .overtime-result {
+    background-color: #333;
+}
+
+.overtime-result.negative {
+    background-color: #f8d7da;
+    color: #721c24;
+}
+
+body.dark-mode .overtime-result.negative {
+    background-color: #551b1e;
+    color: #f88;
+}