src/tools/html5_remote_desktop/HaikuRemoteDesktop.html

   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>