144 lines
9.7 KiB
HTML
144 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Danh sách Bác sĩ</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background-color: #f8fafc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen py-12 px-4 flex flex-col items-center justify-center">
|
|
|
|
<!-- Lưới chứa danh sách card Bác sĩ -->
|
|
<div id="doctor-grid" class="max-w-6xl w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
|
|
<!-- CARD 1: BS CKII. Nguyễn Viết Hậu -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-lg border border-gray-100 flex flex-col justify-between hover:shadow-xl transition duration-300 relative">
|
|
<div>
|
|
<!-- Icon xe cấp cứu góc trên bên phải -->
|
|
<div class="absolute top-4 right-4 bg-blue-50/60 p-2 rounded-xl border border-blue-100">
|
|
<svg class="w-6 h-6 text-[#0073b7]" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
<!-- Icon xe cấp cứu cách điệu -->
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 17h1m8 0h1M3 9l2-4h10l2 4m-14 0h16v7a1 1 0 01-1 1H4a1 1 0 01-1-1V9z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Phần ảnh & Thông tin chính -->
|
|
<div class="flex items-start gap-4 mb-6">
|
|
<!-- Ảnh chân dung với viền xanh lam nhạt -->
|
|
<div class="w-28 h-32 rounded-lg overflow-hidden border-2 border-cyan-200 flex-shrink-0 bg-blue-50">
|
|
<img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?auto=format&fit=crop&w=300&q=80" alt="BS CKII. Nguyễn Viết Hậu" class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<!-- Chức danh & Họ tên -->
|
|
<div class="pt-2 pr-8">
|
|
<span class="text-xs font-semibold text-cyan-600 block mb-1">BS CKII.</span>
|
|
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1">Nguyễn Viết Hậu</h3>
|
|
<p class="text-cyan-600 text-sm font-medium">Trưởng Khoa Cấp cứu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Các nút hành động phía dưới -->
|
|
<div class="flex items-center gap-3 pt-2">
|
|
<!-- Nút Xem hồ sơ -->
|
|
<a href="#" class="flex-1 border-2 border-[#0073b7] text-[#0073b7] hover:bg-blue-50 font-semibold py-2 px-3 rounded-xl transition duration-200 text-center text-sm flex items-center justify-center gap-1.5">
|
|
<span>Xem hồ sơ</span>
|
|
<svg class="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 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
<!-- Nút Đặt lịch khám -->
|
|
<a href="#" class="flex-1 bg-[#0073b7] hover:bg-blue-700 text-white font-semibold py-2.5 px-3 rounded-xl transition duration-200 text-center text-sm flex items-center justify-center gap-1.5 shadow-sm">
|
|
<span>Đặt lịch khám</span>
|
|
<svg class="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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARD 2: BS CKI. Tăng Tuấn Phong -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-lg border border-gray-100 flex flex-col justify-between hover:shadow-xl transition duration-300 relative">
|
|
<div>
|
|
<div class="absolute top-4 right-4 bg-blue-50/60 p-2 rounded-xl border border-blue-100">
|
|
<svg class="w-6 h-6 text-[#0073b7]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 17h1m8 0h1M3 9l2-4h10l2 4m-14 0h16v7a1 1 0 01-1 1H4a1 1 0 01-1-1V9z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4 mb-6">
|
|
<div class="w-28 h-32 rounded-lg overflow-hidden border-2 border-cyan-200 flex-shrink-0 bg-blue-50">
|
|
<img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?auto=format&fit=crop&w=300&q=80" alt="BS CKI. Tăng Tuấn Phong" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="pt-2 pr-8">
|
|
<span class="text-xs font-semibold text-cyan-600 block mb-1">BS CKI.</span>
|
|
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1">Tăng Tuấn Phong</h3>
|
|
<p class="text-cyan-600 text-sm font-medium">Phó Trưởng Khoa Cấp cứu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 pt-2">
|
|
<a href="#" class="flex-1 border-2 border-[#0073b7] text-[#0073b7] hover:bg-blue-50 font-semibold py-2 px-3 rounded-xl transition duration-200 text-center text-sm flex items-center justify-center gap-1.5">
|
|
<span>Xem hồ sơ</span>
|
|
<svg class="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 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
<a href="#" class="flex-1 bg-[#0073b7] hover:bg-blue-700 text-white font-semibold py-2.5 px-3 rounded-xl transition duration-200 text-center text-sm flex items-center justify-center gap-1.5 shadow-sm">
|
|
<span>Đặt lịch khám</span>
|
|
<svg class="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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARD 3: TS BS. Nguyễn Tuấn Anh -->
|
|
<div class="bg-white rounded-2xl p-5 shadow-lg border border-gray-100 flex flex-col justify-between hover:shadow-xl transition duration-300 relative">
|
|
<div>
|
|
<div class="absolute top-4 right-4 bg-blue-50/60 p-2 rounded-xl border border-blue-100">
|
|
<svg class="w-6 h-6 text-[#0073b7]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M8 17h1m8 0h1M3 9l2-4h10l2 4m-14 0h16v7a1 1 0 01-1 1H4a1 1 0 01-1-1V9z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex items-start gap-4 mb-6">
|
|
<div class="w-28 h-32 rounded-lg overflow-hidden border-2 border-cyan-200 flex-shrink-0 bg-blue-50">
|
|
<img src="https://images.unsplash.com/photo-1537368910025-700350fe46c7?auto=format&fit=crop&w=300&q=80" alt="TS BS. Nguyễn Tuấn Anh" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="pt-2 pr-8">
|
|
<span class="text-xs font-semibold text-cyan-600 block mb-1">TS BS.</span>
|
|
<h3 class="font-bold text-gray-900 text-lg leading-snug mb-1">Nguyễn Tuấn Anh</h3>
|
|
<p class="text-cyan-600 text-sm font-medium">Khoa Cấp cứu</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3 pt-2">
|
|
<a href="#" class="flex-1 border-2 border-[#0073b7] text-[#0073b7] hover:bg-blue-50 font-semibold py-2 px-3 rounded-xl transition duration-200 text-center text-sm flex items-center justify-center gap-1.5">
|
|
<span>Xem hồ sơ</span>
|
|
<svg class="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 5l7 7-7 7"></path></svg>
|
|
</a>
|
|
<a href="#" class="flex-1 bg-[#0073b7] hover:bg-blue-700 text-white font-semibold py-2.5 px-3 rounded-xl transition duration-200 text-center text-sm flex items-center justify-center gap-1.5 shadow-sm">
|
|
<span>Đặt lịch khám</span>
|
|
<svg class="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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Nút Xem thêm ở giữa phía dưới -->
|
|
<button id="btn-load-more" class="bg-[#0073b7] hover:bg-blue-700 text-white font-semibold py-2.5 px-8 rounded-xl transition duration-200 text-sm shadow-md">
|
|
Xem thêm
|
|
</button>
|
|
|
|
<!-- JavaScript tương tác -->
|
|
<script>
|
|
document.getElementById('btn-load-more').addEventListener('click', function() {
|
|
alert('Đang tải thêm danh sách bác sĩ...');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |