67 lines
2.4 KiB
JavaScript
67 lines
2.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// Staggered table row animations
|
|
const animateTables = () => {
|
|
const tables = document.querySelectorAll('.blue-table tbody');
|
|
tables.forEach(tbody => {
|
|
const rows = tbody.querySelectorAll('tr');
|
|
rows.forEach((row, index) => {
|
|
row.classList.add('animate-row');
|
|
row.style.animationDelay = `${index * 0.05}s`;
|
|
});
|
|
});
|
|
};
|
|
animateTables();
|
|
|
|
// Re-run animations on DOM mutations (useful when fetch injects HTML)
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
if (mutation.addedNodes && mutation.addedNodes.length > 0) {
|
|
animateTables();
|
|
}
|
|
});
|
|
});
|
|
|
|
const contentArea = document.querySelector('.content-area');
|
|
if (contentArea) {
|
|
observer.observe(contentArea, { childList: true, subtree: true });
|
|
}
|
|
|
|
// Button ripple effect (optional micro-interaction)
|
|
const buttons = document.querySelectorAll('.btn');
|
|
buttons.forEach(btn => {
|
|
btn.addEventListener('click', function(e) {
|
|
let ripple = document.createElement('span');
|
|
ripple.classList.add('ripple');
|
|
this.appendChild(ripple);
|
|
let x = e.clientX - e.target.offsetLeft;
|
|
let y = e.clientY - e.target.offsetTop;
|
|
ripple.style.left = `${x}px`;
|
|
ripple.style.top = `${y}px`;
|
|
setTimeout(() => {
|
|
ripple.remove();
|
|
}, 600);
|
|
});
|
|
});
|
|
|
|
// Date/Time Clock logic
|
|
const updateClock = () => {
|
|
const clockEl = document.getElementById('live-clock');
|
|
if(!clockEl) return;
|
|
|
|
const date = new Date();
|
|
const year = date.getFullYear() + 543;
|
|
const months = ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.'];
|
|
const m = months[date.getMonth()];
|
|
const d = date.getDate();
|
|
|
|
let hrs = date.getHours().toString().padStart(2, '0');
|
|
let mins = date.getMinutes().toString().padStart(2, '0');
|
|
let secs = date.getSeconds().toString().padStart(2, '0');
|
|
|
|
clockEl.textContent = `${d} ${m} ${year} | ${hrs}:${mins}:${secs}`;
|
|
};
|
|
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
});
|