Index.html

﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DSS Group Project</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <script
      src="https://kit.fontawesome.com/ab2155e76b.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link href="App.css" rel="stylesheet" />
  </head>
  <body>
    <div class="jumbotron">
      <div class="container-fluid">
        <h1>Find the Best Route for Police Patrol</h1>
        <p>Group Four</p>
        <div class="col-xs-offset-2 col-xs-10">
          <div>
            <span>Select a file:</span>
            <!--accept : file's default filename extension only allow csv file-->
            <label class="btn btn-info btn-lg" style="margin-left: 5px">
              <input
                type="file"
                id="fileInput"
                accept=".csv"
                style="display: none"
              />
              Upload File
            </label>
            <!--the gray place : to display the detail in the data-->
            <pre id="fileDisplayArea"></pre>
            <button class="btn btn-info btn-lg" onclick="calcRoute();">
              Calculate Route
            </button>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div id="googleMap"></div>
        <div id="output"></div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtjZwK9QLH9Z-lLtWP6504JfG4SLB4GpY&libraries=places"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Main.js"></script>
  </body>
</html>