diff --git a/retro-refresh.js b/retro-refresh.js deleted file mode 100644 index af5b2e4..0000000 --- a/retro-refresh.js +++ /dev/null @@ -1,238 +0,0 @@ -// This script integrates the retro floating refresh bar -// with the existing dashboard and workers page functionality - -(function() { - // Wait for DOM to be ready - document.addEventListener('DOMContentLoaded', function() { - // Create the retro terminal bar if it doesn't exist yet - if (!document.getElementById('retro-terminal-bar')) { - createRetroTerminalBar(); - } - - // Hide the original refresh container - const originalRefreshUptime = document.getElementById('refreshUptime'); - if (originalRefreshUptime) { - originalRefreshUptime.style.visibility = 'hidden'; - originalRefreshUptime.style.height = '0'; - originalRefreshUptime.style.overflow = 'hidden'; - - // Important: We keep the original elements and just hide them - // This ensures all existing JavaScript functions still work - } - - // Add extra space at the bottom of the page to prevent the floating bar from covering content - const extraSpace = document.createElement('div'); - extraSpace.style.height = '100px'; - document.body.appendChild(extraSpace); - }); - - // Function to create the retro terminal bar - function createRetroTerminalBar() { - // Get the HTML content from the shared CSS/HTML - const html = ` -
-
-
SYSTEM MONITOR v0.1
-
-
-
-
-
-
-
-
-
- LIVE -
-
- 00:00:00 -
-
- -
- -
-
-
-
-
- 0s - 15s - 30s - 45s - 60s -
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
60s to next update
-
Uptime: 0h 0m 0s
-
-
- `; - - // Create a container for the HTML - const container = document.createElement('div'); - container.innerHTML = html; - - // Append to the body - document.body.appendChild(container.firstElementChild); - - // Start the clock update - updateTerminalClock(); - setInterval(updateTerminalClock, 1000); - - // Check if terminal should be collapsed based on previous state - const isCollapsed = localStorage.getItem('terminalCollapsed') === 'true'; - if (isCollapsed) { - document.getElementById('retro-terminal-bar').classList.add('collapsed'); - } - } - - // Function to update the terminal clock - function updateTerminalClock() { - const clockElement = document.getElementById('data-refresh-time'); - if (clockElement) { - const now = new Date(); - const hours = String(now.getHours()).padStart(2, '0'); - const minutes = String(now.getMinutes()).padStart(2, '0'); - const seconds = String(now.getSeconds()).padStart(2, '0'); - clockElement.textContent = `${hours}:${minutes}:${seconds}`; - } - } - - // Expose these functions globally for the onclick handlers - window.toggleTerminal = function() { - const terminal = document.getElementById('retro-terminal-bar'); - terminal.classList.toggle('collapsed'); - - // Store state in localStorage - localStorage.setItem('terminalCollapsed', terminal.classList.contains('collapsed')); - }; - - window.hideTerminal = function() { - document.getElementById('retro-terminal-bar').style.display = 'none'; - - // Create a show button that appears at the bottom right - const showButton = document.createElement('button'); - showButton.id = 'show-terminal-button'; - showButton.textContent = 'Show Monitor'; - showButton.style.position = 'fixed'; - showButton.style.bottom = '10px'; - showButton.style.right = '10px'; - showButton.style.zIndex = '1000'; - showButton.style.backgroundColor = '#f7931a'; - showButton.style.color = '#000'; - showButton.style.border = 'none'; - showButton.style.padding = '8px 12px'; - showButton.style.cursor = 'pointer'; - showButton.style.fontFamily = "'VT323', monospace"; - showButton.style.fontSize = '14px'; - showButton.onclick = function() { - document.getElementById('retro-terminal-bar').style.display = 'block'; - this.remove(); - }; - document.body.appendChild(showButton); - }; - - // Redirect original progress bar updates to our new floating bar - // This Observer will listen for changes to the original #bitcoin-progress-inner - // and replicate them to our new floating bar version - const initProgressObserver = function() { - // Setup a MutationObserver to watch for style changes on the original progress bar - const originalProgressBar = document.querySelector('#refreshUptime #bitcoin-progress-inner'); - const newProgressBar = document.querySelector('#retro-terminal-bar #bitcoin-progress-inner'); - - if (originalProgressBar && newProgressBar) { - const observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.attributeName === 'style') { - // Get the width from the original progress bar - const width = originalProgressBar.style.width; - if (width) { - // Apply it to our new progress bar - newProgressBar.style.width = width; - - // Also copy any classes (like glow-effect) - if (originalProgressBar.classList.contains('glow-effect') && - !newProgressBar.classList.contains('glow-effect')) { - newProgressBar.classList.add('glow-effect'); - } else if (!originalProgressBar.classList.contains('glow-effect') && - newProgressBar.classList.contains('glow-effect')) { - newProgressBar.classList.remove('glow-effect'); - } - - // Copy waiting-for-update class - if (originalProgressBar.classList.contains('waiting-for-update') && - !newProgressBar.classList.contains('waiting-for-update')) { - newProgressBar.classList.add('waiting-for-update'); - } else if (!originalProgressBar.classList.contains('waiting-for-update') && - newProgressBar.classList.contains('waiting-for-update')) { - newProgressBar.classList.remove('waiting-for-update'); - } - } - } - }); - }); - - // Start observing - observer.observe(originalProgressBar, { attributes: true }); - } - - // Also watch for changes to the progress text - const originalProgressText = document.querySelector('#refreshUptime #progress-text'); - const newProgressText = document.querySelector('#retro-terminal-bar #progress-text'); - - if (originalProgressText && newProgressText) { - const textObserver = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.type === 'childList') { - // Update the text in our new bar - newProgressText.textContent = originalProgressText.textContent; - } - }); - }); - - // Start observing - textObserver.observe(originalProgressText, { childList: true, subtree: true }); - } - - // Watch for changes to the uptime timer - const originalUptimeTimer = document.querySelector('#refreshUptime #uptimeTimer'); - const newUptimeTimer = document.querySelector('#retro-terminal-bar #uptimeTimer'); - - if (originalUptimeTimer && newUptimeTimer) { - const uptimeObserver = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - if (mutation.type === 'childList') { - // Update the text in our new bar - newUptimeTimer.innerHTML = originalUptimeTimer.innerHTML; - } - }); - }); - - // Start observing - uptimeObserver.observe(originalUptimeTimer, { childList: true, subtree: true }); - } - }; - - // Start the observer once the page is fully loaded - window.addEventListener('load', function() { - // Give a short delay to ensure all elements are rendered - setTimeout(initProgressObserver, 500); - }); -})(); \ No newline at end of file