party-planner-pro / login.html
hasan9th's picture
ok first add a login page and for beginig it will login with admin and pass admin
4666526 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login | Party Planner Pro πŸŽ‰</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gradient-to-br from-purple-50 to-pink-50 min-h-screen flex items-center justify-center">
<div class="bg-white rounded-xl shadow-lg overflow-hidden w-full max-w-md mx-4">
<div class="p-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-purple-800 mb-2">Party Planner Pro πŸŽ‰</h1>
<p class="text-purple-600">Please login to continue</p>
</div>
<form id="loginForm" class="space-y-6">
<div>
<label for="username" class="block text-sm font-medium text-purple-700 mb-1">Username</label>
<input
type="text"
id="username"
name="username"
required
class="w-full px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
placeholder="Enter username"
>
</div>
<div>
<label for="password" class="block text-sm font-medium text-purple-700 mb-1">Password</label>
<input
type="password"
id="password"
name="password"
required
class="w-full px-4 py-2 border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
placeholder="Enter password"
>
</div>
<button
type="submit"
class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200"
>
Login
</button>
</form>
</div>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'admin' && password === 'admin') {
localStorage.setItem('isAuthenticated', 'true');
window.location.href = 'index.html';
} else {
alert('Invalid credentials. Please try again.');
}
});
</script>
<script>feather.replace();</script>
</body>
</html>