move web source files to web/,

move dev configs to config/
2025-02-24 20:36:51 +00:00
parent a80492605d
commit 84cbe0e45d
66 changed files with 18 additions and 28 deletions
--- a/web/css/form.css
+++ b/web/css/form.css
@@ -0,0 +1,80 @@
+.input-grid {
+	display: grid;
+	gap: 5px 10px;
+	align-items: center;
+	width: 100%;
+}
+
+.input-grid * {
+	margin-top: 0;
+	margin-bottom: 0;
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.input-grid input {
+	padding: 8px;
+}
+
+.input-grid svg {
+	padding: 0;
+}
+
+.input-grid .last-item {
+	text-align: right;
+}
+
+legend {
+	float: left;
+	width: 100%;
+	margin: 0;
+	padding: 0;
+	line-height: 1.5em;
+	margin-top: 0.25lh;
+	margin-bottom: 0.25lh;
+}
+
+fieldset {
+	border: 0;
+}
+
+fieldset > *:last-child {
+	margin-bottom: 8px;
+}
+
+fieldset > .input-grid {
+	float: left;
+}
+
+body:not(:-moz-handler-blocked) fieldset {
+	display: table-cell;
+}
+
+input[type="checkbox"] {
+	width: min-content;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+input[type="radio"] {
+	position: inherit;
+}
+
+.w3-select, select {
+	padding: 8px;
+}
+
+.w3-check {
+	top: 0;
+}
+
+/* sibling of input-grid that is not inside another input grid */
+:not(.input-grid) .input-grid + * {
+	display: inline-block;
+	width: 100%;
+	margin-top: 5px;
+}
+
+dialog {
+	max-width: calc(min(50%, 80ch));
+}
--- a/web/css/nav.css
+++ b/web/css/nav.css
@@ -0,0 +1,152 @@
+:root {
+	--nav-transition-speed: 250ms;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root, :root.dark-theme {
+		--nav-bg-color: black;
+		--nav-text-color: white;
+		--nav-header-bg-color: #0f0;
+		--nav-header-text-color: black;
+		--nav-link-active-text-color: white;
+		--nav-link-active-bg-color: var(--main-bg-color, #404040);
+		
+	}
+
+	:root.light-theme {
+		--nav-bg-color: black;
+		--nav-text-color: white;
+		--nav-header-bg-color: #0f0;
+		--nav-header-text-color: black;
+		--nav-link-active-text-color: black;
+		--nav-link-active-bg-color: var(--main-bg-color, white);
+	}
+}
+
+@media screen and (prefers-color-scheme: light) {
+	:root, :root.light-theme {
+		--nav-bg-color: black;
+		--nav-text-color: white;
+		--nav-header-bg-color: #0f0;
+		--nav-header-text-color: black;
+		--nav-link-active-text-color: black;
+		--nav-link-active-bg-color: var(--main-bg-color, white);
+	}
+
+	:root.dark-theme {
+		--nav-bg-color: black;
+		--nav-text-color: white;
+		--nav-header-bg-color: #0f0;
+		--nav-header-text-color: black;
+		--nav-link-active-text-color: white;
+		--nav-link-active-bg-color: var(--main-bg-color, #404040);
+		
+	}
+}
+
+header {
+	display: grid;
+	align-items: center;
+	width: 100%;
+	background-color: var(--nav-bg-color);
+	color: var(--nav-text-color);
+}
+
+header h1 {
+	font-size: 18px;
+	margin: 0;
+	background-color: var(--nav-header-bg-color);
+	color: var(--nav-header-text-color);
+	width: fit-content;
+}
+
+nav {
+	overflow: hidden;
+	font-size: larger;
+	width: fit-content;
+}
+
+nav a, header h1, label[for="navtoggle"] {
+	text-align: left;
+	padding-left: 8px;
+	padding-right: 8px;
+	text-decoration: none;
+	vertical-align: middle;
+	height: 2em;
+	line-height: 2em;
+}
+
+label[for="navtoggle"], #navtoggle {
+	display: none;
+}
+
+@media screen and (width >= 600px){
+	header {
+		grid-template-columns: auto 1fr;
+	}
+
+	nav {
+		display: flex;
+		align-items: center;
+	}
+
+	nav a:hover, nav a[aria-current="page"] {
+		color: var(--nav-link-active-text-color);
+		background-color: var(--nav-link-active-bg-color);
+	}
+	
+	nav:hover a[aria-current="page"] {
+		color: var(--nav-text-color);
+		background-color: var(--nav-bg-color);
+	}
+
+	nav:hover a[aria-current="page"]:hover {
+		color: var(--nav-link-active-text-color);
+		background-color: var(--nav-link-active-bg-color);
+	}
+}
+
+@media screen and (width <= 600px){
+	header {
+		grid-template-columns: 1fr auto;
+	}
+
+	nav {
+		display: block;
+		position: absolute;
+		top: 2em;
+		right: 0;
+		background-color: var(--nav-bg-color);
+	}
+
+	nav a {
+		box-sizing: border-box;
+		display: block;
+		text-align: center;
+		width: 100%;
+	}
+
+	label[for="navtoggle"] { 
+		display: inline-block; 
+	}
+  
+	#navtoggle ~ nav a {
+		height: 0;
+		line-height: 2em;
+		opacity: 0;
+		transition: 
+			height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1), 
+			opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
+		;
+	}
+
+	#navtoggle:checked ~ nav a {
+		height: 2em;
+		line-height: 2em;
+		opacity: 1;
+		transition: 
+			height var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1), 
+			opacity var(--nav-transition-speed) cubic-bezier(0.23, 1, 0.32, 1)
+		;
+	}
+}
--- a/web/css/style.css
+++ b/web/css/style.css
@@ -0,0 +1,176 @@
+:root {
+	--negative-color: #f00;
+	--positive-color: #0f0;
+	--highlight-color: yellow;
+	--lightbg-text-color: black;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root, :root.dark-theme {
+		--main-bg-color: #404040;
+		--main-text-color: white;
+		--main-card-bg-color: #202020;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
+		--main-table-header-bg-color: black;
+		--main-input-bg-color: #404040;
+	}
+
+	:root.light-theme {
+		--main-bg-color: white;
+		--main-text-color: black;
+		--main-card-bg-color: white;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
+		--main-table-header-bg-color: #808080;
+		--main-input-bg-color: white;
+	}
+}
+
+@media screen and (prefers-color-scheme: light) {
+	:root, :root.light-theme {
+		--main-bg-color: white;
+		--main-text-color: black;
+		--main-card-bg-color: white;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
+		--main-table-header-bg-color: #808080;
+		--main-input-bg-color: white;
+	}
+
+	:root.dark-theme {
+		--main-bg-color: #404040;
+		--main-text-color: white;
+		--main-card-bg-color: #202020;
+		--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
+		--main-table-header-bg-color: black;
+		--main-input-bg-color: #404040;
+	}
+}
+
+html {
+	box-sizing: border-box;
+	background-color: var(--main-bg-color);
+}
+
+* {
+	font-family: monospace;
+}
+
+body {
+	min-height: 100vh;
+	max-width: 100vw;
+	display: grid;
+	grid-template-rows: auto 1fr;
+}
+
+main, dialog {
+	max-width: 100vw;
+	background-color: var(--main-bg-color);
+	color: var(--main-text-color);
+}
+
+main {
+	padding: 0 16px 16px;
+}
+
+.w3-card {
+	background-color: var(--main-card-bg-color);
+	box-shadow: var(--main-card-box-shadow);
+}
+
+.w3-card + .w3-card {
+	margin-top: 16px;
+}
+
+th {
+	background-color: var(--main-table-header-bg-color);
+}
+
+td {
+	background-color: var(--main-card-bg-color);
+}
+
+input, select, textarea {
+	background-color: var(--main-input-bg-color);
+	color: var(--main-text-color);
+}
+
+img.clickable, svg.clickable {
+	cursor: pointer;
+}
+
+img, svg {
+	height: 1em;
+	width: 1em;
+	color: var(--main-text-color)
+}
+
+hr, * {
+	border-color: var(--main-text-color);
+}
+
+.flex {
+	display: flex;
+}
+
+.row {
+	flex-direction: row;
+	column-gap: 10px;
+	align-items: center;
+}
+
+.wrap {
+	flex-wrap: wrap;
+	row-gap: 10px;
+}
+
+.nowrap {
+	flex-wrap: nowrap;
+}
+
+.hidden {
+	visibility: hidden;
+}
+
+.none {
+	display: none;
+}
+
+.spacer {
+	min-height: 1em;
+}
+
+@media screen and (width >= 440px) {
+	button .large {
+		display: block;
+	}
+
+	button .small {
+		display: none;
+	}
+}
+
+@media screen and (width <= 440px) {
+	button .large {
+		display: none;
+	}
+
+	button .small {
+		display: block;
+	}
+}
+
+/* add hide large class similar to w3-hide-medium and w3-hide-small */
+@media (width >=993px) {
+	.w3-hide-large {
+		display: none !important;
+	}
+}
+
+/* fix edge case in w3-hide-medium where width between 992 and 993 */
+@media (width <=993px) and (width >=601px){
+	.w3-hide-medium{display:none!important}
+}
+
+/* fix edge case in w3-hide-small when width between 600 and 601 */
+@media (width <=601px) {
+	.w3-hide-small{display:none!important}
+}
--- a/web/html/account.html
+++ b/web/html/account.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{.Organization}} - dashboard</title>
+		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
+		<link rel="stylesheet" href="modules/w3.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/nav.css">
+		<link rel="stylesheet" href="css/form.css">
+		<script src="scripts/account.js" type="module"></script>
+		<script src="modules/chart.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+		<style>
+			@media screen and (width >= 1264px){
+				#resource-container {
+					display: grid;
+					grid-template-columns: repeat(auto-fill, calc(100% / 6));
+					grid-gap: 0;
+					justify-content: space-between;
+				}
+			}
+			@media screen and (width <= 1264px) and (width >= 680px) {
+				#resource-container {
+					display: grid;
+					grid-template-columns: repeat(auto-fill, 200px);
+					grid-gap: 0;
+					justify-content: space-between;
+				}
+			}
+			@media screen and (width <= 680px) {
+				#resource-container {
+					display: flex;
+					flex-direction: column;
+					gap: 0;
+					flex-wrap: nowrap;
+					justify-content: center;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<header>
+			<h1>{{.Organization}}</h1>
+			<label for="navtoggle">&#9776;</label>
+			<input type="checkbox" id="navtoggle">
+			<nav id="navigation">
+				<a href="index.html">Instances</a>
+				<a href="account.html" aria-current="page">Account</a>
+				<a href="settings.html">Settings</a>
+				<a href="login.html">Logout</a>
+			</nav>
+		</header>
+		<main>
+			<h2>Account</h2>
+			<section class="w3-card w3-padding">
+				<h3>Account Details</h3>
+				<p id="username">Username:</p>
+				<p id="pool">Pools:</p>
+				<p id="vmid">VMID Range:</p>
+				<p id="nodes">Nodes:</p>
+			</section>
+			<section class="w3-card w3-padding">
+				<div class="flex row nowrap">
+					<h3>Password</h3>
+					<button class="w3-button w3-margin" id="change-password">Change Password</button>
+				</div>	
+			</section>
+			<section class="w3-card w3-padding">
+				<h3>Cluster Resources</h3>
+				<div id="resource-container"></div>
+			</section>
+		</main>
+	</body>
+</html>
--- a/web/html/index.html
+++ b/web/html/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{.Organization}} - dashboard</title>
+		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
+		<link rel="stylesheet" href="modules/w3.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/nav.css">
+		<link rel="stylesheet" href="css/form.css">
+		<script src="scripts/index.js" type="module"></script>
+		<script src="modules/wfa.js" type="module"></script>
+		<style>
+			#instance-container > div {
+				border-bottom: 1px solid white;
+			}
+			#instance-container > div:last-child {
+				border-bottom: none;
+			}
+			@media screen and (width >= 440px) {
+				#vm-search {
+					max-width: calc(100% - 10px - 152px);
+				}
+			}
+			@media screen and (width <= 440px) {
+				#vm-search {
+					max-width: calc(100% - 10px - 47px);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<header>
+			<h1>{{.Organization}}</h1>
+			<label for="navtoggle">&#9776;</label>
+			<input type="checkbox" id="navtoggle">
+			<nav id="navigation">
+				<a href="index.html" aria-current="page">Instances</a>
+				<a href="account.html">Account</a>
+				<a href="settings.html">Settings</a>
+				<a href="login.html">Logout</a>
+			</nav>
+		</header>
+		<main>
+			<section>
+				<h2>Instances</h2>
+				<div class="w3-card w3-padding">
+					<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
+						<form id="vm-search" role="search" class="flex row nowrap">
+							<svg role="img" aria-label="Search Instances"><use href="images/common/search.svg#symb"></use></svg>
+							<input type="search" id="search" class="w3-input w3-border" style="height: 1lh; max-width: fit-content;" aria-label="search instances by name">
+						</form>
+						<button type="button" id="instance-add" class="w3-button" aria-label="create new instance">
+							<span class="large" style="margin: 0;">Create Instance</span>
+							<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Instance"><use href="images/actions/instance/add.svg#symb"></use></svg>
+						</button>
+					</div>
+					<div>
+						<div class="w3-row w3-hide-small" style="border-bottom: 1px solid;">
+							<p class="w3-col l1 m2 w3-hide-small">ID</p>
+							<p class="w3-col l2 m3 w3-hide-small">Name</p>
+							<p class="w3-col l1 m2 w3-hide-small">Type</p>
+							<p class="w3-col l2 m3 w3-hide-small">Status</p>
+							<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Name</p>
+							<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Status</p>
+							<p class="w3-col l2 m2 w3-hide-small">Actions</p>
+						</div>
+						<div id="instance-container"></div>
+					</div>
+				</div>
+			</section>
+		</main>
+	</body>
+</html>
--- a/web/html/instance.html
+++ b/web/html/instance.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{.Organization}} - dashboard</title>
+		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
+		<link rel="stylesheet" href="modules/w3.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/nav.css">
+		<link rel="stylesheet" href="css/form.css">
+		<script src="scripts/instance.js" type="module"></script>
+		<script src="scripts/draggable.js" type="module"></script>
+		<script src="modules/Sortable.min.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+		<style>
+			.input-grid p, .input-grid div {
+				margin-top: 0;
+				margin-bottom: 0;
+				padding-top: 0;
+				padding-bottom: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<header>
+			<h1>{{.Organization}}</h1>
+			<label for="navtoggle">&#9776;</label>
+			<input type="checkbox" id="navtoggle">
+			<nav id="navigation">
+				<a href="index.html" aria-current="page">Instances</a>
+				<a href="account.html">Account</a>
+				<a href="settings.html">Settings</a>
+				<a href="login.html">Logout</a>
+			</nav>
+		</header>
+		<main>
+			<section>
+				<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
+				<form>
+					<fieldset class="w3-card w3-padding">
+						<legend>Resources</legend>
+						<div class="input-grid" id="resources" style="grid-template-columns: auto auto auto 1fr;"></div>
+					</fieldset>
+					<fieldset class="w3-card w3-padding">
+						<legend>Disks</legend>
+						<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
+						<div class="w3-container w3-center">
+							<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
+								<span class="large" style="margin: 0;">Add Disk</span>
+								<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Disk"><use href="images/actions/disk/add-disk.svg#symb"></use></svg>
+							</button>
+							<button type="button" id="cd-add" class="w3-button none" aria-label="Add New CD">
+								<span class="large" style="margin: 0;">Mount CD</span>
+								<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New CDROM"><use href="images/actions/disk/add-cd.svg#symb"></use></svg>
+							</button>
+						</div>
+					</fieldset>
+					<fieldset class="w3-card w3-padding">
+						<legend>Network Interfaces</legend>
+						<div class="input-grid" id="networks" style="grid-template-columns: auto auto 1fr auto;"></div>
+						<div class="w3-container w3-center">
+							<button type="button" id="network-add" class="w3-button" aria-label="Add New Network Interface">
+								<span class="large" style="margin: 0;">Add Network</span>
+								<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New Network Interface"><use href="images/actions/network/add.svg#symb"></use></svg>
+							</button>
+						</div>
+					</fieldset>
+					<fieldset class="w3-card w3-padding none" id="devices-card">
+						<legend>PCIe Devices</legend>
+						<div class="input-grid" id="devices" style="grid-template-columns: auto auto 1fr auto;"></div>
+						<div class="w3-container w3-center">
+							<button type="button" id="device-add" class="w3-button" aria-label="Add New PCIe Device">
+								<span class="large" style="margin: 0;">Add Device</span>
+								<svg class="small" role="img" style="height: 1lh; width: 1lh;" aria-label="Add New PCIe Device"><use href="images/actions/device/add.svg#symb"></use></svg>
+							</button>
+						</div>
+					</fieldset>
+					<fieldset class="w3-card w3-padding none" id="boot-card">
+						<legend>Boot Order</legend>
+						<draggable-container id="enabled"></draggable-container>
+						<hr style="padding: 0; margin: 0;">
+						<draggable-container id="disabled"></draggable-container>
+					</fieldset>
+					<div class="w3-container w3-center" id="form-actions">
+						<button class="w3-button w3-margin" id="exit" type="button">EXIT</button>
+					</div>
+				</form>
+			</section>
+		</main>
+	</body>
+</html>
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{.Organization}} - dashboard</title>
+		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
+		<link rel="stylesheet" href="modules/w3.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/nav.css">
+		<link rel="stylesheet" href="css/form.css">
+		<script src="scripts/login.js" type="module"></script>
+	</head>
+	<body>
+		<header>
+			<h1>{{.Organization}}</h1>
+			<label for="navtoggle">&#9776;</label>
+			<input type="checkbox" id="navtoggle">
+			<nav id="navigation">
+				<a href="login.html" aria-current="page">Login</a>
+			</nav>
+		</header>
+		<main class="flex" style="justify-content: center; align-items: center;">
+			<div class="w3-container w3-card w3-margin w3-padding" style="height: fit-content;">
+				<h2 class="w3-center">{{.Organization}} Login</h2>
+				<form>
+					<label for="username"><b>Username</b></label>
+					<input class="w3-input w3-border" id="username" name="username" type="text" autocomplete="username">
+					<label for="password"><b>Password</b></label>
+					<input class="w3-input w3-border" id="password" name="password" type="password" autocomplete="current-password">
+					<label 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>
+				</form>
+			</div>
+		</main>
+	</body>
+</html>
--- a/web/html/settings.html
+++ b/web/html/settings.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>{{.Organization}} - dashboard</title>
+		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
+		<link rel="stylesheet" href="modules/w3.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/nav.css">
+		<link rel="stylesheet" href="css/form.css">
+		<script src="scripts/settings.js" type="module"></script>
+		<style>
+			legend {
+				margin-bottom: 25px;
+			}
+			label {
+				display: flex;
+				height: fit-content;
+				width: 100%;
+				align-items: center;
+				justify-content: left;
+				column-gap: 10px;
+			}
+			label + p {
+				margin-top: 5px;
+				margin-bottom: 25px;
+			}
+			p:last-child {
+				margin-bottom: 0px;
+			}
+		</style>
+	</head>
+	<body>
+		<header>
+			<h1>{{.Organization}}</h1>
+			<label for="navtoggle">&#9776;</label>
+			<input type="checkbox" id="navtoggle">
+			<nav id="navigation">
+				<a href="index.html">Instances</a>
+				<a href="account.html">Account</a>
+				<a href="settings.html" aria-current="page">Settings</a>
+				<a href="login.html">Logout</a>
+			</nav>
+		</header>
+		<main>
+			<h2>Settings</h2>
+			<form id = "settings">
+				<section class="w3-card w3-padding">
+					<h3>Synchronization Settings</h3>
+					<fieldset>
+						<legend>App Sync Method</legend>
+						<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required>Always Sync</label>
+						<p>App will always periodically synchronize with Proxmox. High resource usage.</p>
+						<label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label>
+						<p>App will periodically check for updates and synchronize only if needed. Medium resource usage.</p>
+						<label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label>
+						<p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
+					</fieldset>
+					<fieldset>
+						<legend>App Sync Frequency</legend>
+						<div class="input-grid" style="grid-template-columns: auto auto 1fr;">
+							<p>Sync every</p><input aria-label="sync rate in seconds" class="w3-input w3-border" type="number" id="sync-rate" name="sync-rate" min="1" required><p>Second(s)</p>
+						</div>
+					</fieldset>
+				</section>
+				<section class="w3-card w3-padding">
+					<h3>Search Settings</h3>
+					<fieldset>
+						<legend>Instance Search Criteria</legend>
+						<label><input class="w3-radio" type="radio" id="search-exact" name="search-criteria" value="exact" required>Exact Match</label>
+						<p>Sorts by exact query match in instance name.</p>
+						<label><input class="w3-radio" type="radio" id="search-fuzzy" name="search-criteria" value="fuzzy" required>Fuzzy Match</label>
+						<p>Sorts by best matching to worst matching.</p>
+					</fieldset>
+				</section>
+				<section class="w3-card w3-padding">
+					<h3>Appearance</h3>
+					<fieldset>
+						<legend>Default Theme</legend>
+						<label>Theme<select class="w3-select w3-border" id="appearance-theme" name="appearance-theme" style="width: fit-content; padding-right: 24px;">
+								<option value="auto">Auto</option>
+								<option value="dark">Dark</option>
+								<option value="light">Light</option>
+							</select>
+						</label>
+					</fieldset>
+				</section>
+				<div class="w3-container w3-center" id="form-actions">
+					<button class="w3-button w3-margin" id="save" type="submit">SAVE</button>
+				</div>
+			</form>
+		</main>
+	</body>
+</html>
--- a/web/images/actions/delete-active.svg
+++ b/web/images/actions/delete-active.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="delete" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/actions/delete-inactive.svg
+++ b/web/images/actions/delete-inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#ffbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/actions/device/add.svg
+++ b/web/images/actions/device/add.svg
@@ -0,0 +1 @@
+../../common/add.svg
--- a/web/images/actions/device/config.svg
+++ b/web/images/actions/device/config.svg
@@ -0,0 +1 @@
+../../common/config.svg
--- a/web/images/actions/disk/add-cd.svg
+++ b/web/images/actions/disk/add-cd.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="add cd" viewBox="2.3 2.3 19.4 19.4" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" stroke-width="1.25"><path d="M7 12h5m0 0h5m-5 0V7m0 5v5"/><circle cx="12" cy="12" r="9"/></g></svg>
--- a/web/images/actions/disk/add-disk.svg
+++ b/web/images/actions/disk/add-disk.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="create disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M25 0H7a7 7 0 00-7 7v18a7 7 0 007 7h18a7 7 0 007-7V7a7 7 0 00-7-7zm5 25a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5h18a5 5 0 015 5z"/><path d="M17 6h-2v9H6v2h9v9h2v-9h9v-2h-9V6z"/></g></svg>
--- a/web/images/actions/disk/attach.svg
+++ b/web/images/actions/disk/attach.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="attach disk" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="#0f0"><path d="M17 12h-2.85a6.25 6.25 0 00-6.21 5H2v2h5.93a6.22 6.22 0 006.22 5H17z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-1"/><path d="M28.23 17A6.25 6.25 0 0022 12h-3v12h3a6.22 6.22 0 006.22-5H34v-2z" class="prefix__prefix__clr-i-solid prefix__prefix__clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></g></svg>
--- a/web/images/actions/disk/detach.svg
+++ b/web/images/actions/disk/detach.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="detach disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="red" d="M76.987 235.517H0v40.973h76.987c9.04 33.686 39.694 58.522 76.238 58.522h57.062V176.988h-57.062c-36.543 0-67.206 24.836-76.238 58.529zm435.013 0h-76.995c-9.032-33.693-39.686-58.53-76.23-58.53h-57.062v158.024h57.062c36.537 0 67.19-24.836 76.23-58.522H512v-40.972z"/></svg>
--- a/web/images/actions/disk/detach_attach-inactive.svg
+++ b/web/images/actions/disk/detach_attach-inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg"/>
--- a/web/images/actions/disk/move-active.svg
+++ b/web/images/actions/disk/move-active.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="move disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/actions/disk/move-inactive.svg
+++ b/web/images/actions/disk/move-inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/actions/disk/resize-active.svg
+++ b/web/images/actions/disk/resize-active.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="resize disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
--- a/web/images/actions/disk/resize-inactive.svg
+++ b/web/images/actions/disk/resize-inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="gray"/></svg>
--- a/web/images/actions/drag.svg
+++ b/web/images/actions/drag.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="drag" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M5 10h14m-5 9l-2 2-2-2m4-14l-2-2-2 2m-5 9h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/actions/group/add.svg
+++ b/web/images/actions/group/add.svg
@@ -0,0 +1 @@
+../../common/add.svg
--- a/web/images/actions/group/config.svg
+++ b/web/images/actions/group/config.svg
@@ -0,0 +1 @@
+../../common/config.svg
--- a/web/images/actions/instance/add.svg
+++ b/web/images/actions/instance/add.svg
@@ -0,0 +1 @@
+../../common/add.svg
--- a/web/images/actions/instance/config-active.svg
+++ b/web/images/actions/instance/config-active.svg
@@ -0,0 +1 @@
+../../common/config.svg
--- a/web/images/actions/instance/config-inactive.svg
+++ b/web/images/actions/instance/config-inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="#808080"/></svg>
--- a/web/images/actions/instance/console-active.svg
+++ b/web/images/actions/instance/console-active.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="instance console" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="currentColor"/></svg>
--- a/web/images/actions/instance/console-inactive.svg
+++ b/web/images/actions/instance/console-inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="#808080"/></svg>
--- a/web/images/actions/instance/start.svg
+++ b/web/images/actions/instance/start.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="start instance" xmlns="http://www.w3.org/2000/svg" viewBox="2.8 2.4 12 12"><path d="M4.25 3l1.166-.624 8 5.333v1.248l-8 5.334-1.166-.624V3zm1.5 1.401v7.864l5.898-3.932L5.75 4.401z" fill="#0f0"/></svg>
--- a/web/images/actions/instance/stop.svg
+++ b/web/images/actions/instance/stop.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="stop instance" xmlns="http://www.w3.org/2000/svg" viewBox="-25 -25 380 380"><path stroke-width="20" d="M315 0H15C6.716 0 0 6.716 0 15v300c0 8.284 6.716 15 15 15h300c8.284 0 15-6.716 15-15V15c0-8.284-6.716-15-15-15zm-15 300H30V30h270v270z" stroke="#f00" fill="#f00"/></svg>
--- a/web/images/actions/network/add.svg
+++ b/web/images/actions/network/add.svg
@@ -0,0 +1 @@
+../../common/add.svg
--- a/web/images/actions/network/config.svg
+++ b/web/images/actions/network/config.svg
@@ -0,0 +1 @@
+../../common/config.svg
--- a/web/images/actions/user/add.svg
+++ b/web/images/actions/user/add.svg
@@ -0,0 +1 @@
+../../common/add.svg
--- a/web/images/actions/user/config.svg
+++ b/web/images/actions/user/config.svg
@@ -0,0 +1 @@
+../../common/config.svg
--- a/web/images/common/add.svg
+++ b/web/images/common/add.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="add device" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>
--- a/web/images/common/config.svg
+++ b/web/images/common/config.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="config device" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>
--- a/web/images/common/search.svg
+++ b/web/images/common/search.svg
@@ -0,0 +1 @@
+<svg role="img" aria-label="search" id="symb" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M15.796 15.811L21 21m-3-10.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/favicon.svg
+++ b/web/images/favicon.svg
@@ -0,0 +1 @@
+<svg id="symb" xmlns="http://www.w3.org/2000/svg"><g fill="#0f0" font-family="monospace" font-weight="bold"><text y="14" font-size="16">H</text><text x="9" y="8" font-size="10">0</text></g></svg>
--- a/web/images/resources/cpu.svg
+++ b/web/images/resources/cpu.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="cpu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M14.25 8h-4.5A1.752 1.752 0 008 9.75v4.5A1.752 1.752 0 009.75 16h4.5A1.752 1.752 0 0016 14.25v-4.5A1.752 1.752 0 0014.25 8zM14 14h-4v-4h4zm8-5a1 1 0 000-2h-2v-.25A2.752 2.752 0 0017.25 4H17V2a1 1 0 00-2 0v2h-2V2a1 1 0 00-2 0v2H9V2a1 1 0 00-2 0v2h-.25A2.752 2.752 0 004 6.75V7H2a1 1 0 000 2h2v2H2a1 1 0 000 2h2v2H2a1 1 0 000 2h2v.25A2.752 2.752 0 006.75 20H7v2a1 1 0 002 0v-2h2v2a1 1 0 002 0v-2h2v2a1 1 0 002 0v-2h.25A2.752 2.752 0 0020 17.25V17h2a1 1 0 000-2h-2v-2h2a1 1 0 000-2h-2V9zm-4 8.25a.751.751 0 01-.75.75H6.75a.751.751 0 01-.75-.75V6.75A.751.751 0 016.75 6h10.5a.751.751 0 01.75.75z" fill="currentColor"/></svg>
--- a/web/images/resources/device.svg
+++ b/web/images/resources/device.svg
@@ -0,0 +1 @@
+<svg role="img" aria-label="pci device" id="symb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" fill="currentColor"><path d="M480.003 128H48c0-22.056-17.944-40-40-40a8 8 0 000 16c13.234 0 24 10.766 24 24v288a8 8 0 0016 0v-8h16.01C77.238 408 88 397.238 88 384.01V384h392.003C497.646 384 512 369.646 512 352.003V159.997C512 142.354 497.646 128 480.003 128zM496 352.003c0 8.821-7.176 15.997-15.997 15.997H80a8 8 0 00-8 8v8.01c0 4.406-3.584 7.99-7.99 7.99H48V144h432.003c8.821 0 15.997 7.176 15.997 15.997v192.006z"/><path d="M240 192c-22.922 0-43.057 12.12-54.363 30.28a8.026 8.026 0 00-1.737 2.954A63.601 63.601 0 00176 256a63.583 63.583 0 008.264 31.399c.187.398.407.778.656 1.14C196.078 307.354 216.586 320 240 320c35.29 0 64-28.71 64-64a63.583 63.583 0 00-8.264-31.399 8.057 8.057 0 00-.656-1.14C283.922 204.646 263.414 192 240 192zm-48 64c0-4.395.605-8.648 1.717-12.695 3.596 3.178 8.453 6.73 15.035 10.53 6.376 3.681 11.742 6.078 16.208 7.612-2.622 2.061-5.987 4.385-10.208 6.821-8.449 4.878-14.816 7.039-18.36 7.752A47.681 47.681 0 01192 256zm96 0c0 4.103-.52 8.087-1.493 11.891-3.617-3.227-8.542-6.848-15.259-10.726-5.96-3.441-11.036-5.758-15.321-7.298 2.483-1.885 5.564-3.966 9.321-6.135 8.447-4.876 14.816-7.039 18.36-7.752A47.681 47.681 0 01288 256zm-14.052-33.901c-4.562 1.524-10.087 3.96-16.699 7.777-6.252 3.61-10.952 6.997-14.49 10.051-.449-3.245-.759-7.21-.759-11.927 0-9.763 1.314-16.361 2.469-19.785 11.465 1.064 21.775 6.169 29.479 13.884zm-46.329-12.472C226.655 214.344 226 220.354 226 228c0 7.056.557 12.721 1.401 17.26-3.022-1.232-6.59-2.938-10.65-5.282-8.302-4.793-13.33-9.159-15.769-11.883 6.394-8.915 15.757-15.56 26.637-18.468zm-21.57 80.271c4.564-1.524 10.086-3.954 16.702-7.774 6.252-3.61 10.952-6.997 14.49-10.051.449 3.245.759 7.21.759 11.927 0 9.763-1.314 16.361-2.469 19.785-11.466-1.064-21.778-6.17-29.482-13.887zm46.332 12.475C253.345 297.656 254 291.646 254 284c0-7.633-.653-13.635-1.614-18.347 3.066 1.237 6.708 2.97 10.863 5.368 8.764 5.06 13.892 9.652 16.163 12.33-6.4 9.195-15.926 16.054-27.031 19.022z"/><path d="M440 168a8 8 0 000 16c8.822 0 16 7.178 16 16v112c0 8.822-7.178 16-16 16H240c-39.701 0-72-32.299-72-72s32.299-72 72-72h168a8 8 0 000-16H240c-48.523 0-88 39.477-88 88s39.477 88 88 88h200c17.645 0 32-14.355 32-32V200c0-17.645-14.355-32-32-32zm-328 64H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24-88H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88zm24 80H88c-8.822 0-16 7.178-16 16v16c0 8.822 7.178 16 16 16h24c8.822 0 16-7.178 16-16v-16c0-8.822-7.178-16-16-16zm-24 32v-16h24l.001 16H88z"/><path d="M432 200h-24a8 8 0 000 16h24a8 8 0 000-16zm0 96h-24a8 8 0 000 16h24a8 8 0 000-16zm0-72h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16zm0 24h-24a8 8 0 000 16h24a8 8 0 000-16z"/></g></svg>
--- a/web/images/resources/disk.svg
+++ b/web/images/resources/disk.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="cd" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M12 0a12 12 0 1012 12A12 12 0 0012 0zm0 22a10 10 0 1110-10 10 10 0 01-10 10z"/><path d="M12 8a4 4 0 104 4 4 4 0 00-4-4zm0 6a2 2 0 111.73-3A2 2 0 0112 14z"/><path d="M12 18a6 6 0 01-6-6 1 1 0 00-2 0 8 8 0 008 8 1 1 0 000-2zm0-14a1 1 0 000 2 6 6 0 016 6 1 1 0 001 1c2.57 0 .27-9-7-9z"/></g></svg>
--- a/web/images/resources/drive.svg
+++ b/web/images/resources/drive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h0m4 0h0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
--- a/web/images/resources/network.svg
+++ b/web/images/resources/network.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="network" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M9 7V5H7v2H5v4h6V7H9zm-9 9h16V0H0v16zm2-2V2h12v12H2z" fill="currentColor" fill-rule="evenodd"/></svg>
--- a/web/images/resources/ram.svg
+++ b/web/images/resources/ram.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="memory" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M23 9a1 1 0 001-1V5a1 1 0 00-1-1H1a1 1 0 00-1 1v3a1 1 0 001 1 1 1 0 010 2 1 1 0 00-1 1v7a1 1 0 001 1h13a1 1 0 001-1v-3h2v3a1 1 0 001 1h5a1 1 0 001-1v-7a1 1 0 00-1-1 1 1 0 010-2zM2 16h3v2H2zm7 0v2H7v-2zm4 2h-2v-2h2zm6 0v-2h3v2zm3-10.83a3 3 0 000 5.66V14H2v-1.17a3 3 0 000-5.66V6h20z"/><path d="M9 11V9a1 1 0 00-2 0v2a1 1 0 002 0zm4 0V9a1 1 0 00-2 0v2a1 1 0 002 0zm4 0V9a1 1 0 00-2 0v2a1 1 0 002 0z"/></g></svg>
--- a/web/images/resources/swap.svg
+++ b/web/images/resources/swap.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="swap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M19.841 3.24A10.988 10.988 0 008.54.573l1.266 3.8a7.033 7.033 0 018.809 9.158L17 11.891v7.092h7l-2.407-2.439A11.049 11.049 0 0019.841 3.24zM1 10.942a11.05 11.05 0 0011.013 11.044 11.114 11.114 0 003.521-.575l-1.266-3.8a7.035 7.035 0 01-8.788-9.22L7 9.891V6.034c.021-.02.038-.044.06-.065L7 5.909V2.982H0l2.482 2.449A10.951 10.951 0 001 10.942z" fill="currentColor"/></svg>
--- a/web/images/status/active.svg
+++ b/web/images/status/active.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="active" fill="#0f0" viewBox="0 0 16 16" stroke="#none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
--- a/web/images/status/inactive.svg
+++ b/web/images/status/inactive.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="inactive" fill="#f00" viewBox="0 0 16 16" stroke="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
--- a/web/images/status/loading.svg
+++ b/web/images/status/loading.svg
@@ -0,0 +1 @@
+<svg id="symb" role="img" aria-label="loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 204.481 204.481"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M162.116 38.31a7.43 7.43 0 00.454-.67c.033-.055.068-.109.1-.164a7.72 7.72 0 00.419-.857c.014-.034.024-.069.038-.104a7.492 7.492 0 00.314-1.008c.068-.288.124-.581.157-.881l.008-.052a7.48 7.48 0 00.043-.796V7.5a7.5 7.5 0 00-7.5-7.5H48.332a7.5 7.5 0 00-7.5 7.5v26.279c0 .269.016.534.043.796l.008.052c.034.3.089.593.157.881.016.069.035.138.053.207.073.273.159.541.261.801.013.034.024.069.038.104.121.296.262.581.419.857.032.056.067.109.1.164.14.232.291.455.454.67.027.035.047.074.074.109l50.255 63.821-50.255 63.821c-.028.035-.047.074-.074.109a7.43 7.43 0 00-.454.67c-.033.055-.068.109-.1.164a7.72 7.72 0 00-.419.857c-.014.034-.024.069-.038.104a7.492 7.492 0 00-.314 1.008 7.308 7.308 0 00-.157.881l-.008.052a7.48 7.48 0 00-.043.796v26.279a7.5 7.5 0 007.5 7.5h107.817a7.5 7.5 0 007.5-7.5v-26.279c0-.269-.016-.534-.043-.796l-.008-.052a7.51 7.51 0 00-.157-.881c-.016-.069-.035-.138-.053-.207a7.492 7.492 0 00-.261-.801c-.013-.034-.024-.069-.038-.104a7.383 7.383 0 00-.419-.857c-.032-.056-.067-.109-.1-.164a7.646 7.646 0 00-.454-.67c-.027-.035-.047-.074-.074-.109l-50.255-63.821 50.255-63.821c.028-.035.047-.074.074-.11zM148.649 15v11.279H55.832V15h92.817zM55.832 189.481v-11.279h92.817v11.279H55.832zm84.866-26.279H63.784l38.457-48.838 38.457 48.838zm-38.457-73.084L63.784 41.279h76.914l-38.457 48.839z" fill="currentColor"/></svg>
--- a/web/modules/Sortable.min.js
+++ b/web/modules/Sortable.min.js
--- a/web/modules/chart.js
+++ b/web/modules/chart.js
--- a/web/modules/w3.css
+++ b/web/modules/w3.css
@@ -0,0 +1,235 @@
+/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
+audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
+audio:not([controls]){display:none;height:0}[hidden],template{display:none}
+a{background-color:transparent}a:active,a:hover{outline-width:0}
+abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
+small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
+code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
+button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
+button,input{overflow:visible}button,select{text-transform:none}
+button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
+legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
+[type=checkbox],[type=radio]{padding:0}
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
+[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
+[type=search]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+/* End extract */
+html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
+h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
+.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
+h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
+hr{border:0;border-top:1px solid #eee;margin:20px 0}
+.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
+.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
+.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
+.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
+.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
+.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
+.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
+.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
+.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
+.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
+.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
+.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
+.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
+.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
+.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
+.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
+.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
+.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
+.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
+.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
+.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
+.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
+.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
+.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
+.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
+.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
+.w3-main,#main{transition:margin-left .4s}
+.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
+.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
+.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
+.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
+.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
+.w3-bar .w3-button{white-space:normal}
+.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
+.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
+.w3-responsive{display:block;overflow-x:auto}
+.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
+.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
+.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
+.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
+.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
+.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
+@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
+.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
+.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
+@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
+.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
+.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
+.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
+.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
+.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
+.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
+.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
+@media (max-width:1205px){.w3-auto{max-width:95%}}
+@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
+.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
+.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
+.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
+@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
+@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
+@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
+@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
+.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
+.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
+.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
+.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
+.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
+.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
+.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
+.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
+.w3-display-position{position:absolute}
+.w3-circle{border-radius:50%}
+.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
+.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
+.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
+.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
+.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
+.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
+.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
+.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
+.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
+.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
+.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
+.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
+.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
+.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
+.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
+.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
+.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
+.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
+.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
+.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
+.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
+.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
+.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
+.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
+.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
+.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
+.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
+.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
+.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
+.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
+.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
+.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
+.w3-left{float:left!important}.w3-right{float:right!important}
+.w3-button:hover{color:#000!important;background-color:#ccc!important}
+.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
+.w3-hover-none:hover{box-shadow:none!important}
+/* Colors */
+.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
+.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
+.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
+.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
+.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
+.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
+.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
+.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
+.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
+.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
+.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
+.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
+.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
+.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
+.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
+.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
+.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
+.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
+.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
+.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
+.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
+.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
+.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
+.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
+.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
+.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
+.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
+.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
+.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
+.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
+.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
+.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
+.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
+.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
+.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
+.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
+.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
+.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
+.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
+.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
+.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
+.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
+.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
+.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
+.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
+.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
+.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
+.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
+.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
+.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
+.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
+.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
+.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
+.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
+.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
+.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
+.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
+.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
+.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
+.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
+.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
+.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
+.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
+.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
+.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
+.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
+.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
+.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
+.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
+.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
+.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
+.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
+.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
+.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
+.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
+.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
+.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
+.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
+.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
+.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
+.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
+.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
--- a/web/modules/wfa.js
+++ b/web/modules/wfa.js
--- a/web/modules/wfa.wasm
+++ b/web/modules/wfa.wasm
--- a/web/scripts/account.js
+++ b/web/scripts/account.js
@@ -0,0 +1,266 @@
+import { dialog } from "./dialog.js";
+import { requestAPI, goToPage, getCookie, setAppearance } from "./utils.js";
+
+class ResourceChart extends HTMLElement {
+	constructor () {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
+			<style>
+				* {
+					box-sizing: border-box;
+					font-family: monospace;
+				}
+				figure {
+					margin: 0;
+				}
+				div {
+					max-width: 400px;
+					aspect-ratio: 1 / 1;
+				}
+				figcaption {
+					text-align: center;
+					margin-top: 10px;
+					display: flex;
+					flex-direction: column;
+				}
+			</style>
+			<style id="responsive-style" media="not all">
+				figure {
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+					flex-wrap: nowrap;
+					justify-content: flex-start;
+				}
+				div {
+					max-height: 1lh;
+				}
+				figcaption {
+					margin: 0;
+					margin-left: 10px;
+					display: flex;
+					flex-direction: row;
+					gap: 1ch;
+					font-size: small;
+				}
+			</style>
+			<figure>
+				<div>
+					<canvas></canvas>
+				</div>
+				<figcaption></figcaption>
+			</figure>
+		`;
+		this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
+		this.canvas = this.shadowRoot.querySelector("canvas");
+		this.caption = this.shadowRoot.querySelector("figcaption");
+	}
+
+	set data (data) {
+		for (const line of data.title) {
+			this.caption.innerHTML += `<span>${line}</span>`;
+		}
+
+		this.canvas.role = "img";
+		this.canvas.ariaLabel = data.ariaLabel;
+
+		const chartData = {
+			type: "pie",
+			data: data.data,
+			options: {
+				plugins: {
+					title: {
+						display: false
+					},
+					legend: {
+						display: false
+					},
+					tooltip: {
+						enabled: true
+					}
+				},
+				interaction: {
+					mode: "nearest"
+				},
+				onHover: function (e, activeElements) {
+					if (window.innerWidth <= data.breakpoint) {
+						updateTooltipShow(e.chart, false);
+					}
+					else {
+						updateTooltipShow(e.chart, true);
+					}
+				}
+			}
+		};
+
+		this.chart = new window.Chart(this.canvas, chartData);
+
+		if (data.breakpoint) {
+			this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
+		}
+		else {
+			this.responsiveStyle.media = "not all";
+		}
+	}
+
+	get data () {
+		return null;
+	}
+}
+
+// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options
+function updateTooltipShow (chart, enabled) {
+	chart.options.plugins.tooltip.enabled = enabled;
+	chart.options.interaction.mode = enabled ? "nearest" : null;
+	chart.update();
+}
+
+customElements.define("resource-chart", ResourceChart);
+
+window.addEventListener("DOMContentLoaded", init);
+
+const prefixes = {
+	1024: [
+		"",
+		"Ki",
+		"Mi",
+		"Gi",
+		"Ti"
+	],
+	1000: [
+		"",
+		"K",
+		"M",
+		"G",
+		"T"
+	]
+};
+
+async function init () {
+	setAppearance();
+	const cookie = document.cookie;
+	if (cookie === "") {
+		goToPage("login.html");
+	}
+
+	let resources = requestAPI("/user/dynamic/resources");
+	let meta = requestAPI("/global/config/resources");
+	let userCluster = requestAPI("/user/config/cluster");
+
+	resources = await resources;
+	meta = (await meta).resources;
+	userCluster = await userCluster;
+
+	document.querySelector("#username").innerText = `Username: ${getCookie("username")}`;
+	document.querySelector("#pool").innerText = `Pools: ${Object.keys(userCluster.pools).toString()}`;
+	document.querySelector("#vmid").innerText = `VMID Range: ${userCluster.vmid.min} - ${userCluster.vmid.max}`;
+	document.querySelector("#nodes").innerText = `Nodes: ${Object.keys(userCluster.nodes).toString()}`;
+
+	populateResources("#resource-container", meta, resources);
+
+	document.querySelector("#change-password").addEventListener("click", handlePasswordChangeForm);
+}
+
+function populateResources (containerID, meta, resources) {
+	if (resources instanceof Object) {
+		const container = document.querySelector(containerID);
+		Object.keys(meta).forEach((resourceType) => {
+			if (meta[resourceType].display) {
+				if (meta[resourceType].type === "list") {
+					resources[resourceType].total.forEach((listResource) => {
+						createResourceUsageChart(container, listResource.name, listResource.avail, listResource.used, listResource.max, null);
+					});
+				}
+				else {
+					createResourceUsageChart(container, meta[resourceType].name, resources[resourceType].total.avail, resources[resourceType].total.used, resources[resourceType].total.max, meta[resourceType]);
+				}
+			}
+		});
+	}
+}
+
+function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
+	const chart = document.createElement("resource-chart");
+	container.append(chart);
+	const maxStr = parseNumber(resourceMax, resourceUnitData);
+	const usedStr = parseNumber(resourceUsed, resourceUnitData);
+	const usedRatio = resourceUsed / resourceMax;
+	const R = Math.min(usedRatio * 510, 255);
+	const G = Math.min((1 - usedRatio) * 510, 255);
+	const usedColor = `rgb(${R}, ${G}, 0)`;
+	chart.data = {
+		title: [resourceName, `Used ${usedStr} of ${maxStr}`],
+		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`,
+		data: {
+			labels: [
+				"Used",
+				"Available"
+			],
+			datasets: [{
+				label: resourceName,
+				data: [resourceUsed, resourceAvail],
+				backgroundColor: [
+					usedColor,
+					"rgb(140, 140, 140)"
+				],
+				borderWidth: 0,
+				hoverOffset: 4
+			}]
+		},
+		breakpoint: 680
+	};
+	chart.style = "margin: 10px;";
+}
+
+function parseNumber (value, unitData) {
+	if (!unitData) {
+		return `${value}`;
+	}
+	const compact = unitData.compact;
+	const multiplier = unitData.multiplier;
+	const base = unitData.base;
+	const unit = unitData.unit;
+	value = multiplier * value;
+	if (value <= 0) {
+		return `0 ${unit}`;
+	}
+	else if (compact) {
+		const exponent = Math.floor(Math.log(value) / Math.log(base));
+		value = value / base ** exponent;
+		const unitPrefix = prefixes[base][exponent];
+		return `${value} ${unitPrefix}${unit}`;
+	}
+	else {
+		return `${value} ${unit}`;
+	}
+}
+
+function handlePasswordChangeForm () {
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+		<label for="new-password">New Password</label>
+		<input class="w3-input w3-border" id="new-password" name="new-password" type="password"required>
+		<label for="confirm-password">Confirm Password</label>
+		<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" required>
+		</form>
+	`;
+	const d = dialog("Change Password", body, async (result, form) => {
+		if (result === "confirm") {
+			const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
+			if (result.status !== 200) {
+				alert(`Attempted to change password but got: ${result.error}`);
+			}
+		}
+	});
+
+	const password = d.querySelector("#new-password");
+	const confirmPassword = d.querySelector("#confirm-password");
+
+	function validatePassword () {
+		confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
+	}
+
+	password.addEventListener("change", validatePassword);
+	confirmPassword.addEventListener("keyup", validatePassword);
+}
--- a/web/scripts/clientsync.js
+++ b/web/scripts/clientsync.js
@@ -0,0 +1,43 @@
+import { getSyncSettings, requestAPI } from "./utils.js";
+import { API } from "../vars.js";
+
+export async function setupClientSync (callback) {
+	const { scheme, rate } = getSyncSettings();
+
+	if (scheme === "always") {
+		callback();
+		window.setInterval(callback, rate * 1000);
+	}
+	else if (scheme === "hash") {
+		const newHash = (await requestAPI("/sync/hash")).data;
+		localStorage.setItem("sync-current-hash", newHash);
+		callback();
+		window.setInterval(async () => {
+			const newHash = (await requestAPI("/sync/hash")).data;
+			if (localStorage.getItem("sync-current-hash") !== newHash) {
+				localStorage.setItem("sync-current-hash", newHash);
+				callback();
+			}
+		}, rate * 1000);
+	}
+	else if (scheme === "interrupt") {
+		callback();
+		const socket = new WebSocket(`wss://${API.replace("https://", "")}/sync/interrupt`);
+		socket.addEventListener("open", (event) => {
+			socket.send(`rate ${rate}`);
+		});
+		socket.addEventListener("message", (event) => {
+			const message = event.data.toString();
+			if (message === "sync") {
+				callback();
+			}
+			else {
+				console.error("clientsync: recieved unexpected message from server, closing socket.");
+				socket.close();
+			}
+		});
+	}
+	else {
+		console.error(`clientsync: unsupported scheme ${scheme} selected.`);
+	}
+}
--- a/web/scripts/dialog.js
+++ b/web/scripts/dialog.js
@@ -0,0 +1,55 @@
+export function dialog (header, body, onclose = async (result, form) => { }) {
+	const dialog = document.createElement("dialog");
+	dialog.innerHTML = `
+		<p class="w3-large" id="prompt" style="text-align: center;"></p>
+		<div id="body"></div>
+		<div class="w3-center w3-container">
+			<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
+			<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
+		</div>
+	`;
+	dialog.className = "w3-container w3-card w3-border-0";
+	dialog.querySelector("#prompt").innerText = header;
+	dialog.querySelector("#body").innerHTML = body;
+	dialog.addEventListener("close", async () => {
+		const formElem = dialog.querySelector("form");
+		const formData = formElem ? new FormData(formElem) : null;
+		await onclose(dialog.returnValue, formData);
+		dialog.parentElement.removeChild(dialog);
+	});
+	if (!dialog.querySelector("form")) {
+		dialog.querySelector("#confirm").addEventListener("click", async (e) => {
+			e.preventDefault();
+			dialog.close(e.target.value);
+		});
+		dialog.querySelector("#cancel").addEventListener("click", async (e) => {
+			e.preventDefault();
+			dialog.close(e.target.value);
+		});
+	}
+	document.body.append(dialog);
+	dialog.showModal();
+	return dialog;
+}
+
+export function alert (message) {
+	const dialog = document.createElement("dialog");
+	dialog.innerHTML = `
+		<form method="dialog">
+			<p class="w3-center" style="margin-bottom: 0px;">${message}</p>
+			<div class="w3-center">
+				<button class="w3-button w3-margin" id="submit">OK</button>
+			</div>
+		</form>
+	`;
+	dialog.className = "w3-container w3-card w3-border-0";
+
+	document.body.append(dialog);
+	dialog.showModal();
+
+	dialog.addEventListener("close", () => {
+		dialog.parentElement.removeChild(dialog);
+	});
+
+	return dialog;
+}
--- a/web/scripts/draggable.js
+++ b/web/scripts/draggable.js
@@ -0,0 +1,118 @@
+const blank = document.createElement("img");
+
+class DraggableContainer extends HTMLElement {
+	constructor () {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
+			<style>
+				draggable-item.ghost::part(wrapper) {
+					border: 1px dashed var(--main-text-color);
+					border-radius: 5px;
+					margin: -1px;
+				}
+				draggable-item::part(wrapper) {
+					cursor: grab;
+				}
+			</style>
+			<label id="title"></label>
+			<div id="wrapper" style="padding-bottom: 1em;"></div>
+		`;
+		this.content = this.shadowRoot.querySelector("#wrapper");
+		this.titleElem = this.shadowRoot.querySelector("#title");
+
+		window.Sortable.create(this.content, {
+			group: "boot",
+			ghostClass: "ghost",
+			setData: function (dataTransfer, dragEl) {
+				dataTransfer.setDragImage(blank, 0, 0);
+			}
+		});
+	}
+
+	get title () {
+		return this.titleElem.innerText;
+	}
+
+	set title (title) {
+		this.titleElem.innerText = title;
+	}
+
+	append (newNode) {
+		this.content.appendChild(newNode, this.bottom);
+	}
+
+	insertBefore (newNode, referenceNode) {
+		this.content.insertBefore(newNode, referenceNode);
+	}
+
+	querySelector (query) {
+		return this.content.querySelector(query);
+	}
+
+	removeChild (node) {
+		if (node && this.content.contains(node)) {
+			this.content.removeChild(node);
+			return true;
+		}
+		else {
+			return false;
+		}
+	}
+
+	set value (value) {}
+
+	get value () {
+		const value = [];
+		this.content.childNodes.forEach((element) => {
+			if (element.value) {
+				value.push(element.value);
+			}
+		});
+		return value;
+	}
+}
+
+class DraggableItem extends HTMLElement {
+	#value = null;
+	uuid = null;
+	constructor () {
+		super();
+		this.attachShadow({ mode: "open" });
+		// for whatever reason, only grid layout seems to respect the parent's content bounds
+		this.shadowRoot.innerHTML = `
+			<style>
+				img, svg {
+					height: 1em;
+					width: 1em;
+				}
+				* {
+					-webkit-box-sizing: border-box;
+					-moz-box-sizing: border-box;
+					box-sizing: border-box;
+				}
+			</style>
+			<div id="wrapper" part="wrapper"></div>
+		`;
+		this.content = this.shadowRoot.querySelector("#wrapper");
+	}
+
+	get innerHTML () {
+		return this.content.innerHTML;
+	}
+
+	set innerHTML (innerHTML) {
+		this.content.innerHTML = innerHTML;
+	}
+
+	get value () {
+		return this.#value;
+	}
+
+	set value (value) {
+		this.#value = value;
+	}
+}
+
+customElements.define("draggable-container", DraggableContainer);
+customElements.define("draggable-item", DraggableItem);
--- a/web/scripts/index.js
+++ b/web/scripts/index.js
@@ -0,0 +1,525 @@
+import { requestPVE, requestAPI, goToPage, setAppearance, getSearchSettings, goToURL, instancesConfig, nodesConfig, setSVGSrc, setSVGAlt } from "./utils.js";
+import { alert, dialog } from "./dialog.js";
+import { setupClientSync } from "./clientsync.js";
+import wfaInit from "../modules/wfa.js";
+import { PVE } from "../vars.js";
+
+class InstanceCard extends HTMLElement {
+	constructor () {
+		super();
+		this.attachShadow({ mode: "open" });
+		this.shadowRoot.innerHTML = `
+			<link rel="stylesheet" href="modules/w3.css">
+			<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+			<link rel="stylesheet" href="css/style.css">
+			<style>
+				* {
+					margin: 0;
+				}
+			</style>
+			<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
+				<hr class="w3-show-small w3-hide-medium w3-hide-large" style="margin: 0; margin-bottom: 1em;">
+				<p class="w3-col l1 m2 s6" id="instance-id"></p>
+				<p class="w3-col l2 m3 s6" id="instance-name"></p>
+				<p class="w3-col l1 m2 w3-hide-small" id="instance-type"></p>
+				<div class="w3-col l2 m3 s6 flex row nowrap">
+					<svg id="instance-status-icon"></svg>
+					<p id="instance-status"></p>
+				</div>
+				<p class="w3-col l2 w3-hide-medium w3-hide-small" id="node-name"></p>
+				<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
+					<svg id="node-status-icon"></svg>
+					<p id="node-status"></p>
+				</div>
+				<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh;">
+					<svg id="power-btn" tabindex="0" role="button"></svg>
+					<svg id="console-btn" tabindex="0" role="button"></svg>
+					<svg id="configure-btn" tabindex="0" role="button"></svg>
+					<svg id="delete-btn" tabindex="0" role="button"></svg>
+				</div>
+			</div>
+		`;
+		this.actionLock = false;
+	}
+
+	get data () {
+		return {
+			type: this.type,
+			status: this.status,
+			vmid: this.status,
+			name: this.name,
+			node: this.node,
+			searchQuery: this.searchQuery
+		};
+	}
+
+	set data (data) {
+		if (data.status === "unknown") {
+			data.status = "stopped";
+		}
+		this.type = data.type;
+		this.status = data.status;
+		this.vmid = data.vmid;
+		this.name = data.name;
+		this.node = data.node;
+		this.searchQueryResult = data.searchQueryResult;
+		this.update();
+	}
+
+	update () {
+		const vmidParagraph = this.shadowRoot.querySelector("#instance-id");
+		vmidParagraph.innerText = this.vmid;
+
+		const nameParagraph = this.shadowRoot.querySelector("#instance-name");
+		if (this.searchQueryResult.alignment) {
+			let i = 0; // name index
+			let c = 0; // alignment index
+			const alignment = this.searchQueryResult.alignment;
+			while (i < this.name.length && c < alignment.length) {
+				if (alignment[c] === "M") {
+					const part = document.createElement("span");
+					part.innerText = this.name[i];
+					part.style = "color: var(--lightbg-text-color); background-color: var(--highlight-color);";
+					nameParagraph.append(part);
+					i++;
+					c++;
+				}
+				else if (alignment[c] === "I") {
+					const part = document.createElement("span");
+					part.innerText = this.name[i];
+					nameParagraph.append(part);
+					i++;
+					c++;
+				}
+				else if (alignment[c] === "D") {
+					c++;
+				}
+				else if (alignment[c] === "X") {
+					const part = document.createElement("span");
+					part.innerText = this.name[i];
+					nameParagraph.append(part);
+					i++;
+					c++;
+				}
+			}
+		}
+		else {
+			nameParagraph.innerHTML = this.name ? this.name : "&nbsp;";
+		}
+
+		const typeParagraph = this.shadowRoot.querySelector("#instance-type");
+		typeParagraph.innerText = this.type;
+
+		const statusParagraph = this.shadowRoot.querySelector("#instance-status");
+		statusParagraph.innerText = this.status;
+
+		const statusIcon = this.shadowRoot.querySelector("#instance-status-icon");
+		setSVGSrc(statusIcon, instancesConfig[this.status].status.src);
+		setSVGAlt(statusIcon, instancesConfig[this.status].status.alt);
+
+		const nodeNameParagraph = this.shadowRoot.querySelector("#node-name");
+		nodeNameParagraph.innerText = this.node.name;
+
+		const nodeStatusParagraph = this.shadowRoot.querySelector("#node-status");
+		nodeStatusParagraph.innerText = this.node.status;
+
+		const nodeStatusIcon = this.shadowRoot.querySelector("#node-status-icon");
+		setSVGSrc(nodeStatusIcon, nodesConfig[this.node.status].status.src);
+		setSVGAlt(nodeStatusIcon, nodesConfig[this.node.status].status.alt);
+
+		const powerButton = this.shadowRoot.querySelector("#power-btn");
+		setSVGSrc(powerButton, instancesConfig[this.status].power.src);
+		setSVGAlt(powerButton, instancesConfig[this.status].power.alt);
+		if (instancesConfig[this.status].power.clickable) {
+			powerButton.classList.add("clickable");
+			powerButton.onclick = this.handlePowerButton.bind(this);
+		}
+
+		const configButton = this.shadowRoot.querySelector("#configure-btn");
+		setSVGSrc(configButton, instancesConfig[this.status].config.src);
+		setSVGAlt(configButton, instancesConfig[this.status].config.alt);
+		if (instancesConfig[this.status].config.clickable) {
+			configButton.classList.add("clickable");
+			configButton.onclick = this.handleConfigButton.bind(this);
+		}
+
+		const consoleButton = this.shadowRoot.querySelector("#console-btn");
+		setSVGSrc(consoleButton, instancesConfig[this.status].console.src);
+		setSVGAlt(consoleButton, instancesConfig[this.status].console.alt);
+		if (instancesConfig[this.status].console.clickable) {
+			consoleButton.classList.add("clickable");
+			consoleButton.onclick = this.handleConsoleButton.bind(this);
+		}
+
+		const deleteButton = this.shadowRoot.querySelector("#delete-btn");
+		setSVGSrc(deleteButton, instancesConfig[this.status].delete.src);
+		setSVGAlt(deleteButton, instancesConfig[this.status].delete.alt);
+		if (instancesConfig[this.status].delete.clickable) {
+			deleteButton.classList.add("clickable");
+			deleteButton.onclick = this.handleDeleteButton.bind(this);
+		}
+
+		if (this.node.status !== "online") {
+			powerButton.classList.add("hidden");
+			configButton.classList.add("hidden");
+			consoleButton.classList.add("hidden");
+			deleteButton.classList.add("hidden");
+		}
+	}
+
+	async handlePowerButton () {
+		if (!this.actionLock) {
+			const header = `${this.status === "running" ? "Stop" : "Start"} VM ${this.vmid}`;
+			const body = `<p>Are you sure you want to ${this.status === "running" ? "stop" : "start"} VM ${this.vmid}</p>`;
+
+			dialog(header, body, async (result, form) => {
+				if (result === "confirm") {
+					this.actionLock = true;
+					const targetAction = this.status === "running" ? "stop" : "start";
+					const targetStatus = this.status === "running" ? "stopped" : "running";
+					const prevStatus = this.status;
+					this.status = "loading";
+
+					this.update();
+
+					const result = await requestPVE(`/nodes/${this.node.name}/${this.type}/${this.vmid}/status/${targetAction}`, "POST", { node: this.node.name, vmid: this.vmid });
+
+					const waitFor = delay => new Promise(resolve => setTimeout(resolve, delay));
+
+					while (true) {
+						const taskStatus = await requestPVE(`/nodes/${this.node.name}/tasks/${result.data}/status`, "GET");
+						if (taskStatus.data.status === "stopped" && taskStatus.data.exitstatus === "OK") { // task stopped and was successful
+							this.status = targetStatus;
+							this.update();
+							this.actionLock = false;
+							break;
+						}
+						else if (taskStatus.data.status === "stopped") { // task stopped but was not successful
+							this.status = prevStatus;
+							alert(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
+							this.update();
+							this.actionLock = false;
+							break;
+						}
+						else { // task has not stopped
+							await waitFor(1000);
+						}
+					}
+				}
+			});
+		}
+	}
+
+	handleConfigButton () {
+		if (!this.actionLock && this.status === "stopped") { // if the action lock is false, and the node is stopped, then navigate to the config page with the node info in the search query
+			goToPage("instance.html", { node: this.node.name, type: this.type, vmid: this.vmid });
+		}
+	}
+
+	handleConsoleButton () {
+		if (!this.actionLock && this.status === "running") {
+			const data = { console: `${this.type === "qemu" ? "kvm" : "lxc"}`, vmid: this.vmid, vmname: this.name, node: this.node.name, resize: "off", cmd: "" };
+			data[`${this.type === "qemu" ? "novnc" : "xtermjs"}`] = 1;
+			goToURL(PVE, data, true);
+		}
+	}
+
+	handleDeleteButton () {
+		if (!this.actionLock && this.status === "stopped") {
+			const header = `Delete VM ${this.vmid}`;
+			const body = `<p>Are you sure you want to <strong>delete</strong> VM ${this.vmid}</p>`;
+
+			dialog(header, body, async (result, form) => {
+				if (result === "confirm") {
+					this.actionLock = true;
+					this.status = "loading";
+					this.update();
+
+					const action = {};
+					action.purge = 1;
+					action["destroy-unreferenced-disks"] = 1;
+
+					const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
+					if (result.status === 200) {
+						if (this.parentElement) {
+							this.parentElement.removeChild(this);
+						}
+					}
+					else {
+						alert(`Attempted to delete ${this.vmid} but got: ${result.error}`);
+						this.status = this.prevStatus;
+						this.update();
+						this.actionLock = false;
+					}
+				}
+			});
+		}
+	}
+}
+
+customElements.define("instance-card", InstanceCard);
+
+window.addEventListener("DOMContentLoaded", init);
+
+let instances = [];
+
+async function init () {
+	setAppearance();
+	const cookie = document.cookie;
+	if (cookie === "") {
+		goToPage("login.html");
+	}
+
+	wfaInit("modules/wfa.wasm");
+
+	document.querySelector("#instance-add").addEventListener("click", handleInstanceAdd);
+	document.querySelector("#vm-search").addEventListener("input", populateInstances);
+
+	setupClientSync(refreshInstances);
+}
+
+async function refreshInstances () {
+	await getInstances();
+	await populateInstances();
+}
+
+async function getInstances () {
+	const resources = await requestPVE("/cluster/resources", "GET");
+	instances = [];
+	resources.data.forEach((element) => {
+		if (element.type === "lxc" || element.type === "qemu") {
+			const nodeName = element.node;
+			const nodeStatus = resources.data.find(item => item.node === nodeName && item.type === "node").status;
+			element.node = { name: nodeName, status: nodeStatus };
+			instances.push(element);
+		}
+	});
+}
+
+async function populateInstances () {
+	const searchCriteria = getSearchSettings();
+	const searchQuery = document.querySelector("#search").value || null;
+	let criteria;
+	if (!searchQuery) {
+		criteria = (item, query = null) => {
+			return { score: item.vmid, alignment: null };
+		};
+	}
+	else if (searchCriteria === "exact") {
+		criteria = (item, query) => {
+			const substrInc = item.includes(query);
+			if (substrInc) {
+				const substrStartIndex = item.indexOf(query);
+				const queryLength = query.length;
+				const remaining = item.length - substrInc - queryLength;
+				const alignment = `${"X".repeat(substrStartIndex)}${"M".repeat(queryLength)}${"X".repeat(remaining)}`;
+				return { score: 1, alignment };
+			}
+			else {
+				const alignment = `${"X".repeat(item.length)}`;
+				return { score: 0, alignment };
+			}
+		};
+	}
+	else if (searchCriteria === "fuzzy") {
+		const penalties = {
+			m: 0,
+			x: 1,
+			o: 0,
+			e: 1
+		};
+		criteria = (item, query) => {
+			// lower is better
+			const { score, CIGAR } = global.wfAlign(query, item, penalties, true);
+			const alignment = global.DecodeCIGAR(CIGAR);
+			return { score: score / item.length, alignment };
+		};
+	}
+	sortInstances(criteria, searchQuery);
+	const instanceContainer = document.querySelector("#instance-container");
+	instanceContainer.innerHTML = "";
+	for (let i = 0; i < instances.length; i++) {
+		const newInstance = document.createElement("instance-card");
+		newInstance.data = instances[i];
+		instanceContainer.append(newInstance);
+	}
+}
+
+function sortInstances (criteria, searchQuery) {
+	for (let i = 0; i < instances.length; i++) {
+		if (!instances[i].name) { // if the instance has no name, assume its just empty string
+			instances[i].name = "";
+		}
+		const { score, alignment } = criteria(instances[i].name.toLowerCase(), searchQuery ? searchQuery.toLowerCase() : "");
+		instances[i].searchQueryResult = { score, alignment };
+	}
+	const sortCriteria = (a, b) => {
+		const aScore = a.searchQueryResult.score;
+		const bScore = b.searchQueryResult.score;
+		if (aScore === bScore) {
+			return a.vmid > b.vmid ? 1 : -1;
+		}
+		else {
+			return aScore - bScore;
+		}
+	};
+	instances.sort(sortCriteria);
+}
+
+async function handleInstanceAdd () {
+	const header = "Create New Instance";
+
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="type">Instance Type</label>
+			<select class="w3-select w3-border" name="type" id="type" required>
+				<option value="lxc">Container</option>
+				<option value="qemu">Virtual Machine</option>
+			</select>
+			<label for="node">Node</label>
+			<select class="w3-select w3-border" name="node" id="node" required></select>
+			<label for="name">Name</label>
+			<input class="w3-input w3-border" name="name" id="name" required>
+			<label for="vmid">ID</label>
+			<input class="w3-input w3-border" name="vmid" id="vmid" type="number" required>
+			<label for="pool">Pool</label>
+			<select class="w3-select w3-border" name="pool" id="pool" required></select>
+			<label for="cores">Cores (Threads)</label>
+			<input class="w3-input w3-border" name="cores" id="cores" type="number" min="1" max="8192" required>
+			<label for="memory">Memory (MiB)</label>
+			<input class="w3-input w3-border" name="memory" id="memory" type="number" min="16", step="1" required>
+			<p class="container-specific none" style="grid-column: 1 / span 2; text-align: center;">Container Options</p>
+			<label class="container-specific none" for="swap">Swap (MiB)</label>
+			<input class="w3-input w3-border container-specific none" name="swap" id="swap" type="number" min="0" step="1" required disabled>
+			<label class="container-specific none" for="template-image">Template Image</label>
+			<select class="w3-select w3-border container-specific none" name="template-image" id="template-image" required disabled></select>
+			<label class="container-specific none" for="rootfs-storage">ROOTFS Storage</label>
+			<select class="w3-select w3-border container-specific none" name="rootfs-storage" id="rootfs-storage" required disabled></select>
+			<label class="container-specific none" for="rootfs-size">ROOTFS Size (GiB)</label>
+			<input class="w3-input w3-border container-specific none" name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled>
+			<label class="container-specific none" for="password">Password</label>
+			<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" required disabled>
+			<label class="container-specific none" for="confirm-password">Confirm Password</label>
+			<input class="w3-input w3-border container-specific none" name="confirm-password" id="confirm-password" type="password" required disabled>
+		</form>
+	`;
+
+	const templates = await requestAPI("/user/ct-templates", "GET");
+
+	const d = dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const body = {
+				name: form.get("name"),
+				cores: form.get("cores"),
+				memory: form.get("memory"),
+				pool: form.get("pool")
+			};
+			if (form.get("type") === "lxc") {
+				body.swap = form.get("swap");
+				body.password = form.get("password");
+				body.ostemplate = form.get("template-image");
+				body.rootfslocation = form.get("rootfs-storage");
+				body.rootfssize = form.get("rootfs-size");
+			}
+			const node = form.get("node");
+			const type = form.get("type");
+			const vmid = form.get("vmid");
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/create`, "POST", body);
+			if (result.status === 200) {
+				populateInstances();
+			}
+			else {
+				alert(`Attempted to create new instance ${vmid} but got: ${result.error}`);
+				populateInstances();
+			}
+		}
+	});
+
+	const typeSelect = d.querySelector("#type");
+	typeSelect.selectedIndex = -1;
+	typeSelect.addEventListener("change", () => {
+		if (typeSelect.value === "qemu") {
+			d.querySelectorAll(".container-specific").forEach((element) => {
+				element.classList.add("none");
+				element.disabled = true;
+			});
+		}
+		else {
+			d.querySelectorAll(".container-specific").forEach((element) => {
+				element.classList.remove("none");
+				element.disabled = false;
+			});
+		}
+	});
+
+	const rootfsContent = "rootdir";
+	const rootfsStorage = d.querySelector("#rootfs-storage");
+	rootfsStorage.selectedIndex = -1;
+
+	const userResources = await requestAPI("/user/dynamic/resources", "GET");
+	const userCluster = await requestAPI("/user/config/cluster", "GET");
+
+	const nodeSelect = d.querySelector("#node");
+	const clusterNodes = await requestPVE("/nodes", "GET");
+	const allowedNodes = Object.keys(userCluster.nodes);
+	clusterNodes.data.forEach((element) => {
+		if (element.status === "online" && allowedNodes.includes(element.node)) {
+			nodeSelect.add(new Option(element.node));
+		}
+	});
+	nodeSelect.selectedIndex = -1;
+	nodeSelect.addEventListener("change", async () => { // change rootfs storage based on node
+		const node = nodeSelect.value;
+		const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
+		storage.data.forEach((element) => {
+			if (element.content.includes(rootfsContent)) {
+				rootfsStorage.add(new Option(element.storage));
+			}
+		});
+		rootfsStorage.selectedIndex = -1;
+
+		// set core and memory min/max depending on node selected
+		if (node in userResources.cores.nodes) {
+			d.querySelector("#cores").max = userResources.cores.nodes[node].avail;
+		}
+		else {
+			d.querySelector("#cores").max = userResources.cores.global.avail;
+		}
+
+		if (node in userResources.memory.nodes) {
+			d.querySelector("#memory").max = userResources.memory.nodes[node].avail;
+		}
+		else {
+			d.querySelector("#memory").max = userResources.memory.global.avail;
+		}
+	});
+
+	// set vmid min/max
+	d.querySelector("#vmid").min = userCluster.vmid.min;
+	d.querySelector("#vmid").max = userCluster.vmid.max;
+
+	// add user pools to selector
+	const poolSelect = d.querySelector("#pool");
+	const userPools = Object.keys(userCluster.pools);
+	userPools.forEach((element) => {
+		poolSelect.add(new Option(element));
+	});
+	poolSelect.selectedIndex = -1;
+
+	// add template images to selector
+	const templateImage = d.querySelector("#template-image"); // populate templateImage depending on selected image storage
+	for (const template of templates) {
+		templateImage.append(new Option(template.name, template.volid));
+	}
+	templateImage.selectedIndex = -1;
+
+	const password = d.querySelector("#password");
+	const confirmPassword = d.querySelector("#confirm-password");
+
+	function validatePassword () {
+		confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
+	}
+
+	password.addEventListener("change", validatePassword);
+	confirmPassword.addEventListener("keyup", validatePassword);
+}
--- a/web/scripts/instance.js
+++ b/web/scripts/instance.js
@@ -0,0 +1,855 @@
+import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, bootConfig, setAppearance, setSVGSrc, setSVGAlt, mergeDeep, addResourceLine } from "./utils.js";
+import { alert, dialog } from "./dialog.js";
+
+window.addEventListener("DOMContentLoaded", init); // do the dumb thing where the disk config refreshes every second
+
+const diskMetaData = resourcesConfig.disk;
+const networkMetaData = resourcesConfig.network;
+const pcieMetaData = resourcesConfig.pci;
+const bootMetaData = bootConfig;
+
+let node;
+let type;
+let vmid;
+let config;
+
+const resourceInputTypes = { // input types for each resource for config page
+	cpu: {
+		element: "select",
+		attributes: {}
+	},
+	cores: {
+		element: "input",
+		attributes: {
+			type: "number"
+		}
+	},
+	memory: {
+		element: "input",
+		attributes: {
+			type: "number"
+		}
+	},
+	swap: {
+		element: "input",
+		attributes: {
+			type: "number"
+		}
+	}
+};
+
+const resourcesConfigPage = mergeDeep({}, resourcesConfig, resourceInputTypes);
+
+async function init () {
+	setAppearance();
+	const cookie = document.cookie;
+	if (cookie === "") {
+		goToPage("login.html");
+	}
+
+	const uriData = getURIData();
+	node = uriData.node;
+	type = uriData.type;
+	vmid = uriData.vmid;
+
+	await getConfig();
+
+	const name = type === "qemu" ? "name" : "hostname";
+	document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
+
+	populateResources();
+	populateDisk();
+	populateNetworks();
+	populateDevices();
+	populateBoot();
+
+	document.querySelector("#exit").addEventListener("click", handleFormExit);
+}
+
+function getOrdered (keys) {
+	const orderedKeys = Object.keys(keys).sort((a, b) => {
+		return parseInt(a) - parseInt(b);
+	}); // ordered integer list
+	return orderedKeys;
+}
+
+async function getConfig () {
+	config = await requestPVE(`/nodes/${node}/${type}/${vmid}/config`, "GET");
+}
+
+async function populateResources () {
+	const field = document.querySelector("#resources");
+	if (type === "qemu") {
+		const global = (await requestAPI("/global/config/resources")).resources;
+		const user = await requestAPI("/user/config/resources");
+		let options = [];
+		const globalCPU = global.cpu;
+		const userCPU = node in user.cpu.nodes ? user.cpu.nodes[node] : user.cpu.global;
+		if (globalCPU.whitelist) {
+			userCPU.forEach((userType) => {
+				options.push(userType.name);
+			});
+			options = options.sort((a, b) => {
+				return a.localeCompare(b);
+			});
+		}
+		else {
+			const supported = await requestPVE(`/nodes/${node}/capabilities/qemu/cpu`);
+			supported.data.forEach((supportedType) => {
+				if (!userCPU.some((userType) => supportedType.name === userType.name)) {
+					options.push(supportedType.name);
+				}
+			});
+			options = options.sort((a, b) => {
+				return a.localeCompare(b);
+			});
+		}
+		addResourceLine(resourcesConfigPage.cpu, field, { value: config.data.cpu, options });
+	}
+	addResourceLine(resourcesConfigPage.cores, field, { value: config.data.cores, min: 1, max: 8192 });
+	addResourceLine(resourcesConfigPage.memory, field, { value: config.data.memory, min: 16, step: 1 });
+	if (type === "lxc") {
+		addResourceLine(resourcesConfigPage.swap, field, { value: config.data.swap, min: 0, step: 1 });
+	}
+}
+
+async function populateDisk () {
+	document.querySelector("#disks").innerHTML = "";
+	for (let i = 0; i < diskMetaData[type].prefixOrder.length; i++) {
+		const prefix = diskMetaData[type].prefixOrder[i];
+		const busName = diskMetaData[type][prefix].name;
+		const disks = {};
+		Object.keys(config.data).forEach((element) => {
+			if (element.startsWith(prefix) && !isNaN(element.replace(prefix, ""))) {
+				disks[element.replace(prefix, "")] = config.data[element];
+			}
+		});
+		const orderedKeys = getOrdered(disks);
+		orderedKeys.forEach((element) => {
+			const disk = disks[element];
+			addDiskLine("disks", prefix, busName, element, disk);
+		});
+	}
+	document.querySelector("#disk-add").addEventListener("click", handleDiskAdd);
+
+	if (type === "qemu") {
+		document.querySelector("#cd-add").classList.remove("none");
+		document.querySelector("#cd-add").addEventListener("click", handleCDAdd);
+	}
+}
+
+function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
+	const field = document.querySelector(`#${fieldset}`);
+
+	const diskName = `${busName} ${device}`;
+	const diskID = `${busPrefix}${device}`;
+
+	// Set the disk icon, either drive.svg or disk.svg
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	setSVGSrc(icon, diskMetaData[type][busPrefix].icon);
+	setSVGAlt(icon, diskName);
+	icon.dataset.disk = diskID;
+	field.appendChild(icon);
+
+	// Add a label for the disk bus and device number
+	const diskLabel = document.createElement("p");
+	diskLabel.innerText = diskName;
+	diskLabel.dataset.disk = diskID;
+	field.appendChild(diskLabel);
+
+	// Add text of the disk configuration
+	const diskDesc = document.createElement("p");
+	diskDesc.innerText = diskDetails;
+	diskDesc.dataset.disk = diskID;
+	diskDesc.style.overflowX = "hidden";
+	diskDesc.style.whiteSpace = "nowrap";
+	field.appendChild(diskDesc);
+
+	const actionDiv = document.createElement("div");
+	diskMetaData.actionBarOrder.forEach((element) => {
+		const action = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+		if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
+			setSVGSrc(action, diskMetaData.actions.attach.src);
+			setSVGAlt(action, diskMetaData.actions.attach.title);
+			action.title = "Attach Disk";
+			action.addEventListener("click", handleDiskAttach);
+			action.classList.add("clickable");
+		}
+		else if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("detach")) { // detach
+			setSVGSrc(action, diskMetaData.actions.detach.src);
+			setSVGAlt(action, diskMetaData.actions.detach.title);
+			action.addEventListener("click", handleDiskDetach);
+			action.classList.add("clickable");
+		}
+		else if (element === "delete") {
+			const active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
+			setSVGSrc(action, `images/actions/delete-${active}.svg`);
+			setSVGAlt(action, "Delete Disk");
+			if (active === "active") {
+				action.addEventListener("click", handleDiskDelete);
+				action.classList.add("clickable");
+			}
+		}
+		else {
+			const active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
+			setSVGSrc(action, `images/actions/disk/${element}-${active}.svg`);
+			if (active === "active") {
+				setSVGAlt(action, `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`);
+				if (element === "move") {
+					action.addEventListener("click", handleDiskMove);
+				}
+				else if (element === "resize") {
+					action.addEventListener("click", handleDiskResize);
+				}
+				action.classList.add("clickable");
+			}
+		}
+		action.dataset.disk = diskID;
+		actionDiv.append(action);
+	});
+	field.appendChild(actionDiv);
+}
+
+async function handleDiskDetach () {
+	const disk = this.dataset.disk;
+	const header = `Detach ${disk}`;
+	const body = `<p>Are you sure you want to detach disk ${disk}</p>`;
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST");
+			if (result.status !== 200) {
+				alert(`Attempted to detach ${disk} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDisk();
+			deleteBootLine(`boot-${disk}`);
+		}
+	});
+}
+
+async function handleDiskAttach () {
+	const header = `Attach ${this.dataset.disk}`;
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label>
+			<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required>
+		</form>
+	`;
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const device = form.get("device");
+			setSVGSrc(document.querySelector(`svg[data-disk="${this.dataset.disk}"]`), "images/status/loading.svg");
+			const body = {
+				source: this.dataset.disk.replace("unused", "")
+			};
+			const prefix = type === "qemu" ? "scsi" : "mp";
+			const disk = `${prefix}${device}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to attach ${this.dataset.disk} to ${disk} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDisk();
+			addBootLine("disabled", { id: disk, prefix, value: disk, detail: config.data[disk] });
+		}
+	});
+}
+
+async function handleDiskResize () {
+	const header = `Resize ${this.dataset.disk}`;
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="size-increment">Size Increment (GiB)</label>
+			<input class="w3-input w3-border" name="size-increment" id="size-increment" type="number" min="0" max="131072">
+		</form>
+		`;
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const disk = this.dataset.disk;
+			setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
+			const body = {
+				size: form.get("size-increment")
+			};
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to resize ${disk} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDisk();
+			const prefix = bootMetaData.eligiblePrefixes.find((pref) => disk.startsWith(pref));
+			updateBootLine(`boot-${disk}`, { id: disk, prefix, value: disk, detail: config.data[disk] });
+		}
+	});
+}
+
+async function handleDiskMove () {
+	const content = type === "qemu" ? "images" : "rootdir";
+	const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
+
+	const header = `Move ${this.dataset.disk}`;
+
+	let options = "";
+	storage.data.forEach((element) => {
+		if (element.content.includes(content)) {
+			options += `<option value="${element.storage}">${element.storage}</option>"`;
+		}
+	});
+	const select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select"><option hidden disabled selected value></option>${options}</select>`;
+
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			${select}
+			<label for="delete-check">Delete Source</label><input class="w3-input w3-border" name="delete-check" id="delete-check" type="checkbox" checked required>
+		</form>
+	`;
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const disk = this.dataset.disk;
+			setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
+			const body = {
+				storage: form.get("storage-select"),
+				delete: form.get("delete-check") === "on" ? "1" : "0"
+			};
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDisk();
+			const prefix = bootMetaData.eligiblePrefixes.find((pref) => disk.startsWith(pref));
+			updateBootLine(`boot-${disk}`, { id: disk, prefix, value: config.data[disk] });
+		}
+	});
+}
+
+async function handleDiskDelete () {
+	const disk = this.dataset.disk;
+	const header = `Delete ${disk}`;
+	const body = `<p>Are you sure you want to <strong>delete</strong> disk${disk}</p>`;
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE");
+			if (result.status !== 200) {
+				alert(`Attempted to delete ${disk} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDisk();
+			deleteBootLine(`boot-${disk}`);
+		}
+	});
+}
+
+async function handleDiskAdd () {
+	const content = type === "qemu" ? "images" : "rootdir";
+	const storage = await requestPVE(`/nodes/${node}/storage`, "GET");
+
+	const header = "Create New Disk";
+
+	let options = "";
+	storage.data.forEach((element) => {
+		if (element.content.includes(content)) {
+			options += `<option value="${element.storage}">${element.storage}</option>"`;
+		}
+	});
+	const select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select" required><option hidden disabled selected value></option>${options}</select>`;
+
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="device">${type === "qemu" ? "SCSI" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required>
+			${select}
+			<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
+		</form>
+	`;
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const body = {
+				storage: form.get("storage-select"),
+				size: form.get("size")
+			};
+			const id = form.get("device");
+			const prefix = type === "qemu" ? "scsi" : "mp";
+			const disk = `${prefix}${id}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to create ${disk} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDisk();
+			addBootLine("disabled", { id: disk, prefix, value: disk, detail: config.data[disk] });
+		}
+	});
+}
+
+async function handleCDAdd () {
+	const isos = await requestAPI("/user/vm-isos", "GET");
+
+	const header = "Mount a CDROM";
+
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required>
+			<label for="iso-select">Image</label><select class="w3-select w3-border" name="iso-select" id="iso-select" required></select>
+		</form>
+	`;
+
+	const d = dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const body = {
+				iso: form.get("iso-select")
+			};
+			const disk = `ide${form.get("device")}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
+			}
+			await getConfig();
+			populateDisk();
+			addBootLine("disabled", { id: disk, prefix: "ide", value: disk, detail: config.data[disk] });
+		}
+	});
+
+	const isoSelect = d.querySelector("#iso-select");
+
+	for (const iso of isos) {
+		isoSelect.append(new Option(iso.name, iso.volid));
+	}
+	isoSelect.selectedIndex = -1;
+}
+
+async function populateNetworks () {
+	document.querySelector("#networks").innerHTML = "";
+	const networks = {};
+	const prefix = networkMetaData.prefix;
+	Object.keys(config.data).forEach((element) => {
+		if (element.startsWith(prefix)) {
+			networks[element.replace(prefix, "")] = config.data[element];
+		}
+	});
+	const orderedKeys = getOrdered(networks);
+	orderedKeys.forEach((element) => {
+		addNetworkLine("networks", prefix, element, networks[element]);
+	});
+
+	document.querySelector("#network-add").addEventListener("click", handleNetworkAdd);
+}
+
+function addNetworkLine (fieldset, prefix, netID, netDetails) {
+	const field = document.querySelector(`#${fieldset}`);
+
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	setSVGSrc(icon, networkMetaData.icon);
+	setSVGAlt(icon, `${prefix}${netID}`);
+	icon.dataset.network = netID;
+	icon.dataset.values = netDetails;
+	field.appendChild(icon);
+
+	const netLabel = document.createElement("p");
+	netLabel.innerText = `${prefix}${netID}`;
+	netLabel.dataset.network = netID;
+	netLabel.dataset.values = netDetails;
+	field.appendChild(netLabel);
+
+	const netDesc = document.createElement("p");
+	netDesc.innerText = netDetails;
+	netDesc.dataset.network = netID;
+	netDesc.dataset.values = netDetails;
+	netDesc.style.overflowX = "hidden";
+	netDesc.style.whiteSpace = "nowrap";
+	field.appendChild(netDesc);
+
+	const actionDiv = document.createElement("div");
+
+	const configBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	configBtn.classList.add("clickable");
+	setSVGSrc(configBtn, "images/actions/network/config.svg");
+	setSVGAlt(configBtn, "Config Interface");
+	configBtn.addEventListener("click", handleNetworkConfig);
+	configBtn.dataset.network = netID;
+	configBtn.dataset.values = netDetails;
+	actionDiv.appendChild(configBtn);
+
+	const deleteBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	deleteBtn.classList.add("clickable");
+	setSVGSrc(deleteBtn, "images/actions/delete-active.svg");
+	setSVGAlt(deleteBtn, "Delete Interface");
+	deleteBtn.addEventListener("click", handleNetworkDelete);
+	deleteBtn.dataset.network = netID;
+	deleteBtn.dataset.values = netDetails;
+	actionDiv.appendChild(deleteBtn);
+
+	field.appendChild(actionDiv);
+}
+
+async function handleNetworkConfig () {
+	const netID = this.dataset.network;
+	const netDetails = this.dataset.values;
+	const header = `Edit net${netID}`;
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
+		</form>
+	`;
+
+	const d = dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
+			const body = {
+				rate: form.get("rate")
+			};
+			const net = `net${netID}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to change ${net} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateNetworks();
+			updateBootLine(`boot-net${netID}`, { id: net, prefix: "net", value: net, detail: config.data[`net${netID}`] });
+		}
+	});
+
+	d.querySelector("#rate").value = netDetails.split("rate=")[1].split(",")[0];
+}
+
+async function handleNetworkDelete () {
+	const netID = this.dataset.network;
+	const header = `Delete net${netID}`;
+	const body = "";
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
+			const net = `net${netID}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
+			if (result.status !== 200) {
+				alert(`Attempted to delete ${net} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateNetworks();
+			deleteBootLine(`boot-${net}`);
+		}
+	});
+}
+
+async function handleNetworkAdd () {
+	const header = "Create Network Interface";
+	let body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="netid">Interface ID</label><input type="number" id="netid" name="netid" class="w3-input w3-border">
+			<label for="rate">Rate Limit (MB/s)</label><input type="number" id="rate" name="rate" class="w3-input w3-border">
+	`;
+	if (type === "lxc") {
+		body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\">";
+	}
+	body += "</form>";
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const body = {
+				rate: form.get("rate")
+			};
+			if (type === "lxc") {
+				body.name = form.get("name");
+			}
+			const netID = form.get("netid");
+			const net = `net${netID}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to create ${net} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateNetworks();
+			const id = `net${netID}`;
+			addBootLine("disabled", { id, prefix: "net", value: id, detail: config.data[`net${netID}`] });
+		}
+	});
+}
+
+async function populateDevices () {
+	if (type === "qemu") {
+		document.querySelector("#devices-card").classList.remove("none");
+		document.querySelector("#devices").innerHTML = "";
+		const devices = {};
+		const prefix = pcieMetaData.prefix;
+		Object.keys(config.data).forEach((element) => {
+			if (element.startsWith(prefix)) {
+				devices[element.replace(prefix, "")] = config.data[element];
+			}
+		});
+		const orderedKeys = getOrdered(devices);
+		orderedKeys.forEach(async (element) => {
+			const deviceData = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/hostpci${element}`, "GET");
+			addDeviceLine("devices", prefix, element, devices[element], deviceData.device_name);
+		});
+
+		document.querySelector("#device-add").addEventListener("click", handleDeviceAdd);
+	}
+}
+
+function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) {
+	const field = document.querySelector(`#${fieldset}`);
+
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	setSVGSrc(icon, pcieMetaData.icon);
+	setSVGAlt(icon, `${prefix}${deviceID}`);
+	icon.dataset.device = deviceID;
+	icon.dataset.values = deviceDetails;
+	icon.dataset.name = deviceName;
+	field.appendChild(icon);
+
+	const IDLabel = document.createElement("p");
+	IDLabel.innerText = `hostpci${deviceID}`;
+	IDLabel.dataset.device = deviceID;
+	IDLabel.dataset.values = deviceDetails;
+	IDLabel.dataset.name = deviceName;
+	IDLabel.style.overflowX = "hidden";
+	IDLabel.style.whiteSpace = "nowrap";
+	field.appendChild(IDLabel);
+
+	const deviceLabel = document.createElement("p");
+	deviceLabel.innerText = deviceName;
+	deviceLabel.dataset.device = deviceID;
+	deviceLabel.dataset.values = deviceDetails;
+	deviceLabel.dataset.name = deviceName;
+	deviceLabel.style.overflowX = "hidden";
+	deviceLabel.style.whiteSpace = "nowrap";
+	field.appendChild(deviceLabel);
+
+	const actionDiv = document.createElement("div");
+
+	const configBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	configBtn.classList.add("clickable");
+	setSVGSrc(configBtn, "images/actions/device/config.svg");
+	setSVGAlt(configBtn, "Config Device");
+	configBtn.addEventListener("click", handleDeviceConfig);
+	configBtn.dataset.device = deviceID;
+	configBtn.dataset.values = deviceDetails;
+	configBtn.dataset.name = deviceName;
+	actionDiv.appendChild(configBtn);
+
+	const deleteBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	deleteBtn.classList.add("clickable");
+	setSVGSrc(deleteBtn, "images/actions/delete-active.svg");
+	setSVGAlt(deleteBtn, "Delete Device");
+	deleteBtn.addEventListener("click", handleDeviceDelete);
+	deleteBtn.dataset.device = deviceID;
+	deleteBtn.dataset.values = deviceDetails;
+	deleteBtn.dataset.name = deviceName;
+	actionDiv.appendChild(deleteBtn);
+
+	field.appendChild(actionDiv);
+}
+
+async function handleDeviceConfig () {
+	const deviceID = this.dataset.device;
+	const deviceDetails = this.dataset.values;
+	const deviceName = this.dataset.name;
+	const header = `Edit Expansion Card ${deviceID}`;
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="device">Device</label><select id="device" name="device" required></select><label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
+		</form>
+	`;
+
+	const d = dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			setSVGSrc(document.querySelector(`svg[data-device="${deviceID}"]`), "images/status/loading.svg");
+			const body = {
+				device: form.get("device"),
+				pcie: form.get("pcie") ? 1 : 0
+			};
+			const device = `hostpci${deviceID}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to add ${device} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDevices();
+		}
+	});
+
+	const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
+	d.querySelector("#device").append(new Option(deviceName, deviceDetails.split(",")[0]));
+	for (const availDevice of availDevices) {
+		d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_id));
+	}
+	d.querySelector("#pcie").checked = deviceDetails.includes("pcie=1");
+}
+
+async function handleDeviceDelete () {
+	const deviceID = this.dataset.device;
+	const header = `Remove Expansion Card ${deviceID}`;
+	const body = "";
+
+	dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			setSVGSrc(document.querySelector(`svg[data-device="${deviceID}"]`), "images/status/loading.svg");
+			const device = `hostpci${deviceID}`;
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE");
+			if (result.status !== 200) {
+				alert(`Attempted to delete ${device} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDevices();
+		}
+	});
+}
+
+async function handleDeviceAdd () {
+	const header = "Add Expansion Card";
+	const body = `
+		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
+			<label for="hostpci">Device Bus</label><input type="number" id="hostpci" name="hostpci" class="w3-input w3-border">
+			<label for="device">Device</label><select id="device" name="device" required></select>
+			<label for="pcie">PCI-Express</label><input type="checkbox" id="pcie" name="pcie" class="w3-input w3-border">
+		</form>
+	`;
+
+	const d = dialog(header, body, async (result, form) => {
+		if (result === "confirm") {
+			const hostpci = form.get("hostpci");
+			const body = {
+				device: form.get("device"),
+				pcie: form.get("pcie") ? 1 : 0
+			};
+			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/hostpci${hostpci}/create`, "POST", body);
+			if (result.status !== 200) {
+				alert(`Attempted to add ${body.device} but got: ${result.error}`);
+			}
+			await getConfig();
+			populateDevices();
+		}
+	});
+
+	const availDevices = await requestAPI(`/cluster/${node}/pci`, "GET");
+	for (const availDevice of availDevices) {
+		d.querySelector("#device").append(new Option(availDevice.device_name, availDevice.device_id));
+	}
+	d.querySelector("#pcie").checked = true;
+}
+
+async function populateBoot () {
+	if (type === "qemu") {
+		document.querySelector("#boot-card").classList.remove("none");
+		document.querySelector("#enabled").title = "Enabled";
+		document.querySelector("#disabled").title = "Disabled";
+		let order = [];
+		if (config.data.boot.startsWith("order=")) {
+			order = config.data.boot.replace("order=", "").split(";");
+		}
+		const bootable = { disabled: [] };
+		const eligible = bootMetaData.eligiblePrefixes;
+		for (let i = 0; i < order.length; i++) {
+			const element = order[i];
+			const prefix = eligible.find((pref) => order[i].startsWith(pref));
+			const detail = config.data[element];
+			const num = element.replace(prefix, "");
+			if (!isNaN(num)) {
+				bootable[i] = { id: element, value: element, prefix, detail };
+			}
+		}
+		Object.keys(config.data).forEach((element) => {
+			const prefix = eligible.find((pref) => element.startsWith(pref));
+			const detail = config.data[element];
+			const num = element.replace(prefix, "");
+			if (prefix && !order.includes(element) && !isNaN(num)) {
+				bootable.disabled.push({ id: element, value: element, prefix, detail });
+			}
+		});
+		Object.keys(bootable).sort();
+		Object.keys(bootable).forEach((element) => {
+			if (element !== "disabled") {
+				addBootLine("enabled", bootable[element], document.querySelector("#enabled-spacer"));
+			}
+			else {
+				bootable.disabled.forEach((item) => {
+					addBootLine("disabled", item, document.querySelector("#disabled-spacer"));
+				});
+			}
+		});
+	}
+}
+
+function addBootLine (container, data, before = null) {
+	const item = document.createElement("draggable-item");
+	item.data = data;
+	item.innerHTML = `
+		<div style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
+			<svg id="drag" role="application" aria-label="drag icon"><title>drag icon</title><use href="images/actions/drag.svg#symb"></use></svg>
+			<svg role="application" aria-label="${bootMetaData[data.prefix].alt}"><title>${bootMetaData[data.prefix].alt}</title><use href="${bootMetaData[data.prefix].icon}#symb"></use></svg>
+			<p style="margin: 0px;">${data.id}</p>
+			<p style="margin: 0px; overflow-x: hidden; white-space: nowrap;">${data.detail}</p>
+		</div>
+	`;
+	item.id = `boot-${data.id}`;
+	if (before) {
+		document.querySelector(`#${container}`).insertBefore(item, before);
+	}
+	else {
+		document.querySelector(`#${container}`).append(item);
+	}
+	item.container = container;
+	item.value = data.value;
+}
+
+function deleteBootLine (id) {
+	const query = `#${id}`;
+	const enabled = document.querySelector("#enabled");
+	const disabled = document.querySelector("#disabled");
+	const inEnabled = enabled.querySelector(query);
+	const inDisabled = disabled.querySelector(query);
+	if (inEnabled) {
+		enabled.removeChild(inEnabled);
+	}
+	if (inDisabled) {
+		disabled.removeChild(inDisabled);
+	}
+}
+
+function updateBootLine (id, newData) {
+	const enabled = document.querySelector("#enabled");
+	const disabled = document.querySelector("#disabled");
+	let element = null;
+	if (enabled.querySelector(`#${id}`)) {
+		element = enabled.querySelector(`#${id}`);
+	}
+	if (disabled.querySelector(`#${id}`)) {
+		element = disabled.querySelector(`#${id}`);
+	}
+	if (element) {
+		const container = element.container;
+		const before = element.nextSibling;
+		deleteBootLine(id);
+		addBootLine(container, newData, before);
+		return true;
+	}
+	else {
+		return false;
+	}
+}
+
+async function handleFormExit () {
+	const body = {
+		cores: document.querySelector("#cores").value,
+		memory: document.querySelector("#ram").value
+	};
+	if (type === "lxc") {
+		body.swap = document.querySelector("#swap").value;
+	}
+	else if (type === "qemu") {
+		body.proctype = document.querySelector("#proctype").value;
+		body.boot = document.querySelector("#enabled").value;
+	}
+	const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
+	if (result.status === 200) {
+		goToPage("index.html");
+	}
+	else {
+		alert(`Attempted to set basic resources but got: ${result.error}`);
+	}
+}
--- a/web/scripts/login.js
+++ b/web/scripts/login.js
@@ -0,0 +1,53 @@
+import { goToPage, requestPVE, setAppearance, requestAPI } from "./utils.js";
+import { alert } from "./dialog.js";
+
+window.addEventListener("DOMContentLoaded", init);
+
+async function init () {
+	await deleteAllCookies();
+	setAppearance();
+	const formSubmitButton = document.querySelector("#submit");
+	const realms = await requestPVE("/access/domains", "GET");
+	const realmSelect = document.querySelector("#realm");
+	realms.data.forEach((element) => {
+		realmSelect.add(new Option(element.comment, element.realm));
+		if ("default" in element && element.default === 1) {
+			realmSelect.value = element.realm;
+		}
+	});
+	formSubmitButton.addEventListener("click", async (e) => {
+		e.preventDefault();
+		const form = document.querySelector("form");
+		const formData = new FormData(form);
+
+		formSubmitButton.innerText = "Authenticating...";
+		const ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm"));
+		if (ticket.status === 200) {
+			formSubmitButton.innerText = "LOGIN";
+			goToPage("index.html");
+		}
+		else if (ticket.status === 401) {
+			alert("Authenticaton failed.");
+			formSubmitButton.innerText = "LOGIN";
+		}
+		else if (ticket.status === 408) {
+			alert("Network error.");
+			formSubmitButton.innerText = "LOGIN";
+		}
+		else {
+			alert("An error occured.");
+			console.error(ticket);
+			formSubmitButton.innerText = "LOGIN";
+			console.error(ticket.error);
+		}
+	});
+}
+
+async function requestTicket (username, password, realm) {
+	const response = await requestAPI("/access/ticket", "POST", { username: `${username}@${realm}`, password }, false);
+	return response;
+}
+
+async function deleteAllCookies () {
+	await requestAPI("/access/ticket", "DELETE");
+}
--- a/web/scripts/settings.js
+++ b/web/scripts/settings.js
@@ -0,0 +1,34 @@
+import { setAppearance } from "./utils.js";
+
+window.addEventListener("DOMContentLoaded", init);
+
+function init () {
+	setAppearance();
+	const scheme = localStorage.getItem("sync-scheme");
+	if (scheme) {
+		document.querySelector(`#sync-${scheme}`).checked = true;
+	}
+	const rate = localStorage.getItem("sync-rate");
+	if (rate) {
+		document.querySelector("#sync-rate").value = rate;
+	}
+	const search = localStorage.getItem("search-criteria");
+	if (search) {
+		document.querySelector(`#search-${search}`).checked = true;
+	}
+	const theme = localStorage.getItem("appearance-theme");
+	if (theme) {
+		document.querySelector("#appearance-theme").value = theme;
+	}
+	document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false);
+}
+
+function handleSaveSettings (event) {
+	event.preventDefault();
+	const form = new FormData(document.querySelector("#settings"));
+	localStorage.setItem("sync-scheme", form.get("sync-scheme"));
+	localStorage.setItem("sync-rate", form.get("sync-rate"));
+	localStorage.setItem("search-criteria", form.get("search-criteria"));
+	localStorage.setItem("appearance-theme", form.get("appearance-theme"));
+	window.location.reload();
+}
--- a/web/scripts/utils.js
+++ b/web/scripts/utils.js
@@ -0,0 +1,497 @@
+import { API } from "../vars.js";
+
+export const resourcesConfig = {
+	cpu: {
+		name: "CPU Type",
+		icon: "images/resources/cpu.svg",
+		id: "proctype",
+		unitText: null
+	},
+	cores: {
+		name: "CPU Amount",
+		icon: "images/resources/cpu.svg",
+		id: "cores",
+		unitText: "Cores"
+	},
+	memory: {
+		name: "Memory",
+		icon: "images/resources/ram.svg",
+		id: "ram",
+		unitText: "MiB"
+	},
+	swap: {
+		name: "Swap",
+		icon: "images/resources/swap.svg",
+		id: "swap",
+		unitText: "MiB"
+	},
+	disk: {
+		actionBarOrder: ["move", "resize", "detach_attach", "delete"],
+		lxc: {
+			prefixOrder: ["rootfs", "mp", "unused"],
+			rootfs: { name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"] },
+			mp: { name: "MP", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"] },
+			unused: { name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"] }
+		},
+		qemu: {
+			prefixOrder: ["ide", "sata", "scsi", "unused"],
+			ide: { name: "IDE", icon: "images/resources/disk.svg", actions: ["delete"] },
+			sata: { name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"] },
+			scsi: { name: "SCSI", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"] },
+			unused: { name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"] }
+		},
+		actions: {
+			attach: {
+				src: "images/actions/disk/attach.svg",
+				title: "Attach Disk"
+			},
+			detach: {
+				src: "images/actions/disk/detach.svg",
+				title: "Detach Disk"
+			},
+			delete: null
+		}
+	},
+	network: {
+		name: "Network",
+		icon: "images/resources/network.svg",
+		id: "network",
+		unitText: "MB/s",
+		prefix: "net"
+	},
+	pci: {
+		name: "Devices",
+		icon: "images/resources/device.svg",
+		id: "devices",
+		unitText: null,
+		prefix: "hostpci"
+	}
+};
+
+export const instancesConfig = {
+	running: {
+		status: {
+			src: "images/status/active.svg",
+			alt: "Instance is running",
+			clickable: false
+		},
+		power: {
+			src: "images/actions/instance/stop.svg",
+			alt: "Shutdown Instance",
+			clickable: true
+		},
+		config: {
+			src: "images/actions/instance/config-inactive.svg",
+			alt: "Change Configuration (Inactive)",
+			clickable: false
+		},
+		console: {
+			src: "images/actions/instance/console-active.svg",
+			alt: "Open Console",
+			clickable: true
+		},
+		delete: {
+			src: "images/actions/delete-inactive.svg",
+			alt: "Delete Instance (Inactive)",
+			clickable: false
+		}
+	},
+	stopped: {
+		status: {
+			src: "images/status/inactive.svg",
+			alt: "Instance is stopped",
+			clickable: false
+		},
+		power: {
+			src: "images/actions/instance/start.svg",
+			alt: "Start Instance",
+			clickable: true
+		},
+		config: {
+			src: "images/actions/instance/config-active.svg",
+			alt: "Change Configuration",
+			clickable: true
+		},
+		console: {
+			src: "images/actions/instance/console-inactive.svg",
+			alt: "Open Console (Inactive)",
+			clickable: false
+		},
+		delete: {
+			src: "images/actions/delete-active.svg",
+			alt: "Delete Instance",
+			clickable: true
+		}
+	},
+	loading: {
+		status: {
+			src: "images/status/loading.svg",
+			alt: "Instance is loading",
+			clickable: false
+		},
+		power: {
+			src: "images/status/loading.svg",
+			alt: "Loading Instance",
+			clickable: false
+		},
+		config: {
+			src: "images/actions/instance/config-inactive.svg",
+			alt: "Change Configuration (Inactive)",
+			clickable: false
+		},
+		console: {
+			src: "images/actions/instance/console-inactive.svg",
+			alt: "Open Console (Inactive)",
+			clickable: false
+		},
+		delete: {
+			src: "images/actions/delete-inactive.svg",
+			alt: "Delete Instance (Inactive)",
+			clickable: false
+		}
+	}
+};
+
+export const nodesConfig = {
+	online: {
+		status: {
+			src: "images/status/active.svg",
+			alt: "Node is online"
+		}
+	},
+	offline: {
+		status: {
+			src: "images/status/inactive.svg",
+			alt: "Node is offline"
+		}
+	},
+	uknown: {
+		status: {
+			src: "images/status/inactive.svg",
+			alt: "Node is offline"
+		}
+	}
+};
+
+export const bootConfig = {
+	eligiblePrefixes: ["ide", "sata", "scsi", "net"],
+	ide: {
+		icon: "images/resources/disk.svg",
+		alt: "IDE Bootable Icon"
+	},
+	sata: {
+		icon: "images/resources/drive.svg",
+		alt: "SATA Bootable Icon"
+	},
+	scsi: {
+		icon: "images/resources/drive.svg",
+		alt: "SCSI Bootable Icon"
+	},
+	net: {
+		icon: "images/resources/network.svg",
+		alt: "NET Bootable Icon"
+	}
+};
+
+export function getCookie (cname) {
+	const name = cname + "=";
+	const decodedCookie = decodeURIComponent(document.cookie);
+	const ca = decodedCookie.split(";");
+	for (let i = 0; i < ca.length; i++) {
+		let c = ca[i];
+		while (c.charAt(0) === " ") {
+			c = c.substring(1);
+		}
+		if (c.indexOf(name) === 0) {
+			return c.substring(name.length, c.length);
+		}
+	}
+	return "";
+}
+
+export async function requestPVE (path, method, body = null) {
+	const prms = new URLSearchParams(body);
+	const content = {
+		method,
+		mode: "cors",
+		credentials: "include",
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded"
+		}
+	};
+	if (method === "POST") {
+		content.body = prms.toString();
+		content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
+	}
+
+	const response = await request(`${API}/proxmox${path}`, content);
+	return response;
+}
+
+export async function requestAPI (path, method, body = null) {
+	const prms = new URLSearchParams(body);
+	const content = {
+		method,
+		mode: "cors",
+		credentials: "include",
+		headers: {
+			"Content-Type": "application/x-www-form-urlencoded"
+		}
+	};
+	if (method === "POST" || method === "DELETE") {
+		content.headers.CSRFPreventionToken = getCookie("CSRFPreventionToken");
+	}
+	if (body) {
+		content.body = prms.toString();
+	}
+
+	const response = await request(`${API}${path}`, content);
+	return response;
+}
+
+async function request (url, content) {
+	try {
+		const response = await fetch(url, content);
+		const contentType = response.headers.get("Content-Type");
+		let data = null;
+		if (contentType.includes("application/json")) {
+			data = await response.json();
+			data.status = response.status;
+		}
+		else if (contentType.includes("text/html")) {
+			data = { data: await response.text() };
+			data.status = response.status;
+		}
+		else {
+			data = response;
+		}
+		if (!response.ok) {
+			return { status: response.status, error: data ? data.error : response.status };
+		}
+		else {
+			data.status = response.status;
+			return data || response;
+		}
+	}
+	catch (error) {
+		return { status: 400, error };
+	}
+}
+
+export function goToPage (page, data = null) {
+	const params = data ? (new URLSearchParams(data)).toString() : "";
+	window.location.href = `${page}${data ? "?" : ""}${params}`;
+}
+
+export function goToURL (href, data = {}, newwindow = false) {
+	const url = new URL(href);
+	for (const k in data) {
+		url.searchParams.append(k, data[k]);
+	}
+
+	if (newwindow) {
+		window.open(url, document.title, "height=480,width=848");
+	}
+	else {
+		window.location.assign(url.toString());
+	}
+}
+
+export function getURIData () {
+	const url = new URL(window.location.href);
+	return Object.fromEntries(url.searchParams);
+}
+
+const settingsDefault = {
+	"sync-scheme": "always",
+	"sync-rate": 5,
+	"search-criteria": "fuzzy",
+	"appearance-theme": "auto"
+};
+
+export function getSyncSettings () {
+	let scheme = localStorage.getItem("sync-scheme");
+	let rate = Number(localStorage.getItem("sync-rate"));
+	if (!scheme) {
+		scheme = settingsDefault["sync-scheme"];
+		localStorage.setItem("sync-scheme", scheme);
+	}
+	if (!rate) {
+		rate = settingsDefault["sync-rate"];
+		localStorage.setItem("sync-rate", rate);
+	}
+	return { scheme, rate };
+}
+
+export function getSearchSettings () {
+	let searchCriteria = localStorage.getItem("search-criteria");
+	if (!searchCriteria) {
+		searchCriteria = settingsDefault["search-criteria"];
+		localStorage.setItem("search-criteria", searchCriteria);
+	}
+	return searchCriteria;
+}
+
+export function setAppearance () {
+	let theme = localStorage.getItem("appearance-theme");
+	if (!theme) {
+		theme = settingsDefault["appearance-theme"];
+		localStorage.setItem("appearance-theme", theme);
+	}
+
+	if (theme === "auto") {
+		document.querySelector(":root").classList.remove("dark-theme", "light-theme");
+	}
+	else if (theme === "dark") {
+		document.querySelector(":root").classList.remove("light-theme");
+		document.querySelector(":root").classList.add("dark-theme");
+	}
+	else if (theme === "light") {
+		document.querySelector(":root").classList.add("light-theme");
+		document.querySelector(":root").classList.remove("dark-theme");
+	}
+}
+
+// assumes href is path to svg, and id to grab is #symb
+export function setSVGSrc (svgElem, href) {
+	let useElem = svgElem.querySelector("use");
+	if (!useElem) {
+		useElem = document.createElementNS("http://www.w3.org/2000/svg", "use");
+	}
+	useElem.setAttribute("href", `${href}#symb`);
+	svgElem.append(useElem);
+}
+
+export function setSVGAlt (svgElem, alt) {
+	svgElem.setAttribute("aria-label", alt);
+}
+
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject (item) {
+	return (item && typeof item === "object" && !Array.isArray(item));
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+export function mergeDeep (target, ...sources) {
+	if (!sources.length) return target;
+	const source = sources.shift();
+
+	if (isObject(target) && isObject(source)) {
+		for (const key in source) {
+			if (isObject(source[key])) {
+				if (!target[key]) Object.assign(target, { [key]: {} });
+				mergeDeep(target[key], source[key]);
+			}
+			else {
+				Object.assign(target, { [key]: source[key] });
+			}
+		}
+	}
+
+	return mergeDeep(target, ...sources);
+}
+
+/**
+ * Checks if object or array is empty
+ * @param {*} obj
+ * @returns
+ */
+export function isEmpty (obj) {
+	if (obj instanceof Array) {
+		return obj.length === 0;
+	}
+	else {
+		for (const prop in obj) {
+			if (Object.hasOwn(obj, prop)) {
+				return false;
+			}
+		}
+		return true;
+	}
+}
+
+export function addResourceLine (resourceConfig, field, attributesOverride, labelPrefix = null) {
+	const iconHref = resourceConfig.icon;
+	const elementType = resourceConfig.element;
+	const labelText = labelPrefix ? `${labelPrefix} ${resourceConfig.name}` : resourceConfig.name;
+	const id = resourceConfig.id;
+	const unitText = resourceConfig.unitText;
+	const attributes = { ...(resourceConfig.attributes), ...(attributesOverride) };
+
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	setSVGSrc(icon, iconHref);
+	setSVGAlt(icon, labelText);
+	field.append(icon);
+
+	const label = document.createElement("label");
+	label.innerText = labelText;
+	label.htmlFor = id;
+	field.append(label);
+
+	let element;
+
+	if (elementType === "input") {
+		element = document.createElement("input");
+		for (const k in attributes) {
+			element.setAttribute(k, attributes[k]);
+		}
+		element.id = id;
+		element.name = id;
+		element.required = true;
+		element.classList.add("w3-input");
+		element.classList.add("w3-border");
+		field.append(element);
+	}
+	else if (elementType === "select" || elementType === "multi-select") {
+		element = document.createElement("select");
+		for (const option of attributes.options) {
+			element.append(new Option(option));
+		}
+		element.value = attributes.value;
+		element.id = id;
+		element.name = id;
+		element.required = true;
+		element.classList.add("w3-select");
+		element.classList.add("w3-border");
+		if (elementType === "multi-select") {
+			element.setAttribute("multiple", true);
+		}
+		field.append(element);
+	}
+	else if (customElements.get(elementType)) {
+		element = document.createElement(elementType);
+		if (attributes.options) {
+			for (const option of attributes.options) {
+				element.append(new Option(option));
+			}
+		}
+		element.value = attributes.value;
+		element.id = id;
+		element.name = id;
+		element.required = true;
+		field.append(element);
+	}
+
+	let unit;
+
+	if (unitText) {
+		unit = document.createElement("p");
+		unit.innerText = unitText;
+		field.append(unit);
+	}
+	else {
+		unit = document.createElement("div");
+		unit.classList.add("hidden");
+		field.append(unit);
+	}
+
+	return { icon, label, element, unit };
+}
--- a/web/template.vars.js
+++ b/web/template.vars.js
@@ -0,0 +1,3 @@
+export const API = "https://paas.mydomain.example/api"; // the proxmox-aas api
+export const PVE = "https://pve.mydomain.example"; // the proxmox api
+export const organization = "mydomain"; // org name used in page title and nav bar
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="delete" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#ffbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="add cd" viewBox="2.3 2.3 19.4 19.4" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g stroke="currentColor" stroke-width="1.25"><path d="M7 12h5m0 0h5m-5 0V7m0 5v5"/><circle cx="12" cy="12" r="9"/></g></svg>`
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="create disk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><g fill="currentColor"><path d="M25 0H7a7 7 0 00-7 7v18a7 7 0 007 7h18a7 7 0 007-7V7a7 7 0 00-7-7zm5 25a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5h18a5 5 0 015 5z"/><path d="M17 6h-2v9H6v2h9v9h2v-9h9v-2h-9V6z"/></g></svg>`
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="move disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="resize disk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="currentColor"/></svg>`
				`@@ -0,0 +1 @@`
				<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="#808080"/></svg>
				`@@ -0,0 +1 @@`
				<svg id="symb" role="img" aria-label="instance console" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path fill-rule="evenodd" clip-rule="evenodd" d="M2 7a5 5 0 015-5h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7zm5-3a3 3 0 00-3 3v10a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H7zm0 13a1 1 0 011-1h8a1 1 0 110 2H8a1 1 0 01-1-1zm1.707-9.707a1 1 0 10-1.414 1.414L9.586 11l-2.293 2.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414l-3-3z" fill="currentColor"/></svg>
				`@@ -0,0 +1 @@`
				`<svg id="symb" role="img" aria-label="start instance" xmlns="http://www.w3.org/2000/svg" viewBox="2.8 2.4 12 12"><path d="M4.25 3l1.166-.624 8 5.333v1.248l-8 5.334-1.166-.624V3zm1.5 1.401v7.864l5.898-3.932L5.75 4.401z" fill="#0f0"/></svg>`
				`@@ -0,0 +1 @@`
				<svg id="symb" role="img" aria-label="config device" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.034 229.034"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M218.411 167.068l-70.305-70.301 9.398-35.073a7.504 7.504 0 00-1.94-7.245L103.311 2.197A7.499 7.499 0 0096.066.256L56.812 10.774a7.502 7.502 0 00-3.362 12.548l39.259 39.262-6.364 23.756-23.751 6.363-39.263-39.26a7.498 7.498 0 00-7.245-1.94 7.498 7.498 0 00-5.303 5.303L.266 96.059a7.5 7.5 0 001.941 7.244l52.249 52.255a7.5 7.5 0 007.245 1.941l35.076-9.4 70.302 70.306c6.854 6.854 15.968 10.628 25.662 10.629h.001c9.695 0 18.81-3.776 25.665-10.631 14.153-14.151 14.156-37.178.004-51.335zM207.8 207.795a21.15 21.15 0 01-15.058 6.239h-.002a21.153 21.153 0 01-15.056-6.236l-73.363-73.367a7.5 7.5 0 00-7.245-1.942L62 141.889 15.875 95.758l6.035-22.523 33.139 33.137a7.499 7.499 0 007.244 1.941l32.116-8.604a7.5 7.5 0 005.304-5.304l8.606-32.121a7.5 7.5 0 00-1.941-7.244L73.242 21.901l22.524-6.036 46.128 46.129-9.398 35.073a7.5 7.5 0 001.941 7.245l73.365 73.361c8.305 8.307 8.304 21.819-.002 30.122z" fill="currentColor"/></svg>