You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

detail_hsd11991.html 9.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5. <meta charset="utf-8">
  6. <title>SIBS 2024</title>
  7. <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
  8. <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
  10. <style>
  11. html,
  12. body {
  13. height: 370px;
  14. padding: 0;
  15. margin: 0;
  16. }
  17. #map {
  18. height: 360px;
  19. width: 300px;
  20. overflow: hidden;
  21. float: left;
  22. border: thin solid #333;
  23. }
  24. #capture {
  25. height: 360px;
  26. width: 480px;
  27. overflow: hidden;
  28. float: left;
  29. background-color: #ECECFB;
  30. border: thin solid #333;
  31. border-left: none;
  32. }
  33. #pdfViewer {
  34. width: 100%;
  35. height: 600px;
  36. }
  37. </style>
  38. <style>
  39. /* CSS */
  40. .button-23 {
  41. background-color: #FFFFFF;
  42. border: 1px solid #222222;
  43. border-radius: 8px;
  44. box-sizing: border-box;
  45. color: #222222;
  46. cursor: pointer;
  47. display: inline-block;
  48. font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  49. font-size: 16px;
  50. font-weight: 600;
  51. line-height: 20px;
  52. margin: 0;
  53. outline: none;
  54. padding: 13px 23px;
  55. position: relative;
  56. text-align: center;
  57. text-decoration: none;
  58. touch-action: manipulation;
  59. transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
  60. user-select: none;
  61. -webkit-user-select: none;
  62. width: auto;
  63. }
  64. .button-23:focus-visible {
  65. box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
  66. transition: box-shadow .2s;
  67. }
  68. .button-23:active {
  69. background-color: #F7F7F7;
  70. border-color: #000000;
  71. transform: scale(.96);
  72. }
  73. .button-23:disabled {
  74. border-color: #DDDDDD;
  75. color: #DDDDDD;
  76. cursor: not-allowed;
  77. opacity: 1;
  78. }
  79. .map-svg {
  80. display: block;
  81. margin: 0 auto;
  82. filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
  83. a {
  84. transition: all 1s;
  85. transform-origin: 50% 50%;
  86. text-decoration: none;
  87. filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
  88. @media only screen and (min-width: 992px) {
  89. polygon,
  90. &:hover {
  91. cursor: pointer;
  92. transform: scale(1.05);
  93. filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
  94. .st0 {
  95. fill: $dark-default;
  96. }
  97. }
  98. }
  99. }
  100. .pahang-barat {
  101. fill: #427bba;
  102. }
  103. .pahang-tengah {
  104. fill: #144172;
  105. }
  106. .pahang-timur {
  107. fill: #0c6088;
  108. }
  109. .label-text {
  110. font-size: 35px;
  111. fill: white;
  112. transform: translate(0,
  113. 3px);
  114. /* adjust vertical position to centre text */
  115. }
  116. .label-text-cameron {
  117. font-size: 20px;
  118. fill: white;
  119. transform: translate(0,
  120. 3px);
  121. /* adjust vertical position to centre text */
  122. }
  123. }
  124. </style>
  125. </head>
  126. <body>
  127. <section class="section" style="max-height: 100vh;">
  128. <div class=""
  129. style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
  130. <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../lists/raub.html"><i
  131. class="fas fa-chevron-left"></i></a></h6>
  132. <h6 style="color: white;">HSD 11991</h6>
  133. </div>
  134. <div class="text-center pt-5"
  135. style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
  136. <h5 style="font-weight: 500;">Perbadanan Setiausaha Kerajaan Pahang</h5>
  137. </div>
  138. <div class="text-center pt-1 pb-5"
  139. style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -200px;">
  140. <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
  141. <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
  142. <div id="map" style="width: 800px;"></div>
  143. <!-- <div id="capture"></div> -->
  144. </div>
  145. </div>
  146. <div class="text-center pt-5"
  147. style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
  148. <div style="display: flex; flex-direction: row;">
  149. <div>
  150. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Lokasi :</span> <span
  151. style="color: #ACACAC;">Taman Raub Jaya</span></h6>
  152. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Mukim :</span> <span
  153. style="color: #ACACAC;">Gali</span></h6>
  154. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Daerah :</span> <span
  155. style="color: #ACACAC;">Raub</span></h6>
  156. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Negeri :</span> <span
  157. style="color: #ACACAC;">Pahang Darul Makmur</span></h6>
  158. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Skala :</span> <span
  159. style="color: #ACACAC;">Tanpa Skala</span></h6>
  160. </div>
  161. <div style="margin-left: 100px;">
  162. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">No. Hak Milik :</span>
  163. <span style="color: #ACACAC;">HSD 11991</span>
  164. </h6>
  165. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Keluasan (Ha) :</span>
  166. <span style="color: #ACACAC;">40.47</span>
  167. </h6>
  168. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Kegunaan :</span> <span
  169. style="color: #ACACAC;">Pertanian</span></h6>
  170. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;">Syarat Nyata :</span>
  171. <span style="color: #ACACAC;">Pertanian Bersepadu Bersekali Agrotourism</span>
  172. </h6>
  173. <h6 class="pt-1" style="text-align: left;"><span style="font-weight: bold;"></span> <span
  174. style="color: #ACACAC;"></span></h6>
  175. </div>
  176. </div>
  177. </div>
  178. <div class="text-center pt-5 pb-5"
  179. style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
  180. <a href="../pdf_pages/view_pdf_hsd11991.html" class="button-23 mb-2 mr-2"
  181. style="background-color: #1F9027; color: white; border: none;width: 200px;" role="button"
  182. data-toggle="modal" data-target="#exampleModal">View
  183. PDF</a>
  184. </div>
  185. <script src="../js/jquery-3.7.1.js" defer></script>
  186. <script src="../js/pdfjs-viewer.js" defer></script>
  187. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
  188. integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
  189. crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
  190. </section>
  191. <!-- <div id="map"></div> -->
  192. <script>
  193. var map;
  194. var src = 'https://dev.suite.psk.gov.my/kml/HSD%2011991.kml';
  195. function initMap() {
  196. map = new google.maps.Map(document.getElementById('map'), {
  197. center: new google.maps.LatLng(-19.257753, 146.823688),
  198. zoom: 2,
  199. mapTypeId: 'satellite'
  200. });
  201. var kmlLayer = new google.maps.KmlLayer(src, {
  202. suppressInfoWindows: true,
  203. preserveViewport: false,
  204. map: map
  205. });
  206. }
  207. </script>
  208. <script async
  209. src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
  210. </script>
  211. </body>
  212. </html>