Merge pull request #588 from kumar1397/new-resolve-branch

Fix #7:Map resolve
Anishkagupta04 · Jun 27, 2024 · 1a2a1bb · 1a2a1bb
2 parents 2e3c66b + 9e4f06b
commit 1a2a1bb
Show file tree

Hide file tree

Showing 8 changed files with 295 additions and 1 deletion.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "backdrop-filter"
+        ]
+      }
+    ]
+  }
+}
diff --git a/Css-Files/input.css b/Css-Files/input.css
@@ -0,0 +1,133 @@
+body {
+    background-color: black;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+}
+
+.container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: row;
+    justify-content: right;
+    align-items: center;
+    gap: 2rem;
+    background: #0f0c29;
+    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
+    background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
+    color: white;
+    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+}
+
+.items {
+    width: 25vw;
+    height: 100%;
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    z-index: 10;
+}
+
+.item1,
+.item2,
+.item3 {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 20vh;
+    background-color: #39365b;
+    backdrop-filter: blur(20px);
+    border: 1px solid #332e5e;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5%;
+    font-weight: bold;
+}
+
+.text1 {
+    width: 100%;
+    font-size: 40px;
+    display: flex;
+    justify-content: center;
+}
+.text2 {
+    width: 50%;
+    margin-left: 5px;
+    font-size:20px;
+    display: flex;
+    justify-content: center;
+}
+
+.doc {
+    display: flex;
+    width: 40vw;
+    height: 100vh;
+    justify-content: end;
+}
+.docimg {
+
+    display: flex;
+    justify-content: start;
+}
+.text {
+    width: 50vw;
+    padding-right: 50px;
+    height: 100vh;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+}
+
+.head1 {
+    padding: auto;
+    color: white;
+    font-size: 70px;
+    font-weight: 500;
+}
+
+.head2 {
+    color: wheat;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.text input {
+    width: 60%;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    font-size: 20px;
+}
+.text input::placeholder{
+    text-align: center;
+}
+.text button {
+    width: 25%;
+    height: 50px;
+    border-radius: 10px;
+    font-size: 20px;
+    font: weight 5px;
+    border-radius: 5px;
+    background-color: #f5f5f5;
+    align-items: center;
+    background: #ADA996;
+    background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
+    background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
+}
+
+.text button:hover {
+    cursor: pointer;
+}
+
+.input {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+}
diff --git a/Css-Files/map.css b/Css-Files/map.css
@@ -0,0 +1,23 @@
+body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    height: 100vh;
+    width: 100vw;
+    margin: 0;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+#map {
+    height: 90%;
+    width: 100%;
+}
+
+.tag {
+    height: 10%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    font-weight: bold;
+}
diff --git a/Html-Files/input.html b/Html-Files/input.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/Css-Files/input.css">
+    <title>Document</title>
+</head>
+<body>
+
+    <div class="container">
+        <div class="items">
+            <div class="item1">
+                <div class="text1">6+</div>
+                <div class="text2">Years of Experience</div>
+            </div>
+            <div class="item2">
+                <div class="text1">5K</div>
+                <div class="text2">Doctor Specialist</div>
+            </div>
+            <div class="item3">
+                <div class="text1">100%</div>
+                <div class="text2">Patient Satisfication</div>
+            </div>
+        </div>
+        <div class="doc">
+            <img src="../images/newdoc.png" alt="doc" class="docimg">
+        </div>
+        <div class="text">
+            <div class="head1">Find a doctor for you now!</div>
+            <div class="head2">We take the guesswork out of locating a doctor,hospital or other medical facility in your area for you and your family</div>
+            <div class="input">
+                <input id="location-input" type="text" placeholder="Enter your location">
+                <button onclick="getCoordinates()" >Explore</button>
+            </div>
+        </div>
+    </div>
+
+</body>
+    <script>
+         async function getCoordinates() {
+            const locationInput = document.getElementById('location-input').value;
+            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${locationInput}`);
+            const data = await response.json();
+
+            if (data.length > 0) {
+                const { lat, lon, display_name } = data[0];
+                window.location.href = `map.html?lat=${lat}&lon=${lon}&display_name=${encodeURIComponent(display_name)}`;
+            } else {
+                alert(`No input received. \nPlease enter your location`);
+            }
+        }
+    </script>
+
+
+</html>
diff --git a/Html-Files/map.html b/Html-Files/map.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""></script>
+    <link rel="stylesheet" href="/Css-Files/map.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="tag">Healthcares Nearby</div>
+    <div id="map"></div>
+</body>
+<script>
+
+    document.addEventListener('DOMContentLoaded', () => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const lat = urlParams.get('lat');
+            console.log(lat);
+            const lon = urlParams.get('lon');
+            console.log(lon);
+            const displayName = urlParams.get('display_name');
+            console.log(displayName);
+
+            if (lat && lon && displayName) {
+                initMap(lat, lon);  
+            } else {
+                alert("No Location Data Found");
+            }
+    });
+    var greenIcon = L.icon({
+        iconUrl: '/images/hospital.png',
+        iconSize:[38, 38], // size of the icon
+    });
+    function initMap(lat, lon) {
+        var map = L.map('map').setView([lat, lon], 9);
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }).addTo(map);
+        var marker = L.marker([lat,lon]).addTo(map).bindPopup("Your Location");
+
+        for(let i=1;i<=5;i++){
+            let newLat;
+            let newLon;
+            if (i % 3 == 0){
+                newLat = Math.round(lat) + i*0.1;
+                newLon = Math.round(lon) + i*0.1;
+            }
+            else if (i %3 == 1){
+                newLat = Math.round(lat) - i*0.01;
+                newLon = Math.round(lon) - i*0.1;
+            }
+            else{
+                newLat = Math.round(lat) + i*0.2;
+                newLon = Math.round(lon) - i*0.1;
+            }
+
+            L.marker([newLat,newLon], {icon: greenIcon}).addTo(map).bindPopup("RapidDoc healthcare");
+        }
+    }
+</script>
+</html>
diff --git a/images/hospital.png b/images/hospital.png
diff --git a/images/newdoc.png b/images/newdoc.png
diff --git a/index.html b/index.html
@@ -728,7 +728,7 @@ <h2 style="text-align:center;">Services</h2>
           <div class="align-items-stretch ">
             <div class="icon-box">
               <div class="icon"><i class="fas fa-heartbeat"></i></div>
-              <h4><a href="">Clinics/Labs</a></h4>
+              <h4><a href="/Html-Files/input.html">Clinics/Labs</a></h4>
               <p>Locate the best healthcare facilities around you hassle-free.From routine check-ups to specialized treatments, find the right clinic or lab that meets your needs. Our database is updated regularly to ensure you have the most accurate information.</p>
             </div>
           </div>