feat: implement Google Form plugin and enhance TinyMCE editor with advanced configuration attributes
This commit is contained in:
+145
-259
@@ -3,278 +3,164 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Trang Tin Tức - Bài Viết Nổi Bật</title>
|
||||
<title>Chia sẻ lời tri ân</title>
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* ===================================================
|
||||
1. RESET & BASIC STYLES
|
||||
=================================================== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8fafc;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
2. GRID LAYOUT CHÍNH (12 CỘT)
|
||||
=================================================== */
|
||||
.news-section {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Component thẻ Badge (TIN TỨC / SỰ KIỆN) */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
background-color: #f1f5f9;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
3. CỘT TRÁI - BÀI VIẾT NỔI BẬT (FEATURED POST)
|
||||
=================================================== */
|
||||
.featured-post {
|
||||
grid-column: span 6; /* Chiếm 6/12 cột */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.featured-img-box {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.featured-post:hover .featured-img-box img {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#1e3a8a 0%,
|
||||
#3b82f6 50%,
|
||||
#eff6ff 100%
|
||||
);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: #0284c7; /* Màu xanh chủ đạo */
|
||||
line-height: 1.3;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.featured-title:hover {
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.featured-excerpt {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
4. CỘT PHẢI - LƯỚI 4 BÀI NHỎ (GRID 2x2)
|
||||
=================================================== */
|
||||
.side-news-grid {
|
||||
grid-column: span 6; /* Chiếm 6/12 cột còn lại */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* Tách thành 2 cột nhỏ */
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.small-post {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.small-img-box {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 10;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-img-box img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.small-post:hover .small-img-box img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
.small-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* Giới hạn tối đa 3 dòng */
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-post:hover .small-title {
|
||||
color: #0284c7;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
5. RESPONSIVE (Cho Tablet & Mobile)
|
||||
=================================================== */
|
||||
@media (max-width: 992px) {
|
||||
.featured-post,
|
||||
.side-news-grid {
|
||||
grid-column: span 12; /* Chuyển thành 1 cột dọc lớn */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.side-news-grid {
|
||||
grid-template-columns: 1fr; /* Lưới bài nhỏ chuyển thành 1 cột trên Mobile */
|
||||
}
|
||||
.featured-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
justify-content: center;
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Oxygen,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="news-section">
|
||||
<!-- CỘT TRÁI: Bài viết nổi bật lớn -->
|
||||
<article class="featured-post">
|
||||
<div class="featured-img-box">
|
||||
<img
|
||||
src="https://picsum.photos/800/450?random=1"
|
||||
alt="Nhà giáo nhân dân Nguyễn Đình Hối"
|
||||
<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>
|
||||
<div class="meta-row">
|
||||
<span class="badge">Tin tức</span>
|
||||
<span class="post-date">06/07/2026</span>
|
||||
|
||||
<!-- 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>
|
||||
<a href="#" class="featured-title">Thư cảm tạ</a>
|
||||
<p class="featured-excerpt">
|
||||
Đại học Y Dược Thành phố Hồ Chí Minh, Bệnh viện Đại học Y Dược Thành
|
||||
phố Hồ Chí Minh và gia quyến vô cùng xúc động và trân trọng gửi lời
|
||||
cảm tạ sâu sắc.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<!-- CỘT PHẢI: Lưới 4 bài viết nhỏ (2x2) -->
|
||||
<div class="side-news-grid">
|
||||
<!-- Bài nhỏ 1 -->
|
||||
<a href="#" class="small-post">
|
||||
<div class="small-img-box">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=2"
|
||||
alt="Tuần lễ thế giới nuôi con bằng sữa mẹ"
|
||||
/>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="badge">Sự kiện</span>
|
||||
</div>
|
||||
<h3 class="small-title">
|
||||
Tuần lễ thế giới nuôi con bằng sữa mẹ 2026
|
||||
</h3>
|
||||
<span class="post-date">04/08/2026</span>
|
||||
</a>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Bài nhỏ 2 -->
|
||||
<a href="#" class="small-post">
|
||||
<div class="small-img-box">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=3"
|
||||
alt="Đau lưng ở nhân viên văn phòng"
|
||||
/>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="badge">Tin tức</span>
|
||||
</div>
|
||||
<h3 class="small-title">
|
||||
Đau lưng ở nhân viên văn phòng: Đừng đợi đến khi cột sống “lên
|
||||
tiếng”
|
||||
</h3>
|
||||
<span class="post-date">01/08/2026</span>
|
||||
</a>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Bài nhỏ 3 -->
|
||||
<a href="#" class="small-post">
|
||||
<div class="small-img-box">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=4"
|
||||
alt="Bệnh lý miễn dịch thần kinh"
|
||||
/>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="badge">Tin tức</span>
|
||||
</div>
|
||||
<h3 class="small-title">
|
||||
‘Bệnh lý miễn dịch thần kinh - Phát hiện sớm để điều trị tốt’
|
||||
</h3>
|
||||
<span class="post-date">31/07/2026</span>
|
||||
</a>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Bài nhỏ 4 -->
|
||||
<a href="#" class="small-post">
|
||||
<div class="small-img-box">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=5"
|
||||
alt="Phẫu thuật nội soi"
|
||||
/>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<span class="badge">Tin tức</span>
|
||||
</div>
|
||||
<h3 class="small-title">
|
||||
Phẫu thuật nội soi cắt phì đại liên thất và thay van động mạch chủ
|
||||
</h3>
|
||||
<span class="post-date">30/07/2026</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 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>
|
||||
|
||||
Reference in New Issue
Block a user