forked from UKSOURCE/cms.hailearning.edu.vn
Merge branch 'main' of https://gits.techvanguard.vn/UKSOURCE/cms.hailearning.edu.vn into hoanganh-03022026-appointment-contact-pricing
This commit is contained in:
LNHA
@@ -826,47 +826,18 @@
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="mt-5">
|
||||
<footer class="mt-5" id="dynamicFooter">
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="mb-3">CMS.HAILearning</h5>
|
||||
<p>Simple and effective API management system.</p>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="mb-3">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<% if (locals.user) { %>
|
||||
<li class="mb-2">
|
||||
<a href="/admin/dashboard" class="text-decoration-none hover-opacity">Dashboard</a>
|
||||
</li>
|
||||
<% } else { %>
|
||||
<li class="mb-2">
|
||||
<a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Contact</h5>
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-map-marker-alt me-2"></i> 734 Luy Ban Bich St., Tan Thanh Ward, Tan Phu Dist, HCMC
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-envelope me-2"></i> <a href="mailto:get-info@hai.edu.vn"
|
||||
class="text-decoration-none hover-opacity">get-info@hai.edu.vn</a>
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-globe me-2"></i> <a href="https://hai.edu.vn" target="_blank"
|
||||
class="text-decoration-none hover-opacity">hai.edu.vn</a>
|
||||
</p>
|
||||
<div class="row" id="footerContent">
|
||||
<!-- Footer content will be loaded from API -->
|
||||
<div class="col-12 text-center">
|
||||
<p>Loading footer...</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4" />
|
||||
<div class="text-center">
|
||||
<p class="mb-0">
|
||||
© <%= new Date().getFullYear() %> CMS.HAILearning. All rights
|
||||
reserved.
|
||||
<p class="mb-0" id="footerCopyright">
|
||||
© <%= new Date().getFullYear() %> Loading...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1026,6 +997,198 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Footer Dynamic Loading Script -->
|
||||
<script>
|
||||
// Load and render footer from API
|
||||
async function loadFooter() {
|
||||
try {
|
||||
const response = await fetch('/api/footer');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load footer data');
|
||||
}
|
||||
|
||||
const footerData = await response.json();
|
||||
renderFooter(footerData);
|
||||
} catch (error) {
|
||||
console.error('Error loading footer:', error);
|
||||
renderFallbackFooter();
|
||||
}
|
||||
}
|
||||
|
||||
// Render footer with API data
|
||||
function renderFooter(data) {
|
||||
const footerContent = document.getElementById('footerContent');
|
||||
const footerCopyright = document.getElementById('footerCopyright');
|
||||
|
||||
if (!footerContent || !footerCopyright) return;
|
||||
|
||||
let footerHTML = '';
|
||||
|
||||
// About section (first column)
|
||||
if (data.about && (data.about.title || data.about.description)) {
|
||||
footerHTML += `
|
||||
<div class="col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="mb-3">${escapeHtml(data.about.title || 'About Us')}</h5>
|
||||
${data.about.description ? `<p>${escapeHtml(data.about.description)}</p>` : ''}
|
||||
${data.about.mapLink && data.about.mapLink.url ?
|
||||
`<p><a href="${escapeHtml(data.about.mapLink.url)}" target="_blank" class="text-decoration-none hover-opacity">
|
||||
<i class="fas fa-map-marker-alt me-2"></i>${escapeHtml(data.about.mapLink.text || 'View on Map')}
|
||||
</a></p>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Footer columns
|
||||
if (data.columns && Array.isArray(data.columns)) {
|
||||
// Sort columns by order if available, otherwise maintain array order
|
||||
const sortedColumns = data.columns.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
sortedColumns.forEach(column => {
|
||||
if (column.title || (column.links && column.links.length > 0)) {
|
||||
footerHTML += `
|
||||
<div class="col-md-4 mb-4 mb-md-0">
|
||||
${column.title ? `<h5 class="mb-3">${escapeHtml(column.title)}</h5>` : ''}
|
||||
${column.links && column.links.length > 0 ? `
|
||||
<ul class="list-unstyled">
|
||||
${column.links.map(link =>
|
||||
`<li class="mb-2">
|
||||
<a href="${escapeHtml(link.url || '#')}" class="text-decoration-none hover-opacity">
|
||||
${escapeHtml(link.title || 'Link')}
|
||||
</a>
|
||||
</li>`
|
||||
).join('')}
|
||||
</ul>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Contact section
|
||||
if (data.contact && (data.contact.email || data.contact.phone)) {
|
||||
footerHTML += `
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Contact</h5>
|
||||
${data.contact.email ? `
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-envelope me-2"></i>
|
||||
<a href="mailto:${escapeHtml(data.contact.email)}" class="text-decoration-none">
|
||||
${escapeHtml(data.contact.email)}
|
||||
</a>
|
||||
</p>
|
||||
` : ''}
|
||||
${data.contact.phone ? `
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-phone me-2"></i>
|
||||
<a href="tel:${escapeHtml(data.contact.phone)}" class="text-decoration-none">
|
||||
${escapeHtml(data.contact.phone)}
|
||||
</a>
|
||||
</p>
|
||||
` : ''}
|
||||
${data.contact.hours ? `
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-clock me-2"></i> ${escapeHtml(data.contact.hours)}
|
||||
</p>
|
||||
` : ''}
|
||||
${data.address && data.address.text ? `
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-map-marker-alt me-2"></i>
|
||||
${data.address.mapUrl ?
|
||||
`<a href="${escapeHtml(data.address.mapUrl)}" target="_blank" class="text-decoration-none">
|
||||
${escapeHtml(data.address.text)}
|
||||
</a>` :
|
||||
escapeHtml(data.address.text)
|
||||
}
|
||||
</p>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Social links (if any)
|
||||
if (data.social && data.social.links && Array.isArray(data.social.links) && data.social.links.length > 0) {
|
||||
// Sort social links by order if available
|
||||
const sortedSocials = data.social.links.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
footerHTML += `
|
||||
<div class="col-12 mt-3">
|
||||
<div class="text-center">
|
||||
<h6 class="mb-3">Follow Us</h6>
|
||||
<div class="d-flex justify-content-center gap-3">
|
||||
${sortedSocials.map(social =>
|
||||
`<a href="${escapeHtml(social.url || '#')}" target="_blank"
|
||||
class="text-decoration-none hover-opacity"
|
||||
title="${escapeHtml(social.platform || 'Social Link')}">
|
||||
<i class="fab fa-${escapeHtml(social.icon || 'link')} fa-lg"></i>
|
||||
</a>`
|
||||
).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Update footer content
|
||||
footerContent.innerHTML = footerHTML;
|
||||
|
||||
// Update copyright
|
||||
const currentYear = new Date().getFullYear();
|
||||
const copyrightText = data.copyright && data.copyright.text ?
|
||||
data.copyright.text :
|
||||
`© ${currentYear} Website. All rights reserved.`;
|
||||
|
||||
footerCopyright.innerHTML = copyrightText;
|
||||
}
|
||||
|
||||
// Fallback footer if API fails
|
||||
function renderFallbackFooter() {
|
||||
const footerContent = document.getElementById('footerContent');
|
||||
const footerCopyright = document.getElementById('footerCopyright');
|
||||
|
||||
if (footerContent) {
|
||||
footerContent.innerHTML = `
|
||||
<div class="col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="mb-3">CMS-GGCamp</h5>
|
||||
<p>Simple and effective API management system.</p>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4 mb-md-0">
|
||||
<h5 class="mb-3">Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<a href="/auth/login" class="text-decoration-none hover-opacity">Login</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h5 class="mb-3">Contact</h5>
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-envelope me-2"></i> office@ggcamp.org
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<i class="fas fa-phone me-2"></i> 12345678
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (footerCopyright) {
|
||||
footerCopyright.innerHTML = `© ${new Date().getFullYear()} CMS-GGCamp. All rights reserved.`;
|
||||
}
|
||||
}
|
||||
|
||||
// Escape HTML to prevent XSS
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Load footer when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', loadFooter);
|
||||
</script>
|
||||
|
||||
<%- script %>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user