<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Monitor Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>System Monitor Tool</h1>
<div class="monitor">
<p><strong>CPU Usage:</strong> <span id="cpuUsage">Loading...</span></p>
<p><strong>Memory Usage:</strong> <span id="memoryUsage">Loading...</span></p>
<p><strong>Battery Status:</strong> <span id="batteryStatus">Loading...</span></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
background: linear-gradient(to right, #ff416c, #ff4b2b);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 10px;
backdrop-filter: blur(10px);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
width: 350px;
}
h1 {
margin-bottom: 15px;
}
.monitor {
text-align: left;
margin-top: 15px;
}
.monitor p {
background: rgba(255, 255, 255, 0.3);
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
async function getSystemInfo() {
// Get Memory Info (Available only in Chrome)
if (navigator.deviceMemory) {
document.getElementById("memoryUsage").innerText = navigator.deviceMemory + " GB";
} else {
document.getElementById("memoryUsage").innerText = "Unavailable";
}
// Get Battery Info
if (navigator.getBattery) {
let battery = await navigator.getBattery();
document.getElementById("batteryStatus").innerText = (battery.level * 100).toFixed(0) + "%";
} else {
document.getElementById("batteryStatus").innerText = "Unavailable";
}
// Fake CPU Usage (Browsers don't provide actual CPU usage)
setInterval(() => {
let randomCpu = Math.floor(Math.random() * 100) + "%";
document.getElementById("cpuUsage").innerText = randomCpu;
}, 2000);
}
// Load system info when page loads
window.onload = getSystemInfo;