FDS2610/FSCash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

viele optische Verbesserungen

Browse source
This commit is contained in:
fds2610 2026-01-08 17:51:25 +01:00
parent 6db37341de
commit 5d0fea6c08
5 changed files with 228 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
html/assets/css/INSTALL.md Normal file
View 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

178
html/assets/css/style.css
View file

@ -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 */
}
}

17
html/assets/js/script.js
View file

@ -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ü

28
html/dashboard.php
View file

@ -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,7 +21,7 @@ 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();
?>
@ -54,10 +53,9 @@ $entries = $stmt->fetchAll();
<thead>
<tr>
<th>Datum</th>
<?php if (!isset($_COOKIE['mobile'])): ?>
<th>Kategorie</th>
<th class="hide-on-mobile">Person</th>
<th class="hide-on-mobile">Kategorie</th>
<th>Zahlweise</th>
<?php endif; ?>
<th>Betreff</th>
<th>Betrag</th>
</tr>
@ -66,10 +64,9 @@ $entries = $stmt->fetchAll();
<?php foreach ($entries as $entry): ?>
<tr>
<td><?= htmlspecialchars($entry['date']) ?></td>
<?php if (!isset($_COOKIE['mobile'])): ?>
<td><?= htmlspecialchars($entry['category'] ?? '') ?></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>
<?php endif; ?>
<td><?= htmlspecialchars($entry['subject']) ?></td>
<td><?= htmlspecialchars($entry['amount']) ?></td>
</tr>
@ -81,6 +78,11 @@ $entries = $stmt->fetchAll();
<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>

34
html/new_entry.php
View file

@ -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,22 +17,24 @@ 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
try {
$stmt = $pdo->prepare("
INSERT INTO entries (date, user_id, category, subject, amount, payment_method)
VALUES (:date, :user_id, :category, :subject, :amount, :payment_method)
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', $date);
$stmt->bindParam(':user_id', $user_id);
$stmt->bindParam(':person', $person);
$stmt->bindParam(':category', $category);
$stmt->bindParam(':subject', $subject);
$stmt->bindParam(':amount', $amount);
@ -40,6 +42,12 @@ if (!empty($_POST)) { // $_SERVER['REQUEST_METHOD'] === 'POST') {
// Statement ausführen
$stmt->execute();
$data_saved = "true";
} catch (PDOException $e) {
// Fehlerbehandlung
$data_saved = "Fehler: "; // . $e->getMessage();
}
}
// 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>