215 lines
11 KiB
Plaintext
215 lines
11 KiB
Plaintext
<div class="login-page-wrapper">
|
|
|
|
<div class="lp-orb"></div>
|
|
<div class="lp-orb"></div>
|
|
<div class="lp-orb"></div>
|
|
<div class="lp-orb"></div>
|
|
|
|
<div style="width:100%;max-width:820px;position:relative;z-index:2;">
|
|
<div class="lp-card">
|
|
|
|
<!-- Left -->
|
|
<div class="lp-left">
|
|
<div class="lp-molecule">
|
|
<div class="lp-mol-ring"></div>
|
|
<div class="lp-mol-center"></div>
|
|
<div class="lp-mol-dot"></div>
|
|
<div class="lp-mol-dot"></div>
|
|
<div class="lp-mol-dot"></div>
|
|
<div class="lp-mol-dot"></div>
|
|
</div>
|
|
|
|
<div class="lp-brand">
|
|
<div class="lp-brand-icon">⚗️</div>
|
|
<div class="lp-brand-name">Lloyd Laboratories</div>
|
|
<div class="lp-brand-sub">Centralized Non-Inventory<br>Purchasing System</div>
|
|
</div>
|
|
|
|
<div class="lp-stats">
|
|
<div class="lp-stat">
|
|
<div class="lp-stat-num">99%</div>
|
|
<div class="lp-stat-lbl">Uptime</div>
|
|
</div>
|
|
<div class="lp-stat">
|
|
<div class="lp-stat-num">24/7</div>
|
|
<div class="lp-stat-lbl">Access</div>
|
|
</div>
|
|
<div class="lp-stat">
|
|
<div class="lp-stat-num">SSL</div>
|
|
<div class="lp-stat-lbl">Secured</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lp-features">
|
|
<div class="lp-feat">
|
|
<i class="fas fa-clipboard-check"></i>
|
|
<span>Streamlined</span>
|
|
</div>
|
|
<div class="lp-feat">
|
|
<i class="fas fa-users-cog"></i>
|
|
<span>Centralized</span>
|
|
</div>
|
|
<div class="lp-feat">
|
|
<i class="fas fa-chart-line"></i>
|
|
<span>Real-time</span>
|
|
</div>
|
|
<div class="lp-feat">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<span>Secure</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right -->
|
|
<div class="lp-right">
|
|
<div class="lp-form-header">
|
|
<div class="lp-form-title">Welcome Back</div>
|
|
<div class="lp-form-subtitle">Sign in to continue to your dashboard</div>
|
|
</div>
|
|
|
|
<div class="lp-form-body">
|
|
<div class="lp-field">
|
|
<label>Username</label>
|
|
<div class="lp-input-wrap">
|
|
<input type="text" id="UserNameLogin" class="lp-inp" placeholder="Enter your username">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
</div>
|
|
<div class="lp-field">
|
|
<label>Password</label>
|
|
<div class="lp-input-wrap">
|
|
<i class="fas fa-lock lp-left-icon"></i>
|
|
<input type="password"
|
|
id="PasswordLogin"
|
|
class="lp-inp"
|
|
placeholder="Enter your password"
|
|
style="padding-left:42px; padding-right:48px; position:relative; z-index:1; width:100%;">
|
|
<i class="fas fa-eye lp-toggle-pw"
|
|
id="togglePassword"
|
|
onclick="togglePasswordVisibility()"
|
|
style="position:absolute; right:14px; top:50%; transform:translateY(-50%);
|
|
width:20px; height:20px; display:flex; align-items:center;
|
|
justify-content:center; cursor:pointer; z-index:3;
|
|
pointer-events:all; color:#9ca3af; font-size:14px;"></i>
|
|
</div>
|
|
</div>
|
|
<div class="lp-field">
|
|
<label>Security Verification</label>
|
|
<div class="lp-captcha-row">
|
|
<div class="lp-captcha-box">
|
|
<img id="captchaImage" src="/Home/GetCaptcha" alt="CAPTCHA" style="max-width: 100%; height: 40px;" />
|
|
</div>
|
|
<button type="button" class="lp-refresh-btn" onclick="refreshCaptcha()"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
<div class="lp-input-wrap">
|
|
<input type="text" id="captchaCode" name="captchaCode" class="lp-inp" placeholder="Enter CAPTCHA code">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lp-forgot"> <a href="#" data-bs-toggle="modal" data-bs-target="#sendOTPModal">Forgot password?</a></div>
|
|
|
|
<button id="BtnLogin" onclick="login()" class="lp-btn">
|
|
<i class="fas fa-sign-in-alt" id="btnIcon" style="margin-right:8px;"></i>
|
|
<span id="btnText">Sign In</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lp-footer">© 2025 Lloyd Laboratories Inc. — Non-Inventory Purchasing System</div>
|
|
</div>
|
|
</div>
|
|
<!-- Send OTP Modal -->
|
|
<div class="modal fade" id="sendOTPModal" tabindex="-1" aria-labelledby="sendOTPModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div class="title">Email Verification</div>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="sendOTPForm">
|
|
<div class="form-group mb-3">
|
|
<label for="email" class="form-label">Email Address</label>
|
|
<div class="input-wrapper position-relative">
|
|
<i class="fas fa-envelope position-absolute" style="left: 15px; top: 50%; transform: translateY(-50%); color: #64748b;"></i>
|
|
<input type="email" id="email" name="email" class="form-control ps-5" placeholder="Enter your email address" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-3 mb-3">
|
|
<button type="button" id="sendOTP" onclick="validateEmailSendOTP();" class="btn btn-primary">
|
|
<i class="fas fa-paper-plane me-2"></i>Send OTP
|
|
</button>
|
|
<label id="CountLabel" class="mb-0 text-muted"></label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="Otp" class="form-label">OTP Code</label>
|
|
<div class="input-wrapper position-relative">
|
|
<i class="fas fa-key position-absolute" style="left: 15px; top: 50%; transform: translateY(-50%); color: #64748b;"></i>
|
|
<input type="text" id="Otp" name="Otp" readonly class="form-control ps-5" placeholder="Enter OTP code" required>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" id="btnSendOTP" onclick="validateOTP()" disabled class="btn btn-primary">
|
|
<i class="fas fa-check me-2"></i>Verify OTP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Forgot Password Modal -->
|
|
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<div class="title">Reset Password</div>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="forgotPasswordForm">
|
|
<div class="form-group mb-3">
|
|
<label for="emailForgotPassword" class="form-label">Email Address</label>
|
|
<div class="input-wrapper position-relative">
|
|
<i class="fas fa-envelope position-absolute" style="left: 15px; top: 50%; transform: translateY(-50%); color: #64748b;"></i>
|
|
<input type="email" readonly id="emailForgotPassword" name="emailForgotPassword" class="form-control ps-5" placeholder="Your email address" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group mb-3">
|
|
<label for="NewPassword" class="form-label">New Password</label>
|
|
<div class="input-wrapper position-relative">
|
|
<i class="fas fa-lock position-absolute" style="left: 15px; top: 50%; transform: translateY(-50%); color: #64748b;"></i>
|
|
<input type="password" id="NewPassword" name="NewPassword" class="form-control ps-5" placeholder="Enter new password" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="ConfirmPassword" class="form-label">Confirm Password</label>
|
|
<div class="input-wrapper position-relative">
|
|
<i class="fas fa-lock position-absolute" style="left: 15px; top: 50%; transform: translateY(-50%); color: #64748b;"></i>
|
|
<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control ps-5" placeholder="Confirm new password" required>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" onclick="changePassword()" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>Reset Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="overlay" class="overlay" style="display: none;">
|
|
<div id="loader" class="loader"></div>
|
|
</div>
|