<?php include('livedata.php');?>
<!DOCTYPE html>
<html>
<head>
	<title><?php echo "${stationlocation} \n";?> weather station</title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<meta content="Home weather station providing current weather conditions for Sinanoba Buyucekmece Istanbul Turkey" name="description">
	<meta content="website" property="og:type">
	<meta content="7 days" name="revisit-after">
	<meta content="web" name="distribution">
	<meta content="<?php echo "${stationlocation} \n";?> weather station" property="og:title">
	<meta content="<?php echo "${stationlocation} \n";?> weather station" property="og:site_name">
	<meta content="" property="og:url">
	<meta content="Home weather station providing current weather conditions for <?php echo "${stationlocation} \n";?>" property="og:description">
	<meta content="img/weather34.jpg" property="og:image">
	<meta content="" property="fb:app_id">
	<meta content="place" property="og:type">
	<meta content="brian underdown" name="author">
	<meta content="INDEX,FOLLOW" name="robots">
	<meta content="width=device-width" name="viewport">
	<link href="img/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
	<link href="img/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
	<link href="img/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
	<link href="img/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
	<link href="img/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
	<link href="img/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
	<link href="img/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
	<link href="img/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
	<link href="img/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
	<link href="img/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
	<link href="img/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
	<link href="img/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
	<link href="favicon.ico" rel="icon" type="image/x-icon">
	<link href="css/main.min.css" rel="stylesheet prefetch">
	<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet prefetch" type="text/css">
	<script src="js/jquery.js"></script>
    <script src="js/combi.js" ></script>
  
</head>
<body>
<header>
  <input data-function='swipe' id='swipe' type='checkbox'>
  <label data-function='swipe' for='swipe'>&#xf0c9;</label>
  <h1> <i class="fa fa-map-marker1 fa-1x"></i> 
 <strong><?php echo "${stationName} \n";?></strong> HOME<strong>WEATHER</strong>STATION</h1>  
 <button class="button right"><a href="" alt="" target="_blank"><img src="img/cumuluslogod.png"></a></button>	               
      <div class='sidebar'>
      <nav class='menu'>
      <li><a href="info/info.php" data-featherlight="iframe"><img src="img/info2.png" width="40px"> Location Info</a></li>
      <li><a href="info/info.php" data-featherlight="iframe"><img src="img/info3.png" width="40px"> Contact Info</a></li>
      <li><a href="<?php echo "$weatherunderground \n";?>" target="_blank"><img src="img/wu.png" width="40px"> WU Station</a></li>
      <li><a href="moon.php" data-featherlight="iframe"><img src="img/moon.png" width="40px"> Sun/Moon Info</a></li>
      <li><a href="eqfolder/eqlist.php" data-featherlight="iframe"><img src="img/earthquaked.png" width="40px"> Worldwide Earthquakes </a></li>      
      <li><a href="" alt="" target="_blank"><img src="img/cumuluslogod.png"></a></li>          
     </nav>
     </div>
</header>
<!-- begin top layout for homeweatherstation template-->
<!--indoor temperature for homeweatherstation template-->
<div class="weather2-container">
  <div class="weather2-item" style="background-image:url(css/homepageicons/temp.png);background-repeat:no-repeat;background-position:bottom left;font-size:12px;">Temperature Indoor
  <div class="indoorvalues">
  <script async type="text/livescript">  
  var refreshId;$(document).ready(function(){indoor()});function indoor(){$.ajax({cache:false,success:function(a){$("#indoor").html(a);setTimeout(indoor,120000)},type:"GET",url:"indoor.php"})};
  </script>     
  <div id="indoor" ></div></div>
  <div class="indoorunit"><?php echo "${indoorunit} \n";?></div>
  </div>
  
  <!--realtime clock for homeweatherstation template-->
  <div class="weather2-item" style="background-image:url(css/homepageicons/time.png);background-repeat:no-repeat;background-position:bottom left;font-size:12px;">HOME<strong>WEATHER</strong>STATION<br>
  <div class="clock-container">
               <span style="position:absolute;margin-left:40px;font-size:11px;margin-top:-25px;">
			   <?php echo date('D M jS');?></span>    
               <ul> <li><span></span></li></ul>  </div>
               
            <!-- homeweather end local time  -->   
            <div class="indoorlocation">
                     
            <i class="fa fa-map-marker1"></i> 
			<?php echo "${stationName} \n";?></div></div>
            
            
   <!-- notifications cautions/alerts for homeweatherstation template-->
  <div class="weather2-item" style="background-image:url(css/homepageicons/caution.png);background-repeat:no-repeat;background-position:bottom left;font-size:12px;">Notification Alerts
  <div class="indoorvalues">  
  <script async type="text/livescript">  
  var refreshId;$(document).ready(function(){notification()});function notification(){$.ajax({cache:false,success:function(a){$("#notification").html(a);setTimeout(notification,30000)},type:"GET",url:"notification.php"})}; 
  </script>    
   <div id="notification" ></div></div></div></div>
            
<!--end indoor section for homeweatherstation template-->
<!--begin outside/station data section for homeweatherstation template-->
<div class="weather-container">



  <div class="weather-item">
  <div class="chartforecast">
         <a href="yearly/yeartemp.php" data-featherlight="iframe" ><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('Y');?></span> </a>  
         <a href="yearly/monthtemp.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('F');?></span> </a>  
         <a href="yearly/temptoday.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('l');?></span> </a>  
      </div>
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">Temperature <?php echo "${templateunit} \n";?><br /></span>  
   <script async type="text/livescript">
   var refreshId;$(document).ready(function(){temperature()});function temperature(){$.ajax({cache:false,success:function(a){$("#temperature").html(a);setTimeout(temperature,60000)},type:"GET",url:"temperature.php"})};
   </script>  
         <div id="temperature"></div><br>
  
  
  </div>
  <!--forecast for homeweatherstation template-->
  <div class="weather-item">
  <div class="chartforecast">   
         <a href="graphs/forecast10.php" data-featherlight="iframe" ><i class="fa fa-dot-circle-o fa-1x"></i><span style="color:#66a1ba;"> Forecast Ahead</span> </a>  
          <a href="outlook.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-dot-circle-o fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('l');?> Outlook</span> </a>
      </div>
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;"><i class="fa fa-map-marker"></i>
            <?php echo "${stationlocation} \n";?>Forecast</span><br />  
  <div class="updatedtime"><span>Updated</span> <?php 
$date = new DateTime('now', new DateTimeZone($TZ));
 echo $date->format('H:i:s');
?>  </div> <br />
         <div id="wuforecasts"></div>
  </div>
  <!--currentsky for homeweatherstation template-->
  <div class="weather-item">
   <div class="chartforecast">
         <!-- HOURLY & Outlook for homeweather station-->  
         <a href="graphs/hour.php" data-featherlight="iframe"><i class="fa fa-dot-circle-o fa-1x"></i><span style="color:#66a1ba;"> Hourly Forecast</span> </a> 
          <a href="moon.php" data-featherlight="iframe" style="margin-left:20px;"><span style="color:#777;"><i class='wi wi-moon-alt-waning-crescent-3' ></i><span style="color:#66a1ba;"> Moon Information</span> </a> 
          
          
      </div> 
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">Current Conditions</span><br />  
  <script async type="text/livescript">
  var refreshId;$(document).ready(function(){currentsky()});function currentsky(){$.ajax({cache:false,success:function(a){$("#currentsky").html(a);setTimeout(currentsky,300000)},type:"GET",url:"currentsky.php"})};
  </script>              
         
            <div id="currentsky">
            
            <div class="loadingtheweather">
    <div class="dot dot-1"></div>
    <div class="dot dot-2"></div>
    <div class="dot dot-3"></div>
    <div class="dot dot-4"></div>
</div>
            
            
            </div>
         
 </div></div>
 <!--windspeed for homeweatherstation template-->
<div class="weather-container">
  <div class="weather-item">
  <div class="chartforecast">
         <a href="yearly/windyear.php" data-featherlight="iframe" ><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('Y');?></span> </a>  
         <a href="yearly/windmonth.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('F');?></span> </a>  
         <a href="yearly/windtoday.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('l');?></span> </a> 
      </div>
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">Wind Speed</span><br />
          <script async type="text/livescript">
		  var refreshId;$(document).ready(function(){windspeed()});function windspeed(){$.ajax({cache:false,success:function(a){$("#windspeed").html(a);setTimeout(windspeed,16000)},type:"GET",url:"windspeed.php"})};
          </script>      
         <div id="windspeed">Collecting Wind Speed</div>
         
         
      </div>
       <!--barometer for homeweatherstation template-->
  <div class="weather-item">
   <div class="chartforecast">
         <a href="yearly/yearbarometer.php" data-featherlight="iframe" ><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('Y');?></span> </a>  
         <a href="yearly/monthbarometer.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('F');?></span> </a>  
         <a href="yearly/barometertoday.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('l');?></span> </a>  
      </div>
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">Barometer</span><br />
   <script async type="text/livescript">
   var refreshId;$(document).ready(function(){barometer()});function barometer(){$.ajax({cache:false,success:function(a){$("#barometer").html(a);setTimeout(barometer,60000)},type:"GET",url:"barometer.php"})};
   </script>                            
         <div id="barometer"></div>
  </div>
       <!--wind direction for homeweatherstation template-->
  <div class="weather-item">
  <div class="chartforecast">
         <i class="fa fa-dot-circle-o fa-1x"></i> 360&deg; Direction         
      </div>
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">Wind Direction</span><br />
  <script async type="text/livescript">
  var refreshId;$(document).ready(function(){windirection()});function windirection(){$.ajax({cache:false,success:function(a){$("#wind-direction").html(a);setTimeout(windirection,16000)},type:"GET",url:"windirection.php"})};
  </script>     
         <div class="windirection">
   <div id="wind-direction"></div> </div>           
         </div></div>
  </div>
</div>
 <!--rainfall for homeweatherstation template-->
<div class="weather-container">
  <div class="weather-item">
  
  <div class="chartforecast">
         <a href="yearly/yearrain.php" data-featherlight="iframe" ><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('Y');?></span> </a>  
         <a href="yearly/monthrain.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('F');?></span> </a>  
         <a href="yearly/rainfalltoday.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> <?php echo date('l');?></span> </a>  
      </div>
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">Rainfall Today</span><br />
   <script async type="text/livescript">
   var refreshId;$(document).ready(function(){rainfall()});function rainfall(){$.ajax({cache:false,success:function(a){$("#rainfall").html(a);setTimeout(rainfall,60000)},type:"GET",url:"rainfall.php"})};
   </script> 
         <div id="rainfall"></div>
  
      </div>
  <!--solar for homeweatherstation template-->     
  <div class="weather-item">
  <div class="chartforecast">
         <i class="fa fa-dot-circle-o fa-1x"></i><a href="uvinfo/solarhour.php" data-featherlight="iframe"> <span style="color:#f26c4f">UVINDEX <span style="color:#66a1ba;"><?php echo date('l');?></span></span> &nbsp;
         <a href="yearly/solartoday.php" data-featherlight="iframe" style="margin-left:20px;"><i class="fa fa-line-chart fa-1x"></i><span style="color:#66a1ba;"> Solar <?php echo date('l');?></span> </a> 
    </div>
  
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:#7c7e80;">UV | <span style="color:#f26c4f">Solar Data</span></span><br />
   <script async type="text/livescript">
   var refreshId;$(document).ready(function(){solar()});function solar(){$.ajax({cache:false,success:function(a){$("#solar").html(a);setTimeout(solar,20000)},type:"GET",url:"solar.php"})};
   </script>              
         <div id="solar">Collecting UV/Solar Data</div>
  
  </div>
   <!--new earthquake for homeweatherstation template 28th July-->
  <div class="weather-item">
  <div class="chartforecast">
  <i class="fa fa-dot-circle-o fa-1x"></i>
 <a href="eqfolder/eqlist.php" data-featherlight="iframe"><span style="color:#f26c4f;font-weight:600;"> Last 4 Worldwide </span><span style="color:#66a1ba;">Earthquakes</span></a></span></span>
    </div>
  
  <span style="font-size:11px;font-weight:600;text-transform:uppercase;color:rgba(95,96,97,0.8)"><span style="color:#66a1ba;">Earthquake</span> Data</span><br />
  
 <script async type="text/livescript">
   var refreshId;$(document).ready(function(){eq()});function eq(){$.ajax({cache:false,success:function(a){$("#eq").html(a);setTimeout(eq,60000)},type:"GET",url:"eq.php"})};
   </script>              
         <div id="eq">Collecting Earthquake Data</div>
  </div>
</div>
 <!--end outdoor data for homeweatherstation template-->
  <!--footer are for homeweatherstation template-->
<div class="weatherfooter-container">
  <div class="weatherfooter-item"><br>
  <span style="float:right;padding:10px;font-size:10px;"> 
  <id onclick="launchFullscreen(document.documentElement);"><i class="fa fa-expand fa-lg" aria-hidden="true"></i> Fullscreen</id>
    <id onclick="exitFullscreen();" ><i class="fa fa-compress fa-lg " aria-hidden="true"></i> Minimize</id>  </span>
       		
         <div style="color:#66a1ba;margin-left:100px;font-size:11px;font-weight:normal;"><i class="fa fa-map-marker fa-1x"> </i> <span style="color:#f26c4f;"> Location : <span style="color:#66a1ba;"> <?php echo "${lat} \n"; ?></span><span style="color:#f26c4f;"> <?php echo "${lon} \n"; ?><i class="fa fa-dot-circle-o fa-1x"> </i><span style="color:#66a1ba;font-weight:normal;"> ASL : <span style="color:#f26c4f;">
         <?php echo "${elevation} \n"; ?></span></div>
         
         <div style="margin-left:100px;font-size:11px;font-weight:normal;"><i class="fa fa-dot-circle-o fa-1x"> </i><span style="color:#66a1ba;font-size:11px;"> Data Source: <span style="color:#f26c4f;font-size:11px;">
            <?php echo "${version} \n"; ?></span></span>
            <i class="fa fa-dot-circle-o fa-1x"> </i><span style="color:#66a1ba;font-size:11px;"> Hardware: <span style="color:#f26c4f;font-size:11px;"> 
            <?php echo "${hardware} \n"; ?> 
             </span></span> 
             
         </div> 
        
          <!--- footer credits---><center>
         <span style="margin-left:90px;"><span style="font-size:10px;"> &nbsp; <a href="http://www.weather34.com" title="http://www.weather34.com" target="_blank"> <?php echo "$templateversion \n"; ?></a> &copy; 2015-<?php echo date('Y');?>&nbsp;&nbsp; |</span>
            <span style="color:#898c8f;font-weight:normal;font-size:10px;"> &nbsp;Built with <strong style="color:#66a1ba;"><a href="http://learnlayout.com/flexbox.html" title="http://learnlayout.com/flexbox.html" target="_blank">FLEX</a></strong> Webkit &copy; 2015-<?php echo date('Y');?></span></span></div></center>
        </body>
  
  
<!-- load homweather station scripts last--->
   <script type="text/javascript"src='js/gauge.js' charset="utf-8"></script>
    
   <script>  /*utc clock*/
      !function(t,n,o){function e(){var t=new i;t.startClock()}function i(){this.time=""}o(function(){e()}),i.prototype={startClock:function(){var t=this;setInterval(this.updateClock.bind(this,t),500)},updateClock:function(t){var n=t.getTime();this.updateClockView(n)},updateClockView:function(t){for(var n=o(".clock-container>ul>li>span"),e=0;5>e;e++)n.eq(e).html(t[e])},getTime:function(){var t=new Date,n=t.getUTCHours(),o=t.getUTCMinutes(),e=t.getUTCSeconds(),i=this.convertHourByTimeZone(n);o=this.fixLayout(o),e=this.fixLayout(e);for(var r=[],u=0;5>u;u++){var c=i[u]+":"+o+":"+e;r.push(c)}return r},convertHourByTimeZone:function(t){for(var n=[<?php echo $UTC; ?>],o=[],e=0;5>e;e++){var i=t+n[e];i>=24?i-=24:0>i&&(i=24+i),o.push(i)}return o},fixLayout:function(t){return 10>t&&(t="0"+t),t}}}(window,document,window.jQuery);
   </script>
   <script>
   function launchFullscreen(e){e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen()}function exitFullscreen(){document.exitFullscreen?document.exitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()}function dumpFullscreen(){console.log("document.fullscreenElement is: ",document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement),console.log("document.fullscreenEnabled is: ",document.fullscreenEnabled||document.mozFullScreenEnabled||document.webkitFullscreenEnabled||document.msFullscreenEnabled)}document.addEventListener("fullscreenchange",function(e){console.log("fullscreenchange event! ",e)}),document.addEventListener("mozfullscreenchange",function(e){console.log("mozfullscreenchange event! ",e)}),document.addEventListener("webkitfullscreenchange",function(e){console.log("webkitfullscreenchange event! ",e)}),document.addEventListener("msfullscreenchange",function(e){console.log("msfullscreenchange event! ",e)});</script>
   
</body>
</html>