<!-- project Name: Automated Traffic surveillance system -->
<!-- Author Name:  Deval Srivastava -->
<!-- Filename: home.ejs -->



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css">
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
    <script src="/semantic/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
    <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
    <script src="http://maximeh.github.io/leaflet.bouncemarker/bouncemarker.js"></script>
    <link rel="stylesheet" type="text/css" href="/home.css">
    <title>Eyantra</title>
  </head>
  <body>
    <div class="ui sidebar inverted left vertical menu ">
      <a class="item">
        home
      </a>
      <a href="/form" class="item">
        form
      </a>
      <a href="#" class="item">
        item 3
      </a>
    </div>
    <div class="pusher">
      <div class="ui top menu">
        <div class="item">
          <i class="sidebar icon large"></i>
        </div>
        <div class=" ui centered header item">
          Traffic surveillance system
        </div>
        <div class="right item">
          <div class="item">
            <div class="ui transparent icon input">
              <form action="/search" method="get">
                <input type="text" placeholder="Search" id="sinput" type="text" name="q">
                <i class="search link icon"></i>
              </form>
            </div>
          </div>
        </div>
    </div>
  <div class="ui grid container centered">
    <%# <div class="center aligned four wide column">
      <div class="ui centered calender">
        <div class="ui input left icon">
          <i class=" icon calender large"></i>
          <input type="text" name="calender" placeholder="date">
        </div>
      </div>
    </div> %>
    <div class="center aligned eight wide column">
      <h2 class="ui icon header">
        <i class="map outline icon"></i>
        <div class="content">
          Traffic Analytics
          <div class="sub header">
            Each map marker denotes an offense
          </div>
        </div>
      </h2>
    </div>
    <%# <div class="center aligned four wide column">
      <button type="button" name="back" class="circular basic ui icon button">
        <i class="icon arrow left"></i>
      </button>
      <button type="button" name="front" class="circular basic ui icon button">
        <i class="icon arrow right"></i>
      </button>
    </div> %>
  </div>
<br>
<br>
  <div class="ui one column centered grid">
    <div class=" column">
      <div id="mapid">
      </div>
    </div>
  </div>
    <div class="ui inverted stacked vertical footer segement ">
      <div class="ui container">
        <h2 class="ui center aligned header">
          <img src="/img/EyantraLogoLarge.png" alt="eyantra_logo">
        </h2>
      </div>
    </div>
  </div>
  </body>
  <script src="/home.js"></script>
</html>
