status box css improvement, changed neko button to title

assets/scripts/uptime.js

@@ -9,36 +9,34 @@ document.addEventListener('DOMContentLoaded', async function() {
             const response = await fetch('https://quinten0508.com/api/uptime');
             const data = await response.json();
             
-            // Clear previous content
             uptimeElement.innerHTML = '';
             
             data.forEach(element => {
-                // Create parent div for each pair
                 const pairDiv = document.createElement('div');
                 pairDiv.className = 'uptime-pair';
                 
-            // Create div for name
                 const nameDiv = document.createElement('div');
                 nameDiv.className = 'uptime-name-element';
-
+            
-                // Check if there is a specific URL for this monitor name
                 if (names.hasOwnProperty(element.monitor_name)) {
                     const url = names[element.monitor_name];
                     nameDiv.innerHTML = `<a href="${url}" class="link" target="_blank">${element.monitor_name}</a>`;
                 } else {
                     nameDiv.textContent = element.monitor_name;
                 }
-
+            
-            // Create div for status
                 const statusDiv = document.createElement('div');
                 statusDiv.className = 'uptime-status-element';
+            
+                if (element.status === "up") {
+                    statusDiv.style.color = "#00b400";
+                } else if (element.status === "down") {
+                    statusDiv.style.color = "#b30000";
+                }
                 statusDiv.textContent = element.status;
-                
+            
-            // Append name and status divs to pair div
                 pairDiv.appendChild(nameDiv);
                 pairDiv.appendChild(statusDiv);
-                
-            // Append pair div to uptime container
                 uptimeElement.appendChild(pairDiv);
             });
             

index.html

@@ -19,6 +19,7 @@
 
         <div id="maintitlebox">
             <h1 id="maintitle" class="box">Quinten's Outpost</h1>
+            <button id="oneko-button" class="button">:3</button>
         </div>
 
         <div id="subtitlebox">
@@ -67,14 +68,11 @@
         
         <div class="box">
             <h3 style="padding-bottom: 1rem;">Status</h3>
-            <h5 style="color: red;">TEMPORARY DOWNTIME</h5>
-            <p>Accidentally nuked all 700 server configuration files, expect wonky behaviour across services while i figure this out...</p>
             <div id="uptime"></div>
         </div>
 
 
         <div class="box">
-            <button id="oneko-button" class="button">Click me :3</button>
             <h3>titleee</h3>
             <h5>caption</h5>
             <p>    this text will automatically fill up the box and has decent spacing?? </p>

style.css

@@ -35,24 +35,24 @@
   }
   
 
-@media (max-width: 1400px) {
-    html {
-      font-size: 25px;
-    }
-  }
   
   
-  @media (max-width: 768px) {
+  @media (max-width: 1200px) {
     html {
       font-size: 16px;
     }
   }
   
+  @media (max-width: 790px) {
+    html {
+      font-size: 14px;
+    }
+  }
 
   
-  @media (max-width: 450px) {
+  @media (max-width: 700px) {
     html {
-      font-size: 10px;
+      font-size: 12px;
     }
     #subtitlebox{
         height: 6rem !important;
@@ -80,7 +80,7 @@
   ideas
   * navbar as vertical element on left side
   * status bar under title for lastfm, mood?, misc
-  * services uptime - uptime kuma integration ---- sad, no api or anything for kuma...
+  * services uptime - uptime kuma integration ---- sad, no api or anything for kuma... NVM WE DID IT LMFAO
   * socials/links/platforms in first right-aligned box
     ** wont work well on mobile, instead just attach it under title within same box?
   * left side of that box as bio
@@ -134,61 +134,6 @@ body {
     margin: auto;
 }
 
-#maintitlebox {
-    margin-top: 1rem; 
-    margin-bottom: 0;
-}
-
-#maintitle {
-    font-size: 3.5rem;
-    text-align: center;
-    margin: 0;
-    margin: auto;
-}
-
-
-#subtitlebox {
-    display: flex;
-    justify-content: stretch;
-    align-items: stretch;
-    height: 4rem;
-    margin: 0;
-    padding: 0;
-    margin-bottom: 1.5rem;
-}
-
-    #links {
-        padding: 0;
-        margin: 0;
-        height: 100%;
-        flex: 1 1 auto;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-wrap: wrap;
-        flex: 3;
-    }
-
-        .linkbox {
-            margin-right: 1rem;
-            background: #000;
-            padding: 0.5rem;
-
-        }
-    #heartbeatbox {
-        margin: 0;
-        padding: 0;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex: 1
-
-    }
-        #heartbeat-time {
-            font-size: 1.2rem;
-        }
-
 .link {
     color: #E9E9E9;
     text-decoration: none;
@@ -252,6 +197,73 @@ body {
 }
 
 
+
+#maintitlebox {
+    margin-top: 1rem; 
+    margin-bottom: 0;
+    position: relative; /* for oneko-button "inside" */
+}
+
+#maintitle {
+    font-size: 3.5rem;
+    text-align: center;
+    margin: 0;
+    margin: auto;
+}
+
+#oneko-button {
+    position: absolute;
+    top: -1.5rem; /* adjust for margin */
+    right: 0;
+    padding: 0.65rem;
+}
+
+
+#subtitlebox {
+    display: flex;
+    justify-content: stretch;
+    align-items: stretch;
+    height: 4rem;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 1.5rem;
+}
+
+    #links {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        flex: 1 1 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        flex: 3;
+    }
+
+        .linkbox {
+            margin-right: 1rem;
+            background: #000;
+            padding: 0.5rem;
+
+        }
+    #heartbeatbox {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex: 1
+
+    }
+        #heartbeat-time {
+            font-size: 1.2rem;
+        }
+
+
+
+
 #header {
     display: flex;
     flex-direction: row;
@@ -365,24 +377,24 @@ body {
 }
 
 
-#uptime {
-    display: flex;
-    align-items: stretch;
-    justify-content: left;
-    flex-direction: column;
-}
-
 .uptime-pair {
     display: flex;
     border: 1px solid #E9E9E9;
-    padding: 1rem;
     flex-direction: row;
+    width:16rem;
 }
 .uptime-name-element, .uptime-status-element {
-    border: 1px solid red;
     padding: 1rem;
 }
 
+.uptime-name-element {
+    flex: 5;
+}
+.uptime-status-element {
+    flex: 1;
+    border-left: 1px solid #E9E9E9;
+}
+
 /*    #uptime-name, #uptime-status {
         align-items: center;
         height: 100%;