refactoring

22 files changed, 331 insertions, 330 deletions

diff --git a/web/css/about.css b/web/css/kvm/about.css
index 46cf382a..46cf382a 100644
--- a/web/css/about.css
+++ b/web/css/kvm/about.css
diff --git a/web/css/hid.css b/web/css/kvm/hid.css
index 8c420fe9..8c420fe9 100644
--- a/web/css/hid.css
+++ b/web/css/kvm/hid.css
diff --git a/web/css/keyboard.css b/web/css/kvm/keyboard.css
index cb42f2fa..5d9b5df3 100644
--- a/web/css/keyboard.css
+++ b/web/css/kvm/keyboard.css
@@ -40,7 +40,7 @@ div.keyboard div.key, div.modifier {
 }
 div.keyboard div.key:hover, div.modifier:hover {
 	color: var(--fg-color-intensive);
-	background-color: var(--bg-color-ctl);
+	background-color: var(--bg-color-menu);
 }
 div.keyboard div.pressed {
 	box-shadow: none;
@@ -99,6 +99,27 @@ div.keyboard b {
 	color: var(--bg-color-intensive);
 }
 
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div#keyboard-window {
+		visibility: visible !important;
+		padding-top: 9px !important;
+		padding-bottom: 30px !important;
+		border-bottom: 0 !important;
+		border-left: 0 !important;
+		border-right: 0 !important;
+		border-radius: 0 !important;
+		top: unset !important;
+		bottom: 0 !important;
+		width: 100% !important;
+		left: 50% !important;
+		-webkit-transform: translateX(-50%) !important;
+		transform: translateX(-50%) !important;
+	}
+	div#keyboard-window-header {
+		display: none !important
+	}
+}
+
 div#keyboard-desktop {
 	display: block;
 }
diff --git a/web/css/msd.css b/web/css/kvm/msd.css
index 46636f03..de22d6e5 100644
--- a/web/css/msd.css
+++ b/web/css/kvm/msd.css
@@ -1,12 +1,8 @@
 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 {
+
+div.msd-message, input.msd-message {
 	display: none;
 }
 
diff --git a/web/css/kvm/stream.css b/web/css/kvm/stream.css
new file mode 100644
index 00000000..4cdb7fe4
--- /dev/null
+++ b/web/css/kvm/stream.css
@@ -0,0 +1,90 @@
+div#stream-info {
+	display: none;
+}
+
+img#stream-image {
+	width: 640px;
+	height: 480px;
+	display: block;
+	background-color: black;
+}
+
+img.stream-image-active {
+	-webkit-filter: none;
+	filter: none;
+}
+
+img.stream-image-inactive {
+	-webkit-filter: grayscale(100%) brightness(75%) sepia(75%);
+	filter: grayscale(100%) brightness(75%) sepia(75%);
+}
+
+div#stream-box {
+	position: relative;
+	display: inline-block;
+	border: var(--border-dark-thin);
+}
+div.stream-box-inactive::after {
+	cursor: wait;
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	display: inline-block;
+	background: radial-gradient(transparent 20%, black);
+}
+div.stream-box-mouse-enabled {
+	cursor: url("../../svg/stream-mouse-cursor.svg"), pointer;
+}
+
+div.stream-slider-box {
+	margin-top: 5px;
+	display: flex;
+}
+
+table#stream-auto-resize-box {
+	width: 100%;
+	border-collapse: collapse;
+}
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		table#stream-auto-resize-box {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
+
+div#stream-mouse-buttons {
+	display: none;
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	div#stream-window {
+		padding-top: 3px !important;
+		border-top: 0 !important;
+		border-radius: 0 0 8px 8px !important;
+		top: 50px !important;
+		left: 50% !important;
+		-webkit-transform: translateX(-50%) !important;
+		transform: translateX(-50%) !important;
+	}
+	div#stream-window-header {
+		display: none !important;
+	}
+	div#stream-info {
+		display: block !important;
+		margin: 0;
+		padding: 0;
+		padding-bottom: 3px;
+		font-size: 0.8em;
+		color: var(--fg-color-dark);
+	}
+	div#stream-mouse-buttons {
+		display: block !important;
+	}
+}
diff --git a/web/css/main.css b/web/css/main.css
index f35d3ff4..e4396e1f 100644
--- a/web/css/main.css
+++ b/web/css/main.css
@@ -83,6 +83,12 @@ select:active {
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
 
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	button, select {
+		height: 45px !important;
+	}
+}
+
 .row50 {
 	display: inline-block;
 	width: 50%;
@@ -105,98 +111,7 @@ img.svg-gray {
 	vertical-align: middle;
 }
 
-img#logo {
-	padding-left: 16px;
-}
-
-ul#ctl {
-	box-shadow: var(--shadow-small);
-	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(--border-black-thin);
-	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);
-}
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	/* iPad 8 */
-	ul#ctl li a.ctl-item:hover:not(.active) {
-		background-color: var(--bg-color-ctl) !important;
-	}
-}
-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(--border-intensive-2px);
-	border-top: var(--border-dark-thin);
-	border-radius: 0 0 8px 8px;
-	position: absolute;
-	background-color: var(--bg-color-ctl);
-	min-width: 180px;
-	box-shadow: var(--shadow-big);
-	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(--border-dark-thin);
-}
-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 {
+ul.footer {
 	list-style-type: none;
 	bottom: 0;
 	position: fixed;
@@ -206,15 +121,15 @@ ul#footer {
 	color: var(--fg-color-inactive);
 	z-index: -10;
 }
-ul#footer li {
+ul.footer li {
 	padding: 0 10px;
 }
-ul#footer li.footer-left {
+ul.footer li.footer-left {
 	float: left;
 }
-ul#footer li.footer-right {
+ul.footer li.footer-right {
 	float: right;
 }
-ul#footer li a {
+ul.footer li a {
 	color: var(--fg-color-inactive);
 }
diff --git a/web/css/menu.css b/web/css/menu.css
new file mode 100644
index 00000000..b70419f9
--- /dev/null
+++ b/web/css/menu.css
@@ -0,0 +1,88 @@
+ul.menu {
+	box-shadow: var(--shadow-small);
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	background-color: var(--bg-color-menu);
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 50px;
+	z-index: 2147483646;
+}
+ul.menu li.menu-logo {
+	line-height: 50px;
+	margin-top: -2px;
+	margin-left: 16px;
+	float: left;
+}
+ul.menu li.menu-right-actions {
+	float: right;
+}
+ul.menu img {
+	vertical-align: middle;
+	margin-right: 10px;
+	height: 20px;
+}
+ul.menu li a.menu-item {
+	line-height: 50px;
+	outline: none;
+	cursor: pointer;
+	border-left: var(--border-black-thin);
+	display: inline-block;
+	color: var(--fg-color-normal);
+	padding-left: 16px;
+	padding-right: 16px;
+	text-decoration: none;
+}
+ul.menu li a.menu-item:hover:not(.active) {
+	background-color: var(--bg-color-hovered);
+}
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+	/* iPad 8 */
+	ul.menu li a.menu-item:hover:not(.active) {
+		background-color: var(--bg-color-menu) !important;
+	}
+}
+ul.menu li a.menu-item-selected {
+	box-shadow: 0 5px 0 var(--border-color-intensive) inset;
+	background-color: var(--bg-color-selected) !important;
+}
+div.menu-dropdown-content {
+	visibility: hidden;
+	overflow: hidden;
+	white-space: nowrap;
+	border: var(--border-intensive-2px);
+	border-top: var(--border-dark-thin);
+	border-radius: 0 0 8px 8px;
+	position: absolute;
+	background-color: var(--bg-color-menu);
+	min-width: 180px;
+	box-shadow: var(--shadow-big);
+	z-index: 2147483645;
+}
+div.menu-dropdown-content button, select {
+	text-align: left;
+	padding: 0 16px;
+}
+div.menu-dropdown-content div.buttons-row {
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+div.menu-dropdown-content hr {
+	margin: 0;
+	display: block;
+	height: 0px;
+	padding: 0;
+	border: none;
+	border-top: var(--border-dark-thin);
+}
+div.menu-dropdown-content-buttons {
+	background-color: var(--bg-color-normal);
+}
+div.menu-dropdown-content-text {
+	margin: 10px 15px 10px 15px;
+	font-size: 14px;
+}
+
diff --git a/web/css/mobile.css b/web/css/mobile.css
deleted file mode 100644
index eeaaf0e6..00000000
--- a/web/css/mobile.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
-	http://stephen.io/mediaqueries/
-	https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
-*/
-
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-	div#keyboard-window {
-		visibility: visible !important;
-		padding-top: 9px !important;
-		padding-bottom: 30px !important;
-		border-bottom: 0 !important;
-		border-left: 0 !important;
-		border-right: 0 !important;
-		border-radius: 0 !important;
-		top: unset !important;
-		bottom: 0 !important;
-		width: 100% !important;
-		left: 50% !important;
-		-webkit-transform: translateX(-50%) !important;
-		transform: translateX(-50%) !important;
-	}
-	div#keyboard-window-header {
-		display: none !important
-	}
-
-	div#stream-window {
-		padding-top: 3px !important;
-		border-top: 0 !important;
-		border-radius: 0 0 8px 8px !important;
-		top: 50px !important;
-		left: 50% !important;
-		-webkit-transform: translateX(-50%) !important;
-		transform: translateX(-50%) !important;
-	}
-	div#stream-window-header {
-		display: none !important;
-	}
-	div#stream-info {
-		display: block !important;
-		margin: 0;
-		padding: 0;
-		padding-bottom: 3px;
-		font-size: 0.8em;
-		color: var(--fg-color-dark);
-	}
-	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;
-	}
-
-	@supports (-webkit-appearance: none) {
-		input[type=range].slider {
-			margin: 20px 0 20px 0 !important;
-		}
-
-		table#stream-auto-resize-box {
-			margin: 20px 0 20px 0 !important;
-		}
-	}
-}
diff --git a/web/css/sliders.css b/web/css/sliders.css
index 25501137..472734eb 100644
--- a/web/css/sliders.css
+++ b/web/css/sliders.css
@@ -20,6 +20,13 @@
 		margin-right: 0;
 	}
 }
+@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
+	@supports (-webkit-appearance: none) {
+		input[type=range].slider {
+			margin: 20px 0 20px 0 !important;
+		}
+	}
+}
 input[type=range].slider:disabled {
 	cursor: default;
 }
diff --git a/web/css/stream.css b/web/css/stream.css
deleted file mode 100644
index b5b9d57c..00000000
--- a/web/css/stream.css
+++ /dev/null
@@ -1,57 +0,0 @@
-div#stream-info {
-	display: none;
-}
-
-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(--border-dark-thin);
-}
-div.stream-box-inactive::after {
-	cursor: wait;
-	content: "";
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	display: inline-block;
-	background: radial-gradient(transparent 20%, black);
-}
-div.stream-box-mouse-enabled {
-	cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
-}
-
-div.stream-slider-box {
-	margin-top: 5px;
-	display: flex;
-}
-
-table#stream-auto-resize-box {
-	width: 100%;
-	border-collapse: collapse;
-}
-
-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
index 7fd8b3a9..3a92e220 100644
--- a/web/css/vars.css
+++ b/web/css/vars.css
@@ -3,7 +3,7 @@
 	--bg-color-light: #484b51;
 	--bg-color-gray: #3b3e43;
 	--bg-color-dark: #17191d;
-	--bg-color-ctl: #202225;
+	--bg-color-menu: #202225;
 	--bg-color-intensive: #436a8a;
 	--bg-color-hovered: #1a1c1f;
 	--bg-color-selected: #171717;
@@ -14,10 +14,8 @@
 	--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-gray: var(--bg-color-ctl);
+	--border-color-gray: var(--bg-color-menu);
 	--border-color-dark: var(--bg-color-dark);
 	--border-color-intensive: #5b90bb;
 	--border-color-important: #ff6467;
diff --git a/web/index.html b/web/index.html
index d6cf0550..20f25451 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,29 +14,29 @@
 
 	<link rel="stylesheet" href="css/vars.css">
 	<link rel="stylesheet" href="css/main.css">
+	<link rel="stylesheet" href="css/menu.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/sliders.css">
 	<link rel="stylesheet" href="css/switches.css">
 	<link rel="stylesheet" href="css/progress.css">
-	<link rel="stylesheet" href="css/stream.css">
-	<link rel="stylesheet" href="css/hid.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">
+	<link rel="stylesheet" href="css/kvm/stream.css">
+	<link rel="stylesheet" href="css/kvm/hid.css">
+	<link rel="stylesheet" href="css/kvm/msd.css">
+	<link rel="stylesheet" href="css/kvm/keyboard.css">
+	<link rel="stylesheet" href="css/kvm/about.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 src="js/kvm/stream.js"></script>
+	<script src="js/kvm/atx.js"></script>
+	<script src="js/kvm/keyboard.js"></script>
+	<script src="js/kvm/mouse.js"></script>
+	<script src="js/kvm/hid.js"></script>
+	<script src="js/kvm/msd.js"></script>
+	<script src="js/kvm/session.js"></script>
+	<script src="js/kvm/main.js"></script>
 
 	<script>window.onload = main;</script>
 </head>
@@ -60,20 +60,22 @@
 		</div>
 	</div>
 
-	<ul id="ctl">
-		<li class="ctl-logo"><img id="logo" class="svg-gray" src="svg/logo.svg" alt="&pi;-kvm" /></li>
+	<ul id="menu" class="menu">
+		<li class="menu-logo">
+			<img class="svg-gray" src="svg/logo.svg" alt="&pi;-kvm" />
+		</li>
 
-		<li class="ctl-right-actions">
-			<div class="ctl-dropdown">
-				<a class="ctl-item" href="#">
+		<li class="menu-right-actions">
+			<div class="menu-dropdown">
+				<a class="menu-item" href="#">
 					<img data-dont-hide-menu id="link-led" class="led-gray" src="svg/link-led.svg" />
 					<img data-dont-hide-menu id="stream-led" class="led-gray" src="svg/stream-led.svg" />
 					<img data-dont-hide-menu id="hid-keyboard-led" class="led-gray" src="svg/hid-keyboard-led.svg" />
 					<img data-dont-hide-menu id="hid-mouse-led" class="led-gray" src="svg/hid-mouse-led.svg" />
 					System &#8628;
 				</a>
-				<div data-dont-hide-menu class="ctl-dropdown-content">
-					<div class="ctl-dropdown-content-buttons">
+				<div data-dont-hide-menu class="menu-dropdown-content">
+					<div class="menu-dropdown-content-buttons">
 						<button disabled data-force-hide-menu id="stream-screenshot-button">&bull; Take a screenshot</button>
 						<hr>
 						<button data-force-hide-menu id="show-stream-button">&bull; Show stream</button>
@@ -81,28 +83,28 @@
 						<button data-force-hide-menu id="show-about-button">&bull; Show about</button>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-text">
+					<div class="menu-dropdown-content-text">
 						Stream quality: <span id="stream-quality-value">80%</span>
 						<div class="stream-slider-box">
 							<input disabled type="range" id="stream-quality-slider" class="slider" />
 						</div>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-text">
+					<div class="menu-dropdown-content-text">
 						Stream FPS: <span id="stream-desired-fps-value">30</span>
 						<div class="stream-slider-box">
 							<input disabled type="range" id="stream-desired-fps-slider" class="slider" />
 						</div>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-text">
+					<div class="menu-dropdown-content-text">
 						Stream size: <span id="stream-size-value">100%</span>
 						<div class="stream-slider-box">
 							<input type="range" id="stream-size-slider" class="slider" />
 						</div>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-text">
+					<div class="menu-dropdown-content-text">
 						<table id="stream-auto-resize-box"><tr>
 							<td>Auto-resize stream:</td>
 							<td align="right">
@@ -116,28 +118,28 @@
 							</td>
 						</tr></table>
 					</div>
-					<div class="ctl-dropdown-content-buttons">
+					<div class="menu-dropdown-content-buttons">
 						<hr>
 						<button disabled data-force-hide-menu id="stream-reset-button">&bull; Reset stream</button>
 						<button disabled data-force-hide-menu id="hid-reset-button">&bull; Reset keyboard &amp; mouse</button>
 						<button disabled data-force-hide-menu id="msd-reset-button">&bull; Reset mass storage</button>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-buttons">
+					<div class="menu-dropdown-content-buttons">
 						<button data-force-hide-menu id="open-log-button">&bull; Open log</button>
 					</div>
 				</div>
 			</div>
 		</li>
 
-		<li class="ctl-right-actions">
-			<div class="ctl-dropdown">
-				<a class="ctl-item" href="#">
+		<li class="menu-right-actions">
+			<div class="menu-dropdown">
+				<a class="menu-item" href="#">
 					<img data-dont-hide-menu id="atx-power-led" class="led-gray" src="svg/atx-power-led.svg" />
 					<img data-dont-hide-menu id="atx-hdd-led" class="led-gray" src="svg/atx-hdd-led.svg" />
 					ATX &#8628;
 				</a>
-				<div class="ctl-dropdown-content ctl-dropdown-content-buttons">
+				<div class="menu-dropdown-content menu-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>
@@ -146,15 +148,15 @@
 			</div>
 		</li>
 
-		<li class="ctl-right-actions">
-			<div class="ctl-dropdown">
-				<a class="ctl-item" href="#">
+		<li class="menu-right-actions">
+			<div class="menu-dropdown">
+				<a class="menu-item" href="#">
 					<img data-dont-hide-menu id="msd-led" class="led-gray" 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">
+				<div data-dont-hide-menu id="msd-menu" class="menu-dropdown-content">
+					<div id="msd-not-in-operate" class="msd-message">
+						<div class="menu-dropdown-content-text">
 							<table>
 								<tr>
 									<td><img src="svg/warning.svg" /></td>
@@ -165,8 +167,8 @@
 						<hr>
 					</div>
 
-					<div id="msd-current-image-broken">
-						<div class="ctl-dropdown-content-text">
+					<div id="msd-current-image-broken" class="msd-message">
+						<div class="menu-dropdown-content-text">
 							<table>
 								<tr>
 									<td><img src="svg/warning.svg" /></td>
@@ -177,8 +179,8 @@
 						<hr>
 					</div>
 
-					<div id="msd-another-another-user-uploads">
-						<div class="ctl-dropdown-content-text">
+					<div id="msd-another-another-user-uploads" class="msd-message">
+						<div class="menu-dropdown-content-text">
 							<table>
 								<tr>
 									<td><img src="svg/info.svg" /></td>
@@ -213,15 +215,15 @@
 					</table>
 					<hr>
 
-					<input type="file" id="msd-select-new-image-file" />
-					<div class="ctl-dropdown-content-buttons buttons-row">
+					<input type="file" id="msd-select-new-image-file" class="msd-message" />
+					<div class="menu-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">
+					<div id="msd-new-image" class="msd-message">
 						<table class="msd-info">
 							<tr>
 								<td>New name:</td>
@@ -233,7 +235,7 @@
 							</tr>
 						</table>
 						<hr>
-						<div class="ctl-dropdown-content-text">
+						<div class="menu-dropdown-content-text">
 							<div id="msd-progress" class="progress">
 								<span id="msd-progress-value" class="progress-value"></span>
 							</div>
@@ -241,7 +243,7 @@
 						<hr>
 					</div>
 
-					<div class="ctl-dropdown-content-buttons buttons-row">
+					<div class="menu-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>
@@ -249,14 +251,14 @@
 			</div>
 		</li>
 
-		<li class="ctl-right-actions">
-			<div class="ctl-dropdown">
-				<a class="ctl-item" href="#">
+		<li class="menu-right-actions">
+			<div class="menu-dropdown">
+				<a class="menu-item" href="#">
 					<img data-dont-hide-menu id="hid-pak-led" class="led-gray" src="svg/gear-led.svg" />
 					Shortcuts &#8628;
 				</a>
-				<div data-dont-hide-menu class="ctl-dropdown-content">
-					<div class="ctl-dropdown-content-buttons">
+				<div data-dont-hide-menu class="menu-dropdown-content">
+					<div class="menu-dropdown-content-buttons">
 						<textarea id="hid-pak-text" placeholder="Paste your text here"></textarea>
 						<hr>
 						<button disabled data-force-hide-menu id="hid-pak-button">&bull; &uarr; Paste-as-Keys <sup><i>ascii-only</i></sup></button>
@@ -279,11 +281,11 @@
 						<button data-force-hide-menu data-shortcut="ControlLeft AltLeft Delete">&bull; Ctrl+Alt+Del</button>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-text">
+					<div class="menu-dropdown-content-text">
 						&darr; Alt+SysRq+... <sup><i>linux magic (<a target="_blank" href="https://www.kernel.org/doc/html/latest/admin-guide/sysrq.html">help</a>)</i></sup>
 					</div>
 					<hr>
-					<div class="ctl-dropdown-content-buttons buttons-row">
+					<div class="menu-dropdown-content-buttons buttons-row">
 						<button data-shortcut="AltLeft PrintScreen KeyR" class="row16">R</button>
 						<button data-shortcut="AltLeft PrintScreen KeyE" class="row16">E</button>
 						<button data-shortcut="AltLeft PrintScreen KeyI" class="row16">I</button>
@@ -595,7 +597,7 @@
 		</div>
 	</div>
 
-	<ul id="footer">
+	<ul class="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>
diff --git a/web/js/atx.js b/web/js/kvm/atx.js
index b75b901b..b75b901b 100644
--- a/web/js/atx.js
+++ b/web/js/kvm/atx.js
diff --git a/web/js/hid.js b/web/js/kvm/hid.js
index 5b13480f..5b13480f 100644
--- a/web/js/hid.js
+++ b/web/js/kvm/hid.js
diff --git a/web/js/keyboard.js b/web/js/kvm/keyboard.js
index ee9a7ba1..ee9a7ba1 100644
--- a/web/js/keyboard.js
+++ b/web/js/kvm/keyboard.js
diff --git a/web/js/kvm/main.js b/web/js/kvm/main.js
new file mode 100644
index 00000000..3cb65402
--- /dev/null
+++ b/web/js/kvm/main.js
@@ -0,0 +1,23 @@
+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();
+
+		tools.setOnClick($("show-about-button"), () => ui.showWindow($("about-window")));
+		tools.setOnClick($("show-keyboard-button"), () => ui.showWindow($("keyboard-window")));
+		tools.setOnClick($("show-stream-button"), () => ui.showWindow($("stream-window")));
+		tools.setOnClick($("open-log-button"), () => ui.open("kvmd/log?seek=3600&follow=1", "_blank"));
+
+		ui.showWindow($("stream-window"));
+
+		new Session();
+	}
+}
diff --git a/web/js/mouse.js b/web/js/kvm/mouse.js
index 9f93a659..9f93a659 100644
--- a/web/js/mouse.js
+++ b/web/js/kvm/mouse.js
diff --git a/web/js/msd.js b/web/js/kvm/msd.js
index bbc86370..bbc86370 100644
--- a/web/js/msd.js
+++ b/web/js/kvm/msd.js
diff --git a/web/js/session.js b/web/js/kvm/session.js
index 9f726a1d..5a89813a 100644
--- a/web/js/session.js
+++ b/web/js/kvm/session.js
@@ -1,4 +1,4 @@
-function Session(hid, atx, msd, streamer) {
+function Session() {
 	// var self = this;
 
 	/********************************************************************************/
@@ -8,6 +8,11 @@ function Session(hid, atx, msd, streamer) {
 	var __ping_timer = null;
 	var __missed_heartbeats = 0;
 
+	var __hid = new Hid();
+	var __atx = new Atx();
+	var __msd = new Msd();
+	var __streamer = new Streamer();
+
 	var __init__ = function() {
 		$("link-led").title = "Not connected yet...";
 		__loadKvmdVersion();
@@ -53,10 +58,10 @@ function Session(hid, atx, msd, streamer) {
 		$("link-led").className = "led-green";
 		$("link-led").title = "Connected";
 		tools.debug("Session: socket opened:", event);
-		streamer.loadInitialState();
-		atx.loadInitialState();
-		msd.loadInitialState();
-		hid.setSocket(__ws);
+		__streamer.loadInitialState();
+		__atx.loadInitialState();
+		__msd.loadInitialState();
+		__hid.setSocket(__ws);
 		__missed_heartbeats = 0;
 		__ping_timer = setInterval(__pingServer, 1000);
 	};
@@ -68,11 +73,11 @@ function Session(hid, atx, msd, streamer) {
 			__missed_heartbeats = 0;
 		} else if (event.msg_type === "event") {
 			if (event.msg.event === "streamer_state") {
-				streamer.setState(event.msg.event_attrs);
+				__streamer.setState(event.msg.event_attrs);
 			} else if (event.msg.event === "atx_state") {
-				atx.setState(event.msg.event_attrs);
+				__atx.setState(event.msg.event_attrs);
 			} else if (event.msg.event === "msd_state") {
-				msd.setState(event.msg.event_attrs);
+				__msd.setState(event.msg.event_attrs);
 			}
 		}
 	};
@@ -93,9 +98,9 @@ function Session(hid, atx, msd, streamer) {
 			clearInterval(__ping_timer);
 			__ping_timer = null;
 		}
-		streamer.clearState();
-		atx.clearState();
-		hid.setSocket(null);
+		__streamer.clearState();
+		__atx.clearState();
+		__hid.setSocket(null);
 		__ws = null;
 		setTimeout(function() {
 			$("link-led").className = "led-yellow";
diff --git a/web/js/stream.js b/web/js/kvm/stream.js
index 630eaa25..630eaa25 100644
--- a/web/js/stream.js
+++ b/web/js/kvm/stream.js
diff --git a/web/js/main.js b/web/js/main.js
deleted file mode 100644
index d82939c9..00000000
--- a/web/js/main.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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 Hid(), new Atx(), new Msd(), new Streamer());
-	}
-}
diff --git a/web/js/ui.js b/web/js/ui.js
index 0c5d5888..754e80b0 100644
--- a/web/js/ui.js
+++ b/web/js/ui.js
@@ -5,7 +5,7 @@ function Ui() {
 
 	var __top_z_index = 0;
 	var __windows = [];
-	var __ctl_items = [];
+	var __menu_items = [];
 
 	var __init__ = function() {
 		Array.prototype.forEach.call(document.querySelectorAll("button"), function(el_button) {
@@ -14,9 +14,9 @@ function Ui() {
 			el_button.ontouchstart = function() {};
 		});
 
-		Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
+		Array.prototype.forEach.call($$("menu-item"), function(el_item) {
 			tools.setOnClick(el_item, () => __toggleMenu(el_item));
-			__ctl_items.push(el_item);
+			__menu_items.push(el_item);
 		});
 
 		Array.prototype.forEach.call($$("window"), function(el_window) {
@@ -37,13 +37,6 @@ function Ui() {
 
 		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")));
-		tools.setOnClick($("open-log-button"), () => window.open("kvmd/log?seek=3600&follow=1", "_blank"));
-
-		self.showWindow($("stream-window"));
 	};
 
 	/********************************************************************************/
@@ -127,7 +120,7 @@ function Ui() {
 		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
 			var view = self.getViewGeometry();
 			var rect = el_window.getBoundingClientRect();
-			el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+			el_window.style.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
 			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
 			el_window.setAttribute("data-centered", "");
 		}
@@ -139,7 +132,7 @@ function Ui() {
 
 	self.getViewGeometry = function() {
 		return {
-			top: $("ctl").clientHeight,
+			top: $("menu").clientHeight,
 			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
 			left: 0,
 			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
@@ -161,15 +154,15 @@ function Ui() {
 	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");
+		__menu_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".menu-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_item.classList.add("menu-item-selected");
 				el_menu.style.visibility = "visible";
 				all_hidden &= false;
 			} else {
-				el_item.classList.remove("ctl-item-selected");
+				el_item.classList.remove("menu-item-selected");
 				el_menu.style.visibility = "hidden";
 			}
 		});
@@ -190,15 +183,15 @@ function Ui() {
 
 	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");
+		__menu_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
+			el_item.classList.remove("menu-item-selected");
 			el_menu.style.visibility = "hidden";
 		});
 	};
 
 	var __globalMouseButtonHandler = function(event) {
-		if (!event.target.matches(".ctl-item")) {
+		if (!event.target.matches(".menu-item")) {
 			for (var el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
 				if (el_item.hasAttribute("data-force-hide-menu")) {
 					break;
@@ -216,7 +209,7 @@ function Ui() {
 		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.top = Math.max($("menu").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
 				el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
 				el_window.setAttribute("data-centered", "");
 			}