Responsive Login Portal - Copy this Html, Bootstrap Component to your project
<?php header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); ?> <?php session_start(); // Include the database connection require_once 'db/config.php'; // Initialize error message $error_message = ''; // Set cookies to store username/email for 30 days setcookie("username", $user['username'], time() + (86400 * 30), "/"); // 86400 = 1 day setcookie("email", $user['email'], time() + (86400 * 30), "/"); // Check if the user is already logged in if (isset($_SESSION['username'])) { // Redirect to the appropriate dashboard based on user role if ($_SESSION['role'] === 'admin') { header("Location: dashboard/admin_dashboard.php"); exit; } else { header("Location: dashboard/user_dashboard.php"); exit; } } // Handle form submission if ($_SERVER['REQUEST_METHOD'] === 'POST') { $username_or_email = mysqli_real_escape_string($conn, $_POST['username']); $password = mysqli_real_escape_string($conn, $_POST['password']); // Query to fetch user details $query = "SELECT * FROM users WHERE username = ? OR email = ?"; $stmt = mysqli_prepare($conn, $query); mysqli_stmt_bind_param($stmt, "ss", $username_or_email, $username_or_email); mysqli_stmt_execute($stmt); $result = mysqli_stmt_get_result($stmt); if ($result && mysqli_num_rows($result) > 0) { $user = mysqli_fetch_assoc($result); // Verify the password if (password_verify($password, $user['password'])) { // Set session variables $_SESSION['username'] = $user['username']; $_SESSION['role'] = $user['role']; // Redirect based on user role if ($user['role'] === 'admin') { header("Location: dashboard/admin_dashboard.php"); } else { header("Location: dashboard/user_dashboard.php"); } exit; } else { $error_message = 'Invalid password!'; } } else { $error_message = 'Invalid username/email or password!'; } } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BB Dean Portal</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <link rel="stylesheet" href="../css/form.css"> <link rel="manifest" href="/manifest.json"> <link rel="icon" href="favicon.png" type="image/png"> <meta name="theme-color" content="#29323c"> <script> if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/service-worker.js") .then(() => console.log("Service Worker Registered")) .catch(err => console.error("Service Worker Registration Failed", err)); } </script> </head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); font-family: 'Arial', sans-serif; } .login-container { width: 100%; max-width: 500px; padding: 10px; } .login-card { border-radius: 10px; overflow: hidden; } .card-body { padding: 0px 30px 30px 30px; } .logo img { display: block; margin: 0 auto; width: 80px; height: 80px; object-fit: cover; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .btn-primary { background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); border-color: #007bff; font-size:1.4rem; border: none; font-weight: 700; } .btn-primary:hover, .btn-primary:focus { background-color: #0056b3; border-color: #0056b3; } .current-datetime { color: #555; font-size: 1.2rem; } .form-control { display: block; width: 100%; padding: .75rem .75rem;} .form-label{ font-size: 20px; } .input-group { } </style> <body> <!-- Display an offline message --> <div id="offlineMessage" class="alert alert-danger text-center" style="display:none;"> <strong>You are currently offline. Please check your internet connection.</strong> </div> <div class="login-container d-flex justify-content-center align-items-center"> <div class="card login-card shadow-lg"> <div class="logo text-center pt-3"> <img src="dashboard/uploads/Dean.png" alt="Dean Logo"> </div> <div class="card-body"> <!-- Display error message if exists --> <?php if ($error_message): ?> <div class="alert alert-danger" role="alert"> <?php echo $error_message; ?> </div> <?php endif; ?> <h4 class="text-center pb-3" style="font-size:24px;">Login</h4> <!-- Login Form --> <form method="POST" action=""> <div class="mb-3"> <div class="input-group" style="padding-bottom: 10px;"> <span class="input-group-text"><i class="fas fa-user"></i></span> <input type="text" class="form-control" id="username" name="username" placeholder="Username or Email" required> </div> </div> <div class="mb-3"> <div class="input-group"> <span class="input-group-text"><i class="fas fa-lock"></i></span> <input type="password" class="form-control" id="password" name="password" placeholder="Password" required> </div> </div> <button type="submit" class="btn btn-primary btn-block mt-3 font-weight-bold">Login</button> </form> <div class="mt-3 text-center"> <p><a href="forgot_password.php" class="text-primary" style="font-size:20px; text-decoration: none;">Forgot Password?</a></p> </div> <div class="mt-3 text-center"> <p>Unable to Login? <a href="mailto:support@srichaitanyaschool.site" class="text-primary" style="font-size:16px; text-decoration: none;">Contact the Dean</a> </p> </div> <!-- <div class="current-datetime text-center mt-3"> <p id="current-day" class="mb-0"></p> <p id="current-time"></p> --> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="scripts.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { const usernameField = document.getElementById('username'); const passwordField = document.getElementById('password'); // Set custom validation message for username usernameField.addEventListener('invalid', function () { if (usernameField.validity.valueMissing) { usernameField.setCustomValidity('Please enter your username or email.'); } else { usernameField.setCustomValidity(''); } }); // Set custom validation message for password passwordField.addEventListener('invalid', function () { if (passwordField.validity.valueMissing) { passwordField.setCustomValidity('Please enter your password.'); } else { passwordField.setCustomValidity(''); } }); // Reset custom validity message on input usernameField.addEventListener('input', function () { usernameField.setCustomValidity(''); }); passwordField.addEventListener('input', function () { passwordField.setCustomValidity(''); }); // Function to update the time every second function updateTime() { var now = new Date(); var daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; var day = daysOfWeek[now.getDay()]; var date = now.toLocaleDateString(); // Format time in 12-hour format with AM/PM var options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }; var time = now.toLocaleTimeString([], options); document.getElementById("current-day").innerHTML = day + ", " + date; document.getElementById("current-time").innerHTML = time; } // Call updateTime immediately and then set it to update every second updateTime(); setInterval(updateTime, 1000); // Check if the user is online or offline function checkConnection() { if (!navigator.onLine) { document.getElementById('offlineMessage').style.display = 'block'; } else { document.getElementById('offlineMessage').style.display = 'none'; } } // Call checkConnection on page load and whenever the connection status changes checkConnection(); window.addEventListener('online', checkConnection); window.addEventListener('offline', checkConnection); }); </script> </body> </html>