-
Notifications
You must be signed in to change notification settings - Fork 0
/
interface.html
103 lines (87 loc) · 3.04 KB
/
interface.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
<!-- Initial webpage to be sent when the server receives the first HTTP request -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<meta charset="utf-8">
<title> Server CPU Monitor </title>
<style>
/* Set offset from the browser boundary */
body {
/* margin-left: 100px; */
max-width: 500px;
margin: auto;
/* margin-left: auto; */
/* margin-top: 50px; */
}
button { /* Botton visual configurations */
font-size: 100%;
width: 150px;
height: 40px;
}
input { /* Input box visual configurations */
font-size: 14px;
height: 40px;
text-align: center;
}
input[type=number]{
-moz-appearance: textfield; /* Remove the toggle from the input box */
}
input.Statistics {
color: black;
}
.off {
background-color: #f2f2f2; /* Set the off-mode background color here */
}
.on {
background-color: #ccffcc; /* Set the on-mode background color here */
}
</style>
</head>
<body>
<h1 id='title'> CPU Usage Monitor </h1>
<!-- Section 1: Numeric display -->
<div class="Statistics">
<h2> Statistics </h2>
<table>
<tr>
<td> CPU usage max: </td>
<td> <input id='usage_max' class="Statistics" type="number" name="test_name" value="" min='0', max='100' disabled> % </td>
</tr>
<tr>
<td> CPU usage average: </td>
<td> <input id='usage_avg' class="Statistics" type="number" name="" value="" min='0', max='100' step='0.01' disabled> % </td>
</tr>
<tr>
<td> CPU usage latest: </td>
<td> <input id='usage_latest' class="Statistics" type="number" name="" value="" min='0', max='100' disabled> % </td>
</tr>
</table>
</div>
<!-- Section 2: Chart -->
<h2> Chart </h2>
<div class="Chart">
<svg height="400" width="400"> <!-- Initialize the svg section with a random size -->
<rect />
</svg>
</div>
<!-- Section 3: User Settings -->
<h2> Settings </h2>
<div class="Settings">
<!-- Auto-update section -->
<input id='auto_update_status' class='off' type="text" name="Auto-update status" value="Off" disabled>
<button id='auto_update_button' type="button" name="Auto-update">Auto-update</button>
<br><br>
<!-- Threshold alarm section -->
<input id='threshold_input' type="number" min='0' name="Threshold" value="">
<button id='threshold_button' type="button" name="Set threshold alarm">Set threshold alarm</button>
<br><br>
<!-- Update frequency section -->
<input id='frequency_input' type="number" min='1' name="" value="">
<button id='frequency_button' type="button" name="Send frequency">Send frequency</button>
</div>
<!-- Section 4: JavaScript File -->
<!-- <script type="text/javascript" src='webpage.js'></script> -->
<!-- </body> -->
<!-- </html> -->