esef/website
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new layout test

Browse Source
This commit is contained in:
esef committed 2026-07-12 19:06:58 +03:00
1 parent cbcec71e77
commit 27842eb786
3 files changed
+104 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+40 -30
View File
@@ -115,50 +115,60 @@
</header>
<div class="dash-grid">
<!-- Uptime -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">⏱️</div>
<span class="card-label">System Uptime</span>
</div>
<!-- Row 1: 3 boxes -->
<div class="dash-card span2">
<div class="card-top"><span class="card-label">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 -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">⚡</div>
<span class="card-label">CPU</span>
<!-- Row 2: 3 boxes -->
<div class="dash-card span2">
<div class="card-top"><span class="card-label">Network</span></div>
<p class="card-value" id="dash-net">—</p>
<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>
<!-- RAM -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">💾</div>
<span class="card-label">Memory</span>
</div>
<div class="dash-card span3">
<div class="card-top"><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 -->
<div class="dash-card">
<div class="card-top">
<div class="card-icon">💿</div>
<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>
<!-- Row 4: full width -->
<div class="dash-card span6">
<div class="card-top"><span class="card-label">System Info</span></div>
<pre class="card-fetch" id="dash-fetch">—</pre>
</div>
</div>
<p class="dash-footer">synced every 10s</p>
</section>
<script src="js/gallery.js" defer></script>
js/yuukabot.js
+37 -32
View File
@@ -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) {
style/yuukabot.css
+27 -7
View File
@@ -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 */