86 lines
4.0 KiB
Plaintext
86 lines
4.0 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Detail Penjemputan";
|
|
}
|
|
|
|
<div class="max-w-sm mx-auto bg-white min-h-screen">
|
|
<!-- Header -->
|
|
<div class="bg-orange-500 text-white px-4 py-6 rounded-b-3xl relative pb-12">
|
|
<div class="flex items-center justify-center relative">
|
|
<a href="@Url.Action("Index", "Home")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors">
|
|
<i class="w-5 h-5" data-lucide="chevron-left"></i>
|
|
</a>
|
|
<h1 class="text-xl font-bold">Detail Lokasi</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- License Plate - Overlapping -->
|
|
<div class="flex justify-center -mt-10 mb-6 relative">
|
|
<div class="bg-orange-100 border border-orange-400 px-4 py-2 rounded-xl shadow flex flex-col items-center">
|
|
<span class="text-green-700 font-bold text-lg">B 9632 TOR</span>
|
|
<span class="text-orange-500 text-xs mt-1">(JRC 005)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="px-6 space-y-3">
|
|
<!-- Status Badge -->
|
|
<div class="flex justify-center">
|
|
<span class="inline-flex items-center px-4 py-1 bg-gradient-to-r from-green-500 to-green-400 text-white rounded-full text-xs font-semibold shadow-md">
|
|
PENGANGKUTAN
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Company Info -->
|
|
<div class="text-center space-y-2">
|
|
<h2 class="text-xl font-extrabold text-gray-800 tracking-wide drop-shadow">CV Tri Berkah Sejahtera</h2>
|
|
<p class="text-gray-500 text-sm bg-gray-100 rounded px-2 py-1 inline-block shadow">SPJ/07-2025/PKM/000476</p>
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div class="space-y-2">
|
|
<h3 class="font-semibold text-gray-800 text-center tracking-wider">Alamat</h3>
|
|
<p class="text-gray-600 text-sm text-center leading-relaxed px-4">
|
|
Kp. Pertanian II Rt.004 Rw.001 Kel. Klender Kec, Duren Sawit, Kota Adm. Jakarta Timur 13470
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Odometer Section -->
|
|
<div class="space-y-6">
|
|
<h3 class="font-bold text-gray-800 text-center text-lg tracking-wide">Masukkan Odometer</h3>
|
|
<div class="flex justify-center">
|
|
<div class="relative flex items-center justify-center">
|
|
<img src="@Url.Content("~/odo_simple.svg")" class="overflow-visible drop-shadow-lg scale-110" alt="">
|
|
<!-- Digital display -->
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
|
<input type="text" maxlength="7" class="bg-gray-900 text-green-400 px-4 py-2 rounded-lg text-lg font-mono tracking-widest text-center w-36 outline-none border-2 border-green-400 focus:ring-2 focus:ring-orange-400 transition" placeholder="000000" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="pt-6">
|
|
<button class="w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-orange-600 transition-all duration-200 flex items-center justify-center gap-2">
|
|
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Navigation -->
|
|
<partial name="~/Views/Shared/Components/_Navigation.cshtml" />
|
|
</div>
|
|
|
|
<register-block dynamic-section="scripts" key="jsDetailPenjemputan">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var odoInput = document.querySelector('input[maxlength="6"]');
|
|
if (odoInput) {
|
|
odoInput.addEventListener('focus', function() {
|
|
setTimeout(function() {
|
|
odoInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}, 300);
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</register-block> |