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.

view_pdf_hsd11991.html 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  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"
  10. integrity="sha512-abc123..." crossorigin="anonymous" />
  11. <style>
  12. html,
  13. body {
  14. height: 370px;
  15. padding: 0;
  16. margin: 0;
  17. }
  18. #map {
  19. height: 360px;
  20. width: 300px;
  21. overflow: hidden;
  22. float: left;
  23. border: thin solid #333;
  24. }
  25. #capture {
  26. height: 360px;
  27. width: 480px;
  28. overflow: hidden;
  29. float: left;
  30. background-color: #ECECFB;
  31. border: thin solid #333;
  32. border-left: none;
  33. }
  34. #pdfViewer {
  35. width: 100%;
  36. height: 600px;
  37. }
  38. </style>
  39. <style>
  40. /* CSS */
  41. .button-23 {
  42. background-color: #FFFFFF;
  43. border: 1px solid #222222;
  44. border-radius: 8px;
  45. box-sizing: border-box;
  46. color: #222222;
  47. cursor: pointer;
  48. display: inline-block;
  49. font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  50. font-size: 16px;
  51. font-weight: 600;
  52. line-height: 20px;
  53. margin: 0;
  54. outline: none;
  55. padding: 13px 23px;
  56. position: relative;
  57. text-align: center;
  58. text-decoration: none;
  59. touch-action: manipulation;
  60. transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
  61. user-select: none;
  62. -webkit-user-select: none;
  63. width: auto;
  64. }
  65. .button-23:focus-visible {
  66. box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
  67. transition: box-shadow .2s;
  68. }
  69. .button-23:active {
  70. background-color: #F7F7F7;
  71. border-color: #000000;
  72. transform: scale(.96);
  73. }
  74. .button-23:disabled {
  75. border-color: #DDDDDD;
  76. color: #DDDDDD;
  77. cursor: not-allowed;
  78. opacity: 1;
  79. }
  80. .map-svg {
  81. display: block;
  82. margin: 0 auto;
  83. filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
  84. a {
  85. transition: all 1s;
  86. transform-origin: 50% 50%;
  87. text-decoration: none;
  88. filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
  89. @media only screen and (min-width: 992px) {
  90. polygon,
  91. &:hover {
  92. cursor: pointer;
  93. transform: scale(1.05);
  94. filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
  95. .st0 {
  96. fill: $dark-default;
  97. }
  98. }
  99. }
  100. }
  101. .pahang-barat {
  102. fill: #427bba;
  103. }
  104. .pahang-tengah {
  105. fill: #144172;
  106. }
  107. .pahang-timur {
  108. fill: #0c6088;
  109. }
  110. .label-text {
  111. font-size: 35px;
  112. fill: white;
  113. transform: translate(0,
  114. 3px);
  115. /* adjust vertical position to centre text */
  116. }
  117. .label-text-cameron {
  118. font-size: 20px;
  119. fill: white;
  120. transform: translate(0,
  121. 3px);
  122. /* adjust vertical position to centre text */
  123. }
  124. }
  125. </style>
  126. </head>
  127. <body>
  128. <section class="section" style="max-height: 100vh;">
  129. <div class=""
  130. style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
  131. <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../details/detail_hsd11991.html"><i
  132. class="fas fa-chevron-left"></i></a></h6>
  133. <h6 style="color: white;">Raub</h6>
  134. </div>
  135. <!-- <div class="text-center pt-5"
  136. style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
  137. <h5 style="font-weight: 500;">Perbadanan Setiausaha Kerajaan Pahang</h5>
  138. </div> -->
  139. <div class="text-center pt-1 pb-5"
  140. style="background-color: white;display: flex; justify-content: center; align-items: center;margin-left: -300px;">
  141. <div class="pt-5 pb-5" style="width: 600px;height: 100px;">
  142. <!-- <img style="border-radius: 20px;" src="image.png" alt=""> -->
  143. <!-- <div id="capture"></div> -->
  144. <div id="pdfViewer"></div>
  145. </div>
  146. </div>
  147. <script src="../js/jquery-3.7.1.js" defer></script>
  148. <script src="../js/pdfjs-viewer.js" defer></script>
  149. <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"
  150. integrity="sha512-Z8CqofpIcnJN80feS2uccz+pXWgZzeKxDsDNMD/dJ6997/LSRY+W4NmEt9acwR+Gt9OHN0kkI1CTianCwoqcjQ=="
  151. crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
  152. </section>
  153. <!-- <div id="map"></div> -->
  154. <script>
  155. var map;
  156. var src = 'https://dev.suite.psk.gov.my/kml/HSD%2011991.kml';
  157. function initMap() {
  158. map = new google.maps.Map(document.getElementById('map'), {
  159. center: new google.maps.LatLng(-19.257753, 146.823688),
  160. zoom: 2,
  161. mapTypeId: 'satellite'
  162. });
  163. var kmlLayer = new google.maps.KmlLayer(src, {
  164. suppressInfoWindows: true,
  165. preserveViewport: false,
  166. map: map
  167. });
  168. }
  169. document.addEventListener('DOMContentLoaded', () => {
  170. // PDF.js script to render PDF
  171. const pdfUrl = '../HSD 11991 (2).pdf'; // Replace with your PDF URL
  172. const pdfjsLib = window['pdfjs-dist/build/pdf'];
  173. pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';
  174. pdfjsLib.getDocument(pdfUrl).promise.then(function (pdf) {
  175. pdf.getPage(1).then(function (page) {
  176. const scale = 1.5;
  177. const viewport = page.getViewport({ scale });
  178. const canvas = document.createElement('canvas');
  179. const context = canvas.getContext('2d');
  180. canvas.height = viewport.height;
  181. canvas.width = viewport.width;
  182. const renderContext = {
  183. canvasContext: context,
  184. viewport: viewport
  185. };
  186. page.render(renderContext);
  187. document.getElementById('pdfViewer').appendChild(canvas);
  188. });
  189. });
  190. })
  191. </script>
  192. <script async
  193. src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj5eAmQOg6IhdABVPCBT6ubZ3Yj_IWejI&callback=initMap">
  194. </script>
  195. </body>
  196. </html>