diff --git a/app.js b/app.js index 9803fd0..e27d24f 100644 --- a/app.js +++ b/app.js @@ -323,5 +323,63 @@ function updatePing() { }); } -// Ping 업데이트 시작 -setInterval(updatePing, 2000); +// Ping 업데이트 시작 (visibility-aware) +let pingInterval; + +function startPingUpdates() { + if (!pingInterval) { + pingInterval = setInterval(updatePing, 2000); + } +} + +function stopPingUpdates() { + if (pingInterval) { + clearInterval(pingInterval); + pingInterval = null; + } +} + +// Visibility change handler +document.addEventListener('visibilitychange', () => { + if (document.hidden) { + stopPingUpdates(); + } else { + startPingUpdates(); + } +}); + +// Initial start +startPingUpdates(); + +// Tab switching with event listeners and keyboard navigation +document.addEventListener('DOMContentLoaded', () => { + const btnN8n = document.getElementById('btn-n8n'); + const btnTf = document.getElementById('btn-tf'); + + if (btnN8n && btnTf) { + // Click event listeners + btnN8n.addEventListener('click', () => switchTab('n8n')); + btnTf.addEventListener('click', () => switchTab('tf')); + + // Keyboard navigation (Arrow keys) + [btnN8n, btnTf].forEach(btn => { + btn.addEventListener('keydown', (e) => { + const currentTab = btn.getAttribute('data-tab'); + + if (e.key === 'ArrowRight') { + e.preventDefault(); + if (currentTab === 'n8n') { + btnTf.focus(); + switchTab('tf'); + } + } else if (e.key === 'ArrowLeft') { + e.preventDefault(); + if (currentTab === 'tf') { + btnN8n.focus(); + switchTab('n8n'); + } + } + }); + }); + } +}); diff --git a/index.html b/index.html index e22929a..3e15538 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Anvil Hosting - 개발자를 위한 컨테이너 클라우드 @@ -66,7 +67,7 @@ - + Console 시작 @@ -103,7 +104,7 @@
@@ -143,8 +144,8 @@
bot
- - + +
@@ -285,7 +286,7 @@