Merge branch 'main' of ssh://fung.uy:2222/brooke/pve-panel
This commit is contained in:
commit
63c29bb82d
3 changed files with 148 additions and 3 deletions
|
@ -108,4 +108,120 @@
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
<body class="container">
|
||||||
|
<header class="nav-links">
|
||||||
|
<div class="left">
|
||||||
|
<a class="inactive" href="/">FAQ</a>
|
||||||
|
<a class="inactive" href="/policy">policies</a>
|
||||||
|
<a class="inactive" href="/pricing">pricing</a>
|
||||||
|
<a class="active" href="/console">console</a>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<i>E408-AEE4</i>
|
||||||
|
<a href="#"><u>Logout</u></a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section class="console">
|
||||||
|
<div class="console-left">
|
||||||
|
Bronze Discipline<br /><small>A2D1-KB21</small>
|
||||||
|
</div>
|
||||||
|
<div class="console-right">
|
||||||
|
<button id="loadButton">
|
||||||
|
<span id="restart">Restart</span>
|
||||||
|
<div class="loader" id="loader"></div></button
|
||||||
|
><button>Power Off</button><button class="alert">Reinstall</button>
|
||||||
|
</div>
|
||||||
|
<div class="console-uname">
|
||||||
|
Debian GNU/Linux 12 (bookworm)<br />
|
||||||
|
<i>6.1.0-28-amd64</i>
|
||||||
|
<ul>
|
||||||
|
<li>IPv4: 65.132.212.89</li>
|
||||||
|
<li>IPv6: 2603:3001:6db:4900::fbf2</li>
|
||||||
|
<li>Status: Running</li>
|
||||||
|
<li>Uptime: 14 Days 14:32:04</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="console-resources">
|
||||||
|
<label for="mem">Memory Usage</label>
|
||||||
|
<div id="mem" class="progress">
|
||||||
|
<div class="bar" style="width: 20%"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small>589.02 MB of 5.79 GB Used </small>
|
||||||
|
<small>5.21 GB Free</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="console-resources">
|
||||||
|
<label for="cpu">vCPU Usage</label>
|
||||||
|
<div id="cpu" class="progress">
|
||||||
|
<div class="bar" style="width: 10%"></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small>2 Cores</small>
|
||||||
|
<small>10% Utilization</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="console-log">
|
||||||
|
<details>
|
||||||
|
<summary>Instance Event Log</summary>
|
||||||
|
<div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>hh:mm:ss</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>00:03:43</td>
|
||||||
|
<td>Backup Job</td>
|
||||||
|
<td>OK</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>00:08:43</td>
|
||||||
|
<td>Backup Job</td>
|
||||||
|
<td>OK</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>00:05:43</td>
|
||||||
|
<td>Install Debian 12</td>
|
||||||
|
<td>OK</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
(c) Attribution-ShareAlike 4.0 International <br />
|
||||||
|
A service by
|
||||||
|
<a href="https://myco.systems/">MycoSystems LLC</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
<script>
|
||||||
|
const loadButton = document.getElementById("loadButton");
|
||||||
|
const loader = document.getElementById("loader");
|
||||||
|
const text = document.getElementById("restart");
|
||||||
|
|
||||||
|
loadButton.addEventListener("click", () => {
|
||||||
|
// Disable the button
|
||||||
|
// and prevent further clicks
|
||||||
|
loadButton.disabled = true;
|
||||||
|
loader.style.display = "inline-block";
|
||||||
|
text.style.display = "none";
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// Restore the button state
|
||||||
|
//after the operation is done
|
||||||
|
loadButton.disabled = false;
|
||||||
|
loader.style.display = "none";
|
||||||
|
text.style.display = "inline-block";
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
29
styles.css
29
styles.css
|
@ -261,6 +261,9 @@ section {
|
||||||
font-size: 0.9rem !important;
|
font-size: 0.9rem !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-right button:hover {
|
.console-right button:hover {
|
||||||
|
@ -366,3 +369,29 @@ tr a::after {
|
||||||
margin-left: 0.5rem;
|
margin-left: 0.5rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
display: none;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-top: 4px solid #241917;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 1.2rem;
|
||||||
|
height: 1.2rem;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
margin-left: 1.3rem;
|
||||||
|
margin-right: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
background-color: #ccc;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue