223 lines
12 KiB
Plaintext
223 lines
12 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Register Nasabah";
|
|
}
|
|
|
|
<div class="min-h-screen bg-white">
|
|
<div class="flex flex-col lg:flex-row min-h-screen">
|
|
<!-- Left Section - Form -->
|
|
<div class="w-full lg:w-1/2 px-6 sm:px-12 md:px-20 pt-10 md:pt-14 pb-20 md:pb-28 bg-white flex flex-col justify-center items-center">
|
|
<div class="w-full max-w-md">
|
|
<!-- Header -->
|
|
<div class="px-2.5 py-4 bg-white rounded-tl-lg rounded-tr-lg border-b border-gray-200 flex justify-center items-center gap-2.5 mb-6">
|
|
<div class="text-gray-500 text-lg font-normal font-jakarta leading-7">Register Nasabah</div>
|
|
</div>
|
|
|
|
<!-- Title Section -->
|
|
<div class="flex flex-col justify-start items-center mb-9">
|
|
<h1 class="text-slate-800 text-xl font-semibold font-jakarta leading-8 text-center">
|
|
Selamat Datang di e-Bank Sampah Jakarta
|
|
</h1>
|
|
<p class="text-slate-600 text-xl font-normal font-jakarta leading-8 text-center">
|
|
Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Form Section -->
|
|
<form class="flex flex-col justify-start items-center gap-4">
|
|
<!-- Nama Lengkap -->
|
|
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
|
<label for="namaLengkap" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
|
Nama Lengkap
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="namaLengkap"
|
|
name="namaLengkap"
|
|
placeholder="Nama lengkap"
|
|
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Alamat Email -->
|
|
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
|
<label for="alamatEmail" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
|
Alamat Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="alamatEmail"
|
|
name="alamatEmail"
|
|
placeholder="Alamat email"
|
|
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Jenis Nasabah -->
|
|
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
|
<label for="jenisNasabah" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
|
Jenis Nasabah
|
|
</label>
|
|
<div class="relative w-full">
|
|
<select
|
|
id="jenisNasabah"
|
|
name="jenisNasabah"
|
|
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-400 text-base font-normal font-jakarta leading-6 focus:outline-green-800 focus:outline-2 appearance-none cursor-pointer"
|
|
>
|
|
<option value="">Pilih jenis nasabah</option>
|
|
<option value="individu">Individu</option>
|
|
<option value="kelompok">Kelompok</option>
|
|
<option value="perusahaan">Perusahaan</option>
|
|
</select>
|
|
<div class="absolute right-3.5 top-1/2 -translate-y-1/2 pointer-events-none">
|
|
<i class="ph ph-caret-down text-gray-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Username -->
|
|
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
|
<label for="username" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
|
Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
placeholder="Username"
|
|
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="w-full flex flex-col justify-start items-start gap-1.5">
|
|
<label for="password" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
|
Password
|
|
</label>
|
|
<div class="relative w-full">
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
placeholder="Password"
|
|
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
|
/>
|
|
<button type="button" class="absolute right-3.5 top-1/2 -translate-y-1/2" onclick="togglePassword('password')">
|
|
<i class="ph ph-eye text-gray-500 text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Konfirmasi Password -->
|
|
<div class="w-full flex flex-col justify-start items-start gap-1.5 mb-6">
|
|
<label for="confirmPassword" class="text-slate-800 text-base font-normal font-jakarta leading-6">
|
|
Konfirmasi Password
|
|
</label>
|
|
<div class="relative w-full">
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
placeholder="Konfirmasi password"
|
|
class="w-full px-3.5 py-3 bg-white rounded-lg outline outline-1 outline-offset-[-1px] outline-gray-300 text-gray-900 text-base font-normal font-jakarta leading-6 placeholder:text-gray-400 focus:outline-green-800 focus:outline-2"
|
|
/>
|
|
<button type="button" class="absolute right-3.5 top-1/2 -translate-y-1/2" onclick="togglePassword('confirmPassword')">
|
|
<i class="ph ph-eye text-gray-500 text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register Button -->
|
|
<button
|
|
type="submit"
|
|
class="w-full px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-full flex justify-center items-center gap-2 transition-colors"
|
|
>
|
|
<span class="text-white text-base font-semibold font-jakarta leading-6">Register</span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Footer Links -->
|
|
<div class="flex flex-col justify-center items-center gap-4 mt-6">
|
|
<!-- Login Link -->
|
|
<div class="flex justify-start items-center gap-2">
|
|
<span class="text-slate-800 text-base font-normal font-jakarta leading-6">Sudah punya akun?</span>
|
|
<a href="/Account/Login" class="text-green-800 text-base font-normal font-jakarta leading-6 hover:underline">Login</a>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="w-full h-px bg-gray-200"></div>
|
|
|
|
<!-- Back to Home -->
|
|
<div class="flex justify-start items-center gap-2">
|
|
<span class="text-slate-800 text-base font-normal font-jakarta leading-6">Kembali ke</span>
|
|
<a href="/" class="text-green-800 text-base font-normal font-jakarta leading-6 hover:underline">Beranda</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Section - Image with Overlay -->
|
|
<div class="hidden lg:flex lg:w-1/2 relative bg-cover bg-center overflow-hidden" style="background-image: url('/images/bg-landing-page-header.png');">
|
|
<!-- Dark Overlay -->
|
|
<div class="absolute inset-0 bg-black/50"></div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative z-10 px-28 pt-28 pb-48 flex items-end">
|
|
<div class="flex flex-col justify-start items-start gap-8">
|
|
<!-- Portal Resmi Badge -->
|
|
<div class="px-4 py-2 bg-green-50 rounded-3xl flex justify-center items-center gap-2">
|
|
<div class="w-4 h-4 relative">
|
|
<div class="w-3 h-3 absolute top-[1.5px] left-[1.5px] bg-green-900 rounded-full"></div>
|
|
</div>
|
|
<span class="text-green-900 text-base font-bold font-jakarta leading-6">Portal Resmi</span>
|
|
</div>
|
|
|
|
<!-- Title and Subtitle -->
|
|
<div class="flex flex-col justify-start items-start gap-2">
|
|
<h2 class="text-white text-5xl font-semibold font-jakarta leading-[60px]">
|
|
e-Bank Sampah Jakarta
|
|
</h2>
|
|
<p class="text-white text-lg font-medium font-jakarta leading-7">
|
|
Program dari Dinas Lingkungan Hidup Provinsi DKI Jakarta
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
function togglePassword(inputId) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = input.nextElementSibling.querySelector('i');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('ph-eye');
|
|
icon.classList.add('ph-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('ph-eye-slash');
|
|
icon.classList.add('ph-eye');
|
|
}
|
|
}
|
|
|
|
// Form validation
|
|
document.querySelector('form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const password = document.getElementById('password').value;
|
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
|
|
|
if (password !== confirmPassword) {
|
|
alert('Password dan konfirmasi password tidak cocok!');
|
|
return;
|
|
}
|
|
|
|
// Add your form submission logic here
|
|
console.log('Form submitted');
|
|
});
|
|
</script>
|
|
}
|