Untitled

<?php
$content =  file_get_contents( "info.txt" );
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fire alarm system</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.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
	}


    /* Remove the navbar's default margin-bottom and rounded borders */
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}


    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;}
    }
  </style>
  <meta name="description" content="Free Google Locate IP Address and Domain Lookup Service with Whois Map, Country Map, Region Map ,City Map." />
    <meta name="keywords" content="Google Geolocate IP Address Lookup Map Locate Targeting,IP Whois,Provider Database,XML IP Address Locate,XML free IP Whois,IP Geo Track,IP2Country,IP2City,City IP Address Map,Whois Geo Targeting,Visitor IP Geo Map,Domain Whois Locate" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script type="text/javascript">
        function initialize() {
            $.getJSON('http://freegeoip.net/json/', function(location) {
                var latitude = location.latitude;
                var longitude = location.longitude;

                var myLatlng = new google.maps.LatLng(latitude,longitude);
                var myOptions = {
                    zoom: 6,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title:"Fire IP Location!"
                });
            });
        }
    </script>
    <style>
        #gmap_canvas img{max-width:none!important;background:none!important}
    </style>
</head>
<body onload="initialize()">

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">

      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid text-center">
  <div class="row content">
   <div class="col-sm-8 text-left">
      <h1>
    <div class="alert alert-danger">
        <strong>Danger!</strong>
		<p>Recent fires happened at <?php echo $content?></p>
    </div></h1>

      <hr>
      <h3>Fire specifications</h3>
      <h1 id="demo"> </h1>
      <img id="img" height="300px" width="300px">

    </div>
    <div class="col-sm-8 text-rigt">
        <div id="map_canvas" class="col-sm-8 text-right" style="height:400px;width:550px;"></div>

    </div>

  </div>

</div>

<footer class="container-fluid text-center">
  <p>Copyright © BFU Crew1</p>
</footer>
<script>
  var callbackFunction = function(data) {

    var wind = data.query.results.channel.wind;
    var dir = wind.direction;
    var sp = wind.speed;
  document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
   if(dir<33.75 ){

    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "North.png";
    }
    else if(dir>33.75 && dir<78.75 ){
    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "NE.png";

    }
    else if(dir>78.75 && dir<123.75 ){
    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "East.png";
    }
   else  if(dir>123.75 && dir<168.75 ){
    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "SE.png";
    }
    else if(dir>168.75 && dir<213.75 ){
     document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
     document.getElementById("img").src = "South.png";
    }
    else if(dir>213.75 && dir<258.75 ){
    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "SW.png";
    }
    else if(dir>258.75 && dir<303.75 ){
    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "West.png";
    }
    else if(dir>303.75 && dir<348.75 ){
    document.getElementById("demo").innerHTML = "wind speed = " + sp + " kmph";
    document.getElementById("img").src = "NW.png";

    }

    setTimeout(arguments.calee,3000);

  } ;
</script>
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTGJW-3nQiAokpdfcWNKXfYgdN_vgqHYw&callback=initialize"
  type="text/javascript"></script>
<script src="https://query.yahooapis.com/v1/public/yql?q=select wind from weather.forecast where woeid in (select woeid from geo.places(1) where text='sofia, bg')&format=json&callback=callbackFunction"></script>


</body>
</html>