-
+
-
-
-
-
diff --git a/js/yuukabot.js b/js/yuukabot.js
index 1e09211..675731d 100644
--- a/js/yuukabot.js
+++ b/js/yuukabot.js
@@ -1,7 +1,4 @@
-// ═══════════════════════════════════════════════════════════
-// YUUKA BOT DASHBOARD — live Firestore reader
-// ═══════════════════════════════════════════════════════════
-
+// Yuuka Bot Dashboard — live Firestore reader
const YUUKA_FIREBASE_CONFIG = {
apiKey: "AIzaSyDuSjEGEKx5FnWYnQq8f_owbpYRBRrl5x0",
authDomain: "esef-514bf.firebaseapp.com",
@@ -15,54 +12,62 @@ document.addEventListener("DOMContentLoaded", () => {
const dash = document.getElementById("yuukabot");
if (!dash) return;
- // Init Firebase (skip if already done by comments.js)
- if (!firebase.apps.length) {
- firebase.initializeApp(YUUKA_FIREBASE_CONFIG);
- }
+ if (!firebase.apps.length) firebase.initializeApp(YUUKA_FIREBASE_CONFIG);
const db = firebase.firestore();
- // Live listener: updates the dashboard whenever Firestore changes
db.collection("sysinfo").doc("server").onSnapshot(
(doc) => {
if (!doc.exists) return;
const d = doc.data();
- // Online status
+ // Online dot
const dot = document.getElementById("dash-status-dot");
- if (dot) {
- dot.className = d.online ? "status-dot" : "status-dot offline";
- }
+ if (dot) dot.className = d.online ? "status-dot" : "status-dot offline";
// Uptime
- const uptimeEl = document.getElementById("dash-uptime");
- if (uptimeEl && d.uptime) uptimeEl.textContent = d.uptime;
+ setText("dash-uptime", d.uptime);
- // CPU
- setBar("dash-cpu-val", "dash-cpu-bar", "dash-cpu-detail", d.cpu, "%", "cpu");
-
- // RAM
- const ramEl = document.getElementById("dash-ram-detail");
- if (ramEl && d.ramUsed && d.ramTotal) {
- ramEl.textContent = d.ramUsed + " / " + d.ramTotal;
- }
+ // CPU, RAM, Disk, Swap — bars
+ setBar("dash-cpu-val", "dash-cpu-bar", null, d.cpu, "%", "cpu");
setBar("dash-ram-val", "dash-ram-bar", null, d.ram, "%", "ram");
-
- // Disk
- const diskEl = document.getElementById("dash-disk-detail");
- if (diskEl && d.diskUsed && d.diskTotal) {
- diskEl.textContent = d.diskUsed + " / " + d.diskTotal;
- }
+ setText("dash-ram-detail", d.ramUsed ? d.ramUsed + " / " + d.ramTotal : "");
setBar("dash-disk-val", "dash-disk-bar", null, d.disk, "%", "disk");
+ setText("dash-disk-detail", d.diskUsed ? d.diskUsed + " / " + d.diskTotal : "");
+ setBar("dash-swap-val", "dash-swap-bar", null, d.swap, "%", "swap");
+ setText("dash-swap-detail", d.swapUsed ? d.swapUsed + " / " + d.swapTotal : "");
+
+ // Load average
+ if (d.load1 != null) {
+ setText("dash-load", d.load1 + " / " + d.load5 + " / " + d.load15);
+ }
+
+ // Network
+ if (d.netSent) {
+ setText("dash-net", "sent " + d.netSent);
+ setText("dash-net-detail", "recv " + (d.netRecv || "—"));
+ }
+
+ // Processes
+ // Fastfetch
+ setText("dash-fetch", d.fetch);
+
+ if (d.processes != null) {
+ setText("dash-procs", d.processes.toLocaleString());
+ }
},
- (err) => {
- // Firestore unreachable — show offline
+ () => {
const dot = document.getElementById("dash-status-dot");
if (dot) dot.className = "status-dot offline";
}
);
});
-function setBar(valId, barId, detailId, value, suffix, barClass) {
+function setText(id, value) {
+ const el = document.getElementById(id);
+ if (el && value != null) el.textContent = value;
+}
+
+function setBar(valId, barId, _detailId, value, suffix, barClass) {
const valEl = document.getElementById(valId);
const barEl = document.getElementById(barId);
if (valEl && value != null) {
diff --git a/style/yuukabot.css b/style/yuukabot.css
index 1c5584d..20c6978 100644
--- a/style/yuukabot.css
+++ b/style/yuukabot.css
@@ -4,16 +4,16 @@
/* ── LAYOUT: edit these to change the grid ────────────────── */
:root {
- --dash-columns: 2; /* number of columns (2 = 2×2, 3 = 3-wide, etc.) */
- --dash-gap: 24px; /* space between boxes */
- --dash-min-card-height: 220px;/* minimum height of each box */
- --dash-max-width: 1100px; /* max width of the whole grid */
- --dash-padding: 120px 40px 60px; /* top right/left bottom */
+ --dash-columns: 6; /* number of columns (2 = 2×2, 3 = 3-wide, etc.) */
+ --dash-gap: 20px; /* space between boxes */
+ --dash-min-card-height: 200px;/* minimum height of each box */
+ --dash-max-width: none; /* max width of the whole grid */
+ --dash-padding: 120px 48px 60px; /* top right/left bottom */
}
/* To make boxes take different amounts of space, add a class
to the HTML like "wide" or "tall" and define it here:
- .dash-card.wide { grid-column: span 2; }
+
.dash-card.tall { grid-row: span 2; } */
/* ── Tab header ───────────────────────────────────────────── */
@@ -49,7 +49,7 @@
gap: var(--dash-gap);
max-width: var(--dash-max-width);
margin: 0 auto;
- padding: 0 40px 60px;
+ padding: 0 48px 60px;
}
/* ── Glass card ───────────────────────────────────────────── */
@@ -123,6 +123,7 @@
.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 (used / total) ───────────────────────────── */
.card-detail {
@@ -140,3 +141,22 @@
padding-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
}
+
+/* ── Wide card (span 2 columns) ────────────────────────────── */
+
+
+/* ── 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;
+}
+
+/* ── Span helpers (6-col grid) ──────────────────────────────── */
+.dash-card.span2 { grid-column: span 2; } /* 3 per row */
+.dash-card.span3 { grid-column: span 3; } /* 2 per row — stretched */
+.dash-card.span6 { grid-column: span 6; } /* full width */
\ No newline at end of file