V001: Login UI screen using the phonenumber
This commit is contained in:
Yatmesh
+215
@@ -0,0 +1,215 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="pragma" content="no-cache" />
|
||||
<meta http-equiv="expires" content="-1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Bhaktivedanta Hospital Wi-Fi - Log in</title>
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
textarea,input,select {
|
||||
background-color: #FDFBFB;
|
||||
border: 1px solid #BBBBBB;
|
||||
padding: 2px;
|
||||
margin: 1px;
|
||||
font-size: 18px;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
label{
|
||||
font-size:18px;
|
||||
color:#ffffff;
|
||||
}
|
||||
|
||||
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
|
||||
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
|
||||
img {border: none;}
|
||||
|
||||
#heading{
|
||||
color:#ee9736 !important;
|
||||
text-align:center;
|
||||
font-size: 42px !important;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hospital-logo-wrap{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.wrap{
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body style="background-image: linear-gradient(180deg, rgba(19,28,64,0.62), rgba(19,28,64,0.72)), url('img/background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; width: 100%; height:100%">
|
||||
<br>
|
||||
<h1 id="heading">Welcome to Bhaktivedanta Hospital</h1>
|
||||
<!-- <p style="text-align:center;color:#eeeeee;font-size:16px;margin-top:-10px;">Complimentary Wi-Fi for Patients & Visitors</p> -->
|
||||
|
||||
<!-- $(if chap-id)-->
|
||||
<form name="sendin" action="$(link-login-only)" method="post" style="display:none">
|
||||
<input type="hidden" name="username" />
|
||||
<input type="hidden" name="password" />
|
||||
<input type="hidden" name="dst" value="$(link-orig)" />
|
||||
<input type="hidden" name="popup" value="true" />
|
||||
</form>
|
||||
<script src="/md5.js"></script>
|
||||
<script>
|
||||
function doLogin() {
|
||||
document.sendin.username.value = document.login.username.value;
|
||||
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
|
||||
document.sendin.submit();
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<!--$(endif)-->
|
||||
<div class="ie-fixMinHeight">
|
||||
<div class="main">
|
||||
<div class="wrap animated fadeIn">
|
||||
<form name="login" action="$(link-login-only)" method="post" $(if chap-id) onSubmit="return doLogin()" $(endif)>
|
||||
<input type="hidden" name="dst" value="$(link-orig)" />
|
||||
<input type="hidden" name="popup" value="true" />
|
||||
|
||||
<div class="hospital-logo-wrap">
|
||||
<a href="#" target="_blank" style="border: none;"><img src="img/logo.jpg" alt="Bhaktivedanta Hospital" width="90" height="90" style="border-radius:50%;border:3px solid #2c3c7b;" /></a>
|
||||
<!-- <div style="color:#ffffff;font-size:20px;margin-top:8px;letter-spacing:1px;">BHAKTIVEDANTA HOSPITAL</div> -->
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<!-- STEP 1: phone number entry -->
|
||||
<div id="step-phone">
|
||||
<label>
|
||||
<img class="ico" src="img/phone.svg" alt="#" />
|
||||
<input id="phone-input" name="username" type="text" inputmode="numeric" pattern="[0-9]{10}" maxlength="10" value="" placeholder="Mobile Number" required
|
||||
onkeypress="if(event.key==='Enter'){event.preventDefault();requestOtp();}"
|
||||
oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10);" />
|
||||
</label>
|
||||
|
||||
<div style="display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;margin-top:10px;font-size:15px;">
|
||||
<input id="terms-checkbox" type="checkbox" value="checkbox" style="width:18px;height:18px;margin:0;" required name="terms" />
|
||||
<label for="terms-checkbox" style="color:#ffffff;font-size:15px;margin:0;"><b>I Agree to the</b></label>
|
||||
<a href="Guestpolicy.html" style="color: #e08a6f; font-size:15px;">Terms and Conditions</a>
|
||||
</div>
|
||||
|
||||
<input type="button" value="Get OTP" onclick="requestOtp()"
|
||||
style="border-radius: 8px;color: #2c3c7b; width: 330px; height: 35px; outline: none; background-color: #ee9736; justified-content:center; font-size: 22px; font-weight:bold; margin-top:14px; cursor:pointer;" />
|
||||
</div>
|
||||
|
||||
<!-- STEP 2: OTP entry + login -->
|
||||
<div id="step-otp" style="display:none;">
|
||||
<p style="color:#eeeeee;font-size:15px;margin-bottom:10px;">
|
||||
OTP sent to <b id="masked-number"></b>
|
||||
<!-- · <a href="#" onclick="backToPhone();return false;" style="color:#ee9736;text-decoration:underline;font-size:14px;">Change number</a> -->
|
||||
</p>
|
||||
|
||||
<label>
|
||||
<img class="ico" src="img/password.svg" alt="#" />
|
||||
<input id="otp-input" name="password" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" placeholder="Enter OTP" />
|
||||
</label>
|
||||
|
||||
<p style="margin-top:-4px;">
|
||||
<a href="#" id="resendLink" onclick="resendOtp();return false;" style="color:#ee9736;text-decoration:underline;font-size:14px;">Resend OTP</a>
|
||||
<span id="timer" style="color:#eeeeee;font-size:14px;"></span>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<input id="loginBtn" disabled style="border-radius: 8px;color: #2c3c7b; width: 330px; height: 35px; outline: none; background-color: #ee9736; justified-content:center; font-size: 25px; font-weight:bold; opacity:0.5;" type="submit" value="Login" />
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<br><br>
|
||||
<div align="center">
|
||||
<a href="https://thecaoffice.com/" target="_blank" style="color: #c1c1c1; font-size: 15px">Powered by TheCAOffice</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br><br><br>
|
||||
|
||||
<script>
|
||||
var resendTimer;
|
||||
|
||||
function requestOtp() {
|
||||
var phone = document.getElementById('phone-input').value;
|
||||
if (phone.length < 10) {
|
||||
alert('Please enter all 10 digits of your mobile number');
|
||||
return;
|
||||
}
|
||||
if (!/^[0-9]{10}$/.test(phone)) {
|
||||
alert('Please enter a valid 10-digit mobile number');
|
||||
return;
|
||||
}
|
||||
if (!document.getElementById('terms-checkbox').checked) {
|
||||
alert('Please agree to the Terms and Conditions to continue');
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: replace this block with a real call to your OTP/SMS provider, e.g.
|
||||
// fetch('https://your-otp-api.example.com/send', {
|
||||
// method: 'POST',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// body: JSON.stringify({ mobile: phone })
|
||||
// }).then(...);
|
||||
// For now we just move to the OTP screen without actually sending an SMS.
|
||||
|
||||
document.getElementById('masked-number').innerText = phone.slice(0, 2) + 'XXXXXX' + phone.slice(-2);
|
||||
document.getElementById('step-phone').style.display = 'none';
|
||||
document.getElementById('step-otp').style.display = 'block';
|
||||
document.getElementById('loginBtn').disabled = false;
|
||||
document.getElementById('loginBtn').style.opacity = '1';
|
||||
document.getElementById('otp-input').focus();
|
||||
startResendTimer();
|
||||
}
|
||||
|
||||
function backToPhone() {
|
||||
clearInterval(resendTimer);
|
||||
document.getElementById('step-otp').style.display = 'none';
|
||||
document.getElementById('step-phone').style.display = 'block';
|
||||
document.getElementById('loginBtn').disabled = true;
|
||||
document.getElementById('loginBtn').style.opacity = '0.5';
|
||||
document.getElementById('otp-input').value = '';
|
||||
document.getElementById('phone-input').focus();
|
||||
}
|
||||
|
||||
function resendOtp() {
|
||||
var phone = document.getElementById('phone-input').value;
|
||||
|
||||
// TODO: replace this block with a real call to your OTP/SMS provider
|
||||
// to resend the OTP to `phone`, same as in requestOtp() above.
|
||||
|
||||
startResendTimer();
|
||||
}
|
||||
|
||||
function startResendTimer() {
|
||||
var seconds = 30;
|
||||
var resendLink = document.getElementById('resendLink');
|
||||
var timerSpan = document.getElementById('timer');
|
||||
resendLink.style.pointerEvents = 'none';
|
||||
resendLink.style.opacity = '0.5';
|
||||
clearInterval(resendTimer);
|
||||
timerSpan.innerText = '(' + seconds + 's)';
|
||||
resendTimer = setInterval(function () {
|
||||
seconds--;
|
||||
timerSpan.innerText = '(' + seconds + 's)';
|
||||
if (seconds <= 0) {
|
||||
clearInterval(resendTimer);
|
||||
resendLink.style.pointerEvents = 'auto';
|
||||
resendLink.style.opacity = '1';
|
||||
timerSpan.innerText = '';
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user