Merge branch 'PriyaGhosal:main' into main

index.html

@@ -1050,6 +1050,13 @@ <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
         </div></div>
       </div>
     </section>
+    <!--Emergency-->
+    <div class="sos-container">
+      <h2>Emergency SOS</h2>
+      <p>In case of an emergency, press the button to send your current location to your emergency contacts.</p>
+      <button id="sosButton" onclick="sendSOS()">Send SOS</button>
+      <div id="sos-status"></div>
+    </div>
     <!--posts section-->
     <div id="posts">
       <header class="posts_blog">
@@ -1073,6 +1080,8 @@ <h2>Content</h2>
       </main>
     </div>
     <style>
+
+
 
         /* Container for the posts and vlogs section */
         #posts {

script.js

@@ -315,6 +315,37 @@
 
 
 // }
+/*SOS*/
+function sendSOS() {
+    const statusDiv = document.getElementById("sos-status");
+
+    // Check if Geolocation is available
+    if ("geolocation" in navigator) {
+        navigator.geolocation.getCurrentPosition(function (position) {
+            const latitude = position.coords.latitude;
+            const longitude = position.coords.longitude;
+
+            // Generate a message with location data
+            const sosMessage = `Emergency! My current location is: Latitude: ${latitude}, Longitude: ${longitude}. Please send help immediately.`;
+
+            // Provide options to send the SOS message via Email or SMS
+            statusDiv.innerHTML = `
+                <p>Location acquired. Send your emergency message:</p>
+                <a href="mailto:?subject=Emergency SOS&body=${encodeURIComponent(sosMessage)}" target="_blank">
+                    <button>Email SOS</button>
+                </a>
+                <a href="sms:?body=${encodeURIComponent(sosMessage)}" target="_blank">
+                    <button>SMS SOS</button>
+                </a>
+            `;
+        }, function (error) {
+            statusDiv.innerHTML = `<p>Error retrieving location: ${error.message}</p>`;
+        });
+    } else {
+        statusDiv.innerHTML = "<p>Geolocation is not supported by your browser.</p>";
+    }
+}
+
 document.getElementById('postForm').addEventListener('submit', function (e) {
     e.preventDefault();
 

style.css

@@ -158,6 +158,32 @@ body {
 .cloud.fade-out {
   opacity: 0;
 }
+/*SOS*/
+.sos-container {
+  width: 100%;
+  text-align: center;
+  margin-top: 50px;
+}
+
+#sosButton {
+  padding: 20px;
+  font-size: 18px;
+  background-color: red;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 10px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+#sosButton:hover {
+  background-color: darkred;
+}
+
+#sos-status {
+  margin-top: 20px;
+  color: green;
+}
 
 #progressBarContainer {
   position: fixed;