Yatmesh
216 lines
9.4 KiB
HTML
216 lines
9.4 KiB
HTML
<!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>
|