muqriz
/
SIBS2024
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

done bentong

master
azri 3 months ago
parent
b653969a47
commit
9cf7af7df3
8 changed files with 1508 additions and 2 deletions
Split View Show Diff Stats
  1. 268
    0
      details/bentong.html
  2. 268
    0
      details/bera.html
  3. 268
    0
      details/kuantan.html
  4. 0
    0
      details/lipis.html
  5. 2
    2
      lists/bentong.html
  6. 234
    0
      lists/bera.html
  7. 234
    0
      lists/kuantan.html
  8. 234
    0
      lists/lipis.html

+ 268
- 0
details/bentong.html View File 

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

+ 268
- 0
details/bera.html View File 

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

+ 268
- 0
details/kuantan.html View File 

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

details/detail.html → details/lipis.html View File


+ 2
- 2
lists/bentong.html View File 

@@ -20,9 +20,9 @@
20 20
21 21 
         <div class=""
22 22 
             style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
-            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="index.html"><i
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 24 
                         class="fas fa-chevron-left"></i></a></h6>
25 
-            <h6 style="color: white;">Jerantut</h6>
25 
+            <h6 style="color: white;">Bentong</h6>
26 26 
         </div>
27 27
28 28 
         <div class="text-center pt-5"

+ 234
- 0
lists/bera.html View File 

@@ -0,0 +1,234 @@
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" integrity="sha512-abc123..." crossorigin="anonymous" />
14 
+    <link rel="stylesheet" href="../css/app.css">
15 
+
16 
+</head>
17 
+
18 
+<body>
19 
+    <section class="section" style="max-height: 100vh;">
20 
+
21 
+        <div class=""
22 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 
+                        class="fas fa-chevron-left"></i></a></h6>
25 
+            <h6 style="color: white;">Bera</h6>
26 
+        </div>
27 
+
28 
+        <div class="text-center pt-5"
29 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
30 
+            <button id="pembangun_btn" type="button" class="p-1"
31 
+                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>
32 
+            <button id="penternakan_btn" type="button" class="p-1"
33 
+                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>
34 
+            <button id="pertanian_btn" type="button" class="p-1"
35 
+                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>
36 
+            <button id="industri_btn" type="button" class="p-1"
37 
+                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>
38 
+        </div>
39 
+
40 
+        <div class="text-center pt-1"
41 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
42 
+            <div class="pt-5" style="width: 600px;height: 100px;">
43 
+                <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
44 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
45 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
46 
+                    <g>
47 
+                        <a href="testing.html" data-area="jerantut">
48 
+                            <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
49 
+                                        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
50 
+                                        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
51 
+                                        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
52 
+                                        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
53 
+                                        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
54 
+                                        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
55 
+                                        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
56 
+                                        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
57 
+                                        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
58 
+                                        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
59 
+                                        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
60 
+                                        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
61 
+                                        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
62 
+                                        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
63 
+                                        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
64 
+                                        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
65 
+                                        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
66 
+                                        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
67 
+                                        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
68 
+                                        C414.2,86.1,420.9,98.6,431.5,110.2z" />
69 
+                        </a>
70 
+                    </g>
71 
+                </svg>
72 
+
73 
+
74 
+            </div>
75 
+        </div>
76 
+
77 
+
78 
+        <div id="pembangun_plot" class="content-div">
79 
+            <div class="text-center pt-5"
80 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
81 
+                <h6>Pembangunan</h6><br>
82 
+
83 
+            </div>
84 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
85 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
86 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
87 
+                    role="button">HSD 23453</a>
88 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
89 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
90 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
91 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
92 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
93 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
94 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
95 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
96 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
97 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
98 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
99 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
100 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
101 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
102 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
103 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
104 
+                <a href="detail.html" class="button-23 mb-2"
105 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
106 
+            </div>
107 
+        </div>
108 
+
109 
+        <div id="penternakan_plot" class="hidden content-div">
110 
+            <div class="text-center pt-5"
111 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
112 
+                <h6>Penternakan</h6><br>
113 
+
114 
+            </div>
115 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
116 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
117 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
118 
+                    role="button">HSD 23453</a>
119 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
120 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
121 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
122 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
123 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
124 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
125 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
126 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
127 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
128 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
129 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
130 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
131 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
132 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
133 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
134 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
135 
+                <a href="detail.html" class="button-23 mb-2"
136 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
137 
+            </div>
138 
+        </div>
139 
+
140 
+        <div id="industri_plot" class="hidden content-div">
141 
+            <div class="text-center pt-5"
142 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
143 
+                <h6>Industri</h6><br>
144 
+
145 
+            </div>
146 
+            <div class="text-center pt-2 flex-wrap"
147 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
148 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
149 
+                    role="button">HSD 23453</a>
150 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
151 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23sss453</a>
152 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
153 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
154 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
155 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
156 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
157 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
158 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
159 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
160 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
161 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
162 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
163 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
164 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
165 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
166 
+                <a href="detail.html" class="button-23 mb-2"
167 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
168 
+            </div>
169 
+        </div>
170 
+
171 
+        <div id="pertanian_plot" class="hidden content-div">
172 
+            <div class="text-center pt-5"
173 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
174 
+                <h6>Pertanian</h6><br>
175 
+
176 
+            </div>
177 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
178 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
179 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
180 
+                    role="button">HSD 23453</a>
181 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
182 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
183 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
184 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
185 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
186 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
187 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
188 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
189 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
190 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
191 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
192 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
193 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
194 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
195 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
196 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
197 
+                <a href="detail.html" class="button-23 mb-2"
198 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
199 
+            </div>
200 
+        </div>
201 
+
202 
+    </section>
203 
+
204 
+    <script>
205 
+
206 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
207 
+            showDiv('pembangun_plot');
208 
+        });
209 
+
210 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
211 
+            showDiv('penternakan_plot');
212 
+        });
213 
+
214 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
215 
+            showDiv('pertanian_plot');
216 
+        });
217 
+
218 
+        document.getElementById('industri_btn').addEventListener('click', function () {
219 
+            showDiv('industri_plot');
220 
+        });
221 
+
222 
+        function showDiv(divId) {
223 
+            var divs = document.getElementsByClassName('content-div');
224 
+            for (var i = 0; i < divs.length; i++) {
225 
+                divs[i].classList.add('hidden');
226 
+            }
227 
+            document.getElementById(divId).classList.remove('hidden');
228 
+        }
229 
+    </script>
230 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
231 
+
232 
+</body>
233 
+
234 
+</html>

+ 234
- 0
lists/kuantan.html View File 

@@ -0,0 +1,234 @@
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" integrity="sha512-abc123..." crossorigin="anonymous" />
14 
+    <link rel="stylesheet" href="../css/app.css">
15 
+
16 
+</head>
17 
+
18 
+<body>
19 
+    <section class="section" style="max-height: 100vh;">
20 
+
21 
+        <div class=""
22 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 
+                        class="fas fa-chevron-left"></i></a></h6>
25 
+            <h6 style="color: white;">Kuantan</h6>
26 
+        </div>
27 
+
28 
+        <div class="text-center pt-5"
29 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
30 
+            <button id="pembangun_btn" type="button" class="p-1"
31 
+                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>
32 
+            <button id="penternakan_btn" type="button" class="p-1"
33 
+                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>
34 
+            <button id="pertanian_btn" type="button" class="p-1"
35 
+                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>
36 
+            <button id="industri_btn" type="button" class="p-1"
37 
+                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>
38 
+        </div>
39 
+
40 
+        <div class="text-center pt-1"
41 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
42 
+            <div class="pt-5" style="width: 600px;height: 100px;">
43 
+                <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
44 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
45 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
46 
+                    <g>
47 
+                        <a href="testing.html" data-area="jerantut">
48 
+                            <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
49 
+                                        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
50 
+                                        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
51 
+                                        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
52 
+                                        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
53 
+                                        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
54 
+                                        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
55 
+                                        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
56 
+                                        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
57 
+                                        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
58 
+                                        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
59 
+                                        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
60 
+                                        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
61 
+                                        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
62 
+                                        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
63 
+                                        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
64 
+                                        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
65 
+                                        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
66 
+                                        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
67 
+                                        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
68 
+                                        C414.2,86.1,420.9,98.6,431.5,110.2z" />
69 
+                        </a>
70 
+                    </g>
71 
+                </svg>
72 
+
73 
+
74 
+            </div>
75 
+        </div>
76 
+
77 
+
78 
+        <div id="pembangun_plot" class="content-div">
79 
+            <div class="text-center pt-5"
80 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
81 
+                <h6>Pembangunan</h6><br>
82 
+
83 
+            </div>
84 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
85 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
86 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
87 
+                    role="button">HSD 23453</a>
88 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
89 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
90 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
91 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
92 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
93 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
94 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
95 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
96 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
97 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
98 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
99 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
100 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
101 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
102 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
103 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
104 
+                <a href="detail.html" class="button-23 mb-2"
105 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
106 
+            </div>
107 
+        </div>
108 
+
109 
+        <div id="penternakan_plot" class="hidden content-div">
110 
+            <div class="text-center pt-5"
111 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
112 
+                <h6>Penternakan</h6><br>
113 
+
114 
+            </div>
115 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
116 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
117 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
118 
+                    role="button">HSD 23453</a>
119 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
120 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
121 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
122 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
123 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
124 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
125 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
126 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
127 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
128 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
129 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
130 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
131 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
132 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
133 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
134 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
135 
+                <a href="detail.html" class="button-23 mb-2"
136 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
137 
+            </div>
138 
+        </div>
139 
+
140 
+        <div id="industri_plot" class="hidden content-div">
141 
+            <div class="text-center pt-5"
142 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
143 
+                <h6>Industri</h6><br>
144 
+
145 
+            </div>
146 
+            <div class="text-center pt-2 flex-wrap"
147 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
148 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
149 
+                    role="button">HSD 23453</a>
150 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
151 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23sss453</a>
152 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
153 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
154 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
155 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
156 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
157 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
158 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
159 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
160 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
161 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
162 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
163 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
164 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
165 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
166 
+                <a href="detail.html" class="button-23 mb-2"
167 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
168 
+            </div>
169 
+        </div>
170 
+
171 
+        <div id="pertanian_plot" class="hidden content-div">
172 
+            <div class="text-center pt-5"
173 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
174 
+                <h6>Pertanian</h6><br>
175 
+
176 
+            </div>
177 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
178 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
179 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
180 
+                    role="button">HSD 23453</a>
181 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
182 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
183 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
184 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
185 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
186 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
187 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
188 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
189 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
190 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
191 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
192 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
193 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
194 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
195 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
196 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
197 
+                <a href="detail.html" class="button-23 mb-2"
198 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
199 
+            </div>
200 
+        </div>
201 
+
202 
+    </section>
203 
+
204 
+    <script>
205 
+
206 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
207 
+            showDiv('pembangun_plot');
208 
+        });
209 
+
210 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
211 
+            showDiv('penternakan_plot');
212 
+        });
213 
+
214 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
215 
+            showDiv('pertanian_plot');
216 
+        });
217 
+
218 
+        document.getElementById('industri_btn').addEventListener('click', function () {
219 
+            showDiv('industri_plot');
220 
+        });
221 
+
222 
+        function showDiv(divId) {
223 
+            var divs = document.getElementsByClassName('content-div');
224 
+            for (var i = 0; i < divs.length; i++) {
225 
+                divs[i].classList.add('hidden');
226 
+            }
227 
+            document.getElementById(divId).classList.remove('hidden');
228 
+        }
229 
+    </script>
230 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
231 
+
232 
+</body>
233 
+
234 
+</html>

+ 234
- 0
lists/lipis.html View File 

@@ -0,0 +1,234 @@
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" integrity="sha512-abc123..." crossorigin="anonymous" />
14 
+    <link rel="stylesheet" href="../css/app.css">
15 
+
16 
+</head>
17 
+
18 
+<body>
19 
+    <section class="section" style="max-height: 100vh;">
20 
+
21 
+        <div class=""
22 
+            style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
23 
+            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="../index.html"><i
24 
+                        class="fas fa-chevron-left"></i></a></h6>
25 
+            <h6 style="color: white;">Lips</h6>
26 
+        </div>
27 
+
28 
+        <div class="text-center pt-5"
29 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
30 
+            <button id="pembangun_btn" type="button" class="p-1"
31 
+                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>
32 
+            <button id="penternakan_btn" type="button" class="p-1"
33 
+                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>
34 
+            <button id="pertanian_btn" type="button" class="p-1"
35 
+                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>
36 
+            <button id="industri_btn" type="button" class="p-1"
37 
+                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>
38 
+        </div>
39 
+
40 
+        <div class="text-center pt-1"
41 
+            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
42 
+            <div class="pt-5" style="width: 600px;height: 100px;">
43 
+                <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
44 
+                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
45 
+                    style="enable-background: new 0 0 1080 1080" xml:space="preserve">
46 
+                    <g>
47 
+                        <a href="testing.html" data-area="jerantut">
48 
+                            <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
49 
+                                        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
50 
+                                        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
51 
+                                        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
52 
+                                        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
53 
+                                        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
54 
+                                        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
55 
+                                        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
56 
+                                        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
57 
+                                        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
58 
+                                        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
59 
+                                        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
60 
+                                        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
61 
+                                        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
62 
+                                        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
63 
+                                        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
64 
+                                        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
65 
+                                        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
66 
+                                        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
67 
+                                        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
68 
+                                        C414.2,86.1,420.9,98.6,431.5,110.2z" />
69 
+                        </a>
70 
+                    </g>
71 
+                </svg>
72 
+
73 
+
74 
+            </div>
75 
+        </div>
76 
+
77 
+
78 
+        <div id="pembangun_plot" class="content-div">
79 
+            <div class="text-center pt-5"
80 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
81 
+                <h6>Pembangunan</h6><br>
82 
+
83 
+            </div>
84 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
85 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
86 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
87 
+                    role="button">HSD 23453</a>
88 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
89 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
90 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
91 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
92 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
93 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
94 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
95 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
96 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
97 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
98 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
99 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
100 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
101 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
102 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
103 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
104 
+                <a href="detail.html" class="button-23 mb-2"
105 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
106 
+            </div>
107 
+        </div>
108 
+
109 
+        <div id="penternakan_plot" class="hidden content-div">
110 
+            <div class="text-center pt-5"
111 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
112 
+                <h6>Penternakan</h6><br>
113 
+
114 
+            </div>
115 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
116 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
117 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
118 
+                    role="button">HSD 23453</a>
119 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
120 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
121 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
122 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
123 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
124 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
125 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
126 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
127 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
128 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
129 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
130 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
131 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
132 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
133 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
134 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
135 
+                <a href="detail.html" class="button-23 mb-2"
136 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
137 
+            </div>
138 
+        </div>
139 
+
140 
+        <div id="industri_plot" class="hidden content-div">
141 
+            <div class="text-center pt-5"
142 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
143 
+                <h6>Industri</h6><br>
144 
+
145 
+            </div>
146 
+            <div class="text-center pt-2 flex-wrap"
147 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
148 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
149 
+                    role="button">HSD 23453</a>
150 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
151 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23sss453</a>
152 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
153 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
154 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
155 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
156 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
157 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
158 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
159 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
160 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
161 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
162 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
163 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
164 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
165 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
166 
+                <a href="detail.html" class="button-23 mb-2"
167 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
168 
+            </div>
169 
+        </div>
170 
+
171 
+        <div id="pertanian_plot" class="hidden content-div">
172 
+            <div class="text-center pt-5"
173 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
174 
+                <h6>Pertanian</h6><br>
175 
+
176 
+            </div>
177 
+            <div class="text-center pt-2 text-nowrap flex-wrap"
178 
+                style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
179 
+                <a href="detail.html" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2"
180 
+                    role="button">HSD 23453</a>
181 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
182 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
183 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
184 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
185 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
186 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
187 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
188 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
189 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
190 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
191 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
192 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
193 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
194 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
195 
+                <a href="detail.html" class="button-23 mb-2 mr-2"
196 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
197 
+                <a href="detail.html" class="button-23 mb-2"
198 
+                    style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
199 
+            </div>
200 
+        </div>
201 
+
202 
+    </section>
203 
+
204 
+    <script>
205 
+
206 
+        document.getElementById('pembangun_btn').addEventListener('click', function () {
207 
+            showDiv('pembangun_plot');
208 
+        });
209 
+
210 
+        document.getElementById('penternakan_btn').addEventListener('click', function () {
211 
+            showDiv('penternakan_plot');
212 
+        });
213 
+
214 
+        document.getElementById('pertanian_btn').addEventListener('click', function () {
215 
+            showDiv('pertanian_plot');
216 
+        });
217 
+
218 
+        document.getElementById('industri_btn').addEventListener('click', function () {
219 
+            showDiv('industri_plot');
220 
+        });
221 
+
222 
+        function showDiv(divId) {
223 
+            var divs = document.getElementsByClassName('content-div');
224 
+            for (var i = 0; i < divs.length; i++) {
225 
+                divs[i].classList.add('hidden');
226 
+            }
227 
+            document.getElementById(divId).classList.remove('hidden');
228 
+        }
229 
+    </script>
230 
+    <script defer src="/ruta relativa a mi archivo .js"></script>
231 
+
232 
+</body>
233 
+
234 
+</html>

Write Preview
Loading…
Cancel
Save