-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Hardwaremon.html
131 lines (121 loc) · 4.52 KB
/
Hardwaremon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hardware Information</title>
<link rel="stylesheet" href="styles.css">
<style>
/* Additional CSS for resource usage */
#resource-usage {
margin-top: 20px;
}
/* Modern font styles */
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h1, h2 {
color: #333;
font-weight: 600;
}
p {
margin: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>Hardware Information</h1>
</header>
<main>
<section id="cpu-info">
<h2>CPU Information</h2>
<p id="cpu-details">Loading...</p>
</section>
<section id="gpu-info">
<h2>GPU Information</h2>
<p id="gpu-details">Loading...</p>
</section>
<section id="ram-info">
<h2>RAM Information</h2>
<p id="ram-details">Loading...</p>
</section>
<section id="screen-info">
<h2>Screen Information</h2>
<p id="screen-details">Loading...</p>
</section>
<section id="resource-usage">
<h2>Resource Usage</h2>
<p id="cpu-usage">Loading...</p>
<p id="memory-usage">Loading...</p>
</section>
<!-- Add more sections for other hardware components -->
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
const cpuDetails = document.getElementById("cpu-details");
const gpuDetails = document.getElementById("gpu-details");
const ramDetails = document.getElementById("ram-details");
const screenDetails = document.getElementById("screen-details");
const cpuUsage = document.getElementById("cpu-usage");
const memoryUsage = document.getElementById("memory-usage");
// Display CPU information
cpuDetails.textContent = `CPU: ${navigator.hardwareConcurrency} cores`;
// Display GPU information (if available)
if (navigator.gpu) {
navigator.gpu.requestAdapter().then((adapter) => {
const gpuInfo = adapter.getDevice().properties;
gpuDetails.textContent = `GPU: ${gpuInfo.name}, VRAM: ${gpuInfo.deviceMemory}MB`;
}).catch((error) => {
gpuDetails.textContent = "GPU information not available.";
});
} else {
gpuDetails.textContent = "GPU information not available.";
}
// Display RAM information
if (navigator.deviceMemory) {
ramDetails.textContent = `RAM: ${navigator.deviceMemory}GB`;
} else {
ramDetails.textContent = "RAM information not available.";
}
// Display Screen information
screenDetails.textContent = `Resolution: ${window.screen.width}x${window.screen.height}`;
// Display CPU and Memory usage
if (performance && performance.now) {
const start = performance.now();
// Simulate a CPU-intensive operation
let sum = 0;
for (let i = 0; i < 10000000; i++) {
sum += i;
}
const end = performance.now();
const cpuUsageValue = ((end - start) / 1000).toFixed(4); // Convert to seconds
const memoryUsageValue = (performance.memory.usedJSHeapSize / 1048576).toFixed(2); // Convert to MB
cpuUsage.textContent = `CPU Usage: ${cpuUsageValue} seconds`;
memoryUsage.textContent = `Memory Usage: ${memoryUsageValue} MB`;
} else {
cpuUsage.textContent = "CPU Usage: Information not available.";
memoryUsage.textContent = "Memory Usage: Information not available.";
}
});
</script>
<script src="styles.js"></script>
</body>
</html>