243 lines
14 KiB
Plaintext
243 lines
14 KiB
Plaintext
<div class="login-page-wrapper">
|
|
<div class="login-main-container">
|
|
<!-- Medical Illustration Section -->
|
|
<div class="login-illustration-section">
|
|
<!-- Pharmaceutical Manufacturing SVG -->
|
|
<svg class="login-medical-illustration" viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Laboratory Equipment -->
|
|
<rect x="50" y="200" width="300" height="80" rx="10" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
|
|
|
|
<!-- Test Tubes -->
|
|
<rect x="80" y="160" width="12" height="60" rx="6" fill="#67e8f9" />
|
|
<rect x="100" y="155" width="12" height="65" rx="6" fill="#22d3ee" />
|
|
<rect x="120" y="165" width="12" height="55" rx="6" fill="#0891b2" />
|
|
|
|
<!-- Beaker -->
|
|
<path d="M180 180 L180 220 L220 220 L220 180 L210 180 L210 170 L190 170 L190 180 Z" fill="rgba(255,255,255,0.2)" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
|
|
<ellipse cx="200" cy="200" rx="15" ry="8" fill="#67e8f9" opacity="0.7" />
|
|
|
|
<!-- Microscope -->
|
|
<rect x="260" y="180" width="20" height="40" rx="4" fill="rgba(255,255,255,0.3)" />
|
|
<circle cx="270" cy="170" r="12" fill="rgba(255,255,255,0.4)" />
|
|
<rect x="275" y="155" width="3" height="20" fill="rgba(255,255,255,0.5)" />
|
|
|
|
<!-- Medicine Pills -->
|
|
<circle cx="320" cy="170" r="8" fill="#67e8f9" />
|
|
<circle cx="340" cy="175" r="8" fill="#22d3ee" />
|
|
<circle cx="325" cy="190" r="8" fill="#0891b2" />
|
|
|
|
<!-- DNA Helix -->
|
|
<path d="M60 80 Q80 60, 100 80 T140 80" stroke="#67e8f9" stroke-width="4" fill="none" opacity="0.6" />
|
|
<path d="M60 100 Q80 120, 100 100 T140 100" stroke="#22d3ee" stroke-width="4" fill="none" opacity="0.6" />
|
|
<circle cx="70" cy="80" r="3" fill="#67e8f9" />
|
|
<circle cx="90" cy="100" r="3" fill="#22d3ee" />
|
|
<circle cx="110" cy="80" r="3" fill="#67e8f9" />
|
|
<circle cx="130" cy="100" r="3" fill="#22d3ee" />
|
|
|
|
<!-- Molecular Structure -->
|
|
<circle cx="280" cy="90" r="8" fill="#67e8f9" />
|
|
<circle cx="300" cy="70" r="6" fill="#22d3ee" />
|
|
<circle cx="320" cy="90" r="8" fill="#0891b2" />
|
|
<circle cx="300" cy="110" r="6" fill="#67e8f9" />
|
|
<line x1="280" y1="90" x2="300" y2="70" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
|
|
<line x1="300" y1="70" x2="320" y2="90" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
|
|
<line x1="320" y1="90" x2="300" y2="110" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
|
|
<line x1="300" y1="110" x2="280" y2="90" stroke="rgba(255,255,255,0.5)" stroke-width="2" />
|
|
|
|
<!-- Factory/Manufacturing -->
|
|
<rect x="150" y="120" width="100" height="60" rx="5" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="2" />
|
|
<rect x="170" y="100" width="15" height="40" rx="2" fill="rgba(255,255,255,0.2)" />
|
|
<rect x="200" y="95" width="15" height="45" rx="2" fill="rgba(255,255,255,0.2)" />
|
|
<rect x="230" y="105" width="15" height="35" rx="2" fill="rgba(255,255,255,0.2)" />
|
|
|
|
<!-- Smoke/Steam -->
|
|
<circle cx="177" cy="85" r="4" fill="rgba(255,255,255,0.3)" />
|
|
<circle cx="175" cy="75" r="3" fill="rgba(255,255,255,0.2)" />
|
|
<circle cx="207" cy="80" r="4" fill="rgba(255,255,255,0.3)" />
|
|
<circle cx="210" cy="70" r="3" fill="rgba(255,255,255,0.2)" />
|
|
<circle cx="237" cy="90" r="4" fill="rgba(255,255,255,0.3)" />
|
|
<circle cx="240" cy="80" r="3" fill="rgba(255,255,255,0.2)" />
|
|
</svg>
|
|
|
|
<!-- Features Grid -->
|
|
<div class="login-features-grid">
|
|
<div class="login-feature-item">
|
|
<i class="fas fa-clipboard-check"></i>
|
|
<span>Streamlined Process</span>
|
|
</div>
|
|
<div class="login-feature-item">
|
|
<i class="fas fa-users-cog"></i>
|
|
<span>Centralized System</span>
|
|
</div>
|
|
<div class="login-feature-item">
|
|
<i class="fas fa-chart-line"></i>
|
|
<span>Real-time Tracking</span>
|
|
</div>
|
|
<div class="login-feature-item">
|
|
<i class="fas fa-shield-heart"></i>
|
|
<span>Secure & Compliant</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Form Section -->
|
|
<div class="login-form-container">
|
|
<div class="login-form-header">
|
|
@* <div class="login-company-logo">
|
|
<img src="~/Content/Common/LLILogoEdited.png" alt="Lloyd Laboratories Logo" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
|
<i class="fas fa-flask" style="display: none;"></i>
|
|
</div> *@
|
|
<div class="login-company-logo">
|
|
<i class="fas fa-flask"></i>
|
|
</div>
|
|
<div class="login-company-name">Lloyd Laboratories</div>
|
|
<div class="login-system-subtitle">Centralized Non-Inventory Purchasing System</div>
|
|
</div>
|
|
|
|
<div class="login-form-body">
|
|
<form id="loginForm">
|
|
<div class="login-form-group">
|
|
<label for="UserNameLogin" class="login-form-label">Username</label>
|
|
<div class="login-input-wrapper">
|
|
<i class="fas fa-user login-input-icon"></i>
|
|
<input type="text" id="UserNameLogin" class="login-form-control" placeholder="Enter your username" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-form-group">
|
|
<label for="PasswordLogin" class="login-form-label">Password</label>
|
|
<div class="login-input-wrapper">
|
|
<i class="fas fa-lock login-input-icon"></i>
|
|
<input type="password" id="PasswordLogin" class="login-form-control" placeholder="Enter your password" required>
|
|
<i class="fas fa-eye login-toggle-password" id="togglePassword"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-form-group">
|
|
<label for="captchaCode" class="login-form-label">Security Verification</label>
|
|
<div class="login-captcha-section">
|
|
<div class="login-captcha-image">
|
|
<img id="captchaImage" src="/Home/GetCaptcha" alt="CAPTCHA" style="max-width: 100%; height: 40px;" />
|
|
</div>
|
|
<button type="button" class="login-refresh-btn" onclick="refreshCaptcha()" id="refresh">
|
|
<i class="fas fa-sync-alt"></i>
|
|
</button>
|
|
</div>
|
|
<div class="login-input-wrapper">
|
|
<i class="fas fa-shield-alt login-input-icon"></i>
|
|
<input type="text" id="captchaCode" name="captchaCode" class="login-form-control" placeholder="Enter CAPTCHA code" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-forgot-password">
|
|
<a href="#" data-bs-toggle="modal" data-bs-target="#sendOTPModal">Forgot password?</a>
|
|
</div>
|
|
|
|
<button type="button" class="login-btn-primary" id="BtnLogin" onclick="login()">
|
|
<i class="fas fa-sign-in-alt me-2"></i>
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer positioned at bottom -->
|
|
<div class="login-page-footer">
|
|
© 2025 - Lloyd Laboratories Inc. Purchasing(Non-Inventory) - <a href="#">Privacy</a>
|
|
</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>
|