shopsphere-pro-admin-dashboard / admin-login.html
KhingLeo1's picture
can i add more features you think is going help the system and can i get an admin page where admin can update and edit and delete also can i have a graph chart in the admin page so he or she can follow sale made in the month and amount of money made in a year
3c39635 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login | ShopSphere</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="w-full max-w-md">
<div class="bg-white rounded-lg shadow-xl overflow-hidden">
<div class="p-8">
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-2">ShopSphere Admin</h1>
<p class="text-gray-600">Enter your credentials to access the admin panel</p>
</div>
<form id="loginForm" class="space-y-6">
<div>
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
<input type="text" id="username" required class="input-field w-full" placeholder="admin">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
<input type="password" id="password" required class="input-field w-full" placeholder="••••••••">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label>
</div>
</div>
<div>
<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-md font-medium transition duration-300">
Sign in
</button>
</div>
</form>
</div>
<div class="px-8 py-4 bg-gray-50 border-t border-gray-200 text-center">
<p class="text-sm text-gray-600">
Forgot your password? <a href="#" class="text-indigo-600 hover:text-indigo-500 font-medium">Reset password</a>
</p>
</div>
</div>
</div>
<script src="script.js"></script>
<script>
feather.replace();
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (adminLogin(username, password)) {
window.location.href = '/admin-dashboard.html';
} else {
alert('Invalid credentials. Please try again.');
}
});
</script>
</body>
</html>