moved kvmd to the root

44 files changed, 4060 insertions, 0 deletions

diff --git a/web/apple-touch-icon.png b/web/apple-touch-icon.png
new file mode 100644
index 00000000..0efe6ece
--- /dev/null
+++ b/web/apple-touch-icon.png
diff --git a/web/css/about.css b/web/css/about.css
new file mode 100644
index 00000000..0db2e467
--- /dev/null
+++ b/web/css/about.css
@@ -0,0 +1,17 @@
+div#about {
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	user-select: text;
+}
+
+div#about
+td#about-version-kvmd,
+td#about-version-python,
+td#about-version-platform {
+	font-weight: bold;
+}
+
+div#about p {
+	font-family: monospace;
+	padding: 0 10px 0 10px;
+}
diff --git a/web/css/keyboard.css b/web/css/keyboard.css
new file mode 100644
index 00000000..ebe1d95e
--- /dev/null
+++ b/web/css/keyboard.css
@@ -0,0 +1,107 @@
+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(--micro-shadow);
+	border: var(--grey-border);
+	border-radius: 6px;
+	color: var(--fg-color-normal);
+	background-color: var(--bg-color-gray);
+	cursor: pointer;
+	height: 40px;
+}
+div.keyboard div.key:hover, div.modifier:hover {
+	color: var(--fg-color-intensive);
+	background-color: var(--bg-color-ctl);
+}
+div.keyboard div.pressed {
+	box-shadow: none;
+	color: var(--fg-color-selected) !important;
+	background-color: var(--bg-color-dark) !important;
+}
+div.keyboard div.holded {
+	box-shadow: none;
+	color: var(--fg-color-normal) !important;
+	background-color: var(--bg-color-intensive) !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(--bg-color-intensive);
+}
+
+div#keyboard-desktop {
+	display: block;
+}
+div#keyboard-mobile {
+	display: none;
+}
diff --git a/web/css/leds.css b/web/css/leds.css
new file mode 100644
index 00000000..c5c122e3
--- /dev/null
+++ b/web/css/leds.css
@@ -0,0 +1,69 @@
+@-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-on {
+	-webkit-filter: var(--led-filter-green);
+	filter: var(--led-filter-green);
+}
+
+img.led-off {
+	-webkit-filter: var(--led-filter-gray);
+	filter: var(--led-filter-gray);
+}
+
+img.led-hdd-busy {
+	-webkit-filter: var(--led-filter-red);
+	filter: var(--led-filter-red);
+}
+
+img.led-msd-writing,
+img.led-pak-typing {
+	-webkit-filter: var(--led-filter-yellow);
+	filter: var(--led-filter-yellow);
+	-webkit-animation: var(--led-spin-fast);
+	animation: var(--led-spin-fast);
+}
+
+img.led-link-connecting {
+	-webkit-filter: var(--led-filter-yellow);
+	filter: var(--led-filter-yellow);
+}
+
+img.led-fan-on {
+	-webkit-filter: var(--led-filter-green);
+	filter: var(--led-filter-green);
+	-webkit-animation: var(--led-spin-medium);
+	animation: var(--led-spin-medium);
+}
+
+img.led-fan-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-fan-fail {
+	-webkit-filter: var(--led-filter-red);
+	filter: var(--led-filter-red);
+}
diff --git a/web/css/main.css b/web/css/main.css
new file mode 100644
index 00000000..0dd07fc2
--- /dev/null
+++ b/web/css/main.css
@@ -0,0 +1,204 @@
+body {
+	margin: 0;
+	overflow: hidden;
+	color: var(--fg-color-normal);
+	background-color: var(--bg-color-normal);
+	font-family: sans-serif !important;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	touch-action: manipulation;
+}
+
+a {
+	text-decoration: underline dotted;
+	color: var(--fg-color-normal);
+}
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	a:hover {
+		text-decoration: underline;
+	}
+}
+
+hr {
+	border: none;
+	border-top: var(--normal-border);
+}
+
+button, select {
+	box-shadow: none;
+	border: none;
+	color: var(--fg-color-normal);
+	background-color: var(--bg-color-normal);
+	display: block;
+	width: 100%;
+	height: 30px;
+	font-size: 16px;
+	outline: none;
+	cursor: pointer;
+}
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
+	button:enabled:hover, select:enabled:hover {
+		color: var(--fg-color-intensive);
+		background-color: var(--bg-color-dark) !important;
+	}
+	button:active, select:active {
+		color: var(--fg-color-selected) !important;
+	}
+	select:enabled:hover {
+		background-image: url("../svg/select-arrow-intensive.svg") !important;
+	}
+}
+@media (hover: none) {
+	button:active, select:active {
+		color: var(--fg-color-intensive);
+		background-color: var(--bg-color-dark);
+	}
+}
+button:disabled, select:disabled {
+	color: var(--fg-color-inactive);
+	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(--fg-color-intensive) !important;
+	background-color: var(--bg-color-dark) !important;
+	background-image: url("../svg/select-arrow-intensive.svg") !important;
+}
+
+.row50 {
+	display: inline-block;
+	width: 50%;
+}
+.row25 {
+	display: inline-block;
+	width: 25%;
+}
+.row50:not(:first-child), .row25:not(:first-child) {
+	border-left: var(--dark-border);
+}
+
+img#logo {
+	-webkit-filter: invert(0.7);
+	filter: invert(0.7);
+	vertical-align: middle;
+	padding-left: 16px;
+}
+
+ul#ctl {
+	box-shadow: var(--small-shadow);
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	background-color: var(--bg-color-ctl);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 50px;
+	z-index: 2147483646;
+}
+ul#ctl li.ctl-logo {
+	line-height: 50px;
+	margin-top: -2px;
+	float: left;
+}
+ul#ctl li.ctl-right-actions {
+	float: right;
+}
+ul#ctl img {
+	vertical-align: middle;
+	margin-right: 10px;
+	height: 20px;
+}
+ul#ctl li a.ctl-item {
+	line-height: 50px;
+	outline: none;
+	cursor: pointer;
+	border-left: var(--black-border);
+	display: inline-block;
+	color: var(--fg-color-normal);
+	padding-left: 16px;
+	padding-right: 16px;
+	text-decoration: none;
+}
+ul#ctl li a.ctl-item:hover:not(.active) {
+	background-color: var(--bg-color-hovered);
+}
+ul#ctl li a.ctl-item-selected {
+	box-shadow: 0 5px 0 var(--border-color-intensive) inset;
+	background-color: var(--bg-color-selected) !important;
+}
+div.ctl-dropdown-content {
+	visibility: hidden;
+	overflow: hidden;
+	white-space: nowrap;
+	border: var(--intensive-border);
+	border-top: var(--dark-border);
+	border-radius: 0 0 8px 8px;
+	position: absolute;
+	background-color: var(--bg-color-ctl);
+	min-width: 180px;
+	box-shadow: var(--big-shadow);
+	z-index: 2147483645;
+}
+div.ctl-dropdown-content button, select {
+	text-align: left;
+	padding: 0 16px;
+}
+div.ctl-dropdown-content div.buttons-row {
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+div.ctl-dropdown-content hr {
+	margin: 0;
+	display: block;
+	height: 0px;
+	padding: 0;
+	border: none;
+	border-top: var(--dark-border);
+}
+div.ctl-dropdown-content-buttons {
+	background-color: var(--bg-color-normal);
+}
+div.ctl-dropdown-content-text {
+	margin: 10px 15px 10px 15px;
+	font-size: 14px;
+}
+
+ul#footer {
+	list-style-type: none;
+	bottom: 0;
+	position: fixed;
+	width: 100%;
+	padding: 0;
+	font-size: 0.7em;
+	color: var(--fg-color-inactive);
+	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(--fg-color-inactive);
+}
diff --git a/web/css/mobile.css b/web/css/mobile.css
new file mode 100644
index 00000000..fdec7fc3
--- /dev/null
+++ b/web/css/mobile.css
@@ -0,0 +1,87 @@
+/*
+	http://stephen.io/mediaqueries/
+	https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
+*/
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div.window {
+		padding-top: 45px !important;
+	}
+	div.window-header {
+		height: 35px !important;
+	}
+	div.window-grab {
+		height: 35px !important;
+	}
+	button.window-button-close {
+		height: 40px !important;
+	}
+
+	ul#ctl li a.ctl-item:hover:not(.active) {
+		background-color: var(--bg-color-ctl) !important;
+	}
+
+	div.keyboard {
+		zoom: 1.28 !important;
+	}
+	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 div.key:hover, div.modifier:hover {
+		color: var(--fg-color-normal);
+		background-color: var(--bg-color-gray);
+	}
+	div#keyboard-desktop {
+		display: none !important;
+	}
+	div#keyboard-mobile {
+		display: block !important;
+	}
+
+	div#stream-window {
+		padding-top: 9px !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-mouse-buttons {
+		display: block !important;
+	}
+}
+
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	button, select {
+		height: 45px !important;
+	}
+
+	div.modal-buttons button {
+		height: 50px !important;
+	}
+
+	@supports (-webkit-appearance:none) {
+		div#stream-size-slider-box input[type=range] {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
diff --git a/web/css/modals.css b/web/css/modals.css
new file mode 100644
index 00000000..cfb0df20
--- /dev/null
+++ b/web/css/modals.css
@@ -0,0 +1,52 @@
+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-window {
+	display: table;
+	outline: none;
+	margin: 15% auto;
+	overflow: hidden;
+	border: var(--dark-border);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--big-shadow);
+	background-color: var(--bg-color-light);
+	padding: 0;
+}
+div.modal-window:focus {
+	border: var(--intensive-border) !important;
+}
+
+
+div.modal-header {
+	text-align: center;
+	font-weight: bold;
+	padding: 3px 9px 3px 9px;
+	border-bottom: var(--normal-border);
+}
+
+div.modal-content {
+	max-width: 500px;
+	max-height: 500px;
+	padding: 16px 9px 16px 9px;
+}
+
+div.modal-buttons {
+	border-top: var(--dark-border);
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+div.modal-buttons button {
+	height: 40px;
+}
diff --git a/web/css/msd.css b/web/css/msd.css
new file mode 100644
index 00000000..91c6a280
--- /dev/null
+++ b/web/css/msd.css
@@ -0,0 +1,53 @@
+div#msd-menu {
+	width: 450px;
+}
+div#msd-menu
+div#msd-not-in-operate,
+div#msd-current-image-broken,
+div#msd-another-another-user-uploads,
+input#msd-select-new-image-file,
+div#msd-new-image {
+	display: none;
+}
+
+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;
+}
+table.msd-info
+td#msd-status,
+td#msd-current-image-name,
+td#msd-current-image-size,
+td#msd-storage-size,
+td#msd-new-image-name,
+td#msd-new-image-size {
+	font-weight: bold;
+	max-width: 310px;
+	overflow: hidden;
+}
+
+div#msd-progress {
+	background-color: var(--bg-color-selected);
+	height: 1.5em;
+	width: 100%;
+	position: relative;
+}
+div#msd-progress:before {
+	color: var(--fg-color-intensive);
+	content: attr(data-label);
+	font-size: 0.8em;
+	position: absolute;
+	text-align: center;
+	top: 4px;
+	left: 0;
+	right: 0;
+}
+div#msd-progress span#msd-progress-value {
+	background-color: var(--bg-color-intensive);
+	display: inline-block;
+	height: 100%;
+}
diff --git a/web/css/stream.css b/web/css/stream.css
new file mode 100644
index 00000000..0ddcf780
--- /dev/null
+++ b/web/css/stream.css
@@ -0,0 +1,101 @@
+img#stream-image {
+	width: 640px;
+	height: 480px;
+	display: block;
+	background-color: var(--bg-color-stream-screen);
+}
+
+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-box {
+	position: relative;
+	display: inline-block;
+	border: var(--dark-border);
+}
+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;
+}
+
+select#stream-quality-select {
+	margin: 8px 0 8px 0;
+}
+
+span#stream-size-value {
+}
+div#stream-size-slider-box {
+	margin-top: 5px;
+	display: flex;
+}
+@supports (-webkit-appearance:none) {
+	div#stream-size-slider-box input[type=range] {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		background: transparent;
+		margin: 8px 0 8px 0;
+		-webkit-appearance: none;
+	}
+}
+@supports not (-webkit-appearance:none) {
+	div#stream-size-slider-box input[type=range] {
+		cursor: pointer;
+		outline: none;
+		width: 100%;
+		box-shadow: none;
+		margin-left: 0;
+		margin-right: 0;
+	}
+}
+div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
+	height: 5px;
+	background: var(--bg-color-light);
+	border-radius: 3px;
+}
+div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
+	border: var(--intensive-border);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--bg-color-intensive);
+	-webkit-appearance: none;
+	margin-top: -7px;
+}
+div#stream-size-slider-box input[type=range]::-moz-range-track {
+	height: 5px;
+	background: var(--bg-color-light);
+	border-radius: 3px;
+}
+div#stream-size-slider-box input[type=range]::-moz-range-thumb {
+	border: var(--intensive-border);
+	height: 18px;
+	width: 18px;
+	border-radius: 25px;
+	background: var(--bg-color-intensive);
+}
+
+div#stream-mouse-buttons {
+	display: none;
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
diff --git a/web/css/vars.css b/web/css/vars.css
new file mode 100644
index 00000000..d6d5a604
--- /dev/null
+++ b/web/css/vars.css
@@ -0,0 +1,35 @@
+:root {
+	--bg-color-normal: #36393f;
+	--bg-color-light: #484b51;
+	--bg-color-gray: #3b3e43;
+	--bg-color-dark: #17191d;
+	--bg-color-ctl: #202225;
+	--bg-color-intensive: #436a8a;
+	--bg-color-hovered: #1a1c1f;
+	--bg-color-selected: #171717;
+
+	--fg-color-normal: #c3c3c3;
+	--fg-color-dark: #aaaaaa;
+	--fg-color-intensive: white;
+	--fg-color-inactive: #6c7481;
+	--fg-color-selected: var(--fg-color-inactive);
+
+	--bg-color-stream-screen: black;
+
+	--border-color-normal: var(--bg-color-normal);
+	--border-color-grey: var(--bg-color-ctl);
+	--border-color-dark: var(--bg-color-dark);
+	--border-color-intensive: #5b90bb;
+	--border-color-important: #ff6467;
+
+	--dark-border: thin solid var(--border-color-dark);
+	--grey-border: thin solid var(--border-color-grey);
+	--normal-border: thin solid var(--border-color-normal);
+	--black-border: thin solid black;
+	--intensive-border: 2px solid var(--border-color-intensive);
+	--thin-intensive-border: thin solid var(--border-color-intensive);
+
+	--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
+	--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+	--big-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
+}
diff --git a/web/css/windows.css b/web/css/windows.css
new file mode 100644
index 00000000..151ca59a
--- /dev/null
+++ b/web/css/windows.css
@@ -0,0 +1,57 @@
+div.window {
+	visibility: hidden;
+	outline: none;
+	overflow: hidden;
+	position: fixed;
+	border: var(--dark-border);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--big-shadow);
+	white-space: nowrap;
+	background-color: var(--bg-color-light);
+	padding: 30px 9px 9px 9px;
+}
+div.window:focus {
+	border: var(--intensive-border) !important;
+}
+
+div.window-header {
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	padding: 0;
+	height: 20px;
+	font-size: 0.8em;
+	color: var(--fg-color-dark);
+	border-bottom: var(--normal-border);
+}
+
+div.window-grab {
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	height: 20px;
+	cursor: move;
+	padding: 3px 0 2px 20px;
+}
+
+div.window-header-grabbed {
+	color: var(--fg-color-intensive);
+	background-color: var(--bg-color-intensive);
+	border-bottom: var(--thin-intensive-border);
+}
+
+button.window-button-close {
+	position: absolute;
+	top: -2px;
+	right: -6px;
+	width: 44px;
+	height: 24px;
+	padding-left: 0;
+	color: var(--fg-color-inactive);
+	display: inline-block;
+}
diff --git a/web/favicon-16x16.png b/web/favicon-16x16.png
new file mode 100644
index 00000000..35b105ee
--- /dev/null
+++ b/web/favicon-16x16.png
diff --git a/web/favicon-32x32.png b/web/favicon-32x32.png
new file mode 100644
index 00000000..1575a4df
--- /dev/null
+++ b/web/favicon-32x32.png
diff --git a/web/favicon.ico b/web/favicon.ico
new file mode 100644
index 00000000..26af37a3
--- /dev/null
+++ b/web/favicon.ico
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 00000000..90fbd11e
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>Pi-KVM</title>
+
+	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+
+	<link rel="stylesheet" href="css/vars.css">
+	<link rel="stylesheet" href="css/main.css">
+	<link rel="stylesheet" href="css/windows.css">
+	<link rel="stylesheet" href="css/modals.css">
+	<link rel="stylesheet" href="css/leds.css">
+	<link rel="stylesheet" href="css/stream.css">
+	<link rel="stylesheet" href="css/msd.css">
+	<link rel="stylesheet" href="css/keyboard.css">
+	<link rel="stylesheet" href="css/about.css">
+	<link rel="stylesheet" href="css/mobile.css">
+
+	<script src="js/tools.js"></script>
+	<script src="js/stream.js"></script>
+	<script src="js/atx.js"></script>
+	<script src="js/keyboard.js"></script>
+	<script src="js/mouse.js"></script>
+	<script src="js/hid.js"></script>
+	<script src="js/msd.js"></script>
+	<script src="js/session.js"></script>
+	<script src="js/ui.js"></script>
+	<script src="js/main.js"></script>
+
+	<script>window.onload = main;</script>
+</head>
+
+<body>
+	<div id="bad-browser-modal" class="modal">
+		<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://www.google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li>
+					<li><a target="_blank" href="https://www.chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li>
+					<li><a target="_blank" href="https://www.mozilla.org/firefox">Mozilla Firefox</a></li>
+					<li><a target="_blank" href="https://www.apple.com/safari">Apple Safari</a></li>
+					<li><a target="_blank" href="https://www.opera.com">Opera</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<ul id="ctl">
+		<li class="ctl-logo"><img id="logo" src="svg/logo.svg" alt="&pi;-kvm" /></li>
+
+		<li class="ctl-right-actions">
+			<div class="ctl-dropdown">
+				<a class="ctl-item" href="#">
+					<img data-dont-hide-menu id="link-led" class="led-off" src="svg/link-led.svg" />
+					<img data-dont-hide-menu id="stream-led" class="led-off" src="svg/stream-led.svg" />
+					<img data-dont-hide-menu id="hid-keyboard-led" class="led-off" src="svg/hid-keyboard-led.svg" />
+					<img data-dont-hide-menu id="hid-mouse-led" class="led-off" src="svg/hid-mouse-led.svg" />
+					System &#8628;
+				</a>
+				<div class="ctl-dropdown-content">
+					<div class="ctl-dropdown-content-buttons">
+						<button id="show-about-button">&bull; Show about</button>
+						<hr>
+						<button id="show-keyboard-button">&bull; Show keyboard</button>
+						<hr>
+						<button id="show-stream-button">&bull; Show stream</button>
+						<button disabled id="stream-reset-button">&bull; Reset stream</button>
+					</div>
+					<hr>
+					<div data-dont-hide-menu class="ctl-dropdown-content-text">
+						Quality:
+						<select disabled id="stream-quality-select">
+							<option>80%</option>
+						</select>
+					</div>
+					<hr>
+					<div data-dont-hide-menu class="ctl-dropdown-content-text">
+						Stream size: <span id="stream-size-value">100%</span>
+						<div id="stream-size-slider-box">
+							<input id="stream-size-slider" type="range" min="50" max="150" value="100" step="10" />
+						</div>
+					</div>
+				</div>
+			</div>
+		</li>
+
+		<li class="ctl-right-actions">
+			<div class="ctl-dropdown">
+				<a class="ctl-item" href="#">
+					<img data-dont-hide-menu id="atx-power-led" class="led-off" src="svg/atx-power-led.svg" />
+					<img data-dont-hide-menu id="atx-hdd-led" class="led-off" src="svg/atx-hdd-led.svg" />
+					ATX &#8628;
+				</a>
+				<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
+					<button disabled id="atx-power-button">&bull; Click Power <sup><i>short</i></sup></button>
+					<button disabled id="atx-power-button-long">&bull; Click Power <sup><i>long</i></sup></button>
+					<hr>
+					<button disabled id="atx-reset-button">&bull; Click Reset</button>
+				</div>
+			</div>
+		</li>
+
+		<li class="ctl-right-actions">
+			<div class="ctl-dropdown">
+				<a class="ctl-item" href="#">
+					<img data-dont-hide-menu id="msd-led" class="led-off" src="svg/msd-led.svg" />
+					Mass Storage &#8628;
+				</a>
+				<div data-dont-hide-menu id="msd-menu" class="ctl-dropdown-content">
+					<div id="msd-not-in-operate">
+						<div class="ctl-dropdown-content-text">
+							<table>
+								<tr>
+									<td><img src="svg/warning.svg" /></td>
+									<td><b>Mass Storage Device is not operational</b></td>
+								</tr>
+							</table>
+						</div>
+						<hr>
+					</div>
+
+					<div id="msd-current-image-broken">
+						<div class="ctl-dropdown-content-text">
+							<table>
+								<tr>
+									<td><img src="svg/warning.svg" /></td>
+									<td><b>Current image is broken!</b><br><sub>Perhaps uploading was interrupted</sub></td>
+								</tr>
+							</table>
+						</div>
+						<hr>
+					</div>
+
+					<div id="msd-another-another-user-uploads">
+						<div class="ctl-dropdown-content-text">
+							<table>
+								<tr>
+									<td><img src="svg/info.svg" /></td>
+									<td><b>Another user uploads an image</b></td>
+								</tr>
+							</table>
+						</div>
+						<hr>
+					</div>
+
+					<table class="msd-info">
+						<tr>
+							<td>Status: </td>
+							<td id="msd-status"></td>
+						</tr>
+					</table>
+					<hr>
+
+					<table class="msd-info">
+						<tr>
+							<td>Current image:</td>
+							<td id="msd-current-image-name"></td>
+						</tr>
+						<tr>
+							<td>Image size:</td>
+							<td id="msd-current-image-size"></td>
+						</tr>
+						<tr>
+							<td>Storage size:</td>
+							<td id="msd-storage-size"></td>
+						</tr>
+					</table>
+					<hr>
+
+					<input type="file" id="msd-select-new-image-file" />
+					<div class="ctl-dropdown-content-buttons buttons-row">
+						<button disabled id="msd-select-new-image-button" class="row50">Upload new image</button>
+						<button disabled id="msd-upload-new-image-button" class="row25">Start</button>
+						<button disabled id="msd-abort-uploading-button" class="row25">Abort</button>
+					</div>
+					<hr>
+
+					<div id="msd-new-image">
+						<table class="msd-info">
+							<tr>
+								<td>New name:</td>
+								<td id="msd-new-image-name"></td>
+							</tr>
+							<tr>
+								<td>Upload size:</td>
+								<td id="msd-new-image-size"></td>
+							</tr>
+						</table>
+						<hr>
+						<div class="ctl-dropdown-content-text">
+							<div id="msd-progress">
+								<span id="msd-progress-value"></span>
+							</div>
+						</div>
+						<hr>
+					</div>
+
+					<div class="ctl-dropdown-content-buttons buttons-row">
+						<button disabled data-force-hide-menu id="msd-switch-to-kvm-button" class="row50">&bull; Switch drive to KVM</button>
+						<button disabled data-force-hide-menu id="msd-switch-to-server-button" class="row50">&bull; Switch drive to Server</button>
+					</div>
+				</div>
+			</div>
+		</li>
+
+		<li class="ctl-right-actions">
+			<div class="ctl-dropdown">
+				<a class="ctl-item" href="#">
+					<img data-dont-hide-menu id="pak-led" class="led-off" src="svg/gear-led.svg" />
+					Shortcuts &#8628;
+				</a>
+				<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
+					<button disabled id="pak-button">&bull; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
+					<hr>
+					<button data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
+					<hr>
+					<button data-shortcut="ControlLeft KeyW">&bull; Ctrl+W</button>
+					<button data-shortcut="ControlLeft Escape">&bull; Ctrl+Esc</button>
+					<button data-shortcut="AltLeft Tab">&bull; Alt+Tab</button>
+					<button data-shortcut="AltLeft Escape">&bull; Alt+Escape</button>
+					<button data-shortcut="AltLeft Space">&bull; Alt+Space</button>
+					<button data-shortcut="AltLeft Enter">&bull; Alt+Enter</button>
+					<button data-shortcut="AltLeft F4">&bull; Alt+F4</button>
+					<hr>
+					<button data-shortcut="AltLeft PrintScreen">&bull; Alt+PrtSc</button>
+					<button data-shortcut="PrintScreen">&bull; PrtSc</button>
+					<hr>
+					<button data-shortcut="AltLeft PrintScreen KeyR">&bull; Alt+SysRq+R</button>
+					<button data-shortcut="AltLeft PrintScreen KeyE">&bull; Alt+SysRq+E</button>
+					<button data-shortcut="AltLeft PrintScreen KeyI">&bull; Alt+SysRq+I</button>
+					<button data-shortcut="AltLeft PrintScreen KeyS">&bull; Alt+SysRq+S</button>
+					<button data-shortcut="AltLeft PrintScreen KeyU">&bull; Alt+SysRq+U</button>
+					<button data-shortcut="AltLeft PrintScreen KeyB">&bull; Alt+SysRq+B</button>
+				</div>
+			</div>
+		</li>
+	</ul>
+
+	<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
+		<div id="stream-window-header" class="window-header"><div class="window-grab">Stream</div></div>
+		<div id="stream-box" class="stream-box-inactive">
+			<img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" />
+		</div>
+		<div id="stream-mouse-buttons">
+			<button data-mouse-button="left" class="row50">Left Click</button>
+			<button data-mouse-button="right" class="row50">Right Click</button>
+		</div>
+	</div>
+
+	<div id="keyboard-window" class="window" tabindex="0">
+		<div id="keyboard-window-header" class="window-header">
+			<div class="window-grab">Virtual Keyboard</div>
+			<button class="window-button-close">&times;</button>
+		</div>
+		<div id="keyboard-desktop" class="keyboard" align="center">
+			<div class="keyboard-block">
+				<div class="keyboard-row">
+					<div data-key="Escape" class="key small"><p>Esc</p></div>
+					<div class="empty-key" style="width:24px"></div>
+					<div data-key="F1" class="key small"><p>F1</p></div>
+					<div data-key="F2" class="key small"><p>F2</p></div>
+					<div data-key="F3" class="key small"><p>F3</p></div>
+					<div data-key="F4" class="key small"><p>F4</p></div>
+					<div class="empty-key" style="width:10px"></div>
+					<div data-key="F5" class="key small"><p>F5</p></div>
+					<div data-key="F6" class="key small"><p>F6</p></div>
+					<div data-key="F7" class="key small"><p>F7</p></div>
+					<div data-key="F8" class="key small"><p>F8</p></div>
+					<div class="empty-key" style="width:10px"></div>
+					<div data-key="F9" class="key small"><p>F9</p></div>
+					<div data-key="F10" class="key small"><p>F10</p></div>
+					<div data-key="F11" class="key small"><p>F11</p></div>
+					<div data-key="F12" class="key small"><p>F12</p></div>
+				</div>
+				<hr>
+				<div class="keyboard-row">
+					<div data-key="Backquote" class="key"><p>~<br>`</p></div>
+					<div data-key="Digit1" class="key"><p>!<br>1</p></div>
+					<div data-key="Digit2" class="key"><p>@<br>2</p></div>
+					<div data-key="Digit3" class="key"><p>#<br>3</p></div>
+					<div data-key="Digit4" class="key"><p>$<br>4</p></div>
+					<div data-key="Digit5" class="key"><p>%<br>5</p></div>
+					<div data-key="Digit6" class="key"><p>^<br>6</p></div>
+					<div data-key="Digit7" class="key"><p>&amp;<br>7</p></div>
+					<div data-key="Digit8" class="key"><p>*<br>8</p></div>
+					<div data-key="Digit9" class="key"><p>(<br>9</p></div>
+					<div data-key="Digit0" class="key"><p>)<br>0</p></div>
+					<div data-key="Minus" class="key"><p>_<br>-</p></div>
+					<div data-key="Equal" class="key"><p>+<br>=</p></div>
+					<div data-key="Backspace" class="key wide-2 right"><p>&#8612;</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="Tab" class="key wide-2 left"><p>&#8676;<br>&#8677;</p></div>
+					<div data-key="KeyQ" class="key single"><p>Q</p></div>
+					<div data-key="KeyW" class="key single"><p>W</p></div>
+					<div data-key="KeyE" class="key single"><p>E</p></div>
+					<div data-key="KeyR" class="key single"><p>R</p></div>
+					<div data-key="KeyT" class="key single"><p>T</p></div>
+					<div data-key="KeyY" class="key single"><p>Y</p></div>
+					<div data-key="KeyU" class="key single"><p>U</p></div>
+					<div data-key="KeyI" class="key single"><p>I</p></div>
+					<div data-key="KeyO" class="key single"><p>O</p></div>
+					<div data-key="KeyP" class="key single"><p>P</p></div>
+					<div data-key="BracketLeft" class="key"><p>{<br>[</p></div>
+					<div data-key="BracketRight" class="key"><p>}<br>]</p></div>
+					<div data-key="Backslash" class="key"><p>|<br>\</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div>
+					<div data-key="KeyA" class="key single"><p>A</p></div>
+					<div data-key="KeyS" class="key single"><p>S</p></div>
+					<div data-key="KeyD" class="key single"><p>D</p></div>
+					<div data-key="KeyF" class="key single"><p>F</p></div>
+					<div data-key="KeyG" class="key single"><p>G</p></div>
+					<div data-key="KeyH" class="key single"><p>H</p></div>
+					<div data-key="KeyJ" class="key single"><p>J</p></div>
+					<div data-key="KeyK" class="key single"><p>K</p></div>
+					<div data-key="KeyL" class="key single"><p>L</p></div>
+					<div data-key="Semicolon" class="key"><p>:<br>;</p></div>
+					<div data-key="Quote" class="key"><p>"<br>'</p></div>
+					<div data-key="Enter" class="key wide-3 right small"><p>Enter<br>&crarr;</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>&bull;</b><br>Shift</p></div>
+					<div data-key="KeyZ" class="key single"><p>Z</p></div>
+					<div data-key="KeyX" class="key single"><p>X</p></div>
+					<div data-key="KeyC" class="key single"><p>C</p></div>
+					<div data-key="KeyV" class="key single"><p>V</p></div>
+					<div data-key="KeyB" class="key single"><p>B</p></div>
+					<div data-key="KeyN" class="key single"><p>N</p></div>
+					<div data-key="KeyM" class="key single"><p>M</p></div>
+					<div data-key="Comma" class="key"><p>&lt;<br>,</p></div>
+					<div data-key="Period" class="key"><p>&gt;<br>.</p></div>
+					<div data-key="Slash" class="key"><p>?<br>/</p></div>
+					<div data-key="ShiftRight" class="modifier wide-4 right small"><p><b>&bull;</b><br>Shift</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Ctrl</p></div>
+					<div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Win</p></div>
+					<div data-key="AltLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Alt</p></div>
+					<div data-key="Space" class="key wide-5"></div>
+					<div data-key="AltRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Alt</p></div>
+					<div data-key="MetaRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Win</p></div>
+					<div data-key="ControlRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Ctrl</p></div>
+				</div>
+			</div>
+			<div class="keyboard-block">
+				<div class="keyboard-row">
+					<div data-key="PrintScreen" class="modifier small"><p><b>&bull;</b><br>Pt/Sq</p></div>
+					<div data-key="ScrollLock" class="key small"><p>ScrLk</p></div>
+					<div data-key="Pause" class="key small"><p>P/Brk</p></div>
+				</div>
+				<hr>
+				<div class="keyboard-row">
+					<div data-key="Insert" class="key small"><p>Ins</p></div>
+					<div data-key="Home" class="key small"><p>Home</p></div>
+					<div data-key="PageUp" class="key small"><p>PgUp</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="Delete" class="key small"><p>Del</p></div>
+					<div data-key="End" class="key small"><p>End</p></div>
+					<div data-key="PageDown" class="key small"><p>PgDn</p></div>
+				</div>
+				<div class="keyboard-row"></div>
+				<div class="keyboard-row">
+					<div class="empty-key"></div>
+					<div data-key="ArrowUp" class="key"><p>&uarr;</p></div>
+					<div class="empty-key"></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="ArrowLeft" class="key"><p>&larr;</p></div>
+					<div data-key="ArrowDown" class="key"><p>&darr;</p></div>
+					<div data-key="ArrowRight" class="key"><p>&rarr;</p></div>
+				</div>
+			</div>
+		</div>
+
+		<div id="keyboard-mobile" class="keyboard" align="center">
+			<div class="keyboard-block">
+				<div class="keyboard-row">
+					<div data-key="Escape" class="key margin-0 small"><p>Esc</p></div>
+					<div class="empty-key" style="width:4px"></div>
+					<div data-key="F1" class="key wide-0 margin-0 small"><p>F1</p></div>
+					<div data-key="F2" class="key wide-0 margin-0 small"><p>F2</p></div>
+					<div data-key="F3" class="key wide-0 margin-0 small"><p>F3</p></div>
+					<div data-key="F4" class="key wide-0 margin-0 small"><p>F4</p></div>
+					<div data-key="F5" class="key wide-0 margin-0 small"><p>F5</p></div>
+					<div data-key="F6" class="key wide-0 margin-0 small"><p>F6</p></div>
+					<div data-key="F7" class="key wide-0 margin-0 small"><p>F7</p></div>
+					<div data-key="F8" class="key wide-0 margin-0 small"><p>F8</p></div>
+					<div data-key="F9" class="key wide-0 margin-0 small"><p>F9</p></div>
+					<div data-key="F10" class="key wide-0 margin-0 small"><p>F10</p></div>
+					<div data-key="F11" class="key wide-0 margin-0 small"><p>F11</p></div>
+					<div data-key="F12" class="key wide-0 margin-0 small"><p>F12</p></div>
+					<div class="empty-key" style="width:5px"></div>
+					<div data-key="PrintScreen" class="modifier margin-0 small"><p><b>&bull;</b><br>Pt/Sq</p></div>
+					<div data-key="ScrollLock" class="key margin-0 small"><p>ScrLk</p></div>
+					<div data-key="Pause" class="key margin-0 small"><p>P/Brk</p></div>
+					<div data-key="Insert" class="key margin-0 small"><p>Ins</p></div>
+					<div data-key="Home" class="key margin-0 small"><p>Home</p></div>
+					<div data-key="End" class="key margin-0 small"><p>End</p></div>
+					<div data-key="Delete" class="key margin-0 small"><p>Del</p></div>
+				</div>
+				<hr>
+				<div class="keyboard-row">
+					<div data-key="Backquote" class="key"><p>~<br>`</p></div>
+					<div data-key="Digit1" class="key"><p>!<br>1</p></div>
+					<div data-key="Digit2" class="key"><p>@<br>2</p></div>
+					<div data-key="Digit3" class="key"><p>#<br>3</p></div>
+					<div data-key="Digit4" class="key"><p>$<br>4</p></div>
+					<div data-key="Digit5" class="key"><p>%<br>5</p></div>
+					<div data-key="Digit6" class="key"><p>^<br>6</p></div>
+					<div data-key="Digit7" class="key"><p>&amp;<br>7</p></div>
+					<div data-key="Digit8" class="key"><p>*<br>8</p></div>
+					<div data-key="Digit9" class="key"><p>(<br>9</p></div>
+					<div data-key="Digit0" class="key"><p>)<br>0</p></div>
+					<div data-key="Minus" class="key"><p>_<br>-</p></div>
+					<div data-key="Equal" class="key"><p>+<br>=</p></div>
+					<div data-key="Backspace" class="key wide-3 right" style="width:101px"><p>&#8612;</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="Tab" class="key wide-2 left"><p>&#8676;<br>&#8677;</p></div>
+					<div data-key="KeyQ" class="key single"><p>Q</p></div>
+					<div data-key="KeyW" class="key single"><p>W</p></div>
+					<div data-key="KeyE" class="key single"><p>E</p></div>
+					<div data-key="KeyR" class="key single"><p>R</p></div>
+					<div data-key="KeyT" class="key single"><p>T</p></div>
+					<div data-key="KeyY" class="key single"><p>Y</p></div>
+					<div data-key="KeyU" class="key single"><p>U</p></div>
+					<div data-key="KeyI" class="key single"><p>I</p></div>
+					<div data-key="KeyO" class="key single"><p>O</p></div>
+					<div data-key="KeyP" class="key single"><p>P</p></div>
+					<div data-key="BracketLeft" class="key"><p>{<br>[</p></div>
+					<div data-key="BracketRight" class="key"><p>}<br>]</p></div>
+					<div data-key="Backslash" class="key wide-2 left" style="width:78px"><p>|<br>\</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div>
+					<div data-key="KeyA" class="key single"><p>A</p></div>
+					<div data-key="KeyS" class="key single"><p>S</p></div>
+					<div data-key="KeyD" class="key single"><p>D</p></div>
+					<div data-key="KeyF" class="key single"><p>F</p></div>
+					<div data-key="KeyG" class="key single"><p>G</p></div>
+					<div data-key="KeyH" class="key single"><p>H</p></div>
+					<div data-key="KeyJ" class="key single"><p>J</p></div>
+					<div data-key="KeyK" class="key single"><p>K</p></div>
+					<div data-key="KeyL" class="key single"><p>L</p></div>
+					<div data-key="Semicolon" class="key"><p>:<br>;</p></div>
+					<div data-key="Quote" class="key"><p>"<br>'</p></div>
+					<div data-key="Enter" class="key wide-4 right small" style="width:116px"><p>Enter<br>&crarr;</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="ShiftLeft" class="modifier wide-4 left small"><p><b>&bull;</b><br>Shift</p></div>
+					<div data-key="KeyZ" class="key single"><p>Z</p></div>
+					<div data-key="KeyX" class="key single"><p>X</p></div>
+					<div data-key="KeyC" class="key single"><p>C</p></div>
+					<div data-key="KeyV" class="key single"><p>V</p></div>
+					<div data-key="KeyB" class="key single"><p>B</p></div>
+					<div data-key="KeyN" class="key single"><p>N</p></div>
+					<div data-key="KeyM" class="key single"><p>M</p></div>
+					<div data-key="Comma" class="key"><p>&lt;<br>,</p></div>
+					<div data-key="Period" class="key"><p>&gt;<br>.</p></div>
+					<div data-key="Slash" class="key"><p>?<br>/</p></div>
+					<div data-key="PageUp" class="key small"><p>PgUp</p></div>
+					<div data-key="ArrowUp" class="key"><p>&uarr;</p></div>
+					<div data-key="PageDown" class="key small"><p>PgDn</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div data-key="ControlLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Ctrl</p></div>
+					<div data-key="MetaLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Win</p></div>
+					<div data-key="AltLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Alt</p></div>
+					<div data-key="Space" class="key" style="width:190px"></div>
+					<div data-key="AltRight" class="modifier right small"><p><b>&bull;</b><br>Alt</p></div>
+					<div data-key="MetaRight" class="modifier right small"><p><b>&bull;</b><br>Win</p></div>
+					<div data-key="ShiftRight" class="modifier right small"><p><b>&bull;</b><br>Shift</p></div>
+					<div data-key="ControlRight" class="modifier right small"><p><b>&bull;</b><br>Ctrl</p></div>
+					<div data-key="ArrowLeft" class="key"><p>&larr;</p></div>
+					<div data-key="ArrowDown" class="key"><p>&darr;</p></div>
+					<div data-key="ArrowRight" class="key"><p>&rarr;</p></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div id="about-window" class="window" tabindex="0">
+		<div class="window-header">
+			<div class="window-grab">About Pi-KVM</div>
+			<button class="window-button-close">&times;</button>
+		</div>
+		<div id="about">
+			<table>
+				<tr>
+					<td>Kvmd:</td>
+					<td id="about-version-kvmd"></td>
+				</tr>
+				<tr>
+					<td>Python:</td>
+					<td id="about-version-python"></td>
+				</tr>
+				<tr>
+					<td>Platform:</td>
+					<td id="about-version-platform"></td>
+				</tr>
+			</table>
+			<p>
+				This program is free software: you can redistribute it and/or modify<br>
+				it under the terms of the GNU General Public License as published by<br>
+				the Free Software Foundation, either version 3 of the License, or<br>
+				(at your option) any later version.<br>
+				<br>
+				This program is distributed in the hope that it will be useful,<br>
+				but WITHOUT ANY WARRANTY; without even the implied warranty of<br>
+				MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the<br>
+				GNU General Public License for more details.<br>
+				<br>
+				You should have received a copy of the GNU General Public License<br>
+				along with this program. If not, see <a target="_blank" href="https://www.gnu.org/licenses">https://www.gnu.org/licenses</a>.
+			</p>
+		</div>
+	</div>
+
+	<ul id="footer">
+		<li id="kvmd-version" class="footer-left"></li>
+		<li class="footer-right"><a target="_blank" href="https://github.com/pi-kvm">Pi-KVM Project</a></li>
+	</ul>
+</body>
+</html>
diff --git a/web/js/atx.js b/web/js/atx.js
new file mode 100644
index 00000000..f4b4811a
--- /dev/null
+++ b/web/js/atx.js
@@ -0,0 +1,63 @@
+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", null, "Are you sure to click the power button?"));
+		tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?"));
+		tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", null, "Are you sure to reboot the server?"));
+	};
+
+	/********************************************************************************/
+
+	self.loadInitialState = function() {
+		var http = tools.makeRequest("GET", "/kvmd/atx", function() {
+			if (http.readyState === 4) {
+				if (http.status === 200) {
+					__setButtonsBusy(JSON.parse(http.responseText).result.busy);
+				} else {
+					setTimeout(self.loadInitialState, 1000);
+				}
+			}
+		});
+	};
+
+	self.setState = function(state) {
+		__setButtonsBusy(state.busy);
+		$("atx-power-led").className = (state.leds.power ? "led-on" : "led-off");
+		$("atx-hdd-led").className = (state.leds.hdd ? "led-hdd-busy" : "led-off");
+	};
+
+	self.clearState = function() {
+		$("atx-power-led").className = "led-off";
+		$("atx-hdd-led").className = "led-off";
+	};
+
+	var __clickButton = function(button, timeout, confirm_msg) {
+		ui.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) {
+							ui.error("Performing another ATX operation for other client.<br>Please try again later");
+						} else if (http.status !== 200) {
+							ui.error("Click error:<br>", http.responseText);
+						}
+					}
+				}, timeout);
+			}
+		});
+	};
+
+	var __setButtonsBusy = function(busy) {
+		$("atx-power-button").disabled = busy;
+		$("atx-power-button-long").disabled = busy;
+		$("atx-reset-button").disabled = busy;
+	};
+
+	__init__();
+}
diff --git a/web/js/hid.js b/web/js/hid.js
new file mode 100644
index 00000000..ca535157
--- /dev/null
+++ b/web/js/hid.js
@@ -0,0 +1,186 @@
+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.onpagehide = __releaseAll;
+		window.onblur = __releaseAll;
+
+		if (window.navigator.clipboard && window.navigator.clipboard.readText) {
+			__chars_to_codes = __buildCharsToCodes();
+			tools.setOnClick($("pak-button"), __pasteAsKeysFromClipboard);
+		} else {
+			$("pak-button").title = $("pak-led").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium.";
+		}
+
+		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) {
+		__ws = ws;
+		__keyboard.setSocket(ws);
+		__mouse.setSocket(ws);
+		$("pak-button").disabled = !(window.navigator.clipboard && window.navigator.clipboard.readText && ws);
+	};
+
+	var __releaseAll = function() {
+		__keyboard.releaseAll();
+	};
+
+	var __emitShortcut = function(codes) {
+		return new Promise(function(resolve) {
+			tools.debug("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 __pasteAsKeysFromClipboard = function() {
+		window.navigator.clipboard.readText().then(__pasteAsKeys);
+	};
+
+	var __pasteAsKeys = function(text) {
+		text = text.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 confirm_msg = (
+				"You are going to automatically type " + codes_count
+				+ " characters from the system clipboard."
+				+ " It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds.<br>"
+				+ "<br>Are you sure you want to continue?<br>"
+			);
+
+			ui.confirm(confirm_msg).then(function(ok) {
+				if (ok) {
+					$("pak-button").disabled = true;
+					$("pak-led").className = "led-pak-typing";
+					$("pak-led").title = "Autotyping...";
+
+					tools.debug("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 {
+								$("pak-button").disabled = false;
+								$("pak-led").className = "led-off";
+								$("pak-led").title = "";
+							}
+						});
+					};
+					iterate();
+				}
+			});
+		}
+	};
+
+	__init__();
+}
diff --git a/web/js/keyboard.js b/web/js/keyboard.js
new file mode 100644
index 00000000..b8c4797b
--- /dev/null
+++ b/web/js/keyboard.js
@@ -0,0 +1,187 @@
+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 __mac_cmd_hook = ((
+		window.navigator.oscpu
+		|| window.navigator.platform
+		|| window.navigator.appVersion
+		|| "Unknown"
+	).indexOf("Mac") !== -1);
+
+	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;
+
+		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 (__mac_cmd_hook) {
+			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() {
+		if (__ws && (document.activeElement === $("stream-window") || document.activeElement === $("keyboard-window"))) {
+			$("hid-keyboard-led").className = "led-on";
+			$("hid-keyboard-led").title = "Keyboard captured";
+		} else {
+			$("hid-keyboard-led").className = "led-off";
+			$("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 (__mac_cmd_hook) {
+				// 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) {
+		return document.querySelectorAll("[data-key='" + el_key.getAttribute("data-key") + "']");
+	};
+
+	var __sendKey = function(el_key, state) {
+		var code = el_key.getAttribute("data-key");
+		tools.debug("Key", (state ? "pressed:" : "released:"), code);
+		if (__ws) {
+			__ws.send(JSON.stringify({
+				event_type: "key",
+				key: code,
+				state: state,
+			}));
+		}
+	};
+
+	__init__();
+}
diff --git a/web/js/main.js b/web/js/main.js
new file mode 100644
index 00000000..211e8525
--- /dev/null
+++ b/web/js/main.js
@@ -0,0 +1,16 @@
+var ui;
+
+function main() {
+	if (
+		!window.navigator
+		|| window.navigator.userAgent.indexOf("MSIE ") > 0
+		|| window.navigator.userAgent.indexOf("Trident/") > 0
+		|| window.navigator.userAgent.indexOf("Edge/") > 0
+	) {
+		$("bad-browser-modal").style.visibility = "visible";
+	} else {
+		ui = new Ui();
+		new Session(new Atx(), new Hid(), new Msd());
+		new Stream();
+	}
+}
diff --git a/web/js/mouse.js b/web/js/mouse.js
new file mode 100644
index 00000000..e4038436
--- /dev/null
+++ b/web/js/mouse.js
@@ -0,0 +1,146 @@
+function Mouse() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __current_pos = {x: 0, y:0};
+	var __sent_pos = {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");
+		}
+	};
+
+	var __hoverStream = function() {
+		__stream_hovered = true;
+		__updateLeds();
+	};
+
+	var __leaveStream = function() {
+		__stream_hovered = false;
+		__updateLeds();
+	};
+
+	var __updateLeds = function() {
+		if (__ws && __stream_hovered) {
+			$("hid-mouse-led").className = "led-on";
+			$("hid-mouse-led").title = "Mouse tracked";
+		} else {
+			$("hid-mouse-led").className = "led-off";
+			$("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 move:", 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: event.deltaX, y: event.deltaY};
+		tools.debug("Mouse wheel:", delta);
+		if (__ws) {
+			__ws.send(JSON.stringify({
+				event_type: "mouse_wheel",
+				delta: delta,
+			}));
+		}
+	};
+
+	__init__();
+}
diff --git a/web/js/msd.js b/web/js/msd.js
new file mode 100644
index 00000000..f90e4b05
--- /dev/null
+++ b/web/js/msd.js
@@ -0,0 +1,164 @@
+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"));
+	};
+
+	/********************************************************************************/
+
+	self.loadInitialState = function() {
+		var http = tools.makeRequest("GET", "/kvmd/msd", function() {
+			if (http.readyState === 4) {
+				if (http.status === 200) {
+					self.setState(JSON.parse(http.responseText).result);
+				} else {
+					setTimeout(self.loadInitialState, 1000);
+				}
+			}
+		});
+	};
+
+	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) {
+					ui.error("Switch error:<br>", http.responseText);
+				}
+			}
+			__applyState();
+		});
+		__applyState();
+		$("msd-switch-to-" + to + "-button").disabled = 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) {
+			ui.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 __applyState = function() {
+		if (__state.connected_to === "server") {
+			$("msd-another-another-user-uploads").style.display = "none";
+			$("msd-led").className = "led-on";
+			$("msd-status").innerHTML = $("msd-led").title = "Connected to Server";
+			$("msd-another-another-user-uploads").style.display = "none";
+		} else if (__state.busy) {
+			if (!__upload_http) {
+				$("msd-another-another-user-uploads").style.display = "block";
+			}
+			$("msd-led").className = "led-msd-writing";
+			$("msd-status").innerHTML = $("msd-led").title = "Uploading new image";
+		} else {
+			$("msd-another-another-user-uploads").style.display = "none";
+			$("msd-led").className = "led-off";
+			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");
+
+		$("msd-switch-to-kvm-button").disabled = (!__state.in_operate || __state.connected_to === "kvm" || __state.busy);
+		$("msd-switch-to-server-button").disabled = (!__state.in_operate || __state.connected_to === "server" || __state.busy);
+		$("msd-select-new-image-button").disabled = (!__state.in_operate || __state.connected_to !== "kvm" || __state.busy || __upload_http);
+		$("msd-upload-new-image-button").disabled = (!__state.in_operate || __state.connected_to !== "kvm" || __state.busy || !__image_file);
+		$("msd-abort-uploading-button").disabled = (!__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) : "");
+	};
+
+	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) {
+				ui.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__();
+}
diff --git a/web/js/session.js b/web/js/session.js
new file mode 100644
index 00000000..3169c8c1
--- /dev/null
+++ b/web/js/session.js
@@ -0,0 +1,121 @@
+function Session(atx, hid, msd) {
+	// var self = this;
+
+	/********************************************************************************/
+
+	var __ws = null;
+
+	var __ping_timer = null;
+	var __missed_heartbeats = 0;
+
+	var __init__ = function() {
+		$("link-led").title = "Not connected yet...";
+		__loadKvmdVersion();
+		__startPoller();
+	};
+
+	/********************************************************************************/
+
+	var __loadKvmdVersion = function() {
+		var http = tools.makeRequest("GET", "/kvmd/info", function() {
+			if (http.readyState === 4) {
+				if (http.status === 200) {
+					var version = JSON.parse(http.responseText).result.version;
+					$("kvmd-version").innerHTML = "kvmd " + version.kvmd;
+					$("about-version-kvmd").innerHTML = version.kvmd;
+					$("about-version-python").innerHTML = version.python;
+					$("about-version-platform").innerHTML = version.platform;
+				} else {
+					setTimeout(__loadKvmdVersion, 1000);
+				}
+			}
+		});
+	};
+
+	var __startPoller = function() {
+		$("link-led").className = "led-link-connecting";
+		$("link-led").title = "Connecting...";
+		var http = tools.makeRequest("GET", "/wsauth", function() {
+			if (http.readyState === 4) {
+				if (http.status === 200) {
+					__ws = new WebSocket((location.protocol == "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws");
+					__ws.onopen = __wsOpenHandler;
+					__ws.onmessage = __wsMessageHandler;
+					__ws.onerror = __wsErrorHandler;
+					__ws.onclose = __wsCloseHandler;
+				} else {
+					__wsCloseHandler(null);
+				}
+			}
+		});
+	};
+
+	var __wsOpenHandler = function(event) {
+		$("link-led").className = "led-on";
+		$("link-led").title = "Connected";
+		tools.debug("WebSocket opened:", event);
+		atx.loadInitialState();
+		msd.loadInitialState();
+		hid.setSocket(__ws);
+		__missed_heartbeats = 0;
+		__ping_timer = setInterval(__pingServer, 1000);
+	};
+
+	var __wsMessageHandler = function(event) {
+		// tools.debug("WebSocket: received 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 === "atx_state") {
+				atx.setState(event.msg.event_attrs);
+			} else if (event.msg.event === "msd_state") {
+				msd.setState(event.msg.event_attrs);
+			}
+		}
+	};
+
+	var __wsErrorHandler = function(event) {
+		tools.error("WebSocket error:", event);
+		if (__ws) {
+			__ws.onclose = null;
+			__ws.close();
+			__wsCloseHandler(null);
+		}
+	};
+
+	var __wsCloseHandler = function(event) {
+		$("link-led").className = "led-off";
+		tools.debug("WebSocket closed:", event);
+		if (__ping_timer) {
+			clearInterval(__ping_timer);
+			__ping_timer = null;
+		}
+		hid.setSocket(null);
+		atx.clearState();
+		__ws = null;
+		setTimeout(function() {
+			$("link-led").className = "led-link-connecting";
+			setTimeout(__startPoller, 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("Ping error:", err.message);
+			if (__ws) {
+				__ws.onclose = null;
+				__ws.close();
+				__wsCloseHandler(null);
+			}
+		}
+	};
+
+	__init__();
+}
diff --git a/web/js/stream.js b/web/js/stream.js
new file mode 100644
index 00000000..af3e45e9
--- /dev/null
+++ b/web/js/stream.js
@@ -0,0 +1,119 @@
+function Stream() {
+	// var self = this;
+
+	/********************************************************************************/
+
+	var __prev_state = false;
+
+	var __quality = 80;
+
+	var __normal_size = {width: 640, height: 480};
+	var __size_factor = 1;
+
+	var __init__ = function() {
+		$("stream-led").title = "Stream inactive";
+
+		var quality = 10;
+		for (; quality <= 100; quality += 10) {
+			$("stream-quality-select").innerHTML += "<option value=\"" + quality + "\">" + quality + "%</option>";
+		}
+
+		tools.setOnClick($("stream-reset-button"), __clickResetButton);
+		$("stream-quality-select").onchange = __changeQuality;
+		$("stream-size-slider").oninput = __resize;
+		$("stream-size-slider").onchange = __resize;
+
+		__startPoller();
+	};
+
+	/********************************************************************************/
+
+	// XXX: In current implementation we don't need this event because Stream() has own state poller
+
+	var __startPoller = function() {
+		var http = tools.makeRequest("GET", "/streamer/ping", function() {
+			if (http.readyState === 4) {
+				var response = (http.status === 200 ? JSON.parse(http.responseText) : null);
+				if (http.status !== 200 || !response.stream.online) {
+					tools.info("Refreshing stream ...");
+					__prev_state = false;
+					$("stream-image").className = "stream-image-inactive";
+					$("stream-box").classList.add("stream-box-inactive");
+					$("stream-led").className = "led-off";
+					$("stream-led").title = "Stream inactive";
+					$("stream-reset-button").disabled = true;
+					$("stream-quality-select").disabled = true;
+				} else if (http.status === 200 && !__prev_state) {
+					__normal_size = response.stream.resolution;
+					__refreshImage();
+					__prev_state = true;
+					$("stream-image").className = "stream-image-active";
+					$("stream-box").classList.remove("stream-box-inactive");
+					$("stream-led").className = "led-on";
+					$("stream-led").title = "Stream is active";
+					$("stream-reset-button").disabled = false;
+					$("stream-quality-select").disabled = false;
+				}
+			}
+		});
+		setTimeout(__startPoller, 1500);
+	};
+
+	var __clickResetButton = function() {
+		$("stream-reset-button").disabled = true;
+		var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
+			if (http.readyState === 4) {
+				if (http.status !== 200) {
+					ui.error("Can't reset stream:<br>", http.responseText);
+				}
+			}
+		});
+	};
+
+	var __changeQuality = function() {
+		var quality = parseInt($("stream-quality-select").value);
+		if (__quality != quality) {
+			$("stream-quality-select").disabled = true;
+			var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?quality=" + quality, function() {
+				if (http.readyState === 4) {
+					if (http.status !== 200) {
+						ui.error("Can't configure stream:<br>", http.responseText);
+					}
+				}
+			});
+		}
+	};
+
+	var __resize = function() {
+		var percent = $("stream-size-slider").value;
+		$("stream-size-value").innerHTML = percent + "%";
+		__size_factor = percent / 100;
+		__applySizeFactor();
+	};
+
+	var __applySizeFactor = function() {
+		var el_stream_image = $("stream-image");
+		el_stream_image.style.width = __normal_size.width * __size_factor + "px";
+		el_stream_image.style.height = __normal_size.height * __size_factor + "px";
+		ui.showWindow($("stream-window"), false);
+	};
+
+	var __refreshImage = function() {
+		var http = tools.makeRequest("GET", "/kvmd/streamer", function() {
+			if (http.readyState === 4 && http.status === 200) {
+				var result = JSON.parse(http.responseText).result;
+
+				if (__quality != result.quality) {
+					tools.info("Quality changed:", result.quality);
+					document.querySelector("#stream-quality-select [value=\"" + result.quality + "\"]").selected = true;
+					__quality = result.quality;
+				}
+
+				__applySizeFactor();
+				$("stream-image").src = "/streamer/stream?t=" + new Date().getTime();
+			}
+		});
+	};
+
+	__init__();
+}
diff --git a/web/js/tools.js b/web/js/tools.js
new file mode 100644
index 00000000..76f27b7d
--- /dev/null
+++ b/web/js/tools.js
@@ -0,0 +1,43 @@
+var tools = new function() {
+	var __debug = (new URL(window.location.href)).searchParams.get("debug");
+
+	this.makeRequest = function(method, url, callback, timeout=null) {
+		var http = new XMLHttpRequest();
+		http.open(method, url, true);
+		http.onreadystatechange = callback;
+		http.timeout = (timeout ? timeout : 5000);
+		http.send();
+		return http;
+	};
+
+	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.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
+};
+
+var $ = (id) => document.getElementById(id);
+var $$ = (cls) => document.getElementsByClassName(cls);
diff --git a/web/js/ui.js b/web/js/ui.js
new file mode 100644
index 00000000..d04184c1
--- /dev/null
+++ b/web/js/ui.js
@@ -0,0 +1,319 @@
+function Ui() {
+	var self = this;
+
+	/********************************************************************************/
+
+	var __top_z_index = 0;
+	var __windows = [];
+	var __ctl_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($$("ctl-item"), function(el_item) {
+			tools.setOnClick(el_item, () => __toggleMenu(el_item));
+			__ctl_items.push(el_item);
+		});
+
+		Array.prototype.forEach.call($$("window"), function(el_window) {
+			__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";
+					__raiseLastWindow();
+				});
+			}
+		});
+
+		window.onmouseup = __globalMouseButtonHandler;
+		window.ontouchend = __globalMouseButtonHandler;
+
+		window.addEventListener("resize", () => __organizeWindowsOnResize(false));
+		window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
+
+		tools.setOnClick($("show-about-button"), () => self.showWindow($("about-window")));
+		tools.setOnClick($("show-keyboard-button"), () => self.showWindow($("keyboard-window")));
+		tools.setOnClick($("show-stream-button"), () => self.showWindow($("stream-window")));
+
+		self.showWindow($("stream-window"));
+	};
+
+	/********************************************************************************/
+
+	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_modal.outerHTML = "";
+					var index = __windows.indexOf(el_modal);
+					if (index !== -1) {
+						__windows.splice(index, 1);
+					}
+					__raiseLastWindow();
+					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);
+		__raiseWindow(el_modal);
+
+		return promise;
+	};
+
+	self.showWindow = function(el_window, raise=true) {
+		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
+			var view = __getViewGeometry();
+			var rect = el_window.getBoundingClientRect();
+			el_window.style.top = Math.max($("ctl").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 (raise) {
+			__raiseWindow(el_window);
+		}
+	};
+
+	var __isWindowOnPage = function(el_window) {
+		var view = __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 __getViewGeometry = function() {
+		return {
+			top: $("ctl").clientHeight,
+			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
+			left: 0,
+			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
+		};
+	};
+
+	var __toggleMenu = function(el_a) {
+		var all_hidden = true;
+
+		__ctl_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
+			if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
+				el_item.focus();
+				el_item.classList.add("ctl-item-selected");
+				el_menu.style.visibility = "visible";
+				all_hidden &= false;
+			} else {
+				el_item.classList.remove("ctl-item-selected");
+				el_menu.style.visibility = "hidden";
+			}
+		});
+
+		if (all_hidden) {
+			document.onkeyup = null;
+			__raiseLastWindow();
+		} else {
+			document.onkeyup = function(event) {
+				if (event.code === "Escape") {
+					event.preventDefault();
+					__closeAllMenues();
+					__raiseLastWindow();
+				}
+			};
+		}
+	};
+
+	var __closeAllMenues = function() {
+		document.onkeyup = null;
+		__ctl_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
+			el_item.classList.remove("ctl-item-selected");
+			el_menu.style.visibility = "hidden";
+		});
+	};
+
+	var __globalMouseButtonHandler = function(event) {
+		if (!event.target.matches(".ctl-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();
+			__raiseLastWindow();
+		}
+	};
+
+	var __organizeWindowsOnResize = function(orientation) {
+		var view = __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($("ctl").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 __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();
+			__raiseWindow(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", "");
+		tools.setOnClick(el_window, () => __raiseWindow(el_window));
+
+		el_grab.onmousedown = startMoving;
+		el_grab.ontouchstart = startMoving;
+	};
+
+	var __raiseLastWindow = function() {
+		var last_el_window = null;
+		var max_z_index = 0;
+		__windows.forEach(function(el_window) {
+			var z_index = parseInt(window.getComputedStyle(el_window, null).zIndex) || 0;
+			if (max_z_index < z_index && window.getComputedStyle(el_window, null).visibility !== "hidden") {
+				last_el_window = el_window;
+				max_z_index = z_index;
+			}
+		});
+		__raiseWindow(last_el_window);
+	};
+
+	var __raiseWindow = function(el_window) {
+		var el_to_focus = (el_window.className === "modal" ? el_window.querySelector(".modal-window") : el_window);
+		if (document.activeElement !== el_to_focus) {
+			el_to_focus.focus();
+			tools.debug("Focused window:", el_window);
+			if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
+				var z_index = __top_z_index + 1;
+				el_window.style.zIndex = z_index;
+				__top_z_index = z_index;
+				tools.debug("Raised window:", el_window);
+			}
+		}
+	};
+
+	__init__();
+}
diff --git a/web/png/blank-stream.png b/web/png/blank-stream.png
new file mode 100644
index 00000000..f1e11b14
--- /dev/null
+++ b/web/png/blank-stream.png
diff --git a/web/safari-pinned-tab.svg b/web/safari-pinned-tab.svg
new file mode 100644
index 00000000..86314c0a
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/atx-hdd-led.svg b/web/svg/atx-hdd-led.svg
new file mode 100644
index 00000000..75987570
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/atx-power-led.svg b/web/svg/atx-power-led.svg
new file mode 100644
index 00000000..b82af7bc
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/fan-led.svg b/web/svg/fan-led.svg
new file mode 100644
index 00000000..8cbdd76d
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/favicon.svg b/web/svg/favicon.svg
new file mode 100644
index 00000000..a3fde08f
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/gear-led.svg b/web/svg/gear-led.svg
new file mode 100644
index 00000000..db9aff21
--- /dev/null
+++ b/web/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>
\ No newline at end of file
diff --git a/web/svg/hid-keyboard-led.svg b/web/svg/hid-keyboard-led.svg
new file mode 100644
index 00000000..dc17c615
--- /dev/null
+++ b/web/svg/hid-keyboard-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="keyboard.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.2768581,0,0,1.2768581,215.79611,15.018191)"
+       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.20721436px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       id="flowRoot4808">
+      <path
+         d="m -83.44043,10.504883 h 11.103516 q 1.079102,0 1.079102,1.079101 v 5.131836 q 0,1.079102 -1.079102,1.079102 H -83.44043 q -1.079101,0 -1.079101,-1.079102 v -5.131836 q 0,-1.079101 1.079101,-1.079101 z m -0.361328,1.079101 v 5.131836 q 0,0.361328 0.361328,0.361328 h 11.103516 q 0.356445,0 0.356445,-0.361328 v -5.131836 q 0,-0.361328 -0.356445,-0.361328 H -83.44043 q -0.361328,0 -0.361328,0.361328 z m 1.264649,4.501953 v 0.356446 q 0,0.180664 -0.180664,0.180664 h -0.361329 q -0.180664,0 -0.180664,-0.180664 v -0.356446 q 0,-0.185546 0.180664,-0.185546 h 0.361329 q 0.180664,0 0.180664,0.185546 z m 1.088867,-0.0049 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.366211 q -0.175781,0 -0.175781,-0.180664 v -0.361328 q 0,-0.180664 0.175781,-0.180664 h 0.366211 q 0.180664,0 0.180664,0.180664 z m 1.611328,-1.074219 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m -2.158203,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 2.153321,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180665,0 -0.180665,-0.180664 v -0.361328 q 0,-0.180664 0.180665,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.943359,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -1.225586 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 1.225586 q 0.180664,0 0.180664,0.180664 z m -9.672851,-1.074219 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.074219,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361329 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361329 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m -0.175781,-1.074219 v 0.361329 q 0,0.180664 -0.180664,0.180664 h -0.361329 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361329 q 0.180664,0 0.180664,0.180664 z m -1.079102,0 v 0.361329 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m -1.079101,0 v 0.361329 q 0,0.180664 -0.180665,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180665,0 0.180665,0.180664 z m -1.079102,0 v 0.361329 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m -1.074219,0 v 0.361329 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m -1.079101,0 v 0.361329 q 0,0.180664 -0.180664,0.180664 h -0.361329 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361329 q 0.180664,0 0.180664,0.180664 z m -1.079102,0 v 0.361329 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m -1.079101,0 v 0.361329 q 0,0.180664 -0.180665,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361329 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180665,0 0.180665,0.180664 z m -0.175782,-1.05957 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.074219,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180665,0 -0.180665,-0.180664 v -0.361328 q 0,-0.180664 0.180665,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079101,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.079102,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.396484,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.678711 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.678711 q 0.180664,0 0.180664,0.180664 z m -0.180664,0.888672 q 0.180664,0 0.180664,0.180664 v 1.416016 q 0,0.180664 -0.180664,0.180664 h -1.201172 q -0.205078,0 -0.205078,-0.180664 v -0.727539 q 0,-0.15625 -0.175781,-0.15625 -0.180664,0 -0.180664,-0.180664 v -0.356446 q 0,-0.180664 0.180664,-0.180664 z m -0.859375,3.393555 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.361328 q -0.180664,0 -0.180664,-0.180664 v -0.361328 q 0,-0.180664 0.180664,-0.180664 h 0.361328 q 0.180664,0 0.180664,0.180664 z m 1.088867,0 v 0.361328 q 0,0.180664 -0.180664,0.180664 h -0.366211 q -0.175781,0 -0.175781,-0.180664 v -0.361328 q 0,-0.180664 0.175781,-0.180664 h 0.366211 q 0.180664,0 0.180664,0.180664 z m -7.944335,0.541992 q -0.180665,0 -0.180665,-0.180664 v -0.361328 q 0,-0.180664 0.180665,-0.180664 h 5.019531 q 0.180664,0 0.180664,0.180664 v 0.361328 q 0,0.180664 -0.180664,0.180664 z"
+         style="stroke-width:0.20721436px"
+         id="path4816" />
+    </g>
+  </g>
+</svg>
diff --git a/web/svg/hid-mouse-led.svg b/web/svg/hid-mouse-led.svg
new file mode 100644
index 00000000..b922bdde
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/info.svg b/web/svg/info.svg
new file mode 100644
index 00000000..b28139d5
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/link-led.svg b/web/svg/link-led.svg
new file mode 100644
index 00000000..8cc10e13
--- /dev/null
+++ b/web/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>

diff --git a/web/svg/logo.svg b/web/svg/logo.svg
new file mode 100644
index 00000000..548ede08
--- /dev/null
+++ b/web/svg/logo.svg
@@ -0,0 +1,103 @@
+<?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="4.3488798mm"
+   viewBox="0 0 16.933332 4.3488798"
+   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="23.887322"
+     inkscape:cy="-8.8986029"
+     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(-11.627273,-5.9349994)">
+    <g
+       aria-label="π-kvm"
+       transform="matrix(0.44662735,0,0,0.44662735,-8.0000339,-7.0757243)"
+       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>
diff --git a/web/svg/msd-led.svg b/web/svg/msd-led.svg
new file mode 100644
index 00000000..a8da7092
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/select-arrow-inactive.svg b/web/svg/select-arrow-inactive.svg
new file mode 100644
index 00000000..ba68f05c
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/select-arrow-intensive.svg b/web/svg/select-arrow-intensive.svg
new file mode 100644
index 00000000..3223f099
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/select-arrow-normal.svg b/web/svg/select-arrow-normal.svg
new file mode 100644
index 00000000..174663ce
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/stream-led.svg b/web/svg/stream-led.svg
new file mode 100644
index 00000000..8dfbfbe3
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/stream-mouse-cursor.svg b/web/svg/stream-mouse-cursor.svg
new file mode 100644
index 00000000..ff852ef6
--- /dev/null
+++ b/web/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>
diff --git a/web/svg/warning.svg b/web/svg/warning.svg
new file mode 100644
index 00000000..3137b24d
--- /dev/null
+++ b/web/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>