WD - Dev
241 lines
5.9 KiB
PHP
241 lines
5.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Verifikasi Pelanggan</title>
|
|
|
|
<link rel="icon" href="https://manjapro.net/dist/img/logo-sm.png" type="image/gif" />
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
|
|
<!-- INTER FONT -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../style.css">
|
|
<style>
|
|
|
|
/* ================= GLOBAL ================= */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #f5f6f8;
|
|
font-size: 14.5px;
|
|
color: #2d2d2d;
|
|
}
|
|
|
|
.container {
|
|
max-width: 460px;
|
|
}
|
|
|
|
/* ================= COLOR ================= */
|
|
.text-orange { color: #ff7a00; }
|
|
|
|
/* ================= CARD ================= */
|
|
.card {
|
|
border-radius: 16px;
|
|
border: none;
|
|
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* ================= HEADER ================= */
|
|
.header-gradient {
|
|
background: linear-gradient(135deg, #ff7a00, #ff9a3c);
|
|
color: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 25px rgba(255,122,0,0.25);
|
|
}
|
|
|
|
/* ================= OTP INPUT ================= */
|
|
.otp-input {
|
|
width: 58px;
|
|
height: 58px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
border-radius: 12px;
|
|
border: 1px solid #ddd;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.otp-input:focus {
|
|
border-color: #ff7a00;
|
|
box-shadow: 0 0 0 3px rgba(255,122,0,0.15);
|
|
outline: none;
|
|
}
|
|
|
|
/* ================= BUTTON ================= */
|
|
.btn-orange {
|
|
background: linear-gradient(135deg, #ff7a00, #ff9a3c);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
transition: 0.2s ease;
|
|
}
|
|
|
|
.btn-orange:hover {
|
|
background: linear-gradient(135deg, #e66b00, #ff7a00);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-orange:disabled {
|
|
background: #ccc;
|
|
}
|
|
|
|
/* ================= ICON ================= */
|
|
.icon-box {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: #fff3e6;
|
|
color: #ff7a00;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ================= MOBILE ================= */
|
|
@media (max-width: 576px) {
|
|
|
|
body {
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.container {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
}
|
|
|
|
.header-gradient {
|
|
padding: 18px !important;
|
|
}
|
|
|
|
.otp-input {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.btn-orange {
|
|
padding: 12px !important;
|
|
font-size: 14px;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container py-4">
|
|
|
|
<!-- HEADER -->
|
|
<div class="header-gradient p-4 mb-3 text-center">
|
|
<div class="small opacity-75">Verifikasi Pelanggan</div>
|
|
<h5 class="mb-0 fw-semibold">Masukkan 4 Digit Terakhir</h5>
|
|
</div>
|
|
|
|
<!-- CARD -->
|
|
<div class="card">
|
|
<div class="card-body p-4 text-center">
|
|
|
|
<div class="icon-box mb-3">
|
|
<i class="bi bi-shield-lock" style="font-size:28px;"></i>
|
|
</div>
|
|
|
|
<p class="text-muted mb-4">
|
|
Masukkan <b>4 digit terakhir nomor WhatsApp</b> yang terdaftar
|
|
</p>
|
|
|
|
<form method="POST" onsubmit="return combineOTP()">
|
|
|
|
<input type="hidden" name="otp" id="otp">
|
|
<input type="hidden" name="token" value="<?= $_GET['token'] ?? '' ?>">
|
|
|
|
<div class="d-flex justify-content-center gap-2 mb-4">
|
|
|
|
<input type="text" maxlength="1"
|
|
class="otp-input"
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
oninput="moveNext(this,0)">
|
|
|
|
<input type="text" maxlength="1"
|
|
class="otp-input"
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
oninput="moveNext(this,1)">
|
|
|
|
<input type="text" maxlength="1"
|
|
class="otp-input"
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
oninput="moveNext(this,2)">
|
|
|
|
<input type="text" maxlength="1"
|
|
class="otp-input"
|
|
inputmode="numeric"
|
|
pattern="[0-9]*"
|
|
oninput="moveNext(this,3)">
|
|
|
|
</div>
|
|
|
|
<button id="btnSubmit" type="submit"
|
|
class="btn btn-orange w-100 py-3"
|
|
disabled>
|
|
<i class="bi bi-unlock me-1"></i> Verifikasi
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const inputs = document.querySelectorAll('.otp-input');
|
|
const btn = document.getElementById('btnSubmit');
|
|
|
|
function moveNext(el, index) {
|
|
el.value = el.value.replace(/[^0-9]/g, '');
|
|
|
|
if (el.value && index < inputs.length - 1) {
|
|
inputs[index + 1].focus();
|
|
}
|
|
|
|
checkFilled();
|
|
}
|
|
|
|
function checkFilled() {
|
|
let filled = true;
|
|
inputs.forEach(i => {
|
|
if (!i.value) filled = false;
|
|
});
|
|
|
|
btn.disabled = !filled;
|
|
}
|
|
|
|
function combineOTP() {
|
|
let code = '';
|
|
inputs.forEach(i => code += i.value);
|
|
document.getElementById('otp').value = code;
|
|
return true;
|
|
}
|
|
|
|
/* BACKSPACE SUPPORT */
|
|
inputs.forEach((input, index) => {
|
|
input.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Backspace' && !input.value && index > 0) {
|
|
inputs[index - 1].focus();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |