index.html

<html>

<head>
  <title>Roomie</title>
  <meta charset="utf-8">
  <!--     Fonts and icons     -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
  <link rel="shortcut icon" href="./public/img/favicon.ico" type="image/x-icon">
</head>

<body>  

  <nav class="navbar navbar-danger" role="navigation">
    <div class="container-fluid" id="nav">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
    		</button>
        <a class="navbar-brand" href="#">Roomie</a>
      </div>
      <div class="collapse navbar-collapse" id="navigation-doc">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a class="hover" id="btnStartVR">View in 3D</a>
          </li>
          <li>
            <a class="hover" id="btnStart">Start</a>
          </li>
          <li>
            <a class="hover" data-toggle="modal" data-target="#addItemModel"><i class="material-icons">add</i>Add New Furniture</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <br><br>

  <div id="ItemsInList">
    <h1 style="float: left">Furniture</h1>
    <table class="table" id="objectList">
      <thead>
      <tr>
        <th>Type</th>
        <th>Width</th>
        <th>Height</th>
        <th class="text-right">Actions</th>
      </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

    <div id="content">

    </div>
  </div>


  <div id="sliders" style="display:none">
    <h3 id="sliderWidthDisplayValue">Room Width</h3>
    <div class="slider slider-danger" id="sliderWidth"></div>
    <h3 id="sliderHeightDisplayValue">Room Length</h3>
    <div class="slider slider-danger" id="sliderHeight"></div>
  </div>


  <!-- Modal Core -->
  <div class="modal fade" id="addItemModel" tabindex="-1" role="dialog" aria-labelledby="addItemModel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Add Furniture</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-4">
              Type:
              <div class="radio">
                <label>
                <input type="radio" name="AddTypeInput" value="couch">
                  Couch
                </label>
              </div>
              <div class="radio">
                <label>
                <input type="radio" name="AddTypeInput" value="chair" checked="true">
                  Chair
                </label>
              </div>
              <div class="radio">
                <label>
                <input type="radio" name="AddTypeInput" value="table">
                  Table
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="AddTypeInput" value="lamp">
                  Lamp
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="AddTypeInput" value="plant">
                  Plant
                </label>
              </div>
            </div>
            <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Height</label>
                  <input id="AddHeight" type="number" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Width</label>
                  <input id="AddWidth" type="number" class="form-control">
                </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
          <button id="btnAddItem" type="button" class="btn btn-info btn-simple" data-dismiss="modal">Add Item</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Edits -->
  <div class="modal fade" id="editItemModel" tabindex="-1" role="dialog" aria-labelledby="editItemModel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Edit Furniture</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-4">
              Type:
              <div class="radio">
                <label>
                <input type="radio" name="EditTypeInput" value="Couch">
                  Couch
                </label>
              </div>
              <div class="radio">
                <label>
                <input type="radio" name="EditTypeInput" value="Chair">
                  Chair
                </label>
              </div>
              <div class="radio">
                <label>
                <input type="radio" name="EditTypeInput" value="Table">
                  Table
                </label>
              </div>
            </div>
            <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Height</label>
                  <input id="EditHeight" type="number" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group label-floating">
                  <label class="control-label">Width</label>
                  <input id="EditWidth"  class="form-control">
                </div>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-simple" data-dismiss="modal">Close</button>
          <button id="btnEditItem" type="button" class="btn btn-info btn-simple" data-dismiss="modal">Edit Item</button>
        </div>
      </div>
    </div>
  </div>

   <!-- Modal Edits -->
  <div class="modal fade" id="VRModel" tabindex="-1" role="dialog" aria-labelledby="VRModel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">View in VR</h4>
        </div>
        <div class="modal-body">
          <div class="VRView">      
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-info btn-simple" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <script src="public/bundle.js"></script>
</body>

</html>