| Server IP : 3.111.61.48 / Your IP : 216.73.216.67 Web Server : Apache System : Linux ip-10-0-5-176 6.8.0-1057-aws #60~22.04.1-Ubuntu SMP Wed May 27 08:16:59 UTC 2026 x86_64 User : ubuntu ( 1000) PHP Version : 8.2.31 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/vhost/itmtrsrv.arukustech.com/public/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Monitor Dashboard</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2563eb; /* Bright blue from IT Inventory */
--bg: #f1f5f9;
--sidebar: #0f172a; /* Darker navy for sidebar */
--header-bg: #1e293b;
--card: #ffffff;
--online: #10b981;
--offline: #ef4444;
--text-main: #1e293b;
--text-muted: #94a3b8;
--border: #e2e8f0;
--warning: #f59e0b;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: var(--bg);
color: var(--text-main);
margin: 0;
padding: 0;
display: flex;
min-height: 100vh;
overflow-x: hidden;
}
/* --- FIXED HEADER --- */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: var(--header-bg);
color: white;
padding: 0 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header h2 { margin: 0; font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.refresh-tag {
font-size: 0.85rem;
background: rgba(255,255,255,0.1);
padding: 6px 16px;
border-radius: 20px;
color: #cbd5e1;
display: flex;
align-items: center;
gap: 8px;
}
/* --- CATEGORIZED SIDEBAR --- */
.sidebar {
width: 260px;
height: 100vh;
background: linear-gradient(180deg,#111827,#1f2937);
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
top: 0;
left: 0;
overflow-y: auto;
z-index: 1000;
padding-top: 0;
transition: transform 0.3s ease;
box-shadow: 3px 5px 4px rgba(0,0,0,.2);
}
.nav-category {
padding: 24px 24px 8px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 700;
}
.nav-menu { flex-grow: 1; }
.nav-item {
padding: 12px 20px;
margin: 4px 16px;
display: flex;
align-items: center;
gap: 12px;
color: #94a3b8;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s;
font-weight: 500;
font-size: 0.95rem;
}
.nav-item i { width: 20px; text-align: center; font-size: 1.1rem; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
/* Bright blue active state from Inventory system */
.nav-item.active {
background: var(--primary);
color: white;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
/* --- MAIN WRAPPER & CONTENT --- */
.main-wrapper {
margin-left: 260px;
margin-top: 60px; /* Offset for Fixed Header */
flex-grow: 1;
display: flex;
flex-direction: column;
width: calc(100% - 260px);
padding-bottom: 60px; /* Room for Fixed Footer */
}
.container {
padding: 30px 40px;
max-width: 100%;
margin: 0;
width: 100%;
box-sizing: border-box;
}
/* --- FIXED FOOTER --- */
footer {
position: fixed;
bottom: 0;
left: 260px; /* for sidebar width */
right: 0;
height: 45px;
background: white;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: flex-end; /* ?? key change */
padding: 0 40px;
font-size: 0.8rem;
color: #64748b;
z-index: 1050;
}
/* --- STAT CARDS & TABLE (Existing Styles Maintained) --- */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid var(--border);
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.stat-data h4 { margin: 0; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-data p { margin: 2px 0 0; font-size: 1.5rem; font-weight: 700; color: var(--text-main); }
.table-container {
background: var(--card);
border-radius: 16px;
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
border: 1px solid var(--border);
overflow-x: auto;
width: 100%;
}
table { width: 100%; border-collapse: collapse; text-align: left; }
thead { background: #f1f5f9; }
th {
padding: 20px 24px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
td { padding: 20px 24px; border-bottom: 1px solid var(--border); font-size: 1rem; vertical-align: middle; }
tr:hover { background-color: #f8fafc; }
.server-name { font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 15px; font-size: 1rem; }
.server-name i { background: #eef2ff; color: #6366f1; padding: 10px; border-radius: 10px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.status-badge { font-size: 0.8rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.online-badge { background: #ecfdf5; color: var(--online); }
.offline-badge { background: #fef2f2; color: var(--offline); }
.dot { height: 8px; width: 8px; border-radius: 50%; }
.online-dot { background: var(--online); box-shadow: 0 0 10px var(--online); animation: pulse 2s infinite; }
.offline-dot { background: var(--offline); }
.metric-cell { min-width: 200px; }
.metric-info { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 6px; font-weight: 500; }
.bar-bg { height: 8px; background: #e2e8f0; border-radius: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 10px; transition: width 0.8s ease-in-out; }
.time-text { color: var(--text-main); font-size: 0.9rem; white-space: nowrap; font-weight: 500; }
.ist-label { font-size: 0.7rem; color: var(--text-muted); margin-left: 4px; }
.load-badge { font-size: 0.65rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; color: #fff; margin-left: 6px; }
.badge-cpu { background: #7c3aed; }
.badge-ram { background: #f59e0b; }
.badge-disk { background: #16a34a; }
.alert-row { background: #fff7ed; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
@media (max-width: 1024px) {
.sidebar { width: 70px; }
.sidebar span, .nav-category, footer { display: none; }
.nav-item { margin: 4px 10px; padding: 12px; justify-content: center; }
.nav-item i { margin: 0; }
.main-wrapper { margin-left: 70px; width: calc(100% - 70px); }
}
/* =========================
MOBILE RESPONSIVE FIX
========================= */
@media (max-width: 768px) {
/* Header */
header {
padding: 0 12px;
height: 60px;
}
header h2 {
font-size: 1rem;
gap: 8px;
}
.menu-toggle {
display: block;
cursor: pointer;
font-size: 1.2rem;
}
/* Live Monitoring Badge */
.refresh-tag {
display: flex !important;
align-items: center;
gap: 6px !important;
padding: 8px 12px !important;
border-radius: 999px !important;
font-size: 12px !important;
white-space: nowrap;
}
.refresh-tag span {
font-size: 12px !important;
}
/* Sidebar */
.sidebar {
width: 250px !important;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1200;
top: 0;
left: 0;
}
.sidebar.active {
transform: translateX(0);
}
/* Navigation */
.nav-item {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 18px;
margin: 6px 12px;
height: auto;
}
.nav-item i {
font-size: 1rem;
width: 20px;
margin-right: 10px;
}
.nav-item span {
display: inline !important;
}
.nav-category {
display: block !important;
}
/* Main Wrapper */
.main-wrapper {
margin-left: 0 !important;
width: 100% !important;
margin-top: 60px;
}
.container {
padding: 15px;
}
/* Stats Cards */
.stats-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.stat-card {
padding: 18px;
}
/* Table */
.table-container {
overflow-x: auto;
}
table {
min-width: 850px;
}
th,
td {
padding: 12px;
font-size: 0.85rem;
}
.metric-cell {
min-width: 150px;
}
.server-name {
font-size: 0.9rem;
}
/* Footer */
footer {
left: 0 !important;
justify-content: center;
padding: 0 10px;
font-size: 0.75rem;
}
/* Mobile Swipe Hint */
.mobile-hint {
display: block;
}
}
</style>
</head>
<body>
<header>
<h2>
<i class="fas fa-bars menu-toggle" onclick="toggleSidebar()"></i>
<i class="fas fa-microchip"></i> Infra Overview
</h2>
<div class="refresh-tag" style="
display:flex;
align-items:center;
gap:10px;
background:linear-gradient(135deg,#ecfdf5,#d1fae5);
padding:10px 18px;
border-radius:999px;
border:1px solid #bbf7d0;
box-shadow:0 4px 12px rgba(16,185,129,0.15);
">
<i class="fas fa-circle-notch fa-spin" style="
color:#10b981;
font-size:14px;
"></i>
<span style="
font-size:14px;
font-weight:600;
color:#047857;
letter-spacing:0.2px;
">
Live Monitoring Active
</span>
</div></header>
<!-- <header>
<h2><i class="fas fa-microchip"></i> Infra Overview </h2>
<div class="refresh-tag">
<i class="fas fa-circle-notch fa-spin"></i> Live monitoring active
</div>
</header> -->
<nav class="sidebar">
<!-- Top Section -->
<div>
<!-- Logo / Brand -->
<div style="padding:28px 24px;border-bottom:1px solid rgba(255,255,255,0.08);">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#ffffff;letter-spacing:0.5px;">
<i class="fas fa-network-wired" style="color:#60a5fa;"></i>
InfraPanel
</h2>
<p style="margin:8px 0 0;color:#9ca3af;font-size:13px;">
Infrastructure Monitoring
</p>
</div>
<!-- Navigation -->
<div style="padding:20px 14px;">
<!-- Main -->
<div style="margin-bottom:10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Main
</div>
<a href="index.html"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:8px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,0.35);">
<i class="fas fa-th-large" style="font-size:18px;"></i>
<span>Dashboard</span>
</a>
<!-- Operations -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Operations
</div>
<a href="admin.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-server" style="font-size:17px;color:#60a5fa;"></i>
<span>Manage Servers</span>
</a>
<a href="user.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;transition:0.3s;background:rgba(255,255,255,0.03);">
<i class="fas fa-users-cog" style="font-size:17px;color:#34d399;"></i>
<span>User Management</span>
</a>
<!-- Reports -->
<div style="margin:22px 0 10px;padding:0 12px;color:#6b7280;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;">
Reports
</div>
<a href="alerts.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-history" style="font-size:17px;color:#fbbf24;"></i>
<span>Alert History</span>
</a>
<a href="reports.html"
class="admin-only"
style="display:flex;align-items:center;gap:14px;padding:13px 16px;margin-bottom:8px;border-radius:14px;color:#d1d5db;text-decoration:none;font-weight:500;background:rgba(255,255,255,0.03);">
<i class="fas fa-chart-line" style="font-size:17px;color:#c084fc;"></i>
<span>Reports</span>
</a>
</div>
</div>
<!-- Bottom Logout -->
<div style="padding:18px;border-top:1px solid rgba(255,255,255,0.08);">
<a href="#"
onclick="logout()"
style="display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(239,68,68,0.12);color:#f87171;text-decoration:none;font-weight:600;">
<i class="fas fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</nav>
<div class="main-wrapper">
<div class="container">
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;">
<!-- Total Nodes -->
<div style="position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:24px;border-radius:20px;background:rgba(255,255,255,0.95);box-shadow:0 10px 25px rgba(0,0,0,0.08);transition:0.3s;border:1px solid #eee;height: 50px;">
<div style="position:absolute;width:100px;height:100px;background:#4f46e5;border-radius:50%;opacity:0.08;right:-40px;top:-40px;"></div>
<div style="width:50px;height:50px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);flex-shrink:0;">
<i class="fas fa-server"></i>
</div>
<div style="position:relative;z-index:2;">
<h4 style="margin:0;font-size:15px;font-weight:600;color:#6b7280;letter-spacing:0.4px;">
Total Nodes
</h4>
<p id="totalServers" style="margin:8px 0 0;font-size:34px;font-weight:700;color:#111827;">
0
</p>
</div>
</div>
<!-- Online -->
<div style="position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:24px;border-radius:20px;background:rgba(255,255,255,0.95);box-shadow:0 10px 25px rgba(0,0,0,0.08);transition:0.3s;border:1px solid #eee;height: 50px;">
<div style="position:absolute;width:100px;height:100px;background:#10b981;border-radius:50%;opacity:0.08;right:-40px;top:-40px;"></div>
<div style="width:50px;height:50px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;background:linear-gradient(135deg,#34d399,#10b981);flex-shrink:0;">
<i class="fas fa-check-circle"></i>
</div>
<div style="position:relative;z-index:2;">
<h4 style="margin:0;font-size:15px;font-weight:600;color:#6b7280;letter-spacing:0.4px;">
Online
</h4>
<p id="onlineServers" style="margin:8px 0 0;font-size:34px;font-weight:700;color:#111827;">
0
</p>
</div>
</div>
<!-- Active Alerts -->
<div style="position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:24px;border-radius:20px;background:rgba(255,255,255,0.95);box-shadow:0 10px 25px rgba(0,0,0,0.08);transition:0.3s;border:1px solid #eee;height: 50px;">
<div style="position:absolute;width:100px;height:100px;background:#f43f5e;border-radius:50%;opacity:0.08;right:-40px;top:-40px;"></div>
<div style="width:50px;height:50px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;background:linear-gradient(135deg,#fb7185,#f43f5e);flex-shrink:0;">
<i class="fas fa-exclamation-triangle"></i>
</div>
<div style="position:relative;z-index:2;">
<h4 style="margin:0;font-size:15px;font-weight:600;color:#6b7280;letter-spacing:0.4px;">
Active Alerts
</h4>
<p id="alertServers" style="margin:8px 0 0;font-size:34px;font-weight:700;color:#111827;">
0
</p>
</div>
</div>
</div>
<div class="table-container" style="background:#ffffff;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,0.08);margin-top:20px;overflow:hidden;border:1px solid #f1f5f9;">
<!-- Header -->
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 24px;">
<div>
<h2 style="margin:0;font-size:24px;font-weight:700;color:#111827;">
Infrastructure Monitoring
</h2>
<p style="margin:5px 0 0;color:#6b7280;font-size:14px;">
Live server health and resource utilization
</p>
</div>
<div style="display:flex;align-items:center;gap:8px;background:#ecfdf5;color:#10b981;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;">
<span style="width:10px;height:10px;background:#10b981;border-radius:50%;display:inline-block;"></span>
Live Monitoring
</div>
</div>
<!-- Table -->
<div style="overflow-x:auto;border-radius:16px;padding:10px 24px;">
<table style="width:100%;border-collapse:collapse;min-width:950px;font-family:Arial,sans-serif;">
<thead>
<tr style="background:#f8fafc;">
<th style="padding:18px;text-align:left;font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">
Server Instance
</th>
<th style="padding:18px;text-align:left;font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">
Status
</th>
<th style="padding:18px;text-align:center;font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">
CPU Usage
</th>
<th style="padding:18px;text-align:center;font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">
Memory (RAM)
</th>
<th style="padding:18px;text-align:center;font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">
Disk Usage
</th>
<th style="padding:18px;text-align:left;font-size:13px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;">
Last Heartbeat (IST)
</th>
</tr>
</thead>
<tbody id="serverTableBody" style="background:#ffffff;">
</tbody>
</table>
</div>
<!-- Footer -->
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:5px 0;padding:10px 24px;">
<div style="color:#94a3b8;font-size:13px;">
<i class="fas fa-sync-alt"></i> Auto-refresh enabled
</div>
<div style="color:#94a3b8;font-size:13px;">
<i class="fas fa-arrows-alt-h"></i> Swipe horizontally to view metrics
</div>
</div>
</div>
<footer class="site-footer">
<div>© 2026 | Designed by <strong>Company Pvt. Ltd.</strong></div>
</footer>
<script>
// --- AUTHENTICATION & LOGOUT ---
const token = localStorage.getItem("token");
if (!token) {
window.location.href = "login.html";
}
function logout() {
localStorage.removeItem("token");
window.location.href = "login.html";
}
// --- ROLE-BASED UI PROTECTION ---
document.addEventListener("DOMContentLoaded", () => {
try {
const payload = JSON.parse(atob(token.split('.')[1]));
const userRole = payload.role;
if (userRole !== "Admin") {
const adminLinks = document.querySelectorAll(".admin-only");
adminLinks.forEach(link => link.style.setProperty('display', 'none', 'important'));
}
} catch (e) {
console.error("Token error", e);
logout();
}
});
// --- DASHBOARD LOGIC ---
function convertToIST(utcString) {
if (!utcString) return "N/A";
const date = new Date(utcString + "Z");
const istOffset = 5.5 * 60 * 60 * 1000;
const istDate = new Date(date.getTime() + istOffset);
const pad = (n) => String(n).padStart(2, '0');
return `${istDate.getUTCFullYear()}-${pad(istDate.getUTCMonth()+1)}-${pad(istDate.getUTCDate())} ${pad(istDate.getUTCHours())}:${pad(istDate.getUTCMinutes())}:${pad(istDate.getUTCSeconds())}`;
}
async function loadServers() {
try {
const response = await fetch('/api/v1/servers', {
headers: { 'Authorization': `Bearer ${token}` }
});
if (response.status === 401) logout();
let data = await response.json();
const tableBody = document.getElementById("serverTableBody");
tableBody.innerHTML = "";
let onlineCount = 0;
let alertCount = 0;
data.forEach(s => {
const now = new Date();
const lastSeen = new Date(s.last_seen + "Z");
s.isOnline = (now - lastSeen) / 1000 < 120;
if(s.isOnline) onlineCount++;
s.alerts = [];
if (s.cpu_usage >= 80) s.alerts.push("CPU");
if (s.ram_percent >= 80) s.alerts.push("RAM");
if (s.disk_used_percent >= 90) s.alerts.push("DISK");
s.hasAlert = s.alerts.length > 0;
if(s.hasAlert) alertCount++;
});
data.sort((a,b) => b.hasAlert - a.hasAlert);
data.forEach(server => {
const badgeClass = server.isOnline ? 'online-badge' : 'offline-badge';
const dotClass = server.isOnline ? 'online-dot' : 'offline-dot';
const statusText = server.isOnline ? 'Online' : 'Offline';
const istTime = convertToIST(server.last_seen);
let badges = "";
if (server.alerts.includes("CPU")) badges += `<span class="load-badge badge-cpu">CPU</span>`;
if (server.alerts.includes("RAM")) badges += `<span class="load-badge badge-ram">RAM</span>`;
if (server.alerts.includes("DISK")) badges += `<span class="load-badge badge-disk">DISK</span>`;
tableBody.innerHTML += `
<tr class="${server.hasAlert ? 'alert-row' : ''}">
<td>
<div class="server-name">
<i class="fas fa-layer-group"></i>
${server.server_name}
${badges}
</div>
</td>
<td>
<div class="status-badge ${badgeClass}">
<div class="dot ${dotClass}"></div> ${statusText}
</div>
</td>
<td class="metric-cell">
<div class="metric-info"><span>CPU</span><span>${server.cpu_usage ?? 0}%</span></div>
<div class="bar-bg">
<div class="bar-fill" style="width:${server.cpu_usage ?? 0}%; background: ${server.cpu_usage > 80 ? 'var(--offline)' : 'var(--primary)'}"></div>
</div>
</td>
<td class="metric-cell">
<div class="metric-info"><span>RAM</span><span>${server.ram_percent ?? 0}%</span></div>
<div class="bar-bg">
<div class="bar-fill" style="width:${server.ram_percent ?? 0}%; background: ${server.ram_percent > 80 ? 'var(--warning)' : '#8b5cf6'}"></div>
</div>
</td>
<td class="metric-cell">
<div class="metric-info"><span>Disk</span><span>${server.disk_used_percent ?? 0}%</span></div>
<div class="bar-bg">
<div class="bar-fill" style="width:${server.disk_used_percent ?? 0}%; background: var(--online)"></div>
</div>
</td>
<td>
<span class="time-text"><i class="far fa-clock"></i> ${istTime} <span class="ist-label">IST</span></span>
</td>
</tr>`;
});
document.getElementById("totalServers").innerText = data.length;
document.getElementById("onlineServers").innerText = onlineCount;
document.getElementById("alertServers").innerText = alertCount;
} catch (e) { console.error("Update failed", e); }
}
// --- INITIAL LOAD ---
loadServers();
setInterval(loadServers, 10000);
// --- SECURITY: DISABLE INSPECT ---
document.addEventListener('contextmenu', event => event.preventDefault());
document.onkeydown = function(e) {
if (e.keyCode == 123 ||
(e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0) || e.keyCode == 'J'.charCodeAt(0))) ||
(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0))) {
return false;
}
};
/*Add new script by Sandeep*/
function toggleSidebar() {
document.querySelector(".sidebar").classList.toggle("active");
}
</script>
</body>
</html>