| <!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> |
| |
