Replace Bot Status tab with the VEGA status page
The Status tab embeds status.userevolt.app (VEGA) in an iframe that loads on first open, with a VEGA-coloured top bar. Old /yuukabot links go to /status. Removes the Firebase bot dashboard (yuukabot.js/css). Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
esefandClaude Opus 5.5 committed
1 parent
26b97923e2
commit
59d226f283
5 files changed
+49
-323
No files matched your search
+35
-1
@@ -91,6 +91,19 @@ html, body {
|
||||
transition: border-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
/* status theme (VEGA colours) */
|
||||
#top-line.status-theme {
|
||||
background-color: #03070b;
|
||||
border-bottom: 1px solid rgba(75, 187, 232, .28);
|
||||
}
|
||||
#top-line.status-theme #nav-tabs button {
|
||||
border-bottom-color: #4bbbe8;
|
||||
border-left-color: #4bbbe8;
|
||||
border-right-color: #4bbbe8;
|
||||
color: #a6e4ff;
|
||||
transition: border-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
color: #000000;
|
||||
@@ -186,7 +199,8 @@ img {
|
||||
|
||||
#nav-tabs button,
|
||||
#top-line.cal-theme #nav-tabs button,
|
||||
#top-line.bucketlist-theme #nav-tabs button {
|
||||
#top-line.bucketlist-theme #nav-tabs button,
|
||||
#top-line.status-theme #nav-tabs button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 12px 24px;
|
||||
@@ -205,6 +219,7 @@ img {
|
||||
}
|
||||
#top-line.cal-theme #nav-tabs button:hover { border-left-color: #FBC4CC; }
|
||||
#top-line.bucketlist-theme #nav-tabs button:hover { border-left-color: #B84457; }
|
||||
#top-line.status-theme #nav-tabs button:hover { border-left-color: #4bbbe8; }
|
||||
|
||||
/* keep the video centered on tall screens */
|
||||
#background-video,
|
||||
@@ -221,3 +236,22 @@ img {
|
||||
h1 { font-size: 2.2rem; }
|
||||
p { font-size: 1.2rem; }
|
||||
}
|
||||
|
||||
/* status tab: VEGA page fills everything under the top line */
|
||||
#status { padding: 0; }
|
||||
#status-frame {
|
||||
position: fixed;
|
||||
top: 115px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 115px);
|
||||
border: 0;
|
||||
background: #05080c;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
#status-frame {
|
||||
top: 56px;
|
||||
height: calc(100% - 56px);
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
/* grid settings */
|
||||
:root {
|
||||
--dash-columns: 6;
|
||||
--dash-gap: 20px;
|
||||
--dash-min-card-height: 200px;
|
||||
--dash-max-width: none;
|
||||
}
|
||||
|
||||
/* tab header */
|
||||
.dash-header {
|
||||
padding: 120px 20px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.dash-header h1 {
|
||||
font-size: 2.8rem;
|
||||
color: #fff;
|
||||
margin: 0 0 6px;
|
||||
text-shadow: 0 0 30px rgba(91, 111, 222, 0.5);
|
||||
}
|
||||
.dash-header .status-dot {
|
||||
display: inline-block;
|
||||
width: 14px; height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
margin-right: 8px;
|
||||
box-shadow: 0 0 12px #22c55e;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 0 8px #22c55e; }
|
||||
50% { box-shadow: 0 0 20px #22c55e, 0 0 40px rgba(34,197,94,0.4); }
|
||||
}
|
||||
.dash-header .offline { background: #ef4444; box-shadow: 0 0 12px #ef4444; animation: none; }
|
||||
.dash-header .pending { background: #64748b; box-shadow: none; animation: none; }
|
||||
|
||||
/* card grid */
|
||||
.dash-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--dash-columns), 1fr);
|
||||
gap: var(--dash-gap);
|
||||
max-width: var(--dash-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 48px 60px;
|
||||
}
|
||||
|
||||
/* glass card */
|
||||
.dash-card {
|
||||
background: rgba(15, 15, 35, 0.55);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(91, 111, 222, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 28px 30px;
|
||||
min-height: var(--dash-min-card-height);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.dash-card:hover {
|
||||
border-color: rgba(91, 111, 222, 0.5);
|
||||
box-shadow: 0 6px 28px rgba(91, 111, 222, 0.12);
|
||||
}
|
||||
|
||||
/* card header */
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.card-label {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* card value */
|
||||
.card-value {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.card-value span {
|
||||
font-size: 1.2rem;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* progress bar */
|
||||
.card-bar-wrap {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.card-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.8s ease;
|
||||
}
|
||||
.card-bar-fill.cpu { background: linear-gradient(90deg, #5b6fde, #818cf8); }
|
||||
.card-bar-fill.ram { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }
|
||||
.card-bar-fill.disk { background: linear-gradient(90deg, #34d399, #6ee7b7); }
|
||||
.card-bar-fill.swap { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
|
||||
|
||||
/* detail text */
|
||||
.card-detail {
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* fastfetch text block */
|
||||
.card-fetch {
|
||||
margin: 12px 0 0;
|
||||
font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 0.78rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* card widths */
|
||||
.dash-card.span2 { grid-column: span 2; } /* 3 per row */
|
||||
.dash-card.span3 { grid-column: span 3; } /* 2 per row */
|
||||
.dash-card.span6 { grid-column: span 6; } /* full width */
|
||||
|
||||
/* mobile */
|
||||
/* 2 columns on tablets, 1 on phones */
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--dash-columns: 2;
|
||||
--dash-gap: 12px;
|
||||
--dash-min-card-height: 130px;
|
||||
}
|
||||
.dash-header { padding: 72px 12px 20px; }
|
||||
.dash-header h1 { font-size: 2rem; }
|
||||
.dash-grid { padding: 0 4px 30px; }
|
||||
.dash-card { padding: 20px; }
|
||||
.dash-card.span2,
|
||||
.dash-card.span3 { grid-column: span 1; }
|
||||
.dash-card.span6 { grid-column: 1 / -1; }
|
||||
.card-value { font-size: 2.2rem; }
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
:root { --dash-columns: 1; }
|
||||
}
|
||||
Reference in new issue
Block a user