use w3.css for primary styling
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
parent
0b701cc0d0
commit
484ed1b92a
34
account.html
34
account.html
@ -5,33 +5,31 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>tronnet - client</title>
|
||||
<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="css/table.css" type="text/css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="scripts/account.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>tronnet</h1>
|
||||
<hr>
|
||||
<nav id="nav">
|
||||
<a href="index.html">Instances</a>
|
||||
<a href="account.html" aria-current="true">Account</a>
|
||||
<a href="login.html">Logout</a>
|
||||
<header class="w3-black w3-bar">
|
||||
<nav class="w3-large w3-bar" id="nav">
|
||||
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||
<a class="w3-bar-item w3-button" href="index.html">Instances</a>
|
||||
<a class="w3-bar-item w3-button" href="account.html" aria-current="true">Account</a>
|
||||
<a class="w3-bar-item w3-button" href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Account</h2><hr>
|
||||
<table id="resource-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Resource Type</th>
|
||||
<th>Avaliable Amount</th>
|
||||
<th>Total Amount</th>
|
||||
<main class="w3-container">
|
||||
<h2>Account</h2>
|
||||
<table id="resource-table" class="w3-table w3-table-all">
|
||||
<thead style="background-color: black; color: white;">
|
||||
<tr style="background-color: black; color: white;">
|
||||
<th style="background-color: black; color: white;">Resource Type</th>
|
||||
<th style="background-color: black; color: white;">Avaliable Amount</th>
|
||||
<th style="background-color: black; color: white;">Total Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</main>
|
||||
<footer><p>© tronnet</p></footer>
|
||||
</body>
|
||||
</html>
|
||||
35
config.html
35
config.html
@ -5,24 +5,23 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>tronnet - client</title>
|
||||
<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="css/form.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/form.css">
|
||||
<script src="scripts/config.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>tronnet</h1>
|
||||
<hr>
|
||||
<nav id="nav">
|
||||
<a href="index.html" aria-current="true">Instances</a>
|
||||
<a href="account.html">Account</a>
|
||||
<a href="login.html">Logout</a>
|
||||
<header class="w3-black w3-bar">
|
||||
<nav class="w3-large w3-bar" id="nav">
|
||||
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||
<a class="w3-bar-item w3-button" href="index.html" aria-current="true">Instances</a>
|
||||
<a class="w3-bar-item w3-button" href="account.html">Account</a>
|
||||
<a class="w3-bar-item w3-button" href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<main class="w3-container">
|
||||
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2><hr>
|
||||
<form style="margin-left: auto; margin-right: auto;">
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Resources</legend>
|
||||
<div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div>
|
||||
@ -30,19 +29,15 @@
|
||||
<fieldset>
|
||||
<legend>Disks</legend>
|
||||
<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
|
||||
<hr>
|
||||
<div class="btn-group">
|
||||
<div class="w3-container w3-center">
|
||||
<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">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset-no-border">
|
||||
<div class="btn-group" id="form-actions">
|
||||
<button id="exit" type="button">EXIT</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="w3-container w3-center" id="form-actions">
|
||||
<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
<footer><p>© tronnet</p></footer>
|
||||
</body>
|
||||
</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 {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
form p {
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
form fieldset {
|
||||
border: solid var(--content-txt-color) 1px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
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;
|
||||
.input-grid {
|
||||
display: grid;
|
||||
column-gap: 10px;
|
||||
row-gap: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-grid * {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.input-grid .last-item {
|
||||
text-align: right;
|
||||
}
|
||||
@ -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 {
|
||||
--accent-bkg-color: black;
|
||||
--accent-txt-color: white;
|
||||
--accent-lnk-color: white;
|
||||
--content-bkg-color: white;
|
||||
--content-txt-color: black;
|
||||
--content-lnk-color: #6666FF;
|
||||
--form-disabled-color: #606060;
|
||||
--button-accept: #0F0;
|
||||
--success-color: #0F0;
|
||||
--button-cancel: #F00;
|
||||
--fail-color: #F00;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: monospace;
|
||||
font-size: large;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
grid-template-rows: 1fr auto;
|
||||
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;
|
||||
h1, h2, h3, h3, h4, h5, h6, p, a, label, button {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
img.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.flex-row-nowrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
column-gap: 10px;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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">
|
||||
<title>tronnet - client</title>
|
||||
<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="css/button.css" type="text/css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="scripts/index.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>
|
||||
<body>
|
||||
<header>
|
||||
<h1>tronnet</h1>
|
||||
<hr>
|
||||
<nav id="nav">
|
||||
<a href="index.html" aria-current="true">Instances</a>
|
||||
<a href="account.html">Account</a>
|
||||
<a href="login.html">Logout</a>
|
||||
<header class="w3-black w3-bar">
|
||||
<nav class="w3-large w3-bar" id="nav">
|
||||
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||
<a class="w3-bar-item w3-button" href="index.html" aria-current="true">Instances</a>
|
||||
<a class="w3-bar-item w3-button" href="account.html">Account</a>
|
||||
<a class="w3-bar-item w3-button" href="login.html">Logout</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Instances</h2><hr>
|
||||
<main class="w3-container">
|
||||
<h2>Instances</h2>
|
||||
<div id="instance-container">
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
</main>
|
||||
<footer><p>© tronnet</p></footer>
|
||||
</body>
|
||||
</html>
|
||||
56
login.html
56
login.html
@ -5,41 +5,37 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>tronnet - client</title>
|
||||
<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="css/form.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="scripts/login.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="w3-display-container" style="min-height: 100vh;">
|
||||
<header>
|
||||
<h1>tronnet</h1>
|
||||
<hr>
|
||||
<nav id="nav">
|
||||
<a href="login.html">Login</a>
|
||||
</nav>
|
||||
<header class="w3-black w3-bar">
|
||||
<nav class="w3-large w3-bar" id="nav">
|
||||
<h1 class="w3-bar-item" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
|
||||
<a class="w3-bar-item w3-button" href="login.html" aria-current="true">Login</a>
|
||||
</nav>
|
||||
</header>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Login</h2><hr>
|
||||
<form style="margin-left: auto; margin-right: auto;">
|
||||
<fieldset>
|
||||
<legend>Proxmox VE Login</legend>
|
||||
<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password">
|
||||
<label for="realm">Realm</label>
|
||||
<select id="realm" name="realm"></select>
|
||||
<main class="w3-container w3-display-middle">
|
||||
<div class="w3-card-4 w3-margin">
|
||||
<h2 class="w3-center">Proxmox VE Login</h2>
|
||||
<form class="w3-container">
|
||||
<label class="" for="username"><b>Username</b></label>
|
||||
<input class="w3-input w3-border" id="username" name="username" type="text">
|
||||
<label class="" for="password"><b>Password</b></label>
|
||||
<input class="w3-input w3-border" id="password" name="password" type="password">
|
||||
<label class="" for="realm">Realm</label>
|
||||
<select class="w3-select w3-border" id="realm" name="realm"></select>
|
||||
<div class="w3-center">
|
||||
<button class="w3-button w3-margin" id="submit">LOGIN</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="fieldset-no-border">
|
||||
<div class="btn-group">
|
||||
<button id="submit">LOGIN</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<p id="status" style="text-align: center;"></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-container w3-center w3-margin">
|
||||
<output id="status"></output>
|
||||
</div>
|
||||
</main>
|
||||
<footer><p>© tronnet</p></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -34,14 +34,28 @@ async function populateInstances () {
|
||||
instances.sort((a, b) => (a.vmid > b.vmid) ? 1 : -1);
|
||||
|
||||
instanceContainer.innerHTML = `
|
||||
<div style="display: contents;" id="instance-container-header">
|
||||
<p>VM ID</p>
|
||||
<p>VM Name</p>
|
||||
<p>VM Type</p>
|
||||
<p>VM Status</p>
|
||||
<p>Host Name</p>
|
||||
<p>Host Status</p>
|
||||
<div class="w3-row w3-hide-small w3-border-bottom">
|
||||
<div class="w3-col s1">
|
||||
<p>VM ID</p>
|
||||
</div>
|
||||
<div class="w3-col s2">
|
||||
<p>VM Name</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>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
for(let i = 0; i < instances.length; i++) {
|
||||
|
||||
@ -7,21 +7,36 @@ export class Instance extends HTMLElement {
|
||||
let shadowRoot = this.attachShadow({mode: "open"});
|
||||
|
||||
shadowRoot.innerHTML = `
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/button.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/instance.css" type="text/css">
|
||||
<p id="instance-id"></p>
|
||||
<p id="instance-name"></p>
|
||||
<p id="instance-type"></p>
|
||||
<div id="instance-status-div"><img id="instance-status-icon"><p id="instance-status"></p></div>
|
||||
<p id="node-name"></p>
|
||||
<div id="node-status-div"><img id="node-status-icon"><p id="node-status"></p></div>
|
||||
<div class="btn-group">
|
||||
<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>
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<div class="w3-row w3-border-bottom">
|
||||
<div class="w3-col m1 s6">
|
||||
<p id="instance-id"></p>
|
||||
</div>
|
||||
<div class="w3-col m2 s6">
|
||||
<p id="instance-name"></p>
|
||||
</div>
|
||||
<div class="w3-col m1 w3-hide-small">
|
||||
<p id="instance-type"></p>
|
||||
</div>
|
||||
<div class="w3-col m2 s6 flex-row-nowrap">
|
||||
<img id="instance-status-icon">
|
||||
<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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user