ericmizuta/default.heatmap.js

## default.heatmap.js
function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
  var locations = [
{lat: -9.881, lng: -36.23},
{lat: -9.442, lng: -35.849},
{lat: -30.166, lng: -55.003},
{lat: -30.167, lng: -55.02},
{lat: -23.625, lng: -49.041},
{lat: -20.087, lng: -54.659},
{lat: -20.088, lng: -54.671},
{lat: -12.36, lng: -49.799},
{lat: -12.344, lng: -49.808},
{lat: -11.056, lng: -56.306},
{lat: -11.058, lng: -56.316},
{lat: -11.045, lng: -56.296},
{lat: -11.047, lng: -56.307},
{lat: -11.048, lng: -56.318},
{lat: -5.506, lng: -47.614},
{lat: -5.502, lng: -47.62},
{lat: -4.692, lng: -45.496},
{lat: -4.688, lng: -45.504},
{lat: -4.885, lng: -47.734},
{lat: -4.414, lng: -46.294},
{lat: -4.398, lng: -46.297},
{lat: -4.179, lng: -48.582},
{lat: -4.18, lng: -48.566},
{lat: -4.023, lng: -50.238},
{lat: -4.011, lng: -50.239},
{lat: -4.012, lng: -50.474},
{lat: -3.826, lng: -50.068},
{lat: -3.649, lng: -50.271},
{lat: -3.637, lng: -50.273},
{lat: -3.64, lng: -50.288},
{lat: -3.7, lng: -51.08},
{lat: -3.496, lng: -50.104},
{lat: -3.482, lng: -50.172},
{lat: -3.488, lng: -50.177},
{lat: -3.435, lng: -50.528},
{lat: -3.889, lng: -53.663},
{lat: -3.382, lng: -50.249},
{lat: -3.282, lng: -50.064},
{lat: -3.286, lng: -50.053},
{lat: -3.288, lng: -50.069},
{lat: -3.259, lng: -49.954},
{lat: -3.227, lng: -50.146},
{lat: -3.229, lng: -50.162},
{lat: -3.316, lng: -50.809},
{lat: -3.221, lng: -50.153},
{lat: -3.315, lng: -50.801},
{lat: -3.718, lng: -53.75},
{lat: -3.766, lng: -54.082},
{lat: -2.916, lng: -48.621},
{lat: -2.802, lng: -48.718},
{lat: -3.335, lng: -52.436},
{lat: -3.325, lng: -52.438},
{lat: -3.48, lng: -53.949},
{lat: -3.481, lng: -53.958},
{lat: -3.314, lng: -53.063},
{lat: -2.563, lng: -48.104},
{lat: -2.566, lng: -48.129},
{lat: -3.42, lng: -53.86},
{lat: -2.559, lng: -48.112},
{lat: -2.563, lng: -48.136},
{lat: -3.331, lng: -53.948},
{lat: -2.898, lng: -51.475},
{lat: -3.152, lng: -55.839},
{lat: -2.082, lng: -52.036},
{lat: -2.084, lng: -52.049},
{lat: -1.814, lng: -53.807},
{lat: -1.854, lng: -55.258},
{lat: -1.63, lng: -54.007},
{lat: -1.631, lng: -54.017},
{lat: 1.855, lng: -50.504},
{lat: 1.852, lng: -50.522},
{lat: 1.855, lng: -50.51},
{lat: 1.832, lng: -55.865},
{lat: 1.831, lng: -55.874},
{lat: 4.52, lng: -55.391},
{lat: -34.108, lng: -70.461},
{lat: -33.77, lng: -70.926},
{lat: -52.878, lng: -68.86},
{lat: -9.874, lng: -36.216},
{lat: -25.442, lng: -42.746},
{lat: -2.01, lng: -78.336},
{lat: -2, lng: -78.338},
{lat: 1.872, lng: -55.813},
{lat: -0.802, lng: -47.195},
{lat: -0.805, lng: -47.174},
{lat: -1.951, lng: -50.731},
{lat: -2.563, lng: -48.12},
{lat: -2.566, lng: -48.101},
{lat: -1.813, lng: -53.808},
{lat: -2.079, lng: -52.041},
{lat: -2.088, lng: -52.042},
{lat: -2.915, lng: -48.609},
{lat: -3.255, lng: -48.938},
{lat: -3.248, lng: -48.942},
{lat: -3.25, lng: -48.926},
{lat: -3.329, lng: -52.437},
{lat: -3.636, lng: -50.276},
{lat: -3.638, lng: -50.262},
{lat: -3.649, lng: -50.264},
{lat: -3.921, lng: -49.147},
{lat: -3.923, lng: -49.131},
{lat: -3.696, lng: -51.075},
{lat: -4.396, lng: -46.284},
{lat: -4.411, lng: -46.285},
{lat: -4.408, lng: -46.292},
{lat: -4.411, lng: -46.264},
{lat: -3.416, lng: -53.859},
{lat: -3.802, lng: -51.265},
{lat: -3.478, lng: -53.947},
{lat: -4.691, lng: -45.494},
{lat: -3.889, lng: -51.872},
{lat: -17.662, lng: -60.909},
{lat: -17.664, lng: -60.897},
{lat: -17.666, lng: -60.885},
{lat: -18.033, lng: -61.823},
{lat: -18.035, lng: -61.809},
{lat: -21.177, lng: -55.59},
{lat: -23.049, lng: -53.019},
{lat: -30.577, lng: -59.464},
{lat: -30.579, lng: -59.453},
{lat: 11.623, lng: -70.208},
{lat: -2.001, lng: -78.331},
{lat: -8.207, lng: -38.657},
{lat: -7.333, lng: -44.897},
{lat: -7.336, lng: -44.878},
{lat: -7.334, lng: -44.883},
{lat: -9.054, lng: -35.696},
{lat: -8.013, lng: -43.056},
{lat: -8.016, lng: -43.048},
{lat: -9.215, lng: -35.636},
{lat: -9.217, lng: -35.624},
{lat: -10.076, lng: -42.212},
{lat: -10.076, lng: -42.206},
{lat: -10.661, lng: -40.788},
{lat: -10.86, lng: -40.08},
{lat: -10.912, lng: -40.103},
{lat: -10.89, lng: -41.043},
{lat: -11.4, lng: -42.386},
{lat: -11.995, lng: -38.438},
{lat: -11.495, lng: -42.429},
{lat: -11.595, lng: -42.77},
{lat: -11.597, lng: -42.758},
{lat: -11.812, lng: -42.436},
{lat: -11.949, lng: -42.155},
{lat: -11.95, lng: -42.144},
{lat: -12.131, lng: -41.052},
{lat: -12.234, lng: -40.916},
{lat: -12.357, lng: -40.167},
{lat: -12.359, lng: -40.158},
{lat: -12.065, lng: -42.19},
{lat: -12.078, lng: -42.237},
{lat: -12.302, lng: -40.78},
{lat: -12.622, lng: -40.854},
{lat: -12.623, lng: -40.845},
{lat: -12.538, lng: -42.243},
{lat: -12.575, lng: -42.335},
{lat: -12.092, lng: -45.496},
{lat: -12.096, lng: -45.478},
{lat: -12.817, lng: -41.26},
{lat: -12.875, lng: -42.313},
{lat: -12.322, lng: -45.846},
{lat: -12.322, lng: -45.853},
{lat: -13.596, lng: -39.825},
{lat: -13.939, lng: -39.996},
{lat: -14.292, lng: -41.442},
{lat: -13.933, lng: -45.823},
{lat: -14.052, lng: -45.667},
{lat: -24.201, lng: -49.176},
{lat: -25.606, lng: -42.824},
{lat: -2.399, lng: -44.913},
{lat: -2.402, lng: -44.919},
{lat: -3.543, lng: -39.774},
{lat: -3.545, lng: -39.764},
{lat: -3.105, lng: -43.247},
{lat: -3.108, lng: -43.255}
]


$(document).ready(function(){

  $(".login-toggle").click(function(){
    $(".content-login-v2").toggle(400);
  });

  $(".ham").click(function(){
    $("ul.nav.navbar-nav").toggle(400);
    $(".navbar-header span p").toggle(50);
  });
});

## default.js


var locX, locY = 0;


$(document).ready(function(){

  $(".login-toggle").click(function(){
    $(".content-login-v2").toggle(400);
  });

  $(".ham").click(function(){
    $("ul.nav.navbar-nav").toggle(400);
    $(".navbar-header span p").toggle(50);
  });

 var cont1 = $( "p.infocord" );
        var arry = [];

        for ( var i = 1; i < cont1.length + 1; i++ ) {
            arry.push({
               lat: parseFloat($("p.infocord:nth-of-type(" + i + ")").text()),
               lng: parseFloat($("span.cord2:nth-of-type(" + i + ")").text())
            });
          }

        console.log(arry)

//Get user location


navigator.geolocation.watchPosition(logPosition);
function logPosition(position) {
  // console.log(position);
  // log(aaa);

  var uluru = {lat: position.coords.latitude, lng: position.coords.longitude};

  locX = position.coords.latitude;
  locY = position.coords.longitude;

  map = new google.maps.Map(document.getElementById('map'), {
  center: uluru,
  zoom: 14
  });

  var marker = new google.maps.Marker({
    position: uluru,
     map: map
   });

   // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = arry;

});


$(document).on('click','#reportbtn',function(e) {
  var data ="Cli_CoordX=" + locX + "&" + "Cli_CoordY=" + locY;
  console.log(data)
  $.ajax({
         data: data,
         type: "post",
         url: "insert.php",
         success: function(data){
              alert("Data Save: " + locX);
         }
});
 });

## heatmap.php
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Space Hero</title>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <!--Maps--->

      <script src="defaultheatmap.js"></script>

      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      window.dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-33848682-1');
    </script>

    <meta charset="utf-8">
    <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
    <meta name="author" content="//samdutton.com">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
    <meta itemprop="image" content="/images/icons/icon192.png">
    <meta id="theme-color" name="theme-color" content="#fff">


  <link rel="stylesheet" type="text/css" href="home.css">

    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>

    <?php
      $servername = "localhost";
      $username = "id7311462_ericmizuta";
      $password = "eric1234";
      $dbname   = "id7311462_spacechimps";

      // Create connection
      $conn = new mysqli($servername, $username, $password, $dbname);

      // Check connection
      if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
      }


      $sql = "SELECT Cli_CoordX, Cli_CoordY FROM Cliente";

      $result = $conn->query($sql);

      if ($result->num_rows > 0) {
          // output data of each row
          while($row = $result->fetch_assoc()) {

              echo "<p class='infocord'>".$row["Cli_CoordX"]."</p>";
              echo "<span class='cord2'>" .$row["Cli_CoordY"]."</span>";

          }

      } else {
          echo "0 results";
      }
      $conn->close();
    ?>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="firepin.png" width="40px" height="40px"></a>
      <span><p>Space Hero</p></span>
      <div class="ham">
          <img src="hamburger.png" width="40px" height="40px">
      </div>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Space Hero</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Wildfire history <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#"> Wildfire in your location  </a></li>
          <li><a href="#"> Nacional records </a></li>
          <li><a href="#"> Environmental impact </a></li>
        </ul>
      </li>
      <li><a href="#">Ranking</a></li>
      <li><a href="#">About us</a></li>


    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li class="login-toggle">
        <a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a>
      </li>

      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>

    <div class="content-login-v2" style="display: none;">
          <div class="center-content-login">
                  <div class="login-modal">
                      <h2 class="title-login">Create your new account</h2>
                      <h3 class="sub-title-login"></h3>
                      <div class="email-box">
                        <p>Enter your E-mail </p>
                        <input name="email" id="email" title="Email" value="" type="text">
                      </div>
                      <div class="password-box">
                          <p> Enter your Password </p>
                          <input name="email" id="email" title="Email" value="" type="text">
                          <button type="submit" title="Submit" class="button btn-loginv2 btn btn-default">Continue</button>
                      </div>
                      <p class="style-line"><span>Login with</span></p>
                  </div>
                  <div class="login-buttons">
                      <button type="button" title="facebook-login" class="button btn btn-default facebook-login"><span></span>Facebook</button>
                      <button type="button" title="gmail-login" class="button btn btn-default gmail-login"><span></span>Gmail</button>
                  </div>
                  <a href="#" class="help">Need help?</a>
            </div>
          </div>
  </div>
</nav>

  <h4> Be a hero, the word need you!</h4>
    <p class="space-hero"> Space Hero is a crowdsourcing web app, thats why, he needs you to exist. </p>

<p class="botoesemergencia">
 <button type="button" class="btn btn-danger" id="reportbtn">Report an emergency</button>
    <button style="margin:8px;" type="button" class="btn btn-warning">Verify incident</button>
</p>

<div class="container">
    <div class="mapa">

      <div id="map" style="width:100%;height:400px;"></div>


    </div>
</div>

<div class="container fotos-funcionalidade">
  <h2 class="progress-title">Coming soon</h2>
      <div class="logos">
        <img class="col-xs-4" src="pinwind.png">
        <img class="col-xs-4" src="aquapin.jpg">
        <img class="col-xs-4" src="pinthiev.png">
      </div>
</div>
<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70%
    </div>
  </div>
</div>
<div class="container footer-container">
  <div class="col-xs-12 col-md-3 footer-imagem">
    <img class="foto-nasa" src="nasa.jpg" width="200" height="200">
  </div>
  <div class="col-xs-12 col-md-9 footer-developers">
    <div class="footer-time">
      <h4>Developed by:</h4>
      <p>Alex Barbosa</p>
      <p>Eric Mizuta</p>
      <p>Luiz Guilherme</p>
      <p>Marcos Ewbank</p>
      <p>Otavio Glycerio</p>
    </div>
      <div class="footer-texto">
        <h4>SpaceChimps</h4>
        <p>#SpaceAppsSP</p>
        <p>#SpaceApps</p>
      </div>
  </div>
</div>


    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SSFUwIdOxIZcxbXS3kFPQYTakqPP6Ek&callback=initMap">
    </script>
  </body>
</html>


## home.css
body{
    background-color:#fff;
    color: white;
}

p {
    width: 19%;
    display: inline-block;
    text-align: center;
    float: none;
    font-size: 17.7px;
    text-align: center;
    color: black;
}

h4 {
text-align: center;
    color: black;
    font-size: 30px;
}
.footer-container {
    border-top: 1px solid #ccc;
}

.progress-bar {
    background: #FF8F30;
}

h2.progress-title {
    text-align: center;
    color: black;
}

.footer-imagem {
    display: inline-flex;
}

.footer-imagem img{
    display: block;
    margin: auto;
}

.footer-imagem h4 {
    width: 100%;
}

.footer-imagem p {
    width: 40%;
}

img.logo2img {
    position: relative;
    left: 50%;
    margin-left: -125px;
    width: 250px;
}

p.botoesemergencia {
    width: 100%;
}

p.space-hero {
    width: 100%;
}

p.infocord{
    display:none;
}
span.cord2{
    display: none;
}
.navbar-brand>img {
    position: relative;
    display: block;
    top: -11px;
}

.navbar-nav li:hover .content-login-v2 {
    display:block;
}

 .container{
	margin: 10px auto;
}
 h2.title-login{
	    font-size: 27px;
    color: white;
    margin-top: 70px;
    margin-bottom: 30px;
    position: relative;
}
 h3.sub-title-login{
	font-size: 16px;
	color: white;
	margin-bottom: 15px;
}

.content-login-v2 {
    float: left !important;
    width: 100% !important;
    margin-top: 20px;
    margin-bottom: 40px;
}
.ham {
    height: 50px;
    display: block;
    float: right;
}
.ham img{
    height: 50px;
    margin-right: 10px;
}

 .btn-back-v2{
float: left;
margin-top: 20px;
color: #b3b3b3;
text-decoration: underline;
font-weight: 600;
}
 input,
 .btn-loginv2{
width: 50%;
}
 input{
border-radius: 4px;
margin-bottom: 15px;
height: 40px;
padding-left: 10px;
}
 .btn-loginv2{border-color: #FF8F30;padding: 11.5px;color: #fff;font-size: 15px;line-height: 15px;font-family: Arial;font-weight: 700;box-shadow: 0 3px 0 0 #007299;background-color: #FF8F30;border-color: #f68e1e;border-radius: 4px;margin-bottom: 15px;box-shadow: none;}
 .center-content-login{float: none;text-align: center;border: 1px solid #00000000;border-radius:4px;border: 1px solid;width: 700px;position: relative;background: #080808;left: 50%;margin-left: -350px;}
 .login-modal p{
color: white;
font-size: 14px;
line-height: 18px;
padding: 0 30px;
}
 .login-modal .style-line,
  .line{
color: #7e7e7e;
}
 .login-modal .style-line{margin-bottom: 0;padding: 10px 20px;}
 .login-modal .style-line span{color:#f68e1e;position: relative;padding: 0px 30px;}
 .login-modal .line{
padding: 0;
}
 .login-buttons{padding: 0px 70px;}
 .login-buttons .button{
width: 60%;
height: 40px;
margin: 5px 0;
font-size: 14px;
color: #fff;
letter-spacing: 0.3px;
font-weight: 600;
}
 .login-buttons .button.facebook-login{
background-color: #3c5898;
}
 .login-buttons .button.facebook-login span{
float: left;
width: 20%;
border-right: 1px solid #fff;
}
 .login-buttons .button.facebook-login svg{
fill: #fff;
float: left;
}
 .login-buttons .button.gmail-login{
background-color: #d44638;
}
 .login-buttons .button.gmail-login span{
float: left;
width: 20%;
border-right: 1px solid #fff;
}
 .login-buttons .button.gmail-login svg{
fill: #fff;
float: left;
}
 .center-content-login a.help{
color: #f68e1e;
margin: 10px 0;
display: block;
}

@media (max-width: 768px){
    ul.nav.navbar-nav{
        display: none;
    }
    .navbar-header span p{
        color: #fff;
        float: left;
        margin: 15px 0 0 -10px;
    }
}

@media (min-width: 768px){
    .ham {
        display: none;
    }
    .navbar-header span p{
        display: none;
    }
}
 .center-content-login a.help{color: #f68e1e;margin: 10px 0;display: block;}

 .footer-texto {
    text-align: center;
}

## index.php
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Space Hero</title>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


  <!--Maps--->

      <script src="default.js"></script>

      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      window.dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-33848682-1');
    </script>

    <meta charset="utf-8">
    <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
    <meta name="author" content="//samdutton.com">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
    <meta itemprop="image" content="/images/icons/icon192.png">
    <meta id="theme-color" name="theme-color" content="#fff">


  <link rel="stylesheet" type="text/css" href="home.css">

    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>

    <?php
      $servername = "localhost";
      $username = "id7311462_ericmizuta";
      $password = "eric1234";
      $dbname   = "id7311462_spacechimps";

      // Create connection
      $conn = new mysqli($servername, $username, $password, $dbname);

      // Check connection
      if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
      }


      $sql = "SELECT Cli_CoordX, Cli_CoordY FROM Cliente";

      $result = $conn->query($sql);

      if ($result->num_rows > 0) {
          // output data of each row
          while($row = $result->fetch_assoc()) {

              echo "<p class='infocord'>".$row["Cli_CoordX"]."</p>";
              echo "<span class='cord2'>" .$row["Cli_CoordY"]."</span>";

          }

      } else {
          echo "0 results";
      }
      $conn->close();
    ?>


<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="firepin.png" width="40px" height="40px"></a>
      <span><p>Space Hero</p></span>
      <div class="ham">
          <img src="hamburger.png" width="40px" height="40px">
      </div>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Space Hero</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Wildfire history <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#"> Wildfire in your location  </a></li>
          <li><a href="#"> Nacional records </a></li>
          <li><a href="#"> Environmental impact </a></li>
        </ul>
      </li>
      <li><a href="#">Ranking</a></li>
      <li><a href="#">About us</a></li>


    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li class="login-toggle">
        <a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a>
      </li>

      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>

    <div class="content-login-v2" style="display: none;">
          <div class="center-content-login">
                  <div class="login-modal">
                      <h2 class="title-login">Create your new account</h2>
                      <h3 class="sub-title-login"></h3>
                      <div class="email-box">
                        <p>Enter your E-mail </p>
                        <input name="email" id="email" title="Email" value="" type="text">
                      </div>
                      <div class="password-box">
                          <p> Enter your Password </p>
                          <input name="email" id="email" title="Email" value="" type="text">
                          <button type="submit" title="Submit" class="button btn-loginv2 btn btn-default">Continue</button>
                      </div>
                      <p class="style-line"><span>Login with</span></p>
                  </div>
                  <div class="login-buttons">
                      <button type="button" title="facebook-login" class="button btn btn-default facebook-login"><span></span>Facebook</button>
                      <button type="button" title="gmail-login" class="button btn btn-default gmail-login"><span></span>Gmail</button>
                  </div>
                  <a href="#" class="help">Need help?</a>
            </div>
          </div>
  </div>
</nav>

  <h4> Be a hero, the world needs you!</h4>
    <p class="space-hero"> Space Hero is a crowdsourcing web app, thats why, he need you to exist. </p>

<p class="botoesemergencia">
 <button type="button" class="btn btn-danger" id="reportbtn">Report an emergency</button>
    <button style="margin:8px;" type="button" class="btn btn-warning">Verify incident</button>
    <a href="/heatmap.php" class="btn btn-warning">Recent wildfire</a>
</p>

<div class="container">
    <div class="mapa">

      <div id="map" style="width:100%;height:400px;"></div>


    </div>
</div>

<div class="container fotos-funcionalidade">
  <h2 class="progress-title">Coming soon</h2>
      <div class="logos">
        <img class="col-xs-4" src="pinwind.png">
        <img class="col-xs-4" src="aquapin.jpg">
        <img class="col-xs-4" src="pinthiev.png">
      </div>
</div>
<div class="container">
  <h2>Progress Bar With Label</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70%
    </div>
  </div>
</div>
<div class="container footer-container">
  <div class="col-xs-12 col-md-3 footer-imagem">
    <img class="foto-nasa" src="nasa.jpg" width="200" height="200">
  </div>
  <div class="col-xs-12 col-md-9 footer-developers">
    <div class="footer-time">
      <h4>Developed by:</h4>
      <p>Alex Barbosa</p>
      <p>Eric Mizuta</p>
      <p>Luiz Guilherme</p>
      <p>Marcos Ewbank</p>
      <p>Otavio Glycerio</p>
    </div>
      <div class="footer-texto">
        <h4>SpaceChimps</h4>
        <p>#SpaceAppsSP</p>
        <p>#SpaceApps</p>
      </div>
  </div>
</div>


    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SSFUwIdOxIZcxbXS3kFPQYTakqPP6Ek&callback=initMap">
    </script>
  </body>
</html>

## insert.php
<?php
if(isset($_REQUEST))
{
$servername = "localhost";
$username = "id7311462_ericmizuta";
$password = "eric1234";
$dbname = "id7311462_spacechimps";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
  error_reporting(E_ALL && ~E_NOTICE);

$Cli_CoordX=$_POST['Cli_CoordX'];
$Cli_CoordY=$_POST['Cli_CoordY'];

$sql = "INSERT INTO Cliente (Cli_CoordX, Cli_CoordY)
VALUES ('$Cli_CoordX', '$Cli_CoordY');";


if ($conn->multi_query($sql) === TRUE) {
    echo "New records created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
}
?>
	function initMap() {

	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 3,
	center: {lat: -28.024, lng: 140.887}
	});

	// Create an array of alphabetical characters used to label the markers.
	var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

	// Add some markers to the map.
	// Note: The code uses the JavaScript Array.prototype.map() method to
	// create an array of markers based on a given "locations" array.
	// The map() method here has nothing to do with the Google Maps API.
	var markers = locations.map(function(location, i) {
	return new google.maps.Marker({
	position: location,
	label: labels[i % labels.length]
	});
	});

	// Add a marker clusterer to manage the markers.
	var markerCluster = new MarkerClusterer(map, markers,
	{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
	}
	var locations = [
	{lat: -9.881, lng: -36.23},
	{lat: -9.442, lng: -35.849},
	{lat: -30.166, lng: -55.003},
	{lat: -30.167, lng: -55.02},
	{lat: -23.625, lng: -49.041},
	{lat: -20.087, lng: -54.659},
	{lat: -20.088, lng: -54.671},
	{lat: -12.36, lng: -49.799},
	{lat: -12.344, lng: -49.808},
	{lat: -11.056, lng: -56.306},
	{lat: -11.058, lng: -56.316},
	{lat: -11.045, lng: -56.296},
	{lat: -11.047, lng: -56.307},
	{lat: -11.048, lng: -56.318},
	{lat: -5.506, lng: -47.614},
	{lat: -5.502, lng: -47.62},
	{lat: -4.692, lng: -45.496},
	{lat: -4.688, lng: -45.504},
	{lat: -4.885, lng: -47.734},
	{lat: -4.414, lng: -46.294},
	{lat: -4.398, lng: -46.297},
	{lat: -4.179, lng: -48.582},
	{lat: -4.18, lng: -48.566},
	{lat: -4.023, lng: -50.238},
	{lat: -4.011, lng: -50.239},
	{lat: -4.012, lng: -50.474},
	{lat: -3.826, lng: -50.068},
	{lat: -3.649, lng: -50.271},
	{lat: -3.637, lng: -50.273},
	{lat: -3.64, lng: -50.288},
	{lat: -3.7, lng: -51.08},
	{lat: -3.496, lng: -50.104},
	{lat: -3.482, lng: -50.172},
	{lat: -3.488, lng: -50.177},
	{lat: -3.435, lng: -50.528},
	{lat: -3.889, lng: -53.663},
	{lat: -3.382, lng: -50.249},
	{lat: -3.282, lng: -50.064},
	{lat: -3.286, lng: -50.053},
	{lat: -3.288, lng: -50.069},
	{lat: -3.259, lng: -49.954},
	{lat: -3.227, lng: -50.146},
	{lat: -3.229, lng: -50.162},
	{lat: -3.316, lng: -50.809},
	{lat: -3.221, lng: -50.153},
	{lat: -3.315, lng: -50.801},
	{lat: -3.718, lng: -53.75},
	{lat: -3.766, lng: -54.082},
	{lat: -2.916, lng: -48.621},
	{lat: -2.802, lng: -48.718},
	{lat: -3.335, lng: -52.436},
	{lat: -3.325, lng: -52.438},
	{lat: -3.48, lng: -53.949},
	{lat: -3.481, lng: -53.958},
	{lat: -3.314, lng: -53.063},
	{lat: -2.563, lng: -48.104},
	{lat: -2.566, lng: -48.129},
	{lat: -3.42, lng: -53.86},
	{lat: -2.559, lng: -48.112},
	{lat: -2.563, lng: -48.136},
	{lat: -3.331, lng: -53.948},
	{lat: -2.898, lng: -51.475},
	{lat: -3.152, lng: -55.839},
	{lat: -2.082, lng: -52.036},
	{lat: -2.084, lng: -52.049},
	{lat: -1.814, lng: -53.807},
	{lat: -1.854, lng: -55.258},
	{lat: -1.63, lng: -54.007},
	{lat: -1.631, lng: -54.017},
	{lat: 1.855, lng: -50.504},
	{lat: 1.852, lng: -50.522},
	{lat: 1.855, lng: -50.51},
	{lat: 1.832, lng: -55.865},
	{lat: 1.831, lng: -55.874},
	{lat: 4.52, lng: -55.391},
	{lat: -34.108, lng: -70.461},
	{lat: -33.77, lng: -70.926},
	{lat: -52.878, lng: -68.86},
	{lat: -9.874, lng: -36.216},
	{lat: -25.442, lng: -42.746},
	{lat: -2.01, lng: -78.336},
	{lat: -2, lng: -78.338},
	{lat: 1.872, lng: -55.813},
	{lat: -0.802, lng: -47.195},
	{lat: -0.805, lng: -47.174},
	{lat: -1.951, lng: -50.731},
	{lat: -2.563, lng: -48.12},
	{lat: -2.566, lng: -48.101},
	{lat: -1.813, lng: -53.808},
	{lat: -2.079, lng: -52.041},
	{lat: -2.088, lng: -52.042},
	{lat: -2.915, lng: -48.609},
	{lat: -3.255, lng: -48.938},
	{lat: -3.248, lng: -48.942},
	{lat: -3.25, lng: -48.926},
	{lat: -3.329, lng: -52.437},
	{lat: -3.636, lng: -50.276},
	{lat: -3.638, lng: -50.262},
	{lat: -3.649, lng: -50.264},
	{lat: -3.921, lng: -49.147},
	{lat: -3.923, lng: -49.131},
	{lat: -3.696, lng: -51.075},
	{lat: -4.396, lng: -46.284},
	{lat: -4.411, lng: -46.285},
	{lat: -4.408, lng: -46.292},
	{lat: -4.411, lng: -46.264},
	{lat: -3.416, lng: -53.859},
	{lat: -3.802, lng: -51.265},
	{lat: -3.478, lng: -53.947},
	{lat: -4.691, lng: -45.494},
	{lat: -3.889, lng: -51.872},
	{lat: -17.662, lng: -60.909},
	{lat: -17.664, lng: -60.897},
	{lat: -17.666, lng: -60.885},
	{lat: -18.033, lng: -61.823},
	{lat: -18.035, lng: -61.809},
	{lat: -21.177, lng: -55.59},
	{lat: -23.049, lng: -53.019},
	{lat: -30.577, lng: -59.464},
	{lat: -30.579, lng: -59.453},
	{lat: 11.623, lng: -70.208},
	{lat: -2.001, lng: -78.331},
	{lat: -8.207, lng: -38.657},
	{lat: -7.333, lng: -44.897},
	{lat: -7.336, lng: -44.878},
	{lat: -7.334, lng: -44.883},
	{lat: -9.054, lng: -35.696},
	{lat: -8.013, lng: -43.056},
	{lat: -8.016, lng: -43.048},
	{lat: -9.215, lng: -35.636},
	{lat: -9.217, lng: -35.624},
	{lat: -10.076, lng: -42.212},
	{lat: -10.076, lng: -42.206},
	{lat: -10.661, lng: -40.788},
	{lat: -10.86, lng: -40.08},
	{lat: -10.912, lng: -40.103},
	{lat: -10.89, lng: -41.043},
	{lat: -11.4, lng: -42.386},
	{lat: -11.995, lng: -38.438},
	{lat: -11.495, lng: -42.429},
	{lat: -11.595, lng: -42.77},
	{lat: -11.597, lng: -42.758},
	{lat: -11.812, lng: -42.436},
	{lat: -11.949, lng: -42.155},
	{lat: -11.95, lng: -42.144},
	{lat: -12.131, lng: -41.052},
	{lat: -12.234, lng: -40.916},
	{lat: -12.357, lng: -40.167},
	{lat: -12.359, lng: -40.158},
	{lat: -12.065, lng: -42.19},
	{lat: -12.078, lng: -42.237},
	{lat: -12.302, lng: -40.78},
	{lat: -12.622, lng: -40.854},
	{lat: -12.623, lng: -40.845},
	{lat: -12.538, lng: -42.243},
	{lat: -12.575, lng: -42.335},
	{lat: -12.092, lng: -45.496},
	{lat: -12.096, lng: -45.478},
	{lat: -12.817, lng: -41.26},
	{lat: -12.875, lng: -42.313},
	{lat: -12.322, lng: -45.846},
	{lat: -12.322, lng: -45.853},
	{lat: -13.596, lng: -39.825},
	{lat: -13.939, lng: -39.996},
	{lat: -14.292, lng: -41.442},
	{lat: -13.933, lng: -45.823},
	{lat: -14.052, lng: -45.667},
	{lat: -24.201, lng: -49.176},
	{lat: -25.606, lng: -42.824},
	{lat: -2.399, lng: -44.913},
	{lat: -2.402, lng: -44.919},
	{lat: -3.543, lng: -39.774},
	{lat: -3.545, lng: -39.764},
	{lat: -3.105, lng: -43.247},
	{lat: -3.108, lng: -43.255}
	]


	$(document).ready(function(){

	$(".login-toggle").click(function(){
	$(".content-login-v2").toggle(400);
	});

	$(".ham").click(function(){
	$("ul.nav.navbar-nav").toggle(400);
	$(".navbar-header span p").toggle(50);
	});
	});



	var locX, locY = 0;


	$(document).ready(function(){

	$(".login-toggle").click(function(){
	$(".content-login-v2").toggle(400);
	});

	$(".ham").click(function(){
	$("ul.nav.navbar-nav").toggle(400);
	$(".navbar-header span p").toggle(50);
	});

	var cont1 = $( "p.infocord" );
	var arry = [];

	for ( var i = 1; i < cont1.length + 1; i++ ) {
	arry.push({
	lat: parseFloat($("p.infocord:nth-of-type(" + i + ")").text()),
	lng: parseFloat($("span.cord2:nth-of-type(" + i + ")").text())
	});
	}

	console.log(arry)

	//Get user location



	navigator.geolocation.watchPosition(logPosition);
	function logPosition(position) {
	// console.log(position);
	// log(aaa);

	var uluru = {lat: position.coords.latitude, lng: position.coords.longitude};

	locX = position.coords.latitude;
	locY = position.coords.longitude;

	map = new google.maps.Map(document.getElementById('map'), {
	center: uluru,
	zoom: 14
	});

	var marker = new google.maps.Marker({
	position: uluru,
	map: map
	});

	// Create an array of alphabetical characters used to label the markers.
	var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

	// Add some markers to the map.
	// Note: The code uses the JavaScript Array.prototype.map() method to
	// create an array of markers based on a given "locations" array.
	// The map() method here has nothing to do with the Google Maps API.
	var markers = locations.map(function(location, i) {
	return new google.maps.Marker({
	position: location,
	label: labels[i % labels.length]
	});
	});

	// Add a marker clusterer to manage the markers.
	var markerCluster = new MarkerClusterer(map, markers,
	{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
	}
	var locations = arry;

	});



	$(document).on('click','#reportbtn',function(e) {
	var data ="Cli_CoordX=" + locX + "&" + "Cli_CoordY=" + locY;
	console.log(data)
	$.ajax({
	data: data,
	type: "post",
	url: "insert.php",
	success: function(data){
	alert("Data Save: " + locX);
	}
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Space Hero</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


	<!--Maps--->

	<script src="defaultheatmap.js"></script>

	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
	<script>
	window.dataLayer = window.dataLayer \|\| [];
	function gtag() {
	window.dataLayer.push(arguments);
	}
	gtag('js', new Date());
	gtag('config', 'UA-33848682-1');
	</script>

	<meta charset="utf-8">
	<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
	<meta name="author" content="//samdutton.com">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
	<meta itemprop="image" content="/images/icons/icon192.png">
	<meta id="theme-color" name="theme-color" content="#fff">



	<link rel="stylesheet" type="text/css" href="home.css">

	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>

	<?php
	$servername = "localhost";
	$username = "id7311462_ericmizuta";
	$password = "eric1234";
	$dbname = "id7311462_spacechimps";

	// Create connection
	$conn = new mysqli($servername, $username, $password, $dbname);

	// Check connection
	if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
	}


	$sql = "SELECT Cli_CoordX, Cli_CoordY FROM Cliente";

	$result = $conn->query($sql);

	if ($result->num_rows > 0) {
	// output data of each row
	while($row = $result->fetch_assoc()) {

	echo "<p class='infocord'>".$row["Cli_CoordX"]."</p>";
	echo "<span class='cord2'>" .$row["Cli_CoordY"]."</span>";

	}

	} else {
	echo "0 results";
	}
	$conn->close();
	?>


	<nav class="navbar navbar-inverse">
	<div class="container-fluid">
	<div class="navbar-header">
	<a class="navbar-brand" href="#"><img src="firepin.png" width="40px" height="40px"></a>
	<span><p>Space Hero</p></span>
	<div class="ham">
	<img src="hamburger.png" width="40px" height="40px">
	</div>
	</div>
	<ul class="nav navbar-nav">
	<li class="active"><a href="#">Space Hero</a></li>
	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Wildfire history <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#"> Wildfire in your location </a></li>
	<li><a href="#"> Nacional records </a></li>
	<li><a href="#"> Environmental impact </a></li>
	</ul>
	</li>
	<li><a href="#">Ranking</a></li>
	<li><a href="#">About us</a></li>


	</ul>

	<ul class="nav navbar-nav navbar-right">
	<li class="login-toggle">
	<a href="#"><span class="glyphicon glyphicon-user"></span> Sign up</a>
	</li>

	<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
	</ul>

	<div class="content-login-v2" style="display: none;">
	<div class="center-content-login">
	<div class="login-modal">
	<h2 class="title-login">Create your new account</h2>
	<h3 class="sub-title-login"></h3>
	<div class="email-box">
	<p>Enter your E-mail </p>
	<input name="email" id="email" title="Email" value="" type="text">
	</div>
	<div class="password-box">
	<p> Enter your Password </p>
	<input name="email" id="email" title="Email" value="" type="text">
	<button type="submit" title="Submit" class="button btn-loginv2 btn btn-default">Continue</button>
	</div>
	<p class="style-line"><span>Login with</span></p>
	</div>
	<div class="login-buttons">
	<button type="button" title="facebook-login" class="button btn btn-default facebook-login"><span></span>Facebook</button>
	<button type="button" title="gmail-login" class="button btn btn-default gmail-login"><span></span>Gmail</button>
	</div>
	<a href="#" class="help">Need help?</a>
	</div>
	</div>
	</div>
	</nav>

	<h4> Be a hero, the word need you!</h4>
	<p class="space-hero"> Space Hero is a crowdsourcing web app, thats why, he needs you to exist. </p>

	<p class="botoesemergencia">
	<button type="button" class="btn btn-danger" id="reportbtn">Report an emergency</button>
	<button style="margin:8px;" type="button" class="btn btn-warning">Verify incident</button>
	</p>

	<div class="container">
	<div class="mapa">

	<div id="map" style="width:100%;height:400px;"></div>



	</div>
	</div>

	<div class="container fotos-funcionalidade">
	<h2 class="progress-title">Coming soon</h2>
	<div class="logos">
	<img class="col-xs-4" src="pinwind.png">
	<img class="col-xs-4" src="aquapin.jpg">
	<img class="col-xs-4" src="pinthiev.png">
	</div>
	</div>
	<div class="container">
	<h2>Progress Bar With Label</h2>
	<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
	70%
	</div>
	</div>
	</div>
	<div class="container footer-container">
	<div class="col-xs-12 col-md-3 footer-imagem">
	<img class="foto-nasa" src="nasa.jpg" width="200" height="200">
	</div>
	<div class="col-xs-12 col-md-9 footer-developers">
	<div class="footer-time">
	<h4>Developed by:</h4>
	<p>Alex Barbosa</p>
	<p>Eric Mizuta</p>
	<p>Luiz Guilherme</p>
	<p>Marcos Ewbank</p>
	<p>Otavio Glycerio</p>
	</div>
	<div class="footer-texto">
	<h4>SpaceChimps</h4>
	<p>#SpaceAppsSP</p>
	<p>#SpaceApps</p>
	</div>
	</div>
	</div>


	<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_SSFUwIdOxIZcxbXS3kFPQYTakqPP6Ek&callback=initMap">
	</script>
	</body>
	</html>
	body{
	background-color:#fff;
	color: white;
	}

	p {
	width: 19%;
	display: inline-block;
	text-align: center;
	float: none;
	font-size: 17.7px;
	text-align: center;
	color: black;
	}

	h4 {
	text-align: center;
	color: black;
	font-size: 30px;
	}
	.footer-container {
	border-top: 1px solid #ccc;
	}

	.progress-bar {
	background: #FF8F30;
	}

	h2.progress-title {
	text-align: center;
	color: black;
	}

	.footer-imagem {
	display: inline-flex;
	}

	.footer-imagem img{
	display: block;
	margin: auto;
	}

	.footer-imagem h4 {
	width: 100%;
	}

	.footer-imagem p {
	width: 40%;
	}

	img.logo2img {
	position: relative;
	left: 50%;
	margin-left: -125px;
	width: 250px;
	}

	p.botoesemergencia {
	width: 100%;
	}

	p.space-hero {
	width: 100%;
	}

	p.infocord{
	display:none;
	}
	span.cord2{
	display: none;
	}
	.navbar-brand>img {
	position: relative;
	display: block;
	top: -11px;
	}

	.navbar-nav li:hover .content-login-v2 {
	display:block;
	}

	.container{
	margin: 10px auto;
	}
	h2.title-login{
	font-size: 27px;
	color: white;
	margin-top: 70px;
	margin-bottom: 30px;
	position: relative;
	}
	h3.sub-title-login{
	font-size: 16px;
	color: white;
	margin-bottom: 15px;
	}

	.content-login-v2 {
	float: left !important;
	width: 100% !important;
	margin-top: 20px;
	margin-bottom: 40px;
	}
	.ham {
	height: 50px;
	display: block;
	float: right;
	}
	.ham img{
	height: 50px;
	margin-right: 10px;
	}

	.btn-back-v2{
	float: left;
	margin-top: 20px;
	color: #b3b3b3;
	text-decoration: underline;
	font-weight: 600;
	}
	input,
	.btn-loginv2{
	width: 50%;
	}
	input{
	border-radius: 4px;
	margin-bottom: 15px;
	height: 40px;
	padding-left: 10px;
	}
	.btn-loginv2{border-color: #FF8F30;padding: 11.5px;color: #fff;font-size: 15px;line-height: 15px;font-family: Arial;font-weight: 700;box-shadow: 0 3px 0 0 #007299;background-color: #FF8F30;border-color: #f68e1e;border-radius: 4px;margin-bottom: 15px;box-shadow: none;}
	.center-content-login{float: none;text-align: center;border: 1px solid #00000000;border-radius:4px;border: 1px solid;width: 700px;position: relative;background: #080808;left: 50%;margin-left: -350px;}
	.login-modal p{
	color: white;
	font-size: 14px;
	line-height: 18px;
	padding: 0 30px;
	}
	.login-modal .style-line,
	.line{
	color: #7e7e7e;
	}
	.login-modal .style-line{margin-bottom: 0;padding: 10px 20px;}
	.login-modal .style-line span{color:#f68e1e;position: relative;padding: 0px 30px;}
	.login-modal .line{
	padding: 0;
	}
	.login-buttons{padding: 0px 70px;}
	.login-buttons .button{
	width: 60%;
	height: 40px;
	margin: 5px 0;
	font-size: 14px;
	color: #fff;
	letter-spacing: 0.3px;
	font-weight: 600;
	}
	.login-buttons .button.facebook-login{
	background-color: #3c5898;
	}
	.login-buttons .button.facebook-login span{
	float: left;
	width: 20%;
	border-right: 1px solid #fff;
	}
	.login-buttons .button.facebook-login svg{
	fill: #fff;
	float: left;
	}
	.login-buttons .button.gmail-login{
	background-color: #d44638;
	}
	.login-buttons .button.gmail-login span{
	float: left;
	width: 20%;
	border-right: 1px solid #fff;
	}
	.login-buttons .button.gmail-login svg{
	fill: #fff;
	float: left;
	}
	.center-content-login a.help{
	color: #f68e1e;
	margin: 10px 0;
	display: block;
	}

	@media (max-width: 768px){
	ul.nav.navbar-nav{
	display: none;
	}
	.navbar-header span p{
	color: #fff;
	float: left;
	margin: 15px 0 0 -10px;
	}
	}

	@media (min-width: 768px){
	.ham {
	display: none;
	}
	.navbar-header span p{
	display: none;
	}
	}
	.center-content-login a.help{color: #f68e1e;margin: 10px 0;display: block;}

	.footer-texto {
	text-align: center;
	}