137 lines
5.5 KiB
HTML
137 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Xác thực OTP - EuroTile Worker</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<a href="login.html" class="back-button">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="header-title">Xác thực OTP</h1>
|
|
<div style="width: 32px;"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<!-- Icon -->
|
|
<div class="text-center mt-4 mb-4">
|
|
<div style="display: inline-block; width: 80px; height: 80px; background: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<i class="fas fa-shield-alt" style="font-size: 36px; color: white;"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instructions -->
|
|
<div class="text-center mb-4">
|
|
<h2>Nhập mã xác thực</h2>
|
|
<p class="text-muted">Mã OTP đã được gửi đến số điện thoại</p>
|
|
<p class="text-bold text-primary" style="font-size: 16px;">0983 441 099</p>
|
|
</div>
|
|
|
|
<!-- OTP Input -->
|
|
<form action="index.html" class="card">
|
|
<div class="otp-container">
|
|
<input type="text" maxlength="1" class="otp-input" autofocus>
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
<input type="text" maxlength="1" class="otp-input">
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-block mt-3">
|
|
Xác nhận
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Resend OTP -->
|
|
<div class="text-center mt-3">
|
|
<p class="text-small text-muted">
|
|
Không nhận được mã?
|
|
<a href="#" id="resendLink" class="text-muted" style="text-decoration: none; font-weight: 500; cursor: not-allowed;">
|
|
Gửi lại (<span id="countdown">60</span>s)
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Alternative Methods -->
|
|
<div class="card mt-4">
|
|
<h3 class="text-center mb-3">Phương thức xác thực khác</h3>
|
|
<div class="grid grid-2">
|
|
<button class="btn btn-secondary btn-sm">
|
|
<i class="fas fa-comment-dots"></i> SMS
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm">
|
|
<i class="fas fa-phone"></i> Gọi điện
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto focus next input
|
|
const inputs = document.querySelectorAll('.otp-input');
|
|
inputs.forEach((input, index) => {
|
|
input.addEventListener('input', (e) => {
|
|
if (e.target.value && index < inputs.length - 1) {
|
|
inputs[index + 1].focus();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Backspace' && !e.target.value && index > 0) {
|
|
inputs[index - 1].focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Countdown timer for resend OTP
|
|
let countdown = 60;
|
|
const countdownElement = document.getElementById('countdown');
|
|
const resendLink = document.getElementById('resendLink');
|
|
|
|
function startCountdown() {
|
|
const timer = setInterval(() => {
|
|
countdown--;
|
|
countdownElement.textContent = countdown;
|
|
|
|
if (countdown <= 0) {
|
|
clearInterval(timer);
|
|
// Enable resend button
|
|
resendLink.textContent = 'Gửi lại';
|
|
resendLink.className = 'text-primary';
|
|
resendLink.style.cursor = 'pointer';
|
|
resendLink.addEventListener('click', handleResendOTP);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function handleResendOTP(e) {
|
|
e.preventDefault();
|
|
// Reset countdown
|
|
countdown = 60;
|
|
countdownElement.textContent = countdown;
|
|
resendLink.textContent = 'Gửi lại (' + countdown + 's)';
|
|
resendLink.className = 'text-muted';
|
|
resendLink.style.cursor = 'not-allowed';
|
|
resendLink.removeEventListener('click', handleResendOTP);
|
|
|
|
// Simulate sending OTP
|
|
alert('Mã OTP mới đã được gửi!');
|
|
|
|
// Restart countdown
|
|
startCountdown();
|
|
}
|
|
|
|
// Start countdown when page loads
|
|
document.addEventListener('DOMContentLoaded', startCountdown);
|
|
</script>
|
|
</body>
|
|
</html> |