CINXE.COM
Zmeeting.com - Retrieve Password
<!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>Zmeeting.com - Retrieve Password</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> <!-- Font Awesome --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" /> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet" /> <!-- Custom Style --> <link href="/Public/home_style/css/style.css" rel="stylesheet" /> <style> body { background-color: #f0f2f5; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; min-height: 100vh; } .navbar { background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); } .footer { background-color: #ffffff; padding: 20px 0; box-shadow: 0 -2px 4px rgba(0, 0, 0, .08); margin-top: auto; } .forgot-password-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; } .card { border: none; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, .1); width: 100%; max-width: 400px; } .card-header { background-color: #007bff; color: white; border-radius: 15px 15px 0 0 !important; } .btn-primary { background-color: #007bff; border-color: #007bff; } .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; } .zmeeting-text { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 24px; color: #a21919; margin-left: 10px; } .brand-container { display: flex; align-items: center; } </style> </head> <body class="d-flex flex-column h-100"> <!-- Header --> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <div class="brand-container"> <a class="navbar-brand" href="#"> <img src="/Public/home_style/images/logo.jpg" alt="Zmeeting Logo" height="30" /> </a> <div class="zmeeting-text"> Zmeeting </div> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <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="#"><i class="fas fa-home"></i> Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-info-circle"></i> About</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-envelope"></i> Contact</a> </li> </ul> </div> </div> </nav> <div class="container forgot-password-container"> <div class="card"> <div class="card-header text-center py-3"> <h4 class="mb-0"><i class="fas fa-key"></i> Retrieve Password</h4> </div> <div class="card-body p-4"> <div class="alert alert-info" role="alert"> Please fill in the email you registered with. The system will send a reset email. </div> <form action="" method="post" id="forgotPasswordForm"> <div class="mb-3"> <label for="email" class="form-label">Email <em>*</em></label> <input type="email" class="form-control" id="email" name="email" required placeholder="Enter your registered email" /> </div> <div class="d-grid"> <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-paper-plane"></i> Submit</button> </div> </form> </div> </div> </div> <!-- Footer --> <footer class="footer mt-auto py-3"> <div class="container"> <div class="row"> <div class="col text-center"> <p class="mb-0">© 2024 Zmeeting.com. All rights reserved.</p> </div> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- jQuery and Validation Plugin --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script> <script> $(document).ready(function () { $("#forgotPasswordForm").validate({ rules: { email: { required: true, email: true } }, messages: { email: "Please enter the correct email address" } }); }); </script> </body> </html>