fix issue in input grid style

move addResourceLine to utils,
localize page specific resource line values in page script
2024-09-05 16:37:57 +00:00 · 2024-08-31 12:31:29 +00:00 · 2024-08-25 03:09:41 +00:00 · 2024-08-24 04:45:49 +00:00 · 2024-08-13 19:03:11 +00:00 · 2024-08-12 17:11:44 +00:00
68 changed files with 1164 additions and 1207 deletions
--- a/account.html
+++ b/account.html
@ -5,13 +5,13 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>proxmox - dashboard</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
-		<link rel="stylesheet" href="w3.css">
+		<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="scripts/chart.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){
@ -46,33 +46,32 @@
 			<h1>proxmox</h1>
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
-			<nav>
+			<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 id="admin-link" aria-disabled="true" class="none">Admin</a>
 				<a href="login.html">Logout</a>
 			</nav>
 		</header>
 		<main>
 			<section>
 			<h2>Account</h2>
-				<div class="w3-card w3-padding">
+			<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>
-				</div>
+			</section>
-				<div class="w3-card w3-padding">
+			<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>	
-				</div>
+			</section>
-				<div class="w3-card w3-padding">
+			<section class="w3-card w3-padding">
 				<h3>Cluster Resources</h3>
 				<div id="resource-container"></div>
 				</div>
 			</section>
 		</main>
 	</body>
--- a/admin.html
+++ b/admin.html
@ -0,0 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
    <head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>proxmox - dashboard</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
 		<link rel="stylesheet" href="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">
 		<script src="scripts/admin.js" type="module"></script>
    </head>
    <body>
        <header>
 			<h1>proxmox</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">Settings</a>
 				<a id="admin-link" href="admin.html" aria-current="page">Admin</a>
 				<a href="login.html">Logout</a>
 			</nav>
 		</header>
        <main>
 			<h2>Cluster Administration</h2>
 			<section class="w3-card w3-padding">
 				<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
 					<h3>Users</h3>
 					<button type="button" id="user-add" class="w3-button" aria-label="create new user">
 						<span class="large" style="margin: 0;">Create User</span>
 						<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New User"><use xlink:href="images/actions/user/add.svg#symb"></use></svg>
 					</button>
 				</div>
 				<div>
 					<div class="w3-row" style="border-bottom: 1px solid;">
 						<p class="w3-col l4 m4 s6">User</p>
 						<p class="w3-col l4 m4 w3-hide-small">Groups</p>
 						<p class="w3-col l2 w3-hide-medium w3-hide-small">Admin</p>
 						<p class="w3-col l2 m4 s6">Actions</p>
 					</div>
 					<div id="user-container"></div>
 				</div>
 			</section>
 			<section class="w3-card w3-padding">
 				<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
 					<h3>Groups</h3>
 					<button type="button" id="group-add" class="w3-button" aria-label="create new group">
 						<span class="large" style="margin: 0;">Create Group</span>
 						<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Group"><use xlink:href="images/actions/group/add.svg#symb"></use></svg>
 					</button>
 				</div>
 				<div>
 					<div class="w3-row" style="border-bottom: 1px solid;">
 						<p class="w3-col l4 m4 s6">Group</p>
 						<p class="w3-col l6 m4 w3-hide-small">Members</p>
 						<p class="w3-col l2 m4 s6">Actions</p>
 					</div>
 					<div id="group-container"></div>
 				</div>
 			</section>
 		</main>
    </body>
 </html>
--- a/config.html
+++ b/config.html
@ -5,23 +5,26 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>proxmox - dashboard</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
-		<link rel="stylesheet" href="w3.css">
+		<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/config.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>
 	</head>
 	<body>
 		<header>
 			<h1>proxmox</h1>
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
-			<nav>
+			<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 id="admin-link" aria-disabled="true" class="none">Admin</a>
 				<a href="login.html">Logout</a>
 			</nav>
 		</header>
@ -37,22 +40,34 @@
 						<legend>Disks</legend>
 						<div class="input-grid" id="disks" style="grid-template-columns: auto auto 1fr auto;"></div>
 						<div class="w3-container w3-center">
-							<img id="disk-add" src="images/actions/disk/add-disk.svg" class="clickable" alt="Add New Disk" title="Add New Disk">
+							<button type="button" id="disk-add" class="w3-button" aria-label="Add New Disk">
-							<img id="cd-add" src="images/actions/disk/add-cd.svg" class="clickable none" alt="Add New CDROM" title="Add New CDROM">
+								<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;">Add 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">
-							<img id="network-add" src="images/actions/network/add.svg" class="clickable" alt="Add New Network Interface" title="Add New Network Interface">
+							<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 1fr auto;"></div>
 						<div class="w3-container w3-center">
-							<img id="device-add" src="images/actions/device/add.svg" class="clickable" alt="Add New PCIe Device" title="Add New PCIe Device">
+							<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">
--- a/css/form.css
+++ b/css/form.css
@ -14,6 +14,13 @@
 	text-align: right;
 }
 /* sibling of input-grid that is not inside another input grid */
 :not(.input-grid) .input-grid + * {
 	display: inline-block;
 	width: 100%;
 	margin-top: 5px;
 }
 legend {
 	float: left;
 	width: 100%;
@ -53,3 +60,7 @@ input[type="radio"] {
 div[draggable="true"] {
 	cursor: grab;
 }
 .w3-select, select {
 	padding: 8px;
 }
--- a/css/nav.css
+++ b/css/nav.css
@ -1,15 +1,19 @@
 :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);
 	--nav-transition-speed: 250ms;
 }
-@media screen and (prefers-color-scheme: light) {
+	}
-	:root {
+
 	:root.light-theme {
 		--nav-bg-color: black;
 		--nav-text-color: white;
 		--nav-header-bg-color: #0f0;
@ -19,6 +23,27 @@
 	}
 }
@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;
--- a/css/style.css
+++ b/css/style.css
@ -3,16 +3,19 @@
 	--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;
-}
+	}
-@media screen and (prefers-color-scheme: light) {
+	:root.light-theme {
 	:root {
 		--main-bg-color: white;
 		--main-text-color: black;
 		--main-card-bg-color: white;
@ -22,6 +25,26 @@
 	}
 }
@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;
 }
@ -69,13 +92,14 @@ input, select, textarea {
 	color: var(--main-text-color);
 }
-img.clickable {
+img.clickable, svg.clickable {
 	cursor: pointer;
 }
-img {
+img, svg {
 	height: 1em;
 	width: 1em;
 	color: var(--main-text-color)
 }
 hr, * {
@ -113,14 +137,39 @@ hr, * {
 	min-height: 1em;
 }
-.w3-select, select {
+@media screen and (width >= 440px) {
-	padding: 8px;
+	button .large {
-	-moz-appearance: none;
+		display: block;
-	-webkit-appearance: none;
+	}
-	appearance: none;
+
-	appearance: none;
+	button .small {
-	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor:%23fff%7D@media (prefers-color-scheme:light)%7B:root%7Bcolor:%23000%7D%7D%3C/style%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 12.586l4.293-4.293a1 1 0 111.414 1.414l-5 5z' fill='currentColor'/%3E%3C/svg%3E");
+		display: none;
-	background-repeat: no-repeat;
+	}
-	background-position: right 8px top 50%;
+}
-	background-size: 1em auto;
+
@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/images/actions/delete-active.svg
+++ b/images/actions/delete-active.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/delete-inactive.svg
+++ b/images/actions/delete-inactive.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/device/add.svg
+++ b/images/actions/device/add.svg
@ -1 +0,0 @@
 <svg width="800" height="800" 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/images/actions/device/add.svg
+++ b/images/actions/device/add.svg
@ -0,0 +1 @@
 ../../common/add.svg
--- a/images/actions/device/config.svg
+++ b/images/actions/device/config.svg
@ -1,16 +0,0 @@
 <svg width="16" height="16" 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/images/actions/device/config.svg
+++ b/images/actions/device/config.svg
@ -0,0 +1 @@
 ../../common/config.svg
--- a/images/actions/disk/add-cd.svg
+++ b/images/actions/disk/add-cd.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/disk/add-disk.svg
+++ b/images/actions/disk/add-disk.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/disk/attach.svg
+++ b/images/actions/disk/attach.svg
@ -1 +1 @@
-<svg width="800" height="800" 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>
+<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/images/actions/disk/detach.svg
+++ b/images/actions/disk/detach.svg
@ -1 +1 @@
-<svg height="800" width="800" 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>
+<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/images/actions/disk/detach_attach-inactive.svg
+++ b/images/actions/disk/detach_attach-inactive.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"/>
+<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg"/>
--- a/images/actions/disk/move-active.svg
+++ b/images/actions/disk/move-active.svg
@ -1 +1 @@
-<svg width="800" height="800" 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>
+<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/images/actions/disk/move-inactive.svg
+++ b/images/actions/disk/move-inactive.svg
@ -1 +1 @@
-<svg width="800" height="800" 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>
+<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/images/actions/disk/resize-active.svg
+++ b/images/actions/disk/resize-active.svg
@ -1 +1 @@
-<svg width="800" height="800" 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>
+<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/images/actions/disk/resize-inactive.svg
+++ b/images/actions/disk/resize-inactive.svg
@ -1 +1 @@
-<svg width="800" height="800" 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>
+<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/images/actions/drag.svg
+++ b/images/actions/drag.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/group/add.svg
+++ b/images/actions/group/add.svg
@ -0,0 +1 @@
 ../../common/add.svg
--- a/images/actions/group/config.svg
+++ b/images/actions/group/config.svg
@ -0,0 +1 @@
 ../../common/config.svg
--- a/images/actions/instance/add.svg
+++ b/images/actions/instance/add.svg
@ -1 +0,0 @@
 <svg width="800" height="800" 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/images/actions/instance/add.svg
+++ b/images/actions/instance/add.svg
@ -0,0 +1 @@
 ../../common/add.svg
--- a/images/actions/instance/config-active.svg
+++ b/images/actions/instance/config-active.svg
@ -1 +0,0 @@
 <svg width="16" height="16" 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/images/actions/instance/config-active.svg
+++ b/images/actions/instance/config-active.svg
@ -0,0 +1 @@
 ../../common/config.svg
--- a/images/actions/instance/config-inactive.svg
+++ b/images/actions/instance/config-inactive.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/instance/console-active.svg
+++ b/images/actions/instance/console-active.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/instance/console-inactive.svg
+++ b/images/actions/instance/console-inactive.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/instance/start.svg
+++ b/images/actions/instance/start.svg
@ -1 +1 @@
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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>
+<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/images/actions/instance/stop.svg
+++ b/images/actions/instance/stop.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/actions/network/add.svg
+++ b/images/actions/network/add.svg
@ -1 +0,0 @@
 <svg width="800" height="800" 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/images/actions/network/add.svg
+++ b/images/actions/network/add.svg
@ -0,0 +1 @@
 ../../common/add.svg
--- a/images/actions/network/config.svg
+++ b/images/actions/network/config.svg
@ -1 +0,0 @@
 <svg width="16" height="16" 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/images/actions/network/config.svg
+++ b/images/actions/network/config.svg
@ -0,0 +1 @@
 ../../common/config.svg
--- a/images/actions/user/add.svg
+++ b/images/actions/user/add.svg
@ -0,0 +1 @@
 ../../common/add.svg
--- a/images/actions/user/config.svg
+++ b/images/actions/user/config.svg
@ -0,0 +1 @@
 ../../common/config.svg
--- a/images/common/add.svg
+++ b/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/images/common/config.svg
+++ b/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/images/common/search.svg
+++ b/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/images/favicon.svg
+++ b/images/favicon.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><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>
+<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/images/resources/cpu.svg
+++ b/images/resources/cpu.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/resources/device.svg
+++ b/images/resources/device.svg
@ -1 +1 @@
-<svg height="800" width="800" 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>
+<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/images/resources/disk.svg
+++ b/images/resources/disk.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/resources/drive.svg
+++ b/images/resources/drive.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/resources/network.svg
+++ b/images/resources/network.svg
@ -1 +1 @@
-<svg width="800" height="800" 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>
+<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/images/resources/ram.svg
+++ b/images/resources/ram.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/images/resources/swap.svg
+++ b/images/resources/swap.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21.986"><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>
+<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/images/static/search.svg
+++ b/images/static/search.svg
@ -1 +0,0 @@
 <svg width="800" height="800" 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/images/status/active.svg
+++ b/images/status/active.svg
@ -1 +1 @@
-<svg width="16" height="16" fill="#0f0" stroke="#none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
+<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/images/status/inactive.svg
+++ b/images/status/inactive.svg
@ -1 +1 @@
-<svg width="16" height="16" fill="#f00" stroke="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8"/></svg>
+<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/images/status/loading.svg
+++ b/images/status/loading.svg
@ -1 +1 @@
-<svg width="16" height="16" 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>
+<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/index.html
+++ b/index.html
@ -5,13 +5,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>proxmox - dashboard</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
-		<link rel="stylesheet" href="w3.css">
+		<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="scripts/instance.js" type="module"></script>
 		<script src="modules/wfa.js" type="module"></script>
 		<style>
 			#instance-container > div {
@ -24,23 +23,11 @@
 				#vm-search {
 					max-width: calc(100% - 10px - 152px);
 				}
 				button .large {
 					display: block;
 				}
 				button .small {
 					display: none;
 				}
 			}
 			@media screen and (width <= 440px) {
 				#vm-search {
 					max-width: calc(100% - 10px - 47px);
 				}
 				button .large {
 					display: none;
 				}
 				button .small {
 					display: block;
 				}
 			}
 		</style>
 	</head>
@ -49,10 +36,11 @@
 			<h1>proxmox</h1>
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
-			<nav>
+			<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 id="admin-link" aria-disabled="true" class="none">Admin</a>
 				<a href="login.html">Logout</a>
 			</nav>
 		</header>
@ -62,37 +50,23 @@
 				<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">
-							<img src="images/static/search.svg" alt="Search VMs">
+							<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>
-							<img class="small" style="height: 1lh; width: 1lh;" src="images/actions/instance/add.svg" alt="Create New Instance">
+							<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;">
-							<div class="w3-col l1 m2">
+							<p class="w3-col l1 m2 w3-hide-small">ID</p>
-								<p>ID</p>
+							<p class="w3-col l2 m3 w3-hide-small">Name</p>
-							</div>
+							<p class="w3-col l1 m2 w3-hide-small">Type</p>
-							<div class="w3-col l2 m3">
+							<p class="w3-col l2 m3 w3-hide-small">Status</p>
-								<p>Name</p>
+							<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Name</p>
-							</div>
+							<p class="w3-col l2 w3-hide-medium w3-hide-small">Host Status</p>
-							<div class="w3-col l1 m2">
+							<p class="w3-col l2 m2 w3-hide-small">Actions</p>
 								<p>Type</p>
 							</div>
 							<div class="w3-col l2 m3">
 								<p>Status</p>
 							</div>
 							<div class="w3-col l2 w3-hide-medium">
 								<p>Host Name</p>
 							</div>
 							<div class="w3-col l2 w3-hide-medium">
 								<p>Host Status</p>
 							</div>
 							<div class="w3-col l2 m2">
 								<p>Actions</p>
 							</div>
 						</div>
 						<div id="instance-container"></div>
 					</div>
--- a/login.html
+++ b/login.html
@ -5,10 +5,11 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>proxmox - dashboard</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
-		<link rel="stylesheet" href="w3.css">
+		<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>
@ -16,7 +17,7 @@
 			<h1>proxmox</h1>
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
-			<nav>
+			<nav id="navigation">
 				<a href="login.html" aria-current="page">Login</a>
 			</nav>
 		</header>
--- a/modules/Sortable.min.js
+++ b/modules/Sortable.min.js
--- a/modules/chart.js
+++ b/modules/chart.js
--- a/modules/w3.css
+++ b/modules/w3.css
--- a/modules/wfa.js
+++ b/modules/wfa.js
--- a/package.json
+++ b/package.json
@ -4,7 +4,7 @@
 	"description": "Front-end for ProxmoxAAS",
 	"type": "module",
 	"scripts": {
-		"lint": "html-validator --continue; stylelint --formatter verbose --fix **/*.css; DEBUG=eslint:cli-engine eslint --fix scripts/"
+		"lint": "html-validator --continue; stylelint --formatter verbose --fix css/*.css; DEBUG=eslint:cli-engine eslint --fix scripts/"
 	},
 	"devDependencies": {
 		"eslint": "^8.43.0",
--- a/scripts/account.js
+++ b/scripts/account.js
@ -1,5 +1,122 @@
 import { dialog } from "./dialog.js";
-import { requestAPI, goToPage, getCookie, setTitleAndHeader } from "./utils.js";
+import { requestAPI, goToPage, getCookie, setTitleAndHeader, 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);
@ -21,6 +138,7 @@ const prefixes = {
 };
 async function init () {
 	setAppearance();
 	setTitleAndHeader();
 	const cookie = document.cookie;
 	if (cookie === "") {
@ -130,7 +248,7 @@ function handlePasswordChangeForm () {
 	`;
 	const d = dialog("Change Password", body, async (result, form) => {
 		if (result === "confirm") {
-			const result = await requestAPI("/auth/password", "POST", { password: form.get("new-password") });
+			const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
 			if (result.status !== 200) {
 				alert(result.error);
 			}
--- a/scripts/admin.js
+++ b/scripts/admin.js
@ -0,0 +1,8 @@
 import { setTitleAndHeader, setAppearance } from "./utils.js";
 window.addEventListener("DOMContentLoaded", init);
 function init () {
 	setAppearance();
 	setTitleAndHeader();
 }
--- a/scripts/chart.js
+++ b/scripts/chart.js
@ -1,120 +0,0 @@
 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 = createChart(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;
 	}
 }
 function createChart (ctx, data) {
 	return new window.Chart(ctx, data);
 }
 // 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);
--- a/scripts/clientsync.js
+++ b/scripts/clientsync.js
@ -1,17 +1,8 @@
-import { requestAPI } from "./utils.js";
+import { getSyncSettings, requestAPI } from "./utils.js";
 import { API } from "../vars.js";
 export async function setupClientSync (callback) {
-	let scheme = localStorage.getItem("sync-scheme");
+	const { scheme, rate } = getSyncSettings();
 	let rate = Number(localStorage.getItem("sync-rate"));
 	if (!scheme) {
 		scheme = "always";
 		localStorage.setItem("sync-scheme", "always");
 	}
 	if (!rate) {
 		rate = "5";
 		localStorage.setItem("sync-rate", "5");
 	}
 	if (scheme === "always") {
 		callback();
--- a/scripts/config.js
+++ b/scripts/config.js
@ -1,11 +1,11 @@
-import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader, bootConfig } from "./utils.js";
+import { requestPVE, requestAPI, goToPage, getURIData, resourcesConfig, setTitleAndHeader, 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.pcie;
+const pcieMetaData = resourcesConfig.pci;
 const bootMetaData = bootConfig;
 let node;
@ -13,7 +13,35 @@ 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();
 	setTitleAndHeader();
 	const cookie = document.cookie;
 	if (cookie === "") {
@ -27,6 +55,9 @@ async function init () {
 	await getConfig();
 	const name = type === "qemu" ? "name" : "hostname";
 	document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
 	populateResources();
 	populateDisk();
 	populateNetworks();
@ -48,8 +79,7 @@ async function getConfig () {
 }
 async function populateResources () {
-	const name = type === "qemu" ? "name" : "hostname";
+	const field = document.querySelector("#resources");
 	document.querySelector("#name").innerHTML = document.querySelector("#name").innerHTML.replace("%{vmname}", config.data[name]);
 	if (type === "qemu") {
 		const global = await requestAPI("/global/config/resources");
 		const user = await requestAPI("/user/config/resources");
@ -75,63 +105,12 @@ async function populateResources () {
 				return a.localeCompare(b);
 			});
 		}
-		addResourceLine("resources", "images/resources/cpu.svg", "select", "CPU Type", "proctype", { value: config.data.cpu, options });
+		addResourceLine(resourcesConfigPage, field, "cpu", { value: config.data.cpu, options });
 	}
-	addResourceLine("resources", "images/resources/cpu.svg", "input", "CPU Amount", "cores", { type: "number", value: config.data.cores, min: 1, max: 8192 }, "Cores");
+	addResourceLine(resourcesConfigPage, field, "cores", { value: config.data.cores, min: 1, max: 8192 });
-	addResourceLine("resources", "images/resources/ram.svg", "input", "Memory", "ram", { type: "number", value: config.data.memory, min: 16, step: 1 }, "MiB");
+	addResourceLine(resourcesConfigPage, field, "memory", { value: config.data.memory, min: 16, step: 1 });
 	if (type === "lxc") {
-		addResourceLine("resources", "images/resources/swap.svg", "input", "Swap", "swap", { type: "number", value: config.data.swap, min: 0, step: 1 }, "MiB");
+		addResourceLine(resourcesConfigPage, field, "swap", { value: config.data.swap, min: 0, step: 1 });
 	}
 }
 function addResourceLine (fieldset, iconHref, type, labelText, id, attributes, unitText = null) {
 	const field = document.querySelector(`#${fieldset}`);
 	const icon = document.createElement("img");
 	icon.src = iconHref;
 	icon.alt = labelText;
 	field.append(icon);
 	const label = document.createElement("label");
 	label.innerText = labelText;
 	label.htmlFor = id;
 	field.append(label);
 	if (type === "input") {
 		const input = document.createElement("input");
 		for (const k in attributes) {
 			input.setAttribute(k, attributes[k]);
 		}
 		input.id = id;
 		input.name = id;
 		input.required = true;
 		input.classList.add("w3-input");
 		input.classList.add("w3-border");
 		field.append(input);
 	}
 	else if (type === "select") {
 		const select = document.createElement("select");
 		for (const option of attributes.options) {
 			select.append(new Option(option));
 		}
 		select.value = attributes.value;
 		select.id = id;
 		select.name = id;
 		select.required = true;
 		select.classList.add("w3-select");
 		select.classList.add("w3-border");
 		field.append(select);
 	}
 	if (unitText) {
 		const unit = document.createElement("p");
 		unit.innerText = unitText;
 		field.append(unit);
 	}
 	else {
 		const unit = document.createElement("div");
 		unit.classList.add("hidden");
 		field.append(unit);
 	}
 }
@ -167,9 +146,9 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 	const diskID = `${busPrefix}${device}`;
 	// Set the disk icon, either drive.svg or disk.svg
-	const icon = document.createElement("img");
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	icon.src = diskMetaData[type][busPrefix].icon;
+	setSVGSrc(icon, diskMetaData[type][busPrefix].icon);
-	icon.alt = diskName;
+	setSVGAlt(icon, diskName);
 	icon.dataset.disk = diskID;
 	field.append(icon);
@ -189,23 +168,24 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 	const actionDiv = document.createElement("div");
 	diskMetaData.actionBarOrder.forEach((element) => {
-		const action = document.createElement("img");
+		const action = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 		if (element === "detach_attach" && diskMetaData[type][busPrefix].actions.includes("attach")) { // attach
-			action.src = "images/actions/disk/attach.svg";
+			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
-			action.src = "images/actions/disk/detach.svg";
+			setSVGSrc(action, diskMetaData.actions.detach.src);
-			action.title = "Detach Disk";
+			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
-			action.src = `images/actions/delete-${active}.svg`;
+			setSVGSrc(action, `images/actions/delete-${active}.svg`);
-			action.title = "Delete Disk";
+			setSVGAlt(action, "Delete Disk");
 			if (active === "active") {
 				action.addEventListener("click", handleDiskDelete);
 				action.classList.add("clickable");
@ -213,9 +193,9 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 		}
 		else {
 			const active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
-			action.src = `images/actions/disk/${element}-${active}.svg`;
+			setSVGSrc(action, `images/actions/disk/${element}-${active}.svg`);
 			if (active === "active") {
-				action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
+				setSVGAlt(action, `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`);
 				if (element === "move") {
 					action.addEventListener("click", handleDiskMove);
 				}
@ -226,7 +206,6 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 			}
 		}
 		action.dataset.disk = diskID;
 		action.alt = action.title;
 		actionDiv.append(action);
 	});
 	field.append(actionDiv);
@ -238,7 +217,7 @@ async function handleDiskDetach () {
 	const body = `<p>Are you sure you want to detach disk ${disk}</p>`;
 	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
-			document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
+			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(result.error);
@ -255,14 +234,14 @@ async function handleDiskAttach () {
 	const body = `
 		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
 			<label for="device">${type === "qemu" ? "SATA" : "MP"}</label>
-			<input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required></input>
+			<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");
-			document.querySelector(`img[data-disk="${this.dataset.disk}"]`).src = "images/status/loading.svg";
+			setSVGSrc(document.querySelector(`svg[data-disk="${this.dataset.disk}"]`), "images/status/loading.svg");
 			const body = {
 				source: this.dataset.disk.replace("unused", "")
 			};
@ -284,14 +263,14 @@ async function handleDiskResize () {
 	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"></input>
+			<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;
-			document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
+			setSVGSrc(document.querySelector(`svg[data-disk="${disk}"]`), "images/status/loading.svg");
 			const body = {
 				size: form.get("size-increment")
 			};
@ -331,7 +310,7 @@ async function handleDiskMove () {
 	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
 			const disk = this.dataset.disk;
-			document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
+			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"
@ -354,7 +333,7 @@ async function handleDiskDelete () {
 	const body = `<p>Are you sure you want to <strong>delete</strong> disk${disk}</p>`;
 	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
-			document.querySelector(`img[data-disk="${disk}"]`).src = "images/status/loading.svg";
+			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(result.error);
@ -382,9 +361,9 @@ async function handleDiskAdd () {
 	const body = `
 		<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
-			<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>
+			<label for="device">${type === "qemu" ? "SATA" : "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></input>
+			<label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required>
 		</form>
 	`;
@ -415,7 +394,7 @@ async function handleCDAdd () {
 	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></input>
+			<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>
 	`;
@ -464,9 +443,9 @@ async function populateNetworks () {
 function addNetworkLine (fieldset, prefix, netID, netDetails) {
 	const field = document.querySelector(`#${fieldset}`);
-	const icon = document.createElement("img");
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	icon.src = "images/resources/network.svg";
+	setSVGSrc(icon, networkMetaData.icon);
-	icon.alt = `${prefix}${netID}`;
+	setSVGAlt(icon, `${prefix}${netID}`);
 	icon.dataset.network = netID;
 	icon.dataset.values = netDetails;
 	field.appendChild(icon);
@ -487,19 +466,19 @@ function addNetworkLine (fieldset, prefix, netID, netDetails) {
 	const actionDiv = document.createElement("div");
-	const configBtn = document.createElement("img");
+	const configBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	configBtn.classList.add("clickable");
-	configBtn.src = "images/actions/network/config.svg";
+	setSVGSrc(configBtn, "images/actions/network/config.svg");
-	configBtn.title = "Config Interface";
+	setSVGAlt(configBtn, "Config Interface");
 	configBtn.addEventListener("click", handleNetworkConfig);
 	configBtn.dataset.network = netID;
 	configBtn.dataset.values = netDetails;
 	actionDiv.appendChild(configBtn);
-	const deleteBtn = document.createElement("img");
+	const deleteBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	deleteBtn.classList.add("clickable");
-	deleteBtn.src = "images/actions/delete-active.svg";
+	setSVGSrc(deleteBtn, "images/actions/delete-active.svg");
-	deleteBtn.title = "Delete Interface";
+	setSVGAlt(deleteBtn, "Delete Interface");
 	deleteBtn.addEventListener("click", handleNetworkDelete);
 	deleteBtn.dataset.network = netID;
 	deleteBtn.dataset.values = netDetails;
@ -520,7 +499,7 @@ async function handleNetworkConfig () {
 	const d = dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
-			document.querySelector(`img[data-network="${netID}"]`).src = "images/status/loading.svg";
+			setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
 			const body = {
 				rate: form.get("rate")
 			};
@ -545,7 +524,7 @@ async function handleNetworkDelete () {
 	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
-			document.querySelector(`img[data-network="${netID}"]`).src = "images/status/loading.svg";
+			setSVGSrc(document.querySelector(`svg[data-network="${netID}"]`), "images/status/loading.svg");
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/net${netID}/delete`, "DELETE");
 			if (result.status !== 200) {
 				alert(result.error);
@ -565,7 +544,7 @@ async function handleNetworkAdd () {
 			<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\"></input>";
+		body += "<label for=\"name\">Interface Name</label><input type=\"text\" id=\"name\" name=\"name\" class=\"w3-input w3-border\">";
 	}
 	body += "</form>";
@ -614,9 +593,9 @@ async function populateDevices () {
 function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) {
 	const field = document.querySelector(`#${fieldset}`);
-	const icon = document.createElement("img");
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-	icon.src = "images/resources/device.svg";
+	setSVGSrc(icon, pcieMetaData.icon);
-	icon.alt = `${prefix}${deviceID}`;
+	setSVGAlt(icon, `${prefix}${deviceID}`);
 	icon.dataset.device = deviceID;
 	icon.dataset.values = deviceDetails;
 	icon.dataset.name = deviceName;
@ -633,20 +612,20 @@ function addDeviceLine (fieldset, prefix, deviceID, deviceDetails, deviceName) {
 	const actionDiv = document.createElement("div");
-	const configBtn = document.createElement("img");
+	const configBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	configBtn.classList.add("clickable");
-	configBtn.src = "images/actions/device/config.svg";
+	setSVGSrc(configBtn, "images/actions/device/config.svg");
-	configBtn.title = "Config Device";
+	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.createElement("img");
+	const deleteBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 	deleteBtn.classList.add("clickable");
-	deleteBtn.src = "images/actions/delete-active.svg";
+	setSVGSrc(deleteBtn, "images/actions/delete-active.svg");
-	deleteBtn.title = "Delete Device";
+	setSVGAlt(deleteBtn, "Delete Device");
 	deleteBtn.addEventListener("click", handleDeviceDelete);
 	deleteBtn.dataset.device = deviceID;
 	deleteBtn.dataset.values = deviceDetails;
@ -669,7 +648,7 @@ async function handleDeviceConfig () {
 	const d = dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
-			document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
+			setSVGSrc(document.querySelector(`svg[data-device="${deviceID}"]`), "images/status/loading.svg");
 			const body = {
 				device: form.get("device"),
 				pcie: form.get("pcie") ? 1 : 0
@ -698,7 +677,7 @@ async function handleDeviceDelete () {
 	dialog(header, body, async (result, form) => {
 		if (result === "confirm") {
-			document.querySelector(`img[data-device="${deviceID}"]`).src = "images/status/loading.svg";
+			setSVGSrc(document.querySelector(`svg[data-device="${deviceID}"]`), "images/status/loading.svg");
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/hostpci${deviceID}/delete`, "DELETE");
 			if (result.status !== 200) {
 				alert(result.error);
@ -782,14 +761,12 @@ function addBootLine (container, data, before = null) {
 	item.data = data;
 	item.innerHTML = `
 		<div style="display: grid; grid-template-columns: auto auto 8ch 1fr; column-gap: 10px; align-items: center;">
-			<img src="images/actions/drag.svg" id="drag" alt="drag icon">
+			<svg id="drag" role="application" aria-label="drag icon"><title>drag icon</title><use href="images/actions/drag.svg#symb"></use></svg>
-			<img src="${bootMetaData[data.prefix].icon}" alt="${bootMetaData[data.prefix].alt}">
+			<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.draggable = true;
 	item.classList.add("drop-target");
 	item.id = `boot-${data.id}`;
 	if (before) {
 		document.querySelector(`#${container}`).insertBefore(item, before);
@ -851,8 +828,6 @@ async function handleFormExit () {
 	}
 	const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/resources`, "POST", body);
 	if (result.status === 200) {
 		await getConfig();
 		populateDisk();
 		goToPage("index.html");
 	}
 	else {
--- a/scripts/draggable.js
+++ b/scripts/draggable.js
@ -1,39 +1,33 @@
-// Map valid UUIDs used by draggable-item elements in order to better validate data transfers to ignore random data transfers.
+const blank = document.createElement("img");
 const draggableItemUUIDs = {};
 /**
 * Get the data transfer source object by parsing its types. Valid draggable-item events have one type of the format `application/json/${uuid}`.
 * The function takes the entire type list from event.dataTransfer.types and returns the source object if valid, or null if invalid.
 * @param {*} typesList from event.dataTransfer.types
 * @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null
 */
 function getDragSource (typesList) {
 	if (typesList.length !== 1) {
 		return null;
 	}
 	const typeString = typesList[0];
 	const type = typeString.split("/");
 	if (type.length === 3 && type[0] === "application" && type[1] === "json" && draggableItemUUIDs[type[2]]) {
 		return { type: typeString, uuid: type[2], element: draggableItemUUIDs[type[2]] };
 	}
 	else {
 		return null;
 	}
 }
 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">
+			<div id="wrapper" style="padding-bottom: 1em;"></div>
 				<draggable-item id="bottom" class="drop-target"></draggable-item>
 			</div>
 		`;
 		this.content = this.shadowRoot.querySelector("#wrapper");
 		this.bottom = this.shadowRoot.querySelector("#bottom");
 		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 () {
@ -45,14 +39,10 @@ class DraggableContainer extends HTMLElement {
 	}
 	append (newNode) {
-		newNode.uuid = window.crypto.randomUUID();
+		this.content.appendChild(newNode, this.bottom);
 		draggableItemUUIDs[newNode.uuid] = newNode;
 		this.content.insertBefore(newNode, this.bottom);
 	}
 	insertBefore (newNode, referenceNode) {
 		newNode.uuid = window.crypto.randomUUID();
 		draggableItemUUIDs[newNode.uuid] = newNode;
 		this.content.insertBefore(newNode, referenceNode);
 	}
@ -62,7 +52,6 @@ class DraggableContainer extends HTMLElement {
 	removeChild (node) {
 		if (node && this.content.contains(node)) {
 			draggableItemUUIDs[node.uuid] = null;
 			this.content.removeChild(node);
 			return true;
 		}
@ -92,80 +81,19 @@ class DraggableItem extends HTMLElement {
 		// for whatever reason, only grid layout seems to respect the parent's content bounds
 		this.shadowRoot.innerHTML = `
 			<style>
-				#drag-over {
+				img, svg {
 					height: 1.5em; 
 					border: 1px dotted var(--main-text-color); 
 					border-radius: 5px; 
 					background-color: rgba(0,0,0,0.25); 
 				}
 				img {
 					height: 1em;
 					width: 1em;
 				}
 				* {
 					-webkit-box-sizing: border-box;
 					-moz-box-sizing: border-box;
 					box-sizing: border-box;
 				}
 			</style>
-			<div id="drag-over" style="display: none;"></div>
+			<div id="wrapper" part="wrapper"></div>
 			<div id="wrapper">
 				<div style="min-height: 1.5em;"></div>
 			</div>
 		`;
 		this.content = this.shadowRoot.querySelector("#wrapper");
 		// add drag and drop listeners
 		this.addEventListener("dragstart", (event) => {
 			this.content.style.opacity = "0.5";
 			const data = { id: this.id, data: this.data, content: this.content.innerHTML, value: this.value };
 			event.dataTransfer.setData(`application/json/${this.uuid}`, JSON.stringify(data));
 			event.dataTransfer.effectAllowed = "move";
 			const blank = document.createElement("img");
 			event.dataTransfer.setDragImage(blank, 0, 0);
 			setTimeout(() => {
 				this.content.style.visibility = "hidden";
 				this.content.style.height = "0";
 			}, 0);
 		});
 		this.addEventListener("dragend", (event) => {
 			if (event.dataTransfer.dropEffect === "move") {
 				this.parentElement.removeChild(this);
 			}
 			else {
 				this.content.attributeStyleMap.clear();
 			}
 		});
 		this.addEventListener("dragenter", (event) => {
 			const sourceElement = getDragSource(event.dataTransfer.types);
 			if (event.target.dropTarget && sourceElement) {
 				event.target.dragOver = sourceElement.element.innerHTML;
 			}
 			event.preventDefault();
 		});
 		this.addEventListener("dragleave", (event) => {
 			if (event.target.dragOver && getDragSource(event.dataTransfer.types)) {
 				event.target.dragOver = false;
 			}
 			event.preventDefault();
 		});
 		this.addEventListener("dragover", (event) => {
 			event.preventDefault();
 		});
 		this.addEventListener("drop", (event) => {
 			if (event.target.dragOver) {
 				event.target.dragOver = false;
 			}
 			const sourceElement = getDragSource(event.dataTransfer.types);
 			if (event.target.dropTarget && sourceElement) {
 				const transfer = JSON.parse(event.dataTransfer.getData(sourceElement.type));
 				const item = document.createElement("draggable-item");
 				item.data = transfer.data;
 				item.innerHTML = transfer.content;
 				item.draggable = true;
 				item.dropTarget = true;
 				item.id = transfer.id;
 				item.value = transfer.data.value;
 				item.uuid = sourceElement.uuid;
 				event.target.parentElement.insertBefore(item, event.target);
 			}
 			this.content.attributeStyleMap.clear();
 			event.preventDefault();
 		});
 	}
 	get innerHTML () {
@ -175,36 +103,6 @@ class DraggableItem extends HTMLElement {
 	set innerHTML (innerHTML) {
 		this.content.innerHTML = innerHTML;
 	}
 	get dropTarget () {
 		return this.classList.contains("drop-target");
 	}
 	set dropTarget (dropTarget) {
 		if (dropTarget) {
 			this.classList.add("drop-target");
 		}
 		else {
 			this.classList.remove("drop-target");
 		}
 	}
 	get dragOver () {
 		return this.classList.contains("drag-over");
 	}
 	set dragOver (dragOver) {
 		if (dragOver) {
 			this.classList.add("drag-over");
 			this.shadowRoot.querySelector("#drag-over").style.display = "block";
 			this.shadowRoot.querySelector("#drag-over").innerHTML = dragOver;
 		}
 		else {
 			this.classList.remove("drag-over");
 			this.shadowRoot.querySelector("#drag-over").style.display = "none";
 			this.shadowRoot.querySelector("#drag-over").innerHTML = "";
 		}
 	}
 }
 customElements.define("draggable-container", DraggableContainer);
--- a/scripts/index.js
+++ b/scripts/index.js
@ -1,13 +1,270 @@
-import { requestPVE, requestAPI, goToPage, setTitleAndHeader } from "./utils.js";
+import { requestPVE, requestAPI, goToPage, setTitleAndHeader, setAppearance, getSearchSettings, goToURL, instancesConfig, nodesConfig, setSVGSrc, setSVGAlt } from "./utils.js";
 import { alert, dialog } from "./dialog.js";
 import { setupClientSync } from "./clientsync.js";
-import wf_align from "../modules/wfa.js";
+import wfAlign 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 process returned stopped:${result.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("config.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(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();
 	setTitleAndHeader();
 	const cookie = document.cookie;
 	if (cookie === "") {
@ -39,33 +296,27 @@ async function getInstances () {
 }
 async function populateInstances () {
-	let searchCriteria = localStorage.getItem("search-criteria");
+	const searchCriteria = getSearchSettings();
 	if (!searchCriteria) {
 		searchCriteria = "fuzzy";
 		localStorage.setItem("search-criteria", "fuzzy");
 	}
 	const searchQuery = document.querySelector("#search").value || null;
 	let criteria;
 	if (!searchQuery) {
-		criteria = (a, b) => {
+		criteria = (item, query = null) => {
-			return (a.vmid > b.vmid) ? 1 : -1;
+			return { score: item.vmid, alignment: null };
 		};
 	}
 	else if (searchCriteria === "exact") {
-		criteria = (a, b) => {
+		criteria = (item, query) => {
-			const aInc = a.name.toLowerCase().includes(searchQuery.toLowerCase());
+			const substrInc = item.includes(query);
-			const bInc = b.name.toLowerCase().includes(searchQuery.toLowerCase());
+			if (substrInc) {
-			if (aInc && bInc) {
+				const substrStartIndex = item.indexOf(query);
-				return a.vmid > b.vmid ? 1 : -1;
+				const queryLength = query.length;
-			}
+				const remaining = item.length - substrInc - queryLength;
-			else if (aInc && !bInc) {
+				const alignment = `${"X".repeat(substrStartIndex)}${"M".repeat(queryLength)}${"X".repeat(remaining)}`;
-				return -1;
+				return { score: 1, alignment };
 			}
 			else if (!aInc && bInc) {
 				return 1;
 			}
 			else {
-				return a.vmid > b.vmid ? 1 : -1;
+				const alignment = `${"X".repeat(item.length)}`;
 				return { score: 0, alignment };
 			}
 		};
 	}
@ -73,15 +324,33 @@ async function populateInstances () {
 		const penalties = {
 			m: 0,
 			x: 1,
-			o: 1,
+			o: 0,
 			e: 1
 		};
-		criteria = (a, b) => {
+		criteria = (item, query) => {
 			// lower is better
-			const aAlign = wf_align(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
+			const { score, CIGAR } = wfAlign(query, item, penalties, true);
-			const aScore = aAlign.score / a.name.length;
+			return { score: score / item.length, alignment: CIGAR };
-			const bAlign = wf_align(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
+		};
-			const bScore = bAlign.score / b.name.length;
+	}
 	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++) {
 		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;
 		}
@ -89,16 +358,7 @@ async function populateInstances () {
 			return aScore - bScore;
 		}
 	};
-	}
+	instances.sort(sortCriteria);
 	instances.sort(criteria);
 	const instanceContainer = document.querySelector("#instance-container");
 	instanceContainer.innerHTML = "";
 	for (let i = 0; i < instances.length; i++) {
 		const newInstance = document.createElement("instance-card");
 		instances[i].searchQuery = searchQuery;
 		newInstance.data = instances[i];
 		instanceContainer.append(newInstance);
 	}
 }
 async function handleInstanceAdd () {
@ -114,26 +374,28 @@ async function handleInstanceAdd () {
 			<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></input>
+			<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></input>
+			<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></input>
+			<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></input>
+			<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></input>
+			<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></input>
+			<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></input>
+			<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" required disabled>
 			<label 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>
 	`;
@ -245,4 +507,14 @@ async function handleInstanceAdd () {
 		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/scripts/instance.js
+++ b/scripts/instance.js
@ -1,252 +0,0 @@
 import { requestPVE, requestAPI, goToPage, goToURL, instancesConfig, nodesConfig } from "./utils.js";
 import { PVE } from "../vars.js";
 import { dialog } from "./dialog.js";
 class InstanceCard extends HTMLElement {
 	constructor () {
 		super();
 		this.attachShadow({ mode: "open" });
 		this.shadowRoot.innerHTML = `
 			<link rel="stylesheet" href="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;">
 				<div class="w3-col l1 m2 s6">
 					<p id="instance-id"></p>
 				</div>
 				<div class="w3-col l2 m3 s6">
 					<p id="instance-name"></p>
 				</div>
 				<div class="w3-col l1 m2 w3-hide-small">
 					<p id="instance-type"></p>
 				</div>
 				<div class="w3-col l2 m3 s6 flex row nowrap">
 					<img id="instance-status-icon">
 					<p id="instance-status"></p>
 				</div>
 				<div class="w3-col l2 w3-hide-medium w3-hide-small">
 					<p id="node-name"></p>
 				</div>
 				<div class="w3-col l2 w3-hide-medium w3-hide-small flex row nowrap">
 					<img id="node-status-icon">
 					<p id="node-status"></p>
 				</div>
 				<div class="w3-col l2 m2 s6 flex row nowrap" style="height: 1lh;">
 					<img id="power-btn">
 					<img id="console-btn">
 					<img id="configure-btn">
 					<img id="delete-btn">
 				</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.searchQuery = data.searchQuery;
 		this.update();
 	}
 	update () {
 		const vmidParagraph = this.shadowRoot.querySelector("#instance-id");
 		vmidParagraph.innerText = this.vmid;
 		const nameParagraph = this.shadowRoot.querySelector("#instance-name");
 		if (this.searchQuery) {
 			const regExpEscape = v => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 			const escapedQuery = regExpEscape(this.searchQuery);
 			const searchRegExp = new RegExp(`(${escapedQuery})`, "gi");
 			const nameParts = this.name.split(searchRegExp);
 			for (let i = 0; i < nameParts.length; i++) {
 				const part = document.createElement("span");
 				part.innerText = nameParts[i];
 				if (nameParts[i].toLowerCase() === this.searchQuery.toLowerCase()) {
 					part.style = "color: var(--lightbg-text-color); background-color: var(--highlight-color);";
 				}
 				nameParagraph.append(part);
 			}
 		}
 		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");
 		statusIcon.src = instancesConfig[this.status].status.src;
 		statusIcon.alt = 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");
 		nodeStatusIcon.src = nodesConfig[this.node.status].status.src;
 		nodeStatusIcon.alt = nodesConfig[this.node.status].status.src;
 		const powerButton = this.shadowRoot.querySelector("#power-btn");
 		powerButton.src = instancesConfig[this.status].power.src;
 		powerButton.alt = instancesConfig[this.status].power.alt;
 		powerButton.title = 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");
 		configButton.src = instancesConfig[this.status].config.src;
 		configButton.alt = instancesConfig[this.status].config.alt;
 		configButton.title = 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");
 		consoleButton.src = instancesConfig[this.status].console.src;
 		consoleButton.alt = instancesConfig[this.status].console.alt;
 		consoleButton.title = 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");
 		deleteButton.src = instancesConfig[this.status].delete.src;
 		deleteButton.alt = instancesConfig[this.status].delete.alt;
 		deleteButton.title = 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 process returned stopped:${result.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 conig page with the node infor in the search query
 			goToPage("config.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(result.error);
 						this.status = this.prevStatus;
 						this.update();
 						this.actionLock = false;
 					}
 				}
 			});
 		}
 	}
 }
 customElements.define("instance-card", InstanceCard);
--- a/scripts/login.js
+++ b/scripts/login.js
@ -1,11 +1,12 @@
-import { requestTicket, goToPage, deleteAllCookies, requestPVE, setTitleAndHeader } from "./utils.js";
+import { goToPage, requestPVE, setTitleAndHeader, setAppearance, requestAPI } from "./utils.js";
 import { alert } from "./dialog.js";
 window.addEventListener("DOMContentLoaded", init);
 async function init () {
 	setTitleAndHeader();
 	await deleteAllCookies();
 	setAppearance();
 	setTitleAndHeader();
 	const formSubmitButton = document.querySelector("#submit");
 	const realms = await requestPVE("/access/domains", "GET");
 	const realmSelect = document.querySelector("#realm");
@ -41,3 +42,12 @@ async function init () {
 		}
 	});
 }
 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/scripts/settings.js
+++ b/scripts/settings.js
@ -1,8 +1,9 @@
-import { setTitleAndHeader } from "./utils.js";
+import { setTitleAndHeader, setAppearance } from "./utils.js";
 window.addEventListener("DOMContentLoaded", init);
 function init () {
 	setAppearance();
 	setTitleAndHeader();
 	const scheme = localStorage.getItem("sync-scheme");
 	if (scheme) {
@ -16,6 +17,10 @@ function init () {
 	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);
 }
@ -25,5 +30,6 @@ function handleSaveSettings (event) {
 	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/scripts/utils.js
+++ b/scripts/utils.js
@ -1,6 +1,30 @@
 import { API, organization } 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: {
@ -14,12 +38,31 @@ export const resourcesConfig = {
 			ide: { name: "IDE", icon: "images/resources/disk.svg", actions: ["delete"] },
 			sata: { name: "SATA", 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"
 	},
-	pcie: {
+	pci: {
 		name: "Devices",
 		icon: "images/resources/device.svg",
 		id: "devices",
 		unitText: null,
 		prefix: "hostpci"
 	}
 };
@ -161,11 +204,6 @@ export function getCookie (cname) {
 	return "";
 }
 export async function requestTicket (username, password, realm) {
 	const response = await requestAPI("/auth/ticket", "POST", { username: `${username}@${realm}`, password }, false);
 	return response;
 }
 export async function requestPVE (path, method, body = null) {
 	const prms = new URLSearchParams(body);
 	const content = {
@ -259,11 +297,186 @@ export function getURIData () {
 	return Object.fromEntries(url.searchParams);
 }
-export async function deleteAllCookies () {
+export async function setTitleAndHeader () {
 	await requestAPI("/auth/ticket", "DELETE");
 }
 export function setTitleAndHeader () {
 	document.title = `${organization} - dashboard`;
 	document.querySelector("h1").innerText = organization;
 	if (getCookie("auth") === "1") {
 		const userIsAdmin = (await requestAPI("/user/config/cluster")).admin;
 		if (userIsAdmin) {
 			const adminNavLink = document.querySelector("#navigation #admin-link");
 			adminNavLink.href = "admin.html";
 			adminNavLink.classList.remove("none");
 			adminNavLink.ariaDisabled = false;
 		}
 	}
 }
 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);
 }
 export function addResourceLine (config, field, resourceType, attributesOverride, labelPrefix = null) {
 	const resourceConfig = config[resourceType];
 	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);
 	if (elementType === "input") {
 		const input = document.createElement("input");
 		for (const k in attributes) {
 			input.setAttribute(k, attributes[k]);
 		}
 		input.id = id;
 		input.name = id;
 		input.required = true;
 		input.classList.add("w3-input");
 		input.classList.add("w3-border");
 		field.append(input);
 	}
 	else if (elementType === "select" || elementType === "multi-select") {
 		const select = document.createElement("select");
 		for (const option of attributes.options) {
 			select.append(new Option(option));
 		}
 		select.value = attributes.value;
 		select.id = id;
 		select.name = id;
 		select.required = true;
 		select.classList.add("w3-select");
 		select.classList.add("w3-border");
 		if (elementType === "multi-select") {
 			select.setAttribute("multiple", true);
 		}
 		field.append(select);
 	}
 	else if (customElements.get(elementType)) {
 		const elem = document.createElement(elementType);
 		if (attributes.options) {
 			for (const option of attributes.options) {
 				elem.append(new Option(option));
 			}
 		}
 		elem.value = attributes.value;
 		elem.id = id;
 		elem.name = id;
 		elem.required = true;
 		field.append(elem);
 	}
 	if (unitText) {
 		const unit = document.createElement("p");
 		unit.innerText = unitText;
 		field.append(unit);
 	}
 	else {
 		const unit = document.createElement("div");
 		unit.classList.add("hidden");
 		field.append(unit);
 	}
 }
--- a/settings.html
+++ b/settings.html
@ -5,7 +5,8 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>proxmox - dashboard</title>
 		<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
-		<link rel="stylesheet" href="w3.css">
+		<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">
@ -36,18 +37,18 @@
 			<h1>proxmox</h1>
 			<label for="navtoggle">&#9776;</label>
 			<input type="checkbox" id="navtoggle">
-			<nav>
+			<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 id="admin-link" aria-disabled="true" class="none">Admin</a>
 				<a href="login.html">Logout</a>
 			</nav>
 		</header>
 		<main>
 			<section>
 			<h2>Settings</h2>
 			<form id = "settings">
-					<div class="w3-card w3-padding">
+				<section class="w3-card w3-padding">
 					<h3>Synchronization Settings</h3>
 					<fieldset>
 						<legend>App Sync Method</legend>
@ -64,8 +65,8 @@
 							<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>
-					</div>
+				</section>
-					<div class="w3-card w3-padding">
+				<section class="w3-card w3-padding">
 					<h3>Search Settings</h3>
 					<fieldset>
 						<legend>Instance Search Criteria</legend>
@ -74,12 +75,23 @@
 						<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>
-					</div>
+				</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>
 			</section>
 		</main>
 	</body>
 </html>
Author	SHA1	Message	Date
Arthur Lu	39822819cc	fix issue in input grid style	2024-09-05 16:37:57 +00:00
Arthur Lu	912cee33c7	move addResourceLine to utils, localize page specific resource line values in page script	2024-08-31 12:31:29 +00:00
Arthur Lu	746136724f	implement proper match highlighting in vm search feature	2024-08-25 03:09:41 +00:00
Arthur Lu	07bf4b0967	update search icon link	2024-08-24 04:45:49 +00:00
Arthur Lu	4b57c5c8e8	move search icon to common	2024-08-13 19:03:11 +00:00
Arthur Lu	7ec72a7443	simplify buttons in config/index, include form.css in login	2024-08-12 17:11:44 +00:00
Arthur Lu	58007a38b2	readd style to svg for external use	2024-08-09 19:59:03 +00:00
Arthur Lu	d574df8410	remove custom background from select, move select styles to form.css	2024-08-08 19:50:16 +00:00
Arthur Lu	e1ef7998f6	update wfa.js	2024-08-07 19:54:33 +00:00
Arthur Lu	3a8d9df103	add password confirm to create new container instance	2024-08-05 20:45:37 +00:00
Arthur Lu	b4fd1278cd	add config icons to users/groups	2024-08-02 20:14:37 +00:00
Arthur Lu	c11c3579f3	replace wfa.js with v0.0.2 (minified)	2024-07-30 20:52:27 +00:00
Arthur Lu	9a6a9e4473	move w3.css to modules, move InstanceCard to index.js, move ResourceChart to account.js	2024-07-26 18:34:14 +00:00
Arthur Lu	4a69c58125	switch img icons to svg to fix issues with user selected themes	2024-07-24 19:32:40 +00:00
Arthur Lu	bb3edcb005	add local chartjs module	2024-07-22 21:36:44 +00:00
Arthur Lu	77a060db6b	fix issues in boot order drag and drop selector	2024-07-17 19:49:13 +00:00
Arthur Lu	6de16ec656	user and group add icons	2024-07-16 19:25:25 +00:00
Arthur Lu	db06522d15	add admin page, move requestTicket and deleteAllCookies to login.js, update to new auth paths	2024-07-16 19:00:30 +00:00
Arthur Lu	019a3a4455	fix duplicate styles	2024-06-24 18:19:02 +00:00
Arthur Lu	f58abd4d4d	move local settings to utils	2024-06-17 21:02:15 +00:00
Arthur Lu	d3281fc27f	add color theme option	2024-06-14 06:17:15 +00:00
Arthur Lu	d2cfbdb2a2	add missing tabindex to instance buttons	2024-06-12 21:48:29 +00:00
Arthur Lu	53d820b685	remove width/height from svg icons	2024-06-10 20:04:05 +00:00
alu	bbfc77dc04	Merge pull request 'Add fuzzy search using WFA' (#2 ) from wfa-fuzzy-search into main Reviewed-on: #2	2024-06-05 22:19:10 +00:00
		`@ -1 +1 @@`
			`<svg width="16" height="16" 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>`				`<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>`
		`@ -1 +1 @@`
			`<svg width="16" height="16" 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>`				`<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>`
		`@ -1 +0,0 @@`
			`<svg width="800" height="800" 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>`
		`@ -1 +1 @@`
			`<svg width="16" height="16" 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>`				`<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>`
		`@ -1 +1 @@`
			`<svg width="16" height="16" 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>`				`<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>`
		`@ -1 +1 @@`
			`<svg height="800" width="800" 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>`				`<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>`
		`@ -1 +1 @@`
			`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"/>`				`<svg id="symb" role="img" aria-label="" xmlns="http://www.w3.org/2000/svg"/>`
		`@ -1 +1 @@`
			`<svg width="800" height="800" 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>`				`<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>`
		`@ -1 +1 @@`
			`<svg width="800" height="800" 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>`				`<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>`