105 lines
4.6 KiB
Plaintext
105 lines
4.6 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Profil Page";
|
|
}
|
|
|
|
<div class="max-w-sm mx-auto bg-white min-h-screen">
|
|
<!-- Header with Orange Background -->
|
|
<div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
|
|
<div class="flex items-center justify-between">
|
|
<a href="@Url.Action("Index", "Home")" class="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-lg font-bold">Profil</h1>
|
|
<div class="w-8"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Picture Section - Overlapping -->
|
|
<div class="flex justify-center -mt-12 mb-6 relative z-10">
|
|
<div class="relative">
|
|
<!-- Profile Picture -->
|
|
<div class="w-20 h-20 rounded-full border-2 border-white shadow-xl overflow-hidden bg-gray-200">
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face"
|
|
alt="Profile Picture"
|
|
class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<!-- Edit Icon -->
|
|
<button class="absolute bottom-1 right-1 w-7 h-7 bg-white rounded-full shadow-lg flex items-center justify-center border border-gray-100 hover:bg-gray-50 transition-colors">
|
|
<i class="w-4 h-4 text-gray-600" data-lucide="edit-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Content -->
|
|
<div class="p-4 space-y-4 bg-white border border-gray-200 mx-4 rounded-2xl">
|
|
<!-- Info Akun Header -->
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-lg font-bold text-gray-800">Info Akun</h2>
|
|
<button class="text-orange-500 font-medium hover:text-orange-600 transition-colors text-sm">
|
|
Ubah
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Profile Information -->
|
|
<div class="space-y-4">
|
|
<!-- Nama -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-gray-600" data-lucide="user"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-xs text-gray-500 mb-0.5">Nama</p>
|
|
<p class="text-base font-semibold text-gray-800">Bonny Agung Putra</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-gray-600" data-lucide="mail"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-xs text-gray-500 mb-0.5">E-mail</p>
|
|
<p class="text-base font-semibold text-gray-800">bonny@gmail.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-gray-600" data-lucide="phone"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-xs text-gray-500 mb-0.5">No. HP</p>
|
|
<p class="text-base font-semibold text-gray-800">+6285777777777</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
|
|
<i class="w-4 h-4 text-gray-600" data-lucide="map-pin"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="text-xs text-gray-500 mb-0.5">Alamat</p>
|
|
<p class="text-base font-semibold text-gray-800 leading-relaxed">
|
|
Kp. Pertanian II Rt 004 Rw 001 Kel. Klender Kec, Duren Swakit, Kota Adm. Jakarta Timur 13470
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!-- Logout Button -->
|
|
<div class="mx-4 pt-4 pb-4">
|
|
<button class="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-xl font-bold text-base shadow-lg transition-all duration-200 hover:scale-105">
|
|
Keluar
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation -->
|
|
<partial name="~/Views/Shared/Components/_Navigation.cshtml" />
|
|
|
|
</div> |