diff --git a/html/android-chrome-192x192.png b/html/android-chrome-192x192.png
new file mode 100644
index 0000000..37416d9
Binary files /dev/null and b/html/android-chrome-192x192.png differ
diff --git a/html/android-chrome-512x512.png b/html/android-chrome-512x512.png
new file mode 100644
index 0000000..ff7059e
Binary files /dev/null and b/html/android-chrome-512x512.png differ
diff --git a/html/apple-touch-icon.png b/html/apple-touch-icon.png
new file mode 100644
index 0000000..3179891
Binary files /dev/null and b/html/apple-touch-icon.png differ
diff --git a/html/assets/css/style.css b/html/assets/css/style.css
index ea52818..b5e22f5 100644
--- a/html/assets/css/style.css
+++ b/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 */
+ }
+
}
diff --git a/html/assets/img/euro.gif b/html/assets/img/euro.gif
new file mode 100644
index 0000000..6260dc2
Binary files /dev/null and b/html/assets/img/euro.gif differ
diff --git a/html/assets/js/script.js b/html/assets/js/script.js
index 4012247..3df31c2 100644
--- a/html/assets/js/script.js
+++ b/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');
+ }
+ });
+}
diff --git a/html/favicon-16x16.png b/html/favicon-16x16.png
new file mode 100644
index 0000000..cdb5a34
Binary files /dev/null and b/html/favicon-16x16.png differ
diff --git a/html/favicon-32x32.png b/html/favicon-32x32.png
new file mode 100644
index 0000000..3950db3
Binary files /dev/null and b/html/favicon-32x32.png differ
diff --git a/html/favicon.ico b/html/favicon.ico
new file mode 100644
index 0000000..6004f09
Binary files /dev/null and b/html/favicon.ico differ
diff --git a/html/index.php b/html/index.php
index e164e59..6d730c3 100644
--- a/html/index.php
+++ b/html/index.php
@@ -21,12 +21,12 @@ Cookie-Hinweis:
Auf dieser Webseite werden nur technisch notwendige Cookies verwendet, die nach dem Logout automatisch gelöscht werden.
Mit der weiteren Nutzung der Webseite erklären Sie sich mit dem Einsatz dieser Technologie einverstanden.
-
+
FSCash