Otp verification code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Verification</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.background {
position: absolute;
width: 60%; /* Wider than the OTP container */
height: 60%; /* Taller than the OTP container */
background-color: #b2e0d4; /* Light blue-green color */
border-radius: 20px; /* Rounded corners */
z-index: -1; /* Behind the main container */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.otp-container {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: left; /* Left-align text */
z-index: 1; /* In front of the background */
width: 300px; /* Fixed width for consistent layout */
}
h1 {
font-size: 24px; /* Smaller size for OTP Verification */
margin-bottom: 10px;
padding-left: 10px; /* Space from left */
}
h2 {
font-size: 12px; /* Smaller size for instructions */
margin: 5px 0 20px;
padding-left: 10px; /* Space from left */
}
.mobile-number {
font-size: 12px; /* Small size for mobile number */
margin-bottom: 20px;
padding-left: 10px; /* Space from left */
}
.otp-input {
width: 30px; /* Smaller input box size */
height: 30px; /* Smaller input box height */
font-size: 16px; /* Adjusted font size for input */
text-align: center;
margin: 0 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.actions {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.resend-otp {
background-color: transparent;
border: none;
color: #007bff;
cursor: pointer;
font-size: 12px; /* Smaller size for resend button */
padding-left: 10px; /* Space from left */
}
.verify-button {
background: linear-gradient(90deg, #8e44ad, #9b59b6);
color: white;
border: none;
padding: 8px 16px; /* Smaller padding */
border-radius: 5px;
font-size: 12px; /* Smaller size for verify button */
cursor: pointer;
}
.verify-button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div class="background"></div> <!-- New background div -->
<div class="otp-container">
<h1>OTP Verification</h1>
<h2>Enter the OTP you received on your mobile number</h2>
<div class="mobile-number">+20 102 2233 444</div>
<div style="padding-left: 10px;"> <!-- Add padding for input container -->
<input type="text" class="otp-input" maxlength="1" oninput="moveToNext(this)" />
<input type="text" class="otp-input" maxlength="1" oninput="moveToNext(this)" />
<input type="text" class="otp-input" maxlength="1" oninput="moveToNext(this)" />
<input type="text" class="otp-input" maxlength="1" oninput="moveToNext(this)" />
</div>
<div class="actions">
<button class="resend-otp">Resend OTP</button>
<button class="verify-button">Verify Me</button>
</div>
</div>
<script>
function moveToNext(input) {
// Move to the next input if the current input is filled
if (input.value.length >= input.maxLength) {
const nextInput = input.nextElementSibling;
if (nextInput) {
nextInput.focus(); // Focus on the next input
}
}
}
</script>
</body>
</html>
Comments
Post a Comment