|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Staff Login</title> |
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> |
|
|
<style> |
|
|
.login-form { |
|
|
max-width: 400px; |
|
|
margin: 0 auto; |
|
|
background-color: |
|
|
border-radius: 10px; |
|
|
padding: 30px; |
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1); |
|
|
} |
|
|
.form-header { |
|
|
border-bottom: 2px solid |
|
|
padding-bottom: 15px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<!-- Navigation --> |
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> |
|
|
<div class="container"> |
|
|
<a class="navbar-brand" href="index.html">SupportHub</a> |
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> |
|
|
<span class="navbar-toggler-icon"></span> |
|
|
</button> |
|
|
<div class="collapse navbar-collapse" id="navbarNav"> |
|
|
<ul class="navbar-nav ms-auto"> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="index.html">Home</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="submit-ticket.php">Submit Ticket</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link" href="track-ticket.php">Track Ticket</a> |
|
|
</li> |
|
|
<li class="nav-item"> |
|
|
<a class="nav-link active" href="login.php">Login</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<!-- Main Content --> |
|
|
<div class="container my-5"> |
|
|
<div class="row justify-content-center"> |
|
|
<div class="col-md-6"> |
|
|
<div class="login-form"> |
|
|
<div class="form-header text-center"> |
|
|
<h2><i class="bi bi-person-circle"></i> Staff Login</h2> |
|
|
<p class="text-muted">Enter your credentials to access the support portal</p> |
|
|
</div> |
|
|
|
|
|
<?php if ($error_message): ?> |
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert"> |
|
|
<?php echo $error_message; ?> |
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> |
|
|
</div> |
|
|
<?php endif; ?> |
|
|
|
|
|
<form method="POST" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"> |
|
|
<div class="mb-3"> |
|
|
<label for="username" class="form-label">Username</label> |
|
|
<input type="text" class="form-control" id="username" name="username" value="<?php echo htmlspecialchars($username); ?>" required> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="password" class="form-label">Password</label> |
|
|
<input type="password" class="form-control" id="password" name="password" required> |
|
|
</div> |
|
|
|
|
|
<div class="d-grid"> |
|
|
<button type="submit" class="btn btn-primary"> |
|
|
<i class="bi bi-box-arrow-in-right"></i> Login |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Footer --> |
|
|
<footer class="bg-dark text-white py-4"> |
|
|
<div class="container"> |
|
|
<div class="text-center"> |
|
|
<p class="mb-0">© 2023 SupportHub. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
