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

erste Version Login Fenster und Mock-Login.php

Browse Source
This commit is contained in:
Safak
2024-12-02 10:20:46 +01:00
parent dbc166ea0a
commit 8c3dda36c1
2 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
webseite/index.php
View File

@@ -29,10 +29,31 @@
<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 Button -->
<button id="loginButton">Login</button>
</div>
</div>
</nav>
<!-- Login Popup -->
<div id="loginPopup" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<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">&times;</button>
<h2 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>
</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>
</div>
<!-- Hero Section -->
<div class="hidden md:block pt-24 px-4">
<div class="max-w-7xl mx-auto">
@@ -100,5 +121,22 @@
</div>
</footer>
<script>
// JavaScript to handle opening and closing of the login popup
document.getElementById('loginButton').addEventListener('click', function() {
document.getElementById('loginPopup').classList.remove('hidden');
});
document.getElementById('closePopupButton').addEventListener('click', function() {
document.getElementById('loginPopup').classList.add('hidden');
});
window.addEventListener('click', function(event) {
if (event.target === document.getElementById('loginPopup')) {
document.getElementById('loginPopup').classList.add('hidden');
}
});
</script>
</body>
</html>