Skip to content

Commit

Permalink
Update nearby.html
Browse files Browse the repository at this point in the history 
This update modifies the hospital cards in nearby.html to include a dedicated call button for each hospital. Additionally, it makes the entire card, including the image and text, clickable to redirect users to the hospital's location on Google Maps.
  • Loading branch information
@pradyumna14
pradyumna14 authored Oct 20, 2024
1 parent 7152f57 commit 9725227
Showing 1 changed file with 52 additions and 23 deletions.
75 changes: 52 additions & 23 deletions nearby.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,21 @@
margin-bottom: 20px;
}

.button {
background-color: #259ee9;
border: none;
border-radius: 5px;
color: white;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.button:hover {
background-color: #00BFFF;
}

#searchInput {
width: 300px;
padding: 10px;
Expand Down Expand Up @@ -196,85 +211,100 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
name: "AIIMS Delhi",
location: "Ansari Nagar, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipP9JGi6pake5Zae72zMqWgYhakGZTnP1KMkEoMI=w408-h306-k-no",
link: "https://www.google.com/maps/place/All+India+Institute+Of+Medical+Sciences+Delhi/@28.5671821,77.2074702,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce26f903969d7:0x8367180c6de2ecc2!8m2!3d28.5671774!4d77.2100451!16s%2Fm%2F0lq5p3v?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/All+India+Institute+Of+Medical+Sciences+Delhi/@28.5671821,77.2074702,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce26f903969d7:0x8367180c6de2ecc2!8m2!3d28.5671774!4d77.2100451!16s%2Fm%2F0lq5p3v?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Fortis Escorts Heart Institute",
location: "Okhla Road, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipO_LJoTauSAwR0RaSEco9DpYYfVjcBL6oMwZlGM=w480-h240-k-no",
link: "https://www.google.com/maps/place/Fortis+Escorts+Heart+Institute/@28.5605979,77.2714045,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce392b869bbaf:0x865db71ba6f271b2!8m2!3d28.5605932!4d77.2739794!16s%2Fg%2F1tyzxc62?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Fortis+Escorts+Heart+Institute/@28.5605979,77.2714045,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce392b869bbaf:0x865db71ba6f271b2!8m2!3d28.5605932!4d77.2739794!16s%2Fg%2F1tyzxc62?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Max Super Speciality Hospital",
location: "Saket, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipMHbDvRM2SnP15JEFiHHU3BkbeMyILB4Fe_9vb_=w408-h272-k-no",
link: "https://www.google.com/maps/place/Max+Super+Speciality+Hospital,+Saket+(Max+Saket)/@28.5275537,77.2094197,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce1f427d4c5fb:0x582d47bbf4970bc1!8m2!3d28.527549!4d77.2119946!16s%2Fm%2F0nhgv9_?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Max+Super+Speciality+Hospital,+Saket+(Max+Saket)/@28.5275537,77.2094197,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce1f427d4c5fb:0x582d47bbf4970bc1!8m2!3d28.527549!4d77.2119946!16s%2Fm%2F0nhgv9_?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "BLK Super Speciality Hospital",
location: "Pusa Road, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipOOE3FO4yP5Th80bikVNoZbSmhNUgZz8baujSsJ=w427-h240-k-no",
link: "https://www.google.com/maps/place/BLK-Max+Super+Speciality+Hospital+Delhi/@28.6433081,77.1771302,17z/data=!3m1!4b1!4m6!3m5!1s0x390d029633b6af21:0x9a67323b63bcc188!8m2!3d28.6433034!4d77.1797051!16s%2Fg%2F1tfzvwkd?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/BLK-Max+Super+Speciality+Hospital+Delhi/@28.6433081,77.1771302,17z/data=!3m1!4b1!4m6!3m5!1s0x390d029633b6af21:0x9a67323b63bcc188!8m2!3d28.6433034!4d77.1797051!16s%2Fg%2F1tfzvwkd?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Sir Ganga Ram Hospital",
location: "Rajinder Nagar, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipPge4AJnRsJww6qZfswWAL9LBfd1iDCBM-hpCzW=w408-h544-k-no",
link: "https://www.google.com/maps/place/SIR+GANGA+RAM+HOSPITAL,+Sir+Ganga+Ram+Hospital+Marg,+Old+Rajinder+Nagar,+New+Rajinder+Nagar,+Delhi,+110060/@28.6385473,77.1894559,17z/data=!3m1!4b1!4m6!3m5!1s0x390d02a17c4ab835:0xdee61a9d767b964b!8m2!3d28.6384582!4d77.1895559!16s%2Fg%2F11bytpc110?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/SIR+GANGA+RAM+HOSPITAL,+Sir+Ganga+Ram+Hospital+Marg,+Old+Rajinder+Nagar,+New+Rajinder+Nagar,+Delhi,+110060/@28.6385473,77.1894559,17z/data=!3m1!4b1!4m6!3m5!1s0x390d02a17c4ab835:0xdee61a9d767b964b!8m2!3d28.6384582!4d77.1895559!16s%2Fg%2F11bytpc110?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Apollo Hospitals Delhi",
location: "Karol Bagh, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipNUO3hhiOSgCnWYou3qHm0SQTlKaM0wIfiG_OaU=w408-h270-k-no",
link: "#"
link: "#",
phone: "+911345678901"
},
{
name: "Holy Family Hospital",
location: "Okhla, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipMpQ-20kn_yH0AtOS1fl7o9fhVcdPZIs4ncO5fU=w408-h306-k-no",
link: "https://www.google.com/maps/place/Holy+Family+Hospital/@28.5618161,77.2751113,17z/data=!4m15!1m8!3m7!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!2sHoly+Family+Hospital!8m2!3d28.5618161!4d77.2751113!10e5!16s%2Fm%2F0n46sgy!3m5!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!8m2!3d28.5618161!4d77.2751113!16s%2Fm%2F0n46sgy?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Holy+Family+Hospital/@28.5618161,77.2751113,17z/data=!4m15!1m8!3m7!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!2sHoly+Family+Hospital!8m2!3d28.5618161!4d77.2751113!10e5!16s%2Fm%2F0n46sgy!3m5!1s0x390ce3929e6d3319:0xcd2355b56b80d9cf!8m2!3d28.5618161!4d77.2751113!16s%2Fm%2F0n46sgy?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Safdarjung Hospital",
location: "Safdarjung Enclave, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipNrfGkAU1lF3dJVwnJZpLFNrRbzmksWyRDJmvwy=w408-h489-k-no",
link: "https://www.google.com/maps/place/Safdarjung+Hospital+New+Emergency+Block/@28.5686945,77.2069167,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce3c788fcae8f:0x2db4a8bddc6eae25!8m2!3d28.5686945!4d77.2069167!16s%2Fg%2F11f66b854r?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Safdarjung+Hospital+New+Emergency+Block/@28.5686945,77.2069167,17z/data=!3m1!4b1!4m6!3m5!1s0x390ce3c788fcae8f:0x2db4a8bddc6eae25!8m2!3d28.5686945!4d77.2069167!16s%2Fg%2F11f66b854r?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
},
{
name: "Moolchand Medcity",
location: "Lajpat Nagar, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipO3wxKBu2OTky8xeC5ML8UrgN-ddnaxTqyKuHzr=w408-h368-k-no",
link: "https://www.google.com/maps/place/Moolchand+Hospital/@28.566167,77.2331993,17z/data=!4m10!1m2!2m1!1smoolchand+medcity!3m6!1s0x390ce3c849a0fecd:0x309c4e9de4e2aff3!8m2!3d28.566167!4d77.235388!15sChFtb29sY2hhbmQgbWVkY2l0eZIBEHByaXZhdGVfaG9zcGl0YWzgAQA!16s%2Fg%2F11j0045tc5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Moolchand+Hospital/@28.566167,77.2331993,17z/data=!4m10!1m2!2m1!1smoolchand+medcity!3m6!1s0x390ce3c849a0fecd:0x309c4e9de4e2aff3!8m2!3d28.566167!4d77.235388!15sChFtb29sY2hhbmQgbWVkY2l0eZIBEHByaXZhdGVfaG9zcGl0YWzgAQA!16s%2Fg%2F11j0045tc5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Deen Dayal Upadhyay Hospital",
location: "Hari Nagar, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipOwiTt3QQ-u0vkOmn0njbkwESBmspr82g_wF4Er=w427-h240-k-no",
link: "https://www.google.com/maps/place/Deen+Dayal+Upadhyay+Hospital/@28.628017,77.1122963,17z/data=!3m1!4b1!4m6!3m5!1s0x390cfd309eebed77:0xc8559980f0b50535!8m2!3d28.628017!4d77.1122963!16s%2Fg%2F1tf1m64n?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Deen+Dayal+Upadhyay+Hospital/@28.628017,77.1122963,17z/data=!3m1!4b1!4m6!3m5!1s0x390cfd309eebed77:0xc8559980f0b50535!8m2!3d28.628017!4d77.1122963!16s%2Fg%2F1tf1m64n?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Artemis Hospitals",
location: "Dwarka, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipO4FfTa6lmb3Hncw3WgwGt-4n-4qcv6NDMVeUfh=w408-h306-k-no",
link: "https://www.google.com/maps/place/Artemis+Hospitals+Dwarka/@28.5709273,77.0593246,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1b03c0000001:0x3eb1330d284a7209!8m2!3d28.5709273!4d77.0593246!16s%2Fg%2F11g_yrth5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
},
link: "https://www.google.com/maps/place/Artemis+Hospitals+Dwarka/@28.5709273,77.0593246,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1b03c0000001:0x3eb1330d284a7209!8m2!3d28.5709273!4d77.0593246!16s%2Fg%2F11g_yrth5?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
},
{
name: "Venkateshwar Hospital",
location: "Sector 18A, Dwarka, New Delhi",
image: "https://lh5.googleusercontent.com/p/AF1QipPfqqxb8Yu1rfBbEWDzom0Gb1mfY7R8zohuCym1=w408-h544-k-no",
link: "https://www.google.com/maps/place/Venkateshwar+Hospital/@28.5885973,77.0380428,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1ac3e8a4b27b:0x218f945a11993663!8m2!3d28.5885973!4d77.0380428!16s%2Fg%2F11b7y83nv6?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D"
link: "https://www.google.com/maps/place/Venkateshwar+Hospital/@28.5885973,77.0380428,17z/data=!3m1!4b1!4m6!3m5!1s0x390d1ac3e8a4b27b:0x218f945a11993663!8m2!3d28.5885973!4d77.0380428!16s%2Fg%2F11b7y83nv6?entry=ttu&g_ep=EgoyMDI0MTAwOC4wIKXMDSoASAFQAw%3D%3D",
phone: "+911345678901"
}
];

function createHospitalCard(hospital) {
return `
<div class="hospital-card">
<img src="${hospital.image}" alt="${hospital.name}">
<a href="${hospital.link}" target="_blank">${hospital.name}</a>
<p>Location: ${hospital.location}</p>
</div>
`;
}
return `
<div class="hospital-card">
<a href="${hospital.link}" target="_blank">
<img src="${hospital.image}" alt="${hospital.name}">
</a>
<a href="${hospital.link}" target="_blank">${hospital.name}</a>
<p>Location: ${hospital.location}</p>
<button class="button" onclick="window.location.href='tel:${hospital.phone}'">Call Now</button>
</div>
`;
}


function renderHospitals(hospitalsToRender) {
const container = document.getElementById('hospitalContainer');
Expand All @@ -297,7 +327,6 @@ <h2>Track or call an ambulance and check nearby hospitals for emergency services
// Initial render
renderHospitals(hospitals);
</script>
<script src="script.js"></script>
</body>

</html>
</html>

0 comments on commit 9725227

Please sign in to comment.