css reduction

This commit is contained in:
2026-02-11 17:42:01 -06:00
parent a7635c62d3
commit 800f42c9bb
5 changed files with 215 additions and 59 deletions

View File

@@ -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
}
]

View File

@@ -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-bar {
background: rgba(24, 24, 24, 0.95);
border-radius: 0.5em;
/* Overall Status Card - extends status-card */
.overall-status-card {
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;
}
}

View File

@@ -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
overallBar.classList.remove('all-operational', 'partial-outage', 'major-outage');
// Remove all status classes (reuse status-card classes)
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';

View File

@@ -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
}
]
}
}
}

View File

@@ -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>