add position

css/app.css

@@ -1,4 +1,38 @@
-/* CSS */
+.search-container{
+    background-image: url("../Mask_Group_2.png"); 
+    display: flex; 
+    flex-direction: column; 
+    justify-content: center;
+    padding: 2rem 4rem;
+}
+
+.search-container .logo{
+    height: auto;
+    width: 8%;
+}
+
+.search-container h6{
+    color: white; 
+    margin-bottom: 2px;
+}
+
+.search-container #searchInput{
+    border-radius: 21px; 
+    border: none; 
+    padding-left: 20px !important; 
+    flex: 1;
+}
+
+.search-container #searchInput::before {
+    content: "\f002"; /* Unicode for Font Awesome search icon */
+    font-family: 'FontAwesome';
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
 .button-23 {
     background-color: #1F9027;
     border-radius: 8px;
@@ -48,6 +82,15 @@
     text-decoration: none;
     filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
 }
+
+.map-svg .disable {
+    fill: gray !important;
+}
+
+.map-svg .disable text{
+    color: gray !important;
+}
+
 .map-svg .pahang-barat {
     fill: #427bba;
 }

details/detail_hsd2384.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/detail_hsd4638.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/detail_hsd5621.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/detail_hsd5625.html

@@ -8,144 +8,8 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
-
+    <link rel="stylesheet" href="../css/app.css">
+    
 </head>
 
 <body>

details/detail_hsd5627.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/detail_hsd5714.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/detail_hsd5715.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/detail_hsd5734.html

@@ -8,143 +8,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js" defer></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
-
-
-
-    <style>
-        html,
-        body {
-            height: 370px;
-            padding: 0;
-            margin: 0;
-        }
-
-        #map {
-            height: 360px;
-            width: 300px;
-            overflow: hidden;
-            float: left;
-            border: thin solid #333;
-        }
-
-        #capture {
-            height: 360px;
-            width: 480px;
-            overflow: hidden;
-            float: left;
-            background-color: #ECECFB;
-            border: thin solid #333;
-            border-left: none;
-        }
-
-        #pdfViewer {
-            width: 100%;
-            height: 600px;
-        }
-    </style>
-
-    <style>
-        /* CSS */
-        .button-23 {
-            background-color: #FFFFFF;
-            border: 1px solid #222222;
-            border-radius: 8px;
-            box-sizing: border-box;
-            color: #222222;
-            cursor: pointer;
-            display: inline-block;
-            font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
-            font-size: 16px;
-            font-weight: 600;
-            line-height: 20px;
-            margin: 0;
-            outline: none;
-            padding: 13px 23px;
-            position: relative;
-            text-align: center;
-            text-decoration: none;
-            touch-action: manipulation;
-            transition: box-shadow .2s, -ms-transform .1s, -webkit-transform .1s, transform .1s;
-            user-select: none;
-            -webkit-user-select: none;
-            width: auto;
-        }
-
-        .button-23:focus-visible {
-            box-shadow: #222222 0 0 0 2px, rgba(255, 255, 255, 0.8) 0 0 0 4px;
-            transition: box-shadow .2s;
-        }
-
-        .button-23:active {
-            background-color: #F7F7F7;
-            border-color: #000000;
-            transform: scale(.96);
-        }
-
-        .button-23:disabled {
-            border-color: #DDDDDD;
-            color: #DDDDDD;
-            cursor: not-allowed;
-            opacity: 1;
-        }
-
-        .map-svg {
-            display: block;
-            margin: 0 auto;
-            filter: drop-shadow(-16px 11px 2px rgba(0, 0, 0, 0.5));
-
-            a {
-                transition: all 1s;
-                transform-origin: 50% 50%;
-                text-decoration: none;
-                filter: drop-shadow(3px 10px 5px rgb(0 0 0 / 0.4));
-
-                @media only screen and (min-width: 992px) {
-
-                    polygon,
-                    &:hover {
-                        cursor: pointer;
-                        transform: scale(1.05);
-                        filter: drop-shadow(0px 15px 12px rgb(0 0 0 / 0.7));
-
-                        .st0 {
-                            fill: $dark-default;
-                        }
-                    }
-                }
-            }
-
-            .pahang-barat {
-                fill: #427bba;
-            }
-
-            .pahang-tengah {
-                fill: #144172;
-            }
-
-            .pahang-timur {
-                fill: #0c6088;
-            }
-
-            .label-text {
-                font-size: 35px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-            .label-text-cameron {
-                font-size: 20px;
-                fill: white;
-                transform: translate(0,
-                        3px);
-                /* adjust vertical position to centre text */
-            }
-
-
-        }
-    </style>
+    <link rel="stylesheet" href="../css/app.css">
 
 </head>
 

details/penternakan_pn_17421_hsd_1950.html → details/detail_pn17421_hsd1950.html

@@ -40,9 +40,6 @@
             </div>
         </div>
 
-
-
-
         <div class="text-center pt-5"
             style="background-color: white; display: flex; justify-content: center; align-items: left; padding-left: 100px; margin-top: 250px;">
             <div style="display: flex; flex-direction: row;">

index.html

@@ -3,48 +3,30 @@
 
 <head>
     <meta charset="UTF-8">
-    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <!-- CSP is a PITA ;). Disabled, don't try this at home!-->
     <meta http-equiv="Content-Security-Policy" content="">
-    <!-- include bulma css -->
-    <link rel="stylesheet" href="bulma/css/bulma.min.css">
     <title>My Test App</title>
     <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="./css/app.css">
 
-
-
-    <script>
-        // window.addEventListener('load', (event) => {
-        //     document.querySelector(".hello").textContent = "Hello from Electron with bulma css!";
-        // });
-    </script>
 </head>
 
 <body>
     <section class="section" style="max-height: 120vh;">
 
-        <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;">
-            <img class="pb-2" src="Group_49433x.png" style="height: auto;width: 8%" alt="">
-            <h6 style="color: white; margin-bottom: 2px;">Pelan Kawasan Tanah Milik Perbadanan</h6>
-            <h6 style="color: white; margin-bottom: 10px;font-weight: 400;">Setiausaha Kerajaan (PSK) Pahang Tanpa Skala
-            </h6>
+        <div class="search-container">
+            <img class="logo pb-4" src="Group_49433x.png" alt="">
+            <h6 class="fw-bolder" >Pelan Kawasan Tanah Milik Perbadanan</h6>
+            <h6 class="mb-3">Setiausaha Kerajaan (PSK) Pahang Tanpa Skala</h6>
 
-            <form id="fileForm" style="display: flex; align-items: center;">
-                <input id="fileNumber" type="search" class="p-1"
-                    style="border-radius: 21px; border: none; padding-left: 20px !important; flex: 1;"
-                    placeholder="Search Here">
-                <button class="btn btn-primary" type="submit" style="margin-left: 10px;">Search</button>
+            <form id="searchForm" class="d-flex justify-content-center">
+                <input id="searchInput" type="search" class="p-1 flex-grow-1" placeholder="Search Here">
+                <button class="btn btn-primary ms-4" type="submit">Search</button>
             </form>
-
-
         </div>
 
-        <div class="text-center pt-1"
-            style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 0px;">
-            <div class="pt-5" style="width: 600px;height: 100px;">
+        <div class="text-center pt-1 bg-white d-flex justify-content-center ps-0">
+            <div class="py-5 px-3" style="width: 600px;height: 100px;">
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
                     style="enable-background: new 0 0 1080 1080" xml:space="preserve">
@@ -52,7 +34,7 @@
                         <!-- Cameron Highland -->
                         <a href="#" data-area="cameron-highland" data-bs-toggle="tooltip" data-bs-placement="top"
                             title="Tooltip on top">
-                            <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
+                            <path id="cameron-highland" class="disable" 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
                                 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
                                 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
                                 c-4.4-8.1-14.8-8.3-20.2-16c-9.9-14.2-18.9-13.6-29.4,0.3c-4.4,5.8-9.1,7.1-15.1,3c-3.8-2.6-8.4-4.7-11.2-8.2
@@ -62,7 +44,7 @@
                                 c-2.8,0.3-5,1.6-6.7,3.8c-0.6,0.8-1.3,1.6-1.9,2.5c-6.7,5.6-3.9,16.8-12.8,21.2c-4.1,5.7,2.6,6.3,4.3,9.3c3.7,3.6,1.5,9.3,4.8,13
                                 c1.1,0.7,2.2,0.7,3.3,0c0.8-0.4,1.7-0.7,2.5-1.1c2.1-1.8,2.4-4.2,2.4-6.8c0.4,2,0.7,4.1,2.9,5.2l1.3,0.2l1.2-0.2
                                 c3-1.8,6-3.9,9.7-4.6c-0.3,3.7-4.7,4.4-5.1,7.7c2.5,3.5,6.6,3.3,10.2,4.1c7.6,1.7,10.4,7.2,6.9,13.1c-7.9,13.4,0.5,16.8,10.7,19.8
-                                C65.6,205,72.4,205.9,77.6,205.5z" />
+                                C65.6,205,72.4,205.9,77.6,205.5z"/>
                         </a>
                         <!-- Lipis -->
                         <a href="lists/lipis.html" data-area="lipis">
@@ -117,8 +99,8 @@
                                    C454.9,750.5,448.9,746.1,442.5,743.9z" />
                         </a>
                         <!-- Jerantut -->
-                        <a href="#" data-area="jerantut">
-                            <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
+                        <a href="#" data-area="jerantut" style="color:gray !important">
+                            <path id="jerantut" class="disable" 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
                                 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
                                 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
                                 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
@@ -246,26 +228,15 @@
             </div>
         </div>
 
-
-
-
-
-
-
-
-
-
-
     </section>
 
-    <script defer src="/ruta relativa a mi archivo .js"></script>
 
     <script>
 
-        document.getElementById('fileForm').addEventListener('submit', function (event) {
+        document.getElementById('searchForm').addEventListener('submit', function (event) {
             event.preventDefault(); // Prevent the form from submitting the traditional way
 
-            var fileInput = document.getElementById('fileNumber').value;
+            var fileInput = document.getElementById('searchInput').value;
             var numberRegex = /\d/; // Regular expression to check for any digit
             var matchedFile;
 

lists/lipis.html

@@ -74,10 +74,10 @@
             </div>
             <div class="text-center pt-2 text-nowrap flex-wrap"
                 style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px; margin-top: 0;gap: 10px;padding-right: 100px;">
-                <a href="../details/penternakan_pn_17421_hsd_1950.html" class="button-23 mb-2 mr-2"
+                <a href="../details/detail_pn17421_hsd1950.html" class="button-23 mb-2 mr-2"
                     style="background-color: #1F9027; color: white; border: none;" role="button">PN 17421 (HSD 1950)</a>
 
-                    <a href="../details/penternakan_pn_17427_hsd_1949.html" class="button-23 mb-2 mr-2"
+                    <a href="../details/detail_pn17427_hsd1949.html" class="button-23 mb-2 mr-2"
                     style="background-color: #1F9027; color: white; border: none;" role="button">PN 17427 (HSD 1949)</a>
             </div>
         </div>

lists/rompin.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-abc123..." crossorigin="anonymous" />
     <link rel="stylesheet" href="../css/app.css">
+    <link rel="stylesheet" href="../css/animate.css">
 </head>
 
 <body>