mirror of
https://github.com/LeRoid-hub/Bookholder-WEB.git
synced 2025-01-31 03:14:57 +00:00
72 lines
2.1 KiB
HTML
72 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Bookholder</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/css/master.css">
|
||
|
|
</head>
|
||
|
|
<body class="flex items-center justify-center h-screen bg-gray-100">
|
||
|
|
<div class="bg-white p-6 rounded-lg shadow-md w-80">
|
||
|
|
<!-- Title -->
|
||
|
|
<h1 class="text-2xl font-bold text-center text-gray-800 mb-6">Bookholder</h1>
|
||
|
|
|
||
|
|
<form id="loginForm">
|
||
|
|
<div class="mb-4">
|
||
|
|
<label for="username" class="block text-gray-700 font-bold mb-2">Username</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="username"
|
||
|
|
name="username"
|
||
|
|
class="w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-black"
|
||
|
|
placeholder="Enter your username"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="mb-4">
|
||
|
|
<label for="password" class="block text-gray-700 font-bold mb-2">Password</label>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
id="password"
|
||
|
|
name="password"
|
||
|
|
class="w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-black"
|
||
|
|
placeholder="Enter your password"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="px-4 py-2 text-black border border-black rounded-lg hover:bg-gray-200"
|
||
|
|
onclick="register()"
|
||
|
|
>
|
||
|
|
Register
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="px-4 py-2 text-white bg-black rounded-lg hover:bg-gray-800"
|
||
|
|
onclick="login()"
|
||
|
|
>
|
||
|
|
Login
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// JavaScript Functions
|
||
|
|
function login() {
|
||
|
|
const username = document.getElementById('username').value;
|
||
|
|
const password = document.getElementById('password').value;
|
||
|
|
|
||
|
|
if (username && password) {
|
||
|
|
alert(`Logging in with\nUsername: ${username}\nPassword: ${password}`);
|
||
|
|
} else {
|
||
|
|
alert('Please fill in both fields.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function register() {
|
||
|
|
window.location.href = '/register';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|