muqriz
/
SIBS2024
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
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.
2 Commits
1 Branch
Tree: 8f8590baac
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '8f8590baac'
${ noResults }
SIBS2024/testing.html

testing.html 19KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 
  1. <!DOCTYPE html>

  2. <html>

  3. 

  4. <head>

  5.     <meta charset="UTF-8">

  6.     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->

  7.     <!-- CSP is a PITA ;). Disabled, don't try this at home!-->

  8.     <meta http-equiv="Content-Security-Policy" content="">

  9.     <!-- include bulma css -->

  10.     <link rel="stylesheet" href="bulma/css/bulma.min.css">

  11.     <title>My Test App</title>

  12.     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

  13.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"

  14.         integrity="sha512-abc123..." crossorigin="anonymous" />

  15. 

  16.     <style>

  17.         .hidden {

  18.             display: none;

  19.         }

  20. 

  21.         .button-23 {

  22.             background-color: #FFFFFF;

  23.             border: 1px solid #222222;

  24.             border-radius: 8px;

  25.             box-sizing: border-box;

  26.             color: #222222;

  27.             cursor: pointer;

  28.             display: inline-block;

  29.             font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

  30.             font-size: 15px;

  31.             font-weight: 600;

  32.             line-height: 20px;

  33.             margin: 0;

  34.             outline: none;

  35.             padding: 13px 23px;

  36.             position: relative;

  37.             text-align: center;

  38.             text-decoration: none;

  39.             touch-action: manipulation;

  40.             transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;

  41.             user-select: none;

  42.             -webkit-user-select: none;

  43.             width: auto;

  44.         }

  45. 

  46.         .button-23:focus-visible {

  47.             box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;

  48.             transition: box-shadow .2s;

  49.         }

  50. 

  51.         .button-23:active {

  52.             background-color: #F7F7F7;

  53.             border-color: #000000;

  54.             transform: scale(.96);

  55.         }

  56. 

  57.         .button-23:disabled {

  58.             border-color: #DDDDDD;

  59.             color: #DDDDDD;

  60.             cursor: not-allowed;

  61.             opacity: 1;

  62.         }

  63. 

  64.         .map-svg {

  65.             display: block;

  66.             margin: 0 auto;

  67.             filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));

  68. 

  69.             a {

  70.                 transition: all 1s;

  71.                 transform-origin: 50% 50%;

  72.                 text-decoration: none;

  73.                 filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));

  74. 

  75.                 @media only screen and (min-width: 992px) {

  76. 

  77.                     polygon,

  78.                     &:hover {

  79.                         cursor: pointer;

  80.                         transform: scale(1.05);

  81.                         filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));

  82. 

  83.                         .st0 {

  84.                             fill: $dark-default;

  85.                         }

  86.                     }

  87.                 }

  88.             }

  89. 

  90.             .pahang-barat {

  91.                 fill: #427bba;

  92.             }

  93. 

  94.             .pahang-tengah {

  95.                 fill: #144172;

  96.             }

  97. 

  98.             .pahang-timur {

  99.                 fill: #0c6088;

  100.             }

  101. 

  102.             .label-text {

  103.                 font-size: 35px;

  104.                 fill: white;

  105.                 transform: translate(0,

  106.                         3px);

  107.                 /* adjust vertical position to centre text */

  108.             }

  109. 

  110.             .label-text-cameron {

  111.                 font-size: 20px;

  112.                 fill: white;

  113.                 transform: translate(0,

  114.                         3px);

  115.                 /* adjust vertical position to centre text */

  116.             }

  117. 

  118. 

  119.         }

  120.     </style>

  121.     <script>

  122.         // window.addEventListener('load', (event) => {

  123.         //     document.querySelector(".hello").textContent = "Hello from Electron with bulma css!";

  124.         // });

  125.     </script>

  126. </head>

  127. 

  128. <body>

  129.     <section class="section" style="max-height: 100vh;">

  130. 

  131.         <div class=""

  132.             style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">

  133.             <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="index.html"><i

  134.                         class="fas fa-chevron-left"></i></a></h6>

  135.             <h6 style="color: white;">Jerantut</h6>

  136.         </div>

  137. 

  138.         <div class="text-center pt-5"

  139.             style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">

  140.             <button id="pembangun_btn" type="button" class="p-1"

  141.                 style="font-weight: 500; border-top: 4px solid #BF3030; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Pembangunan&emsp;&emsp;</button>

  142.             <button id="penternakan_btn" type="button" class="p-1"

  143.                 style="font-weight: 500; border-top: 4px solid #3B47E0; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Penternakan&emsp;&emsp;</button>

  144.             <button id="pertanian_btn" type="button" class="p-1"

  145.                 style="font-weight: 500; border-top: 4px solid #E2E236; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Pertanian&emsp;&emsp;</button>

  146.             <button id="industri_btn" type="button" class="p-1"

  147.                 style="font-weight: 500; border-top: 4px solid #32A740; border-right: none; border-bottom: none; border-left: none; margin: 0; background-color: transparent;">&emsp;&emsp;Industri&emsp;&emsp;</button>

  148.         </div>

  149. 

  150.         <div class="text-center pt-1"

  151.             style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">

  152.             <div class="pt-5" style="width: 600px;height: 100px;">

  153.                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"

  154.                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"

  155.                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">

  156.                     <g>

  157.                         <a href="testing.html" data-area="jerantut">

  158.                             <path id="jerantut" class="pahang-barat" d="M431.5,110.2c5.4,5.9,6.4,12.3,2.5,19.5c-3.7,6.8-4.5,14.3-3.7,21.9h0c6.1,6.2,11.1,12-3.4,12.9

  159.                                         c-4.7,0.3-7.1,4.1-9.8,7.3c-3.3,9.5-3.4,18.6,2.6,27.4c4.8,7.1,2.7,15.3,3.2,23.1c6.7,4.2,9.9,10.2,9.4,18.1c0,0.4-0.1,0.9,0,1.3

  160.                                         c10.5,20.1,4.7,41.2,3.7,62c3.3,0.8,6.6,1.5,9.9,2.3c7.1,1.7,16,3.6,16.1,11.6c0.1,7.7-5.5,14.9-13.2,18.9c-4.1,2.1-8.1,4.6-12.5,6

  161.                                         c-7.9,2.5-18.2,1.9-15.2,15.6c0.5,2.3-6.1,5.6-8,2.5c-6.5-10.5-22-8.4-27-20.7c-2.8-6.9-11.3-6.5-16.5-10.9c-3.7-3.2-7.2-0.5-7,4.7

  162.                                         c0.1,2.9,0.7,5.8,1,8.7c1.1,4.1,2.7,7.5,6.1,10.6c8.4,7.6,7.2,14.4-2.8,19.2c-1.9,0.9-3.9,1.4-5.9,2.1c-21.4,6.9-22.1,9.7-4.7,25.1

  163.                                         c6,5.3,8.7,9.3,0.1,14c-0.5,3.7-0.3,7.7-1.6,11.1c-3.6,9.5,3.7,13.5,8.9,11.1c15.5-7.3,33.5-5.8,48.3-14.7c0,0,0,0,0,0

  164.                                         c0.8-5.5,3.8-8.5,9.4-7.2c5.9,1.4,7.7,5.6,6.9,11.5c-0.6,4.5-0.6,9.1-0.9,13.7c0,0,0,0,0,0c4.4,1,8.2-1.1,12.2-2.3

  165.                                         c3.7-1.1,9.5-2.2,10.5,1.2c4.4,13.6,15.3,8.5,23.6,8.4c9.1-0.2,14.2,3.1,16.9,11.3c0.5,1.6,1.3,3.1,2.2,4.5

  166.                                         c3.7,5.7,4.8,16.6,12.2,15.5c7-1,11.5-10.1,16-16.9c7.6-11.4,9.9-23.7,8.1-37c-0.7-5.4,0.2-10.7,7.1-11c6.5-0.3,11.1,2.7,12.9,9.6

  167.                                         c1,3.9-2,10,5,11.3c0,0,0,0,0,0c7.8-9.7,17.1-3.1,25.9-2.3c0,0,0,0,0,0c9.3-10.9,18.8-4,28.3-1.1c0.9,0,2,0.4,3.1,0.8

  168.                                         c10.6-0.9,20.1,8.8,31.2,3.3c15.2-9,12.5-28.7,24.3-40.1c5.4-5.2,11.4-9.6,16.9-14.7c5.9-5.6,10.6,1.1,13.3,6.4

  169.                                         c4.9,9.6,10.1,7.4,12.2-0.6c4.4-16.9,14.8-26.4,31.2-30.2c1.5-3.4,3.2-6.9,1.2-10.6c-6-11.1-1.7-19.8,6.2-27.7c0,0,0,0,0,0

  170.                                         c-3.8-3.3-7.7-6.5-11.2-10.1c-3.6-3.6-5.9-9.1-1.6-12.4c10.9-8.4,9.7-18.2,6-29.2c-1.3-3.9,1.5-7.3,3.7-10.4

  171.                                         c2.5-3.5,4.2-7.3,3.4-11.8c-1.1-6.5,1.8-11.4,6.7-15.5c2.9-2.4,6.2-4.9,6.9-8.9c2.2-12.1,8.6-17.9,24.1-13.2

  172.                                         c-4.2-8.1-7.4-14.8-3.2-20.1c12.5-15.7,0.6-26.4-7.1-37.8c-5.6-8.2-13-10.7-23.1-5.7c-9.3,4.6-20.1,5.9-28.9-0.9

  173.                                         c-10.7-8.2-17.2-19.4-18.1-33.4c-0.4-6.2-1.4-12,7.1-13.5c4.7-0.8,6.7-3.9,4-8.3c-2.6-4.2-1.9-7.1,2.2-9.4c1.8-1,3.6-1.8,3.3-4.6

  174.                                         c-1.7-15.9-19.5-28.8-35.8-25.6c-3.4,0.7-6.5,1.3-10,0.6c-21.3-4.2-39.7-13-51.6-32.3c-2.2-3.6-5.3-7-9.6-7.8

  175.                                         c-5.9-1.2-10.9-10.1-16.8-4.9c-5.9,5.2-2.8,13.2-0.6,20.2c1.5,4.6,4.9,10,0.1,14.1c-4.1,3.5-10.8,3.2-14.5,0.9

  176.                                         c-10.1-6.3-14.5-0.7-20.1,6.4c-8.4,10.4-13.2,10.3-23,1.2c-2.5-2.3-4.6-5-6.9-7.4c-7.6-7.9-33.2-11.8-42.8-6.8

  177.                                         c-3.7,1.9-2.3,4.5-2.2,7.4c0.2,12.7-10,19.1-17.9,26c-6.4,5.5-13.4-0.5-19.5-4.2c-13.3-8-23.5-3.9-28.1,11c0,0,0,0,0,0

  178.                                         C414.2,86.1,420.9,98.6,431.5,110.2z" />

  179.                         </a>

  180.                     </g>

  181.                 </svg>

  182. 

  183. 

  184.             </div>

  185.         </div>

  186. 

  187. 

  188.         <div id="pembangun_plot" class="content-div">

  189.             <div class="text-center pt-5"

  190.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">

  191.                 <h6>Pembangunan</h6><br>

  192. 

  193.             </div>

  194.             <div class="text-center pt-2 text-nowrap"

  195.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">

  196.                 <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"

  197.                     role="button">HSD 23453</a>

  198.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  199.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  200.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  201.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  202.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  203.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  204.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  205.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  206.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  207.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  208.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  209.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  210.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  211.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  212.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  213.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  214.                 <a href="detail.html" class="button-23 mb-2"

  215.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  216.             </div>

  217.         </div>

  218. 

  219.         <div id="penternakan_plot" class="hidden content-div">

  220.             <div class="text-center pt-5"

  221.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">

  222.                 <h6>Penternakan</h6><br>

  223. 

  224.             </div>

  225.             <div class="text-center pt-2 text-nowrap"

  226.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">

  227.                 <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"

  228.                     role="button">HSD 23453</a>

  229.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  230.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  231.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  232.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  233.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  234.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  235.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  236.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  237.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  238.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  239.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  240.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  241.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  242.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  243.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  244.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  245.                 <a href="detail.html" class="button-23 mb-2"

  246.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  247.             </div>

  248.         </div>

  249. 

  250.         <div id="industri_plot" class="hidden content-div">

  251.             <div class="text-center pt-5"

  252.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">

  253.                 <h6>Industri</h6><br>

  254. 

  255.             </div>

  256.             <div class="text-center pt-2 text-nowrap"

  257.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">

  258.                 <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"

  259.                     role="button">HSD 23453</a>

  260.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  261.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  262.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  263.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  264.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  265.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  266.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  267.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  268.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  269.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  270.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  271.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  272.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  273.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  274.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  275.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  276.                 <a href="detail.html" class="button-23 mb-2"

  277.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  278.             </div>

  279.         </div>

  280. 

  281.         <div id="pertanian_plot" class="hidden content-div">

  282.             <div class="text-center pt-5"

  283.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">

  284.                 <h6>Pertanian</h6><br>

  285. 

  286.             </div>

  287.             <div class="text-center pt-2 text-nowrap"

  288.                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">

  289.                 <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"

  290.                     role="button">HSD 23453</a>

  291.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  292.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  293.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  294.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  295.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  296.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  297.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  298.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  299.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  300.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  301.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  302.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  303.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  304.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  305.                 <a href="detail.html" class="button-23 mb-2 mr-2"

  306.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  307.                 <a href="detail.html" class="button-23 mb-2"

  308.                     style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>

  309.             </div>

  310.         </div>

  311. 

  312.     </section>

  313. 

  314.     <script>

  315. 

  316.         document.getElementById('pembangun_btn').addEventListener('click', function () {

  317.             showDiv('pembangun_plot');

  318.         });

  319. 

  320.         document.getElementById('penternakan_btn').addEventListener('click', function () {

  321.             showDiv('penternakan_plot');

  322.         });

  323. 

  324.         document.getElementById('pertanian_btn').addEventListener('click', function () {

  325.             showDiv('pertanian_plot');

  326.         });

  327. 

  328.         document.getElementById('industri_btn').addEventListener('click', function () {

  329.             showDiv('industri_plot');

  330.         });

  331. 

  332.         function showDiv(divId) {

  333.             var divs = document.getElementsByClassName('content-div');

  334.             for (var i = 0; i < divs.length; i++) {

  335.                 divs[i].classList.add('hidden');

  336.             }

  337.             document.getElementById(divId).classList.remove('hidden');

  338.         }

  339.     </script>

  340.     <script defer src="/ruta relativa a mi archivo .js"></script>

  341. 

  342. </body>

  343. 

  344. </html>