client/index.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=320, initial-scale=1"/>
	<title>jsmpeg-vnc</title>
	<style type="text/css">
		body {
			background: #111;
			text-align: center;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			color: #555;
		}
		body.desktop .mobile-only { display: none; }
		body.mobile .desktop-only { display: none; }

		#videoCanvas {
			/* Always stretch the canvas to 100%, regardless of its
			internal size. */
			width: 100%;
			height: 100%;
		}
		
		.keys {
			position: relative;
		}
		.key {
			color: #fff;
			float: left;
			width: 72px;
			height: 48px;
			padding-top: 24px;
			background-color: #5bcbeb;
			position: absolute;
		}
		.key-small {
			height: 28px;
			padding-top: 8px;
		}
		#key-up {left: 40px; top: 0px; }
		#key-down {left: 40px; top: 88px; }
		#key-left {left: 160px; top: 0px; }
		#key-right {left: 240px; top: 0px; }
		#key-esc {left: 160px; top: 124px; }
		#key-enter {left: 240px; top: 124px; }
	</style>
</head>
<body>
	<canvas id="videoCanvas" width="640" height="480"></canvas>

	<div class="keys mobile-only">
		<div class="key" data-code="38" id="key-up">UP</div>
		<div class="key" data-code="40" id="key-down">DOWN</div>
		<div class="key" data-code="39" id="key-right">RIGHT</div>
		<div class="key" data-code="37" id="key-left">LEFT</div>
		
		<div class="key key-small" data-code="27" id="key-esc">ESC</div>
		<div class="key key-small" data-code="13" id="key-enter">ENTER</div>
	</div>

	<script type="text/javascript" src="jsmpg.js"></script>
	<script type="text/javascript" src="jsmpg-vnc.js"></script>
</body>
</html>