Configuration files

configuration/configuration.js

@@ -0,0 +1,7 @@
+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 ^^
+
+// Example format:
+//  const apiUrl = "https://api.uptimematrix.com/example"; 
+// where "example" is your unique identifier for your status page.
+// More configuration options will be added in the future

configuration/style-configuration.css

@@ -0,0 +1,23 @@
+/* These CSS variables can be used to do basic styling without creating custom modifications in static/css/custom.js or editing static/css/uptimematrix.css */
+:root {
+    --bg-color: #0f172a; 
+    --text-color: #e2e8f0;
+    --accent-color: #3b82f6;
+    --alert-color: #ef4444;
+    --success-color: #22c55e;
+    --warning-color: #f59e0b;
+    --slow-color: #ff9800;
+    --maintenance-color: #9c27b0;  
+    --dropdown-bg: #1e293b;
+    --card-bg: #1e293b;
+    --border-radius: 10px;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --spacing-xs: 6px;
+    --spacing-sm: 12px;
+    --spacing-md: 20px;
+    --spacing-lg: 28px;
+    --overall-status-bg: #1e293b;
+    --overall-status-text: #ffffff;
+    --separator-color: rgba(255, 255, 255, 0.1);
+    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }

index.html

@@ -6,7 +6,9 @@
     <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="stylesheet" href="static/css/uptimematrix.css"> <!--UptimeMatrix CSS-->
+    <link rel="stylesheet" href="configuration/style-configuration.css"> <!--Configuration CSS-->
+    <link rel="stylesheet" href="static/css/custom.css"> <!--User 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">
@@ -32,7 +34,9 @@ <h1><a href="https://layeredy.com"><img src="https://cdn.layeredy.com/uptimematr
             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>
+    <script src="static/js/uptimematrix.js"></script> <!-- UptimeMatrix JS -->
+    <script src="configuration/configuration.js"></script> <!-- Configuration JS -->
+    <script src="static/js/custom.js"></script> <!-- User JS -->
 </body>
 </html>
 <!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.5). | github.com/layeredy/uptimematrix-statuspage-spark  -->

static/css/custom.css

@@ -0,0 +1,3 @@
+/* Custom CSS Modifications go here
+Check out https://github.com/layeredy/uptimematrix-mods/ for public modifications made by others
+*/

styles.css → static/css/uptimematrix.css

@@ -1,26 +1,4 @@
-:root {
-  --bg-color: #0f172a;
-  --text-color: #e2e8f0;
-  --accent-color: #3b82f6;
-  --alert-color: #ef4444;
-  --success-color: #22c55e;
-  --warning-color: #f59e0b;
-  --slow-color: #ff9800;
-  --maintenance-color: #9c27b0;  
-  --dropdown-bg: #1e293b;
-  --card-bg: #1e293b;
-  --border-radius: 10px;
-  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  --spacing-xs: 6px;
-  --spacing-sm: 12px;
-  --spacing-md: 20px;
-  --spacing-lg: 28px;
-  --overall-status-bg: #1e293b;
-  --overall-status-text: #ffffff;
-  --separator-color: rgba(255, 255, 255, 0.1);
-  --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
+  /*  We recommend against modifying anything below this, use custom.css to add your own CSS and configuration/style-configuration.css for color mods  */
 body {
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   background-color: var(--bg-color);

static/js/custom.js

@@ -0,0 +1,2 @@
+// Add custom JS modifications here
+// Check out https://github.com/layeredy/uptimematrix-mods/ for public modifications made by others

script.js → static/js/uptimematrix.js

@@ -1,7 +1,4 @@
-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.
+// Do not modify this file, below; future versions will override this, use custom.js for your custom code.
 
 function setCookie(name, value, days) {
     let expires = "";