Auto Refresh (5s)

Auto Refresh

Disabled

Next refresh in 5s

Toggle to enable/disable automatic refresh every 5 seconds. The setting persists across reloads.

:root { --bg: #0f172a; --card: #0b1220; --accent: #06b6d4; --muted: #94a3b8; --text: #e6eef6; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(180deg, #071025 0%, #071b2a 100%); color: var(--text); min-height: 100vh; display: grid; place-items: center; padding: 24px; } .container { width: 100%; max-width: 520px; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.04); border-radius: 12px; padding: 20px; box-shadow: 0 6px 30px rgba(2,6,23,0.6); } h1 { margin: 0 0 16px 0; font-size: 20px; letter-spacing: -0.2px; } .controls { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } /* Toggle switch */ .toggle { position: relative; display: inline-block; width: 52px; height: 30px; } .toggle input { opacity: 0; width: 0; height: 0; position: absolute; left: 0; top: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: rgba(255,255,255,0.06); border-radius: 999px; transition: background 150ms ease; box-shadow: inset 0 -2px 6px rgba(0,0,0,0.5); } .slider::before { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; background: #fff; border-radius: 50%; transition: transform 160ms cubic-bezier(.2,.9,.3,1); transform: translateX(0); box-shadow: 0 4px 10px rgba(2,6,23,0.6); } .toggle input:checked + .slider { background: linear-gradient(90deg, var(--accent), #7dd3fc); } .toggle input:checked + .slider::before { transform: translateX(22px); } .meta { display: flex; align-items: center; gap: 12px; } .status { color: var(--muted); font-size: 14px; } .btn { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: var(--text); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; } .btn:hover { background: rgba(255,255,255,0.02); } .countdown { font-size: 14px; color: var(--muted); margin-bottom: 10px; } .hint { margin: 8px 0 0 0; font-size: 13px; color: rgba(255,255,255,0.6); } @media (max-width: 420px) { .container { padding: 16px; } .toggle { width: 48px; height: 28px; } .slider::before { width: 20px; height: 20px; left: 4px; top: 4px; } .toggle input:checked + .slider::before { transform: translateX(20px); } } export default class AutoRefresh { constructor({ intervalMs = 5000, onTick = () => {} } = {}) { this.intervalMs = Number(intervalMs) || 5000; this.onTick = onTick; this._timeoutId = null; this._intervalId = null; this._deadline = null; this._running = false; } start() { if (this._running) return; this._running = true; this._deadline = Date.now() + this.intervalMs; // Single timeout to perform the reload action this._timeoutId = setTimeout(() => { // Final tick at 0s this._callTick(0); // Do reload try { location.reload(); } catch (e) { // In environments where reload isn't allowed, still stop this.stop(); } }, this.intervalMs); // Interval to update remaining time (every 100ms for a snappy UI) this._intervalId = setInterval(() => { const remainingMs = Math.max(0, this._deadline - Date.now()); const remainingSec = Math.ceil(remainingMs / 1000); this._callTick(remainingSec); }, 100); } stop() { if (!this._running) return; this._running = false; if (this._timeoutId) { clearTimeout(this._timeoutId); this._timeoutId = null; } if (this._intervalId) { clearInterval(this._intervalId); this._intervalId = null; } this._deadline = null; // notify UI that it's stopped (show full interval as default) this._callTick(Math.ceil(this.intervalMs / 1000)); } isRunning() { return this._running; } _callTick(sec) { try { this.onTick(Number(sec)); } catch (e) { // ignore callback errors console.error(e); } } } import AutoRefresh from "./autoRefresh.js"; const STORAGE_KEY = "autoRefreshEnabled"; const DEFAULT_INTERVAL_MS = 5000; const enableToggle = document.getElementById("enableToggle"); const statusEl = document.getElementById("status"); const countEl = document.getElementById("count"); const refreshNowBtn = document.getElementById("refreshNow"); const onTick = (secondsLeft) => { countEl.textContent = String(secondsLeft); }; const autoRef = new AutoRefresh({ intervalMs: DEFAULT_INTERVAL_MS, onTick, }); function setUIRunning(running) { enableToggle.checked = running; statusEl.textContent = running ? "Enabled — auto refreshing" : "Disabled"; statusEl.style.color = running ? "var(--accent)" : "var(--muted)"; } function loadSetting() { try { const raw = localStorage.getItem(STORAGE_KEY); return raw === "true"; } catch (e) { return false; } } function saveSetting(value) { try { localStorage.setItem(STORAGE_KEY, value ? "true" : "false"); } catch (e) { // ignore } } // Initialize from storage const startEnabled = loadSetting(); if (startEnabled) { autoRef.start(); } else { // ensure countdown shows full interval when disabled onTick(Math.ceil(DEFAULT_INTERVAL_MS / 1000)); } setUIRunning(autoRef.isRunning()); // Toggle handler enableToggle.addEventListener("change", (e) => { const enabled = Boolean(e.target.checked); saveSetting(enabled); if (enabled) { autoRef.start(); } else { autoRef.stop(); } setUIRunning(autoRef.isRunning()); }); // Refresh now button refreshNowBtn.addEventListener("click", () => { location.reload(); }); // Keep UI in sync when autoRef triggers ticks // (onTick already updates the countdown; listen for start/stop to update status) const observerInterval = setInterval(() => { setUIRunning(autoRef.isRunning()); }, 500); // Clean up before unload (not strictly necessary, but tidy) window.addEventListener("beforeunload", () => { try { autoRef.stop(); } catch (e) {} clearInterval(observerInterval); });