|
|
@@ -13,7 +13,8 @@
|
|
13
|
13
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
|
14
|
14
|
<link rel="stylesheet" href="./css/app.css">
|
|
15
|
15
|
|
|
16
|
|
-
|
|
|
16
|
+
|
|
|
17
|
+
|
|
17
|
18
|
<script>
|
|
18
|
19
|
// window.addEventListener('load', (event) => {
|
|
19
|
20
|
// document.querySelector(".hello").textContent = "Hello from Electron with bulma css!";
|
|
|
@@ -24,23 +25,33 @@
|
|
24
|
25
|
<body>
|
|
25
|
26
|
<section class="section" style="max-height: 120vh;">
|
|
26
|
27
|
|
|
27
|
|
- <div style="background-image: url(Mask_Group_2.png); min-height: 175px; display: flex; flex-direction: column; justify-content: center; padding-left: 100px;padding-right: 100px;">
|
|
|
28
|
+ <div
|
|
|
29
|
+ style="background-image: url(Mask_Group_2.png); min-height: 175px; display: flex; flex-direction: column; justify-content: center; padding-left: 100px;padding-right: 100px;">
|
|
28
|
30
|
<img class="pb-2" src="Group_49433x.png" style="height: auto;width: 8%" alt="">
|
|
29
|
31
|
<h6 style="color: white; margin-bottom: 2px;">Pelan Kawasan Tanah Milik Perbadanan</h6>
|
|
30
|
|
- <h6 style="color: white; margin-bottom: 10px;font-weight: 400;">Setiausaha Kerajaan (PSK) Pahang Tanpa Skala</h6>
|
|
|
32
|
+ <h6 style="color: white; margin-bottom: 10px;font-weight: 400;">Setiausaha Kerajaan (PSK) Pahang Tanpa Skala
|
|
|
33
|
+ </h6>
|
|
|
34
|
+
|
|
|
35
|
+ <form id="fileForm" style="display: flex; align-items: center;">
|
|
|
36
|
+ <input id="fileNumber" type="search" class="p-1"
|
|
|
37
|
+ style="border-radius: 21px; border: none; padding-left: 20px !important; flex: 1;"
|
|
|
38
|
+ placeholder="Search Here">
|
|
|
39
|
+ <button class="btn btn-primary" type="submit" style="margin-left: 10px;">Search</button>
|
|
|
40
|
+ </form>
|
|
|
41
|
+
|
|
31
|
42
|
|
|
32
|
|
- <input type="search" class="p-1" style="border-radius: 21px; border: none; padding-left: 20px !important;" placeholder="Search Here">
|
|
33
|
43
|
</div>
|
|
34
|
44
|
|
|
35
|
|
- <div class="text-center pt-1" style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
|
|
|
45
|
+ <div class="text-center pt-1"
|
|
|
46
|
+ style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
|
|
36
|
47
|
<div class="pt-5" style="width: 600px;height: 100px;">
|
|
37
|
48
|
<svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
|
|
38
|
49
|
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
|
|
39
|
50
|
style="enable-background: new 0 0 1080 1080" xml:space="preserve">
|
|
40
|
51
|
<g>
|
|
41
|
52
|
<!-- Cameron Highland -->
|
|
42
|
|
- <a href="./lists/bentong.html" data-area="cameron-highland"
|
|
43
|
|
- data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
|
|
53
|
+ <a href="./lists/bentong.html" data-area="cameron-highland" data-bs-toggle="tooltip"
|
|
|
54
|
+ data-bs-placement="top" title="Tooltip on top">
|
|
44
|
55
|
<path id="cameron-highland" class="pahang-barat" d="M77.6,205.5c11.6-0.8,19.5-9.2,28.7-12c13-4,14.2-13.4,19.1-21.7c0,0,0,0,0,0c0,0,0,0,0,0
|
|
45
|
56
|
c-0.1-5-0.2-10.1-0.3-15.1c-2.4-4.8-11.7-7.4-4.9-15.2h0c-0.1-1.5-0.3-3.1-0.4-4.6c0,0,0,0,0,0c-3.5-5.5-3.3-11-0.1-16.5
|
|
46
|
57
|
c0,0,0,0,0,0c0.2-1.4,0.4-2.8,0.6-4.2c0.3,0.6,0.6,1.2,0.8,1.8c-0.1-0.7-0.3-1.3-0.8-1.8c-0.1-4.3-0.2-8.5-0.3-12.8
|
|
|
@@ -231,24 +242,155 @@
|
|
231
|
242
|
</g>
|
|
232
|
243
|
</svg>
|
|
233
|
244
|
|
|
234
|
|
-
|
|
|
245
|
+
|
|
235
|
246
|
</div>
|
|
236
|
247
|
</div>
|
|
237
|
248
|
|
|
238
|
249
|
|
|
239
|
250
|
|
|
240
|
|
-
|
|
241
|
|
-
|
|
242
|
|
-
|
|
243
|
|
-
|
|
244
|
|
-
|
|
245
|
251
|
|
|
246
|
252
|
|
|
247
|
|
-
|
|
|
253
|
+
|
|
|
254
|
+
|
|
|
255
|
+
|
|
|
256
|
+
|
|
|
257
|
+
|
|
|
258
|
+
|
|
248
|
259
|
</section>
|
|
249
|
260
|
|
|
250
|
261
|
<script defer src="/ruta relativa a mi archivo .js"></script>
|
|
251
|
262
|
|
|
|
263
|
+ <script>
|
|
|
264
|
+
|
|
|
265
|
+ document.getElementById('fileForm').addEventListener('submit', function (event) {
|
|
|
266
|
+ event.preventDefault(); // Prevent the form from submitting the traditional way
|
|
|
267
|
+
|
|
|
268
|
+ var fileInput = document.getElementById('fileNumber').value;
|
|
|
269
|
+ var numberRegex = /\d/; // Regular expression to check for any digit
|
|
|
270
|
+ var matchedFile;
|
|
|
271
|
+
|
|
|
272
|
+ if (numberRegex.test(fileInput)) {
|
|
|
273
|
+ // Hardcoded list of files containing numbers
|
|
|
274
|
+ var numberFiles = [
|
|
|
275
|
+ 'details/detail_hsd2384.html',
|
|
|
276
|
+ 'details/detail_hsd4638.html',
|
|
|
277
|
+ 'details/detail_hsd5621.html',
|
|
|
278
|
+ 'details/detail_hsd5625.html',
|
|
|
279
|
+ 'details/detail_hsd5627.html',
|
|
|
280
|
+ 'details/detail_hsd5714.html',
|
|
|
281
|
+ 'details/detail_hsd5715.html',
|
|
|
282
|
+ 'details/detail_hsd5734.html',
|
|
|
283
|
+ 'details/detail_hsd5738.html',
|
|
|
284
|
+ 'details/detail_hsd5745.html',
|
|
|
285
|
+ 'details/detail_hsd5749.html',
|
|
|
286
|
+ 'details/detail_hsd5761.html',
|
|
|
287
|
+ 'details/detail_hsd5762.html',
|
|
|
288
|
+ 'details/detail_hsd5763.html',
|
|
|
289
|
+ 'details/detail_hsd5764.html',
|
|
|
290
|
+ 'details/detail_hsd11863.html',
|
|
|
291
|
+ 'details/detail_hsd11991.html',
|
|
|
292
|
+ 'details/detail_pn16507.html',
|
|
|
293
|
+ 'details/detail_pn28612.html',
|
|
|
294
|
+ 'details/penternakan_hsd_19372.html'
|
|
|
295
|
+ ];
|
|
|
296
|
+
|
|
|
297
|
+ var regex = new RegExp(fileInput);
|
|
|
298
|
+ matchedFile = numberFiles.find(file => regex.test(file));
|
|
|
299
|
+ } else {
|
|
|
300
|
+ // Hardcoded list of files containing names
|
|
|
301
|
+ var nameFiles = [
|
|
|
302
|
+ 'lists/bentong.html',
|
|
|
303
|
+ 'lists/maran.html',
|
|
|
304
|
+ 'lists/pekan.html',
|
|
|
305
|
+ 'lists/raub.html',
|
|
|
306
|
+ 'lists/rompin.html',
|
|
|
307
|
+ 'lists/temerloh.html'
|
|
|
308
|
+ ];
|
|
|
309
|
+
|
|
|
310
|
+ var nameRegex = new RegExp(fileInput, 'i'); // Case-insensitive search
|
|
|
311
|
+ matchedFile = nameFiles.find(file => nameRegex.test(file));
|
|
|
312
|
+ }
|
|
|
313
|
+
|
|
|
314
|
+ if (matchedFile) {
|
|
|
315
|
+ // File found, redirect to it
|
|
|
316
|
+ window.location.href = matchedFile;
|
|
|
317
|
+ } else {
|
|
|
318
|
+ alert('No file containing the input ' + fileInput + ' was found.');
|
|
|
319
|
+ }
|
|
|
320
|
+ });
|
|
|
321
|
+ </script>
|
|
|
322
|
+
|
|
|
323
|
+ <script>
|
|
|
324
|
+ let maran = document.querySelector("#maran");
|
|
|
325
|
+ let cameronHighland = document.querySelector("#cameron-highland");
|
|
|
326
|
+ let bentong = document.querySelector("#bentong");
|
|
|
327
|
+ let lipis = document.querySelector("#lipis");
|
|
|
328
|
+ let raub = document.querySelector("#raub");
|
|
|
329
|
+ let jerantut = document.querySelector("#jerantut");
|
|
|
330
|
+ let kuantan = document.querySelector("#kuantan");
|
|
|
331
|
+ let temerloh = document.querySelector("#temerloh");
|
|
|
332
|
+ let rompin = document.querySelector("#rompin");
|
|
|
333
|
+ let bera = document.querySelector("#bera");
|
|
|
334
|
+ let pekan = document.querySelector("#pekan");
|
|
|
335
|
+
|
|
|
336
|
+ addLabelText(maran, "Maran");
|
|
|
337
|
+ addLabelText(cameronHighland, "Cameron");
|
|
|
338
|
+ addLabelText(cameronHighland, "Highland");
|
|
|
339
|
+ addLabelText(bentong, "Bentong");
|
|
|
340
|
+ addLabelText(lipis, "Lipis");
|
|
|
341
|
+ addLabelText(raub, "Raub");
|
|
|
342
|
+ addLabelText(jerantut, "Jerantut");
|
|
|
343
|
+ addLabelText(kuantan, "Kuantan");
|
|
|
344
|
+ addLabelText(temerloh, "Temerloh");
|
|
|
345
|
+ addLabelText(rompin, "Rompin");
|
|
|
346
|
+ addLabelText(bera, "Bera");
|
|
|
347
|
+ addLabelText(pekan, "Pekan");
|
|
|
348
|
+
|
|
|
349
|
+ function addLabelText(bgPath, labelText) {
|
|
|
350
|
+ let bbox = bgPath.getBBox();
|
|
|
351
|
+ let x = bbox.x + bbox.width / 2;
|
|
|
352
|
+ let y = bbox.y + bbox.height / 2;
|
|
|
353
|
+
|
|
|
354
|
+ // Create a <text> element
|
|
|
355
|
+ let textElem = document.createElementNS(bgPath.namespaceURI, "text");
|
|
|
356
|
+ // X axis
|
|
|
357
|
+ if (labelText == "Bentong") {
|
|
|
358
|
+ textElem.setAttribute("x", 286);
|
|
|
359
|
+ } else if (labelText == "Pekan") {
|
|
|
360
|
+ textElem.setAttribute("x", 870);
|
|
|
361
|
+ } else if (labelText == "Cameron") {
|
|
|
362
|
+ textElem.setAttribute("x", 75);
|
|
|
363
|
+ } else {
|
|
|
364
|
+ textElem.setAttribute("x", x);
|
|
|
365
|
+ }
|
|
|
366
|
+ // Y axis
|
|
|
367
|
+ if (labelText == "Rompin") {
|
|
|
368
|
+ textElem.setAttribute("y", 935);
|
|
|
369
|
+ } else if (labelText == "Pekan") {
|
|
|
370
|
+ textElem.setAttribute("y", 650);
|
|
|
371
|
+ } else if (labelText == "Kuantan") {
|
|
|
372
|
+ textElem.setAttribute("y", 440);
|
|
|
373
|
+ } else if (labelText == "Cameron") {
|
|
|
374
|
+ textElem.setAttribute("y", 130);
|
|
|
375
|
+ } else if (labelText == "Highland") {
|
|
|
376
|
+ textElem.setAttribute("y", 155);
|
|
|
377
|
+ } else {
|
|
|
378
|
+ textElem.setAttribute("y", y);
|
|
|
379
|
+ }
|
|
|
380
|
+ // Centre text horizontally at x,y
|
|
|
381
|
+ textElem.setAttribute("text-anchor", "middle");
|
|
|
382
|
+ // Give it a class that will determine the text size, colour, etc
|
|
|
383
|
+ if (labelText == "Cameron" || labelText == "Highland") {
|
|
|
384
|
+ textElem.classList.add("label-text-cameron");
|
|
|
385
|
+ } else {
|
|
|
386
|
+ textElem.classList.add("label-text");
|
|
|
387
|
+ }
|
|
|
388
|
+ // Set the text
|
|
|
389
|
+ textElem.textContent = labelText;
|
|
|
390
|
+ // Add this text element directly after the label background path
|
|
|
391
|
+ bgPath.after(textElem);
|
|
|
392
|
+ }
|
|
|
393
|
+ </script>
|
|
252
|
394
|
</body>
|
|
253
|
395
|
|
|
254
|
396
|
</html>
|
