<!doctype html>

<!-- File Upload Page by Michael Wheatman -->

<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="{{ url_for('static', filename='ColladaLoader.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='three.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='uploadscripts.js') }}"></script>

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='uploadstyles.css') }}">
</head>

<h1>Augmented Reality Object Uploader</h1>
<div style="overflow:hidden;height:500px;width:720px;">
  <div id="gmap_canvas" style="height:500px;width:720px;"></div>
  <style>#gmap_canvas img {
      max-width:none!important;
      background:none!important
    }
  </style>
</div>
<form action="" method="POST" enctype=multipart/form-data>
  <table>
    <tr>
      <td>Latitude:</td>
      <td><input type="text" name="latitude" id="lat"></td>
      <td>Longitude:</td>
      <td><input type="text" name="longitude" id="long"></td>
      <td>Altitude:</td>
      <td><input type="text" name="altitude" id="long"></td>
    </tr>
    <tr>
      <td>Pitch:</td>
      <td><input type="text" name="x_rot" id="lat"></td>
      <td>Roll:</td>
      <td><input type="text" name="y_rot" id="long"></td>
      <td>Yaw:</td>
      <td><input type="text" name="z_rot" id="long"></td>
    </tr>
    <tr>
      <td colspan="4">
        <input type="file" required="true" name="collada">
      </td>
    </tr>
  </table>
  <br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>
