about window

kvmd/web/css/about.css

@@ -0,0 +1,24 @@
+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;
+}
+div#about p a {
+	text-decoration: underline dotted;
+	color: var(--fg-color-normal);
+}
+div#about p a:hover {
+	text-decoration: underline;
+}

kvmd/web/css/windows.css

@@ -11,6 +11,7 @@ div.window {
 	box-sizing: border-box;
 	box-shadow: var(--big-shadow);
 	display: inline-block;
+	white-space: nowrap;
 	background-color: var(--bg-color-light);
 	padding: 30px 9px 9px 9px;
 	-webkit-transform: translate(-50%, -50%);

kvmd/web/index.html

@@ -16,6 +16,7 @@
 	<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">
 </head>
 
 <script src="js/tools.js"></script>
@@ -44,8 +45,9 @@
 					System &#8628;
 				</a>
 				<div class="ctl-dropdown-content" style="display:none">
-					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
 					<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button>
+					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
+					<button onclick="ui.showWindow('about-window')">&bull; Show about</button>
 					<hr>
 					<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
 				</div>
@@ -204,7 +206,7 @@
 		<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
 	</div>
 
-	<div id="keyboard-window" class="window">
+	<div id="keyboard-window" class="window" style="display:none">
 		<div class="window-header">
 			<div class="window-grab">Virtual Keyboard</div>
 			<button class="window-button-close">&times;</button>
@@ -331,6 +333,43 @@
 		</div>
 	</div>
 
+	<div id="about-window" class="window" style="display:none">
+		<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>

kvmd/web/js/session.js

@@ -7,7 +7,11 @@ var session = new function() {
 		var http = tools.makeRequest("GET", "/kvmd/info", function() {
 			if (http.readyState === 4) {
 				if (http.status === 200) {
-					$("kvmd-version").innerHTML = "kvmd " + JSON.parse(http.responseText).result.version.kvmd;
+					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(session.loadKvmdVersion, 1000);
 				}