own auth

2026-01-29 09:01:54 +08:00 · 2018-12-15 04:29:40 +03:00
parent 3445766a50
commit 3c33bd3719
74 changed files with 388 additions and 136 deletions
--- a/web/share/android-chrome-192x192.png
+++ b/web/share/android-chrome-192x192.png
--- a/web/share/apple-touch-icon.png
+++ b/web/share/apple-touch-icon.png
--- a/web/share/css/index/index.css
+++ b/web/share/css/index/index.css
@@ -0,0 +1,84 @@
+div#start-box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	min-height: 100vh;
+}
+
+div#start {
+	text-align: left;
+	outline: none;
+	word-wrap: break-word;
+	max-width: 800px;
+	border: var(--border-window-thin);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--shadow-big);
+	background-color: var(--cs-window-default-bg);
+	padding: 15px;
+}
+
+div#start div#apps-box {
+	display: table;
+	margin: 0 auto;
+}
+
+div#start div#apps-box ul#apps {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+}
+
+div#start div#apps-box ul#apps li {
+	float: left;
+	margin-left: 5px;
+	margin-right: 5px;
+}
+
+div#start div#apps-box ul#apps li div.app {
+	height: 100px;
+	width: 100px;
+	text-align: center;
+	background-color: var(--cs-control-default-bg);
+	box-shadow: var(--shadow-micro);
+	border: var(--border-key-thin);
+	border-radius: 8px;
+}
+
+div#start div#apps-box ul#apps li div:hover.app {
+	border: var(--border-intensive-thin);
+	box-shadow: none;
+}
+
+div#start div#apps-box ul#apps li div.app img {
+	display: block;
+	margin: auto;
+	height: 50px;
+	padding-bottom: 5px;
+}
+
+div#start div#apps-box ul#apps li div.app a {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	height: 100%;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+div#start td.logo {
+	padding-right: 25px;
+}
+div#start td.title {
+	font-size: 1.2em;
+}
+div#start td.copyright {
+	font-size: 0.8em;
+}
+div#start tr.server {
+	font-size: 1.4em;
+	font-weight: bold;
+	font-family: monospace;
+}
--- a/web/share/css/kvm/about.css
+++ b/web/share/css/kvm/about.css
@@ -0,0 +1,28 @@
+div#about {
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	user-select: text;
+	max-width: 600px;
+	white-space: normal;
+	padding: 5px 5px 5px 5px;
+}
+
+div#about td.logo {
+	padding-right: 25px;
+}
+
+div#about td.title {
+	font-size: 1.2em;
+}
+
+div#about td.copyright {
+	font-size: 0.8em;
+}
+
+div#about tr.version {
+	font-family: monospace;
+}
+
+div#about div#about-meta {
+	height: 200px;
+}
--- a/web/share/css/kvm/hid.css
+++ b/web/share/css/kvm/hid.css
@@ -0,0 +1,21 @@
+textarea#hid-pak-text {
+	display: block;
+	resize: none;
+	width: 100%;
+	height: 40px;
+	color: var(--cs-window-default-fg);
+	background-color: var(--cs-window-default-bg);
+	border: none;
+	outline: 0 !important;
+	-webkit-appearance:none;
+}
+
+textarea#hid-pak-text::-moz-placeholder {
+	line-height: 40px;
+	text-align: center;
+}
+
+textarea#hid-pak-text::-webkit-input-placeholder {
+	line-height: 40px;
+	text-align: center;
+}
--- a/web/share/css/kvm/keyboard.css
+++ b/web/share/css/kvm/keyboard.css
@@ -0,0 +1,146 @@
+div.keyboard {
+	zoom: 0.8;
+}
+
+div.keyboard div.keyboard-block {
+	display: table-cell;
+	padding-right: 0;
+}
+div.keyboard div.keyboard-block:not(:first-child) {
+	padding-left: 15px;
+}
+
+div.keyboard div.keyboard-row {
+	white-space: nowrap;
+	height: 40px;
+	margin-bottom: 5px;
+}
+div.keyboard div.keyboard-row:last-child {
+	margin-bottom: 0;
+}
+
+div.keyboard div.key, div.modifier, div.empty-key {
+	box-sizing: border-box;
+	display: inline-block;
+	margin-right: 5px;
+	padding: 0;
+	width: 40px;
+}
+div.keyboard div.key, div.modifier {
+	font-size: 0.9em;
+	text-align: center;
+	vertical-align: top;
+	box-shadow: var(--shadow-micro);
+	border: var(--border-key-thin);
+	border-radius: 6px;
+	color: var(--cs-key-default-fg);
+	background-color: var(--cs-key-default-bg);
+	cursor: pointer;
+	height: 40px;
+}
+div.keyboard div.key:hover, div.modifier:hover {
+	color: var(--cs-key-hovered-fg);
+	background-color: var(--cs-key-hovered-bg);
+}
+div.keyboard div.pressed {
+	box-shadow: none;
+	color: var(--cs-key-pressed-fg) !important;
+	background-color: var(--cs-key-pressed-bg) !important;
+}
+div.keyboard div.holded {
+	box-shadow: none;
+	color: var(--cs-key-default-fg) !important;
+	background-color: var(--cs-key-holded-bg) !important;
+}
+div.keyboard div.key:last-child, div.empty-key:last-child, div.modifier:last-child {
+	margin-right: 0;
+}
+div.keyboard div.margin-0 {
+	margin-right: 0px;
+}
+div.keyboard div.wide-0 {
+	width: 26px;
+}
+div.keyboard div.wide-1 {
+	width: 61px;
+}
+div.keyboard div.wide-2 {
+	width: 64px;
+}
+div.keyboard div.wide-3 {
+	width: 77px;
+}
+div.keyboard div.wide-4 {
+	width: 102px;
+}
+div.keyboard div.wide-5 {
+	width: 288px;
+}
+div.keyboard div.left {
+	text-align: left !important;
+	padding-left: 6px !important;
+}
+div.keyboard div.right {
+	text-align: right !important;
+	padding-right: 6px !important;
+}
+div.keyboard div.small {
+	font-size: 0.7em;
+}
+
+div.keyboard p {
+	margin: 0;
+	position: relative;
+	top: 50%;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+div.keyboard b {
+	color: var(--cs-key-holded-bg);
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div#keyboard-window {
+		visibility: visible !important;
+		padding-top: 9px !important;
+		padding-bottom: 30px !important;
+		border-bottom: 0 !important;
+		border-left: 0 !important;
+		border-right: 0 !important;
+		border-radius: 0 !important;
+		top: unset !important;
+		bottom: 0 !important;
+		width: 100% !important;
+		left: 50% !important;
+		-webkit-transform: translateX(-50%) !important;
+		transform: translateX(-50%) !important;
+	}
+	div#keyboard-window-header {
+		display: none !important
+	}
+}
+
+div#keyboard-desktop {
+	display: block;
+}
+div#keyboard-mobile {
+	display: none;
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad */
+	div.keyboard {
+		zoom: 1.28 !important;
+	}
+
+	div.keyboard div.key:hover, div.modifier:hover {
+		color: var(--cs-key-default-fg);
+		background-color: var(--cs-key-default-bg);
+	}
+
+	div#keyboard-desktop {
+		display: none !important;
+	}
+	div#keyboard-mobile {
+		display: block !important;
+	}
+}
--- a/web/share/css/kvm/msd.css
+++ b/web/share/css/kvm/msd.css
@@ -0,0 +1,22 @@
+div#msd-menu {
+	width: 450px;
+}
+
+div#msd-menu div.msd-message, input.msd-message {
+	display: none;
+}
+
+div#msd-menu table.msd-info {
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	user-select: text;
+	border-spacing: 5px;
+	margin: 0 10px 0 10px;
+	font-size: 12px;
+}
+
+div#msd-menu table.msd-info td.msd-info-value {
+	font-weight: bold;
+	max-width: 310px;
+	overflow: hidden;
+}
--- a/web/share/css/kvm/stream.css
+++ b/web/share/css/kvm/stream.css
@@ -0,0 +1,90 @@
+div#stream-info {
+	display: none;
+}
+
+div#stream-box {
+	position: relative;
+	display: inline-block;
+	border: var(--border-window-thin);
+}
+div.stream-box-inactive::after {
+	cursor: wait;
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: inline-block;
+	background: radial-gradient(transparent 20%, black);
+}
+div.stream-box-mouse-enabled {
+	cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
+}
+
+img#stream-image {
+	width: 640px;
+	height: 480px;
+	display: block;
+	background-color: black;
+}
+
+img.stream-image-active {
+	-webkit-filter: none;
+	filter: none;
+}
+
+img.stream-image-inactive {
+	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
+	filter: grayscale(100%) brightness(75%) sepia(75%);
+}
+
+div.stream-slider-box {
+	margin-top: 5px;
+	display: flex;
+}
+
+table#stream-auto-resize-box {
+	width: 100%;
+	border-collapse: collapse;
+}
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		table#stream-auto-resize-box {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
+
+div#stream-mouse-buttons {
+	display: none;
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div#stream-window {
+		padding-top: 3px !important;
+		border-top: 0 !important;
+		border-radius: 0 0 8px 8px !important;
+		top: 50px !important;
+		left: 50% !important;
+		-webkit-transform: translateX(-50%) !important;
+		transform: translateX(-50%) !important;
+	}
+	div#stream-window-header {
+		display: none !important;
+	}
+	div#stream-info {
+		display: block !important;
+		margin: 0;
+		padding: 0;
+		padding-bottom: 3px;
+		font-size: 0.8em;
+		color: var(--cs-window-header-default-fg);
+	}
+	div#stream-mouse-buttons {
+		display: block !important;
+	}
+}
--- a/web/share/css/leds.css
+++ b/web/share/css/leds.css
@@ -0,0 +1,63 @@
+@-webkit-keyframes spin {
+	100% {
+		-webkit-transform: rotate(360deg);
+	}
+}
+@keyframes spin {
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+:root {
+	--led-filter-gray: invert(0.5);
+	--led-filter-green: invert(0.5) sepia(1) saturate(5) hue-rotate(100deg);
+	--led-filter-red: invert(0.5) sepia(1) saturate(15) hue-rotate(320deg);
+	--led-filter-yellow: invert(0.5) sepia(1) saturate(5) hue-rotate(0deg);
+
+	--led-spin-slow: spin 6s linear infinite;
+	--led-spin-medium: spin 3s linear infinite;
+	--led-spin-fast: spin 2s linear infinite;
+}
+
+img.led-gray {
+	-webkit-filter: var(--led-filter-gray);
+	filter: var(--led-filter-gray);
+}
+
+img.led-green {
+	-webkit-filter: var(--led-filter-green);
+	filter: var(--led-filter-green);
+}
+
+img.led-red {
+	-webkit-filter: var(--led-filter-red);
+	filter: var(--led-filter-red);
+}
+
+img.led-yellow {
+	-webkit-filter: var(--led-filter-yellow);
+	filter: var(--led-filter-yellow);
+}
+
+img.led-green-rotating-medium {
+	-webkit-filter: var(--led-filter-green);
+	filter: var(--led-filter-green);
+	-webkit-animation: var(--led-spin-medium);
+	animation: var(--led-spin-medium);
+}
+
+img.led-yellow-rotating-slow {
+	-webkit-filter: var(--led-filter-yellow);
+	filter: var(--led-filter-yellow);
+	-webkit-animation: var(--led-spin-slow);
+	animation: var(--led-spin-slow);
+}
+
+img.led-yellow-rotating-fast {
+	-webkit-filter: var(--led-filter-yellow);
+	filter: var(--led-filter-yellow);
+	-webkit-animation: var(--led-spin-fast);
+	animation: var(--led-spin-fast);
+}
--- a/web/share/css/login/login.css
+++ b/web/share/css/login/login.css
@@ -0,0 +1,25 @@
+div#login-box {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	min-height: 100vh;
+}
+
+div#login {
+	text-align: left;
+	outline: none;
+	word-wrap: break-word;
+	max-width: 400px;
+	border: var(--border-window-thin);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--shadow-big);
+	background-color: var(--cs-window-default-bg);
+	padding: 15px;
+}
+
+input[type="text"]#user-input, input[type="password"]#passwd-input {
+	text-align: center;
+}
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -0,0 +1,179 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	color: var(--cs-page-default-fg);
+	background-color: var(--cs-page-default-bg);
+	font-family: sans-serif !important;
+}
+body.body-no-select {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	touch-action: manipulation;
+}
+
+a {
+	color: var(--cs-page-default-fg);
+}
+
+hr {
+	border: none;
+	border-top: var(--border-default-thin);
+}
+
+p.text {
+	text-align: justify;
+}
+p:not(:first-child).text {
+	margin-top: 0;
+}
+p:last-child.text {
+	margin-bottom: 0;
+}
+
+div.code {
+	white-space: nowrap;
+	overflow-x: auto;
+	font-family: monospace;
+	border-radius: 4px;
+	color: var(--cs-code-default-fg);
+	background-color: var(--cs-code-default-bg);
+	padding: 10px;
+}
+div.code::-webkit-scrollbar {
+    width: 8px;
+	height: 8px;
+}
+div.code::-webkit-scrollbar-thumb {
+	border-radius: 4px;
+	background: var(--cs-scroll-default-bg);
+}
+
+div.code span.code-comment {
+	color: var(--cs-code-comment-fg);
+}
+
+img.svg-gray {
+	-webkit-filter: invert(0.7);
+	filter: invert(0.7);
+	vertical-align: middle;
+}
+
+button, select {
+	box-shadow: none;
+	border: none;
+	border-radius: 4px;
+	color: var(--cs-control-default-fg);
+	background-color: var(--cs-control-default-bg);
+	display: block;
+	width: 100%;
+	height: 30px;
+	font-size: 16px;
+	outline: none;
+	cursor: pointer;
+}
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	/* If we have a mouse cursor */
+	button:enabled:hover, select:enabled:hover {
+		color: var(--cs-control-hovered-fg);
+		background-color: var(--cs-control-hovered-bg) !important;
+	}
+	button:active, select:active {
+		color: var(--cs-control-pressed-fg) !important;
+	}
+	select:enabled:hover {
+		background-image: url("../svg/select-arrow-intensive.svg") !important;
+	}
+}
+@media (hover: none) {
+	/* If we DON'T have a mouse cursor */
+	button:active, select:active {
+		color: var(--cs-control-hovered-fg);
+		background-color: var(--cs-control-hovered-bg);
+	}
+}
+button:disabled, select:disabled {
+	color: var(--cs-control-disabled-fg);
+	cursor: default;
+}
+
+select {
+	-webkit-appearance: button;
+	-moz-appearance: button;
+	appearance: button;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background-image: url("../svg/select-arrow-normal.svg");
+	background-position: center right;
+	background-repeat: no-repeat;
+}
+select:disabled {
+	background-image: url("../svg/select-arrow-inactive.svg") !important;
+}
+select:active {
+	color: var(--cs-control-intensive-fg) !important;
+	background-color: var(--cs-bg-control-intensive) !important;
+	background-image: url("../svg/select-arrow-intensive.svg") !important;
+}
+
+input[type=text], input[type=password] {
+	overflow-x: auto;
+	font-family: monospace;
+	border: thin;
+	border-radius: 4px;
+	color: var(--cs-code-default-fg);
+	background-color: var(--cs-code-default-bg);
+	padding: 2px;
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	button, select, input[type=text], input[type=password] {
+		height: 45px !important;
+	}
+}
+
+div.buttons-row {
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+.row50 {
+	display: inline-block;
+	width: 50%;
+}
+.row25 {
+	display: inline-block;
+	width: 25%;
+}
+.row16 {
+	display: inline-block;
+	width: 16.66%
+}
+.row50:not(:first-child), .row25:not(:first-child), .row16:not(:first-child) {
+	border-left: var(--border-control-thin);
+}
+
+ul.footer {
+	list-style-type: none;
+	bottom: 0;
+	position: fixed;
+	width: 100%;
+	padding: 0;
+	font-size: 0.7em;
+	color: var(--cs-page-obscure-fg);
+	z-index: -10;
+}
+ul.footer li {
+	padding: 0 10px;
+}
+ul.footer li.footer-left {
+	float: left;
+}
+ul.footer li.footer-right {
+	float: right;
+}
+ul.footer li a {
+	color: var(--cs-page-obscure-fg);
+}
--- a/web/share/css/menu.css
+++ b/web/share/css/menu.css
@@ -0,0 +1,113 @@
+ul#menu {
+	box-shadow: var(--shadow-small);
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	background-color: var(--cs-menu-default-bg);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 50px;
+	z-index: 2147483646;
+}
+
+ul#menu li.menu-right-items {
+	float: right;
+}
+
+ul#menu li.menu-left-items {
+	float: left;
+}
+
+ul#menu li a#menu-logo {
+	line-height: 50px;
+	outline: none;
+	cursor: pointer;
+	border-right: var(--border-menu-thin);
+	display: inline-block;
+	color: var(--cs-menu-default-fg);
+	padding-left: 16px;
+	padding-right: 16px;
+	text-decoration: none;
+}
+
+ul#menu img {
+	vertical-align: middle;
+	margin-right: 10px;
+	height: 20px;
+}
+
+ul#menu li a#menu-logo img {
+	margin-top: -2px;
+	height: 24px;
+}
+
+ul#menu li a.menu-item {
+	line-height: 50px;
+	outline: none;
+	cursor: pointer;
+	border-left: var(--border-menu-thin);
+	display: inline-block;
+	color: var(--cs-menu-default-fg);
+	padding-left: 16px;
+	padding-right: 16px;
+	text-decoration: none;
+}
+
+ul#menu li a#menu-logo:hover:not(.active), a.menu-item:hover:not(.active) {
+	background-color: var(--cs-menu-hovered-bg);
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad 8 */
+	ul#menu li a#menu-item:hover:not(.active), a.menu-item:hover:not(.active) {
+		background-color: var(--cs-menu-default-bg) !important;
+	}
+}
+
+ul#menu li a.menu-item-selected {
+	box-shadow: var(--shadow-menu-pressed);
+	background-color: var(--cs-menu-pressed-bg) !important;
+}
+
+ul#menu li div.menu-item-content {
+	visibility: hidden;
+	outline: none;
+	overflow: hidden;
+	white-space: nowrap;
+	border: var(--border-menu-item-content-default-2px);
+	border-top: var(--border-menu-item-content-top-thin);
+	border-radius: 0 0 8px 8px;
+	position: absolute;
+	background-color: var(--cs-menu-default-bg);
+	min-width: 180px;
+	box-shadow: var(--shadow-big);
+	z-index: 2147483645;
+}
+ul#menu li div.menu-item-content-active {
+	border: var(--border-menu-item-content-active-2px) !important;
+	border-top: var(--border-menu-item-content-top-thin) !important;
+}
+
+ul#menu li div.menu-item-content-buttons {
+	background-color: var(--cs-control-default-bg);
+}
+
+ul#menu li div.menu-item-content-text {
+	margin: 10px 15px 10px 15px;
+	font-size: 14px;
+}
+
+ul#menu li div.menu-item-content button, select {
+	border-radius: 0;
+	text-align: left;
+	padding: 0 16px;
+}
+
+ul#menu li div.menu-item-content hr {
+	margin: 0;
+	display: block;
+	height: 0px;
+	padding: 0;
+	border: none;
+	border-top: var(--border-control-thin);
+}
--- a/web/share/css/modals.css
+++ b/web/share/css/modals.css
@@ -0,0 +1,58 @@
+div.modal {
+	visibility: hidden;
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 2147483647;
+}
+
+div.modal div.modal-window {
+	display: table;
+	outline: none;
+	margin: 15% auto;
+	overflow: hidden;
+	border: var(--border-window-thin);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--shadow-big);
+	background-color: var(--cs-window-default-bg);
+	padding: 0;
+}
+div.modal div.modal-window-active {
+	border: var(--border-intensive-2px) !important;
+}
+
+div.modal div.modal-window div.modal-header {
+	text-align: center;
+	font-weight: bold;
+	padding: 3px 9px 3px 9px;
+	border-bottom: var(--border-default-thin);
+}
+
+div.modal div.modal-window div.modal-content {
+	max-width: 500px;
+	max-height: 500px;
+	padding: 16px 9px 16px 9px;
+}
+
+div.modal div.modal-window div.modal-buttons {
+	border-top: var(--border-control-thin);
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+div.modal div.modal-window div.modal-buttons button {
+	border-radius: 0;
+	height: 40px;
+}
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	/* iPad vertical */
+	div.modal-buttons button {
+		height: 50px !important;
+	}
+}
--- a/web/share/css/progress.css
+++ b/web/share/css/progress.css
@@ -0,0 +1,23 @@
+div.progress {
+	background-color: var(--cs-progress-default-bg);
+	height: 1.5em;
+	width: 100%;
+	position: relative;
+}
+
+div.progress:before {
+	color: var(--cs-progress-default-fg);
+	content: attr(data-label);
+	font-size: 0.8em;
+	position: absolute;
+	text-align: center;
+	top: 4px;
+	left: 0;
+	right: 0;
+}
+
+div.progress span.progress-value {
+	background-color: var(--cs-progress-bar-bg);
+	display: inline-block;
+	height: 100%;
+}
--- a/web/share/css/sliders.css
+++ b/web/share/css/sliders.css
@@ -0,0 +1,78 @@
+@supports (-webkit-appearance:none) {
+	input[type=range].slider {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		background: transparent;
+		margin: 8px 0 8px 0;
+		-webkit-appearance: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+}
+@supports not (-webkit-appearance:none) {
+	input[type=range].slider {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		input[type=range].slider {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
+input[type=range].slider:disabled {
+	cursor: default;
+}
+
+input[type=range].slider::-webkit-slider-runnable-track {
+	height: 5px;
+	background: var(--cs-control-default-bg);
+	border-radius: 3px;
+}
+input[type=range].slider:disabled::-webkit-slider-runnable-track {
+	cursor: default;
+}
+
+input[type=range].slider::-webkit-slider-thumb {
+	border: var(--border-intensive-2px);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--cs-thumb-default-bg);
+	-webkit-appearance: none;
+	margin-top: -7px;
+}
+input[type=range].slider:disabled::-webkit-slider-thumb {
+	cursor: default;
+	border: var(--border-default-2px);
+	background: var(--cs-thumb-disabled-bg);
+}
+
+input[type=range].slider::-moz-range-track {
+	height: 5px;
+	background: var(--cs-control-default-bg);
+	border-radius: 3px;
+}
+input[type=range].slider:disabled::-moz-range-track {
+	cursor: default;
+}
+
+input[type=range].slider::-moz-range-thumb {
+	border: var(--border-intensive-2px);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--cs-thumb-default-bg);
+}
+input[type=range].slider:disabled::-moz-range-thumb {
+	cursor: default;
+	border: var(--border-default-2px);
+	background: var(--cs-thumb-disabled-bg);
+}
--- a/web/share/css/switches.css
+++ b/web/share/css/switches.css
@@ -0,0 +1,76 @@
+div.switch-box {
+	display: inline-block;
+	vertical-align: middle;
+	position: relative;
+	width: 50px;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+}
+
+div.switch-box input[type=checkbox].switch-checkbox {
+	display: none;
+}
+
+div.switch-box label.switch-label {
+	display: block;
+	overflow: hidden;
+	cursor: pointer;
+	border: none;
+	border-radius: 15px;
+}
+
+div.switch-box label.switch-label span.switch-inner {
+	display: block;
+	width: 200%;
+	margin-left: -100%;
+}
+
+div.switch-box label.switch-label span.switch-inner:before, span.switch-inner:after {
+	display: block;
+	float: left;
+	width: 50%;
+	height: 20px;
+	padding: 0;
+	line-height: 22px;
+	font-size: 10px;
+	font-family: sans-serif !important;
+	font-weight: bold;
+	box-sizing: border-box;
+}
+
+div.switch-box label.switch-label span.switch-inner:before {
+	content: "ON";
+	padding-left: 5px;
+	background-color: var(--cs-control-default-bg);
+	color: var(--cs-control-default-fg);
+	text-align: left;
+}
+
+div.switch-box label.switch-label span.switch-inner:after {
+	content: "OFF";
+	padding-right: 5px;
+	background-color: var(--cs-control-default-bg);
+	color: var(--cs-control-disabled-fg);
+	text-align: right;
+}
+
+div.switch-box label.switch-label span.switch {
+	display: block;
+	width: 15px;
+	margin: 0px;
+	background: var(--cs-thumb-default-bg);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 31px;
+	border: var(--border-intensive-2px);
+	border-radius: 15px;
+}
+
+div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch-inner {
+	margin-left: 0;
+}
+
+div.switch-box input[type=checkbox].switch-checkbox:checked + label.switch-label span.switch {
+	right: 0px;
+}
--- a/web/share/css/vars.css
+++ b/web/share/css/vars.css
@@ -0,0 +1,63 @@
+:root {
+	--cs-page-default-bg: #36393f;
+	--cs-page-default-fg: #c3c3c3;
+	--cs-page-obscure-fg: #6c7481;
+
+	--cs-control-default-bg: #36393f;
+	--cs-control-default-fg: #c3c3c3;
+	--cs-control-intensive-fg: white;
+	--cs-control-hovered-bg: #17191d;
+	--cs-control-hovered-fg: white;
+	--cs-control-pressed-fg: #6c7481;
+	--cs-control-disabled-fg: #6c7481;
+
+	--cs-menu-default-bg: #202225;
+	--cs-menu-default-fg: #c3c3c3;
+	--cs-menu-hovered-bg: #1a1c1f;
+	--cs-menu-pressed-bg: #171717;
+
+	--cs-window-default-bg: #484b51;
+	--cs-window-default-fg: #c3c3c3;
+	--cs-window-header-default-fg: #aaaaaa;
+	--cs-window-header-grabbed-bg: #436a8a;
+	--cs-window-header-grabbed-fg: white;
+	--cs-window-closer-default-fg: #6c7481;
+
+	--cs-code-default-bg: #17191d;
+	--cs-code-default-fg: #aaaaaa;
+	--cs-code-comment-fg: #6c7481;
+
+	--cs-scroll-default-bg: #6c7481;
+	--cs-thumb-default-bg: #436a8a;
+	--cs-thumb-disabled-bg: #202225;
+
+	--cs-progress-default-bg: #171717;
+	--cs-progress-default-fg: white;
+	--cs-progress-bar-bg: #436a8a;
+
+	--cs-key-default-bg: #3b3e43;
+	--cs-key-default-fg: #c3c3c3;
+	--cs-key-hovered-bg: #202225;
+	--cs-key-hovered-fg: white;
+	--cs-key-pressed-bg: #17191d;
+	--cs-key-pressed-fg: #6c7481;
+	--cs-key-holded-bg: #436a8a;
+
+	--shadow-micro: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
+	--shadow-small: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+	--shadow-big: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
+	--shadow-menu-pressed: 0 5px 0 #5b90bb inset;
+
+	--border-default-thin: thin solid #36393f;
+	--border-default-2px: 2px solid #36393f;
+	--border-menu-thin: thin solid black;
+	--border-control-thin: thin solid #17191d;
+	--border-window-thin: thin solid #17191d;
+	--border-key-thin: thin solid #202225;
+	--border-intensive-2px: 2px solid #5b90bb;
+	--border-intensive-thin: thin solid #5b90bb;
+
+	--border-menu-item-content-default-2px: 2px solid black;
+	--border-menu-item-content-active-2px: 2px solid #5b90bb;
+	--border-menu-item-content-top-thin: thin solid #17191d;
+}
--- a/web/share/css/windows.css
+++ b/web/share/css/windows.css
@@ -0,0 +1,74 @@
+div.window {
+	visibility: hidden;
+	outline: none;
+	overflow: hidden;
+	position: fixed;
+	border: var(--border-window-thin);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--shadow-big);
+	white-space: nowrap;
+	color: var(--cs-window-default-fg);
+	background-color: var(--cs-window-default-bg);
+	padding: 30px 9px 9px 9px;
+}
+div.window-active {
+	border: var(--border-intensive-2px) !important;
+}
+
+div.window div.window-header {
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	padding: 0;
+	height: 20px;
+	font-size: 0.8em;
+	color: var(--cs-window-header-default-fg);
+	border-bottom: var(--border-default-thin);
+}
+
+div.window div.window-header div.window-grab {
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	height: 20px;
+	cursor: move;
+	padding: 3px 0 2px 20px;
+}
+
+div.window div.window-header-grabbed {
+	color: var(--cs-window-header-grabbed-fg);
+	background-color: var(--cs-window-header-grabbed-bg);
+	border-bottom: var(--border-intensive-thin);
+}
+
+div.window div.window-header button.window-button-close {
+	position: absolute;
+	top: -2px;
+	right: -6px;
+	width: 44px;
+	height: 24px;
+	padding-left: 0;
+	color: var(--cs-window-closer-default-fg);
+	display: inline-block;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad */
+	div.window {
+		padding-top: 45px !important;
+	}
+	div.window div.window-header {
+		height: 35px !important;
+	}
+	div.window div.window-header div.window-grab {
+		height: 35px !important;
+	}
+	div.window div.window-header button.window-button-close {
+		height: 40px !important;
+	}
+}
--- a/web/share/favicon-16x16.png
+++ b/web/share/favicon-16x16.png
--- a/web/share/favicon-32x32.png
+++ b/web/share/favicon-32x32.png
--- a/web/share/js/bb.js
+++ b/web/share/js/bb.js
@@ -0,0 +1,33 @@
+function checkBrowser() {
+	if (
+		!window.navigator
+		|| window.navigator.userAgent.indexOf("MSIE ") > 0
+		|| window.navigator.userAgent.indexOf("Trident/") > 0
+		|| window.navigator.userAgent.indexOf("Edge/") > 0
+	) {
+		var el_modal = document.createElement("div");
+		el_modal.className = "modal";
+		el_modal.style.visibility = "visible";
+		el_modal.innerHTML = `
+			<div class="modal-window">
+				<div class="modal-content">
+					Hello. You are using an incompatible or legacy browser.<br>
+					Please use one of the following browsers:
+					<hr>
+					<ul>
+						<li><a target="_blank" href="https://google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li>
+						<li><a target="_blank" href="https://chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li>
+						<li><a target="_blank" href="https://mozilla.org/firefox">Mozilla Firefox</a></li>
+						<li><a target="_blank" href="https://apple.com/safari">Apple Safari</a></li>
+						<li><a target="_blank" href="https://opera.com">Opera</a></li>
+						<li><a target="_blank" href="https://vivaldi.com">Vivaldi</a></li>
+					</ul>
+				</div>
+			</div>
+		`;
+		document.body.appendChild(el_modal);
+		return false;
+	} else {
+		return true;
+	}
+}
--- a/web/share/js/index/main.js
+++ b/web/share/js/index/main.js
@@ -0,0 +1,65 @@
+function main() {
+	if (checkBrowser()) {
+		__setAppText();
+		__loadKvmdInfo();
+	}
+}
+
+function __setAppText() {
+	$("app-text").innerHTML = `
+		<span class="code-comment"># On Linux using Chromium/Chrome via any terminal:<br>
+		$</span> \`which chromium 2>/dev/null || which chrome 2>/dev/null\` --app="${window.location.href}"<br>
+		<br>
+		<span class="code-comment"># On MacOS using Terminal application:<br>
+		$</span> /Applications/Google&bsol; Chrome.app/Contents/MacOS/Google&bsol; Chrome --app="${window.location.href}"<br>
+		<br>
+		<span class="code-comment"># On Windows via cmd.exe:<br>
+		C:&bsol;&gt;</span> start chrome --app="${window.location.href}"
+	`;
+}
+
+function __loadKvmdInfo() {
+	var http = tools.makeRequest("GET", "/kvmd/info", function() {
+		if (http.readyState === 4) {
+			if (http.status === 200) {
+				var info = JSON.parse(http.responseText).result;
+
+				var apps = Object.values(info.extras).sort(function(a, b) {
+					if (a["place"] < b["place"]) {
+						return -1;
+					} else if (a["place"] > b["place"]) {
+						return 1;
+					} else {
+						return 0;
+					}
+				});
+
+				$("apps-box").innerHTML = "<ul id=\"apps\"></ul>";
+				apps.forEach(function(app) {
+					$("apps").innerHTML += `
+						<li>
+							<div class="app">
+								<a href="${app.path}">
+									<div>
+										<img class="svg-gray" src="${app.icon}">
+										${app.name}
+									</div>
+								</a>
+							</div>
+						</li>
+					`;
+				});
+
+				if (info.meta && info.meta.server && info.meta.server.host) {
+					$("kvmd-meta-server-host").innerHTML = info.meta.server.host;
+					document.title = "Pi-KVM Index: " + info.meta.server.host;
+				} else {
+					$("kvmd-meta-server-host").innerHTML = "";
+					document.title = "Pi-KVM Index";
+				}
+			} else {
+				setTimeout(__loadKvmdInfo, 1000);
+			}
+		}
+	});
+}
--- a/web/share/js/kvm/atx.js
+++ b/web/share/js/kvm/atx.js
@@ -0,0 +1,43 @@
+function Atx() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __init__ = function() {
+		$("atx-power-led").title = "Power Led";
+		$("atx-hdd-led").title = "Disk Activity Led";
+
+		tools.setOnClick($("atx-power-button"), () => __clickButton("power", "Are you sure to click the power button?"));
+		tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", "Are you sure to perform the long press of the power button?"));
+		tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", "Are you sure to reboot the server?"));
+	};
+
+	/********************************************************************************/
+
+	self.setState = function(state) {
+		$("atx-power-led").className = ((state && state.leds.power) ? "led-green" : "led-gray");
+		$("atx-hdd-led").className = ((state && state.leds.hdd) ? "led-red" : "led-gray");
+
+		wm.switchDisabled($("atx-power-button"), (!state || state.busy));
+		wm.switchDisabled($("atx-power-button-long"), (!state || state.busy));
+		wm.switchDisabled($("atx-reset-button"), (!state || state.busy));
+	};
+
+	var __clickButton = function(button, confirm_msg) {
+		wm.confirm(confirm_msg).then(function(ok) {
+			if (ok) {
+				var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
+					if (http.readyState === 4) {
+						if (http.status === 409) {
+							wm.error("Performing another ATX operation for other client.<br>Please try again later");
+						} else if (http.status !== 200) {
+							wm.error("Click error:<br>", http.responseText);
+						}
+					}
+				});
+			}
+		});
+	};
+
+	__init__();
+}
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -0,0 +1,198 @@
+function Hid() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __chars_to_codes = {};
+	var __codes_delay = 50;
+
+	var __keyboard = new Keyboard();
+	var __mouse = new Mouse();
+
+	var __init__ = function() {
+		var __hidden_attr = null;
+		var __visibility_change_attr = null;
+
+		if (typeof document.hidden !== "undefined") {
+			__hidden_attr = "hidden";
+			__visibility_change_attr = "visibilitychange";
+		} else if (typeof document.webkitHidden !== "undefined") {
+			__hidden_attr = "webkitHidden";
+			__visibility_change_attr = "webkitvisibilitychange";
+		} else if (typeof document.mozHidden !== "undefined") {
+			__hidden_attr = "mozHidden";
+			__visibility_change_attr = "mozvisibilitychange";
+		}
+
+		if (__visibility_change_attr) {
+			document.addEventListener(
+				__visibility_change_attr,
+				function() {
+					if (document[__hidden_attr]) {
+						__releaseAll();
+					}
+				},
+				false
+			);
+		}
+
+		window.addEventListener("pagehide", __releaseAll);
+		window.addEventListener("blur", __releaseAll);
+
+		__chars_to_codes = __buildCharsToCodes();
+
+		tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
+		tools.setOnClick($("hid-reset-button"), __clickResetButton);
+
+		Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) {
+			tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
+		});
+	};
+
+	/********************************************************************************/
+
+	self.setSocket = function(ws) {
+		wm.switchDisabled($("hid-pak-text"), !ws);
+		wm.switchDisabled($("hid-pak-button"), !ws);
+		wm.switchDisabled($("hid-reset-button"), !ws);
+		__ws = ws;
+		__keyboard.setSocket(ws);
+		__mouse.setSocket(ws);
+	};
+
+	var __releaseAll = function() {
+		__keyboard.releaseAll();
+	};
+
+	var __emitShortcut = function(codes) {
+		return new Promise(function(resolve) {
+			tools.debug("HID: emitting keys:", codes);
+
+			var raw_events = [];
+			[[codes, true], [codes.slice().reverse(), false]].forEach(function(op) {
+				var [op_codes, state] = op;
+				op_codes.forEach(function(code) {
+					raw_events.push({code: code, state: state});
+				});
+			});
+
+			var index = 0;
+			var iterate = () => setTimeout(function() {
+				__keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
+				++index;
+				if (index < raw_events.length) {
+					iterate();
+				} else {
+					resolve(null);
+				}
+			}, __codes_delay);
+			iterate();
+		});
+	};
+
+	var __buildCharsToCodes = function() {
+		var chars_to_codes = {
+			"\n": ["Enter"],
+			"\t": ["Tab"],
+			" ": ["Space"],
+			"`": ["Backquote"],   "~": ["ShiftLeft", "Backquote"],
+			"\\": ["Backslash"],  "|": ["ShiftLeft", "Backslash"],
+			"[": ["BracketLeft"], "{": ["ShiftLeft", "BracketLeft"],
+			"]": ["BracketLeft"], "}": ["ShiftLeft", "BracketRight"],
+			",": ["Comma"],       "<": ["ShiftLeft", "Comma"],
+			".": ["Period"],      ">": ["ShiftLeft", "Period"],
+			"1": ["Digit1"],      "!": ["ShiftLeft", "Digit1"],
+			"2": ["Digit2"],      "@": ["ShiftLeft", "Digit2"],
+			"3": ["Digit3"],      "#": ["ShiftLeft", "Digit3"],
+			"4": ["Digit4"],      "$": ["ShiftLeft", "Digit4"],
+			"5": ["Digit5"],      "%": ["ShiftLeft", "Digit5"],
+			"6": ["Digit6"],      "^": ["ShiftLeft", "Digit6"],
+			"7": ["Digit7"],      "&": ["ShiftLeft", "Digit7"],
+			"8": ["Digit8"],      "*": ["ShiftLeft", "Digit8"],
+			"9": ["Digit9"],      "(": ["ShiftLeft", "Digit9"],
+			"0": ["Digit0"],      ")": ["ShiftLeft", "Digit0"],
+			"-": ["Minus"],       "_": ["ShiftLeft", "Minus"],
+			"'": ["Quote"],       "\"": ["ShiftLeft", "Quote"],
+			";": ["Semicolon"],   ":": ["ShiftLeft", "Semicolon"],
+			"/": ["Slash"],       "?": ["ShiftLeft", "Slash"],
+			"=": ["Equal"],       "+": ["ShiftLeft", "Equal"],
+		};
+
+		for (var ch = "a".charCodeAt(0); ch <= "z".charCodeAt(0); ++ch) {
+			var low = String.fromCharCode(ch);
+			var up = low.toUpperCase();
+			var code = "Key" + up;
+			chars_to_codes[low] = [code];
+			chars_to_codes[up] = ["ShiftLeft", code];
+		}
+
+		return chars_to_codes;
+	};
+
+	var __clickPasteAsKeysButton = function() {
+		var text = $("hid-pak-text").value.replace(/[^\x00-\x7F]/g, "");  // eslint-disable-line no-control-regex
+		if (text) {
+			var clipboard_codes = [];
+			var codes_count = 0;
+			[...text].forEach(function(ch) {
+				var codes = __chars_to_codes[ch];
+				if (codes) {
+					codes_count += codes.length;
+					clipboard_codes.push(codes);
+				}
+			});
+			var time = __codes_delay * codes_count * 2 / 1000;
+
+			var confirm_msg = `
+				You are going to automatically type ${codes_count} characters from the system clipboard.
+				It will take ${time} seconds.<br>
+				<br>
+				Are you sure you want to continue?
+			`;
+
+			wm.confirm(confirm_msg).then(function(ok) {
+				if (ok) {
+					wm.switchDisabled($("hid-pak-text"), true);
+					wm.switchDisabled($("hid-pak-button"), true);
+					$("hid-pak-led").className = "led-yellow-rotating-fast";
+					$("hid-pak-led").title = "Autotyping...";
+
+					tools.debug("HID: paste-as-keys:", text);
+
+					var index = 0;
+					var iterate = function() {
+						__emitShortcut(clipboard_codes[index]).then(function() {
+							++index;
+							if (index < clipboard_codes.length && __ws) {
+								iterate();
+							} else {
+								$("hid-pak-text").value = "";
+								wm.switchDisabled($("hid-pak-text"), false);
+								wm.switchDisabled($("hid-pak-button"), false);
+								$("hid-pak-led").className = "led-gray";
+								$("hid-pak-led").title = "";
+							}
+						});
+					};
+					iterate();
+				} else {
+					$("hid-pak-text").value = "";
+				}
+			});
+		}
+	};
+
+	var __clickResetButton = function() {
+		var http = tools.makeRequest("POST", "/kvmd/hid/reset", function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					wm.error("HID reset error:<br>", http.responseText);
+				}
+			}
+		});
+	};
+
+	__init__();
+}
--- a/web/share/js/kvm/keyboard.js
+++ b/web/share/js/kvm/keyboard.js
@@ -0,0 +1,190 @@
+function Keyboard() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __keys = [].slice.call(document.querySelectorAll("div#keyboard-desktop div.keyboard-block div.keyboard-row div.key"));
+	var __modifiers = [].slice.call(document.querySelectorAll("div#keyboard-desktop div.keyboard-block div.keyboard-row div.modifier"));
+
+	var __init__ = function() {
+		$("hid-keyboard-led").title = "Keyboard free";
+
+		$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
+		$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
+		$("keyboard-window").onfocus = __updateLeds;
+		$("keyboard-window").onblur = __updateLeds;
+
+		$("stream-window").onkeydown = (event) => __keyboardHandler(event, true);
+		$("stream-window").onkeyup = (event) => __keyboardHandler(event, false);
+		$("stream-window").onfocus = __updateLeds;
+		$("stream-window").onblur = __updateLeds;
+
+		window.addEventListener("focusin", __updateLeds);
+		window.addEventListener("focusout", __updateLeds);
+
+		Array.prototype.forEach.call($$("key"), function(el_key) {
+			tools.setOnDown(el_key, () => __clickHandler(el_key, true));
+			tools.setOnUp(el_key, () => __clickHandler(el_key, false));
+			el_key.onmouseout = function() {
+				if (__isPressed(el_key)) {
+					__clickHandler(el_key, false);
+				}
+			};
+		});
+
+		Array.prototype.forEach.call($$("modifier"), function(el_key) {
+			tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
+		});
+
+		if (tools.browser.is_mac) {
+			tools.info("Keyboard: enabled Mac-CMD-Hook");
+		}
+	};
+
+	/********************************************************************************/
+
+	self.setSocket = function(ws) {
+		if (ws !== __ws) {
+			self.releaseAll();
+			__ws = ws;
+		}
+		__updateLeds();
+	};
+
+	self.releaseAll = function() {
+		__keys.concat(__modifiers).forEach(function(el_key) {
+			if (__isActive(el_key)) {
+				self.fireEvent(el_key.getAttribute("data-key"), false);
+			}
+		});
+	};
+
+	self.fireEvent = function(code, state) {
+		__keyboardHandler({code: code}, state);
+	};
+
+	var __updateLeds = function() {
+		tools.debug("Keyboard: update leds");
+		if (
+			__ws && (
+				$("stream-window").classList.contains("window-active")
+				|| $("keyboard-window").classList.contains("window-active")
+			)
+		) {
+			$("hid-keyboard-led").className = "led-green";
+			$("hid-keyboard-led").title = "Keyboard captured";
+		} else {
+			$("hid-keyboard-led").className = "led-gray";
+			$("hid-keyboard-led").title = "Keyboard free";
+		}
+	};
+
+	var __keyboardHandler = function(event, state) {
+		if (event.preventDefault) {
+			event.preventDefault();
+		}
+		var el_key = document.querySelector(`[data-key='${event.code}']`);
+		if (el_key && !event.repeat) {
+			__commonHandler(el_key, state, "pressed");
+			if (tools.browser.is_mac) {
+				// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
+				// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
+				if ((event.code === "MetaLeft" || event.code === "MetaRight") && !state) {
+					__keys.forEach(function(el_key) {
+						if (__isActive(el_key)) {
+							self.fireEvent(el_key.getAttribute("data-key"), false);
+						}
+					});
+				}
+			}
+			__unholdModifiers();
+		}
+	};
+
+	var __clickHandler = function(el_key, state) {
+		__commonHandler(el_key, state, "pressed");
+		__unholdModifiers();
+	};
+
+	var __toggleModifierHandler = function(el_key) {
+		__commonHandler(el_key, !__isActive(el_key), "holded");
+	};
+
+	var __unholdModifiers = function() {
+		__modifiers.forEach(function(el_key) {
+			if (__isHolded(el_key)) {
+				__deactivate(el_key);
+				__sendKey(el_key, false);
+			}
+		});
+	};
+
+	var __commonHandler = function(el_key, state, cls) {
+		if (state && !__isActive(el_key)) {
+			__deactivate(el_key);
+			__activate(el_key, cls);
+			__sendKey(el_key, true);
+		} else {
+			__deactivate(el_key);
+			__sendKey(el_key, false);
+		}
+	};
+
+	var __isPressed = function(el_key) {
+		var is_pressed = false;
+		Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) {
+			is_pressed = (is_pressed || el_key.classList.contains("pressed"));
+		});
+		return is_pressed;
+	};
+
+	var __isHolded = function(el_key) {
+		var is_holded = false;
+		Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) {
+			is_holded = (is_holded || el_key.classList.contains("holded"));
+		});
+		return is_holded;
+	};
+
+	var __isActive = function(el_key) {
+		var is_active = false;
+		Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) {
+			is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
+		});
+		return is_active;
+	};
+
+	var __activate = function(el_key, cls) {
+		Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) {
+			el_key.classList.add(cls);
+		});
+	};
+
+	var __deactivate = function(el_key) {
+		Array.prototype.forEach.call(__resolveKeys(el_key), function(el_key) {
+			el_key.classList.remove("pressed");
+			el_key.classList.remove("holded");
+		});
+	};
+
+	var __resolveKeys = function(el_key) {
+		var code = el_key.getAttribute("data-key");
+		return document.querySelectorAll(`[data-key='${code}']`);
+	};
+
+	var __sendKey = function(el_key, state) {
+		var code = el_key.getAttribute("data-key");
+		tools.debug("Keyboard: key", (state ? "pressed:" : "released:"), code);
+		if (__ws) {
+			__ws.send(JSON.stringify({
+				event_type: "key",
+				key: code,
+				state: state,
+			}));
+		}
+	};
+
+	__init__();
+}
--- a/web/share/js/kvm/main.js
+++ b/web/share/js/kvm/main.js
@@ -0,0 +1,16 @@
+var wm;
+
+function main() {
+	if (checkBrowser()) {
+		wm = new WindowManager();
+
+		tools.setOnClick($("show-about-button"), () => wm.showWindow($("about-window")));
+		tools.setOnClick($("show-keyboard-button"), () => wm.showWindow($("keyboard-window")));
+		tools.setOnClick($("show-stream-button"), () => wm.showWindow($("stream-window")));
+		tools.setOnClick($("open-log-button"), () => window.open("/kvmd/log?seek=3600&follow=1", "_blank"));
+
+		wm.showWindow($("stream-window"));
+
+		new Session();
+	}
+}
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -0,0 +1,160 @@
+function Mouse() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __current_pos = {x: 0, y:0};
+	var __sent_pos = {x: 0, y:0};
+	var __wheel_delta = {x: 0, y: 0};
+
+	var __stream_hovered = false;
+
+	var __init__ = function() {
+		$("hid-mouse-led").title = "Mouse free";
+
+		$("stream-box").onmouseenter = __hoverStream;
+		$("stream-box").onmouseleave = __leaveStream;
+		$("stream-box").onmousedown = (event) => __buttonHandler(event, true);
+		$("stream-box").onmouseup = (event) => __buttonHandler(event, false);
+		$("stream-box").oncontextmenu = (event) => event.preventDefault();
+		$("stream-box").onmousemove = __moveHandler;
+		$("stream-box").onwheel = __wheelHandler;
+		$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
+
+		Array.prototype.forEach.call(document.querySelectorAll("[data-mouse-button]"), function(el_button) {
+			var button = el_button.getAttribute("data-mouse-button");
+			tools.setOnDown(el_button, () => __sendButton(button, true));
+			tools.setOnUp(el_button, () => __sendButton(button, false));
+		});
+
+		setInterval(__sendMove, 100);
+	};
+
+	/********************************************************************************/
+
+	self.setSocket = function(ws) {
+		__ws = ws;
+		if (ws) {
+			$("stream-box").classList.add("stream-box-mouse-enabled");
+		} else {
+			$("stream-box").classList.remove("stream-box-mouse-enabled");
+		}
+		__updateLeds();
+	};
+
+	var __hoverStream = function() {
+		__stream_hovered = true;
+		__updateLeds();
+	};
+
+	var __leaveStream = function() {
+		__stream_hovered = false;
+		__updateLeds();
+	};
+
+	var __updateLeds = function() {
+		if (__ws && (__stream_hovered || tools.browser.is_ios)) {
+			// Mouse is always available on iOS via touchscreen
+			$("hid-mouse-led").className = "led-green";
+			$("hid-mouse-led").title = "Mouse tracked";
+		} else {
+			$("hid-mouse-led").className = "led-gray";
+			$("hid-mouse-led").title = "Mouse free";
+		}
+	};
+
+	var __buttonHandler = function(event, state) {
+		// https://www.w3schools.com/jsref/event_button.asp
+		event.preventDefault();
+		switch (event.button) {
+			case 0: __sendButton("left", state); break;
+			case 2: __sendButton("right", state); break;
+		}
+	};
+
+	var __touchMoveHandler = function(event) {
+		event.preventDefault();
+		if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
+			var rect = event.touches[0].target.getBoundingClientRect();
+			__current_pos = {
+				x: Math.round(event.touches[0].clientX - rect.left),
+				y: Math.round(event.touches[0].clientY - rect.top),
+			};
+			__sendMove();
+		}
+	};
+
+	var __moveHandler = function(event) {
+		var rect = event.target.getBoundingClientRect();
+		__current_pos = {
+			x: Math.round(event.clientX - rect.left),
+			y: Math.round(event.clientY - rect.top),
+		};
+	};
+
+
+	var __sendButton = function(button, state) {
+		tools.debug("Mouse: button", (state ? "pressed:" : "released:"), button);
+		__sendMove();
+		if (__ws) {
+			__ws.send(JSON.stringify({
+				event_type: "mouse_button",
+				button: button,
+				state: state,
+			}));
+		}
+	};
+
+	var __sendMove = function() {
+		var pos = __current_pos;
+		if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
+			var el_stream_image = $("stream-image");
+			var to = {
+				x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
+				y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
+			};
+
+			tools.debug("Mouse: moved:", to);
+			if (__ws) {
+				__ws.send(JSON.stringify({
+					event_type: "mouse_move",
+					to: to,
+				}));
+			}
+			__sent_pos = pos;
+		}
+	};
+
+	var __translate = function(x, a, b, c, d) {
+		return Math.round((x - a) / (b - a) * (d - c) + c);
+	};
+
+	var __wheelHandler = function(event) {
+		// https://learn.javascript.ru/mousewheel
+		if (event.preventDefault) {
+			event.preventDefault();
+		}
+
+		var delta = {x: 0, y: 0};
+
+		__wheel_delta.y += event.deltaY;
+		if (Math.abs(__wheel_delta.y) >= 100) {
+			delta.y = __wheel_delta.y / Math.abs(__wheel_delta.y) * (-5);
+			__wheel_delta.y = 0;
+		}
+
+		if (delta.y) {
+			tools.debug("Mouse: scrolled:", delta);
+			if (__ws) {
+				__ws.send(JSON.stringify({
+					event_type: "mouse_wheel",
+					delta: delta,
+				}));
+			}
+		}
+	};
+
+	__init__();
+}
--- a/web/share/js/kvm/msd.js
+++ b/web/share/js/kvm/msd.js
@@ -0,0 +1,193 @@
+function Msd() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __state = null;
+	var __upload_http = null;
+	var __image_file = null;
+
+	var __init__ = function() {
+		$("msd-led").title = "Unknown state";
+
+		$("msd-select-new-image-file").onchange = __selectNewImageFile;
+		tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
+
+		tools.setOnClick($("msd-upload-new-image-button"), __clickUploadNewImageButton);
+		tools.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton);
+
+		tools.setOnClick($("msd-switch-to-kvm-button"), () => __clickSwitchButton("kvm"));
+		tools.setOnClick($("msd-switch-to-server-button"), () => __clickSwitchButton("server"));
+
+		tools.setOnClick($("msd-reset-button"), __clickResetButton);
+	};
+
+	/********************************************************************************/
+
+	self.setState = function(state) {
+		__state = state;
+		__applyState();
+	};
+
+	var __clickUploadNewImageButton = function() {
+		var form_data = new FormData();
+		form_data.append("image_name", __image_file.name);
+		form_data.append("image_data", __image_file);
+
+		__upload_http = new XMLHttpRequest();
+		__upload_http.open("POST", "/kvmd/msd/write", true);
+		__upload_http.upload.timeout = 5000;
+		__upload_http.onreadystatechange = __uploadStateChange;
+		__upload_http.upload.onprogress = __uploadProgress;
+		__upload_http.send(form_data);
+	};
+
+	var __clickAbortUploadingButton = function() {
+		__upload_http.onreadystatechange = null;
+		__upload_http.upload.onprogress = null;
+		__upload_http.abort();
+		__upload_http = null;
+		$("msd-progress").setAttribute("data-label", "Aborted");
+		$("msd-progress-value").style.width = "0%";
+	};
+
+	var __clickSwitchButton = function(to) {
+		var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					wm.error("Switch error:<br>", http.responseText);
+				}
+			}
+			__applyState();
+		});
+		__applyState();
+		wm.switchDisabled($(`msd-switch-to-${to}-button`), true);
+	};
+
+	var __selectNewImageFile = function() {
+		var el_input = $("msd-select-new-image-file");
+		var image_file = (el_input.files.length ? el_input.files[0] : null);
+		if (image_file && image_file.size > __state.info.size) {
+			wm.error("New image is too big for your Mass Storage Device.<br>Maximum:", __formatSize(__state.info.size));
+			el_input.value = "";
+			image_file = null;
+		}
+		__image_file = image_file;
+		__applyState();
+	};
+
+	var __clickResetButton = function() {
+		var http = tools.makeRequest("POST", "/kvmd/msd/reset", function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					wm.error("MSD reset error:<br>", http.responseText);
+				}
+			}
+			__applyState();
+		});
+		__applyState();
+	};
+
+	var __applyState = function() {
+		if (__state) {
+			if (__state.connected_to === "server") {
+				$("msd-another-another-user-uploads").style.display = "none";
+				$("msd-led").className = "led-green";
+				$("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
+			} else if (__state.busy) {
+				if (!__upload_http) {
+					$("msd-another-another-user-uploads").style.display = "block";
+				}
+				$("msd-led").className = "led-yellow-rotating-fast";
+				$("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
+			} else {
+				$("msd-another-another-user-uploads").style.display = "none";
+				$("msd-led").className = "led-gray";
+				if (__state.in_operate) {
+					$("msd-status").innerHTML = $("msd-led").title = "Connected to KVM";
+				} else {
+					$("msd-status").innerHTML = $("msd-led").title = "Unavailable";
+				}
+			}
+
+			$("msd-not-in-operate").style.display = (__state.in_operate ? "none" : "block");
+			$("msd-current-image-broken").style.display = (
+				__state.in_operate && __state.info.image &&
+				!__state.info.image.complete && !__state.busy ? "block" : "none"
+			);
+
+			$("msd-current-image-name").innerHTML = (__state.in_operate && __state.info.image ? __state.info.image.name : "None");
+			$("msd-current-image-size").innerHTML = (__state.in_operate && __state.info.image ? __formatSize(__state.info.image.size) : "None");
+			$("msd-storage-size").innerHTML = (__state.in_operate ? __formatSize(__state.info.size) : "Unavailable");
+
+			wm.switchDisabled($("msd-switch-to-kvm-button"), (!__state.in_operate || __state.connected_to === "kvm" || __state.busy));
+			wm.switchDisabled($("msd-switch-to-server-button"), (!__state.in_operate || __state.connected_to === "server" || __state.busy));
+			wm.switchDisabled($("msd-select-new-image-button"), (!__state.in_operate || __state.connected_to !== "kvm" || __state.busy || __upload_http));
+			wm.switchDisabled($("msd-upload-new-image-button"), (!__state.in_operate || __state.connected_to !== "kvm" || __state.busy || !__image_file));
+			wm.switchDisabled($("msd-abort-uploading-button"), (!__state.in_operate || !__upload_http));
+			wm.switchDisabled($("msd-reset-button"), (!__state.in_operate || __upload_http));
+
+			$("msd-new-image").style.display = (__image_file ? "block" : "none");
+			$("msd-progress").setAttribute("data-label", "Waiting for upload ...");
+			$("msd-progress-value").style.width = "0%";
+			$("msd-new-image-name").innerHTML = (__image_file ? __image_file.name : "");
+			$("msd-new-image-size").innerHTML = (__image_file ? __formatSize(__image_file.size) : "");
+
+		} else {
+			$("msd-another-another-user-uploads").style.display = "none";
+			$("msd-led").className = "led-gray";
+			$("msd-status").innerHTML = "";
+			$("msd-led").title = "";
+			$("msd-not-in-operate").style.display = "none";
+			$("msd-current-image-broken").style.display = "none";
+			$("msd-current-image-name").innerHTML = "";
+			$("msd-current-image-size").innerHTML = "";
+			$("msd-storage-size").innerHTML = "";
+
+			wm.switchDisabled($("msd-switch-to-kvm-button"), true);
+			wm.switchDisabled($("msd-switch-to-server-button"), true);
+			wm.switchDisabled($("msd-select-new-image-button"), true);
+			wm.switchDisabled($("msd-upload-new-image-button"), true);
+			wm.switchDisabled($("msd-abort-uploading-button"), true);
+			wm.switchDisabled($("msd-reset-button"), true);
+
+			$("msd-select-new-image-file").value = "";
+			$("msd-new-image").style.display = "none";
+			$("msd-progress").setAttribute("data-label", "");
+			$("msd-progress-value").style.width = "0%";
+			$("msd-new-image-name").innerHTML = "";
+			$("msd-new-image-size").innerHTML = "";
+		}
+	};
+
+	var __formatSize = function(size) {
+		if (size > 0) {
+			var index = Math.floor( Math.log(size) / Math.log(1024) );
+			return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][index];
+		} else {
+			return 0;
+		}
+	};
+
+	var __uploadStateChange = function() {
+		if (__upload_http.readyState === 4) {
+			if (__upload_http.status !== 200) {
+				wm.error("Can't upload image to the Mass Storage Device:<br>", __upload_http.responseText);
+			}
+			$("msd-select-new-image-file").value = "";
+			__image_file = null;
+			__upload_http = null;
+			__applyState();
+		}
+	};
+
+	var __uploadProgress = function(event) {
+		if(event.lengthComputable) {
+			var percent = Math.round((event.loaded * 100) / event.total);
+			$("msd-progress").setAttribute("data-label", percent + "%");
+			$("msd-progress-value").style.width = percent + "%";
+		}
+	};
+
+	__init__();
+}
--- a/web/share/js/kvm/session.js
+++ b/web/share/js/kvm/session.js
@@ -0,0 +1,133 @@
+function Session() {
+	// var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __ping_timer = null;
+	var __missed_heartbeats = 0;
+
+	var __hid = new Hid();
+	var __atx = new Atx();
+	var __msd = new Msd();
+	var __streamer = new Streamer();
+
+	var __init__ = function() {
+		__startSession();
+	};
+
+	/********************************************************************************/
+
+	var __setKvmdInfo = function(state) {
+		if (state.meta) {
+			var text = JSON.stringify(state.meta, undefined, 4).replace(/ /g, "&nbsp;").replace(/\n/g, "<br>");
+			$("about-meta").innerHTML = `
+				<span class="code-comment">// The Pi-KVM metadata.<br>
+				// You can get this json using handle <a target="_blank" href="/kvmd/info">/kvmd/info</a>.<br>
+				// In the standard configuration this data<br>
+				// is specified in the file /etc/kvmd/meta.yaml.</span><br>
+				<br>
+				${text}
+			`;
+			if (state.meta.server && state.meta.server.host) {
+				$("kvmd-meta-server-host").innerHTML = "Server: " + state.meta.server.host;
+				document.title = "Pi-KVM Session: " + state.meta.server.host;
+			} else {
+				$("kvmd-meta-server-host").innerHTML = "";
+				document.title = "Pi-KVM Session";
+			}
+		}
+
+		$("about-version-kvmd").innerHTML = state.version.kvmd;
+		$("about-version-streamer").innerHTML = `${state.version.streamer} (${state.streamer})`;
+	};
+
+	var __startSession = function() {
+		$("link-led").className = "led-yellow";
+		$("link-led").title = "Connecting...";
+		var proto = (location.protocol === "https:" ? "wss" : "ws");
+		__ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`);
+		__ws.onopen = __wsOpenHandler;
+		__ws.onmessage = __wsMessageHandler;
+		__ws.onerror = __wsErrorHandler;
+		__ws.onclose = __wsCloseHandler;
+	};
+
+	var __wsOpenHandler = function(event) {
+		tools.debug("Session: socket opened:", event);
+		$("link-led").className = "led-green";
+		$("link-led").title = "Connected";
+		__hid.setSocket(__ws);
+		__missed_heartbeats = 0;
+		__ping_timer = setInterval(__pingServer, 1000);
+	};
+
+	var __wsMessageHandler = function(event) {
+		// tools.debug("Session: received socket data:", event.data);
+		event = JSON.parse(event.data);
+		if (event.msg_type === "pong") {
+			__missed_heartbeats = 0;
+		} else if (event.msg_type === "event") {
+			if (event.msg.event === "info_state") {
+				__setKvmdInfo(event.msg.event_attrs);
+			} else if (event.msg.event === "atx_state") {
+				__atx.setState(event.msg.event_attrs);
+			} else if (event.msg.event === "msd_state") {
+				__msd.setState(event.msg.event_attrs);
+			} else if (event.msg.event === "streamer_state") {
+				__streamer.setState(event.msg.event_attrs);
+			}
+		}
+	};
+
+	var __wsErrorHandler = function(event) {
+		tools.error("Session: socket error:", event);
+		if (__ws) {
+			__ws.onclose = null;
+			__ws.close();
+			__wsCloseHandler(null);
+		}
+	};
+
+	var __wsCloseHandler = function(event) {
+		tools.debug("Session: socket closed:", event);
+
+		$("link-led").className = "led-gray";
+
+		if (__ping_timer) {
+			clearInterval(__ping_timer);
+			__ping_timer = null;
+		}
+
+		__hid.setSocket(null);
+		__atx.setState(null);
+		__msd.setState(null);
+		__streamer.setState(null);
+		__ws = null;
+
+		setTimeout(function() {
+			$("link-led").className = "led-yellow";
+			setTimeout(__startSession, 500);
+		}, 500);
+	};
+
+	var __pingServer = function() {
+		try {
+			__missed_heartbeats += 1;
+			if (__missed_heartbeats >= 5) {
+				throw new Error("Too many missed heartbeats");
+			}
+			__ws.send(JSON.stringify({"event_type": "ping"}));
+		} catch (err) {
+			tools.error("Session: ping error:", err.message);
+			if (__ws) {
+				__ws.onclose = null;
+				__ws.close();
+				__wsCloseHandler(null);
+			}
+		}
+	};
+
+	__init__();
+}
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -0,0 +1,221 @@
+function Streamer() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __resolution = {width: 640, height: 480};
+	var __size_factor = 1;
+	var __client_key = tools.makeId();
+	var __client_id = "";
+	var __client_fps = -1;
+	var __prev = false;
+
+	var __init__ = function() {
+		$("stream-led").title = "Stream inactive";
+
+		$("stream-quality-slider").min = 5;
+		$("stream-quality-slider").max = 100;
+		$("stream-quality-slider").step = 5;
+		$("stream-quality-slider").value = 80;
+		tools.setOnUpSlider($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
+
+		$("stream-desired-fps-slider").min = 0;
+		$("stream-desired-fps-slider").max = 30;
+		$("stream-desired-fps-slider").step = 1;
+		$("stream-desired-fps-slider").value = 0;
+		tools.setOnUpSlider($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
+
+		$("stream-size-slider").min = 20;
+		$("stream-size-slider").max = 200;
+		$("stream-size-slider").step = 5;
+		$("stream-size-slider").value = 100;
+		$("stream-size-slider").oninput = () => __resize();
+		$("stream-size-slider").onchange = () => __resize();
+
+		tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
+		tools.setOnClick($("stream-reset-button"), __clickResetButton);
+	};
+
+	/********************************************************************************/
+
+	self.setState = function(state) {
+		if (state && state.state) {
+			var source = state.state.source;
+			var stream = state.state.stream;
+
+			if (!__prev) {
+				$("stream-quality-slider").activated = false;
+				$("stream-desired-fps-slider").activated = false;
+			}
+
+			if (!$("stream-quality-slider").activated) {
+				wm.switchDisabled($("stream-quality-slider"), false);
+				if ($("stream-quality-slider").value !== source.quality) {
+					$("stream-quality-slider").value = source.quality;
+					__updateQualityValue(source.quality);
+				}
+			}
+
+			if (!$("stream-desired-fps-slider").activated) {
+				wm.switchDisabled($("stream-desired-fps-slider"), false);
+				if ($("stream-desired-fps-slider").value !== source.desired_fps) {
+					$("stream-desired-fps-slider").value = source.desired_fps;
+					__updateDesiredFpsValue(source.desired_fps);
+				}
+			}
+
+			if (__resolution.width !== source.resolution.width || __resolution.height !== source.resolution.height) {
+				__resolution = source.resolution;
+				if ($("stream-auto-resize-checkbox").checked) {
+					__adjustSizeFactor();
+				} else {
+					__applySizeFactor();
+				}
+			}
+
+			var stream_client = tools.getCookie("stream_client");
+			if (!__client_id && stream_client && stream_client.startsWith(__client_key + "/")) {
+				tools.info("Stream: found acceptable stream_client cookie:", stream_client);
+				__client_id = stream_client.slice(stream_client.indexOf("/") + 1);
+			}
+
+			if (stream.clients_stat.hasOwnProperty(__client_id)) {
+				__client_fps = stream.clients_stat[__client_id].fps;
+			} else {
+				__clearState();
+			}
+
+			if (!__prev) {
+				var path = "/streamer/stream?key=" + __client_key;
+				if (tools.browser.is_chrome || tools.browser.is_blink) {
+					// uStreamer fix for Blink https://bugs.chromium.org/p/chromium/issues/detail?id=527446
+					tools.info("Stream: using advance_headers=1 to fix Blink MJPG bugs");
+					path += "&advance_headers=1";
+				} else if (tools.browser.is_safari || tools.browser.is_ios) {
+					// uStreamer fix for WebKit
+					tools.info("Stream: using dual_final_frames=1 to fix WebKit MJPG bugs");
+					path += "&dual_final_frames=1";
+				}
+				$("stream-image").src = path;
+				$("stream-image").className = "stream-image-active";
+				$("stream-box").classList.remove("stream-box-inactive");
+				$("stream-led").className = "led-green";
+				$("stream-led").title = "Stream is active";
+				wm.switchDisabled($("stream-screenshot-button"), false);
+				wm.switchDisabled($("stream-reset-button"), false);
+				tools.info("Stream: acquired");
+				__prev = true;
+			}
+
+			__updateStreamHeader(true);
+
+		} else {
+			__clearState();
+		}
+	};
+
+	var __clearState = function() {
+		tools.info("Stream: refreshing ...");
+
+		$("stream-image").className = "stream-image-inactive";
+		$("stream-box").classList.add("stream-box-inactive");
+		$("stream-led").className = "led-gray";
+		$("stream-led").title = "Stream inactive";
+		wm.switchDisabled($("stream-screenshot-button"), true);
+		wm.switchDisabled($("stream-reset-button"), true);
+		wm.switchDisabled($("stream-quality-slider"), true);
+		wm.switchDisabled($("stream-desired-fps-slider"), true);
+
+		__client_key = tools.makeId();
+		__client_id = "";
+		__client_fps = -1;
+		__prev = false;
+		__updateStreamHeader(false);
+	};
+
+	var __updateQualityValue = function(value) {
+		$("stream-quality-value").innerHTML = value + "%";
+	};
+
+	var __updateDesiredFpsValue = function(value) {
+		$("stream-desired-fps-value").innerHTML = (value === 0 ? "Unlimited" : value);
+	};
+
+	var __updateStreamHeader = function(online) {
+		var el_grab = document.querySelector("#stream-window-header .window-grab");
+		var el_info = $("stream-info");
+		if (online) {
+			var fps_suffix = (__client_fps >= 0 ? ` / ${__client_fps} fps` : "");
+			el_grab.innerHTML = el_info.innerHTML = `Stream &ndash; ${__resolution.width}x${__resolution.height}${fps_suffix}`;
+		} else {
+			el_grab.innerHTML = el_info.innerHTML = "Stream &ndash; offline";
+		}
+	};
+
+	var __clickScreenshotButton = function() {
+		var el_a = document.createElement("a");
+		el_a.href = "/streamer/snapshot";
+		el_a.target = "_blank";
+		document.body.appendChild(el_a);
+		el_a.click();
+		setTimeout(() => document.body.removeChild(el_a), 0);
+	};
+
+	var __clickResetButton = function() {
+		var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					wm.error("Can't reset stream:<br>", http.responseText);
+				}
+			}
+		});
+	};
+
+	var __sendParam = function(name, value) {
+		var http = tools.makeRequest("POST", `/kvmd/streamer/set_params?${name}=${value}`, function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					wm.error("Can't configure stream:<br>", http.responseText);
+				}
+			}
+		});
+	};
+
+	var __resize = function(center=false) {
+		var size = $("stream-size-slider").value;
+		$("stream-size-value").innerHTML = size + "%";
+		__size_factor = size / 100;
+		__applySizeFactor(center);
+	};
+
+	var __adjustSizeFactor = function() {
+		var el_window = $("stream-window");
+		var el_slider = $("stream-size-slider");
+		var view = wm.getViewGeometry();
+
+		for (var size = 100; size >= el_slider.min; size -= el_slider.step) {
+			tools.info("Stream: adjusting size:", size);
+			$("stream-size-slider").value = size;
+			__resize(true);
+
+			var rect = el_window.getBoundingClientRect();
+			if (
+				rect.bottom <= view.bottom
+				&& rect.top >= view.top
+				&& rect.left >= view.left
+				&& rect.right <= view.right
+			) {
+				break;
+			}
+		}
+	};
+
+	var __applySizeFactor = function(center=false) {
+		var el_stream_image = $("stream-image");
+		el_stream_image.style.width = __resolution.width * __size_factor + "px";
+		el_stream_image.style.height = __resolution.height * __size_factor + "px";
+		wm.showWindow($("stream-window"), false, center);
+	};
+
+	__init__();
+}
--- a/web/share/js/login/main.js
+++ b/web/share/js/login/main.js
@@ -0,0 +1,36 @@
+function main() {
+	if (checkBrowser()) {
+		tools.setOnClick($("login-button"), __login);
+		document.onkeyup = function(event) {
+			if (event.code == "Enter") {
+				event.preventDefault();
+				__login();
+			}
+		};
+		$("user-input").focus();
+	}
+}
+
+function __login() {
+	var user = $("user-input").value;
+	var passwd = $("passwd-input").value;
+	var body = `user=${encodeURIComponent(user)}&passwd=${encodeURIComponent(passwd)}`;
+	var http = tools.makeRequest("POST", "/kvmd/auth/login", function() {
+		if (http.readyState === 4) {
+			if (http.status === 200) {
+				document.location.href = "/";
+			}
+			__setDisabled(false);
+			$("passwd-input").focus();
+			$("passwd-input").select();
+		}
+	}, body, "application/x-www-form-urlencoded");
+	http.send();
+	__setDisabled(true);
+}
+
+function __setDisabled(disabled) {
+	$("user-input").disabled = disabled;
+	$("passwd-input").disabled = disabled;
+	$("login-button").disabled = disabled;
+}
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -0,0 +1,136 @@
+var tools = new function() {
+	var __debug = (new URL(window.location.href)).searchParams.get("debug");
+
+	this.makeRequest = function(method, url, callback, body=null, content_type=null) {
+		var http = new XMLHttpRequest();
+		http.open(method, url, true);
+		if (content_type) {
+			http.setRequestHeader("Content-Type", content_type);
+		}
+		http.onreadystatechange = callback;
+		http.timeout = 5000;
+		http.send(body);
+		return http;
+	};
+
+	this.makeId = function() {
+		var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+		var id = "";
+		for (var count = 0; count < 16; ++count) {
+			id += chars.charAt(Math.floor(Math.random() * chars.length));
+		}
+		return id;
+	};
+
+	this.getCookie = function(name) {
+		var matches = document.cookie.match(new RegExp(
+			"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
+		));
+		return (matches ? decodeURIComponent(matches[1]) : "");
+	};
+
+	this.setOnClick = function(el, callback) {
+		el.onclick = el.ontouchend = function(event) {
+			event.preventDefault();
+			callback();
+		};
+	};
+	this.setOnDown = function(el, callback) {
+		el.onmousedown = el.ontouchstart = function(event) {
+			event.preventDefault();
+			callback();
+		};
+	};
+	this.setOnUp = function(el, callback) {
+		el.onmouseup = el.ontouchend = function(event) {
+			event.preventDefault();
+			callback();
+		};
+	};
+
+	this.setOnUpSlider = function(el, delay, display_callback, execute_callback) {
+		el.execution_timer = null;
+		el.activated = false;
+
+		var clear_timer = function() {
+			if (el.execution_timer) {
+				clearTimeout(el.execution_timer);
+				el.execution_timer = null;
+			}
+		};
+
+		el.oninput = el.onchange = () => display_callback(el.value);
+
+		el.onmousedown = el.ontouchstart = function() {
+			clear_timer();
+			el.activated = true;
+		};
+
+		el.onmouseup = el.ontouchend = function(event) {
+			event.preventDefault();
+			clear_timer();
+			el.execution_timer = setTimeout(function() {
+				execute_callback(el.value);
+			}, delay);
+		};
+	};
+
+	this.debug = function(...args) {
+		if (__debug) {
+			console.log("LOG/DEBUG", ...args);  // eslint-disable-line no-console
+		}
+	};
+	this.info = (...args) => console.log("LOG/INFO", ...args);  // eslint-disable-line no-console
+	this.error = (...args) => console.error("LOG/ERROR", ...args);  // eslint-disable-line no-console
+
+	this.browser = new function() {
+		// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
+
+		// Opera 8.0+
+		var is_opera = (
+			(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
+			|| !!window.opera
+			|| (navigator.userAgent.indexOf(" OPR/") >= 0)
+		);
+
+		// Firefox 1.0+
+		var is_firefox = (typeof InstallTrigger !== "undefined");
+
+		// Safari 3.0+ "[object HTMLElementConstructor]" 
+		var is_safari = (/constructor/i.test(window.HTMLElement) || (function (p) {
+			return p.toString() === "[object SafariRemoteNotification]";
+		})(!window["safari"] || (typeof safari !== "undefined" && safari.pushNotification))); // eslint-disable-line no-undef
+
+		// Chrome 1+
+		var is_chrome = (!!window.chrome && !!window.chrome.webstore);
+
+		// Blink engine detection
+		var is_blink = ((is_chrome || is_opera) && !!window.CSS);
+
+		// iOS browsers
+		// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
+		var is_ios = (!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform));
+
+		// Any browser on Mac
+		var is_mac = ((
+			window.navigator.oscpu
+			|| window.navigator.platform
+			|| window.navigator.appVersion
+			|| "Unknown"
+		).indexOf("Mac") !== -1);
+
+		return {
+			"is_opera": is_opera,
+			"is_firefox": is_firefox,
+			"is_safari": is_safari,
+			"is_chrome": is_chrome,
+			"is_blink": is_blink,
+			"is_ios": is_ios,
+			"is_mac": is_mac,
+		};
+	};
+	this.info("Browser:", this.browser);
+};
+
+var $ = (id) => document.getElementById(id);
+var $$ = (cls) => document.getElementsByClassName(cls);
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -0,0 +1,387 @@
+function WindowManager() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __top_z_index = 0;
+	var __windows = [];
+	var __menu_items = [];
+
+	var __init__ = function() {
+		Array.prototype.forEach.call(document.querySelectorAll("button"), function(el_button) {
+			// XXX: Workaround for iOS Safari:
+			// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
+			el_button.ontouchstart = function() {};
+		});
+
+		Array.prototype.forEach.call($$("menu-item"), function(el_item) {
+			el_item.parentElement.querySelector(".menu-item-content").setAttribute("tabindex", "-1");
+			tools.setOnDown(el_item, () => __toggleMenu(el_item));
+			__menu_items.push(el_item);
+		});
+
+		Array.prototype.forEach.call($$("window"), function(el_window) {
+			el_window.setAttribute("tabindex", "-1");
+			__makeWindowMovable(el_window);
+			__windows.push(el_window);
+
+			var el_button = el_window.querySelector(".window-header .window-button-close");
+			if (el_button) {
+				tools.setOnClick(el_button, function() {
+					el_window.style.visibility = "hidden";
+					__activateLastWindow(el_window);
+				});
+			}
+		});
+
+		window.onmouseup = __globalMouseButtonHandler;
+		window.ontouchend = __globalMouseButtonHandler;
+
+		window.addEventListener("focusin", __focusIn);
+		window.addEventListener("focusout", __focusOut);
+
+		window.addEventListener("resize", () => __organizeWindowsOnResize(false));
+		window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
+	};
+
+	/********************************************************************************/
+
+	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
+	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
+
+	var __modalDialog = function(header, text, ok, cancel) {
+		var el_modal = document.createElement("div");
+		el_modal.className = "modal";
+		el_modal.style.visibility = "visible";
+
+		var el_window = document.createElement("div");
+		el_window.className = "modal-window";
+		el_window.setAttribute("tabindex", "-1");
+		el_modal.appendChild(el_window);
+
+		var el_header = document.createElement("div");
+		el_header.className = "modal-header";
+		el_header.innerHTML = header;
+		el_window.appendChild(el_header);
+
+		var el_content = document.createElement("div");
+		el_content.className = "modal-content";
+		el_content.innerHTML = text;
+		el_window.appendChild(el_content);
+
+		var promise = null;
+		if (ok || cancel) {
+			promise = new Promise(function(resolve) {
+				var el_buttons = document.createElement("div");
+				el_buttons.className = "modal-buttons";
+				el_window.appendChild(el_buttons);
+
+				function close(retval) {
+					el_window.style.visibility = "hidden";
+					el_modal.outerHTML = "";
+					var index = __windows.indexOf(el_modal);
+					if (index !== -1) {
+						__windows.splice(index, 1);
+					}
+					__activateLastWindow(el_modal);
+					resolve(retval);
+				}
+
+				if (cancel) {
+					var el_cancel_button = document.createElement("button");
+					el_cancel_button.innerHTML = "Cancel";
+					tools.setOnClick(el_cancel_button, () => close(false));
+					el_buttons.appendChild(el_cancel_button);
+				}
+				if (ok) {
+					var el_ok_button = document.createElement("button");
+					el_ok_button.innerHTML = "OK";
+					tools.setOnClick(el_ok_button, () => close(true));
+					el_buttons.appendChild(el_ok_button);
+				}
+				if (ok && cancel) {
+					el_ok_button.className = "row50";
+					el_cancel_button.className = "row50";
+				}
+
+				el_window.onkeyup = function(event) {
+					event.preventDefault();
+					if (ok && event.code === "Enter") {
+						el_ok_button.click();
+					} else if (cancel && event.code === "Escape") {
+						el_cancel_button.click();
+					}
+				};
+			});
+		}
+
+		__windows.push(el_modal);
+		document.body.appendChild(el_modal);
+		__activateWindow(el_modal);
+
+		return promise;
+	};
+
+	self.switchDisabled = function(el, disabled) {
+		if (disabled && document.activeElement === el) {
+			var el_to_focus = (
+				el.closest(".modal-window")
+				|| el.closest(".window")
+				|| el.closest(".menu-item-content")
+			);
+			if (el_to_focus) {
+				el_to_focus.focus();
+			}
+		}
+		el.disabled = disabled;
+	};
+
+	self.showWindow = function(el_window, activate=true, center=false) {
+		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
+			var view = self.getViewGeometry();
+			var rect = el_window.getBoundingClientRect();
+
+			el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
+			el_window.setAttribute("data-centered", "");
+		}
+
+		el_window.style.visibility = "visible";
+		if (activate) {
+			__activateWindow(el_window);
+		}
+	};
+
+	self.getViewGeometry = function() {
+		return {
+			top: $("menu").clientHeight,
+			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+			left: 0,
+			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+		};
+	};
+
+	var __isWindowOnPage = function(el_window) {
+		var view = self.getViewGeometry();
+		var rect = el_window.getBoundingClientRect();
+
+		return (
+			(rect.bottom - el_window.clientHeight / 1.5) <= view.bottom
+			&& rect.top >= view.top
+			&& (rect.left + el_window.clientWidth / 1.5) >= view.left
+			&& (rect.right - el_window.clientWidth / 1.5) <= view.right
+		);
+	};
+
+	var __toggleMenu = function(el_a) {
+		var all_hidden = true;
+
+		__menu_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".menu-item-content");
+			if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
+				el_item.classList.add("menu-item-selected");
+				el_menu.style.visibility = "visible";
+				el_menu.focus();
+				all_hidden &= false;
+			} else {
+				el_item.classList.remove("menu-item-selected");
+				el_menu.style.visibility = "hidden";
+			}
+		});
+
+		if (all_hidden) {
+			document.onkeyup = null;
+			__activateLastWindow();
+		} else {
+			document.onkeyup = function(event) {
+				if (event.code === "Escape") {
+					event.preventDefault();
+					__closeAllMenues();
+					__activateLastWindow();
+				}
+			};
+		}
+	};
+
+	var __closeAllMenues = function() {
+		document.onkeyup = null;
+		__menu_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".menu-item-content");
+			el_item.classList.remove("menu-item-selected");
+			el_menu.style.visibility = "hidden";
+		});
+	};
+
+	var __focusIn = function(event) {
+		var el_parent;
+		if ((el_parent = event.target.closest(".modal-window")) !== null) {
+			el_parent.classList.add("window-active");
+		} else if ((el_parent = event.target.closest(".window")) !== null) {
+			el_parent.classList.add("window-active");
+		} else if ((el_parent = event.target.closest(".menu-item-content")) !== null) {
+			el_parent.classList.add("menu-item-content-active");
+		}
+		tools.debug("Focus in:", el_parent);
+	};
+
+	var __focusOut = function(event) {
+		var el_parent;
+		if ((el_parent = event.target.closest(".modal-window")) !== null) {
+			el_parent.classList.remove("window-active");
+		} else if ((el_parent = event.target.closest(".window")) !== null) {
+			el_parent.classList.remove("window-active");
+		} else if ((el_parent = event.target.closest(".menu-item-content")) !== null) {
+			el_parent.classList.remove("menu-item-content-active");
+		}
+		tools.debug("Focus out:", el_parent);
+	};
+
+	var __globalMouseButtonHandler = function(event) {
+		if (!event.target.matches(".menu-item")) {
+			for (var el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
+				if (el_item.hasAttribute("data-force-hide-menu")) {
+					break;
+				} else if (el_item.hasAttribute("data-dont-hide-menu")) {
+					return;
+				}
+			}
+			__closeAllMenues();
+			__activateLastWindow();
+		}
+	};
+
+	var __organizeWindowsOnResize = function(orientation) {
+		var view = self.getViewGeometry();
+
+		Array.prototype.forEach.call($$("window"), function(el_window) {
+			if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
+				var rect = el_window.getBoundingClientRect();
+
+				el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+				el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
+				el_window.setAttribute("data-centered", "");
+			}
+		});
+	};
+
+	var __activateLastWindow = function(el_except_window=null) {
+		var el_last_window = null;
+
+		if (document.activeElement) {
+			el_last_window = (document.activeElement.closest(".modal-window") || document.activeElement.closest(".window"));
+		}
+
+		if (!el_last_window || el_last_window === el_except_window) {
+			var max_z_index = 0;
+
+			__windows.forEach(function(el_window) {
+				var z_index = parseInt(window.getComputedStyle(el_window, null).zIndex) || 0;
+				var visibility = window.getComputedStyle(el_window, null).visibility;
+
+				if (max_z_index < z_index && visibility !== "hidden" && el_window !== el_except_window) {
+					el_last_window = el_window;
+					max_z_index = z_index;
+				}
+			});
+		}
+
+		if (el_last_window) {
+			tools.debug("Activating last window:", el_last_window);
+			__activateWindow(el_last_window);
+		}
+	};
+
+	var __activateWindow = function(el_window) {
+		if (window.getComputedStyle(el_window, null).visibility !== "hidden") {
+			var el_to_focus;
+			var el_window_contains_focus;
+
+			if (el_window.className === "modal") {
+				el_to_focus = el_window.querySelector(".modal-window");
+				el_window_contains_focus = (document.activeElement && document.activeElement.closest(".modal-window"));
+			} else { // .window
+				el_to_focus = el_window;
+				el_window_contains_focus = (document.activeElement && document.activeElement.closest(".window"));
+			}
+
+			if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
+				__top_z_index += 1;
+				el_window.style.zIndex = __top_z_index;
+				tools.debug("UI: activated window:", el_window);
+			}
+
+			if (el_window !== el_window_contains_focus) {
+				el_to_focus.focus();
+				tools.debug("UI: focused window:", el_window);
+			}
+		}
+	};
+
+	var __makeWindowMovable = function(el_window) {
+		var el_header = el_window.querySelector(".window-header");
+		var el_grab = el_window.querySelector(".window-header .window-grab");
+
+		var prev_pos = {x: 0, y: 0};
+
+		function startMoving(event) {
+			__closeAllMenues();
+			__activateWindow(el_window);
+			event = (event || window.event);
+			event.preventDefault();
+
+			if (!event.touches || event.touches.length === 1) {
+				el_header.classList.add("window-header-grabbed");
+
+				prev_pos = getEventPosition(event);
+
+				document.onmousemove = doMoving;
+				document.onmouseup = stopMoving;
+
+				document.ontouchmove = doMoving;
+				document.ontouchend = stopMoving;
+			}
+		}
+
+		function doMoving(event) {
+			el_window.removeAttribute("data-centered");
+
+			event = (event || window.event);
+			event.preventDefault();
+
+			var event_pos = getEventPosition(event);
+			var x = prev_pos.x - event_pos.x;
+			var y = prev_pos.y - event_pos.y;
+
+			el_window.style.top = (el_window.offsetTop - y) + "px";
+			el_window.style.left = (el_window.offsetLeft - x) + "px";
+
+			prev_pos = event_pos;
+		}
+
+		function stopMoving() {
+			el_header.classList.remove("window-header-grabbed");
+
+			document.onmousemove = null;
+			document.onmouseup = null;
+
+			document.ontouchmove = null;
+			document.ontouchend = null;
+		}
+
+		function getEventPosition(event) {
+			if (event.touches) {
+				return {x: event.touches[0].clientX, y: event.touches[0].clientY};
+			} else {
+				return {x: event.clientX, y: event.clientY};
+			}
+		}
+
+		el_window.setAttribute("data-centered", "");
+		el_window.onclick = el_window.ontouchend = () => __activateWindow(el_window);
+
+		el_grab.onmousedown = startMoving;
+		el_grab.ontouchstart = startMoving;
+	};
+
+	__init__();
+}
--- a/web/share/png/blank-stream.png
+++ b/web/share/png/blank-stream.png
--- a/web/share/safari-pinned-tab.svg
+++ b/web/share/safari-pinned-tab.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M6751 6444 c-48 -27 -168 -60 -246 -69 -27 -3 -66 -7 -85 -10 -248
+-33 -521 -37 -2640 -41 -1070 -1 -1972 -5 -2005 -8 -213 -17 -219 -18 -345
+-36 -112 -17 -109 -16 -216 -44 -323 -86 -576 -242 -779 -481 -56 -66 -155
+-210 -155 -225 0 -5 -4 -10 -8 -12 -4 -1 -30 -48 -58 -103 -90 -179 -155 -383
+-170 -540 -10 -101 -11 -275 -2 -310 4 -16 10 -46 13 -65 3 -19 16 -52 28 -73
+54 -97 143 -78 233 51 62 88 203 227 284 280 156 103 366 178 635 226 17 3 39
+8 50 10 11 2 47 7 80 11 33 4 71 9 85 11 29 4 138 13 225 20 131 10 435 16
+435 8 0 -5 -6 -45 -14 -89 -24 -132 -27 -149 -32 -180 -2 -16 -6 -41 -9 -55
+-3 -14 -7 -38 -10 -55 -2 -16 -14 -75 -25 -130 -11 -55 -23 -116 -26 -135 -3
+-19 -7 -43 -10 -52 -3 -10 -7 -30 -10 -45 -11 -67 -89 -401 -125 -538 -134
+-505 -266 -869 -451 -1252 -165 -340 -356 -581 -608 -762 -137 -99 -205 -177
+-263 -299 -32 -67 -32 -68 -32 -227 0 -179 14 -251 69 -365 80 -166 272 -285
+516 -319 70 -10 310 -8 327 2 5 3 25 9 44 12 99 18 233 93 325 183 205 202
+410 674 508 1167 9 44 19 91 22 105 3 14 7 36 10 50 3 14 18 88 34 166 16 77
+32 156 35 175 3 19 17 88 30 154 34 172 93 484 99 525 6 38 22 130 30 170 3
+14 10 54 16 90 5 36 12 74 14 85 2 11 7 40 11 65 4 25 9 54 11 65 6 39 44 260
+48 285 3 14 25 153 51 310 25 157 50 312 55 345 6 33 12 74 15 90 7 45 45 287
+50 314 2 13 8 45 12 70 4 25 8 49 9 54 1 4 2 12 3 17 1 7 305 10 890 10 l889
+0 -55 -132 c-30 -73 -66 -162 -80 -198 -13 -36 -29 -74 -34 -85 -72 -163 -402
+-1051 -462 -1245 -24 -75 -82 -284 -92 -329 -15 -66 -65 -314 -70 -346 -3 -22
+-10 -67 -15 -100 -5 -33 -12 -89 -15 -125 -4 -36 -8 -72 -10 -80 -9 -34 -19
+-266 -18 -415 1 -184 6 -247 38 -460 20 -136 80 -317 143 -435 66 -124 178
+-249 309 -346 138 -103 225 -145 385 -184 115 -28 149 -31 343 -35 457 -8 846
+117 1220 391 172 126 401 387 504 574 78 142 148 289 195 407 47 118 57 154
+58 210 5 169 -63 240 -198 208 -67 -16 -102 -39 -173 -119 -195 -218 -357
+-342 -513 -394 -110 -37 -141 -43 -230 -47 -92 -4 -150 9 -234 50 -179 88
+-322 320 -383 625 -33 163 -40 277 -36 615 3 187 6 358 9 380 2 22 7 85 11
+140 3 55 8 114 10 130 4 28 10 85 20 180 3 22 7 56 10 75 2 19 7 55 10 80 3
+25 8 56 10 70 3 14 7 39 9 55 7 43 35 206 41 235 3 14 9 50 15 80 15 82 16 86
+45 215 29 133 83 347 89 352 2 2 91 6 197 8 182 4 372 13 408 20 9 1 36 6 61
+10 247 37 373 127 512 363 96 162 200 460 224 637 3 28 9 70 13 95 4 25 7 89
+7 143 -1 95 -2 100 -29 123 -34 29 -59 29 -116 -2z"/>
+</g>
+</svg>
--- a/web/share/site.webmanifest
+++ b/web/share/site.webmanifest
@@ -0,0 +1,14 @@
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{
+			"src": "/share/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}
--- a/web/share/svg/atx-hdd-led.svg
+++ b/web/share/svg/atx-hdd-led.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16.933332mm"
+   height="16.933332mm"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="hdd.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="13.28418"
+     inkscape:cy="14.886884"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-107.87666,-24.618942)">
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot5064"
+       style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:Adobe Garamond Pro;font-style:normal;font-weight:bold;font-size:10px;line-height:125%;letter-spacing:0px;word-spacing:0px;-inkscape-font-specification:Adobe Garamond Pro Bold;font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr"><flowRegion
+         id="flowRegion5066"><rect
+           id="rect5068"
+           width="50.892857"
+           height="43.57143"
+           x="-72.321426"
+           y="5.4285674" /></flowRegion><flowPara
+         id="flowPara5070"></flowPara></flowRoot>    <g
+       aria-label="🖴"
+       transform="matrix(1.8649046,0,0,1.8649046,248.12652,14.45492)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.141875px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot5072">
+      <path
+         d="m -75.064844,9.6551562 1.16,-2.35 q 0.07,-0.1299999 0.14,-0.24 0.08,-0.12 0.24,-0.12 h 5.72 q 0.16,0 0.23,0.12 0.08,0.1100001 0.15,0.24 l 1.16,2.35 z m 4.4,-0.4 q 0.62,0 1.12,-0.1399999 0.51,-0.14 0.8,-0.37 0.3,-0.23 0.3,-0.5100001 0,-0.28 -0.3,-0.5 -0.29,-0.23 -0.8,-0.36 -0.5,-0.14 -1.12,-0.14 -0.8,0 -1.41,0.23 -0.6,0.23 -0.77,0.5800001 l 1.32,0.01 -0.03,0.21 -1.31,0.11 q 0.07,0.24 0.37,0.44 0.31,0.2 0.78,0.32 0.48,0.1199999 1.05,0.1199999 z m 0,-0.7899999 q -0.24,0 -0.42,-0.08 -0.17,-0.09 -0.17,-0.2 0,-0.1100001 0.17,-0.1900001 0.18,-0.08 0.42,-0.08 0.25,0 0.43,0.08 0.18,0.08 0.18,0.1900001 0,0.11 -0.18,0.2 -0.18,0.08 -0.43,0.08 z m -4.02,4.5699997 q -0.22,0 -0.37,-0.15 -0.15,-0.16 -0.15,-0.37 V 9.9851562 h 9.08 v 2.5299998 q 0,0.21 -0.15,0.37 -0.14,0.15 -0.37,0.15 z m -0.05,-2.05 h 8.14 v -0.47 h -8.14 z m 7.8,1.08 q 0.13,0 0.21,-0.09 0.08,-0.09 0.08,-0.22 0,-0.11 -0.08,-0.2 -0.08,-0.09 -0.21,-0.09 -0.13,0 -0.22,0.09 -0.09,0.09 -0.09,0.2 0,0.13 0.09,0.22 0.09,0.09 0.22,0.09 z"
+         style="stroke-width:0.141875px"
+         id="path5080"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
--- a/web/share/svg/atx-power-led.svg
+++ b/web/share/svg/atx-power-led.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16.933332mm"
+   height="16.933332mm"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="power.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="13.28418"
+     inkscape:cy="14.886884"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-107.87666,-24.618942)">
+    <g
+       aria-label="⏻"
+       transform="matrix(1.9608076,0,0,1.9608076,269.69365,18.4972)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.21589744;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="flowRoot4958">
+      <path
+         d="M -78.747734,7.26 V 3.23 h 1.04 v 4.03 z m 0.54,4.39 q -0.87,0 -1.6,-0.3 -0.73,-0.29 -1.27,-0.82 -0.54,-0.53 -0.84,-1.24 -0.3,-0.72 -0.3,-1.57 0,-0.96 0.4,-1.84 0.4,-0.89 1.18,-1.45 l 0.54,0.7 q -0.43,0.29 -0.71,0.72 -0.27,0.43 -0.41,0.92 -0.13,0.49 -0.13,0.95 0,0.64 0.23,1.2 0.23,0.56 0.65,0.98 0.43,0.42 1,0.66 0.57,0.23 1.25,0.23 0.69,0 1.26,-0.23 0.58,-0.24 1,-0.66 0.42,-0.42 0.65,-0.98 0.24,-0.56 0.24,-1.2 0,-0.46 -0.14,-0.95 -0.13,-0.49 -0.41,-0.92 -0.27,-0.43 -0.7,-0.72 l 0.54,-0.7 q 0.78,0.56 1.18,1.45 0.4,0.88 0.4,1.84 0,0.85 -0.3,1.57 -0.3,0.71 -0.84,1.24 -0.54,0.53 -1.28,0.82 -0.73,0.3 -1.59,0.3 z"
+         style="stroke:#000000;stroke-width:0.21589744;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4998" />
+    </g>
+  </g>
+</svg>
--- a/web/share/svg/fan-led.svg
+++ b/web/share/svg/fan-led.svg
@@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 63.999999 63.999714"
+   xml:space="preserve"
+   sodipodi:docname="fan.svg"
+   width="64"
+   height="63.999714"
+   inkscape:version="0.92.2 2405546, 2018-03-11"><metadata
+   id="metadata4808"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs4806">
+	
+
+		
+		
+	</defs><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1020"
+   id="namedview4804"
+   showgrid="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:zoom="7.3853375"
+   inkscape:cx="69.858273"
+   inkscape:cy="30.334855"
+   inkscape:window-x="0"
+   inkscape:window-y="30"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<path
+   d="m 63.334922,25.549682 c -0.177154,-0.86073 -0.546488,-1.4749 -1.224053,-2.03456 -5.414798,-4.47493 -12.924109,-4.17414 -22.52822,0.90223 -0.626766,-0.62676 -1.30519,-1.15651 -2.065465,-1.6127 6.619247,-5.93839 12.653083,-8.43143 18.101079,-7.47955 1.606266,0.28061 2.718561,-1.5599 1.72332,-2.85136 -2.208992,-2.8669502 -4.723066,-5.2011502 -7.745565,-7.1919202 -0.734089,-0.48338 -1.429398,-0.65624 -2.304294,-0.5731 -6.993017,0.66469 -12.090282,6.1872302 -15.291795,16.5677902 -0.886487,0 -1.740778,0.10503 -2.600792,0.32011 0.481522,-8.87947 2.985008,-14.9088702 7.510599,-18.0882002 1.334239,-0.93729 0.819232,-3.02521996 -0.797623,-3.23499996 -3.589307,-0.46521 -7.017486,-0.33814 -10.562433,0.39166 -0.86073,0.17715 -1.474903,0.54648996 -2.034556,1.22404996 -4.474935,5.4148 -4.174145,12.9241102 0.902228,22.5282202 -0.626766,0.62677 -1.156512,1.30519 -1.612706,2.06547 -5.93839,-6.61925 -8.431429,-12.65309 -7.479547,-18.1010802 0.280614,-1.60627 -1.559902,-2.71856 -2.851354,-1.72347 -2.8669526,2.209 -5.201154,4.7230702 -7.1919221,7.7455702 -0.4833823,0.73409 -0.6562437,1.4294 -0.5731043,2.30429 0.6646865,6.99302 6.1872364,12.09029 16.5677934,15.2918 0,0.88649 0.105033,1.74078 0.320108,2.60079 -8.879467,-0.48152 -14.9088672,-2.98501 -18.0882006,-7.5106 -0.9372866,-1.33424 -3.02521772,-0.81923 -3.2349982,0.79762 -0.46520897,3.58931 -0.33813866,7.01749 0.391657,10.56244 0.17715433,0.86073 0.5464882,1.4749 1.2240534,2.03455 5.4147977,4.47494 12.9241094,4.17415 22.5282204,-0.90222 0.626766,0.62676 1.305189,1.15651 2.065465,1.6127 -6.619247,5.93839 -12.653083,8.43143 -18.1010797,7.47955 -1.6062659,-0.28062 -2.7185604,1.5599 -1.7233194,2.85135 2.2089913,2.86695 4.7230661,5.20116 7.7455651,7.19192 0.734088,0.48339 1.429398,0.65625 2.304294,0.57311 6.993016,-0.66469 12.090281,-6.18724 15.291795,-16.56779 0.886487,0 1.740777,-0.10504 2.600791,-0.32026 -0.481522,8.87947 -2.985007,14.90887 -7.510599,18.0882 -1.334238,0.93729 -0.819231,3.02522 0.797624,3.235 3.589307,0.46521 7.017486,0.33814 10.562433,-0.39165 0.860729,-0.17716 1.474903,-0.54649 2.034556,-1.22406 4.474935,-5.4148 4.174145,-12.92411 -0.902228,-22.52822 0.626766,-0.62676 1.156511,-1.30519 1.612705,-2.06546 5.938391,6.61924 8.43143,12.65308 7.479547,18.10108 -0.280613,1.60626 1.559903,2.71856 2.851355,1.72332 2.866952,-2.20899 5.201153,-4.72307 7.191922,-7.74557 0.483382,-0.73409 0.656243,-1.4294 0.573104,-2.30429 -0.664687,-6.99302 -6.187237,-12.09028 -16.567793,-15.2918 0,-0.88648 -0.105033,-1.74077 -0.320108,-2.60079 8.879467,0.48152 14.908867,2.98501 18.0882,7.5106 0.937287,1.33424 3.025218,0.81923 3.234998,-0.79762 0.465209,-3.58917 0.338139,-7.01706 -0.391657,-10.56215 z m -31.33485,15.38653 c -4.935279,0 -8.936277,-4.001 -8.936277,-8.93628 0,-4.93528 4.000998,-8.93628 8.936277,-8.93628 4.935279,0 8.936276,4.001 8.936276,8.93628 0,4.93528 -4.000997,8.93628 -8.936276,8.93628 z"
+   id="path4768"
+   inkscape:connector-curvature="0"
+   style="stroke-width:1" />
+<g
+   id="g4773"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4775"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4777"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4779"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4781"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4783"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4785"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4787"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4789"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4791"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4793"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4795"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4797"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4799"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+<g
+   id="g4801"
+   transform="translate(-82.375262,-465.62302)">
+</g>
+</svg>
--- a/web/share/svg/favicon.svg
+++ b/web/share/svg/favicon.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="10mm"
+   height="10mm"
+   viewBox="0 0 9.9999997 10"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="favicon.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313709"
+     inkscape:cx="15.549504"
+     inkscape:cy="14.591027"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-11.627273,-0.28387921)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:2.64583325px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="17.094305"
+       y="9.1093149"
+       id="text4782"><tspan
+         sodipodi:role="line"
+         id="tspan4780"
+         x="17.094305"
+         y="9.1093149"
+         style="stroke-width:0.26458332px">      </tspan></text>
+    <g
+       aria-label="π"
+       transform="matrix(0.93741128,0,0,0.93741128,11.744047,-21.123091)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.28224891px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot4779">
+      <path
+         d="m 4.2034012,25.805656 q -0.1706667,1.066667 -0.2986667,1.856 -0.128,0.789334 -0.2346667,1.365334 -0.1066666,0.576 -0.192,0.981333 -0.085333,0.405334 -0.1493333,0.725334 -0.2346667,0.981333 -0.5973334,1.472 -0.3413333,0.490666 -0.96,0.490666 -0.5546667,0 -0.87466668,-0.277333 -0.29866668,-0.277333 -0.27733335,-0.874667 0,-0.192 0.12800001,-0.384 0.128,-0.192 0.29866672,-0.298666 0.256,-0.170667 0.512,-0.469334 0.2773333,-0.32 0.5333333,-0.896 0.2773334,-0.576 0.5333334,-1.472 0.256,-0.896 0.4693333,-2.218667 -1.0666667,0 -1.728,0.192 -0.66133339,0.170667 -1.02400007,0.704 -0.10666667,0.170667 -0.23466667,0.149334 -0.12800001,-0.02133 -0.17066667,-0.298667 -0.02133334,-0.149333 0,-0.426667 0.02133333,-0.298666 0.14933333,-0.618666 0.12800001,-0.341334 0.36266668,-0.661334 0.23466668,-0.341333 0.6613334,-0.597333 0.3626666,-0.213333 0.832,-0.298667 0.4906667,-0.08533 1.1733333,-0.08533 h 4.6293335 q 1.2373334,0 1.7493334,-0.04267 0.533333,-0.04267 0.704,-0.149333 0.04267,-0.04267 0.106667,-0.02133 0.08533,0.02133 0.08533,0.192 0,0.469333 -0.213333,1.024 -0.2133336,0.533333 -0.5120003,0.746666 -0.1706667,0.106667 -0.4693334,0.149334 -0.2986666,0.04267 -0.9813333,0.04267 -0.4053334,1.514667 -0.4266667,2.965334 -0.042667,1.024 0.2346667,1.536 0.2773333,0.512 0.7253333,0.512 0.2346667,0 0.5333334,-0.128 0.2986666,-0.149333 0.6613333,-0.576 0.106667,-0.128 0.213333,-0.149333 0.128,-0.04267 0.213334,0 0.08533,0.04267 0.106666,0.170666 0.04267,0.106667 -0.02133,0.32 -0.426667,1.173334 -1.216,1.706667 -0.768,0.533333 -1.7280001,0.533333 -0.6186666,0 -1.0026667,-0.234666 -0.3626666,-0.234667 -0.576,-0.554667 -0.192,-0.341333 -0.256,-0.725333 -0.064,-0.384 -0.064,-0.704 0,-1.152001 0.4053334,-2.346667 0.4266666,-1.194667 0.896,-2.325334 z"
+         style="font-size:21.33333397px;stroke-width:0.28224891px"
+         id="path4758" />
+    </g>
+  </g>
+</svg>
--- a/web/share/svg/gear-led.svg
+++ b/web/share/svg/gear-led.svg
@@ -0,0 +1,151 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 521.99903 521.99702"
+   xml:space="preserve"
+   sodipodi:docname="gear-led-2.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   width="521.99902"
+   height="521.99701"><metadata
+   id="metadata49"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs47">
+	
+</defs><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1020"
+   id="namedview45"
+   showgrid="false"
+   inkscape:zoom="0.92187681"
+   inkscape:cx="199.23524"
+   inkscape:cy="241.2828"
+   inkscape:window-x="0"
+   inkscape:window-y="30"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<g
+   id="g4810"><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g4">
+		<path
+   style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   d="m 489.175,206.556 c -9.629,-1.442 -19.514,-2.825 -29.379,-4.111 -1.195,-0.155 -2.165,-0.966 -2.467,-2.064 -4.553,-16.523 -11.16,-32.467 -19.636,-47.389 -0.57,-1.002 -0.463,-2.266 0.273,-3.223 6.067,-7.885 12.081,-15.856 17.876,-23.69 7.824,-10.578 6.688,-25.588 -2.64,-34.917 L 420.836,58.796 c -9.329,-9.328 -24.338,-10.464 -34.918,-2.638 -7.817,5.782 -15.787,11.796 -23.689,17.875 -0.954,0.736 -2.221,0.843 -3.223,0.274 -14.921,-8.476 -30.865,-15.083 -47.389,-19.637 -1.099,-0.301 -1.91,-1.271 -2.066,-2.469 -1.289,-9.88 -2.671,-19.764 -4.109,-29.376 C 303.495,9.812 292.079,0 278.886,0 h -45.773 c -13.194,0 -24.61,9.812 -26.554,22.824 -1.439,9.614 -2.821,19.497 -4.11,29.379 -0.157,1.197 -0.967,2.165 -2.067,2.467 -16.524,4.556 -32.469,11.162 -47.387,19.637 -1.003,0.569 -2.269,0.459 -3.225,-0.274 C 141.869,67.954 133.898,61.94 126.08,56.157 115.499,48.332 100.49,49.47 91.163,58.797 L 58.797,91.163 c -9.329,9.33 -10.464,24.341 -2.638,34.918 5.804,7.846 11.818,15.815 17.875,23.688 0.735,0.955 0.843,2.22 0.274,3.223 -8.478,14.925 -15.084,30.869 -19.637,47.389 -0.301,1.097 -1.271,1.908 -2.467,2.065 -9.86,1.287 -19.744,2.669 -29.378,4.111 C 9.812,208.502 0,219.92 0,233.112 v 45.774 c 0,13.193 9.812,24.61 22.824,26.556 9.634,1.442 19.519,2.824 29.379,4.11 1.197,0.157 2.165,0.967 2.467,2.066 4.553,16.521 11.16,32.465 19.637,47.389 0.569,1.003 0.461,2.268 -0.274,3.223 -6.072,7.892 -12.086,15.862 -17.875,23.689 -7.825,10.578 -6.691,25.589 2.638,34.918 l 32.366,32.366 c 9.33,9.329 24.341,10.465 34.918,2.638 7.817,-5.782 15.787,-11.796 23.689,-17.875 0.955,-0.736 2.221,-0.842 3.223,-0.274 14.92,8.476 30.863,15.081 47.389,19.637 1.099,0.302 1.91,1.271 2.066,2.467 1.289,9.88 2.672,19.765 4.11,29.376 1.946,13.013 13.362,22.825 26.556,22.825 h 45.773 c 13.193,0 24.61,-9.812 26.555,-22.827 1.439,-9.623 2.821,-19.507 4.109,-29.376 0.157,-1.197 0.967,-2.166 2.066,-2.469 16.524,-4.556 32.469,-11.162 47.388,-19.637 1.003,-0.567 2.268,-0.459 3.224,0.274 7.901,6.079 15.872,12.093 23.689,17.875 10.578,7.825 25.588,6.691 34.918,-2.638 l 32.366,-32.366 c 9.328,-9.329 10.464,-24.339 2.639,-34.918 -5.795,-7.831 -11.81,-15.802 -17.876,-23.689 -0.735,-0.955 -0.843,-2.22 -0.273,-3.223 8.477,-14.924 15.083,-30.868 19.636,-47.388 0.304,-1.1 1.272,-1.91 2.469,-2.067 9.863,-1.286 19.748,-2.669 29.378,-4.11 13.013,-1.945 22.825,-13.362 22.825,-26.555 v -45.774 c 0,-13.19 -9.812,-24.608 -22.824,-26.553 z m -1.084,72.332 c 0,1.45 -1.054,2.7 -2.453,2.911 -9.482,1.419 -19.216,2.779 -28.932,4.048 -10.758,1.402 -19.56,9.024 -22.426,19.42 -4.029,14.618 -9.875,28.727 -17.375,41.932 -5.333,9.389 -4.504,21.012 2.112,29.612 5.976,7.768 11.899,15.617 17.604,23.329 0.842,1.137 0.702,2.769 -0.323,3.794 L 403.931,436.3 c -1.026,1.026 -2.657,1.163 -3.793,0.324 -7.697,-5.695 -15.548,-11.618 -23.33,-17.605 -8.599,-6.617 -20.221,-7.446 -29.609,-2.114 -13.205,7.5 -27.314,13.347 -41.934,17.377 -10.394,2.865 -18.016,11.667 -19.421,22.426 -1.267,9.722 -2.629,19.456 -4.047,28.932 -0.209,1.399 -1.461,2.453 -2.911,2.453 h -45.773 c -1.45,0 -2.702,-1.054 -2.911,-2.454 -1.415,-9.465 -2.778,-19.199 -4.047,-28.93 -1.403,-10.759 -9.027,-19.561 -19.421,-22.426 -14.621,-4.03 -28.73,-9.877 -41.934,-17.378 -4.117,-2.337 -8.664,-3.491 -13.196,-3.491 -5.804,0 -11.585,1.89 -16.412,5.607 -7.783,5.987 -15.633,11.91 -23.33,17.605 -1.138,0.839 -2.767,0.702 -3.792,-0.324 L 75.703,403.936 c -1.026,-1.026 -1.166,-2.656 -0.324,-3.793 5.701,-7.707 11.623,-15.556 17.604,-23.33 6.615,-8.6 7.445,-20.221 2.114,-29.609 C 87.594,333.995 81.749,319.887 77.72,305.27 74.855,294.876 66.053,287.253 55.295,285.85 c -9.712,-1.267 -19.447,-2.63 -28.934,-4.048 -1.399,-0.21 -2.453,-1.461 -2.453,-2.911 v -45.774 c 0,-1.45 1.054,-2.701 2.453,-2.911 9.487,-1.419 19.221,-2.781 28.932,-4.048 10.759,-1.402 19.561,-9.025 22.426,-19.42 4.027,-14.616 9.874,-28.725 17.377,-41.934 5.332,-9.389 4.502,-21.011 -2.113,-29.609 -5.965,-7.756 -11.888,-15.604 -17.604,-23.33 -0.84,-1.137 -0.701,-2.769 0.324,-3.793 l 32.365,-32.367 c 1.024,-1.026 2.655,-1.163 3.792,-0.324 7.697,5.694 15.547,11.617 23.33,17.605 8.6,6.614 20.221,7.445 29.611,2.112 13.203,-7.5 27.312,-13.347 41.932,-17.377 10.395,-2.865 18.019,-11.667 19.422,-22.426 1.27,-9.731 2.631,-19.465 4.048,-28.933 0.209,-1.397 1.461,-2.452 2.911,-2.452 h 45.773 c 1.45,0 2.702,1.054 2.911,2.453 1.417,9.465 2.778,19.198 4.048,28.932 1.403,10.759 9.027,19.561 19.421,22.426 14.62,4.03 28.728,9.877 41.934,17.377 9.388,5.33 21.01,4.502 29.608,-2.114 7.783,-5.987 15.633,-11.91 23.329,-17.604 1.137,-0.842 2.769,-0.703 3.794,0.324 l 32.366,32.366 c 1.026,1.026 1.164,2.657 0.324,3.793 -5.705,7.714 -11.628,15.562 -17.604,23.33 -6.615,8.601 -7.445,20.223 -2.112,29.612 7.501,13.205 13.347,27.313 17.377,41.933 2.865,10.394 11.669,18.016 22.424,19.418 9.716,1.268 19.451,2.63 28.934,4.048 1.399,0.21 2.453,1.461 2.453,2.911 v 45.773 z"
+   id="path2"
+   inkscape:connector-curvature="0" />
+	</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g12">
+	<g
+   style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="g10">
+		<path
+   inkscape:connector-curvature="0"
+   style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+   id="path8"
+   d="m 256,144.866 c -61.28,0 -111.134,49.854 -111.134,111.134 0,61.28 49.854,111.134 111.134,111.134 61.28,0 111.134,-49.854 111.134,-111.134 0,-61.28 -49.854,-111.134 -111.134,-111.134 z m 0,198.359 c -48.097,0 -87.225,-39.129 -87.225,-87.225 0,-48.097 39.13,-87.225 87.225,-87.225 48.096,0 87.225,39.129 87.225,87.225 0,48.096 -39.128,87.225 -87.225,87.225 z" />
+	</g>
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g14">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g16">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g18">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g20">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g22">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g24">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g26">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g28">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g30">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g32">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g34">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g36">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g38">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g40">
+</g><g
+     transform="translate(5,5)"
+     style="stroke:#000000;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="g42">
+</g></g>
+</svg>
--- a/web/share/svg/hid-keyboard-led.svg
+++ b/web/share/svg/hid-keyboard-led.svg
--- a/web/share/svg/hid-mouse-led.svg
+++ b/web/share/svg/hid-mouse-led.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16.933332mm"
+   height="16.933332mm"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="mouse.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="13.28418"
+     inkscape:cy="14.886884"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-107.87666,-24.618942)">
+    <g
+       aria-label="🖰"
+       transform="matrix(2.0925222,0,0,2.0925222,225.46869,4.2347952)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.20230769;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="flowRoot4916">
+      <path
+         d="m -52.145156,17.732578 q -1.41,0 -2.15,-0.75 -0.73,-0.76 -0.73,-2.21 v -0.46 l 0.13,-2.72 q 0.04,-0.91 0.39,-1.33 0.36,-0.4199999 1.08,-0.4199999 0.2,0 0.44,0.03 l 2.48,0.2499999 q 0.55,0.05 0.79,0.35 0.25,0.29 0.28,0.9 l 0.16,3.14 v 0.29 q 0,1.42 -0.74,2.18 -0.73,0.75 -2.13,0.75 z m -2.48,-5.45 q 0.35,-0.04 0.71,-0.05 0.37,-0.02 0.73,-0.02 0.28,0 0.55,0.01 0.28,0.01 0.55,0.03 v -2 l -0.93,-0.09 q -0.11,-0.01 -0.22,-0.02 -0.1,-0.01 -0.19,-0.01 -0.59,0 -0.86,0.34 -0.27,0.33 -0.31,1.13 z m 4.96,0.39 -0.07,-1.29 q -0.03,-0.5 -0.21,-0.71 -0.17,-0.21 -0.6,-0.26 l -1.26,-0.13 v 2 q 0.56,0.05 1.1,0.16 0.55,0.1 1.04,0.23 z m -2.47,4.77 q 2.56,0 2.56,-2.64 v -0.27 l -0.08,-1.55 q -0.89,-0.24 -1.75,-0.35 -0.86,-0.12 -1.73,-0.12 -0.38,0 -0.75,0.02 -0.37,0.02 -0.76,0.06 l -0.08,1.71 v 0.47 q 0,2.67 2.59,2.67 z"
+         style="stroke:#000000;stroke-width:0.20230769;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path5033" />
+    </g>
+  </g>
+</svg>
--- a/web/share/svg/info.svg
+++ b/web/share/svg/info.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+  <circle cy="24" cx="24" r="24" fill="#36c"/>
+  <g fill="#fff">
+    <circle cx="24" cy="11.6" r="4.7"/>
+    <path d="m17.4 18.8v2.15h1.13c2.26 0 2.26 1.38 2.26 1.38v15.1s0 1.38-2.26 1.38h-1.13v2.08h14.2v-2.08h-1.13c-2.26 0-2.26-1.38-2.26-1.38v-18.6"/>
+  </g>
+</svg>
--- a/web/share/svg/kvm.svg
+++ b/web/share/svg/kvm.svg
@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.004 512.004" style="enable-background:new 0 0 512.004 512.004;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M444.326,0H67.754C50.346,0,36.19,14.16,36.19,31.56L36.106,284.5c0,17.404,14.156,31.5,31.556,31.5h124.336
+			c-0.008,0,0,0.18,0,0.212V348H168.27c-2.208,0-4.272,2.18-4.272,4.388V368c0,2.208,2.064,4,4.272,4h174.78
+			c2.212,0,4.948-1.792,4.948-4v-15.612c0-2.208-2.736-4.388-4.944-4.388h-23.056v-31.788c0-0.032-0.256-0.212-0.264-0.212h124.508
+			c17.408,0,31.564-14.096,31.564-31.496l0.092-252.972C475.898,14.128,461.734,0,444.326,0z M255.934,292.392
+			c-6.616,0-12-5.38-12-11.996c0-6.616,5.384-11.996,12-11.996c6.608,0,11.992,5.38,11.992,11.996
+			C267.926,287.012,262.546,292.392,255.934,292.392z M447.998,248h-384V28h328.008h38.296h17.696V248z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M323.998,403.884c0-6.564-5.32-11.884-11.884-11.884H83.882c-6.564,0-11.884,5.32-11.884,11.884v96.236
+			c0,6.564,5.32,11.884,11.884,11.884h228.236c6.564,0,11.884-5.32,11.884-11.884v-96.236H323.998z M267.778,408h4.632
+			c4.42,0,8,3.58,8,8c0,4.416-3.58,8-8,8h-4.632c-4.42,0-8-3.584-8-8C259.778,411.58,263.358,408,267.778,408z M195.786,408h4.116
+			c4.42,0,8,3.58,8,8c0,4.416-3.58,8-8,8h-4.116c-4.42,0-8-3.584-8-8C187.786,411.58,191.366,408,195.786,408z M195.786,432h4.116
+			c4.42,0,8,3.584,8,8c0,4.42-3.58,8-8,8h-4.116c-4.42,0-8-3.58-8-8C187.786,435.584,191.366,432,195.786,432z M195.786,456h4.116
+			c4.42,0,8,3.584,8,8c0,4.416-3.58,8-8,8h-4.116c-4.42,0-8-3.584-8-8C187.786,459.584,191.366,456,195.786,456z M171.786,408h4.4
+			c4.416,0,8,3.58,8,8c0,4.416-3.584,8-8,8h-4.4c-4.416,0-8-3.584-8-8C163.786,411.58,167.374,408,171.786,408z M171.786,432h4.4
+			c4.416,0,8,3.584,8,8c0,4.42-3.584,8-8,8h-4.4c-4.416,0-8-3.58-8-8C163.786,435.584,167.374,432,171.786,432z M171.786,456h4.4
+			c4.416,0,8,3.584,8,8c0,4.416-3.584,8-8,8h-4.4c-4.416,0-8-3.584-8-8C163.786,459.584,167.374,456,171.786,456z M99.794,408h4.108
+			c4.416,0,8,3.58,8,8c0,4.416-3.584,8-8,8h-4.108c-4.416,0-8-3.584-8-8C91.794,411.58,95.382,408,99.794,408z M99.794,432h4.108
+			c4.416,0,8,3.584,8,8c0,4.42-3.584,8-8,8h-4.108c-4.416,0-8-3.58-8-8C91.794,435.584,95.382,432,99.794,432z M103.906,496h-4.108
+			c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8h4.108c4.416,0,8,3.584,8,8C111.906,492.416,108.318,496,103.906,496z M127.898,496
+			h-4.1c-4.42,0-8-3.584-8-8c0-4.416,3.58-8,8-8h4.1c4.42,0,8,3.584,8,8C135.898,492.416,132.318,496,127.898,496z M127.898,472
+			h-28.1c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8h28.1c4.42,0,8,3.584,8,8C135.898,468.416,132.318,472,127.898,472z M127.898,448
+			h-4.1c-4.42,0-8-3.58-8-8c0-4.416,3.58-8,8-8h4.1c4.42,0,8,3.584,8,8C135.898,444.42,132.318,448,127.898,448z M127.898,424h-4.1
+			c-4.42,0-8-3.584-8-8c0-4.42,3.58-8,8-8h4.1c4.42,0,8,3.58,8,8C135.898,420.416,132.318,424,127.898,424z M151.898,496h-4.1
+			c-4.42,0-8-3.584-8-8c0-4.416,3.58-8,8-8h4.1c4.416,0,8,3.584,8,8C159.898,492.416,156.31,496,151.898,496z M151.898,472h-4.1
+			c-4.42,0-8-3.584-8-8c0-4.416,3.58-8,8-8h4.1c4.416,0,8,3.584,8,8C159.898,468.416,156.31,472,151.898,472z M151.898,448h-4.1
+			c-4.42,0-8-3.58-8-8c0-4.416,3.58-8,8-8h4.1c4.416,0,8,3.584,8,8C159.898,444.42,156.31,448,151.898,448z M151.898,424h-4.1
+			c-4.42,0-8-3.584-8-8c0-4.42,3.58-8,8-8h4.1c4.416,0,8,3.58,8,8C159.898,420.416,156.31,424,151.898,424z M224.246,496h-52.46
+			c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8h52.46c4.416,0,8,3.584,8,8C232.246,492.416,228.662,496,224.246,496z M224.246,472
+			h-4.46c-4.42,0-8-3.584-8-8c0-4.416,3.58-8,8-8h4.46c4.416,0,8,3.584,8,8C232.246,468.416,228.662,472,224.246,472z M224.246,448
+			h-4.46c-4.42,0-8-3.58-8-8c0-4.416,3.58-8,8-8h4.46c4.416,0,8,3.584,8,8C232.246,444.42,228.662,448,224.246,448z M224.246,424
+			h-4.46c-4.42,0-8-3.584-8-8c0-4.42,3.58-8,8-8h4.46c4.416,0,8,3.58,8,8C232.246,420.416,228.662,424,224.246,424z M248.578,496
+			h-4.796c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8h4.796c4.42,0,8,3.584,8,8C256.578,492.416,252.998,496,248.578,496z
+			 M248.578,472h-4.796c-4.416,0-8-3.584-8-8c0-4.416,3.584-8,8-8h4.796c4.42,0,8,3.584,8,8
+			C256.578,468.416,252.998,472,248.578,472z M248.578,448h-4.796c-4.416,0-8-3.58-8-8c0-4.416,3.584-8,8-8h4.796
+			c4.42,0,8,3.584,8,8C256.578,444.42,252.998,448,248.578,448z M248.578,424h-4.796c-4.416,0-8-3.584-8-8c0-4.42,3.584-8,8-8h4.796
+			c4.42,0,8,3.58,8,8C256.578,420.416,252.998,424,248.578,424z M267.778,432h4.632c4.42,0,8,3.584,8,8c0,4.42-3.58,8-8,8h-4.632
+			c-4.42,0-8-3.58-8-8C259.778,435.584,263.358,432,267.778,432z M272.414,496h-4.632c-4.42,0-8-3.584-8-8c0-4.416,3.58-8,8-8h4.632
+			c4.42,0,8,3.584,8,8C280.414,492.416,276.834,496,272.414,496z M295.882,496h-4.1c-4.42,0-8-3.584-8-8c0-4.416,3.58-8,8-8h4.1
+			c4.42,0,8,3.584,8,8C303.882,492.416,300.302,496,295.882,496z M295.882,472h-28.1c-4.42,0-8-3.584-8-8c0-4.42,3.58-8,8-8h28.1
+			c4.42,0,8,3.58,8,8C303.882,468.416,300.302,472,295.882,472z M296.622,448h-4.844c-4.42,0-8-3.58-8-8c0-4.416,3.58-8,8-8h4.844
+			c4.416,0,8,3.584,8,8C304.622,444.42,301.038,448,296.622,448z M296.622,424h-4.844c-4.42,0-8-3.584-8-8c0-4.42,3.58-8,8-8h4.844
+			c4.416,0,8,3.58,8,8C304.622,420.416,301.038,424,296.622,424z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M394.442,400h-6.188c-18.14,0-32.256,15.26-32.256,34.092v44.316c0,18.836,14.116,33.588,32.256,33.588h6.188
+			c18.516,0,33.556-15.068,33.556-33.588v-44.316C427.998,415.576,412.958,400,394.442,400z M399.998,432.336c0,4.416-3.584,8-8,8
+			c-4.42,0-8-3.584-8-8v-8.668c0-4.42,3.58-8,8-8c4.416,0,8,3.58,8,8V432.336z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/web/share/svg/link-led.svg
+++ b/web/share/svg/link-led.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M168,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C180,189.412,174.624,184.036,168,184.036z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M256,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C268,189.412,262.624,184.036,256,184.036z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M212,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C224,189.412,218.624,184.036,212,184.036z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M460,0H52C23.28,0,0,23.28,0,52v408c0,28.72,23.28,52,52,52h408c28.72,0,52-23.28,52-52V52C512,23.28,488.72,0,460,0z
+			 M444,284h-88.024c-2.212,0-3.976,1.64-3.976,3.848V348H160v-60.152c0-2.208-1.616-3.848-3.828-3.848H68V68h44v92.184
+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184
+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184
+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h20v92.184
+			c0,6.624,5.368,12,12,12c6.624,0,12-5.376,12-12V68h44V284z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M124,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C136,189.412,130.624,184.036,124,184.036z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M388,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C400,189.412,394.624,184.036,388,184.036z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M344,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C356,189.412,350.624,184.036,344,184.036z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M300,184.036c-6.632,0-12,5.376-12,12v23.752c0,6.628,5.368,12,12,12c6.624,0,12-5.372,12-12v-23.752
+			C312,189.412,306.624,184.036,300,184.036z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
--- a/web/share/svg/logo.svg
+++ b/web/share/svg/logo.svg
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="18"
+   viewBox="0 0 16.933333 4.7625002"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="logo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="13.879867"
+     inkscape:cy="2.1728257"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-11.627273,-5.521379)">
+    <g
+       aria-label="π-kvm"
+       transform="matrix(0.44662735,0,0,0.44662735,-8.0000339,-7.4893447)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.59240288px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot4747">
+      <path
+         d="m 48.222932,31.977531 q -0.170666,1.066667 -0.298666,1.856 -0.128,0.789334 -0.234667,1.365334 -0.106667,0.576 -0.192,0.981333 -0.08533,0.405334 -0.149333,0.725334 -0.234667,0.981333 -0.597334,1.472 -0.341333,0.490666 -0.96,0.490666 -0.554666,0 -0.874666,-0.277333 -0.298667,-0.277333 -0.277334,-0.874667 0,-0.192 0.128,-0.384 0.128,-0.192 0.298667,-0.298666 0.256,-0.170667 0.512,-0.469334 0.277333,-0.32 0.533333,-0.896 0.277334,-0.576 0.533334,-1.472 0.256,-0.896 0.469333,-2.218667 -1.066667,0 -1.728,0.192 -0.661333,0.170667 -1.024,0.704 -0.106667,0.170667 -0.234667,0.149334 -0.128,-0.02133 -0.170666,-0.298667 -0.02133,-0.149333 0,-0.426667 0.02133,-0.298666 0.149333,-0.618666 0.128,-0.341334 0.362667,-0.661334 0.234666,-0.341333 0.661333,-0.597333 0.362667,-0.213333 0.832,-0.298667 0.490667,-0.08533 1.173333,-0.08533 h 4.629334 q 1.237333,0 1.749333,-0.04267 0.533334,-0.04267 0.704,-0.149333 0.04267,-0.04267 0.106667,-0.02133 0.08533,0.02133 0.08533,0.192 0,0.469333 -0.213333,1.024 -0.213333,0.533333 -0.512,0.746666 -0.170667,0.106667 -0.469333,0.149334 -0.298667,0.04267 -0.981334,0.04267 -0.405333,1.514667 -0.426666,2.965334 -0.04267,1.024 0.234666,1.536 0.277334,0.512 0.725334,0.512 0.234666,0 0.533333,-0.128 0.298667,-0.149333 0.661333,-0.576 0.106667,-0.128 0.213334,-0.149333 0.128,-0.04267 0.213333,0 0.08533,0.04267 0.106667,0.170666 0.04267,0.106667 -0.02133,0.32 -0.426666,1.173334 -1.216,1.706667 -0.768,0.533333 -1.728,0.533333 -0.618666,0 -1.002667,-0.234666 -0.362666,-0.234667 -0.576,-0.554667 -0.192,-0.341333 -0.256,-0.725333 -0.064,-0.384 -0.064,-0.704 0,-1.152001 0.405334,-2.346667 0.426666,-1.194667 0.896,-2.325334 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.33333397px;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';stroke-width:0.59240288px"
+         id="path4769"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 57.912266,35.979532 q 0.14,0.16 0.14,0.42 0,0.1 -0.04,0.21 -0.03,0.1 -0.09,0.18 l -2.4,0.22 q -0.06,-0.06 -0.11,-0.16 -0.04,-0.1 -0.04,-0.24 0,-0.14 0.04,-0.23 0.05,-0.1 0.11,-0.18 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';stroke-width:0.59240288px"
+         id="path4771"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 60.365234,38.027539 -1.171875,0.839844 q 0.01953,-1.269531 0.03906,-2.280273 0.01953,-1.010742 0.0293,-1.796875 0.01465,-0.791016 0.02441,-1.372071 0.0098,-0.581054 0.01465,-0.996093 0.01465,-0.97168 0.01465,-1.362305 0.01465,-0.595703 -0.170899,-0.927734 Q 58.963867,29.8 58.583008,29.8 q -0.122071,0 -0.253906,0.03418 -0.136719,0.0293 -0.283204,0.107422 0.19043,-0.136719 0.400391,-0.27832 0.209961,-0.146485 0.424805,-0.263672 0.219726,-0.117188 0.439453,-0.19043 0.224609,-0.07813 0.444336,-0.07813 0.195312,0 0.332031,0.07324 0.136719,0.07324 0.224609,0.195313 0.09277,0.117187 0.141602,0.273437 0.04883,0.151367 0.06836,0.317383 0.02441,0.166016 0.0293,0.332031 0.0049,0.166016 0.0049,0.307617 l -0.112305,4.179688 q 0.263672,-0.297852 0.595703,-0.551758 0.336915,-0.258789 0.698243,-0.439453 0.361328,-0.180664 0.722656,-0.268555 0.366211,-0.08789 0.683594,-0.04883 0.190429,0.02441 0.356445,0.112305 0.166016,0.08301 0.288086,0.224609 0.12207,0.136719 0.19043,0.322266 0.07324,0.180664 0.07324,0.390625 0,0.34668 -0.161133,0.620117 -0.161133,0.273438 -0.415039,0.478516 -0.249024,0.205078 -0.556641,0.341797 -0.302734,0.131836 -0.585937,0.200195 0.131836,0.141601 0.307617,0.332031 0.180664,0.19043 0.385742,0.395508 0.205078,0.200195 0.429688,0.400391 0.224609,0.195312 0.449218,0.351562 0.229493,0.15625 0.449219,0.253906 0.219727,0.09277 0.419922,0.09277 0.390625,0 0.791016,-0.249024 -0.351563,0.249024 -0.620118,0.449219 -0.263671,0.195313 -0.498046,0.327149 -0.229493,0.131835 -0.458985,0.195312 -0.229492,0.06348 -0.512695,0.03906 -0.288086,-0.01953 -0.561524,-0.19043 -0.268554,-0.166016 -0.517578,-0.395508 -0.249023,-0.229492 -0.478515,-0.488281 -0.229492,-0.258789 -0.434571,-0.463867 -0.08789,-0.102539 -0.195312,-0.19043 -0.09277,-0.07324 -0.224609,-0.146484 -0.126954,-0.07324 -0.288086,-0.10254 0.170898,-0.141601 0.341796,-0.249023 0.175782,-0.112305 0.317383,-0.195312 0.166016,-0.09277 0.327149,-0.166016 0.166015,-0.07324 0.346679,-0.170899 0.185547,-0.09766 0.336914,-0.224609 0.15625,-0.131836 0.253907,-0.297851 0.102539,-0.170899 0.102539,-0.390625 0,-0.180665 -0.06348,-0.351563 -0.05859,-0.175781 -0.170898,-0.307617 -0.112305,-0.136719 -0.268555,-0.214844 -0.151367,-0.08301 -0.336914,-0.08301 -0.185547,0 -0.356445,0.05859 -0.170899,0.05859 -0.283203,0.12207 -0.09766,0.05371 -0.253907,0.307618 -0.151367,0.253906 -0.302734,0.71289 -0.151367,0.458985 -0.268555,1.12793 -0.112304,0.668945 -0.131836,1.547851 z m 5.200196,-0.258789 0.04883,-0.03906 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Eagle Lake';-inkscape-font-specification:'Eagle Lake Bold';stroke-width:0.59240288px"
+         id="path4773"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 68.514648,37.827344 -1.079101,0.97168 q -0.112305,-0.458985 -0.258789,-0.9375 -0.146485,-0.483399 -0.288086,-0.883789 -0.161133,-0.463867 -0.332031,-0.908203 -0.141602,-0.454102 -0.297852,-0.786133 -0.151367,-0.332031 -0.327148,-0.546875 -0.170899,-0.214844 -0.366211,-0.317383 -0.195313,-0.107422 -0.419922,-0.107422 -0.253906,0 -0.53711,0.117188 0.151368,-0.122071 0.366211,-0.297852 0.214844,-0.180664 0.449219,-0.341797 0.234375,-0.166015 0.46875,-0.283203 0.239258,-0.117187 0.43457,-0.117187 0.136719,0 0.268555,0.06836 0.131836,0.06348 0.249024,0.209961 0.08789,0.117187 0.214843,0.332031 0.131836,0.209961 0.278321,0.483399 0.146484,0.273437 0.297851,0.595703 0.15625,0.317382 0.292969,0.659179 0.141601,0.336914 0.253906,0.683594 0.117188,0.341797 0.185547,0.65918 0.170898,-0.214844 0.3125,-0.410156 0.146484,-0.200196 0.253906,-0.356446 0.126953,-0.180664 0.22461,-0.341797 0.249023,-0.415039 0.385742,-0.756836 0.141601,-0.341796 0.141601,-0.615234 0,-0.136719 -0.03906,-0.253906 -0.03906,-0.117188 -0.131836,-0.205078 l 1.162109,-0.771485 q 0.08789,0.09277 0.122071,0.205078 0.03906,0.112305 0.03906,0.234375 0,0.249024 -0.102539,0.522461 -0.102539,0.268555 -0.273437,0.551758 -0.166016,0.283203 -0.38086,0.571289 -0.209961,0.288086 -0.43457,0.566406 -0.219727,0.278321 -0.429688,0.541993 -0.209961,0.263672 -0.371093,0.498047 -0.161133,0.229492 -0.253907,0.424804 -0.09277,0.195313 -0.07813,0.341797 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Eagle Lake';-inkscape-font-specification:'Eagle Lake Bold';stroke-width:0.59240288px"
+         id="path4775"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 77.098633,35.107618 q -0.01465,0.288085 -0.03906,0.708007 -0.02441,0.361328 -0.05859,0.908203 -0.0293,0.541993 -0.08301,1.28418 l -1.25,0.830078 q 0.05371,-0.322265 0.08789,-0.683593 0.03906,-0.366211 0.06348,-0.737305 0.02441,-0.371094 0.03418,-0.732422 0.01465,-0.366211 0.01465,-0.683594 0,-0.302734 -0.0293,-0.600586 -0.02441,-0.297851 -0.131836,-0.532226 -0.102539,-0.234375 -0.3125,-0.38086 -0.205078,-0.146484 -0.566406,-0.146484 -0.322266,0 -0.551758,0.180664 -0.224609,0.180664 -0.385742,0.610352 -0.161133,0.429687 -0.268555,1.137695 -0.102539,0.703125 -0.175781,1.757812 l -1.166992,0.839844 q 0.04394,-0.942383 0.06836,-1.606445 0.02441,-0.664063 0.03418,-1.09375 0.01465,-0.50293 0.01465,-0.830078 0.02441,-0.590821 -0.161132,-0.922852 -0.185547,-0.336914 -0.566407,-0.336914 -0.12207,0 -0.258789,0.03906 -0.131836,0.03418 -0.283203,0.102539 0.19043,-0.136719 0.400391,-0.278321 0.209961,-0.146484 0.429687,-0.263672 0.219727,-0.117187 0.439453,-0.190429 0.22461,-0.07813 0.439453,-0.07813 0.205079,0 0.371094,0.08301 0.170899,0.08301 0.258789,0.27832 0.07813,0.170898 0.112305,0.395508 0.03906,0.219726 0.04883,0.483398 0.209961,-0.249023 0.473633,-0.478515 0.268555,-0.234375 0.551758,-0.405274 0.288086,-0.175781 0.576172,-0.268555 0.288086,-0.09766 0.537109,-0.06836 0.175781,0.02441 0.366211,0.08789 0.195312,0.06348 0.366211,0.185547 0.175781,0.12207 0.317383,0.3125 0.141601,0.185546 0.214843,0.463867 0.209961,-0.22461 0.463868,-0.424805 0.253906,-0.205078 0.517578,-0.351562 0.263672,-0.146485 0.522461,-0.219727 0.258789,-0.07813 0.483398,-0.05371 0.219727,0.0293 0.454102,0.12207 0.239257,0.08789 0.43457,0.283203 0.195312,0.19043 0.317383,0.50293 0.126953,0.307617 0.112304,0.771485 -0.01465,0.551757 -0.05371,1.015625 -0.03418,0.463867 -0.03418,0.815429 0,0.209961 0.03418,0.395508 0.03906,0.185547 0.126953,0.322266 0.08789,0.136718 0.234375,0.214843 0.146484,0.07813 0.366211,0.07813 0.195312,0 0.410156,-0.07324 0.219726,-0.07813 0.439453,-0.234375 -0.361328,0.317383 -0.65918,0.532227 -0.292968,0.214844 -0.546875,0.346679 -0.253906,0.131836 -0.473633,0.185547 -0.214843,0.05859 -0.419921,0.05371 -0.205079,-0.0049 -0.351563,-0.08301 -0.146484,-0.07324 -0.234375,-0.229492 -0.08789,-0.161133 -0.12207,-0.410156 -0.03418,-0.253906 -0.02441,-0.620117 0.01465,-0.322266 0.03418,-0.708008 0.02441,-0.390625 0.02441,-0.771484 0,-0.3125 -0.0293,-0.600586 -0.02441,-0.292969 -0.126954,-0.512696 -0.102539,-0.219726 -0.302734,-0.351562 -0.200195,-0.131836 -0.546875,-0.131836 -0.19043,0 -0.341797,0.05371 -0.151367,0.05371 -0.273437,0.15625 -0.117188,0.09766 -0.209961,0.234375 -0.08789,0.131836 -0.15625,0.292969 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'Eagle Lake';-inkscape-font-specification:'Eagle Lake Bold';stroke-width:0.59240288px"
+         id="path4777"
+         inkscape:connector-curvature="0" />
+    </g>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:2.64583325px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="17.094305"
+       y="9.1093149"
+       id="text4782"><tspan
+         sodipodi:role="line"
+         id="tspan4780"
+         x="17.094305"
+         y="9.1093149"
+         style="stroke-width:0.26458332px">      </tspan></text>
+  </g>
+</svg>
--- a/web/share/svg/msd-led.svg
+++ b/web/share/svg/msd-led.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16.933332mm"
+   height="16.933332mm"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="msd.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="-7.1450758"
+     inkscape:cy="12.600068"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-107.87666,-24.618942)">
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot5064"
+       style="fill:black;stroke:none;stroke-opacity:1;stroke-width:1px;stroke-linejoin:miter;stroke-linecap:butt;fill-opacity:1;font-family:Adobe Garamond Pro;font-style:normal;font-weight:bold;font-size:10px;line-height:125%;letter-spacing:0px;word-spacing:0px;-inkscape-font-specification:Adobe Garamond Pro Bold;font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr"><flowRegion
+         id="flowRegion5066"><rect
+           id="rect5068"
+           width="50.892857"
+           height="43.57143"
+           x="-72.321426"
+           y="5.4285674" /></flowRegion><flowPara
+         id="flowPara5070"></flowPara></flowRoot>    <g
+       aria-label="✇"
+       transform="matrix(2.2460794,0,0,2.2388294,309.08063,12.073626)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.11798844px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot5115">
+      <path
+         d="m -87.924805,11.194336 q -0.307617,-0.356445 -0.46875,-0.74707 -0.0293,-0.07324 -0.05371,-0.146485 l 1.455079,-1.2353513 q -0.03906,0.1464844 -0.03906,0.3125 0,0.2441406 0.09277,0.4638672 0.09277,0.2246091 0.268555,0.4003911 0.15625,0.15625 0.395508,0.263671 0.09766,0.04395 0.136719,0.04883 z m 2.973633,-2.6855469 q -0.175781,-0.1660157 -0.395508,-0.2636719 -0.209961,-0.092773 -0.463867,-0.092773 -0.253906,0 -0.463867,0.092773 -0.219727,0.097656 -0.395508,0.2636719 l 0.341797,-1.8896485 q 0.249023,-0.043945 0.517578,-0.043945 0.273438,0 0.517578,0.043945 z m 0.322266,0.5566406 1.455078,1.2353513 q -0.0098,0.03418 -0.05371,0.146485 -0.161133,0.390625 -0.46875,0.74707 l -1.787109,-0.639648 q 0.06836,-0.01953 0.136718,-0.04883 0.239258,-0.107421 0.395508,-0.263671 0.175781,-0.175782 0.268555,-0.4003911 0.09277,-0.2197266 0.09277,-0.4638672 0,-0.1611328 -0.03906,-0.312499 z m -1.459961,-0.3710938 q 0.126953,-0.053711 0.27832,-0.053711 0.151367,0 0.27832,0.053711 0.131836,0.058594 0.239258,0.1611329 0.107422,0.1123046 0.161133,0.2392578 0.05371,0.1318359 0.05371,0.2832031 0,0.1464844 -0.05371,0.2783203 -0.05371,0.1269531 -0.161133,0.2392578 -0.107422,0.1025391 -0.239258,0.1611332 -0.126953,0.05371 -0.27832,0.05371 -0.151367,0 -0.27832,-0.05371 -0.131836,-0.058594 -0.239258,-0.1611332 -0.107422,-0.1123047 -0.161133,-0.2392578 -0.05371,-0.1318359 -0.05371,-0.2783203 0,-0.1513672 0.05371,-0.2832031 0.05371,-0.1269532 0.161133,-0.2392578 0.107422,-0.1025391 0.239258,-0.1611329 z m 0.27832,-2.602539 q -0.654297,0 -1.259765,0.2490234 -0.581055,0.2392578 -1.059571,0.7226563 -0.488281,0.4882812 -0.722656,1.0644531 -0.239258,0.5810547 -0.239258,1.2695312 0,0.6494141 0.239258,1.2451171 0.239258,0.581055 0.722656,1.064453 0.46875,0.473633 1.059571,0.722657 0.59082,0.249023 1.259765,0.249023 0.664063,0 1.259766,-0.249023 0.581054,-0.239258 1.05957,-0.722657 0.488281,-0.488281 0.722656,-1.064453 0.239258,-0.581055 0.239258,-1.2451171 0,-0.6884765 -0.239258,-1.2695312 -0.224609,-0.5517578 -0.722656,-1.0644531 -0.463867,-0.46875 -1.05957,-0.7226563 -0.585938,-0.2490234 -1.259766,-0.2490234 z m 0,-0.4882813 q 0.751953,0 1.445313,0.288086 0.654297,0.2734375 1.21582,0.8300781 0.546875,0.5419922 0.830078,1.2207031 0.27832,0.6689453 0.27832,1.4550781 0,0.7421871 -0.27832,1.4306641 -0.258789,0.639648 -0.830078,1.220703 -0.537109,0.546875 -1.21582,0.830078 -0.688477,0.288086 -1.445313,0.288086 -0.751953,0 -1.445312,-0.288086 -0.654297,-0.273437 -1.215821,-0.830078 -0.546875,-0.541992 -0.830078,-1.220703 -0.27832,-0.668945 -0.27832,-1.4306641 0,-0.7666015 0.27832,-1.4550781 0.258789,-0.6396484 0.830078,-1.2207031 0.527344,-0.5371094 1.215821,-0.8300781 0.683593,-0.288086 1.445312,-0.288086 z"
+         style="stroke-width:0.11798844px"
+         id="path5123"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
--- a/web/share/svg/select-arrow-inactive.svg
+++ b/web/share/svg/select-arrow-inactive.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="31.999998"
+   viewBox="0 0 6.3500001 8.4666662"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="select-arrow-inactive.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="27.151934"
+     inkscape:cy="16.615415"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-8.8745959,-36.821965)">
+    <path
+       sodipodi:type="star"
+       style="opacity:1;fill:#6c7481;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:1;paint-order:normal"
+       id="path4749"
+       sodipodi:sides="3"
+       sodipodi:cx="12.049596"
+       sodipodi:cy="40.702518"
+       sodipodi:r1="1.411111"
+       sodipodi:r2="0.70555568"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 12.049596,42.113629 -0.611029,-1.058333 -0.611029,-1.058333 1.222058,0 1.222058,0 -0.611029,1.058333 z"
+       inkscape:transform-center-y="0.3527758" />
+  </g>
+</svg>
--- a/web/share/svg/select-arrow-intensive.svg
+++ b/web/share/svg/select-arrow-intensive.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="31.999998"
+   viewBox="0 0 6.3500001 8.4666662"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="select-arrow-intensive.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="27.151934"
+     inkscape:cy="16.615415"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-8.8745959,-36.821965)">
+    <path
+       sodipodi:type="star"
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:1;paint-order:normal"
+       id="path4749"
+       sodipodi:sides="3"
+       sodipodi:cx="12.049596"
+       sodipodi:cy="40.702518"
+       sodipodi:r1="1.411111"
+       sodipodi:r2="0.70555568"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 12.049596,42.113629 -0.611029,-1.058333 -0.611029,-1.058333 1.222058,0 1.222058,0 -0.611029,1.058333 z"
+       inkscape:transform-center-y="0.3527758" />
+  </g>
+</svg>
--- a/web/share/svg/select-arrow-normal.svg
+++ b/web/share/svg/select-arrow-normal.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="31.999998"
+   viewBox="0 0 6.3500001 8.4666662"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="select-arrow-normal.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="27.151934"
+     inkscape:cy="16.615415"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-8.8745959,-36.821965)">
+    <path
+       sodipodi:type="star"
+       style="opacity:1;fill:#c3c3c3;fill-opacity:1;stroke:none;stroke-width:2.64583325;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:1;paint-order:normal"
+       id="path4749"
+       sodipodi:sides="3"
+       sodipodi:cx="12.049596"
+       sodipodi:cy="40.702518"
+       sodipodi:r1="1.411111"
+       sodipodi:r2="0.70555568"
+       sodipodi:arg1="1.5707963"
+       sodipodi:arg2="2.6179939"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 12.049596,42.113629 -0.611029,-1.058333 -0.611029,-1.058333 1.222058,0 1.222058,0 -0.611029,1.058333 z"
+       inkscape:transform-center-y="0.3527758" />
+  </g>
+</svg>
--- a/web/share/svg/stream-led.svg
+++ b/web/share/svg/stream-led.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16.933332mm"
+   height="16.933332mm"
+   viewBox="0 0 16.933332 16.933332"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="screen.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="5.6"
+     inkscape:cx="1.0356611"
+     inkscape:cy="21.129805"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-107.87666,-24.618942)">
+    <g
+       aria-label="🖵"
+       transform="matrix(1.7493113,0,0,1.7493113,-47.955951,-29.472907)"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:125%;font-family:'Adobe Garamond Pro';-inkscape-font-specification:'Adobe Garamond Pro Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.57165354px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot4747">
+      <path
+         d="m 91.792266,39.911797 v -0.32 q 0,-0.14 0.1,-0.23 0.11,-0.1 0.26,-0.1 h 1.26 v -0.56 h -3.85 q -0.2,0 -0.34,-0.14 -0.14,-0.15 -0.14,-0.35 v -6.12 q 0,-0.2 0.14,-0.34 0.14,-0.14 0.34,-0.14 h 8.72 q 0.19,0 0.33,0.14 0.15,0.14 0.15,0.34 v 6.12 q 0,0.2 -0.15,0.35 -0.14,0.14 -0.33,0.14 h -3.86 v 0.56 h 1.26 q 0.15,0 0.25,0.1 0.11,0.09 0.11,0.23 v 0.32 z m -1.72,-2.46 h 7.69 q 0.15,0 0.25,-0.11 0.11,-0.11 0.11,-0.26 v -4.4 q 0,-0.16 -0.11,-0.27 -0.1,-0.11 -0.25,-0.11 h -7.69 q -0.15,0 -0.26,0.11 -0.1,0.11 -0.1,0.27 v 4.4 q 0,0.15 0.1,0.26 0.11,0.11 0.26,0.11 z m 7.93,0.75 q 0.13,0 0.13,-0.14 0,-0.13 -0.13,-0.13 -0.14,0 -0.14,0.13 0,0.14 0.14,0.14 z"
+         style="stroke-width:0.57165354px"
+         id="path4851" />
+    </g>
+  </g>
+</svg>
--- a/web/share/svg/stream-mouse-cursor.svg
+++ b/web/share/svg/stream-mouse-cursor.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2.6458335mm"
+   height="2.6458335mm"
+   viewBox="0 0 2.6458335 2.6458335"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="stream-mouse-cursor.svg"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="13.114187"
+     inkscape:cy="8.129091"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="30"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-102.90015,-148.41315)">
+    <circle
+       style="opacity:1;fill:#5b90bb;fill-opacity:1;stroke:#e8e8e8;stroke-width:0.26458332;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:75.59055328;stroke-opacity:0.80303034;paint-order:normal"
+       id="path4915"
+       cx="104.22307"
+       cy="149.73607"
+       r="1.1906251" />
+  </g>
+</svg>
--- a/web/share/svg/warning.svg
+++ b/web/share/svg/warning.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="265.4766846px" height="233.2780151px" viewBox="0 0 265.4766846 233.2780151"
+	 enable-background="new 0 0 265.4766846 233.2780151" xml:space="preserve">
+<g id="Icon">
+	<g id="Signboard">
+		<path fill="#010100" d="M12.5276556,233.2779999c-4.4623718,0-8.6218128-2.401001-10.8545284-6.2661896
+			c-2.2306759-3.8661957-2.2306759-8.6682129-0.00102-12.5328827L121.883812,6.2666974
+			c2.2327194-3.865689,6.3911362-6.2667003,10.8545303-6.2667003s8.6218109,2.401011,10.8545227,6.2661901l120.2106934,208.2117157
+			c2.2306824,3.8656921,2.2306824,8.6677094,0.0010071,12.5323792c-2.2337341,3.8667145-6.393158,6.2677155-10.8555298,6.2677155
+			H12.5276556z"/>
+		<path fill="#FFDB00" d="M12.5274048,223.2783966c-0.8886719,0-1.75-0.4980469-2.1962891-1.2695313
+			c-0.4414063-0.765625-0.4414063-1.7626953,0.0029297-2.5341797L130.5440063,11.2666779
+			c0.4443359-0.769043,1.3056641-1.2666016,2.1943359-1.2666016s1.75,0.4975586,2.1953125,1.2675781l120.2099609,208.2099609
+			c0.4433594,0.7685547,0.4433594,1.7646484-0.0009766,2.5351563c-0.4423828,0.7666016-1.3046875,1.265625-2.1933594,1.265625
+			H12.5274048z"/>
+	</g>
+	<g id="Graphic">
+		<path id="path37169" d="M117.9776917,75.1996231c0-16.8840446,29.5213013-16.7991524,29.5213013,0l-7.7432861,88.7607346
+			c0,6.9947052-13.7927399,7.0144653-13.7927399,0L117.9776917,75.1996231z"/>
+		<ellipse cx="132.7383423" cy="189.3726196" rx="14.7001534" ry="15.0053892"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>