Safak/SWE
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

update header styling, add searchbar and implement it on every page

Browse Source
This commit is contained in:
Eric Blommel
2024-12-06 20:56:23 +01:00
parent 3f74d1a894
commit 0646b382ed
8 changed files with 154 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
webseite/index.php
View File

@@ -21,71 +21,7 @@
<div class="blob absolute w-96 h-96 bg-sky-300/30 bottom-0 right-0"></div>
</div>
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-white/80 backdrop-blur-lg shadow-sm z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<a href="index.php" class="flex items-center">
<img src="assets/images/hsgg-logo.png" alt="HSGG Logo" class="h-10 mr-3">
<span class="text-2xl font-bold text-[var(--primary-color)]">HSGG</span>
</a>
<!-- Login/Logout Button -->
<div class="flex items-center space-x-4">
<?php
require_once("classes/User.php");
session_start();
if (isset($_SESSION['user']) && $_SESSION['user']->isLoggedIn()) {
// Logout Button
echo '<form id="logoutForm" action="logout.php" method="POST" style="display:inline;">
<button id="logoutButton" type="submit" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Logout</button>
</form>';
// Username Dropdown - Weitere Funktionen implementierbar
echo '<div class="relative">
<button id="userDropdownButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">' . htmlspecialchars($_SESSION['user']->getUsername()) . '</button>
</div>';
} else {
// Login Button
echo '<button id="loginButton" class="bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">Login</button>';
}
?>
</div>
</div>
</div>
</nav>
<!-- Login Popup | erscheint nur, wenn kein Nutzer eingeloggt ist -->
<?php
if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
?>
<div id="loginPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50" role="dialog"
aria-labelledby="loginTitle" aria-hidden="true">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-sm relative">
<button id="closePopupButton" class="absolute top-2 right-2 text-gray-500 text-xl"
aria-label="Close Login Popup">&times;
</button>
<h2 id="loginTitle" class="text-2xl font-bold mb-6 text-center">Login</h2>
<form id="loginForm" action="login.php" method="POST">
<div class="mb-4">
<label for="username" class="block text-gray-700 mb-2">Benutzername:</label>
<input type="text" id="username" name="username" class="w-full p-2 border rounded-lg" required
autofocus>
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 mb-2">Passwort:</label>
<input type="password" id="password" name="password" class="w-full p-2 border rounded-lg" required>
</div>
<button type="submit"
class="w-full bg-[var(--primary-color)] text-white px-4 py-2 rounded-lg hover:bg-[var(--accent-color)] transition duration-300">
Login
</button>
</form>
<div id="errorMessage" class="hidden text-red-500 text-center mt-4">Falscher Benutzername oder Passwort</div>
</div>
</div>
<?php
}
?>
<?php include 'header.php'; ?>
<!-- Hero Section -->
<div class="hidden md:block pt-24 px-4">
@@ -154,46 +90,5 @@ if (!isset($_SESSION['user']) || !$_SESSION['user']->isLoggedIn()) {
</div>
</footer>
<script>
// JavaScript to handle opening and closing of the login popup
const loginButton = document.getElementById('loginButton');
const loginPopup = document.getElementById('loginPopup');
const closePopupButton = document.getElementById('closePopupButton');
const usernameInput = document.getElementById('username');
const errorMessage = document.getElementById('errorMessage');
loginButton.addEventListener('click', function () {
loginPopup.classList.remove('hidden');
usernameInput.focus(); // Set focus to username field
});
closePopupButton.addEventListener('click', function () {
loginPopup.classList.add('hidden');
});
window.addEventListener('click', function (event) {
if (event.target === loginPopup) {
loginPopup.classList.add('hidden');
}
});
// Schließe Popup mit ESC
document.addEventListener('keydown', function (event) {
if (event.key === "Escape" && !loginPopup.classList.contains('hidden')) {
loginPopup.classList.add('hidden');
}
});
// Zeige Fehlermeldung beim Login an
window.addEventListener('DOMContentLoaded', (event) => {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('error') && urlParams.get('error') === '1') {
loginPopup.classList.remove('hidden');
errorMessage.classList.remove('hidden');
}
});
</script>
</body>
</html>