Implemented View Button
* Updated Style + Added 2 icons for the view button + New `drive.html` page ( WIP ) * Updated `index.html` to apply updates
This commit is contained in:
parent
de08a7f970
commit
f17d8b44a3
|
|
@ -11,14 +11,17 @@
|
|||
--fg1: #434c56;
|
||||
|
||||
--acc1: #2aa3f4;
|
||||
--acc1H: #0089e5;
|
||||
--acc1BG0: #2aa3f450;
|
||||
--acc1BG1: #2aa3f430;
|
||||
|
||||
--acc2: #2af488;
|
||||
--acc2H: #2af488;
|
||||
--acc2BG0: #2af48850;
|
||||
--acc2BG1: #2af48830;
|
||||
|
||||
--acc3: #f4e02a;
|
||||
--acc3H: #f4e02a;
|
||||
--acc3BG0: #f4e02a50;
|
||||
--acc3BG1: #f4e02a30;
|
||||
}
|
||||
|
|
@ -28,6 +31,17 @@
|
|||
font-family: "Noto Sans Mono", "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -155,6 +169,32 @@ input {
|
|||
background-color: var(--bg3);
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
color: var(--acc1);
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
color: var(--acc1H);
|
||||
}
|
||||
|
||||
.info-button {
|
||||
display: flex;
|
||||
|
||||
mask-image: url("/static/view-svgrepo-com.svg");
|
||||
background: var(--fg0);
|
||||
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.info-button:hover {
|
||||
mask-image: url("/static/view-alt-svgrepo-com.svg");
|
||||
background-color: var(--acc1);
|
||||
}
|
||||
|
||||
.input-grp {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 4H17.2C18.9913 4 19.887 4 20.4435 4.5565C21 5.11299 21 6.00866 21 7.8V8M17 20H17.2C18.9913 20 19.887 20 20.4435 19.4435C21 18.887 21 17.9913 21 16.2V16M7 4H6.8C5.00866 4 4.11299 4 3.5565 4.5565C3 5.11299 3 6.00866 3 7.8V8M7 20H6.8C5.00866 20 4.11299 20 3.5565 19.4435C3 18.887 3 17.9913 3 16.2V16" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8149 12C18.8149 11.4637 18.6892 11.2462 18.4379 10.8112C17.5834 9.33247 15.6561 7 12 7C8.34395 7 6.41664 9.33247 5.56212 10.8112C5.31077 11.2462 5.18509 11.4637 5.18509 12C5.18509 12.5363 5.31077 12.7538 5.56212 13.1888C6.41664 14.6675 8.34395 17 12 17C15.6561 17 17.5834 14.6675 18.4379 13.1888C18.6892 12.7538 18.8149 12.5363 18.8149 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3432 9 9.00001 10.3431 9.00001 12C9.00001 13.6569 10.3432 15 12 15Z" fill="#33363F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7703 12C20.7703 11.6412 20.5762 11.4056 20.188 10.9343C18.768 9.21014 15.6357 6 12 6C8.36428 6 5.23207 9.21014 3.81198 10.9343C3.42382 11.4056 3.22974 11.6412 3.22974 12C3.22974 12.3588 3.42382 12.5944 3.81198 13.0657C5.23207 14.7899 8.36428 18 12 18C15.6357 18 18.768 14.7899 20.188 13.0657C20.5762 12.5944 20.7703 12.3588 20.7703 12ZM12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3432 9 9.00002 10.3431 9.00002 12C9.00002 13.6569 10.3432 15 12 15Z" fill="#33363F"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 767 B |
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<title>Drive Health Dashboard</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container bordered">
|
||||
|
||||
<div class="container-titlebar">
|
||||
<div class="pad">
|
||||
<h4>Available Disks</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-body">
|
||||
<div class="pad">
|
||||
{{ if len .drives }}
|
||||
<table id="disks-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>Name</td>
|
||||
<td>Model</td>
|
||||
<td>Serial</td>
|
||||
<td>Temperature</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="disk-table-body">
|
||||
{{ range .drives }}
|
||||
{{ $temp := .GetTemperature }}
|
||||
|
||||
<tr>
|
||||
<td>#{{ .ID }}</td>
|
||||
<td> {{ .Name }}</td>
|
||||
<td> {{ .Model }}</td>
|
||||
<td> {{ .Serial }}</td>
|
||||
|
||||
{{ if gt $temp 50 }} <!-- Temperature greater than 50°C -->
|
||||
<td style="color: red;">{{ $temp }}°C</td>
|
||||
{{ else if gt $temp 30 }} <!-- Temperature between 31°C and 50°C -->
|
||||
<td style="color: orange;">{{ $temp }}°C</td>
|
||||
{{ else }} <!-- Temperature 30°C or below -->
|
||||
<td style="color: lime;">{{ $temp }}°C</td>
|
||||
{{ end }}
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
</table>
|
||||
{{ else }}
|
||||
<p>No hard drives found.</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
<td>Model</td>
|
||||
<td>Serial</td>
|
||||
<td>Temperature</td>
|
||||
<td>Actions</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="disk-table-body">
|
||||
|
|
@ -49,6 +50,9 @@
|
|||
{{ else }} <!-- Temperature 30°C or below -->
|
||||
<td style="color: lime;">{{ $temp }}°C</td>
|
||||
{{ end }}
|
||||
<td>
|
||||
<a title="View Disk" class="info-button" href="/disk/{{ .ID }}"></a>
|
||||
</td>
|
||||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
|
|
|
|||
Loading…
Reference in New Issue