diff --git a/index.html b/index.html index 128b056..d36ac67 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -34,5 +34,5 @@

- + diff --git a/script.js b/script.js index a846151..4b73afe 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,8 @@ +const apiUrl = "data.json"; +// ^^ Set this to your UptimeMatrix API URL, you can find this either at https://app.uptimematrix.com or if you are self-hosting, it will just be data.json ^^ +// Acceptable status' -- Operational, Degraded, Issue, Slow, Maintenance | If you need extras, you will need to edit this file and the styles file. +// You do not need to modify anything below this line. See styles.css for styling. + function setCookie(name, value, days) { let expires = ""; if (days) { @@ -23,9 +28,9 @@ function getCookie(name) { document.addEventListener("DOMContentLoaded", () => { const startTime = performance.now(); - showLoadingAnimation(); + showLoadingAnimation(); - fetch("data.json") + fetch(apiUrl) .then((response) => { if (!response.ok) { throw new Error( @@ -50,7 +55,7 @@ document.addEventListener("DOMContentLoaded", () => { handleWhitelabel(data.Whitelabel); - hideLoadingAnimation(); + hideLoadingAnimation(); const endTime = performance.now(); const loadTime = (endTime - startTime).toFixed(2); @@ -60,7 +65,7 @@ document.addEventListener("DOMContentLoaded", () => { }) .catch((error) => { console.error("UptimeMatrix load failure!:", error.message); - hideLoadingAnimation(); + hideLoadingAnimation(); displayErrorMessage(); console.error( "--- What should I do? --- \n\n\n If you are a user: \n\n Please try again in a few minutes or check out our network status at status.layeredy.com \n\n\n If you are the site owner: \n\n Try re-checking in a few minutes or check your monitor configuration at app.uptimematrix.com if you are using a external database." @@ -153,28 +158,6 @@ function updateAnnouncementBar(announcement) { function updateOverallStatus(services, RandomOperationalMessage, data) { const overallStatusElement = document.getElementById("overall-status"); - let isMaintenanceOngoing = false; - if (data.maintenanceAlerts && data.maintenanceAlerts.length > 0) { - const now = new Date(); - data.maintenanceAlerts.forEach((alert) => { - if (alert.start && alert.end) { - const startTime = new Date(alert.start); - const endTime = new Date(alert.end); - if (now >= startTime && now <= endTime) { - isMaintenanceOngoing = true; - } - } - }); - } - if (isMaintenanceOngoing) { - overallStatusElement.innerHTML = ` -
//
- Undergoing maintenance - `; - overallStatusElement.className = "status-maintenance"; - return; - } - let overallStatus = "Operational"; if (data.OverallStatus && data.OverallStatus !== "NoOverride") { overallStatus = data.OverallStatus; @@ -182,33 +165,50 @@ function updateOverallStatus(services, RandomOperationalMessage, data) { const allStatuses = Object.values(services).flatMap((group) => Object.values(group) ); - if (allStatuses.some((status) => status === "Issue")) { + if (allStatuses.some((status) => status === "Maintenance")) { + overallStatus = "Maintenance"; + } else if (allStatuses.some((status) => status === "Issue")) { overallStatus = "Issue"; + } else if (allStatuses.some((status) => status === "Slow")) { + overallStatus = "Slow"; } else if (allStatuses.some((status) => status === "Degraded")) { overallStatus = "Degraded"; + } else { + overallStatus = "Operational"; } } - let statusText = "All systems operational"; - let statusIcon = "✓"; - - if (overallStatus === "Operational" && RandomOperationalMessage) { - const successMessages = [ - "All systems are operational", - "Systems are functioning normally", - "Services are running smoothly", - "All systems are performing as expected", - "All platforms are operational and responsive", - "All systems are live", - ]; - statusText = - successMessages[Math.floor(Math.random() * successMessages.length)]; - } else if (overallStatus === "Degraded") { - statusText = "Some systems may be experiencing issues"; - statusIcon = "!"; + let statusText = ""; + let statusIcon = ""; + + if (overallStatus === "Maintenance") { + statusText = "Undergoing maintenance"; + statusIcon = "//"; } else if (overallStatus === "Issue") { statusText = "Major outage detected"; statusIcon = "✕"; + } else if (overallStatus === "Slow") { + statusText = "Some services may be slow"; + statusIcon = "…"; + } else if (overallStatus === "Degraded") { + statusText = "Some systems may be experiencing issues"; + statusIcon = "!"; + } else if (overallStatus === "Operational") { + if (RandomOperationalMessage) { + const successMessages = [ + "All systems are operational", + "Systems are functioning normally", + "Services are running smoothly", + "All systems are performing as expected", + "All platforms are operational and responsive", + "All systems are live", + ]; + statusText = + successMessages[Math.floor(Math.random() * successMessages.length)]; + } else { + statusText = "All systems operational"; + } + statusIcon = "✓"; } else { statusText = overallStatus; statusIcon = "?"; @@ -352,9 +352,15 @@ function calculateGroupStatus(serviceGroup) { const statuses = Object.values(serviceGroup); if (statuses.every((status) => status === "Operational")) { return "Operational"; + } else if (statuses.some((status) => status === "Maintenance")) { + return "Maintenance"; } else if (statuses.some((status) => status === "Issue")) { return "Issue"; - } else { + } else if (statuses.some((status) => status === "Slow")) { + return "Slow"; + } else if (statuses.some((status) => status === "Degraded")) { return "Degraded"; + } else { + return "Unknown"; } } diff --git a/styles.css b/styles.css index 5eb4fed..108ead3 100644 --- a/styles.css +++ b/styles.css @@ -5,6 +5,8 @@ --alert-color: #ef4444; --success-color: #22c55e; --warning-color: #f59e0b; + --slow-color: #ff9800; + --maintenance-color: #9c27b0; --dropdown-bg: #1e293b; --card-bg: #1e293b; --border-radius: 10px; @@ -215,6 +217,24 @@ h1 { animation: blip 2s infinite; } +.status-slow { + background-color: rgba(255, 152, 0, 0.2); +} + +.status-slow::before { + background-color: var(--slow-color); + animation: blip 2s infinite; +} + +.status-maintenance { + background-color: rgba(156, 39, 176, 0.2); +} + +.status-maintenance::before { + background-color: var(--maintenance-color); + animation: blip 2s infinite; +} + #overall-status { background-color: var(--overall-status-bg); color: var(--overall-status-text); @@ -247,15 +267,31 @@ h1 { animation: blip 2s infinite; } +.status-degraded .status-icon { + color: var(--warning-color); +} + +.status-issue .status-icon { + color: var(--alert-color); +} + +.status-slow .status-icon { + color: var(--slow-color); +} + +.status-maintenance .status-icon { + color: var(--maintenance-color); +} + @keyframes blip { 0% { - box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { - box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); + box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { - box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); + box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @@ -345,6 +381,14 @@ body.light-mode .status-issue { background-color: rgba(239, 68, 68, 0.1); } +body.light-mode .status-slow { + background-color: rgba(255, 152, 0, 0.1); +} + +body.light-mode .status-maintenance { + background-color: rgba(156, 39, 176, 0.1); +} + @media (max-width: 768px) { .container { padding: var(--spacing-md) var(--spacing-sm);