167 lines
5.9 KiB
HTML
167 lines
5.9 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Chia sẻ lời tri ân</title>
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body {
|
|
background: linear-gradient(
|
|
135deg,
|
|
#1e3a8a 0%,
|
|
#3b82f6 50%,
|
|
#eff6ff 100%
|
|
);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
Roboto,
|
|
Oxygen,
|
|
Ubuntu,
|
|
Cantarell,
|
|
sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="p-4 sm:p-6 md:p-8">
|
|
<!-- Khung chứa Form: Responsive padding, bo góc và độ rộng -->
|
|
<div
|
|
class="bg-white rounded-2xl shadow-2xl w-full max-w-xl p-6 sm:p-8 md:p-10 relative my-auto"
|
|
>
|
|
<!-- Tiêu đề -->
|
|
<h2 class="text-xl sm:text-2xl font-bold text-blue-900 mb-6">
|
|
Chia sẻ lời tri ân
|
|
</h2>
|
|
|
|
<!-- Form chính -->
|
|
<form
|
|
onsubmit="
|
|
event.preventDefault();
|
|
alert('Gửi thông tin thành công!');
|
|
"
|
|
class="space-y-4 sm:space-y-5"
|
|
>
|
|
<!-- Họ tên -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1"
|
|
>Họ tên <span class="text-red-500">*</span></label
|
|
>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="Nhập họ tên"
|
|
class="w-full px-3.5 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm placeholder-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Bạn là & Chức vụ (Responsive Grid: 1 cột trên mobile, 2 cột từ màn hình sm trở lên) -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label
|
|
class="block text-xs sm:text-sm font-medium text-gray-700 mb-1"
|
|
>Bạn là <span class="text-red-500">*</span></label
|
|
>
|
|
<select
|
|
required
|
|
class="w-full px-3.5 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm bg-white text-gray-500"
|
|
>
|
|
<option value="" disabled selected>Chọn vai trò</option>
|
|
<option value="bac-si">Bác sĩ / Nhân viên y tế</option>
|
|
<option value="benh-nhan">Bệnh nhân / Người nhà</option>
|
|
<option value="khac">Khác</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label
|
|
class="block text-xs sm:text-sm font-medium text-gray-700 mb-1"
|
|
>Chức vụ/ Nơi làm việc của bạn
|
|
<span class="text-red-500">*</span></label
|
|
>
|
|
<input
|
|
type="text"
|
|
required
|
|
placeholder="Nhập chức vụ/ nơi làm việc"
|
|
class="w-full px-3.5 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm placeholder-gray-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Số điện thoại -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1"
|
|
>Số điện thoại <span class="text-red-500">*</span></label
|
|
>
|
|
<input
|
|
type="tel"
|
|
required
|
|
placeholder="Nhập số điện thoại"
|
|
class="w-full px-3.5 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm placeholder-gray-400"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Nội dung lời nhắn -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1"
|
|
>Nội dung lời nhắn <span class="text-red-500">*</span></label
|
|
>
|
|
<textarea
|
|
rows="3"
|
|
required
|
|
placeholder="Nhập nội dung"
|
|
class="w-full px-3.5 py-2.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm placeholder-gray-400 resize-none"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Tải lên hình ảnh -->
|
|
<div>
|
|
<label class="block text-xs sm:text-sm font-medium text-gray-700 mb-1"
|
|
>Hình ảnh <span class="text-red-500">*</span></label
|
|
>
|
|
<label
|
|
class="flex flex-col items-center justify-center w-28 h-28 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 bg-gray-50 transition"
|
|
>
|
|
<div
|
|
class="flex flex-col items-center justify-center pt-5 pb-6 text-gray-400"
|
|
>
|
|
<svg
|
|
class="w-6 h-6 mb-1"
|
|
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="2"
|
|
d="M12 4v16m8-8H4"
|
|
></path>
|
|
</svg>
|
|
<span class="text-xs">Tải tệp</span>
|
|
</div>
|
|
<input type="file" class="hidden" accept="image/*" required />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Nút gửi (Full width trên điện thoại, kích thước vừa vặn trên desktop) -->
|
|
<div class="pt-2">
|
|
<button
|
|
type="submit"
|
|
class="w-full sm:w-auto px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm rounded-lg shadow transition duration-200 text-center"
|
|
>
|
|
Gửi thông tin
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|