css reduction

src/monitor.py

@@ -28,12 +28,6 @@ SERVICES = [
         'name': 'git.asimonson.com',
         'url': 'https://git.asimonson.com',
         'timeout': 10
-    },
-    {
-        'id': 'balls',
-        'name': 'balls.asimonson.com',
-        'url': 'https://balls.asimonson.com',
-        'timeout': 10
     }
 ]
 

src/static/css/App.css

@@ -97,7 +97,9 @@ h2, h3, h4, h5 {
 }
 
 h5 {
-  margin: 0;
+  margin: 0.3em 0 0 0;
+  font-size: 1rem;
+  font-weight: normal;
 }
 
 strong {
@@ -906,7 +908,8 @@ tr {
   position: relative;
   width: 90%;
   margin-left: 10px;
-
+  font-weight: bold;
+  font-size: small;
 }
 
 .pfpContainer {
@@ -1317,27 +1320,10 @@ tr {
 }
 
 /* Overall Status Bar */
-/* Overall Status Bar */
+/* Overall Status Card - extends status-card */
-.overall-status-bar {
+.overall-status-card {
-  background: rgba(24, 24, 24, 0.95);
-  border-radius: 0.5em;
   padding: 2em;
   margin-bottom: 2em;
-  border-top: solid 4px rgba(139, 36, 36, 0.5);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  transition: border-color 0.5s ease;
-}
-
-.overall-status-bar.all-operational {
-  border-top-color: rgba(76, 175, 80, 0.8);
-}
-
-.overall-status-bar.partial-outage {
-  border-top-color: rgba(255, 193, 7, 0.8);
-}
-
-.overall-status-bar.major-outage {
-  border-top-color: rgba(244, 67, 54, 0.8);
 }
 
 .overall-status-content {
@@ -1362,7 +1348,7 @@ tr {
 
 .overall-status-icon.operational {
   color: #4caf50;
-  animation: none;
+  animation: pulse-icon 1.5s ease-in-out infinite;
 }
 
 .overall-status-icon.partial {
@@ -1372,7 +1358,7 @@ tr {
 
 .overall-status-icon.major {
   color: #f44336;
-  animation: none;
+  animation: pulse-icon 1.5s ease-in-out infinite;
 }
 
 @keyframes spin {
@@ -1392,23 +1378,11 @@ tr {
   font-weight: 600;
 }
 
-.overall-status-subtitle {
-  margin: 0.3em 0 0 0;
-  font-size: 1rem;
-  color: #a8a8a8;
-}
-
-.overall-status-metrics {
-  display: flex;
-  gap: 2em;
-}
-
 .metric-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1em 1.5em;
-  background: rgba(0, 0, 0, 0.3);
   border-radius: 0.5em;
   min-width: 80px;
 }
@@ -1463,11 +1437,6 @@ tr {
   transition: 0.3s;
 }
 
-.status-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
 .status-card.online {
   border-top-color: rgba(76, 175, 80, 0.8);
 }
@@ -1668,8 +1637,4 @@ tr {
     text-align: center;
   }
 
-  .overall-status-metrics {
-    width: 100%;
-    justify-content: center;
-  }
 }

src/static/js/status.js

@@ -150,7 +150,7 @@ function updateOverallStatus(services) {
   const overallBar = document.getElementById('overallStatus');
   const icon = overallBar.querySelector('.overall-status-icon');
   const title = overallBar.querySelector('.overall-status-title');
-  const subtitle = overallBar.querySelector('.overall-status-subtitle');
+  const subtitle = document.getElementById('overall-status-subtitle');
   const onlineCount = document.getElementById('onlineCount');
   const totalCount = document.getElementById('totalCount');
 
@@ -164,28 +164,28 @@ function updateOverallStatus(services) {
   onlineCount.textContent = online;
   totalCount.textContent = total;
 
-  // Remove all status classes
+  // Remove all status classes (reuse status-card classes)
-  overallBar.classList.remove('all-operational', 'partial-outage', 'major-outage');
+  overallBar.classList.remove('online', 'degraded', 'offline');
   icon.classList.remove('operational', 'partial', 'major', 'loading');
 
   // Determine overall status
   if (online === total) {
     // All systems operational
-    overallBar.classList.add('all-operational');
+    overallBar.classList.add('online');
     icon.classList.add('operational');
     icon.textContent = '✓';
     title.textContent = 'All Systems Operational';
     subtitle.textContent = `All ${total} services are running normally`;
   } else if (offline >= Math.ceil(total / 2)) {
     // Major outage (50% or more offline)
-    overallBar.classList.add('major-outage');
+    overallBar.classList.add('offline');
     icon.classList.add('major');
     icon.textContent = '✕';
     title.textContent = 'Major Outage';
     subtitle.textContent = `${offline} service${offline !== 1 ? 's' : ''} offline, ${degraded} degraded`;
   } else if (offline > 0 || degraded > 0) {
     // Partial outage
-    overallBar.classList.add('partial-outage');
+    overallBar.classList.add('degraded');
     icon.classList.add('partial');
     icon.textContent = '⚠';
     title.textContent = 'Partial Outage';

src/static/json/status_history.json

@@ -0,0 +1,197 @@
+{
+  "last_check": "2026-02-11T17:41:12.794801",
+  "services": {
+    "main": {
+      "name": "asimonson.com",
+      "url": "https://asimonson.com",
+      "status": "online",
+      "response_time": 176,
+      "status_code": 200,
+      "last_online": "2026-02-11T17:41:12.182449",
+      "checks": [
+        {
+          "timestamp": "2026-02-11T17:19:30.284329",
+          "status": "online",
+          "response_time": 218,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:22:30.814277",
+          "status": "online",
+          "response_time": 153,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:25:48.966137",
+          "status": "online",
+          "response_time": 194,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:26:45.887752",
+          "status": "online",
+          "response_time": 126,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:27:07.545311",
+          "status": "online",
+          "response_time": 142,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:28:05.544245",
+          "status": "online",
+          "response_time": 121,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:29:33.040628",
+          "status": "online",
+          "response_time": 122,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:40:15.925087",
+          "status": "online",
+          "response_time": 168,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:41:12.182449",
+          "status": "online",
+          "response_time": 176,
+          "status_code": 200
+        }
+      ]
+    },
+    "files": {
+      "name": "files.asimonson.com",
+      "url": "https://files.asimonson.com",
+      "status": "online",
+      "response_time": 343,
+      "status_code": 200,
+      "last_online": "2026-02-11T17:41:12.358984",
+      "checks": [
+        {
+          "timestamp": "2026-02-11T17:19:30.503436",
+          "status": "online",
+          "response_time": 220,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:22:30.968477",
+          "status": "online",
+          "response_time": 179,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:25:49.160321",
+          "status": "online",
+          "response_time": 244,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:26:46.014059",
+          "status": "online",
+          "response_time": 173,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:27:07.688000",
+          "status": "online",
+          "response_time": 182,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:28:05.666343",
+          "status": "online",
+          "response_time": 198,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:29:33.162841",
+          "status": "online",
+          "response_time": 155,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:40:16.093647",
+          "status": "online",
+          "response_time": 291,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:41:12.358984",
+          "status": "online",
+          "response_time": 343,
+          "status_code": 200
+        }
+      ]
+    },
+    "git": {
+      "name": "git.asimonson.com",
+      "url": "https://git.asimonson.com",
+      "status": "online",
+      "response_time": 92,
+      "status_code": 200,
+      "last_online": "2026-02-11T17:41:12.702425",
+      "checks": [
+        {
+          "timestamp": "2026-02-11T17:19:30.723832",
+          "status": "online",
+          "response_time": 194,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:22:31.148406",
+          "status": "online",
+          "response_time": 125,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:25:49.404813",
+          "status": "online",
+          "response_time": 257,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:26:46.187712",
+          "status": "online",
+          "response_time": 133,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:27:07.870186",
+          "status": "online",
+          "response_time": 112,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:28:05.865444",
+          "status": "online",
+          "response_time": 109,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:29:33.318720",
+          "status": "online",
+          "response_time": 156,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:40:16.385682",
+          "status": "online",
+          "response_time": 140,
+          "status_code": 200
+        },
+        {
+          "timestamp": "2026-02-11T17:41:12.702425",
+          "status": "online",
+          "response_time": 92,
+          "status_code": 200
+        }
+      ]
+    }
+  }
+}

src/templates/status.html

@@ -32,16 +32,16 @@
   </div>
 
   <!-- Overall Status Bar -->
-  <div class="overall-status-bar" id="overallStatus">
+  <div class="status-card overall-status-card" id="overallStatus">
     <div class="overall-status-content">
       <div class="overall-status-indicator">
         <span class="overall-status-icon loading">◐</span>
         <div>
           <h3 class="overall-status-title">Checking Systems...</h3>
-          <p class="overall-status-subtitle">Loading service status</p>
+          <h5 id="overall-status-subtitle">Loading service status</h5>
         </div>
       </div>
-      <div class="overall-status-metrics">
+      <div class="flex spaceBetween">
         <div class="metric-box">
           <span class="metric-number" id="onlineCount">--</span>
           <span class="metric-label">Online</span>