131 lines
5.0 KiB
PHP
131 lines
5.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Daftar - TaniDesa</title>
|
|
|
|
<link href="{{ asset('template/frontend/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" />
|
|
|
|
<style>
|
|
body {
|
|
background-color: #f4f6f9;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 0;
|
|
}
|
|
.card-auth {
|
|
width: 100%;
|
|
max-width: 500px; /* Sedikit lebih lebar */
|
|
border: none;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.05);
|
|
}
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: #81c408;
|
|
box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.25);
|
|
}
|
|
.btn-tani {
|
|
background-color: #81c408;
|
|
border-color: #81c408;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
.btn-tani:hover {
|
|
background-color: #6da705;
|
|
color: white;
|
|
}
|
|
.text-tani {
|
|
color: #81c408;
|
|
}
|
|
.bg-tani-light {
|
|
background-color: #eef8d8;
|
|
color: #4c7a04;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="card card-auth bg-white p-4">
|
|
<div class="card-body">
|
|
<div class="text-center mb-4">
|
|
<a href="{{ url('/') }}" class="text-decoration-none">
|
|
<h2 class="text-tani fw-bold">Daftar Akun</h2>
|
|
</a>
|
|
<p class="text-muted small">Bergabunglah dengan TaniDesa</p>
|
|
</div>
|
|
|
|
<form action="{{ route('register.proses') }}" method="POST">
|
|
@csrf
|
|
|
|
{{-- Pilihan Role --}}
|
|
<div class="mb-3">
|
|
<label class="form-label small fw-bold text-muted">Daftar Sebagai</label>
|
|
<select name="role" id="role" class="form-select text-center fw-bold" onchange="toggleForm()" style="cursor: pointer;">
|
|
<option value="pembeli">👤 Pembeli (Ingin Belanja)</option>
|
|
<option value="petani">🌾 Petani (Ingin Jualan)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label small text-muted">Nama Lengkap</label>
|
|
<input type="text" name="nama_lengkap" class="form-control" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label small text-muted">Username</label>
|
|
<input type="text" name="username" class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Password</label>
|
|
<input type="password" name="password" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Nomor HP / WA</label>
|
|
<input type="number" name="no_hp" class="form-control" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label small text-muted">Alamat Lengkap</label>
|
|
<textarea name="alamat" class="form-control" rows="2" required></textarea>
|
|
</div>
|
|
|
|
{{-- Input Khusus Petani --}}
|
|
<div id="form-petani" style="display: none;" class="bg-tani-light p-3 rounded mb-3 border border-success">
|
|
<label class="form-label small fw-bold"><i class="fas fa-store me-1"></i> Nama Toko / Usaha Tani</label>
|
|
<input type="text" name="nama_usaha" class="form-control" placeholder="Contoh: Sayur Segar Pak Budi">
|
|
<small class="d-block mt-2" style="font-size: 11px;">*Akun petani memerlukan verifikasi Admin sebelum bisa login.</small>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 mt-4">
|
|
<button type="submit" class="btn btn-tani rounded-pill py-2">DAFTAR SEKARANG</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<small class="text-muted">Sudah punya akun? <a href="{{ route('login') }}" class="text-tani fw-bold text-decoration-none">Login</a></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleForm() {
|
|
var role = document.getElementById('role').value;
|
|
var formPetani = document.getElementById('form-petani');
|
|
if(role === 'petani') {
|
|
formPetani.style.display = 'block';
|
|
} else {
|
|
formPetani.style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |