use w3.css for primary styling
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
parent
729f8c0faa
commit
de36f2261a
34
account.html
34
account.html
@ -5,33 +5,31 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>tronnet - client</title>
|
<title>tronnet - client</title>
|
||||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="css/table.css" type="text/css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<script src="scripts/account.js" type="module"></script>
|
<script src="scripts/account.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="w3-black w3-bar">
|
||||||
<h1>tronnet</h1>
|
<nav class="w3-large w3-bar" id="nav">
|
||||||
<hr>
|
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||||
<nav id="nav">
|
<a class="w3-bar-item w3-button" href="index.html">Instances</a>
|
||||||
<a href="index.html">Instances</a>
|
<a class="w3-bar-item w3-button" href="account.html" aria-current="true">Account</a>
|
||||||
<a href="account.html" aria-current="true">Account</a>
|
<a class="w3-bar-item w3-button" href="login.html">Logout</a>
|
||||||
<a href="login.html">Logout</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="w3-container">
|
||||||
<h2>Account</h2><hr>
|
<h2>Account</h2>
|
||||||
<table id="resource-table">
|
<table id="resource-table" class="w3-table w3-table-all">
|
||||||
<thead>
|
<thead style="background-color: black; color: white;">
|
||||||
<tr>
|
<tr style="background-color: black; color: white;">
|
||||||
<th>Resource Type</th>
|
<th style="background-color: black; color: white;">Resource Type</th>
|
||||||
<th>Avaliable Amount</th>
|
<th style="background-color: black; color: white;">Avaliable Amount</th>
|
||||||
<th>Total Amount</th>
|
<th style="background-color: black; color: white;">Total Amount</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
<tbody></tbody>
|
||||||
</table>
|
</table>
|
||||||
</main>
|
</main>
|
||||||
<footer><p>© tronnet</p></footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
35
config.html
35
config.html
@ -5,24 +5,23 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>tronnet - client</title>
|
<title>tronnet - client</title>
|
||||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="css/form.css" type="text/css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
<link rel="stylesheet" href="css/form.css">
|
||||||
<script src="scripts/config.js" type="module"></script>
|
<script src="scripts/config.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="w3-black w3-bar">
|
||||||
<h1>tronnet</h1>
|
<nav class="w3-large w3-bar" id="nav">
|
||||||
<hr>
|
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||||
<nav id="nav">
|
<a class="w3-bar-item w3-button" href="index.html" aria-current="true">Instances</a>
|
||||||
<a href="index.html" aria-current="true">Instances</a>
|
<a class="w3-bar-item w3-button" href="account.html">Account</a>
|
||||||
<a href="account.html">Account</a>
|
<a class="w3-bar-item w3-button" href="login.html">Logout</a>
|
||||||
<a href="login.html">Logout</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="w3-container">
|
||||||
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2><hr>
|
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2><hr>
|
||||||
<form style="margin-left: auto; margin-right: auto;">
|
<form>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Resources</legend>
|
<legend>Resources</legend>
|
||||||
<div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div>
|
<div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div>
|
||||||
@ -30,19 +29,15 @@
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Disks</legend>
|
<legend>Disks</legend>
|
||||||
<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
|
<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
|
||||||
<hr>
|
<div class="w3-container w3-center">
|
||||||
<div class="btn-group">
|
|
||||||
<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
|
<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
|
||||||
<img id="cd-add" src="images/actions/disk/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
|
<img id="cd-add" src="images/actions/disk/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset class="fieldset-no-border">
|
<div class="w3-container w3-center" id="form-actions">
|
||||||
<div class="btn-group" id="form-actions">
|
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
|
||||||
<button id="exit" type="button">EXIT</button>
|
</div>
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
<footer><p>© tronnet</p></footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,29 +0,0 @@
|
|||||||
.btn-group {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group button {
|
|
||||||
padding: 10px; /* Some padding */
|
|
||||||
cursor: pointer; /* Pointer/hand icon */
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group button:hover {
|
|
||||||
filter: brightness(85%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group button.accept {
|
|
||||||
background-color: var(--button-accept);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group button.cancel {
|
|
||||||
background-color: var(--button-cancel);
|
|
||||||
}
|
|
||||||
|
|
||||||
img.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
dialog {
|
|
||||||
background-color: var(--content-bkg-color);
|
|
||||||
border: 1px solid var(--content-txt-color);
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog::backdrop {
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
dialog .btn-group {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#prompt {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
75
css/form.css
75
css/form.css
@ -1,62 +1,15 @@
|
|||||||
form {
|
.input-grid {
|
||||||
width: fit-content;
|
display: grid;
|
||||||
}
|
column-gap: 10px;
|
||||||
|
row-gap: 5px;
|
||||||
form p {
|
align-items: center;
|
||||||
text-align: left;
|
}
|
||||||
margin: 0px;
|
|
||||||
}
|
.input-grid * {
|
||||||
|
margin-top: 0px;
|
||||||
form fieldset {
|
margin-bottom: 0px;
|
||||||
border: solid var(--content-txt-color) 1px;
|
}
|
||||||
padding: 10px;
|
|
||||||
margin: 10px;
|
.input-grid .last-item {
|
||||||
}
|
text-align: right;
|
||||||
|
|
||||||
form input, form label, form legend {
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input, form select {
|
|
||||||
border: solid var(--content-txt-color) 1px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input:focus, form select:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
form input:disabled, form select:disabled {
|
|
||||||
background-color: var(--form-disabled-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
form button {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-grid {
|
|
||||||
display: grid;
|
|
||||||
column-gap: 10px;
|
|
||||||
row-gap: 5px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
form legend {
|
|
||||||
top: -0.6em;
|
|
||||||
position: relative;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
form hr {
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
border-top: solid var(--content-txt-color) 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
form .last-item {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 5px;
|
|
||||||
}
|
}
|
||||||
@ -1,27 +0,0 @@
|
|||||||
@media screen and (min-width: 1000px) {
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1000px) {
|
|
||||||
#instance-status {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#instance-type {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#node-name {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#node-status-div {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
margin-left: 0px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
148
css/style.css
148
css/style.css
@ -1,125 +1,25 @@
|
|||||||
:root {
|
h1, h2, h3, h3, h4, h5, h6, p, a, label, button {
|
||||||
--accent-bkg-color: black;
|
font-family: monospace;
|
||||||
--accent-txt-color: white;
|
}
|
||||||
--accent-lnk-color: white;
|
|
||||||
--content-bkg-color: white;
|
body {
|
||||||
--content-txt-color: black;
|
min-height: 100vh;
|
||||||
--content-lnk-color: #6666FF;
|
}
|
||||||
--form-disabled-color: #606060;
|
|
||||||
--button-accept: #0F0;
|
img.clickable {
|
||||||
--success-color: #0F0;
|
cursor: pointer;
|
||||||
--button-cancel: #F00;
|
}
|
||||||
--fail-color: #F00;
|
|
||||||
}
|
img {
|
||||||
|
height: 1em;
|
||||||
* {
|
width: 1em;
|
||||||
font-family: monospace;
|
}
|
||||||
font-size: large;
|
|
||||||
box-sizing: border-box;
|
.flex-row-nowrap {
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
body {
|
flex-wrap: nowrap;
|
||||||
display: grid;
|
column-gap: 10px;
|
||||||
min-height: 100vh;
|
align-items: center;
|
||||||
grid-template-rows: 1fr auto;
|
height: 100%;
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
grid-template-areas:
|
|
||||||
"bar main"
|
|
||||||
"footer main"
|
|
||||||
;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
grid-area: bar;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
padding: 20px;
|
|
||||||
grid-area: main;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
grid-area: footer;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
header, footer {
|
|
||||||
background-color: var(--accent-bkg-color);
|
|
||||||
color: var(--accent-txt-color);
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
background-color: var(--accent-bkg-color);
|
|
||||||
color: var(--accent-lnk-color);
|
|
||||||
font-size: xx-large;
|
|
||||||
text-decoration: underline 0.1em var(--accent-bkg-color);
|
|
||||||
transition: text-decoration-color 250ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover, nav a[aria-current="true"] {
|
|
||||||
text-decoration: underline 0.1em var(--accent-lnk-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav:hover a[aria-current="true"] {
|
|
||||||
text-decoration: underline 0.1em var(--accent-bkg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav:hover a[aria-current="true"]:hover {
|
|
||||||
text-decoration: underline 0.1em var(--accent-lnk-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
main a {
|
|
||||||
font-size: inherit;
|
|
||||||
color: var(--content-lnk-color);
|
|
||||||
text-decoration: underline 0.1em var(--content-bkg-color);
|
|
||||||
transition: text-decoration-color 250ms;
|
|
||||||
}
|
|
||||||
|
|
||||||
main a:hover {
|
|
||||||
text-decoration: underline 0.1em var(--content-lnk-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: xx-large;
|
|
||||||
margin: 0px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: xx-large;
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: x-large;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: large;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.none {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 1lh;
|
|
||||||
}
|
}
|
||||||
@ -1,28 +0,0 @@
|
|||||||
table {
|
|
||||||
padding: 10px;
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead {
|
|
||||||
background-color: var(--accent-bkg-color);
|
|
||||||
color: var(--accent-txt-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
table tbody {
|
|
||||||
background-color: var(--content-bkg-color);
|
|
||||||
color: var(--content-txt-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
table tbody tr:nth-child(even) {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tbody tr:hover {
|
|
||||||
background-color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
table th, table td {
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
65
index.html
65
index.html
@ -5,72 +5,27 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>tronnet - client</title>
|
<title>tronnet - client</title>
|
||||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<script src="scripts/index.js" type="module"></script>
|
<script src="scripts/index.js" type="module"></script>
|
||||||
<script src="scripts/instance.js" type="module"></script>
|
<script src="scripts/instance.js" type="module"></script>
|
||||||
<style>
|
|
||||||
@media screen and (min-width: 1000px) {
|
|
||||||
#instance-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto auto auto auto auto 1fr auto;
|
|
||||||
column-gap: 2.5em;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#instance-container-header * {
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
instance-obj {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
instance-obj:after, instance-obj:first-of-type:before {
|
|
||||||
content: " ";
|
|
||||||
border-bottom: 1px solid var(--content-txt-color);
|
|
||||||
grid-column: 1 / span 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1000px) {
|
|
||||||
#instance-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: auto auto 1fr auto;
|
|
||||||
column-gap: 2.5em;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
#instance-container {
|
|
||||||
margin: 0px;
|
|
||||||
}
|
|
||||||
#instance-container-header * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
instance-obj {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
instance-obj:after, instance-obj:first-of-type:before {
|
|
||||||
content: " ";
|
|
||||||
border-bottom: 1px solid var(--content-txt-color);
|
|
||||||
grid-column: 1 / span 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header class="w3-black w3-bar">
|
||||||
<h1>tronnet</h1>
|
<nav class="w3-large w3-bar" id="nav">
|
||||||
<hr>
|
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||||
<nav id="nav">
|
<a class="w3-bar-item w3-button" href="index.html" aria-current="true">Instances</a>
|
||||||
<a href="index.html" aria-current="true">Instances</a>
|
<a class="w3-bar-item w3-button" href="account.html">Account</a>
|
||||||
<a href="account.html">Account</a>
|
<a class="w3-bar-item w3-button" href="login.html">Logout</a>
|
||||||
<a href="login.html">Logout</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="w3-container">
|
||||||
<h2>Instances</h2><hr>
|
<h2>Instances</h2>
|
||||||
<div id="instance-container">
|
<div id="instance-container">
|
||||||
</div>
|
</div>
|
||||||
<div class="center-div" style="text-align: center;">
|
<div class="center-div" style="text-align: center;">
|
||||||
<img id="instance-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
|
<img id="instance-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer><p>© tronnet</p></footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
56
login.html
56
login.html
@ -5,41 +5,37 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>tronnet - client</title>
|
<title>tronnet - client</title>
|
||||||
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
|
||||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="css/form.css" type="text/css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
|
||||||
<script src="scripts/login.js" type="module"></script>
|
<script src="scripts/login.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="w3-display-container" style="min-height: 100vh;">
|
||||||
<header>
|
<header>
|
||||||
<h1>tronnet</h1>
|
<header class="w3-black w3-bar">
|
||||||
<hr>
|
<nav class="w3-large w3-bar" id="nav">
|
||||||
<nav id="nav">
|
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||||
<a href="login.html">Login</a>
|
<a class="w3-bar-item w3-button" href="login.html" aria-current="true">Login</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="w3-container w3-display-middle">
|
||||||
<h2>Login</h2><hr>
|
<div class="w3-card-4 w3-margin">
|
||||||
<form style="margin-left: auto; margin-right: auto;">
|
<h2 class="w3-center">Proxmox VE Login</h2>
|
||||||
<fieldset>
|
<form class="w3-container">
|
||||||
<legend>Proxmox VE Login</legend>
|
<label class="" for="username"><b>Username</b></label>
|
||||||
<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
|
<input class="w3-input w3-border" id="username" name="username" type="text">
|
||||||
<label for="username">Username</label>
|
<label class="" for="password"><b>Password</b></label>
|
||||||
<input type="text" id="username" name="username">
|
<input class="w3-input w3-border" id="password" name="password" type="password">
|
||||||
<label for="password">Password</label>
|
<label class="" for="realm">Realm</label>
|
||||||
<input type="password" id="password" name="password">
|
<select class="w3-select w3-border" id="realm" name="realm"></select>
|
||||||
<label for="realm">Realm</label>
|
<div class="w3-center">
|
||||||
<select id="realm" name="realm"></select>
|
<button class="w3-button w3-margin" id="submit">LOGIN</button>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</form>
|
||||||
<fieldset class="fieldset-no-border">
|
</div>
|
||||||
<div class="btn-group">
|
<div class="w3-container w3-center w3-margin">
|
||||||
<button id="submit">LOGIN</button>
|
<output id="status"></output>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
<p id="status" style="text-align: center;"></p>
|
|
||||||
</main>
|
</main>
|
||||||
<footer><p>© tronnet</p></footer>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -34,14 +34,28 @@ async function populateInstances () {
|
|||||||
instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
|
instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
|
||||||
|
|
||||||
instanceContainer.innerHTML = `
|
instanceContainer.innerHTML = `
|
||||||
<div style="display: contents;" id="instance-container-header">
|
<div class="w3-row w3-hide-small w3-border-bottom">
|
||||||
<p>VM ID</p>
|
<div class="w3-col s1">
|
||||||
<p>VM Name</p>
|
<p>VM ID</p>
|
||||||
<p>VM Type</p>
|
</div>
|
||||||
<p>VM Status</p>
|
<div class="w3-col s2">
|
||||||
<p>Host Name</p>
|
<p>VM Name</p>
|
||||||
<p>Host Status</p>
|
</div>
|
||||||
|
<div class="w3-col s1">
|
||||||
|
<p>VM Type</p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col s2">
|
||||||
|
<p>VM Status</p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col s2">
|
||||||
|
<p>Host Name</p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col s2">
|
||||||
|
<p>Host Status</p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col s2">
|
||||||
<p>Actions</p>
|
<p>Actions</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
for(let i = 0; i < instances.length; i++) {
|
for(let i = 0; i < instances.length; i++) {
|
||||||
|
|||||||
@ -7,21 +7,36 @@ export class Instance extends HTMLElement {
|
|||||||
let shadowRoot = this.attachShadow({mode: "open"});
|
let shadowRoot = this.attachShadow({mode: "open"});
|
||||||
|
|
||||||
shadowRoot.innerHTML = `
|
shadowRoot.innerHTML = `
|
||||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
<link rel="stylesheet" href="css/instance.css" type="text/css">
|
<div class="w3-row w3-border-bottom">
|
||||||
<p id="instance-id"></p>
|
<div class="w3-col m1 s6">
|
||||||
<p id="instance-name"></p>
|
<p id="instance-id"></p>
|
||||||
<p id="instance-type"></p>
|
</div>
|
||||||
<div id="instance-status-div"><img id="instance-status-icon"><p id="instance-status"></p></div>
|
<div class="w3-col m2 s6">
|
||||||
<p id="node-name"></p>
|
<p id="instance-name"></p>
|
||||||
<div id="node-status-div"><img id="node-status-icon"><p id="node-status"></p></div>
|
</div>
|
||||||
<div class="btn-group">
|
<div class="w3-col m1 w3-hide-small">
|
||||||
<img id="power-btn" class="clickable">
|
<p id="instance-type"></p>
|
||||||
<img id="console-btn" class="clickable">
|
</div>
|
||||||
<img id="configure-btn" class="clickable">
|
<div class="w3-col m2 s6 flex-row-nowrap">
|
||||||
<img id="delete-btn" class="clickable">
|
<img id="instance-status-icon">
|
||||||
</div>
|
<p id="instance-status"></p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col m2 w3-hide-small">
|
||||||
|
<p id="node-name"></p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col m2 flex-row-nowrap w3-hide-small">
|
||||||
|
<img id="node-status-icon">
|
||||||
|
<p id="node-status"></p>
|
||||||
|
</div>
|
||||||
|
<div class="w3-col m2 s6 flex-row-nowrap" style="padding-top: 15px;">
|
||||||
|
<img id="power-btn" class="clickable">
|
||||||
|
<img id="console-btn" class="clickable">
|
||||||
|
<img id="configure-btn" class="clickable">
|
||||||
|
<img id="delete-btn" class="clickable">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
this.shadowElement = shadowRoot;
|
this.shadowElement = shadowRoot;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user