updated Design und Funktion

2026-01-06 16:57:10 +01:00 · 2026-01-06 16:57:10 +01:00 · a5bd393f05
commit a5bd393f05
parent 5c658701e1
13 changed files with 140 additions and 220 deletions
--- a/html/.htaccess
+++ b/html/.htaccess
@ -0,0 +1,4 @@
+# .htaccess (für Apache-Server)
+<FilesMatch "\.(css|js)$">
+  Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
+</FilesMatch>
--- a/html/assets/css/style.css
+++ b/html/assets/css/style.css
@ -7,8 +7,8 @@
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --success-color: #4cc9f0;
-    --border-radius: 8px;
-    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    --border-radius: 10px; /* Leicht runde Ecken */
+    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
 }

@ -19,183 +19,14 @@ body {
    background-color: #f5f7fa;
    color: var(--dark-color);
    line-height: 1.6;
-}
-
-/* Container */
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-/* Navigation */
-.nav {
    display: flex;
-    justify-content: space-between;
+    justify-content: center;
    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: 0;
-    z-index: 100;
+    height: 100vh;
 }

-.nav-list {
-    display: none;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-    background: white;
-    position: absolute;
-    top: 60px;
-    left: 0;
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow);
-    overflow: hidden;
-}
-.nav-list.active {
-    display: block;
-}
-
-.nav-list li {
-    padding: 12px 20px;
-    border-bottom: 1px solid #eee;
-    transition: all 0.3s ease;
-    list-style-type: none;
-}
-
-.nav-list li:last-child {
-    border-bottom: none;
-}
-
-/* Menüeinträge: Design wie der Logout-Button */
-.nav-list li a {
-    color: var(--dark-color);
-    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;
-}
-
-.nav-list li a:hover {
-    background-color: rgba(255, 255, 255, 0.3);  /* Etwas dunklerer Hintergrund bei Hover */
-    transform: translateY(-2px); /* Leichtes Anheben beim Hover */
-    color: var(--dark-color); /* Textfarbe bleibt gleich */
-}
-
-/* Menüeinträge bei Hover: zusätzlicher Schatten */
-.nav-list li:hover {
-    background-color: rgba(255, 255, 255, 0.3); /* Der Hintergrund ändert sich auch beim Hover auf den li */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dezent sichtbarer Schatten */
-    transform: translateY(-2px); /* Leichtes Anheben */
-}
-
-/* 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;
-    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: white;
-    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;
-}
-
-/* Modal */
-.modal {
+/* Login Modal */
+#login-modal {
 display: flex;
 justify-content: center;
 align-items: center;
@ -206,53 +37,119 @@ tr:hover {
 bottom: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1001;
-    backdrop-filter: blur(3px);
 }

 .modal-content {
    background: white;
-    padding: 30px;
+    padding: 40px;
    border-radius: var(--border-radius);
    width: 90%;
-    max-width: 400px;
+    max-width: 450px;
    box-shadow: var(--box-shadow);
    transform: scale(1.05);
    transition: var(--transition);
+    text-align: center;
+}
+
+.modal-content h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    color: var(--primary-color);
+}
+
+.modal-content input[type="text"],
+.modal-content input[type="password"] {
+    width: 100%;
+    padding: 15px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    font-size: 16px;
+    transition: border-color 0.3s ease;
+}
+
+.modal-content input[type="text"]:focus,
+.modal-content input[type="password"]:focus {
+    border-color: var(--primary-color);
+    outline: none;
+}
+
+.modal-content button {
+    width: 100%;
+    padding: 15px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius);
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.modal-content button:hover {
+    background-color: var(--primary-hover);
+    transform: translateY(-2px);
+}
+
+.modal-content button:active {
+    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%;
+        padding: 25px;
+    }
+
+    .modal-content h2 {
+        font-size: 20px;
+    }
+
+    .modal-content input[type="text"],
+    .modal-content input[type="password"],
+    .modal-content button {
+        font-size: 14px;
+    }
 }

-/* Responsive */
@media (min-width: 768px) {
+    /* Die Navigation wird hier angepasst, wenn nötig */
    .nav-list {
        display: flex !important;
-        position: static;
-        background: transparent;
-        box-shadow: none;
-        border-radius: 0;
-        width: auto;
-        overflow: visible;
-    }
-
-    .nav-list li {
-        padding: 0;
-        margin: 0 10px;
-        border-bottom: none;
-    }
-
-    .nav-list li a {
-        color: white;
-        padding: 5px 10px;
-    }
-
-    .nav-list li a:hover {
-        color: rgba(255, 255, 255, 0.8);
-    }
-
-    .nav-list li:hover {
-        background: var(--primary-hover);
-        transform: translateY(-3px);
-    }
-
-    .hamburger {
-        display: none;
    }
 }
--- a/html/assets/js/script.js
+++ b/html/assets/js/script.js
@ -1,6 +1,22 @@
-// Cookie-Hinweis ausblenden
-document.getElementById('accept-cookies').addEventListener('click', function() {
-    document.getElementById('cookie-notice').style.display = 'none';
+// Funktion, um den Cookie-Hinweis automatisch nach einer bestimmten Zeit auszublenden
+function hideCookieNotice(delay = 20000) {
+    const cookieNotice = document.getElementById('cookie-notice');
+    if (!cookieNotice) return; // Wenn das Element nicht existiert, abbrechen
+
+    // Timer starten
+    setTimeout(() => {
+        cookieNotice.classList.add('hidden'); // Klasse für Ausblenden hinzufügen
+
+        // Nach der CSS-Animation komplett aus dem DOM entfernen
+        setTimeout(() => {
+            cookieNotice.style.display = 'none';
+        }, 500); // 500ms entspricht der CSS-Transition
+    }, delay);
+}
+
+// Optional: automatisch beim Laden der Seite starten
+window.addEventListener('DOMContentLoaded', () => {
+    hideCookieNotice(); // Standard: 20 Sekunden
 });

 // Hamburger-Menü
--- a/html/dashboard.php
+++ b/html/dashboard.php
@ -31,7 +31,7 @@ $entries = $stmt->fetchAll();
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Dashboard</title>
+    <title>FSCash - Dashboard</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
--- a/html/index.php
+++ b/html/index.php
@ -10,21 +10,24 @@ if (isset($_SESSION['user_id'])) {
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>FinanzApp - Login</title>
+<title>FSCash - Login</title>
 <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
 <!-- Cookie-Hinweis -->
 <div id="cookie-notice" class="cookie-notice">
-<p>Diese Website verwendet nur technisch notwendige Cookies.</p>
-<button id="accept-cookies">OK</button>
+<p>
+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">
-<h2>Login</h2>
+<h2>FSCash</h2>
 <form action="dashboard.php" method="post">
 <input type="text" name="username" placeholder="Benutzername" required>
 <input type="password" name="password" placeholder="Passwort" required>
--- a/html/login.php
+++ b/html/login.php
@ -40,10 +40,10 @@ $conn->close();
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Login</title>
+    <title>FSCash - Login</title>
 </head>
 <body>
-    <h2>Login</h2>
+    <h2>FSCash</h2>
    <form method="post" action="login.php">
        Username: <input type="text" name="username" required><br>
        Passwort: <input type="password" name="password" required><br>
--- a/html/menu1.php
+++ b/html/menu1.php
@ -10,12 +10,12 @@ if (!isset($_SESSION['user_id'])) {
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Menüpunkt X</title>
+    <title>FSCash - Menüpunkt X</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
    <div class="container">
-        <h1>Menüpunkt X</h1>
+        <h1>FSCash X</h1>
        <p>Hier kommt der Inhalt für Menüpunkt X.</p>
    </div>
 </body>
--- a/html/menu2.php
+++ b/html/menu2.php
@ -10,12 +10,12 @@ if (!isset($_SESSION['user_id'])) {
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Menüpunkt X</title>
+    <title>FSCash - Menüpunkt X</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
    <div class="container">
-        <h1>Menüpunkt X</h1>
+        <h1>FSCash X</h1>
        <p>Hier kommt der Inhalt für Menüpunkt X.</p>
    </div>
 </body>
--- a/html/menu3.php
+++ b/html/menu3.php
@ -10,12 +10,12 @@ if (!isset($_SESSION['user_id'])) {
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Menüpunkt X</title>
+    <title>FSCash - Menüpunkt X</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
    <div class="container">
-        <h1>Menüpunkt X</h1>
+        <h1>FSCash X</h1>
        <p>Hier kommt der Inhalt für Menüpunkt X.</p>
    </div>
 </body>
--- a/html/menu4.php
+++ b/html/menu4.php
@ -10,12 +10,12 @@ if (!isset($_SESSION['user_id'])) {
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Menüpunkt X</title>
+    <title>FSCash - Menüpunkt X</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
    <div class="container">
-        <h1>Menüpunkt X</h1>
+        <h1>FSCash X</h1>
        <p>Hier kommt der Inhalt für Menüpunkt X.</p>
    </div>
 </body>
--- a/html/menu5.php
+++ b/html/menu5.php
@ -10,12 +10,12 @@ if (!isset($_SESSION['user_id'])) {
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Menüpunkt X</title>
+    <title>FSCash - Menüpunkt X</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
    <div class="container">
-        <h1>Menüpunkt X</h1>
+        <h1>FSCash X</h1>
        <p>Hier kommt der Inhalt für Menüpunkt X.</p>
    </div>
 </body>
--- a/html/new_entry.php
+++ b/html/new_entry.php
@ -52,7 +52,7 @@ if (!empty($_POST)) { //  $_SERVER['REQUEST_METHOD'] === 'POST') {
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FinanzApp - Neuer Eintrag</title>
+    <title>FSCash - Neuer Eintrag</title>
    <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
--- a/html/register.php
+++ b/html/register.php
@ -34,7 +34,7 @@ $conn->close();
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Registrierung</title>
+    <title>FSCash - Registrierung</title>
    <link rel="stylesheet" href="assets/css/style.css">

 </head>