major changes to styling:

move nav bar to left side and implement hover animations,
generalize color scheme using css variables,
move button and btn-group related styles to buttons.css,
consolidate form input and select styles in form.css

Signed-off-by: Arthur Lu <learthurgo@gmail.com>

css/buttons.css

@@ -0,0 +1,29 @@
+.btn-group {
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	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;
+}

css/dialog.css

@@ -1,6 +1,6 @@
 dialog {
-	background-color: #000000;
+	background-color: var(--content-bkg-color);
-	border: 1px solid white;
+	border: 1px solid var(--content-txt-color);
 	border-radius: 5px;
 	padding: 10px;
 }

css/form.css

@@ -1,50 +1,34 @@
+form {
+	width: fit-content;
+}
+
 p {
 	text-align: left;
 	margin: 0px;
 }
 
 fieldset {
-	border: solid white 1px;
+	border: solid var(--content-txt-color) 1px;
-	border-radius: 5px;
 	padding: 10px;
 	margin: 10px;
 }
 
-form > fieldset:first-of-type {
-	margin-top: 0px;
-}
-
 input, label, legend {
 	font-family: monospace;
-	color: white;
 	font-size: 14px;
-	background-color: black;
 }
 
-input {
+input, select {
-	border: solid white 1px;
+	border: solid var(--content-txt-color) 1px;
 	min-width: fit-content;
-	width: 100%;
 }
 
-input:focus {
+input:focus, select:focus {
 	outline: none;
 }
 
-input:disabled {
+input:disabled, select:disabled {
-	background-color: #606060;
+	background-color: var(--form-disabled-color);
-}
-
-select {
-	border: solid white 1px;
-	background-color: black;
-	color: white;
-	min-width: fit-content;
-	width: 100%;
-}
-
-select:disabled {
-	background-color: #606060;
 }
 
 button {
@@ -71,7 +55,7 @@ form img {
 hr {
 	width: 100%;
 	border: none;
-	border-top: solid white 1px;
+	border-top: solid var(--content-txt-color) 1px;
 }
 
 .last-item {

css/instance.css

@@ -1,5 +1,5 @@
 article {
-	border: solid white 1px;
+	border: solid var(--content-txt-color) 1px;
 	border-radius: 5px;
 	padding: 0px 1em 0px 1em;
 	margin: 20px 0px 20px 0px;
@@ -27,7 +27,7 @@ article > div > div > img {
 
 hr {
 	border: none;
-	border-top: solid white 1px;
+	border-top: solid var(--content-txt-color) 1px;
 	margin: 0px;
 }
 

css/style.css

@@ -1,30 +1,104 @@
+:root {
+    --accent-bkg-color: black;
+	--accent-txt-color: white;
+	--content-bkg-color: white;
+	--content-txt-color: black;
+	--form-disabled-color: #606060;
+	--button-accept: #0F0;
+	--button-cancel: #F00;
+}
+
+* {
+	font-family: monospace;
+	font-size: large;
+}
+
 body {
-	background-color:black;
+	display: grid;
-	min-width: fit-content;
+	min-height: 100vh;
+	grid-template-rows: 1fr auto;
+	grid-template-columns: auto 1fr;
+	grid-template-areas: 
+		"header main"
+		"footer main"
+	;
+	margin: 0px;
+}
+
+header, footer {
+	background-color: var(--accent-bkg-color);
+	color: var(--accent-txt-color);
+	padding: 20px;
+	width: 15vw;
+	min-width: max-content;
+	max-width: 25ch;
+}
+
+main {
+	background-color: var(--content-bkg-color);
+	color: var(--content-txt-color);
+	padding: 20px;
+}
+
+footer p {
+	text-align: center;
+}
+
+nav {
+	display: flex;
+	flex-direction: column;
+	row-gap: 20px;
+}
+
+nav a {
+	color: var(--accent-txt-color);
+	font-size: xx-large;
+	text-decoration: none;
+	position: relative;
+	padding: 10px;
+	padding-left: 20px;
+}
+
+nav a:before {
+	position: absolute;
+    width: 0px;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+    content: '';
+    background: var(--accent-txt-color);
+    opacity: 0.3;
+    transition: all 0.3s;
+}
+
+nav a[aria-current="true"]:before {
+	width: 10px;
+}
+
+nav a:hover:before {
+    width: 100%;
 }
 
 h1, h2, h3, p {
 	font-family: monospace;
-	color: white;
 }
 
 h1 {
-	font-size: 72px; 
+	font-size: xx-large; 
 	text-align: center;
 }
 
 h2 {
-	font-size: 32px; 
+	font-size: x-large; 
 	text-align: center;
 }
 
 h3 {
-	font-size: 24px; 
+	font-size: larger; 
 	text-align: center;
 }
 
 p {
-	font-size: 14px; 
 	text-align: left;
 }
 
@@ -45,59 +119,10 @@ p {
 }
 }
 
-.btn-group {
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: 10px;
-}
-
-.btn-group button {
-	background-color: #00ff00; /* Green background */
-	color: black; /* White text */
-	padding: 10px; /* Some padding */
-	cursor: pointer; /* Pointer/hand icon */
-	border: none;
-}
-
-.btn-group button:hover {
-	background-color: #008800;
-}
-
-.btn-group button.active {
-	background-color: black;
-	color: white;
-	border: solid white 1px;
-}
-
-nav {
-	margin: 20px 0px 20px 0px;
-}
-
-.btn-group img:hover {
-	cursor: pointer;
-}
-
-img.clickable {
-	cursor: pointer;
-}
-
 .hidden {
 	visibility: hidden;	
 }
 
 .none {
 	display: none;
-}
+}
-
-.visuallyhidden {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-  }

index.html

@@ -7,14 +7,15 @@
 		<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/buttons.css" type="text/css">
 		<script src="scripts/index.js" type="module"></script>
 		<script src="scripts/instance.js" type="module"></script>
 	</head>
 	<body>
 		<header>
-			<nav class="btn-group">
+			<nav>
-				<button id="instances" class="active">INSTANCES</button>
+				<a href="index.html" aria-current="true">INSTANCES</a>
-				<button id="logout">LOGOUT</button>
+				<a href="login.html">LOGOUT</a>
 			</nav>
 		</header>
 		<main>
@@ -24,5 +25,6 @@
 				<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>

login.html

@@ -7,29 +7,38 @@
 		<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/buttons.css" type="text/css">
 		<script src="scripts/login.js" type="module"></script>
 	</head>
 	<body>
-		<div class="center-div">
+		<header>
-			<form style="margin-top: 20px; min-width: min-content; margin-left: auto; margin-right: auto;">
+			<nav>
-				<fieldset>
+				<a href="login.html" aria-current="true">LOGIN</a>
-					<legend>Proxmox VE Login</legend>
+			</nav>
-					<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
+		</header>
-						<label for="username">Username</label>
+		<main>
-						<input type="text" id="username" name="username">
+			<div class="center-div">
-						<label for="password">Password</label>
+				<form style="margin-left: auto; margin-right: auto;">
-						<input type="password" id="password" name="password">
+					<fieldset>
-						<label for="realm">Realm</label>
+						<legend>Proxmox VE Login</legend>
-						<select id="realm" name="realm"></select>
+						<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
-					</div>
+							<label for="username">Username</label>
-				</fieldset>
+							<input type="text" id="username" name="username">
-				<fieldset class="fieldset-no-border">
+							<label for="password">Password</label>
-					<div class="btn-group">
+							<input type="password" id="password" name="password">
-						<button id="submit">LOGIN</button>
+							<label for="realm">Realm</label>
-					</div>
+							<select id="realm" name="realm"></select>
-				</fieldset>
+						</div>
-			</form>
+					</fieldset>
-			<p id="status"></p>
+					<fieldset class="fieldset-no-border">
-		</div>
+						<div class="btn-group">
+							<button id="submit">LOGIN</button>
+						</div>
+					</fieldset>
+				</form>
+				<p id="status"></p>
+			</div>
+		</main>
+		<footer><p>&copy; tronnet</p></footer>
 	</body>
 </html>

scripts/dialog.js

@@ -7,6 +7,7 @@ export class Dialog extends HTMLElement {
 		<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/dialog.css" type="text/css">
+		<link rel="stylesheet" href="css/buttons.css" type="text/css">
 		<dialog>
 			<p id="prompt"></p>
 			<hr>
@@ -14,8 +15,8 @@ export class Dialog extends HTMLElement {
 			</form>
 			<hr>
 			<div class="btn-group">
-				<button value="cancel" form="form" class="active" formnovalidate>CANCEL</button>
+				<button value="cancel" form="form" class="cancel" formnovalidate>CANCEL</button>
-				<button value="confirm" form="form">CONFIRM</button>
+				<button value="confirm" form="form" class="accept">CONFIRM</button>
 			</div>
 		</dialog>
 		`;

scripts/index.js

@@ -6,17 +6,6 @@ window.addEventListener("DOMContentLoaded", init);
 async function init () {
 	await populateInstances();
 
-	let instances = document.querySelector("nav #instances");
-	instances.addEventListener("click", () => {
-		goToPage("index.html");
-	});
-
-	let logout = document.querySelector("nav #logout");
-	logout.addEventListener("click", () => {
-		deleteAllCookies();
-		goToPage("login.html");
-	});
-
 	let addInstanceBtn = document.querySelector("#instance-add");
 	addInstanceBtn.addEventListener("click", handleInstanceAdd);
 }

scripts/instance.js

@@ -9,6 +9,7 @@ export class Instance extends HTMLElement {
 		shadowRoot.innerHTML = `
 		<link rel="stylesheet" href="css/style.css" type="text/css">
 		<link rel="stylesheet" href="css/instance.css" type="text/css">
+		<link rel="stylesheet" href="css/buttons.css" type="text/css">
 		<article>
 			<div>
 				<div>
@@ -23,10 +24,10 @@ export class Instance extends HTMLElement {
 			</div>
 			<hr>
 			<div class="btn-group">
-				<img id="power-btn">
+				<img id="power-btn" class="clickable">
-				<img id="console-btn">
+				<img id="console-btn" class="clickable">
-				<img id="configure-btn">
+				<img id="configure-btn" class="clickable">
-				<img id="delete-btn">
+				<img id="delete-btn" class="clickable">
 			</div>
 		</article>
 		`;