System Monitor Tool
/* General styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #2e2e2e;
color: white;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
font-size: 2.5rem;
color: #ffd700;
}
/* Content styling */
.content {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.stat-card {
background-color: #444;
padding: 20px;
border-radius: 10px;
width: 300px;
text-align: center;
}
.stat-card h2 {
margin-bottom: 15px;
color: #ffd700;
}
canvas {
max-width: 100%;
height: 200px;
margin-bottom: 10px;
}
p {
font-size: 1rem;
}
/* Footer styling */
footer {
text-align: center;
margin-top: 40px;
color: #ccc;
}
document.addEventListener("DOMContentLoaded", () => {
// Mock system stats data
const cpuUsage = Math.random() * 100;
const memoryUsage = Math.random() * 100;
const diskUsage = Math.random() * 100;
// CPU chart setup
const cpuCtx = document.getElementById("cpuChart").getContext("2d");
const cpuChart = new Chart(cpuCtx, {
type: "doughnut",
data: {
labels: ["Used", "Free"],
datasets: [{
data: [cpuUsage, 100 - cpuUsage],
backgroundColor: ["#ff6347", "#32cd32"],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: (context) => {
return `${context.label}: ${context.raw.toFixed(1)}%`;
}
}
}
}
}
});
// Memory chart setup
const memoryCtx = document.getElementById("memoryChart").getContext("2d");
const memoryChart = new Chart(memoryCtx, {
type: "doughnut",
data: {
labels: ["Used", "Free"],
datasets: [{
data: [memoryUsage, 100 - memoryUsage],
backgroundColor: ["#ff6347", "#32cd32"],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: (context) => {
return `${context.label}: ${context.raw.toFixed(1)}%`;
}
}
}
}
}
});
// Disk chart setup
const diskCtx = document.getElementById("diskChart").getContext("2d");
const diskChart = new Chart(diskCtx, {
type: "doughnut",
data: {
labels: ["Used", "Free"],
datasets: [{
data: [diskUsage, 100 - diskUsage],
backgroundColor: ["#ff6347", "#32cd32"],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: (context) => {
return `${context.label}: ${context.raw.toFixed(1)}%`;
}
}
}
}
}
});
// Update stats with real-time mock values
document.getElementById("cpuInfo").textContent = `CPU Usage: ${cpuUsage.toFixed(1)}%`;
document.getElementById("memoryInfo").textContent = `Memory Usage: ${memoryUsage.toFixed(1)}%`;
document.getElementById("diskInfo").textContent = `Disk Usage: ${diskUsage.toFixed(1)}%`;
});
