Initial commit

layeredy · Sep 15, 2024 · a58eaa2 · a58eaa2
commit a58eaa2
Show file tree

Hide file tree

Showing 7 changed files with 754 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+.replit
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Layeredy LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+[![layeredy](https://cdn.layeredy.com/uptimematrix/wordmark.png)](https://uptimematrix.com)
+
+# Spark by UptimeMatrix
+This is the status-page template "Spark" for UptimeMatrix, the uptime monitoring software developed by [Layeredy](https://layeredy.com)
+
+Feel free to use this site as a template or to suggest improvements. 
+
+⚠️ The community/open-source version of our status page uses JSON, which is outdated and generally slower compared to the database version used on UptimeMatrix. This repository only receives UI/UX updates and does not include API or endpoint updates. Pull requests that propose changes to site control or management will not be merged.
+
+> [!NOTE]
+> This repository may not get some/all updates done on [UptimeMatrix](https://uptimematrix.com).
+
+![layeredy](https://www.uptimematrix.com/assets/homepage-darkmode.png)
+
+> [!TIP]
+> Check out our other [open source](https://github.com/layeredy) projects!
+
+> [!WARNING]
+> Report security vulnerabilities to us in accordance with our [security policy](https://layeredy.com/security-policy/). Your cooperation is crucial in maintaining the safety and reliability of our projects.
diff --git a/data.json b/data.json
@@ -0,0 +1,39 @@
+{
+  "Whitelabel": false,
+  "RandomOperationalMessage": true,
+  "maintenanceAlerts": [
+    {
+      "date": "2021-01-16T12:00:00Z",
+      "message": "Hey!",
+      "title": "Upgrades to US 1 on July 31st"
+    }
+  ],
+  "sections": {
+    "maintenanceAlerts": true,
+    "statusUpdates": true
+  },
+  "services": {
+    "Example 1": {
+      "Example service 1": "Operational",
+      "Example service 2": "Operational",
+      "Example service 3": "Operational"
+    },
+    "Example 2": {
+      "Another example service 1": "Operational",
+      "Another example service 2": "Operational",
+      "Another example service 3": "Operational"
+    },
+    "Example 3": {
+      "Again another example service 1": "Operational",
+      "Again another example service 2": "Operational"
+    }
+  },
+  "statusUpdates": [
+    {
+      "color": "#7a54f8",
+      "date": "2024-08-10T09:00:00Z",
+      "message": "We like playing uno... and developing software",
+      "title": "This is a demo site!"
+    }
+  ]
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.2). | github.com/layeredy/uptimematrix-statuspage-spark  -->
+<!-- Theme: Spark github.com/layeredy/uptimematrix-statuspage-spark --> 
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UptimeMatrix | Status (Demo)</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" href="https://cdn.layeredy.com/uptimematrix/logo.png" type="image/x-icon">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <meta name="description" content="Demo | github.com/layeredy">
+    <meta property="og:title" content="Demo">
+    <meta property="og:description" content="Get up-to-date information on the status of Layeredy's services.">
+    <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+</head>
+<body>
+    <div class="container">
+        <h1><a href="https://layeredy.com"><img src="https://cdn.layeredy.com/uptimematrix/wordmark.png" alt="UptimeMatrix" class="logo"></a></h1>
+        <div id="overall-status"></div>
+        <div id="maintenance-alerts"></div>
+        <div id="services"></div>
+        <div id="status-updates"></div>
+        <div id="theme-toggle-container">
+            <button id="theme-toggle" aria-label="Toggle theme">
+                <i class="bi bi-moon-fill"></i>
+            </button>
+        </div>
+        <div class="copyright">
+            Status page by <a href="https://uptimematrix.com" target="_blank"><strong>UptimeMatrix</strong>  <!-- You can disable this in data.json (but please don't! Support open source projects!) -->
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.2). | github.com/layeredy/uptimematrix-statuspage-spark  -->
+<!-- Theme: Spark github.com/layeredy/uptimematrix-statuspage-spark -->
diff --git a/script.js b/script.js
@@ -0,0 +1,265 @@
+function setCookie(name, value, days) {
+    let expires = "";
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+function getCookie(name) {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(';');
+    for(let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const startTime = performance.now();
+
+    fetch('data.json')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Database is unreachable/may be overloaded. \n\n\n\n -- No need to panic! -- \n--- 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.');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.sections.announcementBar) updateAnnouncementBar(data.announcement);
+            updateOverallStatus(data.services, data.RandomOperationalMessage);
+            updateServices(data.services);
+            if (data.sections.maintenanceAlerts) updateMaintenanceAlerts(data.maintenanceAlerts);
+            if (data.sections.statusUpdates) updateStatusUpdates(data.statusUpdates);
+
+            handleWhitelabel(data.Whitelabel);
+
+            const endTime = performance.now();
+            const loadTime = (endTime - startTime).toFixed(2);
+            console.log(`UptimeMatrix loaded successfully in ${loadTime}ms. UptimeMatrix by Layeredy LLC.`);
+        })
+        .catch(error => {
+            console.error('UptimeMatrix load failure!:', error.message);
+            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.');
+        });
+
+    const themeToggle = document.getElementById('theme-toggle');
+    const body = document.body;
+    const savedTheme = getCookie('theme');
+
+    if (savedTheme === 'light') {
+        body.classList.add('light-mode');
+        updateThemeIcon();
+    }
+
+    themeToggle.addEventListener('click', () => {
+        body.classList.toggle('light-mode');
+        updateThemeIcon();
+        setCookie('theme', body.classList.contains('light-mode') ? 'light' : 'dark', 365);
+    });
+
+    function updateThemeIcon() {
+        const icon = themeToggle.querySelector('i');
+        if (body.classList.contains('light-mode')) {
+            icon.classList.remove('bi-moon-fill');
+            icon.classList.add('bi-sun-fill');
+        } else {
+            icon.classList.remove('bi-sun-fill');
+            icon.classList.add('bi-moon-fill');
+        }
+    }
+
+    updateThemeIcon();
+});
+
+function handleWhitelabel(isWhitelabel) {
+    const copyrightDiv = document.querySelector('.copyright');
+    if (copyrightDiv) {
+        copyrightDiv.style.display = isWhitelabel ? 'none' : 'block';
+    }
+}
+
+function displayErrorMessage() {
+    const body = document.body;
+    body.innerHTML = `
+        <div style="text-align: center; padding: 20px;">
+            <h1>Uh oh...</h1>
+            <p>Something went really wrong while loading this status page </p>
+            <p style="font-size: 0.8em;">Check if UptimeMatrix is having issues on our status page</p>
+            <p style="font-size: 0.6em;">This error has been reported to UptimeMatrix and we are looking into it.</p>
+            <br /> 
+            <button onclick="window.location.href='https://status.layeredy.com'" style="padding: 10px 20px; background-color: #0275d8; color: #fff; border: none; border-radius: 5px; cursor: pointer;">
+                UptimeMatrix status
+            </button>
+        </div>
+    `;
+}
+
+function updateAnnouncementBar(announcement) {
+    const announcementBar = document.getElementById('announcement-bar');
+    if (announcement && announcement.text) {
+        announcementBar.textContent = announcement.text;
+        announcementBar.style.display = 'block';
+    } else {
+        announcementBar.style.display = 'none';
+    }
+}
+
+function updateOverallStatus(services, RandomOperationalMessage) {
+    const overallStatusElement = document.getElementById('overall-status');
+    const allStatuses = Object.values(services).flatMap(group => Object.values(group));
+    let overallStatus = 'Operational';
+
+    if (allStatuses.some(status => status === 'Issue')) {
+        overallStatus = 'Issue';
+    } else if (allStatuses.some(status => status === 'Degraded')) {
+        overallStatus = 'Degraded';
+    }
+
+    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 = '!';
+    } else if (overallStatus === 'Issue') {
+        statusText = 'Major outage detected';
+        statusIcon = '✕';
+    }
+
+    overallStatusElement.innerHTML = `
+        <div class="status-icon">${statusIcon}</div>
+        ${statusText}
+    `;
+    overallStatusElement.className = `status-${overallStatus.toLowerCase()}`;
+
+    const statusIconElement = overallStatusElement.querySelector('.status-icon');
+    if (overallStatus === 'Operational') {
+        statusIconElement.style.animation = 'blip 2s infinite';
+    } else {
+        statusIconElement.style.animation = 'none';
+    }
+}
+
+function updateServices(services) {
+    const servicesContainer = document.getElementById('services');
+    servicesContainer.innerHTML = '<h2>Services</h2>';
+
+    Object.entries(services).forEach(([groupName, serviceGroup]) => {
+        const groupElement = document.createElement('div');
+        groupElement.className = 'service-group';
+
+        const groupStatus = calculateGroupStatus(serviceGroup);
+
+        const groupTitle = document.createElement('h2');
+        groupTitle.innerHTML = `
+            <span class="dropdown-icon">▼</span>
+            <span class="group-name">${groupName}</span>
+            <span class="service-status status-${groupStatus.toLowerCase()}">${groupStatus}</span>
+        `;
+        groupElement.appendChild(groupTitle);
+
+        const serviceList = document.createElement('div');
+        serviceList.className = 'service-list';
+
+        Object.entries(serviceGroup).forEach(([serviceName, status]) => {
+            const serviceItem = document.createElement('div');
+            serviceItem.className = 'service-item';
+
+            const nameSpan = document.createElement('span');
+            nameSpan.textContent = serviceName;
+            serviceItem.appendChild(nameSpan);
+
+            const statusSpan = document.createElement('span');
+            statusSpan.className = `service-status status-${status.toLowerCase()}`;
+            statusSpan.textContent = status;
+            serviceItem.appendChild(statusSpan);
+
+            serviceList.appendChild(serviceItem);
+        });
+
+        groupElement.appendChild(serviceList);
+        servicesContainer.appendChild(groupElement);
+
+        groupTitle.addEventListener('click', () => {
+            groupElement.classList.toggle('open');
+        });
+    });
+}
+
+function updateMaintenanceAlerts(alerts) {
+    const maintenanceAlertsContainer = document.getElementById('maintenance-alerts');
+    maintenanceAlertsContainer.innerHTML = '<h2>Upcoming maintenance</h2>';
+
+    if (alerts && alerts.length > 0) {
+        alerts.forEach(alert => {
+            const alertElement = createAlertElement(alert, 'alert');
+            maintenanceAlertsContainer.appendChild(alertElement);
+        });
+    } else {
+        maintenanceAlertsContainer.innerHTML += '<p>No current upcoming maintenances.</p>';
+    }
+}
+
+function updateStatusUpdates(updates) {
+    const statusUpdatesContainer = document.getElementById('status-updates');
+    statusUpdatesContainer.innerHTML = '<h2>Status Updates</h2>';
+
+    if (updates && updates.length > 0) {
+        updates.forEach(update => {
+            const updateElement = createAlertElement(update, 'update');
+            if (update.color) {
+                updateElement.style.setProperty('--status-update-color', update.color);
+            }
+            statusUpdatesContainer.appendChild(updateElement);
+        });
+    } else {
+        statusUpdatesContainer.innerHTML += '<p>No recent status updates.</p>';
+    }
+}
+
+function createAlertElement(item, className) {
+    const element = document.createElement('div');
+    element.className = className;
+
+    const title = document.createElement('h3');
+    title.textContent = item.title;
+    element.appendChild(title);
+
+    const date = document.createElement('p');
+    date.className = 'date';
+    date.textContent = new Date(item.date).toLocaleString();
+    element.appendChild(date);
+
+    const message = document.createElement('p');
+    message.textContent = item.message;
+    element.appendChild(message);
+
+    return element;
+}
+
+function calculateGroupStatus(serviceGroup) {
+    const statuses = Object.values(serviceGroup);
+    if (statuses.every(status => status === 'Operational')) {
+        return 'Operational';
+    } else if (statuses.some(status => status === 'Issue')) {
+        return 'Issue';
+    } else {
+        return 'Degraded';
+    }
+}