change css style

ptduy14 · May 16, 2024 · 3a941bb · 3a941bb
1 parent 536df10
commit 3a941bb
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 79 deletions.
diff --git a/pages/ex-four.html b/pages/ex-four.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Exemple Four</title>
-    <link rel="icon" type="image/x-icon" href="https://www.svgrepo.com/show/353991/leaflet.svg">
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://www.svgrepo.com/show/353991/leaflet.svg"
+    />
     <link
       rel="stylesheet"
       href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -17,37 +21,37 @@
   </head>
 
   <body>
-    <div id="map">
-      <div class="toggle">MORE</div>
-      <div class="modal">
-        <div class="nav"></div>
-        <div class="content">
-          <p>
-            Thiết kế polygon hình tứ giác theo thao tác click chuột của người dùng:
-          </p>
-        </div>
-        <div class="code">
-          <pre><code class="language-javascript">
+    <div class="toggle">MORE</div>
+    <div class="layer"></div>
+    <div class="modal">
+      <div class="nav"></div>
+      <div class="content">
+        <p>
+          Thiết kế polygon hình tứ giác theo thao tác click chuột của người
+          dùng:
+        </p>
+      </div>
+      <div class="code">
+        <pre><code class="language-javascript">
 var polygonPoints = []
 var polygon;
 var marker;
 
 map.on('click', (e) => {
-  // kiểm tra nếu độ dài mảng polygonPoints thì vẽ polygon
-  if (polygonPoints.length == 4) {
-    polygon = L.polygon(polygonPoints, {color: 'red'}).addTo(map);
-    polygonPoints = []
-  } else {
-    polygonPoints.push(e.latlng)
-    marker = L.marker(e.latlng).addTo(map)
-  }
+// kiểm tra nếu độ dài mảng polygonPoints thì vẽ polygon
+if (polygonPoints.length == 4) {
+  polygon = L.polygon(polygonPoints, {color: 'red'}).addTo(map);
+  polygonPoints = []
+} else {
+  polygonPoints.push(e.latlng)
+  marker = L.marker(e.latlng).addTo(map)
+}
 })
-            </code></pre>
-        </div>
-        <a href="../pages/ex-one.html">Bài trước</a>
+          </code></pre>
       </div>
-      <div class="layer"></div>
+      <a href="../pages/ex-one.html">Bài trước</a>
     </div>
+    <div id="map"></div>
     <footer>
       <p>Made by ptduy14 with love ❤️</p>
     </footer>
@@ -72,20 +76,20 @@
           '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       }).addTo(map);
 
-      var polygonPoints = []
+      var polygonPoints = [];
       var polygon;
       var marker;
-      
-      map.on('click', (e) => {
+
+      map.on("click", (e) => {
         // kiểm tra nếu độ dài mảng polygonPoints thì vẽ polygon
         if (polygonPoints.length == 4) {
-          polygon = L.polygon(polygonPoints, {color: 'red'}).addTo(map);
-          polygonPoints = []
+          polygon = L.polygon(polygonPoints, { color: "red" }).addTo(map);
+          polygonPoints = [];
         } else {
-          polygonPoints.push(e.latlng)
-          marker = L.marker(e.latlng).addTo(map)
+          polygonPoints.push(e.latlng);
+          marker = L.marker(e.latlng).addTo(map);
         }
-      })
+      });
     </script>
   </body>
 </html>
diff --git a/pages/ex-one.html b/pages/ex-one.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Exemple One</title>
-    <link rel="icon" type="image/x-icon" href="https://www.svgrepo.com/show/353991/leaflet.svg">
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://www.svgrepo.com/show/353991/leaflet.svg"
+    />
     <link
       rel="stylesheet"
       href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -17,23 +21,21 @@
   </head>
 
   <body>
-    <div id="map">
-      <div class="toggle">MORE</div>
-      <div class="modal">
-        <div class="nav"></div>
-        <div class="content">
-          <p>
-            Chấm trên bảng đồ chọn Marker và Marker di chuyển theo thao tác của
-            người dùng:
-          </p>
-          <input type="radio" id="single" name="type_marker" checked />
-          <label for="single">Hiển thị chấm duy nhất chỉ một marker</label
-          ><br />
-          <input type="radio" id="mutiple" name="type_marker" />
-          <label for="mutiple">Hiển thị chấm nhiều marker</label><br />
-        </div>
-        <div class="code">
-          <pre><code class="language-javascript">
+    <div class="toggle">MORE</div>
+    <div class="modal">
+      <div class="nav"></div>
+      <div class="content">
+        <p>
+          Chấm trên bảng đồ chọn Marker và Marker di chuyển theo thao tác của
+          người dùng:
+        </p>
+        <input type="radio" id="single" name="type_marker" checked />
+        <label for="single">Hiển thị chấm duy nhất chỉ một marker</label><br />
+        <input type="radio" id="mutiple" name="type_marker" />
+        <label for="mutiple">Hiển thị chấm nhiều marker</label><br />
+      </div>
+      <div class="code">
+        <pre><code class="language-javascript">
 var marker;
 
 // hiển thị nhiều marker khi click
@@ -51,11 +53,11 @@
   marker.bindPopup('Latitude: ' + e.latlng.lat + '<br>Longitude: ' + e.latlng.lng).openPopup();
 });
             </code></pre>
-        </div>
-        <a href="../pages/ex-two.html">Bài tiếp</a>
       </div>
-      <div class="layer"></div>
+      <a href="../pages/ex-two.html">Bài tiếp</a>
     </div>
+    <div class="layer"></div>
+    <div id="map"></div>
     <footer>
       <p>Made by ptduy14 with love ❤️</p>
     </footer>

diff --git a/pages/ex-three.html b/pages/ex-three.html
@@ -14,8 +14,7 @@
 </head>
 
 <body>
-  <div id="map">
-    <div class="toggle">MORE</div>
+  <div class="toggle">MORE</div>
     <div class="modal">
       <div class="nav"></div>
       <div class="content">
@@ -57,7 +56,7 @@
       <a href="../pages/ex-four.html">Bài tiếp</a>
     </div>
     <div class="layer"></div>
-  </div>
+  <div id="map"></div>
   <footer>
     <p>Made by ptduy14 with love ❤️</p>
   </footer>

diff --git a/pages/ex-two.html b/pages/ex-two.html
@@ -4,7 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Exemple Two</title>
-    <link rel="icon" type="image/x-icon" href="https://www.svgrepo.com/show/353991/leaflet.svg">
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://www.svgrepo.com/show/353991/leaflet.svg"
+    />
     <link
       rel="stylesheet"
       href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -17,17 +21,17 @@
   </head>
 
   <body>
-    <div id="map">
-      <div class="toggle">MORE</div>
-      <div class="modal">
-        <div class="nav"></div>
-        <div class="content">
-          <p>
-            Tính và hiển thị khoảng cách từ hai điểm (dùng Popup hiển thị tại vị trí điểm cuối của Polyline):
-          </p>
-        </div>
-        <div class="code">
-          <pre><code class="language-javascript">
+    <div class="toggle">MORE</div>
+    <div class="modal">
+      <div class="nav"></div>
+      <div class="content">
+        <p>
+          Tính và hiển thị khoảng cách từ hai điểm (dùng Popup hiển thị tại vị
+          trí điểm cuối của Polyline):
+        </p>
+      </div>
+      <div class="code">
+        <pre><code class="language-javascript">
 var startPoint; 
 var endPoint;
 var marker;
@@ -48,12 +52,12 @@
   }
 })
             </code></pre>
-        </div>
-        <a href="../pages/ex-one.html">Bài trước</a>
-        <a href="../pages/ex-three.html">Bài tiếp</a>
       </div>
-      <div class="layer"></div>
+      <a href="../pages/ex-one.html">Bài trước</a>
+      <a href="../pages/ex-three.html">Bài tiếp</a>
     </div>
+    <div class="layer"></div>
+    <div id="map"></div>
     <footer>
       <p>Made by ptduy14 with love ❤️</p>
     </footer>
@@ -78,12 +82,12 @@
           '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       }).addTo(map);
 
-      var startPoint; 
+      var startPoint;
       var endPoint;
       var marker;
       var polyline;
 
-      map.on('click', (e) => {
+      map.on("click", (e) => {
         if (!startPoint) {
           startPoint = e.latlng;
           marker = L.marker(startPoint).addTo(map);
@@ -94,10 +98,9 @@
         }
 
         if (startPoint && endPoint) {
-          polyline = L.polyline([startPoint, endPoint], {color: 'red'}).addTo(map);
+          polyline = L.polyline([startPoint, endPoint], { color: "red" }).addTo(map);
         }
-      })
-
+      });
     </script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -5,14 +5,18 @@
     font-size: 20px;
 }
 
+body {
+    overflow: hidden;
+}
+
 html{
     background-color: #282A36;
     color: #F8F8F2;
 }
 
 #map {
     position: relative;
-    height: 90vh;
+    height: 93vh;
     width: 100%;
 }
 
@@ -51,7 +55,7 @@ footer {
 
 .modal {
     position: absolute;
-    height: 90vh;
+    height: 93vh;
     width: 60%;
     z-index: 99999;
     top: 0;