First Commit
commit
52c66f11e2
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,105 @@
|
|||
/* :root {
|
||||
--blue: #1e90ff;
|
||||
--black: #121212;
|
||||
} */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
color: var(--black);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
background: url("../img/bg-banksampah.png");
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-repeat: no-repeat;
|
||||
background-position: -80px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="checkbox"]:focus,
|
||||
select.form-select:focus,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="checkbox"],
|
||||
select.form-select {
|
||||
color: #272829;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: #fd7402;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
|
||||
.underline-scribble {
|
||||
text-decoration: underline wavy red;
|
||||
}
|
||||
.backdrop-blur {
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
background: #fd7402;
|
||||
}
|
||||
|
||||
.prevent-select {
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10 and IE 11 */
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
animation-name: fadeInOpacity;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in;
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
animation-name: fadeOutOpacity;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-out;
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
|
||||
@keyframes fadeInOpacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOutOpacity {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
|
||||
label.label,
|
||||
.toggle {
|
||||
height: 2rem;
|
||||
border-radius: 100px;
|
||||
}
|
||||
label.label {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.names {
|
||||
font-size: 90%;
|
||||
font-weight: bolder;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
margin-left: 12%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
.dark {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dark,
|
||||
.light {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* -------- Switch Styles ------------*/
|
||||
.jenisAkun[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
/* Toggle */
|
||||
[type="checkbox"]:checked + .app .toggle {
|
||||
transform: translateX(100%);
|
||||
background-color: #fd7402;
|
||||
}
|
||||
[type="checkbox"]:checked + .app .dark {
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
}
|
||||
[type="checkbox"]:checked + .app .light {
|
||||
opacity: 0.5;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,69 @@
|
|||
// Toggle NIK
|
||||
$("#jenis-nasabah").on("change", function () {
|
||||
const jenis = parseInt($(this).val());
|
||||
const nik = $("#nik").parent();
|
||||
|
||||
if (jenis == 0) {
|
||||
nik.removeClass("d-none").addClass("fade-in");
|
||||
$("#nik").attr("disabled", false);
|
||||
} else {
|
||||
nik.addClass("fade-out");
|
||||
|
||||
nik.on("animationend", function () {
|
||||
nik.addClass("d-none").removeClass("fade-out");
|
||||
$("#nik").attr("disabled", true);
|
||||
nik.off("animationend");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle Password
|
||||
$("#togglePassword").on("click", function () {
|
||||
const $passwordField = $("#password");
|
||||
const passwordFieldType = $passwordField.attr("type");
|
||||
|
||||
if (passwordFieldType === "password") {
|
||||
$passwordField.attr("type", "text");
|
||||
} else {
|
||||
$passwordField.attr("type", "password");
|
||||
}
|
||||
});
|
||||
|
||||
$("#nik").on("input", function () {
|
||||
// Menghapus semua karakter yang bukan angka
|
||||
$(this).val($(this).val().replace(/\D/g, ""));
|
||||
|
||||
// Memastikan panjang input tidak melebihi 16 karakter
|
||||
if ($(this).val().length > 16) {
|
||||
$(this).val($(this).val().slice(0, 16));
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle jenis Akun
|
||||
$("#jenisAkun").on("click", function () {
|
||||
const teksJenis = $("#text-jenis-akun");
|
||||
const deskripsiJenis = $("#deskripsi-jenis-akun");
|
||||
const labelNama = $("#label-nama");
|
||||
const jenisNasabah = $("#jenis-nasabah").parent();
|
||||
const jenisBankSampah = $("#jenis-bank-sampah").parent();
|
||||
|
||||
if ($(this).is(":checked")) {
|
||||
// Action buat Bank Sampah
|
||||
teksJenis.text("Bank Sampah");
|
||||
deskripsiJenis.text(
|
||||
"Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳"
|
||||
);
|
||||
labelNama.text("Nama Bank Sampah");
|
||||
jenisBankSampah.removeClass("d-none");
|
||||
jenisNasabah.addClass("d-none");
|
||||
} else {
|
||||
// Action buat Nasabah
|
||||
teksJenis.text("Nasabah");
|
||||
deskripsiJenis.text(
|
||||
"Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️"
|
||||
);
|
||||
labelNama.text("Nama Lengkap");
|
||||
jenisBankSampah.addClass("d-none");
|
||||
jenisNasabah.removeClass("d-none");
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue