154 lines
5.3 KiB
HTML
154 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta
|
|
name="description"
|
|
content="Login E-Bank Sampah Dinas Lingungan Hidup Provinsi DKI Jakarta"
|
|
/>
|
|
<meta name="author" content="Dinas LH DKI" />
|
|
<title>Register | E-Bank Sampah</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="./assets/css/cdn.jsdelivr.net_npm_bootstrap@5.3.2_dist_css_bootstrap.min.css"
|
|
/>
|
|
<link rel="stylesheet" href="/assets/css/toggle.css" />
|
|
<link rel="stylesheet" href="/assets/css/custom.css" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid bg-image py-4 py-md-0">
|
|
<div
|
|
class="d-flex flex-column vh-100 justify-content-center align-items-center"
|
|
>
|
|
<img
|
|
src="./assets/img/logo.png"
|
|
class="mx-auto mb-4"
|
|
width="70"
|
|
alt="Logo E-Bank Sampah"
|
|
/>
|
|
|
|
<div class="card border-0 backdrop-blur p-4">
|
|
<!-- Toggle jenis akun -->
|
|
<input type="checkbox" class="jenisAkun" id="jenisAkun" />
|
|
<div class="app">
|
|
<div class="content">
|
|
<label for="jenisAkun" class="label">
|
|
<div class="toggle"></div>
|
|
<div class="names">
|
|
<p class="light text-center">Nasabah</p>
|
|
<p class="dark text-center">Bank Sampah</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-center fs-3 mt-4 mb-3 fw-semibold">
|
|
Register <span id="text-jenis-akun" class="">Nasabah</span>
|
|
</h1>
|
|
<p
|
|
class="text-center"
|
|
id="deskripsi-jenis-akun"
|
|
style="font-size: 0.85rem"
|
|
>
|
|
Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah
|
|
</p>
|
|
|
|
<form action="">
|
|
<div class="form-floating mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="nama"
|
|
placeholder="Nama Lengkap"
|
|
/>
|
|
<label for="nama" id="label-nama">Nama Lengkap</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="email"
|
|
placeholder="Alamat Email"
|
|
/>
|
|
<label for="email">Alamat Email</label>
|
|
</div>
|
|
<div class="form-floating mb-3 d-none">
|
|
<select
|
|
class="form-select"
|
|
id="jenis-bank-sampah"
|
|
aria-label="Floating label select example"
|
|
>
|
|
<option hidden selected>Pilih Jenis Bank Sampah</option>
|
|
<option value="0">BSU</option>
|
|
<option value="1">BSI</option>
|
|
</select>
|
|
<label for="jenis-bank-sampah">Jenis Bank Sampah</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<select
|
|
class="form-select"
|
|
id="jenis-nasabah"
|
|
aria-label="Floating label select example"
|
|
>
|
|
<option hidden selected>Pilih Jenis Nasabah</option>
|
|
<option value="0">Perorangan</option>
|
|
<option value="1">Instansi</option>
|
|
</select>
|
|
<label for="jenis-nasabah">Jenis Nasabah</label>
|
|
</div>
|
|
<div class="form-floating mb-3 d-none">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="nik"
|
|
placeholder="NIK"
|
|
maxlength="16"
|
|
disabled
|
|
/>
|
|
<label for="nik">NIK</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input
|
|
type="password"
|
|
class="form-control"
|
|
id="password"
|
|
placeholder="name@example.com"
|
|
/>
|
|
<label for="password">Password</label>
|
|
</div>
|
|
<div class="mb-3 form-check prevent-select">
|
|
<input
|
|
type="checkbox"
|
|
class="form-check-input"
|
|
id="togglePassword"
|
|
/>
|
|
<label
|
|
class="form-check-label prevent-select fw-medium"
|
|
for="togglePassword"
|
|
>Lihat Password</label
|
|
>
|
|
</div>
|
|
|
|
<button type="submit" class="btn bg-orange text-white w-100">
|
|
Register
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./assets/js/code.jquery.com_jquery-3.7.1.min.js"></script>
|
|
<script src="./assets/js/cdn.jsdelivr.net_npm_bootstrap@5.3.2_dist_js_bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="./assets/js/scripts.js"></script>
|
|
</body>
|
|
</html>
|