Spaces:
Build error
Build error
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UniCode - Kho mã nguồn & Trình biên dịch</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Be Vietnam Pro', sans-serif; | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #e0e7ff 0%, #f0fdf4 100%); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| 100% { | |
| transform: translateY(0px); | |
| } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fade-in { | |
| animation: fadeInUp 0.4s ease-out forwards; | |
| } | |
| /* Custom Scrollbar for tabs */ | |
| .custom-scrollbar::-webkit-scrollbar { | |
| height: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f5f9; | |
| border-radius: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background-color: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background-color: #94a3b8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col"> | |
| <!-- HERO SECTION --> | |
| <header class="bg-white relative overflow-hidden border-b border-slate-100"> | |
| <!-- Background Decoration --> | |
| <div | |
| class="absolute top-0 right-0 w-[500px] h-[500px] bg-indigo-50/50 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 z-0"> | |
| </div> | |
| <!-- TOP NAVIGATION --> | |
| <nav class="container mx-auto px-6 py-6 relative z-20 flex items-center justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center gap-2"> | |
| <span class="bg-indigo-600 text-white p-1.5 rounded-lg shadow-sm flex items-center justify-center"> | |
| <i class="ph-bold ph-books text-lg"></i> | |
| </span> | |
| <span class="text-xl font-bold text-slate-800 tracking-tight">UniCode</span> | |
| </div> | |
| <!-- GitHub Button --> | |
| <a href="https://github.com/TranHuuDat2004/UniDocs" target="_blank" | |
| class="flex items-center gap-2 bg-slate-900 text-white px-3 py-2 rounded-full text-sm font-medium hover:bg-slate-800 transition shadow-lg hover:shadow-xl group"> | |
| <i class="ph-bold ph-github-logo text-lg"></i> | |
| <div class="h-4 w-[1px] bg-slate-700 mx-1"></div> | |
| <div class="flex items-center gap-1.5 text-amber-400"> | |
| <span id="repoStars" class="text-white group-hover:text-amber-400 transition font-bold">...</span> | |
| <i class="ph-fill ph-star"></i> | |
| </div> | |
| </a> | |
| </nav> | |
| <div class="container mx-auto px-6 py-16 md:py-24 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center gap-12 lg:gap-20"> | |
| <!-- LEFT CONTENT (Text) --> | |
| <div class="w-full md:w-1/2 text-left"> | |
| <h1 class="text-5xl md:text-6xl font-extrabold text-slate-900 leading-[1.15] tracking-tight mb-6"> | |
| Học tập qua <br> | |
| <span class="text-indigo-600">UniCode.</span> | |
| </h1> | |
| <p class="text-lg text-slate-500 mb-10 leading-relaxed max-w-lg"> | |
| Hệ thống chia sẻ và chạy mã nguồn các môn học (C/C++, Java, Python). | |
| Xem code, chỉnh sửa và nhận kết quả ngay trên trình duyệt. | |
| </p> | |
| <!-- Buttons --> | |
| <div class="flex flex-wrap items-center gap-4 mb-12"> | |
| <a href="#subjects" id="exploreBtn" | |
| class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-3.5 rounded-full font-bold shadow-lg shadow-indigo-200 transition-all hover:-translate-y-1 flex items-center gap-2"> | |
| <i class="ph-bold ph-rocket-launch"></i> Khám phá ngay | |
| </a> | |
| <a href="https://github.com/TranHuuDat2004/UniDocs/issues" target="_blank" | |
| class="bg-white text-indigo-600 border border-indigo-100 hover:bg-indigo-50 px-8 py-3.5 rounded-full font-bold transition-all flex items-center gap-2"> | |
| <i class="ph-bold ph-github-logo"></i> Đóng góp | |
| </a> | |
| </div> | |
| <!-- Mini Feature Cards --> | |
| <div class="grid grid-cols-3 gap-4 max-w-md"> | |
| <div | |
| class="flex flex-col items-center text-center p-3 rounded-xl bg-slate-50 border border-slate-100 hover:shadow-sm transition"> | |
| <div | |
| class="w-8 h-8 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center mb-2"> | |
| <i class="ph-fill ph-lightning"></i> | |
| </div> | |
| <span class="text-xs font-bold text-slate-700">Code & Chạy</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center text-center p-3 rounded-xl bg-slate-50 border border-slate-100 hover:shadow-sm transition"> | |
| <div | |
| class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mb-2"> | |
| <i class="ph-fill ph-files"></i> | |
| </div> | |
| <span class="text-xs font-bold text-slate-700">Đa ngôn ngữ</span> | |
| </div> | |
| <div | |
| class="flex flex-col items-center text-center p-3 rounded-xl bg-slate-50 border border-slate-100 hover:shadow-sm transition"> | |
| <div | |
| class="w-8 h-8 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center mb-2"> | |
| <i class="ph-fill ph-check-circle"></i> | |
| </div> | |
| <span class="text-xs font-bold text-slate-700">Miễn phí</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT CONTENT (Illustration) --> | |
| <div class="w-full md:w-1/2 flex justify-center relative"> | |
| <div | |
| class="relative w-[350px] h-[350px] md:w-[450px] md:h-[450px] bg-white rounded-[40px] shadow-[0_20px_50px_rgba(0,0,0,0.05)] border border-slate-100 flex items-center justify-center animate-float z-10"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 bg-indigo-200 rounded-full blur-2xl opacity-50"></div> | |
| <i class="ph-fill ph-books text-[120px] text-indigo-600 relative z-10 drop-shadow-xl"></i> | |
| </div> | |
| <div class="absolute -top-6 -right-6 bg-white p-4 rounded-2xl shadow-xl border border-slate-50 animate-bounce" | |
| style="animation-duration: 3s;"> | |
| <i class="ph-fill ph-file-pdf text-3xl text-red-500"></i> | |
| </div> | |
| <div class="absolute -bottom-8 -left-8 bg-white p-4 rounded-2xl shadow-xl border border-slate-50 animate-bounce" | |
| style="animation-duration: 4s;"> | |
| <i class="ph-fill ph-file-doc text-3xl text-blue-500"></i> | |
| </div> | |
| <div | |
| class="absolute top-1/2 -right-12 bg-white px-4 py-2 rounded-xl shadow-lg border border-slate-50 flex items-center gap-2"> | |
| <span class="w-2 h-2 rounded-full bg-green-500"></span> | |
| <span class="text-xs font-bold text-slate-600">Free 100%</span> | |
| </div> | |
| </div> | |
| <div | |
| class="absolute -bottom-10 left-1/2 -translate-x-1/2 w-2/3 h-10 bg-black/5 blur-2xl rounded-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- SUBJECTS SECTION --> | |
| <main id="subjects" class="container mx-auto px-6 py-16"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-slate-800">Môn học hiện có</h2> | |
| <p class="text-slate-500 mt-1">Chọn môn học để xem bài tập và code mẫu</p> | |
| </div> | |
| <div | |
| class="hidden md:flex items-center bg-white border border-slate-200 rounded-lg px-4 py-2 w-64 focus-within:ring-2 ring-indigo-500/20 transition"> | |
| <i class="ph ph-magnifying-glass text-slate-400 text-lg"></i> | |
| <input type="text" placeholder="Tìm kiếm bài tập, code..." | |
| class="bg-transparent border-none outline-none text-sm ml-2 w-full placeholder:text-slate-400"> | |
| </div> | |
| </div> | |
| <!-- TABS CONTAINER --> | |
| <div id="categoryTabs" class="flex overflow-x-auto gap-2 mb-8 pb-4 border-b border-slate-200 custom-scrollbar"> | |
| <!-- Tabs will be injected here --> | |
| </div> | |
| <!-- Grid container for Categories --> | |
| <div id="subjectContainer" class="min-h-[400px]"> | |
| <div class="text-center text-slate-400 py-12"> | |
| <i class="ph ph-spinner animate-spin text-3xl mb-3"></i> | |
| <p>Đang tải danh sách môn học...</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- NEW SECTION: PROJECTS --> | |
| <section class="bg-white border-t border-slate-200"> | |
| <div class="container mx-auto px-6 py-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-2xl font-bold text-slate-800">Hệ sinh thái học tập</h2> | |
| <p class="text-slate-500 mt-2">Các dự án mã nguồn mở khác được phát triển bởi Dat</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Project 1: UniDocs --> | |
| <div | |
| class="bg-slate-50 border border-slate-200 rounded-2xl p-6 flex flex-col hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-center gap-4 mb-4"> | |
| <div | |
| class="w-12 h-12 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center"> | |
| <i class="ph-fill ph-books text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-slate-800 text-lg">UniDocs</h3> | |
| <span class="text-xs font-medium px-2 py-0.5 rounded bg-indigo-100 text-indigo-700">Hiện | |
| tại</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-slate-600 mb-6 flex-1"> | |
| Kho tài liệu môn học mở, giúp sinh viên chia sẻ và tiếp cận kiến thức dễ dàng. | |
| </p> | |
| <div class="flex gap-3 mt-auto"> | |
| <a href="#" | |
| class="flex-1 text-center py-2 text-sm font-semibold text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition"> | |
| Đang xem | |
| </a> | |
| <a href="https://github.com/TranHuuDat2004/UniDocs" target="_blank" | |
| class="px-3 py-2 text-slate-500 bg-white border border-slate-200 rounded-lg hover:bg-slate-50" | |
| title="Github Repo"> | |
| <i class="ph-bold ph-github-logo text-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 2: Slidify --> | |
| <div | |
| class="bg-slate-50 border border-slate-200 rounded-2xl p-6 flex flex-col hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-center gap-4 mb-4"> | |
| <div | |
| class="w-12 h-12 rounded-xl bg-orange-100 text-orange-600 flex items-center justify-center"> | |
| <i class="ph-fill ph-presentation-chart text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-slate-800 text-lg">Slidify</h3> | |
| <span class="text-xs font-medium px-2 py-0.5 rounded bg-orange-100 text-orange-700">Slide | |
| Platform</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-slate-600 mb-6 flex-1"> | |
| Slidify - Nền tảng học tập qua Slide. Trình bày nội dung bài học trực quan và sinh động. | |
| </p> | |
| <div class="flex gap-3 mt-auto"> | |
| <a href="https://tranhuudat2004.github.io/Slidify/" target="_blank" | |
| class="flex-1 text-center py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-200 rounded-lg hover:border-orange-500 hover:text-orange-600 transition"> | |
| Truy cập Web | |
| </a> | |
| <a href="https://github.com/TranHuuDat2004/Slidify" target="_blank" | |
| class="px-3 py-2 text-slate-500 bg-white border border-slate-200 rounded-lg hover:bg-slate-50" | |
| title="Github Repo"> | |
| <i class="ph-bold ph-github-logo text-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 3: Aptis Practice --> | |
| <div | |
| class="bg-slate-50 border border-slate-200 rounded-2xl p-6 flex flex-col hover:shadow-lg transition-all duration-300"> | |
| <div class="flex items-center gap-4 mb-4"> | |
| <div | |
| class="w-12 h-12 rounded-xl bg-emerald-100 text-emerald-600 flex items-center justify-center"> | |
| <i class="ph-fill ph-check-circle text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-slate-800 text-lg">Aptis Practice</h3> | |
| <span class="text-xs font-medium px-2 py-0.5 rounded bg-emerald-100 text-emerald-700">Luyện | |
| thi</span> | |
| </div> | |
| </div> | |
| <p class="text-sm text-slate-600 mb-6 flex-1"> | |
| Một trang web luyện thi Aptis ESOL tương tác được xây dựng bằng HTML, CSS và JavaScript. | |
| </p> | |
| <div class="flex gap-3 mt-auto"> | |
| <a href="https://tranhuudat2004.github.io/aptis-practice/" target="_blank" | |
| class="flex-1 text-center py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-200 rounded-lg hover:border-emerald-500 hover:text-emerald-600 transition"> | |
| Luyện ngay | |
| </a> | |
| <a href="https://github.com/TranHuuDat2004/aptis-practice" target="_blank" | |
| class="px-3 py-2 text-slate-500 bg-white border border-slate-200 rounded-lg hover:bg-slate-50" | |
| title="Github Repo"> | |
| <i class="ph-bold ph-github-logo text-lg"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer class="bg-white border-t border-slate-200 pt-16 pb-8 mt-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> | |
| <!-- Col 1 --> | |
| <div class="lg:col-span-1 pr-4"> | |
| <h3 class="text-2xl font-bold text-indigo-600 mb-4 tracking-tight">UniDocs</h3> | |
| <p class="text-slate-500 text-sm leading-relaxed"> | |
| Hệ thống lưu trữ và chia sẻ tài liệu học tập miễn phí, giúp sinh viên dễ dàng tiếp cận với nguồn | |
| giáo trình, bài giảng và đề thi chất lượng. Toàn bộ tài liệu được đóng góp và chia sẻ bởi cộng | |
| đồng sinh viên. | |
| </p> | |
| </div> | |
| <!-- Col 2 --> | |
| <div class="lg:pl-8"> | |
| <h4 class="font-bold text-slate-800 mb-6 font-semibold">Điều hướng</h4> | |
| <ul class="space-y-4 text-sm text-slate-600 font-medium tracking-wide"> | |
| <li><a href="#" class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-info text-indigo-500 text-lg"></i> Giới thiệu</a></li> | |
| <li><a href="#subjects" class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-book-open text-indigo-500 text-lg"></i> Tài liệu môn học</a></li> | |
| <li><a href="https://github.com/TranHuuDat2004/UniDocs/issues" target="_blank" | |
| class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-upload-simple text-indigo-500 text-lg"></i> Đóng góp tài liệu</a> | |
| </li> | |
| <li><a href="https://github.com/TranHuuDat2004/UniDocs" target="_blank" | |
| class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-github-logo text-indigo-500 text-lg"></i> Mã nguồn dự án</a></li> | |
| </ul> | |
| </div> | |
| <!-- Col 3 --> | |
| <div> | |
| <h4 class="font-bold text-slate-800 mb-6 font-semibold">Danh mục nổi bật</h4> | |
| <ul class="space-y-4 text-sm text-slate-600 font-medium tracking-wide"> | |
| <li><a id="footer-link-programming_algo" href="#subjects" | |
| class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-code text-slate-800 text-lg"></i> Lập trình & Thuật toán</a></li> | |
| <li><a id="footer-link-system_network" href="#subjects" | |
| class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-cpu text-slate-800 text-lg"></i> Hệ thống & Mạng</a></li> | |
| <li><a id="footer-link-math_basic" href="#subjects" | |
| class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-function text-slate-800 text-lg"></i> Toán & Cơ sở ngành</a></li> | |
| <li><a id="footer-link-skills" href="#subjects" | |
| class="hover:text-indigo-600 transition flex items-center gap-3"><i | |
| class="ph-fill ph-users-three text-slate-800 text-lg"></i> Kĩ năng & Bổ trợ</a></li> | |
| </ul> | |
| </div> | |
| <!-- Col 4 --> | |
| <div> | |
| <h4 class="font-bold text-slate-800 mb-6 font-semibold">Thông tin</h4> | |
| <ul class="space-y-4 text-sm text-slate-600 font-medium tracking-wide"> | |
| <li class="flex items-center gap-3"><i class="ph-fill ph-user text-indigo-500 text-xl"></i> | |
| <span><strong>Triển khai phần mềm: </strong>Trần Hữu Đạt</span> | |
| </li> | |
| <li class="flex items-center gap-3"><i | |
| class="ph-fill ph-chalkboard-teacher text-indigo-500 text-xl"></i> <span><strong>Nguồn | |
| tài liệu: </strong>Sinh viên TDTU & Tham khảo</span></li> | |
| <li class="flex items-center gap-3"><i class="ph-fill ph-columns text-indigo-500 text-xl"></i> | |
| <span><strong>Cập nhật tài liệu: </strong>25/02/2026</span> | |
| </li> | |
| <li class="flex items-center gap-3"><i | |
| class="ph-fill ph-git-branch text-indigo-500 text-xl"></i> <span><strong>Phiên bản mới | |
| nhất: </strong> | |
| 26/02/2026 | |
| <!-- <script>document.write(new Date().toLocaleDateString('vi-VN'))</script> --> | |
| </span></li> | |
| </ul> | |
| <div class="mt-6 flex items-center gap-3"> | |
| <a href="https://github.com/TranHuuDat2004/UniDocs" target="_blank" | |
| class="flex items-center justify-center w-10 h-10 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 transition" | |
| title="Github"> | |
| <i class="ph-bold ph-github-logo text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Border & Copyright --> | |
| <div class="border-t border-slate-100 bg-slate-50/50 py-6 text-center text-slate-500 text-sm"> | |
| © 2024 - | |
| <script>document.write(new Date().getFullYear())</script> UniDocs Tool. All Rights Reserved. | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| loadSubjects(); | |
| fetchGitHubStars(); | |
| }); | |
| // --- GITHUB STARS API --- | |
| async function fetchGitHubStars() { | |
| try { | |
| const res = await fetch('https://api.github.com/repos/TranHuuDat2004/UniDocs'); | |
| if (res.ok) { | |
| const data = await res.json(); | |
| document.getElementById('repoStars').innerText = data.stargazers_count; | |
| } else { | |
| document.getElementById('repoStars').innerText = '-'; | |
| } | |
| } catch (e) { | |
| console.error("Lỗi tải sao GitHub:", e); | |
| document.getElementById('repoStars').innerText = '-'; | |
| } | |
| } | |
| // --- CATEGORY CONFIG --- | |
| const CATEGORIES = { | |
| "math_basic": { name: "Toán & Cơ sở ngành", icon: "ph-function" }, | |
| "programming_algo": { name: "Lập trình & Thuật toán", icon: "ph-code" }, | |
| "system_network": { name: "Hệ thống & Mạng", icon: "ph-cpu" }, | |
| "software_db": { name: "Phần Mềm & Cơ sở dữ liệu", icon: "ph-database" }, | |
| "app_dev": { name: "Lập trình Ứng dụng", icon: "ph-device-mobile" }, | |
| "ai": { name: "Trí tuệ nhân tạo", icon: "ph-brain" }, | |
| "skills": { name: "Tổ bộ môn Kĩ năng", icon: "ph-users-three" }, | |
| "intern": { name: "Thực tập", icon: "ph-buildings" }, | |
| "other": { name: "Khác", icon: "ph-dots-three-circle" } | |
| }; | |
| async function loadSubjects() { | |
| try { | |
| const res = await fetch('data/subjects.json'); | |
| const allSubjects = await res.json(); | |
| if (allSubjects.length > 0) { | |
| const firstSubject = allSubjects[0]; | |
| const btn = document.getElementById('exploreBtn'); | |
| if (btn) btn.href = `/subject?id=${firstSubject.id}`; | |
| } | |
| renderCategorizedSubjects(allSubjects); | |
| } catch (e) { | |
| console.error("Lỗi tải subjects:", e); | |
| const container = document.getElementById('subjectContainer'); | |
| if (container) { | |
| container.innerHTML = ` | |
| <div class="text-center py-12"> | |
| <div class="bg-red-50 text-red-600 rounded-lg p-4 inline-block"> | |
| <i class="ph-bold ph-warning-circle text-2xl mb-2"></i> | |
| <p>Không thể tải dữ liệu môn học.</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| } | |
| function renderCategorizedSubjects(subjects) { | |
| const tabContainer = document.getElementById('categoryTabs'); | |
| const contentContainer = document.getElementById('subjectContainer'); | |
| if (!tabContainer || !contentContainer) return; | |
| tabContainer.innerHTML = ''; | |
| contentContainer.innerHTML = ''; | |
| // Group subjects | |
| const grouped = {}; | |
| subjects.forEach(sub => { | |
| const cat = sub.category || 'other'; | |
| if (!grouped[cat]) grouped[cat] = []; | |
| grouped[cat].push(sub); | |
| }); | |
| // Update footer links to point to the first subject of each category | |
| const footerCats = ['programming_algo', 'system_network', 'math_basic', 'skills']; | |
| footerCats.forEach(cat => { | |
| const linkEl = document.getElementById(`footer-link-${cat}`); | |
| if (linkEl && grouped[cat] && grouped[cat].length > 0) { | |
| linkEl.href = `/subject?id=${grouped[cat][0].id}`; | |
| } | |
| }); | |
| // Order of categories to display | |
| const order = ["math_basic", "programming_algo", "system_network", "software_db", "app_dev", "ai", "skills", "intern", "other"]; | |
| // Filter empty categories | |
| const activeCategories = order.filter(k => grouped[k] && grouped[k].length > 0); | |
| // Set default active | |
| let currentActive = activeCategories[0] || 'other'; | |
| // RENDER TABS & SECTIONS | |
| activeCategories.forEach(catKey => { | |
| const subs = grouped[catKey]; | |
| const catInfo = CATEGORIES[catKey] || CATEGORIES['other']; | |
| // 1. Create Tab Button | |
| const btn = document.createElement('button'); | |
| const isSelected = catKey === currentActive; | |
| btn.className = `whitespace-nowrap px-4 py-3 text-sm font-semibold transition-all border-b-2 flex items-center gap-2 ${isSelected | |
| ? 'text-indigo-600 border-indigo-600' | |
| : 'text-slate-500 border-transparent hover:text-indigo-600 hover:border-indigo-100' | |
| }`; | |
| btn.innerHTML = `<i class="ph-bold ${catInfo.icon}"></i> ${catInfo.name}`; | |
| btn.onclick = () => switchTab(catKey); | |
| btn.dataset.tab = catKey; | |
| tabContainer.appendChild(btn); | |
| // 2. Create Section Content | |
| const section = document.createElement('div'); | |
| section.id = `cat-${catKey}`; | |
| section.className = isSelected ? 'block animate-fade-in' : 'hidden'; // Removed fade-in-section specific class if not defined | |
| section.innerHTML = ` | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-slate-800 flex items-center gap-2"> | |
| <i class="ph-fill ${catInfo.icon} text-indigo-600"></i> ${catInfo.name} | |
| <span class="text-xs font-medium text-slate-500 bg-slate-100 px-2 py-1 rounded-full">${subs.length} môn</span> | |
| </h3> | |
| <p class="text-slate-500 text-sm mt-1">Danh sách các môn học thuộc nhóm ${catInfo.name}</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| ${subs.map(sub => createSubjectCard(sub)).join('')} | |
| </div> | |
| `; | |
| contentContainer.appendChild(section); | |
| }); | |
| } | |
| function switchTab(catKey) { | |
| // Update Tabs | |
| document.querySelectorAll('#categoryTabs button').forEach(btn => { | |
| const isSelected = btn.dataset.tab === catKey; | |
| btn.className = `whitespace-nowrap px-4 py-3 text-sm font-semibold transition-all border-b-2 flex items-center gap-2 ${isSelected | |
| ? 'text-indigo-600 border-indigo-600' | |
| : 'text-slate-500 border-transparent hover:text-indigo-600 hover:border-indigo-100' | |
| }`; | |
| }); | |
| // Update Sections | |
| document.querySelectorAll('#subjectContainer > div').forEach(div => { | |
| if (div.id === `cat-${catKey}`) { | |
| div.classList.remove('hidden'); | |
| div.classList.add('block', 'animate-fade-in'); | |
| } else { | |
| div.classList.add('hidden'); | |
| div.classList.remove('block', 'animate-fade-in'); | |
| } | |
| }); | |
| } | |
| function createSubjectCard(sub) { | |
| return ` | |
| <a href="/subject?id=${sub.id}" class="group relative bg-white border border-slate-200 rounded-2xl p-6 hover:shadow-xl hover:shadow-indigo-500/10 transition-all hover:-translate-y-1 block h-full flex flex-col"> | |
| <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity"> | |
| <i class="ph-bold ph-arrow-up-right text-indigo-500 text-xl"></i> | |
| </div> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center text-white shadow-lg shadow-indigo-500/30 mb-4 group-hover:scale-110 transition-transform duration-300"> | |
| <i class="ph-fill ${sub.icon || 'ph-folder'} text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold text-slate-800 mb-2">${sub.name}</h3> | |
| <p class="text-sm text-slate-500 line-clamp-2 flex-1"> | |
| ${sub.description || 'Truy cập tài liệu, bài giảng, đề thi và nhiều hơn nữa.'} | |
| </p> | |
| <div class="mt-4 flex items-center gap-2 text-xs font-medium text-indigo-600 bg-indigo-50 w-fit px-2 py-1 rounded-md"> | |
| <i class="ph-fill ph-files"></i> Tài liệu có sẵn | |
| </div> | |
| </a> | |
| `; | |
| } | |
| </script> | |
| </body> | |
| </html> |