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>
* {
box-sizing: border-box;
}
a:link { color: #5b7e96; }
a:visited { color: #5b7e96; }
a:hover { color: #ccc; }
.holder {
width: 80%;
}
.legend {
/* Nothing Yet */
}
.map {
/* Nothing Yet */
}
[class*="maps-"],
.maps
{
display:inline;
position:absolute;
z-index: 1;
/*width: 853; height: 480px;*/
width: inherit;
}
.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;
}
.legend {
position:absolute;
width: 40%;
bottom: 1%;
left: 8px;
z-index: 1;
opacity: 0.7;
margin: auto;
}
</style>
</head>
<body>
<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>
<div class="holder map">
<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/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;
}
?>
</div><!-- ./map-holder -->
<div class="holder legend">
<div class="centered">
<img class="legend-img" src="https://www.nea.gov.sg/assets/images/temp/rain-legend.jpg">
</div><!-- ./centered -->
</div><!-- ./legend-holder -->
</body>
</html>