1 contributor
<!Doctype>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain Areas SG</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="icon" type="image/png" href="favicon.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<style>
[class*="maps-"],
.maps
{
position:absolute;
top: 20px;
left: 10px;
z-index: 1;
/*width: 853; height: 480px;*/
width: 80%;
}
.maps-0 {opacity: 1;filter: grayscale(0);}
.maps-1 {opacity: 0.9;filter: grayscale(20);}
.maps-2 {opacity: 0.8;filter: grayscale(30);}
.maps-3 {opacity: 0,7;filter: grayscale(40);}
.maps-4 {opacity: 0.6;filter: grayscale(50);}
.maps-5 {opacity: 0.5;filter: grayscale(60);}
.maps-6 {opacity: 0.4;filter: grayscale(70);}
.maps-7 {opacity: 0.3;filter: grayscale(80);}
.maps-8 {opacity: 0.2;filter: grayscale(90);}
.maps-9 {opacity: 0.1;filter: grayscale(100);}
.icon {
font-size: 0.7em;
font-family: "Lucida Sans", sans-serif;
}
</style>
</head>
<body>
<img src="https://www.nea.gov.sg/assets/images/map/base-853.png" class="maps" >
<!-- <img src="https://www.nea.gov.sg/assets/images/map/Landmarks.png" class="fishes" > -->
<img src="https://www.nea.gov.sg/assets/images/map/SG-Township.png" class="maps" >
<?php
$currDate = time();
$currDate5 = $currDate - ($currDate % 300);
//TZ correction
$currDate5 += 8*3600;
$countImg = 13;
$iStart=3;
for($i=$countImg;$i>=$iStart;$i--) {
$tempTime=$currDate5-$i*300;
$dt = new DateTime("@$tempTime");
$urlImg="https://www.nea.gov.sg/docs/default-source/rain-area/dpsri_70km_".$dt->format('YmdHi0000')."dBR.dpsri.png";
$classIdx=$i-$iStart;
if($classIdx > 9) $classIdx=9;
echo "<img src=\"$urlImg\" class=\"maps-$classIdx\">".PHP_EOL;
//echo $urlImg."<br>".PHP_EOL;
}
?>
<div class="icon">Icon made by <a href="//www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="//www.flaticon.com">www.flaticon.com</a></div>
</body>
</html>