dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-18 00:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add database status bar with connection, latency, and write capability monitoring

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-15 21:20:29 +11:00
parent bcf3b0a032
commit e7c8d890b9
4 changed files with 392 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
styles.css
View File

@@ -528,6 +528,157 @@ body {
box-shadow: 0 6px 30px rgba(147, 51, 234, 0.6);
}
/* Database Status Bar */
.db-status-bar {
background: rgba(20, 24, 39, 0.95);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 1rem 1.5rem;
margin: 2rem 0 1rem;
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.db-status-bar:hover {
border-color: var(--border-medium);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.db-status-item {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: fit-content;
}
.db-status-label {
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.db-status-value {
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 600;
font-family: 'Courier New', monospace;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
border-radius: 6px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
}
.db-status-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
border-radius: 6px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--text-muted);
transition: all 0.3s ease;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.status-dot.status-connected {
background: var(--success);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.status-dot.status-disconnected {
background: var(--danger);
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
animation: pulse-error 1s ease-in-out infinite;
}
.status-dot.status-warning {
background: #f59e0b;
box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
@keyframes pulse-error {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.1);
}
}
.status-text {
color: var(--text-primary);
font-size: 0.9rem;
font-weight: 600;
}
.db-status-indicator.status-success {
border-color: rgba(16, 185, 129, 0.3);
background: rgba(16, 185, 129, 0.05);
}
.db-status-indicator.status-error {
border-color: rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.05);
}
.db-status-indicator.status-warning {
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.05);
}
/* Latency color coding */
.latency-good {
color: var(--success);
border-color: rgba(16, 185, 129, 0.3);
background: rgba(16, 185, 129, 0.05);
}
.latency-ok {
color: #f59e0b;
border-color: rgba(245, 158, 11, 0.3);
background: rgba(245, 158, 11, 0.05);
}
.latency-slow {
color: var(--danger);
border-color: rgba(239, 68, 68, 0.3);
background: rgba(239, 68, 68, 0.05);
}
.db-status-timestamp {
margin-left: auto;
opacity: 0.7;
}
/* Footer */
.footer {
margin-top: 2rem;
@@ -544,7 +695,7 @@ body {
grid-template-columns: repeat(25, 22px);
grid-template-rows: repeat(25, 22px);
}
.board[data-size="50"] {
grid-template-columns: repeat(50, 15px);
grid-template-rows: repeat(50, 15px);
@@ -611,4 +762,19 @@ body {
.victory-title {
font-size: 2rem;
}
.db-status-bar {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.db-status-item {
width: 100%;
justify-content: space-between;
}
.db-status-timestamp {
margin-left: 0;
}
}