389 lines
22 KiB
PHP
389 lines
22 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>SIGN IN DAN SIGN UP | REKBER</title>
|
|
<!-- icon font awesome -->
|
|
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
|
|
<!-- css -->
|
|
<link rel="stylesheet" href="assets/css/login_register/style.css" />
|
|
<!-- ionicons -->
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
|
<!-- Boxicons -->
|
|
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
|
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
|
<!-- css input dropdown -->
|
|
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
|
<style>
|
|
.select2-container .select2-selection--single {
|
|
border: none;
|
|
background: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.select2-container .select2-selection--single:focus {
|
|
border: none;
|
|
}
|
|
|
|
.select2-container .select2-selection--single .select2-selection__arrow {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.select2-container--default.select2-container--open .select2-selection--single {
|
|
border: none;
|
|
}
|
|
|
|
.select2-results {
|
|
border-bottom: 1px solid #aaa;
|
|
}
|
|
|
|
.select2-results__option {
|
|
padding: 10px;
|
|
color: #333;
|
|
background-color: white;
|
|
}
|
|
|
|
.select2-container--default .select2-results>.select2-results__options .select2-results__option--highlighted {
|
|
background-color: #900c3e !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
#foto-preview-ktp,
|
|
#foto-preview-ekyc {
|
|
width: 300px
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ======= MODAL ======= -->
|
|
<div class="modal_wrapper">
|
|
<div class="shadow"></div>
|
|
<div class="success_wrap">
|
|
<span class="modal_icon"><ion-icon name="checkmark-sharp"></ion-icon></span>
|
|
<p>You have successfully completed the process.</p>
|
|
</div>
|
|
</div>
|
|
<!-- ======= end MODAL ======= -->
|
|
|
|
<div class="container">
|
|
<div class="forms-container">
|
|
<div class="signin-signup">
|
|
|
|
<!-- ======= SIGN IN FORM ======= -->
|
|
<form action="#" class="sign-in-form">
|
|
<h2 class="title">Sign In</h2>
|
|
<p>Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.</p>
|
|
<div class="flex-input-btn">
|
|
<div class="input">
|
|
<i class="fa fa-phone" aria-hidden="true"></i>
|
|
<input type="text" class="telp-input-signin" maxlength="13"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 13);"
|
|
placeholder="Nomer Telepon">
|
|
</div>
|
|
<input type="button" value="Kirim OTP" class="btn-otp solid" />
|
|
</div>
|
|
<div class="input-field">
|
|
<i class="fa fa-mobile" aria-hidden="true"></i>
|
|
<input type="text" class="otp-input" maxlength="6"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
|
placeholder="Kode OTP">
|
|
</div>
|
|
<input type="submit" value="Login" class="btn solid" id="login-btn" />
|
|
</form>
|
|
<!-- ======= END SIGN IN FORM ======= -->
|
|
|
|
<!-- ======= SIGN UP FORM ======= -->
|
|
<form action="/action_page.php" class="sign-up-form" id="msform">
|
|
<h2 class="title">Sign Up</h2>
|
|
<p style="width: 90%">
|
|
Selamat datang kembali, silakan isi form login di bawah ini untuk masuk ke akun anda.
|
|
</p>
|
|
|
|
<!-- ======= PROGRESS BAR ======= -->
|
|
<div class="header">
|
|
<ul>
|
|
<li class="active form_1_progessbar">
|
|
<div>
|
|
<p>1</p>
|
|
</div>
|
|
</li>
|
|
<li class="form_2_progessbar">
|
|
<div>
|
|
<p>2</p>
|
|
</div>
|
|
</li>
|
|
<li class="form_3_progessbar">
|
|
<div>
|
|
<p>3</p>
|
|
</div>
|
|
</li>
|
|
<li class="form_4_progessbar">
|
|
<div>
|
|
<p>4</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- ======= END PROGRESS BAR ======= -->
|
|
|
|
<!-- ======= FORM MULTIPLE ======= -->
|
|
<div class="form_wrap">
|
|
|
|
<!-- ======= FORM PERSONAL DATA ======= -->
|
|
<div class="form_1 data_info">
|
|
<form>
|
|
<div style="display: flex;">
|
|
<div class="input-field-signup-flex">
|
|
<i class="fas fa-user"></i>
|
|
<input type="text" placeholder="Nama Depan" class="first-name-input" />
|
|
</div>
|
|
<div class="input-field-signup-flex" style="margin-left: 3%">
|
|
<i class="fas fa-user"></i>
|
|
<input type="text" placeholder="Nama Belakang" class="last-name-input" />
|
|
</div>
|
|
</div>
|
|
<div class="flex-input-btn">
|
|
<div class="input">
|
|
<i class="fa fa-envelope" aria-hidden="true"></i>
|
|
<input type="email" placeholder="Email" class="email-input" />
|
|
</div>
|
|
<input type="button" id="verifikasiEmailBtn" onclick="showVerifikasiEmailInput()" value="Verifikasi" class="btn-otp solid" />
|
|
</div>
|
|
<div class="input-field up" style="display: none" id="verfikasiEmailInput">
|
|
<i class="fa fa-phone" aria-hidden="true"></i>
|
|
<input type="text" class="telp-input-signup"
|
|
oninput="this.value = this.value.replace(/[^0-6]/g, '').substring(0, 6);"
|
|
placeholder="Kode Verifikasi Email">
|
|
</div>
|
|
<div class="input-field up">
|
|
<i class="fa fa-phone" aria-hidden="true"></i>
|
|
<input type="text" class="telp-input-signup"
|
|
oninput="this.value = this.value.replace(/[^0-13]/g, '').substring(0, 13);"
|
|
placeholder="Nomer Telepon">
|
|
</div>
|
|
<div style="display: flex;">
|
|
<div class="input-field-signup-flex up gender-select-menu" style="width: 190%">
|
|
<div class="gender-select-input" style="width: 100%; padding-left: 1rem;">
|
|
<select style="width: 190%;" class="gender-select" id="gender-select">
|
|
<option value="Laki-laki">Laki-laki</option>
|
|
<option value="Perempuan">Perempuan</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="input-field-signup-flex up" style="margin-left: 3%">
|
|
<i class="fa fa-calendar" aria-hidden="true"></i>
|
|
<input type="date" placeholder="Tanggal Lahir" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- ======= END FORM PERSONAL DATA ======= -->
|
|
|
|
<!-- ======= FORM ADDRESS ======= -->
|
|
<div class="form_2 data_info" style="display: none;">
|
|
<div class="">
|
|
<form class='mt-2'>
|
|
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
|
|
<select id="selectProv" data-url="{{ route('provinsi.index') }}" style="width: 100%; border: 1px solid transparent; "
|
|
class="input-field" aria-label="Default select example">
|
|
|
|
</select>
|
|
</div>
|
|
|
|
<div class='mb-2'>
|
|
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
|
|
<select id="selectRegenc"
|
|
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
|
|
class="input-field" aria-label="Default select example">
|
|
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class='mb-2'>
|
|
<div class="input-field" style="width: 190%; padding: 0rem 1rem;">
|
|
<select id="selectDistric"
|
|
style="width: 100%; border: 1px solid transparent; margin-top: 0; outline: none;"
|
|
class="input-field" aria-label="Default select example">
|
|
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<input type="text" class="input-field" id="alamat" name="alamat" placeholder="Alamat lengkap Anda" cols="50" rows="4" style="width: 190%; padding: 0rem 1rem;" required>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- ======= END FORM ADDRESS ======= -->
|
|
|
|
<!-- ======= FORM CAMERA KTP & E-KYC ======= -->
|
|
<div class="form_3 data_info" style="display: none;">
|
|
<form>
|
|
<div class="slider-container">
|
|
<div class="slider">
|
|
<div class="slide fade">
|
|
<form id="bukuTamuFormKtp" method="POST" enctype="multipart/form-data">
|
|
<div style="display: flex; flex-direction: column; align-items: center">
|
|
<h3 style="">KTP Anda</h3>
|
|
<video id="webcamKtp" autoplay playsinline></video>
|
|
<div id="foto-preview-ktp"></div>
|
|
<input type="hidden" id="fotoKtp" name="foto">
|
|
<div style="display: flex; margin-top: 1rem">
|
|
<button type="button" class="btn-foto" id="startButtonKtp" data-state="off">Mulai Kamera</button>
|
|
<button type="button" class="btn-foto" id="captureButtonKtp">Ambil Foto</button>
|
|
<button type="button" class="btn-foto" id="refreshButtonKtp">Ulang Foto</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="slide fade">
|
|
<form id="bukuTamuFormEkyc" method="POST" enctype="multipart/form-data">
|
|
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
|
|
<h3>E-KYC Anda</h3>
|
|
<video id="webcamEkyc" autoplay playsinline></video>
|
|
<div id="foto-preview-ekyc"></div>
|
|
<input type="hidden" id="fotoEkyc" name="foto">
|
|
<div style="display: flex; margin-top: 1rem">
|
|
<button type="button" class="btn-foto" id="startButtonEkyc" data-state="off">Mulai Kamera</button>
|
|
<button type="button" class="btn-foto" id="captureButtonEkyc">Ambil Foto</button>
|
|
<button type="button" class="btn-foto" id="refreshButtonEkyc">Ulang Foto</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="dots">
|
|
<button class="prev" type="button"
|
|
onclick="plusSlide(-1)">❮</button>
|
|
<span class="dot" onclick="currentSlide(1)"></span>
|
|
<span class="dot" onclick="currentSlide(2)"></span>
|
|
<button class="next" type="button"
|
|
onclick="plusSlide(1)">❯</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- ======= END CAMERA KTP & E-KYC ======= -->
|
|
|
|
<!-- ======= FORM PIN ======= -->
|
|
<div class="form_4 data_info" style="display: none;">
|
|
<form>
|
|
<div style="display: flex;">
|
|
<div class="input-field-signup-flex">
|
|
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
|
<input type="password" class="pin-input" id="pin" maxlength="6"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
|
placeholder="PIN">
|
|
<i id="toggle-pin" class="fa fa-eye password-toggle-icon"
|
|
onclick="togglePinVisibility()"></i>
|
|
</div>
|
|
|
|
<div class="input-field-signup-flex" style="margin-left: 3%">
|
|
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
|
|
<input type="password" class="konfir-pin-input" id="konfir-pin"
|
|
maxlength="6"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, '').substring(0, 6);"
|
|
placeholder="Konfirmasi PIN">
|
|
<i id="toggle-konfir-pin" class="fa fa-eye password-toggle-icon"
|
|
onclick="toggleKonfirPinVisibility()"></i>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- ======= END FORM PIN ======= -->
|
|
|
|
<!-- ======= BTN FORM NEXT & BACK ======= -->
|
|
<div class="btns_wrap">
|
|
<div class="common_btns form_1_btns">
|
|
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
|
|
name="arrow-forward-sharp"></ion-icon></span></button>
|
|
</div>
|
|
<div class="common_btns form_2_btns" style="display: none;">
|
|
<button type="button" class="btn_back"><span class="icon"><ion-icon
|
|
name="arrow-back-sharp"></ion-icon></span>Back</button>
|
|
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
|
|
name="arrow-forward-sharp"></ion-icon></span></button>
|
|
</div>
|
|
<div class="common_btns form_3_btns" style="display: none;">
|
|
<button type="button" class="btn_back"><span class="icon"><ion-icon
|
|
name="arrow-back-sharp"></ion-icon></span>Back</button>
|
|
<button type="button" class="btn_next">Next <span class="icon"><ion-icon
|
|
name="arrow-forward-sharp"></ion-icon></span></button>
|
|
</div>
|
|
<div class="common_btns form_4_btns" style="display: none;">
|
|
<button type="button" class="btn_back"><span class="icon"><ion-icon
|
|
name="arrow-back-sharp"></ion-icon></span>Back</button>
|
|
<button type="button" class="btn_done">Sign Up</button>
|
|
</div>
|
|
</div>
|
|
<!-- ======= BTN FORM NEXT & BACK ======= -->
|
|
|
|
</div>
|
|
<!-- ======= END FORM MIULTIPLE ======= -->
|
|
</form>
|
|
<!-- ======= END FORM SIGN UP ======= -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panels-container">
|
|
<div class="panel left-panel">
|
|
<div class="content">
|
|
<h3>Belum memiliki akun?</h3>
|
|
<p>
|
|
Daftarkan akun anda sekarang untuk nikmatin Aplikasi RekBer. Daftar di sini.
|
|
</p>
|
|
<button class="btn transparent" id="sign-up-btn">
|
|
Sign up
|
|
</button>
|
|
<p><a href="/">kembali</a></p>
|
|
</div>
|
|
<img src="assets/img/login_register/Payment Information-pana.svg" class="image" alt="" />
|
|
</div>
|
|
<div class="panel right-panel">
|
|
<div class="content">
|
|
<h3>Sudah memiliki akun?</h3>
|
|
<p>
|
|
Silakan masuk ke dalam RekBar menggunakan akun yang telah Anda buat sebelumnya di sini.
|
|
</p>
|
|
<button class="btn transparent" id="sign-in-btn">
|
|
Sign In
|
|
</button>
|
|
<p><a href="/">kembali</a></p>
|
|
</div>
|
|
<img src="assets/img/login_register/Payment Information-pana.svg" class="image" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function showVerifikasiEmailInput() {
|
|
const verifikasiemailInput = document.getElementById('verfikasiEmailInput');
|
|
const verifikasiEmailButton = document.getElementById('verifikasiEmailBtn');
|
|
|
|
// Toggle visibility of the email input container
|
|
if (verifikasiemailInput.style.display === 'none' || verifikasiemailInput.style.display === '') {
|
|
verifikasiemailInput.style.display = 'flex';
|
|
verifikasiEmailButton.textContent = 'Sembunyikan';
|
|
} else {
|
|
verifikasiemailInput.style.display = 'none';
|
|
verifikasiEmailButton.textContent = 'Verifikasi Email';
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
|
|
integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous">
|
|
</script>
|
|
<script src="../assets/js/login_register/app.js"></script>
|
|
<script src="../assets/js/login_register/script.js"></script>
|
|
</body>
|
|
|
|
</html>
|