<?php include_once('livedata.php');?>

<div class="updatedtime"><span>Updated</span> <?php 
$date = new DateTime('now', new DateTimeZone($TZ));
 echo $date->format('H:i:s');
?> </div>
                 <br />
                              <!-- add actual UV forecast value from Wunderground hourly forecast for those who don't have UV sensor. 
	This forecast value has great accuracy when compared to a real UV sensor value (usually within +/- 1 IUV) -->	

	
<?php	
$weather = file_get_contents('jsondata/hourly.json'); 
$decoded = json_decode($weather, true);
$count = 1;
foreach ($decoded['hourly_forecast'] as $value)
{$count++;  
   	$uvi = $value ['uvi'];   	
	if ($count > 1)
        break;
}?>

<style>
uvi {
    font-size: .35em;
    text-align: center;
    margin: 32px auto 0 -30px;
    position: absolute;		
}
.uv01,.uv03,.uv35,.uv67,.uv810,.uv1112 {
    padding-top: 4%;
    font: 2em Helvetica, Helvetica, Arial, Helvetica;
    color: #ccc;
    margin-top: -25px;
    border-radius: 50%;
    margin-left: 20px;
    border: 3px solid #5f6061;
    width: 90px;
    height: 90px;
    text-align: center;
	background: none;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.uv01 {
    background:none;
	color: #ccc;
	 background: transparent;
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #aaa), color-stop(100%, #fff));
	background: -webkit-linear-gradient(-45deg, #aaa 0%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.uv03 {
    color: rgba(79, 184, 123, 1);
	background: transparent;
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(79, 184, 123, 1)), color-stop(100%, #fff));
	background: -webkit-linear-gradient(-45deg, rgba(79, 184, 123, 1) 0%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.uv35 {
   color: rgba(238, 166, 89, 1);
	background: transparent;
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(238, 166, 89, 1)), color-stop(100%, #fff));
	background: -webkit-linear-gradient(-45deg, rgba(238, 166, 89, 1) 0%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.uv67 {
	color:rgba(238, 114, 89, 1);
	background: transparent;
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f0795b), color-stop(100%, #fff));
	background: -webkit-linear-gradient(-45deg, #f0795b 0%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.uv810 {
	color:rgba(209, 94, 82, 1);
	background: transparent;
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f30), color-stop(100%, #fff));
	background: -webkit-linear-gradient(-45deg, #30 0%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.uv1112 {
	color: rgba(148, 81, 136, 1);
	font: 1.9em Helvetica, Helvetica, Arial, Helvetica;
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(148, 81, 136, 1)), color-stop(100%, #fff));
	background: -webkit-linear-gradient(-45deg, rgba(148, 81, 136, 1) 0%, #fff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
</style>
<!-- end of UV forecast from hourly.json -->
		
    <br />                        

<?php
echo " \n";
// UV INDEX
if ($uvi<= 0) {
    echo "<div class=\"uv01\">${uvi}<uvi></uvi></div><div class=\"uvtext\">No <color>caution</color> required </div>";
} else if ($uvi< 1) {
    echo "<div class=\"uv01\">${uvi}<uvi></uvi></div><div class=\"uvtext\">No <color>caution</color> required </div>";
} else if ($uvi< 2) {
    echo "<div class=\"uv03\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Wear <color>sunglasses</color> on bright days </div>";
} else if ($uvi< 3) {
    echo "<div class=\"uv03\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Wear <color>sunglasses</color> on bright days </div>";
} else if ($uvi< 4) {
    echo "<div class=\"uv35\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Stay in the shade near midday when the <color>sun</color> is strongest </div>";
} else if ($uvi< 5) {
    echo "<div class=\"uv35\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Stay in the shade near midday when the <color>sun</color> is strongest <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 6) {
    echo "<div class=\"uv35\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Stay in the shade near midday when the <color>sun</color> is strongest <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 7) {
    echo "<div class=\"uv67\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Reduce time in the <color>sun</color> between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 8) {
    echo "<div class=\"uv67\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Reduce time in the <color>sun</color> between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 9) {
    echo "<div class=\"uv810\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Minimize <color>sun</color> exposure between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 10) {
    echo "<div class=\"uv810\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Minimize <color>sun</color> exposure between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 11) {
    echo "<div class=\"uv810\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Minimize <color>sun</color> exposure between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 12) {
    echo "<div class=\"uv1112\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Try to avoid<color>sun</color> exposure between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
} else if ($uvi< 13) {
    echo "<div class=\"uv1112\">${uvi}<uvi></uvi></div><div class=\"uvtext\">Try to avoid<color>sun</color> exposure between 10am-4pm <i class='fa fa-exclamation-triangle' aria-hidden='true'></i></div>";
}
?> </span>



 <!-- solar radiation for homeweather station-->
 </span>
   
 
<!-- SOLAR --> 
<?php echo "";
//solar radiation homeweatherstation for cumulus output
if ($cumulus[45] >500){echo "<div class=\"solarcircle\">${cumulus[45]}<br><span>W/m&sup2</span></div><div class=\"solatext\">Solar Radiation<br><color>Good</color></div>";}
else if ($cumulus[45] >300){echo "<div class=\"solarcircle1\">${cumulus[45]}<br><span>W/m&sup2</span></div><div class=\"solatext\">Solar Radiation<br><color1>Moderate</color1></div>";}
else if ($cumulus[45] >150){echo "<div class=\"solarcircle2\">${cumulus[45]}<br><span>W/m&sup2</span></div><div class=\"solatext\">Solar Radiation<br><color2>Low</color2></div>";}
else if ($cumulus[45] <150){echo "<div class=\"solarcircle3\">${cumulus[45]}<br><span>W/m&sup2</span></div><div class=\"solatext\">Solar Radiation<br><color3>Poor</color3></div>";}
?>
</span>
</span>
