initial commit
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
@{
|
||||
ViewData["Title"] = "Alerts1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V1 (Gray Dark Theme)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 border-l-4 border-l-green-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 border-l-4 border-l-blue-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 border-l-4 border-l-amber-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 border-l-4 border-l-red-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 border-l-4 border-l-gray-700 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 border-t-4 border-t-green-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 border-t-4 border-t-blue-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 border-t-4 border-t-amber-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 border-t-4 border-t-red-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 border-t-4 border-t-gray-700 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
@{
|
||||
ViewData["Title"] = "Alerts2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V1 (Gray Dark Theme)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-800 rounded p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-gray-300 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-gray-400 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 border-l-4 border-l-green-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 border-l-4 border-l-blue-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 border-l-4 border-l-amber-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 border-l-4 border-l-red-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 border-l-4 border-l-gray-700 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 border-t-4 border-t-green-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-green-200">NEW</span><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 border-t-4 border-t-blue-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-blue-200">INFO</span><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 border-t-4 border-t-amber-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-amber-200">ATTN</span><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 border-t-4 border-t-red-600 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-red-200">ALERT</span><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 border-t-4 border-t-gray-700 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-gray-800 bg-gray-300">NOTE</span><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
@{
|
||||
ViewData["Title"] = "Alerts3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V3 (Blue Dominant/Soft Blue)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 rounded-xl p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
@{
|
||||
ViewData["Title"] = "Alerts4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V4 (Blue Dominant/Soft Pill)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10"><div><h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4><p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-green-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Success</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-blue-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Info</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-amber-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-white shrink-0">Warning</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-red-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Danger</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-700 rounded-2xl p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-white shrink-0">Neutral</span><span class="text-xs text-blue-200 truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-white/70 hover:text-white transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 rounded-2xl p-4 pr-10 flex gap-3"><svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 rounded-2xl p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-blue-50 border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span><div><h4 class="font-semibold text-blue-800 text-sm">Success Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span><div><h4 class="font-semibold text-blue-800 text-sm">Info Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span><div><h4 class="font-semibold text-blue-800 text-sm">Warning Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span><div><h4 class="font-semibold text-blue-800 text-sm">Danger Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-blue-50 border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3"><span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span><div><h4 class="font-semibold text-blue-800 text-sm">Neutral Alert</h4><p class="text-xs text-blue-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p></div><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-400 hover:text-blue-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
@{
|
||||
ViewData["Title"] = "Alerts5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Alerts Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive alert variants — Style V5 (Flat Sharp/White Blue)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert Basic</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-green-100 border border-green-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-blue-100 border border-blue-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-amber-100 border border-amber-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-red-100 border border-red-400 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-gray-200 border border-gray-500 rounded p-4 pr-10">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-800 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-gray-600 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-gray-500 hover:text-gray-800 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert Solid (Single Line)</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Success</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Info</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Warning</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Danger</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
<div class="alert-item relative bg-[rgba(59,130,246,0.1)] rounded-none p-3 pr-10 flex items-center gap-2"><svg class="w-4 h-4 shrink-0 text-[#2563eb]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg><span class="text-sm font-semibold text-[#2563eb] shrink-0">Neutral</span><span class="text-xs text-[#2563eb] truncate">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</span><button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-1/2 -translate-y-1/2 right-3 text-[#2563eb] hover:text-[#2563eb] transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button></div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Left Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-white border border-green-400 border-l-4 border-l-green-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-blue-400 border-l-4 border-l-blue-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-amber-400 border-l-4 border-l-amber-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-red-400 border-l-4 border-l-red-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-gray-300 border-l-4 border-l-gray-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Alert with Icon</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-white border border-green-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-blue-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-amber-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-red-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-gray-300 rounded-none p-4 pr-10 flex gap-3">
|
||||
<svg class="w-5 h-5 mt-0.5 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Badge</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-white border border-green-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-blue-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-amber-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-red-400 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-gray-300 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3 mt-6">Alert with Top Border</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="alert-item relative bg-white border border-green-400 border-t-4 border-t-green-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-green-500">NEW</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Success Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-blue-400 border-t-4 border-t-blue-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-blue-500">INFO</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Info Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-amber-400 border-t-4 border-t-amber-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-amber-500">ATTN</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Warning Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-red-400 border-t-4 border-t-red-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-red-500">ALERT</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Danger Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
<div class="alert-item relative bg-white border border-gray-300 border-t-4 border-t-gray-500 rounded-none p-4 pr-10 flex gap-3">
|
||||
<span class="shrink-0 mt-0.5 px-2 py-0.5 text-[10px] font-bold inline-flex items-center justify-center rounded text-white bg-gray-500">NOTE</span>
|
||||
<div>
|
||||
<h4 class="font-semibold text-blue-900 text-sm">Neutral Alert</h4>
|
||||
<p class="text-xs text-blue-700 mt-0.5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.</p>
|
||||
</div>
|
||||
<button onclick="this.closest('.alert-item').classList.add('hidden')" class="absolute top-3 right-3 text-blue-300 hover:text-blue-700 transition"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
@{
|
||||
ViewData["Title"] = "Buttons1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V1 (Rounded + Blue Accent)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Primary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Secondary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Success</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Danger</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="h-4 bg-gray-100 rounded w-24"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Card Title</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-full"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
<span class="btn-text">Primary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<span class="btn-text">Secondary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="btn-text">Success</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<span class="btn-text">Danger</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<span class="btn-text">Warning</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
@{
|
||||
ViewData["Title"] = "Buttons2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V2 (Outlined + Pill Shape)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="px-6 py-2.5 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Primary</button>
|
||||
<button class="px-6 py-2.5 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Secondary</button>
|
||||
<button class="px-6 py-2.5 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Success</button>
|
||||
<button class="px-6 py-2.5 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Danger</button>
|
||||
<button class="px-6 py-2.5 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded-full w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="h-4 bg-gray-100 rounded-full w-24"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded-full w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Card Title</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded-full w-full"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded-full w-5/6"></div>
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-blue-600 border-2 border-blue-500 hover:bg-blue-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
<span class="btn-text">Primary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-gray-600 border-2 border-gray-400 hover:bg-gray-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<span class="btn-text">Secondary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-green-600 border-2 border-green-500 hover:bg-green-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="btn-text">Success</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-red-600 border-2 border-red-500 hover:bg-red-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<span class="btn-text">Danger</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-6 py-2.5 text-sm font-semibold rounded-full text-amber-600 border-2 border-amber-500 hover:bg-amber-500 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<span class="btn-text">Warning</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
@{
|
||||
ViewData["Title"] = "Buttons3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V3 (Ghost / Soft Background)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">Primary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">Secondary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">Success</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">Danger</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="h-4 bg-gray-100 rounded w-24"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Card Title</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-full"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
<span class="btn-text">Primary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<span class="btn-text">Secondary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-green-700 bg-green-100 hover:bg-green-200 focus:outline-none focus:ring-2 focus:ring-green-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="btn-text">Success</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-red-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<span class="btn-text">Danger</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-amber-700 bg-amber-100 hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-amber-300 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<span class="btn-text">Warning</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
@{
|
||||
ViewData["Title"] = "Buttons4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V4 (Gradient Background)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Primary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Secondary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Success</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Danger</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="h-4 bg-gray-100 rounded w-24"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Card Title</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-full"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
<span class="btn-text">Primary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<span class="btn-text">Secondary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="btn-text">Success</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<span class="btn-text">Danger</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-lg text-white bg-gradient-to-r from-amber-500 to-amber-700 hover:from-amber-600 hover:to-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 active:scale-95 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<span class="btn-text">Warning</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
@{
|
||||
ViewData["Title"] = "Buttons5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V5 (Flat Sharp / Square Edges)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">Primary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">Secondary</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">Success</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">Danger</button>
|
||||
<button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">Warning</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex items-center justify-between">
|
||||
<div class="h-4 bg-gray-100 rounded w-24"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-32"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-1/2"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-2/3"></div>
|
||||
</div>
|
||||
<div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Card Title</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="h-4 bg-gray-100 rounded w-full"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-3/4"></div>
|
||||
<div class="h-4 bg-gray-100 rounded w-5/6"></div>
|
||||
<div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
|
||||
</button>
|
||||
<button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
|
||||
<span class="btn-text">Primary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
<span class="btn-text">Secondary</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="btn-text">Success</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
<span class="btn-text">Danger</span>
|
||||
</button>
|
||||
<button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
|
||||
<svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<span class="btn-text">Warning</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,548 @@
|
||||
@{
|
||||
ViewData["Title"] = "Cards1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/cards-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="w-16 h-3 rounded bg-blue-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
|
||||
<div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
|
||||
<div class="flex flex-col items-center justify-center h-full min-h-[180px]">
|
||||
<svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||||
<span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
|
||||
<div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-red-500 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
|
||||
<svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
|
||||
<div class="ck-dropdown" x-bind:class="{ 'open': open }">
|
||||
<a href="#" x-on:click.prevent="open = false">Today</a>
|
||||
<a href="#" x-on:click.prevent="open = false">7 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">30 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">This Quarter</a>
|
||||
<a href="#" x-on:click.prevent="open = false">Custom Range</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-chart-placeholder">
|
||||
<div class="ck-bar-set">
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#10b981;height:95px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
|
||||
<button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Prospecting</p>
|
||||
<p class="text-lg font-bold text-gray-900">1,225</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Qualified</p>
|
||||
<p class="text-lg font-bold text-gray-900">640</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Negotiation</p>
|
||||
<p class="text-lg font-bold text-gray-900">156</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Closed Won</p>
|
||||
<p class="text-lg font-bold text-gray-900">89</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">John Doe</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Alex Kowalski</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Emma Parker</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-blue text-[10px]">Development</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
<div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#10b981;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-amber text-[10px]">Design</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-green text-[10px]">Testing</span>
|
||||
<span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#f97316;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#6366f1;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-purple text-[10px]">Research</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
|
||||
<input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
|
||||
<input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
|
||||
<input type="email" value="john.doe@@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
|
||||
<input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
|
||||
<input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
|
||||
<textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
|
||||
<span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(287)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$89.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$129.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(156)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$249.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(92)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$59.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$79.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(423)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$149.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$179.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,548 @@
|
||||
@{
|
||||
ViewData["Title"] = "Cards2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/cards-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="w-16 h-3 rounded bg-blue-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
|
||||
<div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
|
||||
<div class="flex flex-col items-center justify-center h-full min-h-[180px]">
|
||||
<svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||||
<span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
|
||||
<div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-red-500 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
|
||||
<svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
|
||||
<div class="ck-dropdown" x-bind:class="{ 'open': open }">
|
||||
<a href="#" x-on:click.prevent="open = false">Today</a>
|
||||
<a href="#" x-on:click.prevent="open = false">7 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">30 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">This Quarter</a>
|
||||
<a href="#" x-on:click.prevent="open = false">Custom Range</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-chart-placeholder">
|
||||
<div class="ck-bar-set">
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#10b981;height:95px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
|
||||
<button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Prospecting</p>
|
||||
<p class="text-lg font-bold text-gray-900">1,225</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Qualified</p>
|
||||
<p class="text-lg font-bold text-gray-900">640</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Negotiation</p>
|
||||
<p class="text-lg font-bold text-gray-900">156</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Closed Won</p>
|
||||
<p class="text-lg font-bold text-gray-900">89</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">John Doe</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Alex Kowalski</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Emma Parker</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-blue text-[10px]">Development</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
<div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#10b981;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-amber text-[10px]">Design</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-green text-[10px]">Testing</span>
|
||||
<span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#f97316;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#6366f1;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-purple text-[10px]">Research</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
|
||||
<input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
|
||||
<input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
|
||||
<input type="email" value="john.doe@@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
|
||||
<input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
|
||||
<input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
|
||||
<textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
|
||||
<span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(287)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$89.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$129.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(156)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$249.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(92)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$59.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$79.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(423)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$149.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$179.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,548 @@
|
||||
@{
|
||||
ViewData["Title"] = "Cards3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/cards-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="w-16 h-3 rounded bg-blue-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
|
||||
<div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
|
||||
<div class="flex flex-col items-center justify-center h-full min-h-[180px]">
|
||||
<svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||||
<span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
|
||||
<div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-red-500 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
|
||||
<svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
|
||||
<div class="ck-dropdown" x-bind:class="{ 'open': open }">
|
||||
<a href="#" x-on:click.prevent="open = false">Today</a>
|
||||
<a href="#" x-on:click.prevent="open = false">7 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">30 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">This Quarter</a>
|
||||
<a href="#" x-on:click.prevent="open = false">Custom Range</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-chart-placeholder">
|
||||
<div class="ck-bar-set">
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#10b981;height:95px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
|
||||
<button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Prospecting</p>
|
||||
<p class="text-lg font-bold text-gray-900">1,225</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Qualified</p>
|
||||
<p class="text-lg font-bold text-gray-900">640</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Negotiation</p>
|
||||
<p class="text-lg font-bold text-gray-900">156</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Closed Won</p>
|
||||
<p class="text-lg font-bold text-gray-900">89</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">John Doe</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Alex Kowalski</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Emma Parker</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-blue text-[10px]">Development</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
<div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#10b981;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-amber text-[10px]">Design</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-green text-[10px]">Testing</span>
|
||||
<span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#f97316;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#6366f1;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-purple text-[10px]">Research</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
|
||||
<input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
|
||||
<input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
|
||||
<input type="email" value="john.doe@@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
|
||||
<input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
|
||||
<input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
|
||||
<textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
|
||||
<span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(287)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$89.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$129.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(156)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$249.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(92)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$59.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$79.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(423)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$149.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$179.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,548 @@
|
||||
@{
|
||||
ViewData["Title"] = "Cards4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/cards-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="w-16 h-3 rounded bg-blue-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
|
||||
<div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
|
||||
<div class="flex flex-col items-center justify-center h-full min-h-[180px]">
|
||||
<svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||||
<span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
|
||||
<div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-red-500 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
|
||||
<svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
|
||||
<div class="ck-dropdown" x-bind:class="{ 'open': open }">
|
||||
<a href="#" x-on:click.prevent="open = false">Today</a>
|
||||
<a href="#" x-on:click.prevent="open = false">7 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">30 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">This Quarter</a>
|
||||
<a href="#" x-on:click.prevent="open = false">Custom Range</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-chart-placeholder">
|
||||
<div class="ck-bar-set">
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#10b981;height:95px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
|
||||
<button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Prospecting</p>
|
||||
<p class="text-lg font-bold text-gray-900">1,225</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Qualified</p>
|
||||
<p class="text-lg font-bold text-gray-900">640</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Negotiation</p>
|
||||
<p class="text-lg font-bold text-gray-900">156</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Closed Won</p>
|
||||
<p class="text-lg font-bold text-gray-900">89</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">John Doe</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Alex Kowalski</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Emma Parker</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-blue text-[10px]">Development</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
<div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#10b981;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-amber text-[10px]">Design</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-green text-[10px]">Testing</span>
|
||||
<span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#f97316;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#6366f1;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-purple text-[10px]">Research</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
|
||||
<input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
|
||||
<input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
|
||||
<input type="email" value="john.doe@@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
|
||||
<input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
|
||||
<input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
|
||||
<textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
|
||||
<span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(287)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$89.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$129.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(156)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$249.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(92)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$59.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$79.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(423)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$149.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$179.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,548 @@
|
||||
@{
|
||||
ViewData["Title"] = "Cards5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/cards-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Card Components</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of card UI variants for enterprise applications</p></div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#64748b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Cards Basic</h2><p class="text-xs text-gray-400">Anatomy & skeleton structure — header, body, footer decomposition</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-1 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Full Structure</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="flex gap-1"><div class="w-6 h-2 rounded bg-blue-200"></div><div class="w-6 h-2 rounded bg-blue-200"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-2 rounded bg-sky-100" style="width:85%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:60%;"></div>
|
||||
<div class="h-2 rounded bg-sky-100" style="width:70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-end gap-2"><div class="w-14 h-5 rounded bg-slate-100"></div><div class="w-20 h-5 rounded bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-2 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Compact</p>
|
||||
<div class="border-2 border-dashed border-blue-200 rounded-lg p-3 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-blue-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Header</span></div>
|
||||
<div class="w-16 h-3 rounded bg-blue-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
<div class="h-3 rounded bg-sky-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">header + body</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-blue-300 p-5 anim-fade anim-delay-3 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8faff, #f8faff 10px, #eff4ff 10px, #eff4ff 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Minimal</p>
|
||||
<div class="border-2 border-dashed border-sky-200 rounded-lg p-4 mb-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-2"><div class="w-2 h-2 rounded-full bg-sky-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Body</span></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-sky-100 shrink-0"></div>
|
||||
<div class="flex-1 space-y-1.5"><div class="h-2 rounded bg-sky-100" style="width:70%;"></div><div class="h-2 rounded bg-sky-100" style="width:45%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-dashed border-slate-200 rounded-lg p-3" style="background:rgba(255,255,255,.7);">
|
||||
<div class="flex items-center gap-2 mb-1"><div class="w-2 h-2 rounded-full bg-slate-400"></div><span class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Footer</span></div>
|
||||
<div class="flex justify-center gap-3"><div class="w-16 h-5 rounded-full bg-slate-100"></div><div class="w-16 h-5 rounded-full bg-slate-200"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">body + footer</span></div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border-2 border-dashed border-slate-300 p-5 anim-fade anim-delay-4 overflow-hidden" style="background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);">
|
||||
<p class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">Shell</p>
|
||||
<div class="flex flex-col items-center justify-center h-full min-h-[180px]">
|
||||
<svg class="w-10 h-10 text-slate-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||||
<span class="text-xs font-mono text-slate-400 font-semibold">.card-shell</span>
|
||||
<div class="flex gap-1 mt-2"><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div><div class="w-1.5 h-1.5 rounded-full bg-slate-300"></div></div>
|
||||
</div>
|
||||
<div class="mt-2 text-center"><span class="text-[10px] text-slate-400 font-mono">empty container skeleton</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#3b82f6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Metric / KPI Stat Cards</h2><p class="text-xs text-gray-400">Summary data cards for key performance indicators</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Total Revenue</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">$2.46M</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 12.5%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Active Users</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">24,850</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 8.3%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fef2f2;">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Transactions</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">3,421</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-green-600 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg> 18.7%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#f0fdf4;">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 relative overflow-hidden">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide">Conversion Rate</p>
|
||||
<p class="text-2xl font-extrabold text-gray-900 mt-1">4.7%</p>
|
||||
<div class="flex items-center gap-1.5 mt-2">
|
||||
<span class="flex items-center text-red-500 text-sm font-semibold"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg> 2.1%</span>
|
||||
<span class="text-xs text-gray-400">vs last month</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#fefce8;">
|
||||
<svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#8b5cf6;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Data Visual / Chart Cards</h2><p class="text-xs text-gray-400">Cards designed for charts, graphs, and data visualization</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Monthly Revenue Trend</h3><p class="text-xs text-gray-400 mt-0.5">Revenue performance over the last 6 months</p></div>
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-1.5 text-xs font-medium text-gray-500 bg-gray-50 hover:bg-gray-100 rounded-lg px-3 py-1.5 transition">7 Days <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></button>
|
||||
<div class="ck-dropdown" x-bind:class="{ 'open': open }">
|
||||
<a href="#" x-on:click.prevent="open = false">Today</a>
|
||||
<a href="#" x-on:click.prevent="open = false">7 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">30 Days</a>
|
||||
<a href="#" x-on:click.prevent="open = false">This Quarter</a>
|
||||
<a href="#" x-on:click.prevent="open = false">Custom Range</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-chart-placeholder">
|
||||
<div class="ck-bar-set">
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#8b5cf6;height:75px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#10b981;height:95px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
<div class="ck-bar" style="background:#f59e0b;height:55px;"></div>
|
||||
<div class="ck-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Sales Pipeline</h3><p class="text-xs text-gray-400 mt-0.5">Deal stages and conversion overview</p></div>
|
||||
<button class="flex items-center gap-1.5 text-xs font-semibold text-blue-600 hover:text-blue-700 transition"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Prospecting</p>
|
||||
<p class="text-lg font-bold text-gray-900">1,225</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:48%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Qualified</p>
|
||||
<p class="text-lg font-bold text-gray-900">640</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:25%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Negotiation</p>
|
||||
<p class="text-lg font-bold text-gray-900">156</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:12%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg" style="background:#f8fafc;">
|
||||
<p class="text-xs text-gray-400">Closed Won</p>
|
||||
<p class="text-lg font-bold text-gray-900">89</p>
|
||||
<div class="mt-2 progress-ck-bar"><div class="fill" style="width:7%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-3 border-t border-gray-100 flex justify-between text-xs text-gray-400"><span>Total Pipeline: <b class="text-gray-700">$4.83M</b></span><span>CVR: <b class="text-green-600">4.7%</b></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#10b981;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">User Profile & Contact Cards</h2><p class="text-xs text-gray-400">Profile cards for users, customers, and entities</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">John Doe</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-blue">Sales Manager</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> john.doe@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 123-4567</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#8b5cf6;">SM</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Sarah Mitchell</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-green">Customer Success</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> sarah.m@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 987-6543</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#8b5cf6;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#f59e0b;">AK</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Alex Kowalski</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-amber">Lead Engineer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> alex.k@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 456-7890</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#f59e0b;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4 text-center">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white text-xl font-bold" style="background:#ec4899;">EP</div>
|
||||
</div>
|
||||
<h3 class="font-bold text-gray-900">Emma Parker</h3>
|
||||
<div class="flex justify-center mt-1"><span class="chip chip-pink">Product Designer</span></div>
|
||||
<div class="mt-3 space-y-1.5 text-xs text-gray-500">
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> emma.p@@company.com</div>
|
||||
<div class="flex items-center justify-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg> +1 (555) 321-0987</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2 justify-center">
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-white rounded-lg transition" style="background:#ec4899;">Send Message</button>
|
||||
<button class="px-4 py-1.5 text-xs font-semibold text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f59e0b;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Interactive Task / Kanban Cards</h2><p class="text-xs text-gray-400">Compact workflow cards with interactive hover states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-blue text-[10px]">Development</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 2d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Implement user authentication module with OAuth2 integration</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>75%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:75%;background:#3b82f6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
<div class="ck-avatar-item" style="background:#8b5cf6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#10b981;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+2</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-amber text-[10px]">Design</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due tomorrow</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Redesign dashboard analytics page with new KPI widgets</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>45%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:45%;background:#f59e0b;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-green text-[10px]">Testing</span>
|
||||
<span class="text-xs text-green-600 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Due in 5d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">End-to-end testing for checkout flow and payment processing</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>20%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:20%;background:#10b981;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#f97316;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#06b6d4;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#6366f1;">JD</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ck-card bg-white rounded-xl border border-gray-100 p-4 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="chip chip-purple text-[10px]">Research</span>
|
||||
<span class="text-xs text-red-500 font-medium flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Overdue 1d</span>
|
||||
</div>
|
||||
<p class="text-sm font-semibold text-gray-900">Competitor analysis and market research for Q3 strategy planning</p>
|
||||
<div class="mt-3">
|
||||
<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Progress</span><span>60%</span></div>
|
||||
<div class="progress-ck-bar"><div class="fill" style="width:60%;background:#8b5cf6;"></div></div>
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<div class="ck-avatar-stack">
|
||||
<div class="ck-avatar-item" style="background:#14b8a6;">EP</div>
|
||||
<div class="ck-avatar-item" style="background:#ec4899;">AK</div>
|
||||
<div class="ck-avatar-item" style="background:#3b82f6;">SM</div>
|
||||
<div class="ck-avatar-item" style="background:#f59e0b;font-size:8px;">+1</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-xs text-gray-400">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span>3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#ec4899;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">Actionable / Form Container Cards</h2><p class="text-xs text-gray-400">Card wrappers for forms, confirmations, and critical actions</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<h3 class="font-bold text-gray-900">Edit Customer Profile</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Update customer information and preferences</p>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">First Name</label>
|
||||
<input type="text" value="John" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Last Name</label>
|
||||
<input type="text" value="Doe" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Email Address</label>
|
||||
<input type="email" value="john.doe@@company.com" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Phone Number</label>
|
||||
<input type="tel" value="+1 (555) 123-4567" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100" style="background:#fef2f2;">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
<div><h3 class="font-bold text-gray-900">Delete Account</h3><p class="text-xs text-gray-500 mt-0.5">This action cannot be undone. Proceed with caution.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Type your password to confirm</label>
|
||||
<input type="password" placeholder="Enter your password" class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400">
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-500 block mb-1">Reason for deletion (optional)</label>
|
||||
<textarea rows="3" placeholder="Tell us why you are leaving..." class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-red-400"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-3 border-t border-gray-100 flex items-center justify-end gap-2">
|
||||
<button class="px-4 py-2 text-xs font-semibold text-gray-500 border border-gray-200 rounded-lg hover:bg-gray-50 transition">Cancel</button>
|
||||
<button class="px-4 py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#e11d48;">Delete Account</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-1 h-6 rounded-full" style="background:#f97316;"></div>
|
||||
<div><h2 class="text-lg font-bold text-gray-900">E-Commerce / Product Showcase Cards</h2><p class="text-xs text-gray-400">Product cards with images, ratings, and pricing</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-red text-[10px]">-30%</span>
|
||||
<span class="absolute top-3 right-3 chip chip-green text-[10px]">Best Seller</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Wireless Bluetooth Headphones Pro</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(287)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$89.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$129.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-amber text-[10px]">New</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Smart Watch Series X Ultra</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(156)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$249.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-purple text-[10px]">Premium</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Ergonomic Laptop Stand Aluminum</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-gray-200" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(92)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$59.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$79.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="ck-img-placeholder relative">
|
||||
<svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
<span class="absolute top-3 left-3 chip chip-green text-[10px]">-15%</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h4 class="font-semibold text-gray-900 text-sm">Mechanical Keyboard RGB Cherry MX</h4>
|
||||
<div class="flex items-center gap-1 mt-1 ck-star-rating">
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<span class="text-xs text-gray-400 ml-1">(423)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<span class="text-lg font-bold text-gray-900">$149.00</span>
|
||||
<span class="text-sm text-gray-400 line-through">$179.00</span>
|
||||
</div>
|
||||
<button class="mt-3 w-full py-2 text-xs font-semibold text-white rounded-lg transition" style="background:#3b82f6;">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,563 @@
|
||||
@{
|
||||
ViewData["Title"] = "Datatables1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">User login successful</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@@company.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@@partner.org</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">system@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@@enterprise.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@@partner.org</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@@company.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@@enterprise.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
|
||||
<span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<div class="relative flex-1 w-full sm:max-w-xs">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
|
||||
<option value="">All Categories</option>
|
||||
<option>Electronics</option>
|
||||
<option>Office Supplies</option>
|
||||
<option>Furniture</option>
|
||||
<option>Software</option>
|
||||
<option>Services</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="product-tbody">
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">342</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">128</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">999</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">—</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">89</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">56</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">500</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
|
||||
<span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
|
||||
<span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print Selected</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Change Status</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete Selected</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="invoice-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100">
|
||||
<input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer">
|
||||
</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Invoice No.</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
|
||||
<span>Total outstanding: <b class="text-red-500">$86,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="employee-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
|
||||
<th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Sales</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">New York, NY</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">San Francisco, CA</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Chicago, IL</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Finance</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Boston, MA</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
|
||||
<span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5" id="pagination-section">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and working pagination controls</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Transaction ID</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Source Account</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Destination Account</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Amount</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Payment Method</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="transactions-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
|
||||
<span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
|
||||
<div class="flex items-center gap-1" id="transactions-page-btns"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/datatables.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,563 @@
|
||||
@{
|
||||
ViewData["Title"] = "Datatables2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">User login successful</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@@company.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@@partner.org</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">system@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@@enterprise.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@@partner.org</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td>
|
||||
</tr>
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@@company.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td>
|
||||
</tr>
|
||||
<tr class="bg-gray-50/60">
|
||||
<td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@@enterprise.com</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
|
||||
<span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<div class="relative flex-1 w-full sm:max-w-xs">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
|
||||
<option value="">All Categories</option>
|
||||
<option>Electronics</option>
|
||||
<option>Office Supplies</option>
|
||||
<option>Furniture</option>
|
||||
<option>Software</option>
|
||||
<option>Services</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="product-tbody">
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">342</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">128</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">999</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">—</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">89</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">56</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-green">Software</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">500</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition">
|
||||
<td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td>
|
||||
<td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
|
||||
<span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
|
||||
<span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print Selected</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Change Status</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete Selected</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="invoice-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100">
|
||||
<input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer">
|
||||
</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Invoice No.</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td>
|
||||
<td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
|
||||
<span>Total outstanding: <b class="text-red-500">$86,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="employee-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
|
||||
<th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Sales</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">New York, NY</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">San Francisco, CA</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Chicago, IL</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Finance</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex items-center justify-center gap-0.5">
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
<svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
|
||||
</div>
|
||||
<span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="relative inline-block" x-data="{ open: false }">
|
||||
<button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;">
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden">
|
||||
<td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Boston, MA</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div>
|
||||
<div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@@crmpro.com</p></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
|
||||
<span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5" id="pagination-section">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and working pagination controls</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Transaction ID</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Source Account</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Destination Account</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Amount</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Payment Method</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="transactions-tbody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
|
||||
<span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
|
||||
<div class="flex items-center gap-1" id="transactions-page-btns"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/datatables.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
@{
|
||||
ViewData["Title"] = "Datatables3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">User login successful</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">system@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
|
||||
<span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<div class="relative flex-1 w-full sm:max-w-xs">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
|
||||
<option value="">All Categories</option><option>Electronics</option><option>Office Supplies</option><option>Furniture</option><option>Software</option><option>Services</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="product-tbody">
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">342</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">128</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">999</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td><td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">—</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">89</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">56</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
|
||||
<span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
|
||||
<span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Cetak Massal</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Ubah Status</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Hapus Terpilih</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="invoice-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"><input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">No. Invoice</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td><td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td><td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td><td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td><td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td><td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td><td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td><td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td><td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td><td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td><td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
|
||||
<span>Total outstanding: <b class="text-red-500">$86,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="employee-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
|
||||
<th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div><div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Sales</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Jakarta, ID</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div><div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Singapore, SG</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div><div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Kuala Lumpur, MY</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div><div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Finance</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Bangkok, TH</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@@crmpro.com</p></div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
|
||||
<span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and pagination controls</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">ID Transaksi</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Asal</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Tujuan</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Nominal</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Metode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="transactions-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="transactions-pagination" class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
|
||||
<span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
|
||||
<div id="transactions-page-btns" class="flex items-center gap-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/datatables.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
@{
|
||||
ViewData["Title"] = "Datatables4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">User login successful</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">system@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
|
||||
<span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<div class="relative flex-1 w-full sm:max-w-xs">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
|
||||
<option value="">All Categories</option><option>Electronics</option><option>Office Supplies</option><option>Furniture</option><option>Software</option><option>Services</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="product-tbody">
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">342</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">128</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">999</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td><td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">—</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">89</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">56</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
|
||||
<span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
|
||||
<span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Cetak Massal</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Ubah Status</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Hapus Terpilih</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="invoice-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"><input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">No. Invoice</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td><td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td><td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td><td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td><td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td><td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td><td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td><td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td><td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td><td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td><td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
|
||||
<span>Total outstanding: <b class="text-red-500">$86,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="employee-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
|
||||
<th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div><div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Sales</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Jakarta, ID</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div><div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Singapore, SG</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div><div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Kuala Lumpur, MY</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div><div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Finance</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Bangkok, TH</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@@crmpro.com</p></div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
|
||||
<span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and pagination controls</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">ID Transaksi</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Asal</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Tujuan</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Nominal</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Metode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="transactions-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="transactions-pagination" class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
|
||||
<span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
|
||||
<div id="transactions-page-btns" class="flex items-center gap-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/datatables.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,247 @@
|
||||
@{
|
||||
ViewData["Title"] = "Datatables5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">DataTables</h1><p class="text-gray-500 mt-1 text-sm">Complete showcase of DataTable variants for enterprise systems</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Tables</option><option>System Logs</option><option>Products</option><option>Invoices</option><option>Employees</option><option>Transactions</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-1">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Basic Striped Table</h3><p class="text-xs text-gray-400 mt-0.5">System Activity Log with zebra-striping for enhanced readability</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Timestamp</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">User</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Activity</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">IP Address</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:32:15</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">User login successful</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:28:42</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">j.doe@@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Updated customer profile #8842</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.45</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 08:15:03</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">s.mith@@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Exported pipeline report Q2</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.0.88</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:55:30</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">system@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Scheduled backup completed</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">127.0.0.1</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:42:18</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">a.lee@@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Created new deal DL-2026-0988</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.2.15</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:30:05</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">t.wong@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">Modified email campaign Q3</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.1.200</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 07:15:44</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">m.jones@@partner.org</td><td class="px-4 py-3 text-sm text-gray-600">Deleted expired leads batch</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">172.16.1.33</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:58:22</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">admin@@crmpro.com</td><td class="px-4 py-3 text-sm text-gray-600">System configuration updated</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.1.100</td></tr>
|
||||
<tr class="bg-white"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:42:10</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">k.brown@@company.com</td><td class="px-4 py-3 text-sm text-gray-600">Approved invoice INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">10.0.0.12</td></tr>
|
||||
<tr class="bg-gray-50/60"><td class="px-4 py-3 text-sm text-gray-700">2026-07-06 06:28:36</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">r.garcia@@enterprise.com</td><td class="px-4 py-3 text-sm text-gray-600">Password reset requested</td><td class="px-4 py-3 text-sm text-gray-500 text-right font-mono">192.168.3.77</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">10</b> of <b class="text-gray-600">247</b> entries</span>
|
||||
<span>Last updated: <b class="text-gray-500">Today 08:32 AM</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-2">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Advanced Search & Filter Table</h3><p class="text-xs text-gray-400 mt-0.5">Product inventory with search toolbar and category filter</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Manage Products →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-b border-gray-100">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
|
||||
<div class="relative flex-1 w-full sm:max-w-xs">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<input type="text" id="product-search" placeholder="Search products..." class="w-full pl-9 pr-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent">
|
||||
</div>
|
||||
<div class="flex items-center gap-2 w-full sm:w-auto">
|
||||
<select id="product-category" class="text-sm border border-gray-200 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 flex-1 sm:flex-initial">
|
||||
<option value="">All Categories</option><option>Electronics</option><option>Office Supplies</option><option>Furniture</option><option>Software</option><option>Services</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">SKU <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center gap-1.5">Product Name <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Category</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Stock <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100"><div class="flex items-center justify-end gap-1.5">Price <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg></div></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="product-tbody">
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00142</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Wireless Bluetooth Headset Pro</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">342</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$129.99</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00143</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Ergonomic Office Chair Mesh</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">128</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$349.50</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00144</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Cloud Storage License Enterprise</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">999</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$89.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00145</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Premium Ballpoint Pen Set 12pk</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">2,150</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18.75</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00146</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Consulting Retainer - 40hrs/mo</td><td class="px-4 py-3"><span class="badge badge-indigo">Services</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">—</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$4,200.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00147</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">USB-C Docking Station Universal</td><td class="px-4 py-3"><span class="badge badge-blue">Electronics</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">89</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$79.99</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00148</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">Standing Desk Adjustable Electric</td><td class="px-4 py-3"><span class="badge badge-amber">Furniture</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">56</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$599.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00149</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">CRM Pro Annual License - Team</td><td class="px-4 py-3"><span class="badge badge-green">Software</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$1,999.00</td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/60 transition"><td class="px-4 py-3 text-sm text-gray-500 font-mono">SKU-00150</td><td class="px-4 py-3 text-sm text-gray-700 font-medium">A4 Premium Copy Paper Case</td><td class="px-4 py-3"><span class="badge badge-gray">Office Supplies</span></td><td class="px-4 py-3 text-sm text-gray-700 text-right">3,500</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$42.00</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span id="product-info">Showing <b class="text-gray-600">9</b> of <b class="text-gray-600">64</b> products</span>
|
||||
<span class="text-gray-500"><b class="text-amber-600">2</b> low in stock</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="invoice-section" class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-3">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Bulk Actions & Checkbox Table</h3><p class="text-xs text-gray-400 mt-0.5">Invoice management with multi-select and bulk operations</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">Create Invoice →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bulk-toolbar" class="px-4 py-2.5 bg-blue-50/80 border-b border-blue-100 hidden items-center gap-2 text-sm">
|
||||
<span id="selected-count" class="text-sm font-medium text-blue-700 mr-2">0 selected</span>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Cetak Massal</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-blue-200 text-blue-700 hover:bg-blue-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg> Ubah Status</button>
|
||||
<button class="px-3 py-1.5 text-xs font-semibold rounded-lg bg-white border border-red-200 text-red-600 hover:bg-red-50 transition flex items-center gap-1.5"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Hapus Terpilih</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="invoice-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"><input type="checkbox" id="select-all-invoices" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">No. Invoice</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Customer</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Date</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Total</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0788</td><td class="px-4 py-3 text-sm text-gray-700">TechDistrib Inc.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 05, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$24,500.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0789</td><td class="px-4 py-3 text-sm text-gray-700">CloudHost Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jul 03, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$12,800.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0790</td><td class="px-4 py-3 text-sm text-gray-700">OfficePro Supply</td><td class="px-4 py-3 text-sm text-gray-500">Jul 02, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$6,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0791</td><td class="px-4 py-3 text-sm text-gray-700">MegaNetwork Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 30, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$32,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0792</td><td class="px-4 py-3 text-sm text-gray-700">Consulting Plus</td><td class="px-4 py-3 text-sm text-gray-500">Jun 28, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$18,000.00</td><td class="px-4 py-3 text-center"><span class="chip chip-green">Paid</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0793</td><td class="px-4 py-3 text-sm text-gray-700">DataSys Solutions</td><td class="px-4 py-3 text-sm text-gray-500">Jun 27, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$45,200.00</td><td class="px-4 py-3 text-center"><span class="chip chip-amber">Pending</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0794</td><td class="px-4 py-3 text-sm text-gray-700">GreenEnergy Corp</td><td class="px-4 py-3 text-sm text-gray-500">Jun 25, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$28,900.00</td><td class="px-4 py-3 text-center"><span class="chip chip-blue">Sent</span></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition"><td class="px-4 py-3"><input type="checkbox" class="invoice-checkbox w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"></td><td class="px-4 py-3 text-sm text-gray-700 font-mono font-medium">INV-2026-0795</td><td class="px-4 py-3 text-sm text-gray-700">SmartBuild Ltd.</td><td class="px-4 py-3 text-sm text-gray-500">Jun 24, 2026</td><td class="px-4 py-3 text-sm text-gray-700 text-right font-mono">$8,750.00</td><td class="px-4 py-3 text-center"><span class="chip chip-red">Overdue</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">8</b> of <b class="text-gray-600">42</b> invoices</span>
|
||||
<span>Total outstanding: <b class="text-red-500">$86,200</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-4">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Expandable Row & Rich Content Table</h3><p class="text-xs text-gray-400 mt-0.5">Employee directory with avatars, rich cells, and expandable details</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Employees →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse" id="employee-table">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="w-12 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Employee</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Department</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Performance</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Joined</th>
|
||||
<th class="w-16 px-4 py-3.5 border-b border-gray-100"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#2563eb;">SM</div><div><p class="text-sm font-semibold text-gray-800">Sarah Mitchell</p><p class="text-xs text-gray-400">s.mitchell@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Sales</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.2 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Mar 12, 2022</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Sr. Sales Manager</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">12 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Jakarta, ID</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Total Deals (Q2)</p><p class="text-gray-700 font-medium">$420,000</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Win Rate</p><p class="text-gray-700 font-medium">48%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">s.mitchell@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#10b981;">JC</div><div><p class="text-sm font-semibold text-gray-800">James Chen</p><p class="text-xs text-gray-400">j.chen@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Engineering</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">5.0 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jan 08, 2021</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Lead DevOps Engineer</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">8 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Singapore, SG</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Projects (Q2)</p><p class="text-gray-700 font-medium">14 completed</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">SLA</p><p class="text-gray-700 font-medium">99.8%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">j.chen@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#ec4899;">AL</div><div><p class="text-sm font-semibold text-gray-800">Alexandra Lee</p><p class="text-xs text-gray-400">a.lee@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Marketing</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">3.8 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Jun 15, 2023</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Digital Marketing Director</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">6 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Kuala Lumpur, MY</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Campaigns (Q2)</p><p class="text-gray-700 font-medium">24 active</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">ROI</p><p class="text-gray-700 font-medium">312%</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">a.lee@@crmpro.com</p></div></div></td></tr>
|
||||
<tr class="bg-white hover:bg-gray-50/50 transition">
|
||||
<td class="px-4 py-3"><button class="expand-btn w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-4 h-4 expand-icon transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></button></td>
|
||||
<td class="px-4 py-3"><div class="flex items-center gap-3"><div class="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0" style="background:#8b5cf6;">RP</div><div><p class="text-sm font-semibold text-gray-800">Robert Patel</p><p class="text-xs text-gray-400">r.patel@@crmpro.com</p></div></div></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700">Finance</td>
|
||||
<td class="px-4 py-3 text-center"><div class="flex items-center justify-center gap-0.5"><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg><svg class="w-3.5 h-3.5 text-gray-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg></div><span class="text-[10px] text-gray-400 mt-0.5 block">4.0 / 5.0</span></td>
|
||||
<td class="px-4 py-3 text-sm text-gray-500">Sep 02, 2020</td>
|
||||
<td class="px-4 py-3 text-center"><div class="relative inline-block" x-data="{ open: false }"><button x-on:click="open = !open" class="p-1.5 rounded-lg hover:bg-gray-100 transition text-gray-400 hover:text-gray-600"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg></button><div x-show="open" x-on:click.away="open = false" class="absolute right-0 mt-1 w-40 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1 text-sm" style="display:none;"><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">View Profile</a><a href="#" class="block px-3 py-1.5 text-gray-700 hover:bg-gray-50">Edit</a><a href="#" class="block px-3 py-1.5 text-red-600 hover:bg-red-50">Deactivate</a></div></div></td>
|
||||
</tr>
|
||||
<tr class="expand-detail hidden"><td colspan="6" class="px-4 py-4 bg-gray-50/70 border-b border-gray-100"><div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm"><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Position</p><p class="text-gray-700 font-medium">Finance Controller</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Team Size</p><p class="text-gray-700 font-medium">4 members</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Location</p><p class="text-gray-700 font-medium">Bangkok, TH</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget Managed</p><p class="text-gray-700 font-medium">$2.4M</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Audit Status</p><p class="text-gray-700 font-medium">Clean</p></div><div><p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Email</p><p class="text-gray-700 font-medium">r.patel@@crmpro.com</p></div></div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex items-center justify-between text-xs text-gray-400">
|
||||
<span>Showing <b class="text-gray-600">4</b> of <b class="text-gray-600">28</b> employees</span>
|
||||
<span>Avg performance: <b class="text-amber-500">4.25 ★</b></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden anim-fade anim-delay-5">
|
||||
<div class="p-5 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<div><h3 class="font-bold text-gray-900 text-lg">Complete Enterprise DataTable with Pagination</h3><p class="text-xs text-gray-400 mt-0.5">Financial transactions with horizontal scroll and pagination controls</p></div>
|
||||
<span class="text-xs text-blue-600 font-semibold cursor-pointer hover:underline">View All Transactions →</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">ID Transaksi</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Asal</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Akun Tujuan</th>
|
||||
<th class="text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Nominal</th>
|
||||
<th class="text-center text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Status</th>
|
||||
<th class="text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 px-4 py-3.5 border-b border-gray-100">Metode</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="transactions-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="transactions-pagination" class="px-4 py-3 bg-gray-50/40 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-gray-400">
|
||||
<span id="transactions-info">Showing <b class="text-gray-600">1</b> to <b class="text-gray-600">10</b> of <b class="text-gray-600">120</b> entries</span>
|
||||
<div id="transactions-page-btns" class="flex items-center gap-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/datatables.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forms1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"><div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div><div class="flex items-center gap-2"><select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select></div></div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div>
|
||||
</div>
|
||||
<div class="border-l border-gray-100 pl-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
|
||||
<div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
|
||||
<div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
|
||||
<div class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forms2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"><div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div><div class="flex items-center gap-2"><select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select></div></div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div>
|
||||
</div>
|
||||
<div class="border-l border-gray-100 pl-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
|
||||
<div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
|
||||
<div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
|
||||
<div class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forms3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3"><div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div><div class="flex items-center gap-2"><select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select></div></div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
<div class="border-l border-gray-100 pl-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
|
||||
<div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">15+ years in financial management and strategic planning.</textarea></div>
|
||||
<div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-indigo-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-indigo-600 min-w-[3rem]">11%</span></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
|
||||
<div class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forms4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div>
|
||||
<div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
<div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
<div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
<div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
<div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div>
|
||||
<div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div>
|
||||
<div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div>
|
||||
<div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
<div class="border-l border-gray-100 pl-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
|
||||
<div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">15+ years in financial management and strategic planning.</textarea></div>
|
||||
<div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
|
||||
<div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div>
|
||||
<div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-indigo-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-indigo-600 min-w-[3rem]">11%</span></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-indigo-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
|
||||
<div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div>
|
||||
<div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-400"><span class="text-sm text-gray-700">Manual</span></label></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #6366f1;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
@{
|
||||
ViewData["Title"] = "Forms5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
|
||||
<div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
<div class="border-l border-gray-100 pl-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
|
||||
<div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
|
||||
<div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
|
||||
<div class="space-y-5">
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
|
||||
<div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
|
||||
<div class="grid grid-cols-3 gap-x-6 gap-y-4">
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
|
||||
<div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
|
||||
<div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
|
||||
</div>
|
||||
<div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
@{
|
||||
ViewData["Title"] = "Pickers1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/pickers-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
|
||||
<option value="" disabled selected>Choose an option</option>
|
||||
<option value="option1">Option One</option>
|
||||
<option value="option2">Option Two</option>
|
||||
<option value="option3">Option Three</option>
|
||||
<option value="option4">Option Four</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<option value="" disabled selected>Search category</option>
|
||||
<option value="users">Users</option>
|
||||
<option value="orders">Orders</option>
|
||||
<option value="products">Products</option>
|
||||
<option value="invoices">Invoices</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
|
||||
</div>
|
||||
<div class="max-w-lg">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
|
||||
<div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
|
||||
<div class="relative">
|
||||
<div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
|
||||
<template x-for="item in selected" :key="item">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
<span x-text="item"></span>
|
||||
<button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="selected.length === 0">
|
||||
<span class="text-gray-400 py-1">Pick skills...</span>
|
||||
</template>
|
||||
<span class="ml-auto flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
|
||||
<template x-for="item in items" :key="item">
|
||||
<div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
|
||||
<div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
|
||||
<svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
|
||||
<div class="relative">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm">—</span>
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
|
||||
<div x-data="{ val: '2026-07-06' }" class="relative">
|
||||
<div class="relative">
|
||||
<input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
|
||||
<div class="relative">
|
||||
<input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
|
||||
</div>
|
||||
<div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
|
||||
<div class="relative">
|
||||
<button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="selected"></span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="t in times" :key="t">
|
||||
<div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
|
||||
<div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
|
||||
<div class="flex items-center gap-2">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
|
||||
<span x-text="selected" class="text-gray-700"></span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<template x-for="c in colors" :key="c">
|
||||
<button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
|
||||
<div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
|
||||
<span x-text="selected"></span>
|
||||
</span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
|
||||
<template x-for="opt in options" :key="opt.label">
|
||||
<div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
|
||||
<span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
|
||||
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
@{
|
||||
ViewData["Title"] = "Pickers2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/pickers-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
|
||||
<option value="" disabled selected>Choose an option</option>
|
||||
<option value="option1">Option One</option>
|
||||
<option value="option2">Option Two</option>
|
||||
<option value="option3">Option Three</option>
|
||||
<option value="option4">Option Four</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<option value="" disabled selected>Search category</option>
|
||||
<option value="users">Users</option>
|
||||
<option value="orders">Orders</option>
|
||||
<option value="products">Products</option>
|
||||
<option value="invoices">Invoices</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
|
||||
</div>
|
||||
<div class="max-w-lg">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
|
||||
<div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
|
||||
<div class="relative">
|
||||
<div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
|
||||
<template x-for="item in selected" :key="item">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
<span x-text="item"></span>
|
||||
<button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="selected.length === 0">
|
||||
<span class="text-gray-400 py-1">Pick skills...</span>
|
||||
</template>
|
||||
<span class="ml-auto flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
|
||||
<template x-for="item in items" :key="item">
|
||||
<div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
|
||||
<div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
|
||||
<svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
|
||||
<div class="relative">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm">—</span>
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
|
||||
<div x-data="{ val: '2026-07-06' }" class="relative">
|
||||
<div class="relative">
|
||||
<input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
|
||||
<div class="relative">
|
||||
<input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
|
||||
</div>
|
||||
<div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
|
||||
<div class="relative">
|
||||
<button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="selected"></span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="t in times" :key="t">
|
||||
<div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
|
||||
<div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
|
||||
<div class="flex items-center gap-2">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
|
||||
<span x-text="selected" class="text-gray-700"></span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<template x-for="c in colors" :key="c">
|
||||
<button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
|
||||
<div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
|
||||
<span x-text="selected"></span>
|
||||
</span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
|
||||
<template x-for="opt in options" :key="opt.label">
|
||||
<div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
|
||||
<span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
|
||||
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
@{
|
||||
ViewData["Title"] = "Pickers3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/pickers-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
|
||||
<option value="" disabled selected>Choose an option</option>
|
||||
<option value="option1">Option One</option>
|
||||
<option value="option2">Option Two</option>
|
||||
<option value="option3">Option Three</option>
|
||||
<option value="option4">Option Four</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<option value="" disabled selected>Search category</option>
|
||||
<option value="users">Users</option>
|
||||
<option value="orders">Orders</option>
|
||||
<option value="products">Products</option>
|
||||
<option value="invoices">Invoices</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
|
||||
</div>
|
||||
<div class="max-w-lg">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
|
||||
<div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
|
||||
<div class="relative">
|
||||
<div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
|
||||
<template x-for="item in selected" :key="item">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
<span x-text="item"></span>
|
||||
<button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="selected.length === 0">
|
||||
<span class="text-gray-400 py-1">Pick skills...</span>
|
||||
</template>
|
||||
<span class="ml-auto flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
|
||||
<template x-for="item in items" :key="item">
|
||||
<div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
|
||||
<div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
|
||||
<svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
|
||||
<div class="relative">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm">—</span>
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
|
||||
<div x-data="{ val: '2026-07-06' }" class="relative">
|
||||
<div class="relative">
|
||||
<input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
|
||||
<div class="relative">
|
||||
<input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
|
||||
</div>
|
||||
<div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
|
||||
<div class="relative">
|
||||
<button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="selected"></span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="t in times" :key="t">
|
||||
<div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
|
||||
<div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
|
||||
<div class="flex items-center gap-2">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
|
||||
<span x-text="selected" class="text-gray-700"></span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<template x-for="c in colors" :key="c">
|
||||
<button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
|
||||
<div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
|
||||
<span x-text="selected"></span>
|
||||
</span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
|
||||
<template x-for="opt in options" :key="opt.label">
|
||||
<div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
|
||||
<span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
|
||||
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
@{
|
||||
ViewData["Title"] = "Pickers4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/pickers-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
|
||||
<option value="" disabled selected>Choose an option</option>
|
||||
<option value="option1">Option One</option>
|
||||
<option value="option2">Option Two</option>
|
||||
<option value="option3">Option Three</option>
|
||||
<option value="option4">Option Four</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<option value="" disabled selected>Search category</option>
|
||||
<option value="users">Users</option>
|
||||
<option value="orders">Orders</option>
|
||||
<option value="products">Products</option>
|
||||
<option value="invoices">Invoices</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
|
||||
</div>
|
||||
<div class="max-w-lg">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
|
||||
<div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
|
||||
<div class="relative">
|
||||
<div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
|
||||
<template x-for="item in selected" :key="item">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
<span x-text="item"></span>
|
||||
<button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="selected.length === 0">
|
||||
<span class="text-gray-400 py-1">Pick skills...</span>
|
||||
</template>
|
||||
<span class="ml-auto flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
|
||||
<template x-for="item in items" :key="item">
|
||||
<div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
|
||||
<div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
|
||||
<svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
|
||||
<div class="relative">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm">—</span>
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
|
||||
<div x-data="{ val: '2026-07-06' }" class="relative">
|
||||
<div class="relative">
|
||||
<input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
|
||||
<div class="relative">
|
||||
<input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
|
||||
</div>
|
||||
<div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
|
||||
<div class="relative">
|
||||
<button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="selected"></span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="t in times" :key="t">
|
||||
<div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
|
||||
<div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
|
||||
<div class="flex items-center gap-2">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
|
||||
<span x-text="selected" class="text-gray-700"></span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<template x-for="c in colors" :key="c">
|
||||
<button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
|
||||
<div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
|
||||
<span x-text="selected"></span>
|
||||
</span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
|
||||
<template x-for="opt in options" :key="opt.label">
|
||||
<div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
|
||||
<span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
|
||||
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,303 @@
|
||||
@{
|
||||
ViewData["Title"] = "Pickers5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/pickers-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
|
||||
<option value="" disabled selected>Choose an option</option>
|
||||
<option value="option1">Option One</option>
|
||||
<option value="option2">Option Two</option>
|
||||
<option value="option3">Option Three</option>
|
||||
<option value="option4">Option Four</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<option value="" disabled selected>Search category</option>
|
||||
<option value="users">Users</option>
|
||||
<option value="orders">Orders</option>
|
||||
<option value="products">Products</option>
|
||||
<option value="invoices">Invoices</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
|
||||
<div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
</div>
|
||||
<input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="(item, idx) in filtered()" :key="idx">
|
||||
<div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
|
||||
</div>
|
||||
<div class="max-w-lg">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
|
||||
<div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
|
||||
<div class="relative">
|
||||
<div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
|
||||
<template x-for="item in selected" :key="item">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
<span x-text="item"></span>
|
||||
<button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="selected.length === 0">
|
||||
<span class="text-gray-400 py-1">Pick skills...</span>
|
||||
</template>
|
||||
<span class="ml-auto flex items-center">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
|
||||
<template x-for="item in items" :key="item">
|
||||
<div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
|
||||
<div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
|
||||
<svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
|
||||
<div class="relative">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-gray-400 text-sm">—</span>
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
|
||||
<div x-data="{ val: '2026-07-06' }" class="relative">
|
||||
<div class="relative">
|
||||
<input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
<button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
|
||||
<div class="relative">
|
||||
<input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
|
||||
</div>
|
||||
<div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
|
||||
<div class="relative">
|
||||
<button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
<span x-text="selected"></span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
|
||||
<template x-for="t in times" :key="t">
|
||||
<div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative flex-1">
|
||||
<input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
|
||||
<div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
|
||||
<div class="flex items-center gap-2">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
|
||||
<span x-text="selected" class="text-gray-700"></span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
|
||||
<div class="grid grid-cols-4 gap-2">
|
||||
<template x-for="c in colors" :key="c">
|
||||
<button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
|
||||
<div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
|
||||
<button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
|
||||
<span x-text="selected"></span>
|
||||
</span>
|
||||
<svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
|
||||
<template x-for="opt in options" :key="opt.label">
|
||||
<div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
|
||||
<span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
|
||||
<span class="text-sm text-gray-700" x-text="opt.label"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
@{
|
||||
ViewData["Title"] = "Selection1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Remember me</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Send notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Enable two-factor auth</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled unchecked</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled checked</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Indeterminate state</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Toggle indeterminate</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Email notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">SMS notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Push notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
|
||||
</div>
|
||||
<div x-data="{ selected: 'daily' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['daily','weekly','monthly']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
|
||||
<div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['low','medium','high']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ selected: 'starter' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
|
||||
<label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Wi-Fi</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Bluetooth</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Dark Mode</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Notifications</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">VPN</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Auto-sync</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Legacy mode</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Beta features</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Experimental</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 50 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
|
||||
<div class="px-1 py-4">
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
|
||||
</div>
|
||||
<div x-data="{ val: 65 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
|
||||
<div class="relative pt-7 px-1">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
|
||||
</div>
|
||||
<div x-data="{ val: 3 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
|
||||
<div class="relative pt-6 px-1">
|
||||
<div class="absolute top-0 left-0 right-0 flex justify-between px-0">
|
||||
<template x-for="i in [1,2,3,4,5]" :key="i">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
|
||||
<div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 75 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 30 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 42 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 font-semibold">$0</span>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-xs text-gray-500 font-semibold">$100</span>
|
||||
<span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
|
||||
</div>
|
||||
<div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['realtime','hourly','daily']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
|
||||
<button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
|
||||
<button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
|
||||
<div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
@{
|
||||
ViewData["Title"] = "Selection2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Remember me</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Send notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Enable two-factor auth</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled unchecked</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled checked</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Indeterminate state</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Toggle indeterminate</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Email notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">SMS notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Push notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
|
||||
</div>
|
||||
<div x-data="{ selected: 'daily' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['daily','weekly','monthly']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
|
||||
<div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['low','medium','high']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ selected: 'starter' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
|
||||
<label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Wi-Fi</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Bluetooth</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Dark Mode</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Notifications</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">VPN</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Auto-sync</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Legacy mode</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Beta features</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Experimental</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 50 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
|
||||
<div class="px-1 py-4">
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
|
||||
</div>
|
||||
<div x-data="{ val: 65 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
|
||||
<div class="relative pt-7 px-1">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
|
||||
</div>
|
||||
<div x-data="{ val: 3 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
|
||||
<div class="relative pt-6 px-1">
|
||||
<div class="absolute top-0 left-0 right-0 flex justify-between px-0">
|
||||
<template x-for="i in [1,2,3,4,5]" :key="i">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
|
||||
<div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 75 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 30 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 42 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 font-semibold">$0</span>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-xs text-gray-500 font-semibold">$100</span>
|
||||
<span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
|
||||
</div>
|
||||
<div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['realtime','hourly','daily']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
|
||||
<button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
|
||||
<button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
|
||||
<div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
@{
|
||||
ViewData["Title"] = "Selection3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Remember me</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Send notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Enable two-factor auth</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled unchecked</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled checked</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Indeterminate state</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Toggle indeterminate</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Email notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">SMS notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Push notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
|
||||
</div>
|
||||
<div x-data="{ selected: 'daily' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['daily','weekly','monthly']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
|
||||
<div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['low','medium','high']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ selected: 'starter' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
|
||||
<label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Wi-Fi</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Bluetooth</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Dark Mode</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Notifications</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">VPN</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Auto-sync</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Legacy mode</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Beta features</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Experimental</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 50 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
|
||||
<div class="px-1 py-4">
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
|
||||
</div>
|
||||
<div x-data="{ val: 65 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
|
||||
<div class="relative pt-7 px-1">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
|
||||
</div>
|
||||
<div x-data="{ val: 3 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
|
||||
<div class="relative pt-6 px-1">
|
||||
<div class="absolute top-0 left-0 right-0 flex justify-between px-0">
|
||||
<template x-for="i in [1,2,3,4,5]" :key="i">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
|
||||
<div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 75 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 30 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 42 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 font-semibold">$0</span>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-xs text-gray-500 font-semibold">$100</span>
|
||||
<span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
|
||||
</div>
|
||||
<div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['realtime','hourly','daily']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
|
||||
<button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
|
||||
<button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
|
||||
<div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
@{
|
||||
ViewData["Title"] = "Selection4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Remember me</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Send notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Enable two-factor auth</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled unchecked</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled checked</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Indeterminate state</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Toggle indeterminate</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Email notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">SMS notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Push notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
|
||||
</div>
|
||||
<div x-data="{ selected: 'daily' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['daily','weekly','monthly']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
|
||||
<div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['low','medium','high']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ selected: 'starter' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
|
||||
<label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Wi-Fi</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Bluetooth</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Dark Mode</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Notifications</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">VPN</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Auto-sync</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Legacy mode</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Beta features</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Experimental</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 50 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
|
||||
<div class="px-1 py-4">
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
|
||||
</div>
|
||||
<div x-data="{ val: 65 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
|
||||
<div class="relative pt-7 px-1">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
|
||||
</div>
|
||||
<div x-data="{ val: 3 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
|
||||
<div class="relative pt-6 px-1">
|
||||
<div class="absolute top-0 left-0 right-0 flex justify-between px-0">
|
||||
<template x-for="i in [1,2,3,4,5]" :key="i">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
|
||||
<div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 75 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 30 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 42 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 font-semibold">$0</span>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-xs text-gray-500 font-semibold">$100</span>
|
||||
<span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
|
||||
</div>
|
||||
<div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['realtime','hourly','daily']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
|
||||
<button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
|
||||
<button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
|
||||
<div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
@{
|
||||
ViewData["Title"] = "Selection5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Controls: Selection & Sliders</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of checkboxes, radio buttons, toggle switches, and range sliders</p></div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
|
||||
<button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Checkboxes</h3><p class="text-xs text-gray-400 mt-0.5">Standard, custom card, and disabled/indeterminate states</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Remember me</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Send notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Enable two-factor auth</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Native checkbox styled with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Checkbox</label>
|
||||
<div class="space-y-2.5">
|
||||
<label x-data="{ checked: true }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Basic Plan</p><p class="text-xs text-gray-400">$9 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Pro Plan</p><p class="text-xs text-gray-400">$29 / month</p></div>
|
||||
</label>
|
||||
<label x-data="{ checked: false }" class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="checked ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="checkbox" x-model="checked" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800">Enterprise Plan</p><p class="text-xs text-gray-400">$99 / month</p></div>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Entire card highlights when checked</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled & Indeterminate</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled unchecked</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<input type="checkbox" disabled checked class="w-4 h-4 rounded border-gray-300 text-gray-400">
|
||||
<span class="text-sm text-gray-400">Disabled checked</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: true }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet" x-init="$refs.indet.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Indeterminate state</span>
|
||||
</label>
|
||||
<label x-data="{ indeterminate: false }" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<div class="relative">
|
||||
<input type="checkbox" x-ref="indet2" x-init="$refs.indet2.indeterminate = indeterminate" x-on:click="indeterminate = !indeterminate; $refs.indet2.indeterminate = indeterminate" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
</div>
|
||||
<span class="text-sm text-gray-700">Toggle indeterminate</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Disabled (greyed out) and indeterminate (dash) visual states</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Advanced Radio Buttons</h3><p class="text-xs text-gray-400 mt-0.5">Standard, segmented button group, and custom card variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Email notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">SMS notifications</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<input type="radio" name="std-radio" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<span class="text-sm text-gray-700">Push notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clear circle selection indicator</p>
|
||||
</div>
|
||||
<div x-data="{ selected: 'daily' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Radio Group Buttons</label>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['daily','weekly','monthly']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-3">Attached button group — one active selection</p>
|
||||
<div class="mt-3 inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['low','medium','high']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="selected === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="seg-group2" x-model="selected" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ selected: 'starter' }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Custom Card Radio</label>
|
||||
<div class="space-y-2.5">
|
||||
<template x-for="opt in [{val:'starter',label:'Starter',price:'Free',desc:'Basic features'},{val:'growth',label:'Growth',price:'$19/mo',desc:'Advanced analytics'},{val:'scale',label:'Scale',price:'$49/mo',desc:'Full platform access'}]" :key="opt.val">
|
||||
<label class="flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition" x-bind:class="selected === opt.val ? 'border-blue-400 bg-blue-50' : 'border-gray-200 bg-white'">
|
||||
<input type="radio" name="card-radio" x-model="selected" x-bind:value="opt.val" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400 focus:ring-offset-1">
|
||||
<div><p class="text-sm font-medium text-gray-800" x-text="opt.label"></p><p class="text-xs text-gray-400"><span x-text="opt.price"></span> · <span x-text="opt.desc"></span></p></div>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Only one card can be active at a time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Toggle Switches</h3><p class="text-xs text-gray-400 mt-0.5">Standard, icon/text inside, and disabled variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Wi-Fi</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Bluetooth</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Dark Mode</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Smooth sliding animation with accent color</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Switch with Icon / Text Inside</label>
|
||||
<div class="space-y-3">
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Notifications</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-emerald-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: false }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">VPN</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-14 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-violet-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm text-[8px] font-bold transition-transform duration-200" x-bind:class="on ? 'translate-x-8 text-violet-600' : 'translate-x-1 text-gray-500'" x-text="on ? 'ON' : 'OFF'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label x-data="{ on: true }" class="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition cursor-pointer">
|
||||
<span class="text-sm text-gray-700">Auto-sync</span>
|
||||
<button type="button" x-on:click="on = !on" class="relative inline-flex h-7 w-12 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:class="on ? 'bg-amber-500' : 'bg-gray-200'">
|
||||
<span class="inline-flex h-5 w-5 items-center justify-center transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="on ? 'translate-x-6' : 'translate-x-1'">
|
||||
<svg x-show="on" class="w-3 h-3 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
<svg x-show="!on" class="w-3 h-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01"/></svg>
|
||||
</span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Checkmark/cross icons, ON/OFF text, or sync icon inside handle</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Disabled Switch</label>
|
||||
<div class="space-y-3">
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Legacy mode</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Beta features</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-6"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2 rounded-lg opacity-60 cursor-not-allowed">
|
||||
<span class="text-sm text-gray-400">Experimental</span>
|
||||
<button type="button" disabled class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 cursor-not-allowed">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm translate-x-1"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Faded visual with disabled pointer events</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Custom Range Sliders</h3><p class="text-xs text-gray-400 mt-0.5">Standard, floating value, and step/tick variants</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 50 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Standard Slider</label>
|
||||
<div class="px-1 py-4">
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400"><span>0</span><span>50</span><span>100</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Clean track with rounded thumb accent color</p>
|
||||
</div>
|
||||
<div x-data="{ val: 65 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Floating Value</label>
|
||||
<div class="relative pt-7 px-1">
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-xs font-bold px-2 py-0.5 rounded" x-text="val"></div>
|
||||
<input type="range" min="0" max="100" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span>0%</span><span>50%</span><span>100%</span></div>
|
||||
<p class="text-xs text-gray-400 mt-2">Real-time value indicator above thumb</p>
|
||||
</div>
|
||||
<div x-data="{ val: 3 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Slider with Steps/Ticks</label>
|
||||
<div class="relative pt-6 px-1">
|
||||
<div class="absolute top-0 left-0 right-0 flex justify-between px-0">
|
||||
<template x-for="i in [1,2,3,4,5]" :key="i">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-1.5 h-1.5 rounded-full" x-bind:class="val >= i ? 'bg-blue-500' : 'bg-gray-300'"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<input type="range" min="1" max="5" step="1" x-model="val" class="w-full h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + ((val - 1) * 25) + '%, #e2e8f0 ' + ((val - 1) * 25) + '%, #e2e8f0 100%);'">
|
||||
<div class="flex justify-between text-xs text-gray-400 mt-1"><span x-text="'★'.repeat(val) + '☆'.repeat(5-val)" class="text-amber-400"></span></div>
|
||||
<div class="text-center text-sm font-medium text-gray-700 mt-1">Rating: <span x-text="val"></span>/5</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-2">Discrete steps with dot markers and star rating</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div x-data="{ val: 75 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Volume Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 30 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Brightness Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="val + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ val: 42 }">
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">Price Range Slider</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-xs text-gray-500 font-semibold">$0</span>
|
||||
<input type="range" min="0" max="100" x-model="val" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-1" x-bind:style="'background: linear-gradient(to right, #10b981 0%, #10b981 ' + val + '%, #e2e8f0 ' + val + '%, #e2e8f0 100%);'">
|
||||
<span class="text-xs text-gray-500 font-semibold">$100</span>
|
||||
<span class="text-sm font-bold text-emerald-600 w-12 text-right" x-text="'$'+val"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-4">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div><h3 class="font-bold text-gray-900">Contextual Grouping — Notification Settings</h3><p class="text-xs text-gray-400 mt-0.5">Real-world form combining checkbox, radio, switch, and slider components</p></div>
|
||||
</div>
|
||||
<div x-data="{ email_notif: true, push_notif: true, sms_notif: false, frequency: 'realtime', volume: 70, theme_val: 'light', brightness: 80 }" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Channels</h4>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="email_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Email Notifications</p><p class="text-xs text-gray-400">Receive updates via email</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="push_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">Push Notifications</p><p class="text-xs text-gray-400">Receive updates via browser push</p></div>
|
||||
</label>
|
||||
<label class="flex items-center gap-3 p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<input type="checkbox" x-model="sms_notif" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-400">
|
||||
<div><p class="text-sm font-medium text-gray-700">SMS Notifications</p><p class="text-xs text-gray-400">Receive updates via text message</p></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Notification Frequency</h4>
|
||||
<div class="inline-flex rounded-lg border border-gray-200 overflow-hidden">
|
||||
<template x-for="opt in ['realtime','hourly','daily']" :key="opt">
|
||||
<label class="cursor-pointer" x-bind:class="frequency === opt ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50'">
|
||||
<input type="radio" name="freq" x-model="frequency" x-bind:value="opt" class="sr-only">
|
||||
<span class="px-4 py-2 text-sm font-medium block capitalize" x-text="opt"></span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Quick Toggles</h4>
|
||||
<div class="space-y-2.5">
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Dark Mode</p><p class="text-xs text-gray-400">Switch between light/dark</p></div>
|
||||
<button type="button" x-on:click="theme_val = theme_val === 'light' ? 'dark' : 'light'" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="theme_val === 'dark' ? 'bg-blue-600' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="theme_val === 'dark' ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
<label class="flex items-center justify-between p-2.5 rounded-lg hover:bg-gray-50 transition cursor-pointer border border-gray-100">
|
||||
<div><p class="text-sm font-medium text-gray-700">Do Not Disturb</p><p class="text-xs text-gray-400">Mute all notifications</p></div>
|
||||
<button type="button" x-on:click="email_notif = !email_notif; push_notif = !push_notif; sms_notif = !sms_notif" class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'bg-red-500' : 'bg-gray-200'">
|
||||
<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow-sm transition-transform duration-200" x-bind:class="!email_notif && !push_notif && !sms_notif ? 'translate-x-6' : 'translate-x-1'"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-sm font-semibold text-gray-800 mb-3">Volume & Brightness</h4>
|
||||
<div class="space-y-3 p-3 rounded-lg bg-gray-50 border border-gray-100">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-blue-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="volume" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" x-bind:style="'background: linear-gradient(to right, #3b82f6 0%, #3b82f6 ' + volume + '%, #e2e8f0 ' + volume + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="volume"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<svg class="w-5 h-5 text-amber-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
<input type="range" min="0" max="100" x-model="brightness" class="flex-1 h-2 rounded-full appearance-none cursor-pointer bg-gray-200 accent-amber-500 focus:outline-none focus:ring-2 focus:ring-amber-400" x-bind:style="'background: linear-gradient(to right, #f59e0b 0%, #f59e0b ' + brightness + '%, #e2e8f0 ' + brightness + '%, #e2e8f0 100%);'">
|
||||
<span class="text-sm font-medium text-gray-700 w-8 text-right" x-text="brightness + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,190 @@
|
||||
@{
|
||||
ViewData["Title"] = "Tabs1";
|
||||
ViewData["SidebarVariant"] = "1";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style1.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/tabs-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<option selected>All Sections</option>
|
||||
<option>Underline Tabs</option>
|
||||
<option>Pill Tabs</option>
|
||||
<option>Vertical Tabs</option>
|
||||
<option>Card Tabs</option>
|
||||
<option>Animated Tabs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div>
|
||||
<div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div>
|
||||
<div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Pill Tabs</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden p-4">
|
||||
<div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
|
||||
</div>
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Vertical Tabs</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
|
||||
<div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-5">
|
||||
<div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Card Tabs</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')">
|
||||
<div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div>
|
||||
</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')">
|
||||
<div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div>
|
||||
</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')">
|
||||
<div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div>
|
||||
</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')">
|
||||
<div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
|
||||
<div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
|
||||
<div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5">
|
||||
<div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-gray-900">Animated Tabs</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
|
||||
<div role="tablist" class="flex items-end gap-0" id="tablistA1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
|
||||
<div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/tabs.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@{
|
||||
ViewData["Title"] = "Tabs2";
|
||||
ViewData["SidebarVariant"] = "2";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style2.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/tabs-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<option selected>All Sections</option>
|
||||
<option>Underline Tabs</option>
|
||||
<option>Pill Tabs</option>
|
||||
<option>Vertical Tabs</option>
|
||||
<option>Card Tabs</option>
|
||||
<option>Animated Tabs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden p-4">
|
||||
<div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
|
||||
</div>
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
|
||||
<div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
|
||||
<div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-5">
|
||||
<div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
|
||||
</div>
|
||||
<div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
|
||||
<div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
|
||||
<div role="tablist" class="flex items-end gap-0" id="tablistA1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
|
||||
<div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/tabs.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@{
|
||||
ViewData["Title"] = "Tabs3";
|
||||
ViewData["SidebarVariant"] = "3";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/tabs-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<option selected>All Sections</option>
|
||||
<option>Underline Tabs</option>
|
||||
<option>Pill Tabs</option>
|
||||
<option>Vertical Tabs</option>
|
||||
<option>Card Tabs</option>
|
||||
<option>Animated Tabs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden p-4">
|
||||
<div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
|
||||
</div>
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
|
||||
<div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
|
||||
<div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-5">
|
||||
<div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
|
||||
</div>
|
||||
<div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
|
||||
<div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
|
||||
<div role="tablist" class="flex items-end gap-0" id="tablistA1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
|
||||
<div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/tabs.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@{
|
||||
ViewData["Title"] = "Tabs4";
|
||||
ViewData["SidebarVariant"] = "4";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style4.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/tabs-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<option selected>All Sections</option>
|
||||
<option>Underline Tabs</option>
|
||||
<option>Pill Tabs</option>
|
||||
<option>Vertical Tabs</option>
|
||||
<option>Card Tabs</option>
|
||||
<option>Animated Tabs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden p-4">
|
||||
<div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
|
||||
</div>
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
|
||||
<div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
|
||||
<div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-5">
|
||||
<div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
|
||||
</div>
|
||||
<div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
|
||||
<div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
|
||||
<div role="tablist" class="flex items-end gap-0" id="tablistA1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
|
||||
<div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/tabs.js" asp-append-version="true"></script>
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
@{
|
||||
ViewData["Title"] = "Tabs5";
|
||||
ViewData["SidebarVariant"] = "5";
|
||||
}
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="/css/style5.css" asp-append-version="true" />
|
||||
<link rel="stylesheet" href="/css/tabs-page.css" asp-append-version="true" />
|
||||
}
|
||||
|
||||
<div class="p-4 md:p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
|
||||
<p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
||||
<option selected>All Sections</option>
|
||||
<option>Underline Tabs</option>
|
||||
<option>Pill Tabs</option>
|
||||
<option>Vertical Tabs</option>
|
||||
<option>Card Tabs</option>
|
||||
<option>Animated Tabs</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden p-4">
|
||||
<div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
|
||||
</div>
|
||||
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
<div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
|
||||
<div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
|
||||
<div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-5">
|
||||
<div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
|
||||
</div>
|
||||
<div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
|
||||
<div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
|
||||
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
|
||||
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
|
||||
<div role="tablist" class="flex items-end gap-0" id="tablistA1">
|
||||
<button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
|
||||
<button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
|
||||
<div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
|
||||
<div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="/js/tabs.js" asp-append-version="true"></script>
|
||||
}
|
||||
Reference in New Issue
Block a user