1<!DOCTYPE html>
2<html>
3	<head>
4		<title>Haiku Remote Desktop</title>
5		<script src="HaikuRemoteDesktop.js"></script>
6		<style type="text/css">
7			html, body {
8				margin: 0;
9				padding: 0;
10				height: 100%;
11			}
12
13			body, #connectForm {
14				display: flex;
15			}
16
17			body {
18				font-family: sans;
19				align-items: flex-start;
20				justify-content: center;
21			}
22
23			#connectForm {
24				flex-direction: column;
25				align-items: flex-start;
26			}
27
28			#connectForm div {
29				display: flex;
30				justify-content: space-between;
31				align-items: baseline;
32				width: 100%;
33			}
34
35			input, button {
36				margin: 1em;
37			}
38
39			input[type=number] {
40				width: 5em;
41			}
42
43			button {
44				align-self: flex-end;
45			}
46
47			.session {
48				display: none;
49			}
50
51			body.connect .session {
52				display: initial;
53			}
54
55			body.connect #connectForm {
56				display: none;
57			}
58		</style>
59	</head>
60	<body onload="init();">
61		<div id="connectForm">
62			<div>
63				<label for="targetAddress">Remote Host</label>
64				<input type="text" id="targetAddress"
65					value="ws://localhost:5000" />
66			</div>
67			<div>
68				<label for="width">Width</label>
69				<input type="number" id="width" value="800" />
70				<label for="height">Height</label>
71				<input type="number" id="height" value="600" />
72			</div>
73			<button id="connectButton" autofocus>Connect</button>
74		</div>
75	</body>
76</html>
77