First Commit

assets/css/custom.css

@@ -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;
+  }
+}

assets/css/toggle.css

@@ -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;
+}

assets/js/scripts.js

@@ -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");
+  }
+});

index.html

@@ -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>