noch schöner gemacht

html/assets/css/style.css

@@ -19,24 +19,181 @@ body {
     background-color: #f5f7fa;
     color: var(--dark-color);
     line-height: 1.6;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    display: block;
     height: 100vh;
 }
 
-/* Login Modal */
-#login-modal {
-display: flex;
-justify-content: center;
-align-items: center;
-position: fixed;
-top: 0;
-left: 0;
-right: 0;
-bottom: 0;
-background: rgba(0, 0, 0, 0.5);
-z-index: 1001;
+/* Container */
+.container {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Navigation */
+.nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    color: white;
+    box-shadow: var(--box-shadow);
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+    position: sticky;
+    top: 30px;
+    z-index: 100;
+}
+
+.nav-list {
+    display: none;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+}
+.nav-list.active {
+    display: block;
+}
+
+.nav-list li a {
+    margin-right: 10px;
+}
+
+.nav-list li a {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    display: block;
+    padding: 8px 20px;
+    border-radius: var(--border-radius);
+    background: rgba(255, 255, 255, 0.2); /* Halbtransparenter Hintergrund */
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+/* Menüeinträge bei Hover: zusätzlicher Schatten */
+.nav-list li a:hover {
+    background: rgba(255, 255, 255, 0.3);}
+
+/* Hamburger Menu */
+.hamburger {
+    display: block;
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 5px;
+}
+
+.logout {
+    color: white;
+    text-decoration: none;
+    font-weight: 500;
+    margin-left: auto;
+    padding: 8px 15px;
+    border-radius: var(--border-radius);
+    background: rgba(255, 255, 255, 0.2);
+    transition: var(--transition);
+}
+
+.logout:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Tabelle */
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 20px 0;
+    background: white;
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--box-shadow);
+}
+
+th, td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+}
+
+th {
+    background: var(--primary-color);
+    color: white;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.85em;
+    letter-spacing: 0.5px;
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+tr:hover {
+    background: #f8f9fa;
+    transition: var(--transition);
+}
+
+/* Button */
+.btn-new {
+    display: inline-block;
+    background: var(--success-color);
+    color: white;
+    padding: 12px 20px;
+    text-align: center;
+    text-decoration: none;
+    border-radius: var(--border-radius);
+    font-weight: 600;
+    box-shadow: var(--box-shadow);
+    transition: var(--transition);
+    margin: 20px 0;
+}
+
+.btn-new:hover {
+    background: #3ab7d8;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Cookie-Hinweis */
+.cookie-notice {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--light-color);
+    color: var(--dark-color);
+    padding: 15px;
+    text-align: center;
+    z-index: 1000;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    border-top: 1px solid #eee;
+    transition: opacity 0.5s ease, max-height 0.5s ease;
+    opacity: 1;
+    overflow: hidden;
+}
+
+#cookie-notice.hidden {
+opacity: 0;
+max-height: 0;
+}
+
+/* Modal */
+.modal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1001;
 }
 
 .modal-content {
@@ -96,43 +253,10 @@ z-index: 1001;
     transform: translateY(0);
 }
 
-/* Cookie-Hinweis */
-.cookie-notice {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--light-color);
-    color: var(--dark-color);
-    padding: 15px;
-    text-align: center;
-    z-index: 1000;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-    border-top: 1px solid #eee;
-    transition: opacity 0.5s ease, max-height 0.5s ease;
-    opacity: 1;
-    overflow: hidden;
-}
-
-#cookie-notice.hidden {
-opacity: 0;
-max-height: 0;
-}
-
-/* Verbesserung des Modals */
-.modal-content {
-    max-width: 400px;
-    margin: 0 auto;
-    padding: 30px;
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-    transition: transform 0.3s ease;
-}
-
 /* Responsive Design */
 @media (max-width: 768px) {
     .modal-content {
-        width: 90%;
+        width: 80%;
         padding: 25px;
     }
 
@@ -142,9 +266,14 @@ max-height: 0;
 
     .modal-content input[type="text"],
     .modal-content input[type="password"],
+
     .modal-content button {
         font-size: 14px;
     }
+
+    body {
+        background-color: lightgray; /* Debugging - Hintergrundfarbe für kleine Geräte */
+    }
 }
 
 @media (min-width: 768px) {
@@ -152,4 +281,9 @@ max-height: 0;
     .nav-list {
         display: flex !important;
     }
+
+    .hamburger {
+        display: none; /* Hamburger-Menü auf größeren Bildschirmen ausblenden */
+    }
+
 }

html/assets/js/script.js

@@ -1,5 +1,5 @@
 // Funktion, um den Cookie-Hinweis automatisch nach einer bestimmten Zeit auszublenden
-function hideCookieNotice(delay = 20000) {
+function hideCookieNotice(delay = 5000) {
     const cookieNotice = document.getElementById('cookie-notice');
     if (!cookieNotice) return; // Wenn das Element nicht existiert, abbrechen
 
@@ -20,6 +20,12 @@ window.addEventListener('DOMContentLoaded', () => {
 });
 
 // Hamburger-Menü
-// document.querySelector('.hamburger').addEventListener('click', function() {
-//    document.querySelector('.nav-list').classList.toggle('show');
-// });
+const hamburger = document.querySelector('.hamburger');
+if (hamburger) { // Prüfen, ob das Element mit der Klasse .hamburger existiert
+    hamburger.addEventListener('click', function() {
+        const navList = document.querySelector('.nav-list');
+        if (navList) {
+            navList.classList.toggle('show');
+        }
+    });
+}

html/index.php

@@ -21,12 +21,12 @@ Cookie-Hinweis:<br/>
 Auf dieser Webseite werden nur technisch notwendige Cookies verwendet, die nach dem Logout automatisch gelöscht werden. <br/>
 Mit der weiteren Nutzung der Webseite erklären Sie sich mit dem Einsatz dieser Technologie einverstanden.
 </p>
-<button class="hamburger">☰</button>
 </div>
 
 <!-- Modal Login Dialog -->
 <div id="login-modal" class="modal">
 <div class="modal-content">
+<img src="assets/img/euro.gif"/>
 <h2>FSCash</h2>
 <form action="dashboard.php" method="post">
 <input type="text" name="username" placeholder="Benutzername" required>

html/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}