<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebGL Room</title>

<link rel="stylesheet" type="text/css" href="roomStyle.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="three.min.js"></script>
<script src="hammer.min.js"></script>
<script type="text/javascript" src="Reflector.js"></script>
<script type="text/javascript" src="obtainRoomDefinition-min.js"></script>
<script type="text/javascript" src="roomController-min.js"></script>
</head>
<body>
   <canvas id="webglcanvas" style="border: none;background-color:#000000" width="858" height="550"></canvas>
<form id="form">

  <div class="tabContent"> 
    <div id="openTab">
      <fieldset class="openFieldset">
        <legend>Open a room from cloud storage</legend>
        <select id="availableRooms" size="6">
        </select>
      </fieldset>
      <fieldset id="howToMove">
        <legend><b>How to move within the room</b></legend>
        <font face="arial"><small>
        <label><u>If using a <b>phone or tablet</b>:</u> &nbsp; Drag your finger to move</label>
        <br>
        <label><u>If using a <b>mouse</b>:</u> &nbsp; Hold down the left button and drag the mouse</label>
        <br>
        <label><u>If using a <b>keyboard</b>:</u> &#8593;: Move forward,&nbsp; &#8595;: Move backward,</label>
        <br>
        <label>&nbsp;&nbsp;&nbsp;&nbsp; &#8592;: Turn left,&nbsp; &#8594;: Turn right, &nbsp;<b>a</b>: Move left,&nbsp; <b>d</b>: Move right,</label>
        <br>
        <label>&nbsp;&nbsp;&nbsp;&nbsp;<b>SPACE</b>: Become taller,&nbsp; <b>c</b>: Become shorter,&nbsp; <b>r</b>: Regular height,</label>
        <br>
        <label>&nbsp;&nbsp;&nbsp;&nbsp;<b>PGDN</b>: Look up,&nbsp; <b>DEL</b>: Look down,&nbsp; <b>END</b>: Look straight ahead</label>
      </fieldset>
      <br><br>
      &nbsp;<a href="roomHelp.html" target="_blank">Help</a>
      <br>
    </div>
   <div id="mobileKeyboard" class="hidden">
      <br>Click below to access the keyboard<br>
      <input type="text" />
   </div>
</form>
</body>
</html>