tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use w3.css for primary styling

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-11 21:38:51 +00:00
parent 0b701cc0d0
commit 484ed1b92a
12 changed files with 156 additions and 434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
account.html
View File

@ -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>&copy; tronnet</p></footer>
</body> </body>
</html> </html>

33
config.html
View File

@ -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>&copy; tronnet</p></footer>
</body> </body>
</html> </html>

29
css/button.css
View File

@ -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;
}

20
css/dialog.css
View File

@ -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;
}

57
css/form.css
View File

@ -1,39 +1,3 @@
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 { .input-grid {
display: grid; display: grid;
column-gap: 10px; column-gap: 10px;
@ -41,22 +5,11 @@ form button {
align-items: center; align-items: center;
} }
form legend { .input-grid * {
top: -0.6em; margin-top: 0px;
position: relative; margin-bottom: 0px;
height: 0;
} }
form hr { .input-grid .last-item {
width: 100%; text-align: right;
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;
} }

27
css/instance.css
View File

@ -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;
}

128
css/style.css
View File

@ -1,125 +1,25 @@
:root { h1, h2, h3, h3, h4, h5, h6, p, a, label, button {
--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-family: monospace;
font-size: large;
box-sizing: border-box;
} }
body { body {
display: grid;
min-height: 100vh; min-height: 100vh;
grid-template-rows: 1fr auto;
grid-template-columns: auto 1fr;
grid-template-areas:
"bar main"
"footer main"
;
margin: 0px;
} }
header { img.clickable {
grid-area: bar; cursor: pointer;
}
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 { img {
height: 1lh; height: 1em;
width: 1em;
}
.flex-row-nowrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
column-gap: 10px;
align-items: center;
height: 100%;
} }

28
css/table.css
View File

@ -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
View File

@ -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>&copy; tronnet</p></footer>
</body> </body>
</html> </html>

52
login.html
View File

@ -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>
<main> </header>
<h2>Login</h2><hr> <main class="w3-container w3-display-middle">
<form style="margin-left: auto; margin-right: auto;"> <div class="w3-card-4 w3-margin">
<fieldset> <h2 class="w3-center">Proxmox VE Login</h2>
<legend>Proxmox VE Login</legend> <form class="w3-container">
<div class="input-grid" style="grid-template-columns: repeat(2, auto);"> <label class="" for="username"><b>Username</b></label>
<label for="username">Username</label> <input class="w3-input w3-border" id="username" name="username" type="text">
<input type="text" id="username" name="username"> <label class="" for="password"><b>Password</b></label>
<label for="password">Password</label> <input class="w3-input w3-border" id="password" name="password" type="password">
<input type="password" id="password" name="password"> <label class="" for="realm">Realm</label>
<label for="realm">Realm</label> <select class="w3-select w3-border" id="realm" name="realm"></select>
<select id="realm" name="realm"></select> <div class="w3-center">
<button class="w3-button w3-margin" id="submit">LOGIN</button>
</div> </div>
</fieldset>
<fieldset class="fieldset-no-border">
<div class="btn-group">
<button id="submit">LOGIN</button>
</div>
</fieldset>
</form> </form>
<p id="status" style="text-align: center;"></p> </div>
<div class="w3-container w3-center w3-margin">
<output id="status"></output>
</div>
</main> </main>
<footer><p>&copy; tronnet</p></footer>
</body> </body>
</html> </html>

16
scripts/index.js
View File

@ -34,15 +34,29 @@ 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">
<div class="w3-col s1">
<p>VM ID</p> <p>VM ID</p>
</div>
<div class="w3-col s2">
<p>VM Name</p> <p>VM Name</p>
</div>
<div class="w3-col s1">
<p>VM Type</p> <p>VM Type</p>
</div>
<div class="w3-col s2">
<p>VM Status</p> <p>VM Status</p>
</div>
<div class="w3-col s2">
<p>Host Name</p> <p>Host Name</p>
</div>
<div class="w3-col s2">
<p>Host Status</p> <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++) {
let newInstance = document.createElement("instance-obj"); let newInstance = document.createElement("instance-obj");

27
scripts/instance.js
View File

@ -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">
<div class="w3-col m1 s6">
<p id="instance-id"></p> <p id="instance-id"></p>
</div>
<div class="w3-col m2 s6">
<p id="instance-name"></p> <p id="instance-name"></p>
</div>
<div class="w3-col m1 w3-hide-small">
<p id="instance-type"></p> <p id="instance-type"></p>
<div id="instance-status-div"><img id="instance-status-icon"><p id="instance-status"></p></div> </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> <p id="node-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 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="power-btn" class="clickable">
<img id="console-btn" class="clickable"> <img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable"> <img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable"> <img id="delete-btn" class="clickable">
</div> </div>
</div>
`; `;
this.shadowElement = shadowRoot; this.shadowElement = shadowRoot;