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