diff --git a/html/assets/css/INSTALL.md b/html/assets/css/INSTALL.md new file mode 100644 index 0000000..9a355a8 --- /dev/null +++ b/html/assets/css/INSTALL.md @@ -0,0 +1,10 @@ +# INSTALL + +My System consists of: +- debian 13 +- mariadb server 11.8.3 +- php 8.4 +- php-mysqli +- php-pdo-mysql +- github/acme.sh + diff --git a/html/assets/css/style.css b/html/assets/css/style.css index 15da776..13ce5ea 100644 --- a/html/assets/css/style.css +++ b/html/assets/css/style.css @@ -1,13 +1,13 @@ /* Basis-Stile */ :root { --primary-color: #4361ee; - --primary-hover: #687eef; /* #3a56d4; */ + --primary-hover: #687eef; --secondary-color: #3f37c9; --accent-color: #4895ef; --light-color: #f8f9fa; --dark-color: #212529; --success-color: #4cc9f0; - --border-radius: 10px; /* Leicht runde Ecken */ + --border-radius: 10px; --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } @@ -33,71 +33,63 @@ body { /* 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; + justify-content: space-between; + padding: 10px 20px; + background: var(--primary-color); + border-radius: var(--border-radius); + margin-bottom: 20px; } -.nav-list { +.hamburger { display: none; - list-style: none; - padding: 0; - margin: 0; - border-radius: var(--border-radius); - overflow: hidden; -} -.nav-list.active { - display: block; -} - -.nav-list li { - flex-grow: 1; -} - -.nav-list li a { - margin-right: 10px; -} - -.nav-list li a { + background: rgba(255, 255, 255, 0.2); + border: none; color: white; - text-decoration: none; - font-weight: 500; - display: block; - padding: 8px 20px; + font-size: 1.5rem; + padding: 8px 15px; border-radius: var(--border-radius); - background: rgba(255, 255, 255, 0.2); /* Halbtransparenter Hintergrund */ - transition: background-color 0.3s ease, transform 0.2s ease; + cursor: pointer; + transition: var(--transition); + margin-right: 10px; + z-index: 101; } -/* Menüeinträge bei Hover: zusätzlicher Schatten */ -.nav-list li a:hover { +.hamburger:hover { background: rgba(255, 255, 255, 0.3); } -/* Hamburger Menu */ -.hamburger { +.nav-list { + display: flex; + list-style: none; + margin: 0; + padding: 0; +} + +.nav-list li { + margin: 0 5px; +} + +.nav-list li a { display: block; - background: none; - border: none; + padding: 10px 15px; color: white; - font-size: 24px; - cursor: pointer; - padding: 5px; + text-decoration: none; + font-weight: 500; + border-radius: 8px; + transition: all 0.2s ease; +} + +.nav-list li a:hover { + background: rgba(255, 255, 255, 0.25); } .logout { color: white; text-decoration: none; + font-size: 0.9rem; font-weight: 500; - margin-left: auto; - padding: 8px 15px; + padding: 8px 12px; border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.2); transition: var(--transition); @@ -107,6 +99,53 @@ body { background: rgba(255, 255, 255, 0.3); } +/* Responsive Navigation für schmale Bildschirme */ +@media (max-width: 768px) { + .hamburger { + display: block; + } + .nav-list { + display: none; + position: fixed; + top: 95px; + left: 20px; + max-width: 250px; + height: auto; + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + border-radius: 12px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); + flex-direction: column; + padding: 10px 0; + margin: 0; + z-index: 100; + transform: translateX(-100%); + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease; + overflow: hidden; + } + .nav-list.show { + display: flex; + transform: translateX(0); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); + } + .nav-list li { + width: 100%; + margin: 2px 0; + } + .nav-list li a { + padding: 12px 20px; + margin: 0 8px; + } + .nav-list li a:hover { + transform: translateX(5px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + .logout { + margin-left: 0; + padding: 8px 12px; + font-size: 0.9rem; + } +} + /* Tabelle */ table { width: 100%; @@ -143,6 +182,13 @@ tr:hover { transition: var(--transition); } +/* Ausblenden der markierten Spalten auf kleinen Bildschirmen */ +@media (max-width: 768px) { + .hide-on-mobile { + display: none; + } +} + /* Button */ .btn-new { display: inline-block; @@ -163,7 +209,7 @@ tr:hover { } /* Cookie-Hinweis */ -.cookie-notice { +.cookie-notice, .data-notice { position: fixed; bottom: 0; left: 0; @@ -185,6 +231,11 @@ opacity: 0; max-height: 0; } +#data-notice.hidden { +opacity: 0; +max-height: 0; +} + /* Modal */ .modal { display: flex; @@ -256,37 +307,30 @@ max-height: 0; transform: translateY(0); } +/* Verstecken der Spinner-Knöpfe in verschiedenen Browsern */ +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"] { + -moz-appearance: textfield; +} + /* Responsive Design */ @media (max-width: 768px) { .modal-content { width: 80%; padding: 25px; } - .modal-content h2 { font-size: 20px; } - .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) { - /* Die Navigation wird hier angepasst, wenn nötig */ - .nav-list { - display: flex !important; - } - - .hamburger { - display: none; /* Hamburger-Menü auf größeren Bildschirmen ausblenden */ - } - -} diff --git a/html/assets/js/script.js b/html/assets/js/script.js index 3df31c2..5804812 100644 --- a/html/assets/js/script.js +++ b/html/assets/js/script.js @@ -14,9 +14,26 @@ function hideCookieNotice(delay = 5000) { }, delay); } +function hideDataNotice(delay = 5000) { + const dataNotice = document.getElementById('data-notice'); + if (!dataNotice) return; // Wenn das Element nicht existiert, abbrechen + + alert(dataNotice); + // Timer starten + setTimeout(() => { + dataNotice.classList.add('hidden'); // Klasse für Ausblenden hinzufügen + + // Nach der CSS-Animation komplett aus dem DOM entfernen + setTimeout(() => { + dataNotice.style.display = 'none'; + }, 500); // 500ms entspricht der CSS-Transition + }, delay); +} + // Optional: automatisch beim Laden der Seite starten window.addEventListener('DOMContentLoaded', () => { hideCookieNotice(); // Standard: 20 Sekunden + hideDataNotice(); // ebenfalls ausblenden, wenn vorhanden. }); // Hamburger-Menü diff --git a/html/dashboard.php b/html/dashboard.php index 03505fb..04a5b5c 100644 --- a/html/dashboard.php +++ b/html/dashboard.php @@ -1,10 +1,9 @@ prepare("SELECT * FROM entries"); +$stmt = $pdo->prepare("SELECT * FROM entries WHERE MONTH(date) = MONTH(CURDATE()) AND YEAR(date) = YEAR(CURDATE())"); $stmt->execute(); $entries = $stmt->fetchAll(); ?> - - - FSCash - Dashboard - + + +FSCash - Dashboard + -
- - +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - -
DatumKategorieZahlweiseBetreffBetrag
+ + + + + + + + + + + + + + + + + + + + + + + + +
DatumPersonKategorieZahlweiseBetreffBetrag
- - Neu -
+ +Neu +
- + diff --git a/html/new_entry.php b/html/new_entry.php index 8cb487c..ce40660 100644 --- a/html/new_entry.php +++ b/html/new_entry.php @@ -4,10 +4,10 @@ if (!isset($_SESSION['user_id'])) { header('Location: index.php'); exit; } -?> -Empfangene POST-Daten:"; echo ""; - // POST-Daten abrufen und escapen $date = isset($_POST['date']) ? trim($_POST['date']) : ''; $user_id = isset($_POST['user_id']) ? trim($_POST['user_id']) : ''; + $person = isset($_POST['person']) ? trim($_POST['person']) : ''; $category = isset($_POST['category']) ? trim($_POST['category']) : ''; $subject = isset($_POST['subject']) ? trim($_POST['subject']) : ''; $amount = isset($_POST['amount']) ? (float)$_POST['amount'] : 0.0; $payment_method = isset($_POST['payment_method']) ? trim($_POST['payment_method']) : ''; // SQL-Statement vorbereiten - $stmt = $pdo->prepare(" - INSERT INTO entries (date, user_id, category, subject, amount, payment_method) - VALUES (:date, :user_id, :category, :subject, :amount, :payment_method) - "); - $stmt->bindParam(':date', $date); - $stmt->bindParam(':user_id', $date); - $stmt->bindParam(':category', $category); - $stmt->bindParam(':subject', $subject); - $stmt->bindParam(':amount', $amount); - $stmt->bindParam(':payment_method', $payment_method); + try { + $stmt = $pdo->prepare(" + INSERT INTO entries (date, user_id, person, category, subject, amount, payment_method) + VALUES (:date, :user_id, :person, :category, :subject, :amount, :payment_method) + "); + $stmt->bindParam(':date', $date); + $stmt->bindParam(':user_id', $user_id); + $stmt->bindParam(':person', $person); + $stmt->bindParam(':category', $category); + $stmt->bindParam(':subject', $subject); + $stmt->bindParam(':amount', $amount); + $stmt->bindParam(':payment_method', $payment_method); + + // Statement ausführen + $stmt->execute(); + $data_saved = "true"; + } catch (PDOException $e) { + // Fehlerbehandlung + $data_saved = "Fehler: "; // . $e->getMessage(); + } - // Statement ausführen - $stmt->execute(); } // Aktuelles Datum im Format YYYY-MM-DD erzeugen @@ -56,6 +64,12 @@ if (!empty($_POST)) { // $_SERVER['REQUEST_METHOD'] === 'POST') { + "; ?> + +
+ Data +
+
@@ -75,13 +89,15 @@ if (!empty($_POST)) { // $_SERVER['REQUEST_METHOD'] === 'POST') {

Neuer Eintrag

- + + - +
+