<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Birsa Sichai Kup - Admin Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
:root {
--primary: #2c7873;
--secondary: #6fb98f;
--accent: #ff6b6b;
--dark: #374948;
--light: #f8f9fa;
}
body {
background: linear-gradient(135deg, #e0f7fa, #bbdefb);
min-height: 100vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.sign-in-page {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.sign-in-from {
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
padding: 40px 30px;
background: rgba(255, 255, 255, 0.98);
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.logo-container {
text-align: center;
margin-bottom: 15px;
}
.logo-container img {
width: 125px;
}
.main-title {
font-size: 38px;
font-weight: 700;
margin-top: 10px;
color: #2c7873;
text-align: center;
letter-spacing: 1px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.admin-title {
color: #374948;
text-align: center;
margin-bottom: 20px;
font-weight: 600;
font-size: 20px;
position: relative;
padding-bottom: 15px;
}
.form-group label {
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
display: flex;
align-items: center;
}
.form-group label i {
margin-right: 10px;
color: var(--primary);
}
.form-control {
border: 2px solid #dee2e6;
border-radius: 10px;
padding: 12px 20px;
transition: all 0.3s;
}
.form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 0.2rem rgba(44, 120, 115, 0.15);
}
.btn-primary {
background-color: var(--primary);
border-color: var(--primary);
border-radius: 10px;
padding: 12px 30px;
font-weight: 600;
position: relative;
font-size: 18px;
width: 100%;
margin-top: 15px;
}
.btn-primary:hover {
background-color: #235e59;
border-color: #1f5651;
}
.input-group {
margin-bottom: 5px;
}
.input-group .btn {
border-left: none;
}
.input-group .form-control:focus+.btn {
border-color: var(--primary);
}
.alert {
opacity: 0;
height: 0;
padding: 0;
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 0;
}
.alert.show {
opacity: 1;
height: auto;
padding: 10px 15px;
margin-bottom: 20px;
}
.password-container {
position: relative;
}
.password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--dark);
cursor: pointer;
z-index: 10;
}
.description {
text-align: center;
color: #666;
margin-bottom: 25px;
font-size: 16px;
padding: 0 15px;
}
@media (max-width: 767px) {
.sign-in-from {
padding: 30px 20px;
}
.main-title {
font-size: 32px;
}
.admin-title {
font-size: 18px;
}
}
</style>
</head>
<body>
<!-- Sign in Section -->
<section class="sign-in-page">
<div class="sign-in-from">
<div class="logo-container">
<img
src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Jharkhand_Seal.svg"
alt="Jharkhand Logo">
<h1 class="main-title">Yojana Setu</h1>
<p class="admin-title">Admin Login</p>
</div>
<div class="alert alert-danger" id="lblMsg">
Invalid username or password
</div>
<p class="description">Enter your user id and password to access admin
panel</p>
<form id="frmLogin">
<div class="form-group">
<label for="txtUserName"><i class="fas fa-user"></i> USER
ID</label>
<input type="text" class="form-control" id="txtUserName"
placeholder="Enter user id">
</div>
<div class="form-group">
<label for="txtPassword"><i class="fas fa-lock"></i>
PASSWORD</label>
<div class="password-container">
<input type="password" class="form-control"
id="txtPassword" placeholder="Password">
<button class="password-toggle" type="button"
id="togglePassword">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
<div class="d-inline-block w-100 mt-4">
<button type="button" class="btn btn-primary" id="btnLogin">
Login <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</form>
</div>
</section>
<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
</script>
<script>
$(document).ready(function() {
// Toggle password visibility
$('#togglePassword').click(function() {
const passwordInput = $('#txtPassword');
const type = passwordInput.attr('type') === 'password' ? 'text' :
'password';
passwordInput.attr('type', type);
$(this).find('i').toggleClass('fa-eye fa-eye-slash');
});
// Login button functionality
$('#btnLogin').click(function() {
const username = $('#txtUserName').val();
const password = $('#txtPassword').val();
if (!username || !password) {
showMessage('Please enter both username and password',
'danger');
return;
}
// Show loading state
const originalText = $(this).html();
$(this).html('<span class="spinner-border spinner-border-sm mr-2"
role="status" aria-hidden="true"></span> Authenticating...');
$(this).prop('disabled', true);
// Simulate login process
setTimeout(function() {
if (username === "admin" && password === "admin123") {
// Success - redirect to dashboard
window.location.href = "dashboard.html";
} else {
// Show error
showMessage('Invalid credentials. Please try again.',
'danger');
$('#btnLogin').html(originalText);
$('#btnLogin').prop('disabled', false);
}
}, 800);
});
function showMessage(text, type) {
const alert = $('#lblMsg');
alert.removeClass('alert-danger alert-success').addClass(`alert-$
{type}`);
alert.text(text);
alert.addClass('show');
setTimeout(() => {
alert.removeClass('show');
}, 3000);
}
});
</script>
</body>
</html>
