145 lines
5.1 KiB
PHP
145 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Persetujuan Penyewaan | Kos Calista</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
<!-- Bootstrap Icons -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
body {
|
|
background: linear-gradient(to right, #a1c4fd, #c2e9fb);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
.card {
|
|
max-width: 700px;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
padding: 30px;
|
|
}
|
|
|
|
.card-header {
|
|
background: linear-gradient(to right, #4facfe, #00f2fe);
|
|
color: #fff;
|
|
padding: 20px;
|
|
text-align: center;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.card-body p {
|
|
font-size: 1rem;
|
|
color: #333;
|
|
}
|
|
|
|
.card-body ul {
|
|
padding-left: 1.2rem;
|
|
}
|
|
|
|
.card-body ul li {
|
|
margin-bottom: 0.7rem;
|
|
color: #555;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #444;
|
|
}
|
|
|
|
.btn-gradient {
|
|
background: linear-gradient(135deg, #4facfe, #00f2fe);
|
|
border: none;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
padding: 12px;
|
|
border-radius: 50px;
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
.btn-gradient:hover {
|
|
opacity: 0.9;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.form-check-label {
|
|
font-size: 0.95rem;
|
|
color: #444;
|
|
}
|
|
|
|
.text-muted {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.card {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Persetujuan Penyewaan Kamar<br />
|
|
<small style="font-size: 0.9rem;">Kos Calista</small>
|
|
</div>
|
|
|
|
<div class="card-body mt-3">
|
|
<p>Dengan ini saya, sebagai calon penghuni <strong>Kos Calista</strong>, menyatakan bahwa saya telah membaca, memahami, dan menyetujui syarat dan ketentuan berikut:</p>
|
|
|
|
<ul>
|
|
<li>Saya bersedia memberikan data diri yang valid, termasuk <strong>kartu identitas resmi (KTP)</strong> yang masih berlaku untuk keperluan administrasi dan verifikasi.</li>
|
|
<li>Kartu identitas hanya digunakan oleh pengelola Kos Calista untuk keperluan verifikasi dan tidak akan disalahgunakan.</li>
|
|
<li>Saya bersedia menjaga ketertiban, keamanan, serta kebersihan lingkungan Kos Calista.</li>
|
|
<li>Saya bertanggung jawab atas penggunaan dan perawatan fasilitas kamar kos yang saya tempati.</li>
|
|
<li>Jika terjadi kerusakan akibat kelalaian pribadi, saya siap bertanggung jawab untuk memperbaiki atau mengganti sesuai ketentuan yang berlaku.</li>
|
|
<li>Saya tidak akan menggunakan kamar kos untuk kegiatan yang melanggar hukum atau norma yang berlaku.</li>
|
|
<li>Semua informasi yang saya berikan adalah benar dan dapat dipertanggungjawabkan. Jika terbukti memberikan data palsu, saya siap menerima sanksi dari pengelola Kos Calista.</li>
|
|
</ul>
|
|
|
|
<form method="POST" action="{{ route('user.approveRental') }}" enctype="multipart/form-data" class="mt-4">
|
|
@csrf
|
|
|
|
<!-- Upload Kartu Identitas -->
|
|
<div class="mb-3">
|
|
<label for="id_card" class="form-label">Upload Foto Kartu Identitas (KTP) *</label>
|
|
<input type="file" name="id_card" id="id_card" class="form-control" required>
|
|
<small class="text-muted">Format JPG, PNG, atau PDF. Maksimal 2MB.</small>
|
|
</div>
|
|
|
|
<!-- Checkbox persetujuan -->
|
|
<div class="form-check mb-4">
|
|
<input class="form-check-input" type="checkbox" name="agree" id="agree" required>
|
|
<label class="form-check-label" for="agree">
|
|
Saya menyetujui semua syarat dan ketentuan di atas.
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Tombol Submit -->
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-gradient">
|
|
<i class="bi bi-check-circle me-2"></i> Setuju & Lanjutkan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap JS (optional) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|