Add batched status endpoint and optimize frontend performance
Server-side batched /api/v1/services/status endpoint replaces N individual browser probes with a single API call (HEAD-first with GET fallback, concurrency-limited, CA-aware HTTPS agent). Frontend: clock reuses DOM instead of rebuilding innerHTML every second with drift-correcting timer that pauses on hidden tabs. Card animations use CSS transitionDelay + requestAnimationFrame. Internet dot blink moved from JS intervals to CSS keyframes with prefers-reduced-motion support. Service worker rewritten with network-first navigation, stale-while-revalidate assets, and navigation preload. Font faces drop TTF fallbacks, use font-display swap. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -25,14 +25,28 @@
|
||||
function animateTopCards() {
|
||||
const topCards = document.querySelectorAll('.top .card');
|
||||
topCards.forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
setTimeout(() => {
|
||||
card.style.transition = 'opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
}, index * 150); // 150ms delay between top cards
|
||||
card.style.transitionDelay = `${Math.min(index * 60, 300)}ms`;
|
||||
});
|
||||
requestAnimationFrame(() => {
|
||||
topCards.forEach(card => card.classList.add('loaded'));
|
||||
});
|
||||
}
|
||||
|
||||
function registerServiceWorker() {
|
||||
if (!('serviceWorker' in navigator)) return;
|
||||
if (!window.isSecureContext && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1') return;
|
||||
|
||||
const register = () => {
|
||||
navigator.serviceWorker.register('/sw.js', { updateViaCache: 'none' }).catch((error) => {
|
||||
console.warn('[init] Service worker registration failed:', error);
|
||||
});
|
||||
};
|
||||
|
||||
if (document.readyState === 'complete') {
|
||||
register();
|
||||
} else {
|
||||
window.addEventListener('load', register, { once: true });
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize dashboard (called after TOTP gate check or directly if TOTP disabled)
|
||||
@@ -184,6 +198,7 @@
|
||||
|
||||
window.initializeDashboard = initializeDashboard;
|
||||
window.loadCustomServices = loadCustomServices;
|
||||
registerServiceWorker();
|
||||
|
||||
// TOTP-gated initialization
|
||||
(async () => {
|
||||
|
||||
Reference in New Issue
Block a user