update header styling, add searchbar and implement it on every page
This commit is contained in:
Eric Blommel
@@ -29,7 +29,7 @@ body {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 50;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
@@ -100,7 +100,7 @@ body {
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
width: calc(100% - 280px);
|
||||
padding-top: 5rem;
|
||||
padding-top: 3rem;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -287,15 +287,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
padding: 0.75rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Add floating animation for icons */
|
||||
@keyframes float {
|
||||
|
||||
@@ -28,7 +28,7 @@ body {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 50;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
@@ -187,6 +187,16 @@ body {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Active nav link style */
|
||||
@@ -209,12 +219,3 @@ body {
|
||||
left: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
padding: 0.75rem;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -27,7 +27,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 45;
|
||||
z-index: 30;
|
||||
transition: opacity 0.3s ease;
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
126
webseite/header.php
Normal file
126
webseite/header.php
Normal file
@@ -0,0 +1,126 @@
|
||||
<!-- header.php -->
|
||||
<nav class="fixed top-0 w-full right-0 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">
|
||||
<!-- Menu Toggle Button -->
|
||||
<div class="flex items-center space-x-4">
|
||||
|
||||
<button class="menu-toggle hidden text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Login/Logout Button -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Search Bar TODO: Implement search functionality -->
|
||||
<form action="search.php" method="GET" class="relative flex items-center">
|
||||
<input type="text" name="query" placeholder="Suche..."
|
||||
class="w-64 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--primary-color)] pl-10">
|
||||
<i class="fas fa-search absolute left-3 text-gray-400"></i>
|
||||
</form>
|
||||
|
||||
<?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" class="bg-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
</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-white text-[var(--primary-color)] border-2 border-[var(--primary-color)] w-10 h-10 flex items-center justify-center rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition duration-300">
|
||||
<i class="fas fa-sign-in-alt"></i>
|
||||
</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">×
|
||||
</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
|
||||
}
|
||||
?>
|
||||
|
||||
<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>
|
||||
@@ -16,16 +16,7 @@
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<?php include 'header.php'; ?>
|
||||
|
||||
<div class="content mt-24 max-w-7xl mx-[16px] xl:mx-auto">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-6">Impressum</h1>
|
||||
|
||||
@@ -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">×
|
||||
</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>
|
||||
|
||||
@@ -31,8 +31,9 @@ $topics = $subjectData->topics;
|
||||
|
||||
|
||||
<body class="min-h-screen">
|
||||
<?php include 'header.php'; ?>
|
||||
|
||||
<nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
|
||||
<nav class="sidebar bg-[<?php echo($subjectData->color); ?>] pt-24">
|
||||
<div class="sidebar-header">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
|
||||
@@ -47,15 +48,6 @@ $topics = $subjectData->topics;
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="search-container bg-white">
|
||||
<button class="menu-toggle h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<input type="text" class="search-box p-3 border-2 w-full focus:border-[<?php echo($subjectData->color); ?>]"
|
||||
id="searchInput" placeholder="Suche nach Themen, Übungen oder Hilfe..."
|
||||
oninput="handleSearch()">
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="max-w-7xl mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 gap-8 mb-8">
|
||||
|
||||
@@ -80,13 +72,13 @@ $topics = $subjectData->topics;
|
||||
<h4>Verwandte Themen:</h4>
|
||||
<ul>
|
||||
<?php
|
||||
foreach ($topicData->relatedTopics as $relatedTopicName) {
|
||||
$relatedTopic = $subjectData->topics[$relatedTopicName];
|
||||
if (!isset($relatedTopicName)) {
|
||||
continue;
|
||||
}
|
||||
foreach ($topicData->relatedTopics as $relatedTopicName) {
|
||||
$relatedTopic = $subjectData->topics[$relatedTopicName];
|
||||
if (!isset($relatedTopicName)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
|
||||
<li onclick="event.stopPropagation();" class="border-[<?php echo($subjectData->color); ?>] border-2">
|
||||
<a href='<?php echo("topic.php?subject=$subjectData->id&topic=$relatedTopic->id") ?>'>
|
||||
@@ -95,8 +87,8 @@ $topics = $subjectData->topics;
|
||||
</li>
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
@@ -36,13 +36,10 @@ if (!isset($topicData)) {
|
||||
|
||||
|
||||
<body class="min-h-screen">
|
||||
|
||||
<button class="menu-toggle fixed top-4 left-4 z-50 bg-white h-12 w-12 border-2 p-1 hover:border-[<?php echo($subjectData->color); ?>]">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
<?php include 'header.php'; ?>
|
||||
|
||||
<!-- Left Sidebar -->
|
||||
<nav class="sidebar bg-[<?php echo($subjectData->color); ?>]">
|
||||
<nav class="sidebar bg-[<?php echo($subjectData->color); ?>] pt-24">
|
||||
<div class="sidebar-header">
|
||||
<i class="fas fa-graduation-cap"></i>
|
||||
<h2><?php echo($subjectData->displayName); ?></h2>
|
||||
|
||||
Reference in New Issue
Block a user