302 lines
13 KiB
HTML
302 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{themes/__${activeTheme}__/layout(forceFullWidth=true, bodyClass='education path-frontpage')}">
|
|
<head>
|
|
<title th:text="${post.title}">Chi tiết đào tạo</title>
|
|
<style>
|
|
.overview-wrapper-shadow {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Layout */
|
|
.training-layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.training-layout {
|
|
gap: 2rem;
|
|
}
|
|
}
|
|
|
|
.training-main {
|
|
grid-column: span 12 / span 12;
|
|
background-color: white;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.training-main {
|
|
grid-column: span 9 / span 9;
|
|
}
|
|
}
|
|
|
|
.training-sidebar {
|
|
grid-column: span 12 / span 12;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.training-sidebar {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
}
|
|
|
|
.training-sticky {
|
|
position: sticky;
|
|
top: 6rem;
|
|
}
|
|
|
|
/* Image Container */
|
|
.img-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
padding-bottom: 55.55%;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.img-container img {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Tab styles */
|
|
.tabs-container {
|
|
display: flex;
|
|
width: 100%;
|
|
border: 1px solid var(--color-primary-600, #a82024);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dao-tao-tab-btn {
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
padding: 0.75rem 1rem;
|
|
flex: 1;
|
|
text-align: center;
|
|
border: none;
|
|
background-color: white;
|
|
color: var(--color-primary-600, #a82024);
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.dao-tao-tab-btn.active {
|
|
background-color: var(--color-old-brick);
|
|
color: white;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.dao-tao-tab-btn:not(.active):hover {
|
|
background-color: #fef2f2;
|
|
color: var(--color-primary-600, #a82024);
|
|
}
|
|
|
|
.dao-tao-tab-panel {
|
|
display: none;
|
|
}
|
|
|
|
.dao-tao-tab-panel.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Prose table styling for course detail */
|
|
.prose-blog figure,
|
|
.prose-blog table {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.prose-blog table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.prose-blog table td,
|
|
.prose-blog table th {
|
|
border: 1px solid #ddd;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.prose-blog table tr:first-child td {
|
|
border-top-color: #eee;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div layout:fragment="content">
|
|
<section class="bg-gray-50 training-section" style="padding-top: 1.5rem; padding-bottom: 1.5rem;">
|
|
<div class="container mx-auto px-4 training-container">
|
|
<div class="training-layout relative">
|
|
<div class="overview-wrapper-shadow training-main">
|
|
<!-- Tiêu đề -->
|
|
<h1 class="display-7 text-primary-600 xl:mb-4 md:mb-3 mb-2" th:text="${post.title}">Tiêu đề Khóa học</h1>
|
|
<!-- Ảnh đại diện -->
|
|
<div class="img-container" th:if="${post.featuredImage != null and !#strings.isEmpty(post.featuredImage)}">
|
|
<img th:src="${post.featuredImage}" th:alt="${post.title}" loading="lazy" decoding="async">
|
|
</div>
|
|
<div class="prose prose-blog prose-table prose-content max-w-none" id="postContentParsed">
|
|
<!-- Nội dung chi tiết sẽ được render tại đây -->
|
|
</div>
|
|
<div id="postContentRaw" style="display:none;" th:text="${post.content}"></div>
|
|
</div>
|
|
<!-- Sidebar info -->
|
|
<div id="info" class="training-sidebar">
|
|
<div class="training-sticky">
|
|
<!-- Admin Widgets (if any) -->
|
|
<div th:each="widget : ${sidebarWidgets}" class="mb-4">
|
|
<div th:if="${widget.type == 'COURSE_INFO'}" th:replace="~{fragments/course-info-widget :: course-info}"></div>
|
|
<div th:if="${widget.type == 'HTML'}" th:utext="${widget.content}"></div>
|
|
<div th:if="${widget.type == 'TEXT'}" th:text="${widget.content}"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Related Courses (Chương trình khác) -->
|
|
<section class="related-courses-section" style="background-color: #f0f9ff; padding: 3rem 0; margin-top: 2rem;">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-center mb-8 font-bold" style="font-size: 1.5rem; color: var(--color-primary-600);">Chương trình khác</h2>
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
|
|
<!-- Card 1 -->
|
|
<div style="background-color: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e5e7eb;">
|
|
<div style="aspect-ratio: 16/9; background-color: #e2e8f0;"></div>
|
|
<div style="padding: 1rem;">
|
|
<h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4;">Chương trình thực hành 12 tháng Bác sĩ y khoa</h3>
|
|
<p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1rem;">12/09/2026</p>
|
|
<a href="#" style="display: block; width: 100%; text-align: center; background-color: var(--color-primary-600, #a82024); color: white; padding: 0.5rem; border-radius: 0.25rem; font-weight: 600; text-decoration: none;">42.400.000 VNĐ</a>
|
|
</div>
|
|
</div>
|
|
<!-- Card 2 -->
|
|
<div style="background-color: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e5e7eb;">
|
|
<div style="aspect-ratio: 16/9; background-color: #e2e8f0;"></div>
|
|
<div style="padding: 1rem;">
|
|
<h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4;">Lớp Nghiệp vụ hộ lý trợ giúp chăm sóc</h3>
|
|
<p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1rem;">01/04/2026</p>
|
|
<a href="#" style="display: block; width: 100%; text-align: center; background-color: var(--color-primary-600, #a82024); color: white; padding: 0.5rem; border-radius: 0.25rem; font-weight: 600; text-decoration: none;">23.000.000 VNĐ</a>
|
|
</div>
|
|
</div>
|
|
<!-- Card 3 -->
|
|
<div style="background-color: white; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e5e7eb;">
|
|
<div style="aspect-ratio: 16/9; background-color: #e2e8f0;"></div>
|
|
<div style="padding: 1rem;">
|
|
<h3 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.4;">Thực hành cấp cứu và điều trị đột quỵ</h3>
|
|
<p style="color: #6b7280; font-size: 0.875rem; margin-bottom: 1rem;">29/12/2025</p>
|
|
<a href="#" style="display: block; width: 100%; text-align: center; background-color: var(--color-primary-600, #a82024); color: white; padding: 0.5rem; border-radius: 0.25rem; font-weight: 600; text-decoration: none;">32.500.000 VNĐ</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Content rendering and dynamic tabs parsing -->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var rawData = document.getElementById("postContentRaw").textContent;
|
|
var parsedContainer = document.getElementById("postContentParsed");
|
|
|
|
// Content is now HTML
|
|
parsedContainer.innerHTML = rawData;
|
|
|
|
// Parse dynamic tabs from HTML (migrated from Editor.js)
|
|
var tabStarts = Array.from(parsedContainer.querySelectorAll('h3.dynamic-tab-start'));
|
|
if (tabStarts.length > 0) {
|
|
var tabsGroup = [];
|
|
var wrapper = document.createElement('div');
|
|
wrapper.className = 'custom-tabs-wrapper training-course-tabs-wrapper';
|
|
|
|
var navContainer = document.createElement('div');
|
|
navContainer.className = 'custom-tabs-nav-container';
|
|
var tabsContainer = document.createElement('div');
|
|
tabsContainer.className = 'tabs-container';
|
|
navContainer.appendChild(tabsContainer);
|
|
wrapper.appendChild(navContainer);
|
|
|
|
var firstTabStart = tabStarts[0];
|
|
var parentNode = firstTabStart.parentNode;
|
|
|
|
// Collect all elements into tabs
|
|
tabStarts.forEach(function(startEl, index) {
|
|
var tabTitle = startEl.textContent;
|
|
var btn = document.createElement('button');
|
|
btn.className = 'dao-tao-tab-btn custom-tab-btn' + (index === 0 ? ' active' : '');
|
|
btn.setAttribute('data-tab-idx', index);
|
|
btn.textContent = tabTitle;
|
|
tabsContainer.appendChild(btn);
|
|
|
|
var panel = document.createElement('div');
|
|
panel.className = 'dao-tao-tab-panel custom-tab-panel';
|
|
panel.setAttribute('data-tab-idx', index);
|
|
panel.style.display = (index === 0) ? 'block' : 'none';
|
|
|
|
var currentEl = startEl.nextElementSibling;
|
|
while (currentEl && !currentEl.classList.contains('dynamic-tab-start') && !currentEl.classList.contains('dynamic-tab-end')) {
|
|
var nextEl = currentEl.nextElementSibling;
|
|
panel.appendChild(currentEl);
|
|
currentEl = nextEl;
|
|
}
|
|
|
|
// Remove the dynamic-tab-end if present
|
|
if (currentEl && currentEl.classList.contains('dynamic-tab-end')) {
|
|
currentEl.parentNode.removeChild(currentEl);
|
|
}
|
|
|
|
wrapper.appendChild(panel);
|
|
startEl.parentNode.removeChild(startEl);
|
|
});
|
|
|
|
parentNode.appendChild(wrapper);
|
|
|
|
// Tab click listener
|
|
wrapper.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('custom-tab-btn')) {
|
|
var btn = e.target;
|
|
var idx = btn.getAttribute('data-tab-idx');
|
|
|
|
wrapper.querySelectorAll('.custom-tab-btn').forEach(function(b) {
|
|
b.classList.remove('active');
|
|
});
|
|
btn.classList.add('active');
|
|
|
|
wrapper.querySelectorAll('.custom-tab-panel').forEach(function(p) {
|
|
p.style.display = 'none';
|
|
});
|
|
var activePanel = wrapper.querySelector('.custom-tab-panel[data-tab-idx="' + idx + '"]');
|
|
if (activePanel) activePanel.style.display = 'block';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTrainingTab(btn, tabId) {
|
|
var container = btn.closest('.training-course-tabs-wrapper');
|
|
if(!container) return;
|
|
|
|
var btns = container.querySelectorAll('.dao-tao-tab-btn');
|
|
for(var i = 0; i < btns.length; i++) btns[i].classList.remove('active');
|
|
btn.classList.add('active');
|
|
|
|
var panels = container.querySelectorAll('.dao-tao-tab-panel');
|
|
for(var j = 0; j < panels.length; j++) panels[j].classList.remove('active');
|
|
var panel = container.querySelector('.dao-tao-tab-panel[data-tab-content="' + tabId + '"]');
|
|
if(panel) panel.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |