<?php
include_once('../settings.php');
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>HOUR FORECAST</title>
		
		 
			    
<style>
/* flex webkit usage homeweatherstation css Moday 25th April 2016 */

.body {
	margin:0 auto;
	text-align:center;
	
}

.container1 {
	width:600px;
	display:inline;
	float:left;
	height:300px;
	background:#fff;
	margin-bottom:0px;
	padding:10px;
	margin:0 auto;
	text-align:center;
	}
	
	.container2 {
	width:600px;
	float:left;
	height:300px;
	background:#fff;
	margin-bottom:0px;
	padding:10px;
	margin-top:200px;
	text-align:center;
	position:absolute;
	display:inline;
	}
	
.titleforecast {
	
	 font-size:0.9em;
	 font-family:' Helvetica', Arial;
	 margin-left:2%;
	 margin-top:15px;
	
	
}
	
	

uvi {
    font-size: 11px;
    text-align: center;
    margin: 35px auto 0 -32px;
    line-height:10px;
	width:25px;
	position: absolute;
	
}

uviforecast 
{
    font-size: 11px;
    text-align: center;
    margin: -5px auto 0 5px;
    position: absolute;
	line-height:10px;
	width:30px;
}
.uvi01 {
    padding-top: 5px;
    font: 1.5em Helvetica, Arial, Helvetica ;
	color: #777;
    margin-top: 15px;
    border-radius: 50%;
    margin-left: 15px;
	border: 5px solid rgba(233, 235, 241, 1);
	width:60px;
	height:60px;
	text-align:center;
	line-height:20px;
	display:inline;
	float:left;
	
	
	
}

.uvi01 span{
   position:absolute;
    font-size:10px;
	margin-top:0px;
	margin-left:-20px;
	color:#66a1ba;
	
}

.uvi01 p{
   
    font-size:11px;
	margin-top:0px;
	color:#f27260;
	
	
}


.uvi01 {
    background: rgba(255, 255, 255, 1)
}


</style>
			<div class="titleforecast"><span style="color:#66a1ba"><?php
echo "${stationName} \n";
?><span style="color:#f27260">Todays</span><span style="color:#66a1ba"> UVINDEX <span style="color:#777777">Hourly Forecast</span></span> </div>
       
    <div class="container1">    
        <?php
		
$weather = file_get_contents('../jsondata/hourly.json');
$decoded = json_decode($weather, true);
$count = 0;
foreach ($decoded['hourly_forecast'] as $value)
{
    $count++;
    
  $hour = $value['FCTTIME']['civil'];
   
    $uvi = $value['uvi'];
		
      echo "<div class=\"uvi01\"><span>$hour</span> <br> $uvi <p>UVI</div>";
	
		
	if ($count >13)
        break;
}
?>

	</div>
    
	</body>
</html>