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;
max-width: 800px;
}
.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;
}
.menu {
display: inline-block;
font-family: "Lucida Sans", sans-serif;
width: inherit;
max-width: 800px;
min-width: 800px;
background-color: #ccc;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
.menu li {
padding: 4px;
margin-bottom: 4px;
display: inline-block;
}
.menu li:hover {
color: #fff;
background-color: #0099cc;
}
.menu a {
text-decoration: none;
}
@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>
<?php
$size=70;
if(isset($_GET['size'])) {
if( "240" == $_GET['size'] ) $size=240;
else if( "480" == $_GET['size'] ) $size=480;
}
?>
<div id="refresh-date"></div>
<br>
<div class="menu">
<ul>
<li><a href="?size=70">SG</a></li>
<li><a href="?size=240">240km</a></li>
<li><a href="?size=480">480km</a></li>
</ul>
</div>
<div class="holder map">
<?php
$currDate = time();
$currDate5 = $currDate - ($currDate % 300);
$currDate15 = $currDate - ($currDate % 900);
$currDate30 = $currDate - ($currDate % 1800);
//TZ correction
$currDate5 += 8*3600;
$currDate15 += 8*3600;
$currDate30 += 8*3600;
$countImg = 13;
$iStart=1;
if(70 == $size) {
//Singapore only
?>
<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
for($i=$countImg;$i>=$iStart;$i--) {
$tempTime=$currDate5-$i*300;
$dt = new DateTime("@$tempTime");
$urlImg="https://www.weather.gov.sg/files/rainarea/50km/v2/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;
}
} else if(240 == $size) {
//240km
?>
<img src="http://www.weather.gov.sg/wp-content/themes/wiptheme/assets/img/240km-v2.jpg" class="maps" >
<?php
for($i=$countImg;$i>=$iStart;$i--) {
$tempTime=$currDate15-$i*900;
$dt = new DateTime("@$tempTime");
$urlImg="https://www.weather.gov.sg/files/rainarea/240km/dpsri_240km_".$dt->format('YmdHi0000')."dBR.dpsri.png";
$classIdx=$i-$iStart;
if($classIdx > 9) $classIdx=9;
echo "<img src=\"$urlImg\" class=\"maps-$classIdx\">".PHP_EOL;
}
} else {
//480km
?>
<img src="http://www.weather.gov.sg/wp-content/themes/wiptheme/assets/img/480km-v2.jpg" class="maps" >
<?php
for($i=$countImg;$i>=$iStart;$i--) {
$tempTime=$currDate30-$i*1800;
$dt = new DateTime("@$tempTime");
$urlImg="https://www.weather.gov.sg/files/rainarea/480km/dpsri_480km_".$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>