new layout test

index.html

@@ -115,50 +115,60 @@
       </header>
 
       <div class="dash-grid">
-        <!-- Uptime -->
+        <!-- Row 1: 3 boxes -->
-        <div class="dash-card">
+        <div class="dash-card span2">
-          <div class="card-top">
+          <div class="card-top"><span class="card-label">Uptime</span></div>
-            <div class="card-icon">⏱️</div>
-            <span class="card-label">System Uptime</span>
-          </div>
           <p class="card-value" id="dash-uptime">—</p>
-          <span class="card-detail">since last boot</span>
+        </div>
+        <div class="dash-card span2">
+          <div class="card-top"><span class="card-label">Disk</span></div>
+          <p class="card-value" id="dash-disk-val">—</p>
+          <div class="card-bar-wrap"><div class="card-bar-fill disk" id="dash-disk-bar" style="width:0%"></div></div>
+          <span class="card-detail" id="dash-disk-detail"></span>
+        </div>
+        <div class="dash-card span2">
+          <div class="card-top"><span class="card-label">Load Average</span></div>
+          <p class="card-value" id="dash-load">—</p>
+          <span class="card-detail">1m / 5m / 15m</span>
         </div>
 
-        <!-- CPU -->
+        <!-- Row 2: 3 boxes -->
-        <div class="dash-card">
+        <div class="dash-card span2">
-          <div class="card-top">
+          <div class="card-top"><span class="card-label">Network</span></div>
-            <div class="card-icon">⚡</div>
+          <p class="card-value" id="dash-net">—</p>
-            <span class="card-label">CPU</span>
+          <span class="card-detail" id="dash-net-detail"></span>
         </div>
+        <div class="dash-card span2">
+          <div class="card-top"><span class="card-label">Processes</span></div>
+          <p class="card-value" id="dash-procs">—</p>
+          <span class="card-detail">running</span>
+        </div>
+        <div class="dash-card span2">
+          <div class="card-top"><span class="card-label">Swap</span></div>
+          <p class="card-value" id="dash-swap-val">—</p>
+          <div class="card-bar-wrap"><div class="card-bar-fill swap" id="dash-swap-bar" style="width:0%"></div></div>
+          <span class="card-detail" id="dash-swap-detail"></span>
+        </div>
+
+        <!-- Row 3: 2 boxes stretched -->
+        <div class="dash-card span3">
+          <div class="card-top"><span class="card-label">CPU</span></div>
           <p class="card-value" id="dash-cpu-val">—</p>
           <div class="card-bar-wrap"><div class="card-bar-fill cpu" id="dash-cpu-bar" style="width:0%"></div></div>
         </div>
-
+        <div class="dash-card span3">
-        <!-- RAM -->
+          <div class="card-top"><span class="card-label">Memory</span></div>
-        <div class="dash-card">
-          <div class="card-top">
-            <div class="card-icon">💾</div>
-            <span class="card-label">Memory</span>
-          </div>
           <p class="card-value" id="dash-ram-val">—</p>
           <div class="card-bar-wrap"><div class="card-bar-fill ram" id="dash-ram-bar" style="width:0%"></div></div>
           <span class="card-detail" id="dash-ram-detail"></span>
         </div>
 
-        <!-- Disk -->
+        <!-- Row 4: full width -->
-        <div class="dash-card">
+        <div class="dash-card span6">
-          <div class="card-top">
+          <div class="card-top"><span class="card-label">System Info</span></div>
-            <div class="card-icon">💿</div>
+          <pre class="card-fetch" id="dash-fetch">—</pre>
-            <span class="card-label">Disk</span>
-          </div>
-          <p class="card-value" id="dash-disk-val">—</p>
-          <div class="card-bar-wrap"><div class="card-bar-fill disk" id="dash-disk-bar" style="width:0%"></div></div>
-          <span class="card-detail" id="dash-disk-detail"></span>
         </div>
       </div>
-
-      <p class="dash-footer">synced every 10s</p>
     </section>
 
     <script src="js/gallery.js" defer></script>

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) {
+            if (dot) dot.className = d.online ? "status-dot" : "status-dot offline";
-                dot.className = d.online ? "status-dot" : "status-dot offline";
-            }
 
             // Uptime
-            const uptimeEl = document.getElementById("dash-uptime");
+            setText("dash-uptime", d.uptime);
-            if (uptimeEl && d.uptime) uptimeEl.textContent = d.uptime;
 
-            // CPU
+            // CPU, RAM, Disk, Swap — bars
-            setBar("dash-cpu-val", "dash-cpu-bar", "dash-cpu-detail", d.cpu, "%", "cpu");
+            setBar("dash-cpu-val", "dash-cpu-bar", null, d.cpu, "%", "cpu");
-
-            // RAM
-            const ramEl = document.getElementById("dash-ram-detail");
-            if (ramEl && d.ramUsed && d.ramTotal) {
-                ramEl.textContent = d.ramUsed + " / " + d.ramTotal;
-            }
             setBar("dash-ram-val", "dash-ram-bar", null, d.ram, "%", "ram");
-
+            setText("dash-ram-detail", d.ramUsed ? d.ramUsed + " / " + d.ramTotal : "");
-            // Disk
-            const diskEl = document.getElementById("dash-disk-detail");
-            if (diskEl && d.diskUsed && d.diskTotal) {
-                diskEl.textContent = d.diskUsed + " / " + d.diskTotal;
-            }
             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) {

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-columns: 6;            /* number of columns (2 = 2×2, 3 = 3-wide, etc.) */
-    --dash-gap: 24px;             /* space between boxes */
+    --dash-gap: 20px;             /* space between boxes */
-    --dash-min-card-height: 220px;/* minimum height of each box */
+    --dash-min-card-height: 200px;/* minimum height of each box */
-    --dash-max-width: 1100px;     /* max width of the whole grid */
+    --dash-max-width: none;     /* max width of the whole grid */
-    --dash-padding: 120px 40px 60px; /* top right/left bottom */
+    --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 */