| ... | ... |
@@ -28,6 +28,7 @@ a:hover { color: #ccc; }
|
| 28 | 28 |
position:absolute; |
| 29 | 29 |
z-index: 1; |
| 30 | 30 |
width: inherit; |
| 31 |
+ max-width: 800px; |
|
| 31 | 32 |
} |
| 32 | 33 |
|
| 33 | 34 |
.maps-0 {opacity: 1;filter: grayscale(0);}
|
| ... | ... |
@@ -60,6 +61,32 @@ a:hover { color: #ccc; }
|
| 60 | 61 |
opacity: 0.7; |
| 61 | 62 |
margin: auto; |
| 62 | 63 |
} |
| 64 |
+.menu {
|
|
| 65 |
+ display: inline-block; |
|
| 66 |
+ font-family: "Lucida Sans", sans-serif; |
|
| 67 |
+ width: inherit; |
|
| 68 |
+ max-width: 800px; |
|
| 69 |
+ min-width: 800px; |
|
| 70 |
+ background-color: #ccc; |
|
| 71 |
+} |
|
| 72 |
+.menu ul {
|
|
| 73 |
+ list-style-type: none; |
|
| 74 |
+ margin: 0; |
|
| 75 |
+ padding: 0; |
|
| 76 |
+ display: inline-block; |
|
| 77 |
+} |
|
| 78 |
+.menu li {
|
|
| 79 |
+ padding: 4px; |
|
| 80 |
+ margin-bottom: 4px; |
|
| 81 |
+ display: inline-block; |
|
| 82 |
+} |
|
| 83 |
+.menu li:hover {
|
|
| 84 |
+ color: #fff; |
|
| 85 |
+ background-color: #0099cc; |
|
| 86 |
+} |
|
| 87 |
+.menu a {
|
|
| 88 |
+ text-decoration: none; |
|
| 89 |
+} |
|
| 63 | 90 |
@media only screen and (min-width: 500px) and (max-width: 699px) {
|
| 64 | 91 |
/* For phone */ |
| 65 | 92 |
.legend-img { bottom: 10%; }
|
| ... | ... |
@@ -83,27 +110,75 @@ setTimeout(function(){
|
| 83 | 110 |
<div class="icon"> |
| 84 | 111 |
Icon made by <a href="//www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="//www.flaticon.com">www.flaticon.com</a> |
| 85 | 112 |
</div> |
| 113 |
+<?php |
|
| 114 |
+$size=70; |
|
| 115 |
+if(isset($_GET['size'])) {
|
|
| 116 |
+ if( "240" == $_GET['size'] ) $size=240; |
|
| 117 |
+ else if( "480" == $_GET['size'] ) $size=480; |
|
| 118 |
+} |
|
| 119 |
+?> |
|
| 86 | 120 |
<div id="refresh-date"></div> |
| 121 |
+<br> |
|
| 122 |
+<div class="menu"> |
|
| 123 |
+<ul> |
|
| 124 |
+<li><a href="?size=70">SG</a></li> |
|
| 125 |
+<li><a href="?size=240">240km</a></li> |
|
| 126 |
+<li><a href="?size=480">480km</a></li> |
|
| 127 |
+</ul> |
|
| 128 |
+</div> |
|
| 87 | 129 |
<div class="holder map"> |
| 88 |
-<img src="https://www.nea.gov.sg/assets/images/map/base-853.png" class="maps" > |
|
| 89 |
-<img src="https://www.nea.gov.sg/assets/images/map/SG-Township.png" class="maps" > |
|
| 90 | 130 |
<?php |
| 91 | 131 |
$currDate = time(); |
| 92 | 132 |
$currDate5 = $currDate - ($currDate % 300); |
| 93 |
- |
|
| 133 |
+$currDate15 = $currDate - ($currDate % 900); |
|
| 134 |
+$currDate30 = $currDate - ($currDate % 1800); |
|
| 94 | 135 |
//TZ correction |
| 95 | 136 |
$currDate5 += 8*3600; |
| 137 |
+$currDate15 += 8*3600; |
|
| 138 |
+$currDate30 += 8*3600; |
|
| 96 | 139 |
|
| 97 | 140 |
$countImg = 13; |
| 98 |
-$iStart=3; |
|
| 99 |
-for($i=$countImg;$i>=$iStart;$i--) {
|
|
| 100 |
- $tempTime=$currDate5-$i*300; |
|
| 101 |
- $dt = new DateTime("@$tempTime");
|
|
| 102 |
- $urlImg="https://www.nea.gov.sg/docs/default-source/rain-area/dpsri_70km_".$dt->format('YmdHi0000')."dBR.dpsri.png";
|
|
| 103 |
- |
|
| 104 |
- $classIdx=$i-$iStart; |
|
| 105 |
- if($classIdx > 9) $classIdx=9; |
|
| 106 |
- echo "<img src=\"$urlImg\" class=\"maps-$classIdx\">".PHP_EOL; |
|
| 141 |
+$iStart=1; |
|
| 142 |
+if(70 == $size) {
|
|
| 143 |
+ //Singapore only |
|
| 144 |
+?> |
|
| 145 |
+<img src="https://www.nea.gov.sg/assets/images/map/base-853.png" class="maps" > |
|
| 146 |
+<img src="https://www.nea.gov.sg/assets/images/map/SG-Township.png" class="maps" > |
|
| 147 |
+<?php |
|
| 148 |
+ for($i=$countImg;$i>=$iStart;$i--) {
|
|
| 149 |
+ $tempTime=$currDate5-$i*300; |
|
| 150 |
+ $dt = new DateTime("@$tempTime");
|
|
| 151 |
+ $urlImg="https://www.weather.gov.sg/files/rainarea/50km/v2/dpsri_70km_".$dt->format('YmdHi0000')."dBR.dpsri.png";
|
|
| 152 |
+ $classIdx=$i-$iStart; |
|
| 153 |
+ if($classIdx > 9) $classIdx=9; |
|
| 154 |
+ echo "<img src=\"$urlImg\" class=\"maps-$classIdx\">".PHP_EOL; |
|
| 155 |
+ } |
|
| 156 |
+} else if(240 == $size) {
|
|
| 157 |
+ //240km |
|
| 158 |
+?> |
|
| 159 |
+<img src="http://www.weather.gov.sg/wp-content/themes/wiptheme/assets/img/240km-v2.jpg" class="maps" > |
|
| 160 |
+<?php |
|
| 161 |
+ for($i=$countImg;$i>=$iStart;$i--) {
|
|
| 162 |
+ $tempTime=$currDate15-$i*900; |
|
| 163 |
+ $dt = new DateTime("@$tempTime");
|
|
| 164 |
+ $urlImg="https://www.weather.gov.sg/files/rainarea/240km/dpsri_240km_".$dt->format('YmdHi0000')."dBR.dpsri.png";
|
|
| 165 |
+ $classIdx=$i-$iStart; |
|
| 166 |
+ if($classIdx > 9) $classIdx=9; |
|
| 167 |
+ echo "<img src=\"$urlImg\" class=\"maps-$classIdx\">".PHP_EOL; |
|
| 168 |
+ } |
|
| 169 |
+} else {
|
|
| 170 |
+ //480km |
|
| 171 |
+?> |
|
| 172 |
+<img src="http://www.weather.gov.sg/wp-content/themes/wiptheme/assets/img/480km-v2.jpg" class="maps" > |
|
| 173 |
+<?php |
|
| 174 |
+ for($i=$countImg;$i>=$iStart;$i--) {
|
|
| 175 |
+ $tempTime=$currDate30-$i*1800; |
|
| 176 |
+ $dt = new DateTime("@$tempTime");
|
|
| 177 |
+ $urlImg="https://www.weather.gov.sg/files/rainarea/480km/dpsri_480km_".$dt->format('YmdHi0000')."dBR.dpsri.png";
|
|
| 178 |
+ $classIdx=$i-$iStart; |
|
| 179 |
+ if($classIdx > 9) $classIdx=9; |
|
| 180 |
+ echo "<img src=\"$urlImg\" class=\"maps-$classIdx\">".PHP_EOL; |
|
| 181 |
+ } |
|
| 107 | 182 |
} |
| 108 | 183 |
?> |
| 109 | 184 |
</div><!-- ./map-holder --> |