From de36f2261a0ee28e90a6d8d415d0fc877ae55d57 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Tue, 11 Apr 2023 21:38:51 +0000
Subject: [PATCH] use w3.css for primary styling

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 account.html        |  34 +++++-----
 config.html         |  35 +++++------
 css/button.css      |  29 ---------
 css/dialog.css      |  20 ------
 css/form.css        |  75 +++++-----------------
 css/instance.css    |  27 --------
 css/style.css       | 148 +++++++-------------------------------------
 css/table.css       |  28 ---------
 index.html          |  65 +++----------------
 login.html          |  56 ++++++++---------
 scripts/index.js    |  28 ++++++---
 scripts/instance.js |  45 +++++++++-----
 12 files changed, 156 insertions(+), 434 deletions(-)
 delete mode 100644 css/button.css
 delete mode 100644 css/dialog.css
 delete mode 100644 css/instance.css
 delete mode 100644 css/table.css
diff --git a/account.html b/account.html
index c402455..aeb7122 100644
--- a/account.html
+++ b/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>&copy; tronnet</p></footer>
 	</body>
 </html>
\ No newline at end of file
diff --git a/config.html b/config.html
index 970d186..b49ebce 100644
--- a/config.html
+++ b/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>&copy; tronnet</p></footer>
 	</body>
 </html>
\ No newline at end of file
diff --git a/css/button.css b/css/button.css
deleted file mode 100644
index 5b69d91..0000000
--- a/css/button.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/css/dialog.css b/css/dialog.css
deleted file mode 100644
index 7d5a2a0..0000000
--- a/css/dialog.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/css/form.css b/css/form.css
index 7858dfe..9762e18 100644
--- a/css/form.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/css/instance.css b/css/instance.css
deleted file mode 100644
index 60475f9..0000000
--- a/css/instance.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 237713a..7b9a0fa 100644
--- a/css/style.css
+++ b/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%;
 }
\ No newline at end of file
diff --git a/css/table.css b/css/table.css
deleted file mode 100644
index 98c8c91..0000000
--- a/css/table.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 40ef471..4b5a31e 100644
--- a/index.html
+++ b/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>&copy; tronnet</p></footer>
 	</body>
 </html>
\ No newline at end of file
diff --git a/login.html b/login.html
index 0093369..05de45f 100644
--- a/login.html
+++ b/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>&copy; tronnet</p></footer>
 	</body>
 </html>
\ No newline at end of file
diff --git a/scripts/index.js b/scripts/index.js
index ac75206..10bfa0d 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -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++) {
diff --git a/scripts/instance.js b/scripts/instance.js
index 94b880f..fda2637 100644
--- a/scripts/instance.js
+++ b/scripts/instance.js
@@ -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;
