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: 90%;
max-height: 50vh;
}
[class*="maps-"],
.maps
{
display:inline;
position:absolute;
z-index: 1;
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 {
display:inline;
font-size: 0.7em;
font-family: "Lucida Sans", sans-serif;
}
#refresh-date {
display:inline;
font-size: 0.7em;
font-family: "Lucida Sans", sans-serif;
}
.legend-img {
position:relative;
width: 40%;
bottom: 1%;
left: 8px;
z-index: 1;
opacity: 0.7;
margin: auto;
}
@media only screen and (min-width: 500px) and (max-width: 699px) {
/* For phone */
.legend-img { bottom: 10%; }
}
</style>
<script type="text/javascript">
window.onload = function() {
var d = Date(Date.now());
var a = d.toString();
var idx = a.indexOf(' (');
var aTrunc = a.substr(0,idx);
document.getElementById('refresh-date').innerHTML = aTrunc;
}
setTimeout(function(){
location = ''
},300000);
</script>
</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 id="refresh-date"></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>