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

Merge branch 'master' of https://git.mirfalah.my/muqriz/SIBS2024

master
azri 4 months ago
parent
0da6b59c11 8f8590baac
commit
2edc076e27
2 changed files with 168 additions and 25 deletions
Unified View Show Diff Stats
  1. 4
    0
      css/app.css
  2. 164
    25
      testing.html

+ 4
- 0
css/app.css View File

71 
     transform: translate(0,
 71 
     transform: translate(0,
72 
             3px);
 72 
             3px);
73 
     /* adjust vertical position to centre text */
 73 
     /* adjust vertical position to centre text */
74 
+}
75 
+
76 
+.hidden {
77 
+    display: none;
74 
 }
 78 
 }

+ 164
- 25
testing.html View File

18 
 <body>
 18 
 <body>
19 
     <section class="section" style="max-height: 100vh;">
 19 
     <section class="section" style="max-height: 100vh;">
20
20
21 
-        <div class="" style="background-color: #1F3F6D; min-height: 50px; display: flex; align-items: center;padding-left: 100px;">
22 
-            <h6 style="color: white;margin-right: 1em;" class=""><a style="color: white;" href="index.html"><i class="fas fa-chevron-left"></i></a></h6>
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>
23 
             <h6 style="color: white;">Jerantut</h6>
 25 
             <h6 style="color: white;">Jerantut</h6>
24 
         </div>
 26 
         </div>
25
27
26 
-        <div class="text-center pt-5" style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
27 
-            <button type="button" class="p-1" 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>
28 
-            <button type="button" class="p-1" 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>
29 
-            <button type="button" class="p-1" 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>
30 
-            <button type="button" class="p-1" 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>
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>
31 
         </div>
 38 
         </div>
32
39
33 
-        <div class="text-center pt-1" style="background-color: white; min-height: 50px; display: flex; justify-content: center; align-items: center; padding-left: 100px;">
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;">
34 
             <div class="pt-5" style="width: 600px;height: 100px;">
 42 
             <div class="pt-5" style="width: 600px;height: 100px;">
35 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
 43 
                 <svg class="map-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
36 
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
 44 
                     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-30 -30 1150 1150"
62 
                     </g>
 70 
                     </g>
63 
                 </svg>
 71 
                 </svg>
64
72
65 
-
73 
+
66 
             </div>
 74 
             </div>
67 
         </div>
 75 
         </div>
68
76
69 
-
70 
-        <div class="text-center pt-5" style="background-color: white; display: flex; justify-content: left; align-items: left; padding-left: 100px;margin-top: 250px;">
71 
-           <h6>Pembangunan</h6><br>
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>
72 
         </div>
 107 
         </div>
73 
-        <div class="text-center pt-2 text-nowrap d-flex 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;">
74 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="border: 1px solid #209028; color: #209028;" class="button-23 mb-2" role="button">HSD 23453</a>
75 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
76 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
77 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
78 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
79 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
80 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
81 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
82 
-            <a href="detail.html" class="button-23 mb-2 mr-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
83 
-            <a href="detail.html" class="button-23 mb-2" style="background-color: #1F9027; color: white; border: none;" role="button">HSD 23453</a>
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>
84 
         </div>
 138 
         </div>
85 
-
86 
-        <div class="container justify-content-center">
87
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>
88 
         </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 
+
89 
     </section>
 202 
     </section>
90
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>
91 
     <script defer src="/ruta relativa a mi archivo .js"></script>
 230 
     <script defer src="/ruta relativa a mi archivo .js"></script>
92
231
93 
 </body>
 232 
 </body>

Write Preview
Loading…
Cancel
Save