1. Phần mở đầu (Khai báo tài liệu & cấu hình)
<!DOCTYPE html>
<html lang="vi">
2. Phần <head> – Thông tin cấu hình & tài nguyên
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trang Học Online Cá Nhân Hóa</title>
<!-- Gọi Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Style tùy chỉnh -->
<style>
.modal {
display: none;
position: fixed;
z-index: 50;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
}
.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
max-width: 90%;
}
</style>
</head>
3. Phần <body> – Giao diện chính
<body class="bg-gray-100 text-gray-800">
4. Header – Thanh trên cùng
<header class="bg-white shadow p-4 flex justify-between items-center">
<h1 class="text-xl font-bold">Khóa Học Cá Nhân Hóa</h1>
<button onclick="logout()" class="text-red-500">Đăng xuất</button>
</header>
5. Main – Nội dung chính
<main class="p-4 max-w-3xl mx-auto">
<!-- Tiêu đề video -->
<h2 class="text-lg font-semibold mb-2">Video mỗi ngày</h2>
<!-- Video nhúng (YouTube) -->
<div class="aspect-video mb-4">
<iframe class="w-full h-full rounded"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Video hôm nay"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
<!-- Danh sách khóa học -->
<h2 class="text-lg font-semibold mb-2">Khóa học C1 - Tư Duy Cốt Lõi</h2>
<div id="courseList" class="space-y-2"></div>
</main>
6. Modal – Thông báo nâng cấp (ẩn)
<div id="upgradeModal" class="modal">
<div class="modal-content">
<p>Bạn cần nâng cấp để xem nội dung này.</p>
<button onclick="closeModal()">Đóng</button>
</div>
</div>
7. Kết thúc body & HTML
</body>
</html>
0 Nhận xét