virtual keyboard prototype

1 files changed, 137 insertions, 4 deletions

diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 23efd902..05507b07 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -9,7 +9,13 @@
 	<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/leds.css">
+	<link rel="stylesheet" href="css/stream.css">
+	<link rel="stylesheet" href="css/msd.css">
+	<link rel="stylesheet" href="css/keyboard.css">
 </head>
 
 <script src="js/tools.js"></script>
@@ -162,14 +168,141 @@
 		</li>
 	</ul>
 
-	<div class="window">
+	<div class="window" style="left:50%; top:70px">
 		<div class="window-header">Stream</div>
+		<!-- <hr class="window-sep"> -->
 		<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
 	</div>
 
-	<ul id="bottom">
-		<li id="kvmd-version" class="bottom-left"></li>
-		<li class="bottom-right"><a target="_blank" href="https://github.com/mdevaev/pi-kvm">Pi-KVM Project</a></li>
+	<div class="window" style="left:75%; top:60%">
+		<div class="window-header">Virtual Keyboard</div>
+		<hr class="window-sep">
+		<div id="keyboard">
+			<div class="keyboard-block">
+				<div class="keyboard-row">
+					<div id="Escape" class="key small"><p>Esc</p></div>
+					<div class="empty-key" style="width:24px"></div>
+					<div id="F1" class="key small"><p>F1</p></div>
+					<div id="F2" class="key small"><p>F2</p></div>
+					<div id="F3" class="key small"><p>F3</p></div>
+					<div id="F4" class="key small"><p>F4</p></div>
+					<div class="empty-key" style="width:10px"></div>
+					<div id="F5" class="key small"><p>F5</p></div>
+					<div id="F6" class="key small"><p>F6</p></div>
+					<div id="F7" class="key small"><p>F7</p></div>
+					<div id="F8" class="key small"><p>F8</p></div>
+					<div class="empty-key" style="width:10px"></div>
+					<div id="F9" class="key small"><p>F9</p></div>
+					<div id="F10" class="key small"><p>F10</p></div>
+					<div id="F11" class="key small"><p>F11</p></div>
+					<div id="F12" class="key small"><p>F12</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="Backquote" class="key"><p>~<br>`</p></div>
+					<div id="Digit1" class="key"><p>!<br>1</p></div>
+					<div id="Digit2" class="key"><p>@<br>2</p></div>
+					<div id="Digit3" class="key"><p>#<br>3</p></div>
+					<div id="Digit4" class="key"><p>$<br>4</p></div>
+					<div id="Digit5" class="key"><p>%<br>5</p></div>
+					<div id="Digit6" class="key"><p>^<br>6</p></div>
+					<div id="Digit7" class="key"><p>&amp;<br>7</p></div>
+					<div id="Digit8" class="key"><p>*<br>8</p></div>
+					<div id="Digit9" class="key"><p>(<br>9</p></div>
+					<div id="Digit0" class="key"><p>)<br>0</p></div>
+					<div id="Minus" class="key"><p>_<br>-</p></div>
+					<div id="Equal" class="key"><p>+<br>=</p></div>
+					<div id="Backspace" class="key wide-2 right"><p>&#8612;</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="Tab" class="key wide-2 left"><p>&#8676;<br>&#8677;</p></div>
+					<div id="KeyQ" class="key single"><p>Q</p></div>
+					<div id="KeyW" class="key single"><p>W</p></div>
+					<div id="KeyE" class="key single"><p>E</p></div>
+					<div id="KeyR" class="key single"><p>R</p></div>
+					<div id="KeyT" class="key single"><p>T</p></div>
+					<div id="KeyY" class="key single"><p>Y</p></div>
+					<div id="KeyU" class="key single"><p>U</p></div>
+					<div id="KeyI" class="key single"><p>I</p></div>
+					<div id="KeyO" class="key single"><p>O</p></div>
+					<div id="KeyP" class="key single"><p>P</p></div>
+					<div id="BracketLeft" class="key"><p>{<br>[</p></div>
+					<div id="BracketRight" class="key"><p>}<br>]</p></div>
+					<div id="Backslash" class="key"><p>|<br>\</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="CapsLock" class="key wide-3 left small"><p>Caps Lock</p></div>
+					<div id="KeyA" class="key single"><p>A</p></div>
+					<div id="KeyS" class="key single"><p>S</p></div>
+					<div id="KeyD" class="key single"><p>D</p></div>
+					<div id="KeyF" class="key single"><p>F</p></div>
+					<div id="KeyG" class="key single"><p>G</p></div>
+					<div id="KeyH" class="key single"><p>H</p></div>
+					<div id="KeyJ" class="key single"><p>J</p></div>
+					<div id="KeyK" class="key single"><p>K</p></div>
+					<div id="KeyL" class="key single"><p>L</p></div>
+					<div id="Semicolon" class="key"><p>:<br>;</p></div>
+					<div id="Quote" class="key"><p>"<br>'</p></div>
+					<div id="Enter" class="key wide-3 right small"><p>Enter<br>&crarr;</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="ShiftLeft" class="key wide-4 left small"><p>Shift</p></div>
+					<div id="KeyZ" class="key single"><p>Z</p></div>
+					<div id="KeyX" class="key single"><p>X</p></div>
+					<div id="KeyC" class="key single"><p>C</p></div>
+					<div id="KeyV" class="key single"><p>V</p></div>
+					<div id="KeyB" class="key single"><p>B</p></div>
+					<div id="KeyN" class="key single"><p>N</p></div>
+					<div id="KeyM" class="key single"><p>M</p></div>
+					<div id="Comma" class="key"><p>&lt;<br>,</p></div>
+					<div id="Period" class="key"><p>&gt;<br>.</p></div>
+					<div id="Slash" class="key"><p>?<br>/</p></div>
+					<div id="ShiftRight" class="key wide-4 right small"><p>Shift</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="ControlLeft" class="key wide-1 left small"><p>Ctrl</p></div>
+					<div id="MetaLeft" class="key wide-1 left small"><p>Win</p></div>
+					<div id="AltLeft" class="key wide-1 left small"><p>Alt</p></div>
+					<div id="Space" class="key wide-5"></div>
+					<div id="AltRight" class="key wide-1 right small"><p>Alt</p></div>
+					<div id="MetaRight" class="key wide-1 right small"><p>Win</p></div>
+					<div id="ControlRight" class="key wide-1 right small"><p>Ctrl</p></div>
+				</div>
+			</div>
+			<div class="keyboard-block">
+				<div class="keyboard-row">
+					<div class="empty-key"></div>
+					<div class="empty-key"></div>
+					<div id="PrintScreen" class="key small"><p>PrtSc</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="Insert" class="key small"><p>Ins</p></div>
+					<div id="Home" class="key small"><p>Home</p></div>
+					<div id="PageUp" class="key small"><p>PgUp</p></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="Delete" class="key small"><p>Del</p></div>
+					<div id="End" class="key small"><p>End</p></div>
+					<div id="PageDown" class="key small"><p>PgDn</p></div>
+				</div>
+				<div class="keyboard-row">
+				</div>
+				<div class="keyboard-row">
+					<div class="empty-key"></div>
+					<div id="ArrowUp" class="key"><p>&uarr;</p></div>
+					<div class="empty-key"></div>
+				</div>
+				<div class="keyboard-row">
+					<div id="ArrowLeft" class="key"><p>&larr;</p></div>
+					<div id="ArrowDown" class="key"><p>&darr;</p></div>
+					<div id="ArrowRight" class="key"><p>&rarr;</p></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<ul id="footer">
+		<li id="kvmd-version" class="footer-left"></li>
+		<li class="footer-right"><a target="_blank" href="https://github.com/mdevaev/pi-kvm">Pi-KVM Project</a></li>
 	</ul>
 </body>
 </html>