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

new tab polish

Browse Source
This commit is contained in:
esef committed 2026-07-12 18:46:05 +03:00
1 parent 6d5fb5c76d
commit b27cca3ed5
4 files changed
+213 -96
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+2
View File
@@ -5,3 +5,5 @@ __pycache__/
Thumbs.db
*.log
.DS_Store
firebase.txt
manipulate_boxes.md
index.html
+29 -27
View File
@@ -111,53 +111,54 @@
<section id="yuukabot" class="tab-content">
<header class="dash-header">
<h1>Yuuka Bot</h1>
<p>Live dashboard — stats, music, gacha, and more.</p>
<h1><span class="status-dot" id="dash-status-dot"></span>Yuuka Bot</h1>
</header>
<div class="dash-grid">
<!-- Card 1: Now Playing -->
<!-- Uptime -->
<div class="dash-card">
<div class="card-icon">🎵</div>
<div class="card-body">
<h3>Now Playing</h3>
<p class="card-value" id="dash-nowplaying">—</p>
<span class="card-label">across all servers</span>
<div class="card-top">
<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>
<!-- Card 2: Gacha pulls -->
<!-- CPU -->
<div class="dash-card">
<div class="card-icon">🎫</div>
<div class="card-body">
<h3>Total Pulls</h3>
<p class="card-value" id="dash-pulls">—</p>
<span class="card-label">recruitments since launch</span>
<div class="card-top">
<div class="card-icon">⚡</div>
<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>
<!-- Card 3: Radio listeners -->
<!-- RAM -->
<div class="dash-card">
<div class="card-icon">📻</div>
<div class="card-body">
<h3>Radio Listeners</h3>
<p class="card-value" id="dash-radio">—</p>
<span class="card-label">servers tuned in right now</span>
<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>
<!-- Card 4: Uptime -->
<!-- Disk -->
<div class="dash-card">
<div class="card-icon">⏱️</div>
<div class="card-body">
<h3>Uptime</h3>
<p class="card-value" id="dash-uptime">—</p>
<span class="card-label" id="dash-uptime-label">since last restart</span>
<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>
</div>
</div>
<p class="dash-footer">Live data from <code>esef-514bf</code> · updates every 60s</p>
<p class="dash-footer">synced every 10s</p>
</section>
<script src="js/gallery.js" defer></script>
@@ -167,6 +168,7 @@
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore-compat.js"></script>
<script src="js/comments.js"></script>
<script src="js/yuukabot.js"></script>
<!-- Lightbox -->
<div id="lightbox" class="lightbox">
js/yuukabot.js
+75
View File
@@ -0,0 +1,75 @@
// ═══════════════════════════════════════════════════════════
// YUUKA BOT DASHBOARD — live Firestore reader
// ═══════════════════════════════════════════════════════════
const YUUKA_FIREBASE_CONFIG = {
apiKey: "AIzaSyDuSjEGEKx5FnWYnQq8f_owbpYRBRrl5x0",
authDomain: "esef-514bf.firebaseapp.com",
projectId: "esef-514bf",
storageBucket: "esef-514bf.firebasestorage.app",
messagingSenderId: "353969651290",
appId: "1:353969651290:web:41e3aaf8e54c743702a263"
};
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);
}
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
const dot = document.getElementById("dash-status-dot");
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;
// 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;
}
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;
}
setBar("dash-disk-val", "dash-disk-bar", null, d.disk, "%", "disk");
},
(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) {
const valEl = document.getElementById(valId);
const barEl = document.getElementById(barId);
if (valEl && value != null) {
valEl.innerHTML = value + '<span>' + suffix + '</span>';
}
if (barEl) {
barEl.style.width = Math.min(Math.max(value || 0, 0), 100) + "%";
barEl.className = "card-bar-fill " + barClass;
}
}
style/yuukabot.css
+107 -69
View File
@@ -1,119 +1,157 @@
/* ═══════════════════════════════════════════════════════════
YUUKA BOT DASHBOARD
YUUKA BOT DASHBOARD — live system stats
═══════════════════════════════════════════════════════════ */
/* ── Yuuka Bot nav button override ────────────────────────── */
#yuukabot-btn {
background-color: #5b6fde;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
transition: box-shadow 0.3s ease, transform 0.2s;
/* ── 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 */
}
#yuukabot-btn:hover {
box-shadow: 0 0 18px rgba(91, 111, 222, 0.8);
transform: scale(1.03);
}
/* 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; } */
/* ── Dashboard header ─────────────────────────────────────── */
/* ── Tab header ───────────────────────────────────────────── */
.dash-header {
padding: 120px 20px 30px;
text-align: center;
}
.dash-header h1 {
font-size: 3rem;
font-size: 2.8rem;
color: #fff;
margin: 0 0 8px;
text-shadow: 0 0 30px rgba(91, 111, 222, 0.6);
margin: 0 0 6px;
text-shadow: 0 0 30px rgba(91, 111, 222, 0.5);
}
.dash-header p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
.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; }
/* ── Card grid ────────────────────────────────────────────── */
.dash-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
max-width: 1100px;
grid-template-columns: repeat(var(--dash-columns), 1fr);
gap: var(--dash-gap);
max-width: var(--dash-max-width);
margin: 0 auto;
padding: 20px 40px 60px;
padding: 0 40px 60px;
}
/* ── Individual card ──────────────────────────────────────── */
/* ── Glass card ───────────────────────────────────────────── */
.dash-card {
background: rgba(20, 20, 35, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(91, 111, 222, 0.25);
border-radius: 14px;
padding: 28px 24px;
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;
align-items: flex-start;
gap: 18px;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
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.6);
box-shadow: 0 8px 32px rgba(91, 111, 222, 0.15);
transform: translateY(-2px);
border-color: rgba(91, 111, 222, 0.5);
box-shadow: 0 6px 28px rgba(91, 111, 222, 0.12);
}
.card-icon {
font-size: 2.2rem;
flex-shrink: 0;
width: 52px;
height: 52px;
/* ── Card header (icon + label) ───────────────────────────── */
.card-top {
display: flex;
align-items: center;
justify-content: center;
background: rgba(91, 111, 222, 0.15);
border-radius: 12px;
gap: 12px;
}
.card-body h3 {
margin: 0 0 8px;
font-size: 0.85rem;
.card-icon {
font-size: 1.6rem;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(91, 111, 222, 0.12);
border-radius: 10px;
}
.card-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.45);
font-family: Arial, Helvetica, sans-serif;
}
/* ── Card value ───────────────────────────────────────────── */
.card-value {
font-size: 2rem;
font-size: 3rem;
font-weight: bold;
color: #fff;
margin: 0 0 4px;
line-height: 1.2;
margin: 0;
line-height: 1;
}
.card-value span {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.4);
font-weight: 400;
}
.card-label {
/* ── Progress bar (CPU / RAM / Disk) ──────────────────────── */
.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); }
/* ── Detail text (used / total) ───────────────────────────── */
.card-detail {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.3);
font-family: Arial, Helvetica, sans-serif;
margin-top: 6px;
}
/* ── Footer ───────────────────────────────────────────────── */
.dash-footer {
text-align: center;
color: rgba(255, 255, 255, 0.25);
font-size: 0.75rem;
padding-bottom: 40px;
color: rgba(255, 255, 255, 0.2);
font-size: 0.7rem;
padding-bottom: 50px;
font-family: Arial, Helvetica, sans-serif;
}
.dash-footer code {
background: rgba(255, 255, 255, 0.08);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.75rem;
/* ── Yuuka Bot nav button ─────────────────────────────────── */
#yuukabot-btn {
background-color: #5b6fde;
color: #fff;
border: none !important;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
transition: box-shadow 0.3s, transform 0.2s;
}
#yuukabot-btn:hover {
box-shadow: 0 0 20px rgba(91, 111, 222, 0.8);
transform: scale(1.03);
}