design fix, refactoring

web/css/kvm/about.css

@@ -30,8 +30,8 @@ div#about textarea {
 	width: 100%;
 	height: 200px;
 	padding: 0;
-	color: var(--fg-color-normal);
+	color: var(--fg-color-light);
-	background-color: var(--bg-color-menu);
+	background-color: var(--bg-color-dark);
 	border: none;
 	border-radius: 4px;
 	outline: 0 !important;
@@ -42,11 +42,11 @@ div#about textarea {
 }
 
 div#about textarea::-moz-placeholder {
-	line-height: 150px;
+	line-height: 190px;
 	text-align: center;
 }
 div#about textarea::-webkit-input-placeholder {
-	line-height: 150px;
+	line-height: 190px;
 	text-align: center;
 }
 

web/css/kvm/hid.css

@@ -3,7 +3,7 @@ textarea#hid-pak-text {
 	resize: none;
 	width: 100%;
 	height: 40px;
-	color: var(--fg-color-dark);
+	color: var(--fg-color-intensive);
 	background-color: var(--bg-color-light);
 	border: none;
 	outline: 0 !important;

web/css/main.css

@@ -22,17 +22,34 @@ hr {
 }
 
 p.text {
-	display: table-cell;
 	text-align: justify;
 }
+p:not(:first-child).text {
+	margin-top: 0;
+}
+p:last-child.text {
+	margin-bottom: 0;
+}
 
-pre.code {
+div.code {
+	white-space: nowrap;
 	overflow-x: auto;
+	font-family: monospace;
+	border-radius: 4px;
 	color: var(--fg-color-dark);
 	background-color: var(--bg-color-dark);
 	padding: 10px;
 }
-pre.code span.code-comment {
+div.code::-webkit-scrollbar {
+    width: 8px;
+	height: 8px;
+}
+div.code::-webkit-scrollbar-thumb {
+	border-radius: 4px;
+	background: var(--fg-color-inactive);
+}
+
+div.code span.code-comment {
 	color: var(--fg-color-inactive);
 }
 

web/js/kvm/hid.js

@@ -141,13 +141,14 @@ function Hid() {
 					clipboard_codes.push(codes);
 				}
 			});
+			var time = __codes_delay * codes_count * 2 / 1000;
 
-			var confirm_msg = (
+			var confirm_msg = `
-				"You are going to automatically type " + codes_count
+				You are going to automatically type ${codes_count} characters from the system clipboard.
-				+ " characters from the system clipboard."
+				It will take ${time} seconds.<br>
-				+ " It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds.<br>"
+				<br>
-				+ "<br>Are you sure you want to continue?<br>"
+				Are you sure you want to continue?
-			);
+			`;
 
 			ui.confirm(confirm_msg).then(function(ok) {
 				if (ok) {

web/js/kvm/keyboard.js

@@ -83,7 +83,7 @@ function Keyboard() {
 		if (event.preventDefault) {
 			event.preventDefault();
 		}
-		var el_key = document.querySelector("[data-key='" + event.code + "']");
+		var el_key = document.querySelector(`[data-key='${event.code}']`);
 		if (el_key && !event.repeat) {
 			__commonHandler(el_key, state, "pressed");
 			if (__mac_cmd_hook) {
@@ -168,7 +168,8 @@ function Keyboard() {
 	};
 
 	var __resolveKeys = function(el_key) {
-		return document.querySelectorAll("[data-key='" + el_key.getAttribute("data-key") + "']");
+		var code = el_key.getAttribute("data-key");
+		return document.querySelectorAll(`[data-key='${code}']`);
 	};
 
 	var __sendKey = function(el_key, state) {

web/js/kvm/msd.js

@@ -73,7 +73,7 @@ function Msd() {
 			__applyState();
 		});
 		__applyState();
-		$("msd-switch-to-" + to + "-button").disabled = true;
+		$(`msd-switch-to-${to}-button`).disabled = true;
 	};
 
 	var __selectNewImageFile = function() {

web/js/kvm/session.js

@@ -15,13 +15,13 @@ function Session() {
 
 	var __init__ = function() {
 		$("link-led").title = "Not connected yet...";
-		__loadKvmdVersion();
+		__loadKvmdInfo();
 		__startPoller();
 	};
 
 	/********************************************************************************/
 
-	var __loadKvmdVersion = function() {
+	var __loadKvmdInfo = function() {
 		var http = tools.makeRequest("GET", "/kvmd/info", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
@@ -40,9 +40,9 @@ function Session() {
 						}
 					}
 					$("about-version-kvmd").innerHTML = info.version.kvmd;
-					$("about-version-streamer").innerHTML = info.version.streamer + " (" + info.streamer + ")";
+					$("about-version-streamer").innerHTML = `${info.version.streamer} (${info.streamer})`;
 				} else {
-					setTimeout(__loadKvmdVersion, 1000);
+					setTimeout(__loadKvmdInfo, 1000);
 				}
 			}
 		});
@@ -54,7 +54,8 @@ function Session() {
 		var http = tools.makeRequest("GET", "/ws_auth", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
-					__ws = new WebSocket((location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/kvmd/ws");
+					var proto = (location.protocol === "https:" ? "wss" : "ws");
+					__ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`);
 					__ws.onopen = __wsOpenHandler;
 					__ws.onmessage = __wsMessageHandler;
 					__ws.onerror = __wsErrorHandler;

web/js/kvm/stream.js

@@ -156,8 +156,8 @@ function Streamer() {
 		var el_grab = document.querySelector("#stream-window-header .window-grab");
 		var el_info = $("stream-info");
 		if (online) {
-			var fps_suffix = (__client_fps >= 0 ? " / " + __client_fps + " fps" : "");
+			var fps_suffix = (__client_fps >= 0 ? ` / ${__client_fps} fps` : "");
-			el_grab.innerHTML = el_info.innerHTML = "Stream – " + __resolution.width + "x" + __resolution.height + fps_suffix;
+			el_grab.innerHTML = el_info.innerHTML = `Stream – ${__resolution.width}x${__resolution.height}${fps_suffix}`;
 		} else {
 			el_grab.innerHTML = el_info.innerHTML = "Stream – offline";
 		}
@@ -183,7 +183,7 @@ function Streamer() {
 	};
 
 	var __sendParam = function(name, value) {
-		var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?" + name + "=" + value, function() {
+		var http = tools.makeRequest("POST", `/kvmd/streamer/set_params?${name}=${value}`, function() {
 			if (http.readyState === 4) {
 				if (http.status !== 200) {
 					ui.error("Can't configure stream:<br>", http.responseText);

web/kvm/index.html

@@ -576,8 +576,8 @@
 			<textarea readonly placeholder="No data" id="about-meta"></textarea>
 			<hr>
 			<p class="text">
-				Please visit our site <a target="_blank" href="https://github.com/pi-kvm">https://github.com/pi-kvm</a> to get documentation,
+				Full documentation, source code, hardware schematics and legal information
-				source codes, hardware schematics and legal information.
+				can be found in our <a target="_blank" href="https://github.com/pi-kvm">official website</a>.
 			</p>
 		</div>
 	</div>