viele optische Verbesserungen
This commit is contained in:
fds2610
parent
6db37341de
commit
5d0fea6c08
5 changed files with 228 additions and 139 deletions
10
html/assets/css/INSTALL.md
Normal file
10
html/assets/css/INSTALL.md
Normal file
|
|
@ -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
|
||||
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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ü
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<?php
|
||||
require 'config.php';
|
||||
// if (!isset($_SESSION['user_id'])) {
|
||||
// header('Location: index.php');
|
||||
// exit;
|
||||
//}
|
||||
|
||||
if (!isset($_SESSION['user_id'])) {
|
||||
header('Location: index.php');
|
||||
exit;
|
||||
}
|
||||
// echo $_SESSION['user_id'];
|
||||
error_log($_SESSION['user_id']);
|
||||
|
||||
|
|
@ -22,65 +21,68 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||
}
|
||||
|
||||
// Daten abrufen
|
||||
$stmt = $pdo->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();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FSCash - Dashboard</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FSCash - Dashboard</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<button class="hamburger">☰</button>
|
||||
<ul class="nav-list">
|
||||
<li><a href="dashboard.php">Start</a></li>
|
||||
<li><a href="register.php">Neue User</a></li>
|
||||
<li><a href="menu3.php" style="display: none;">Menüpunkt 3</a></li>
|
||||
<li><a href="menu4.php" style="display: none;">Menüpunkt 4</a></li>
|
||||
<li><a href="menu5.php" style="display: none;">Menüpunkt 5</a></li>
|
||||
</ul>
|
||||
<a href="logout.php" class="logout">Logout</a>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<button class="hamburger">☰</button>
|
||||
<ul class="nav-list">
|
||||
<li><a href="dashboard.php">Start</a></li>
|
||||
<li><a href="register.php">Neue User</a></li>
|
||||
<li><a href="menu3.php" style="display: none;">Menüpunkt 3</a></li>
|
||||
<li><a href="menu4.php" style="display: none;">Menüpunkt 4</a></li>
|
||||
<li><a href="menu5.php" style="display: none;">Menüpunkt 5</a></li>
|
||||
</ul>
|
||||
<a href="logout.php" class="logout">Logout</a>
|
||||
</nav>
|
||||
|
||||
<!-- Tabelle -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<?php if (!isset($_COOKIE['mobile'])): ?>
|
||||
<th>Kategorie</th>
|
||||
<th>Zahlweise</th>
|
||||
<?php endif; ?>
|
||||
<th>Betreff</th>
|
||||
<th>Betrag</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($entries as $entry): ?>
|
||||
<tr>
|
||||
<td><?= htmlspecialchars($entry['date']) ?></td>
|
||||
<?php if (!isset($_COOKIE['mobile'])): ?>
|
||||
<td><?= htmlspecialchars($entry['category'] ?? '') ?></td>
|
||||
<td><?= htmlspecialchars($entry['payment_method'] ?? '') ?></td>
|
||||
<?php endif; ?>
|
||||
<td><?= htmlspecialchars($entry['subject']) ?></td>
|
||||
<td><?= htmlspecialchars($entry['amount']) ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Tabelle -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th class="hide-on-mobile">Person</th>
|
||||
<th class="hide-on-mobile">Kategorie</th>
|
||||
<th>Zahlweise</th>
|
||||
<th>Betreff</th>
|
||||
<th>Betrag</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ($entries as $entry): ?>
|
||||
<tr>
|
||||
<td><?= htmlspecialchars($entry['date']) ?></td>
|
||||
<td class="hide-on-mobile"><?= htmlspecialchars($entry['person'] ?? '') ?></td>
|
||||
<td class="hide-on-mobile"><?= htmlspecialchars($entry['category'] ?? '') ?></td>
|
||||
<td><?= htmlspecialchars($entry['payment_method'] ?? '') ?></td>
|
||||
<td><?= htmlspecialchars($entry['subject']) ?></td>
|
||||
<td><?= htmlspecialchars($entry['amount']) ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Neu-Button -->
|
||||
<a href="new_entry.php" class="btn-new">Neu</a>
|
||||
</div>
|
||||
<!-- Neu-Button -->
|
||||
<a href="new_entry.php" class="btn-new">Neu</a>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/script.js"></script>
|
||||
<script>
|
||||
// Hamburger-Menü-Funktion
|
||||
document.querySelector('.hamburger').addEventListener('click', function() {
|
||||
document.querySelector('.nav-list').classList.toggle('show');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ if (!isset($_SESSION['user_id'])) {
|
|||
header('Location: index.php');
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
$data_saved = "nix";
|
||||
|
||||
// save-Logik
|
||||
if (!empty($_POST)) { // $_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
if (!empty($_POST) && isset($DEBUG)) { // $_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
echo "<h3>Empfangene POST-Daten:</h3>";
|
||||
echo "<ul>";
|
||||
// Durch alle POST-Variablen iterieren
|
||||
|
|
@ -17,29 +17,37 @@ if (!empty($_POST)) { // $_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||
echo "<li><strong>$key:</strong> $escapedValue</li>";
|
||||
}
|
||||
echo "</ul>";
|
||||
|
||||
// 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') {
|
|||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<?php echo "<!-- data_saved:" . $data_saved . " Datum: " . $date . " Datum2: " . $currentDate . " -->"; ?>
|
||||
<?php if ($data_saved != "nix"): ?>
|
||||
<div id="data-notice" class="data-notice">
|
||||
Data
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="container">
|
||||
|
||||
<!-- Navigation -->
|
||||
|
|
@ -75,13 +89,15 @@ if (!empty($_POST)) { // $_SERVER['REQUEST_METHOD'] === 'POST') {
|
|||
<h1>Neuer Eintrag</h1>
|
||||
<form action="new_entry.php" method="post">
|
||||
<input type="date" name="date" value="<?php echo $currentDate; ?>" required>
|
||||
<input type="text" name="user_id" required>
|
||||
<input type="text" name="user_id" hidden>
|
||||
<input type="text" name="person" placeholder="Zahler:In" required>
|
||||
<input type="text" name="category" placeholder="Kategorie">
|
||||
<input type="text" name="subject" placeholder="Betreff" required>
|
||||
<input type="number" step="0.01" name="amount" placeholder="Betrag" required>
|
||||
<input type="number" name="amount" placeholder="Betrag" required>
|
||||
<input type="text" name="payment_method" placeholder="Zahlweise">
|
||||
<button type="submit">Speichern</button>
|
||||
</form>
|
||||
</div>
|
||||
<script src="assets/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue