Skip to content

Commit

Permalink
Merge pull request #373 from Ishika-Gupta06/main
Browse files Browse the repository at this point in the history 
Features added
  • Loading branch information
@vimistify
vimistify authored Oct 8, 2024
2 parents de8e76c + da00807 commit 5266d6e
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 91 deletions.
189 changes: 110 additions & 79 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AmbuFlow</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<link rel="stylesheet" href="src/css/index.css" />
<link rel="stylesheet" href="style1.css">

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
Expand Down Expand Up @@ -365,12 +372,49 @@
}

</style>

</head>

<body>
<header class="sticky">
<div class="container">

<div class="logo">
<div class="brand-name">
<span class="ambu">Ambu</span>Flow
</div>
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
</div>
<nav class="menu">
<ul>
<li>
<a href="/" id="home-link" onclick="changeContent('home')"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li>
<a href="features.html" id="features-link" onclick="changeContent('features')"><i
class="fa-solid fa-file"></i> Features</a>
</li>
<li>
<a href="team.html" id="team-link" onclick="changeContent('team')"><i class="fa-solid fa-user-group"></i>
Team</a>
</li>
<li>
<a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
class="fa-solid fa-phone"></i> Contact</a>
</li>
</ul>
</nav>
<div class="buttons">
<button class="dark-mode-toggle" id="dark-mode-button">
<i class="fa-solid fa-moon"></i>
</button>
<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>
</div>
</div>
</header>


<div class="logo">
<div class="brand-name">
<span class="letter red" style="--letter-index: 1">A</span>
Expand All @@ -390,6 +434,7 @@
/></a>
</div>


<nav class="menu">
<ul>
<li>
Expand Down Expand Up @@ -488,79 +533,61 @@ <h2>Meet the Team</h2>
<div>
<h2>Contact Us</h2>
<p>
Have questions or feedback? Reach out to us through our contact
page.
Reach out to us for any inquiries or assistance. We're here to
help you 24/7 with our emergency services.
</p>
<a href="contact.html" class="button">Go to Contact</a>
</div>
</div>
</div>
</div>

<!-- FAQ Section in Full Row -->
<footer>
<!-- Newsletter Subscription -->
<div style="flex: 1; min-width: 200px; margin-bottom: 20px;">
<h3>Subscribe to Our Newsletter</h3>
<form action="#">
<input type="email" placeholder="Your Email" style="padding: 10px; width: 80%;" required /><br /><br />
<button type="submit" style="
background-color: #ff5733;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
">
Subscribe
</button>
</form>
</div>

<div class="contact-feature faq-section">
<div class="faq-hd">
<div class="faq-h2">Frequently Asked Questions [ FAQs ]</div>
<!-- <div>Frequently Asked Questions</div> -->
</div>
<div class="faqs">

<div class="faq">
<button class="faq-question">What should I do while waiting for the ambulance?</button>
<div class="faq-answer">
<p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">How do I track an ambulance in real-time?</button>
<div class="faq-answer">
<p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the live map feature.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
<div class="faq-answer">
<p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay, please contact emergency services for further instructions.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">Can I provide medical information for the patient in advance?</button>
<div class="faq-answer">
<p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for the situation.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
<div class="faq-answer">
<p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending on the provider.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">How can I request special medical equipment or personnel on the ambulance?</button>
<div class="faq-answer">
<p>During your request, you can specify if the patient needs specific medical equipment or personnel, such as a ventilator or a specialized doctor.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
<div class="faq-answer">
<p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a technical issue through the system or contact support.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">Can I schedule an ambulance in advance?</button>
<div class="faq-answer">
<p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
</div>
</div>

<!-- Footer Container -->
<div class="footer-container" style="display: flex; justify-content: space-between; align-items: flex-start;">
<!-- Contact Information Section -->
<div class="contact-ft" style="flex: 1; min-width: 200px;">
<h3>Contact Info</h3>
<pre>123 Emergency Lane, Mumbai, India
Phone : +91-911-1234567
Email : [email protected]</pre>
</div>

<!-- Social Media Links -->
<div class="social-ft"
style="flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 220px;">
<h3>Get in Touch</h3>
<div style="display: flex; justify-content: center; gap: 1rem; font-size: 1.9rem; flex-wrap: wrap; "
class="links">
<a href="https://www.facebook.com" style="color: white; text-decoration: none;"><i
class="fab fa-facebook-f"></i></a>
<a href="https://www.twitter.com" style="color: white; text-decoration: none;"><i
class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.instagram.com" style="color: white; text-decoration: none;"><i
class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com" style="color: white; text-decoration: none;"><i
class="fab fa-linkedin-in"></i></a>
</div>
</div>

<!-- FAQ section ends here -->

</div>
</div>


<footer style="color: #f3f4f6; text-align: center; width: 100%;">
<div style="background-color: #C4D7FF; color: #f3f4f6; ">
Expand Down Expand Up @@ -704,25 +731,29 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
document.addEventListener('DOMContentLoaded', function() {
const faqButtons = document.querySelectorAll('.faq-question');

faqButtons.forEach(button => {
button.addEventListener('click', function() {
const faq = button.parentElement;
const answer = faq.querySelector('.faq-answer');

// Toggle active class
faq.classList.toggle('active');
<!-- Copyright Section -->
<div style="
text-align: center;
margin-top: 20px;
border-top: 1px solid white;
padding-top: 10px;
">
<p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
</div>
</footer>

// Control the max-height for slide effect
if (faq.classList.contains('active')) {
answer.style.maxHeight = answer.scrollHeight + 'px'; // Set the height based on content
} else {
answer.style.maxHeight = null; // Remove max-height to hide
}
});
});
});

<!-- Back to Top Button -->
<button id="back-to-top">
<i class="fas fa-chevron-up" style="font-size: 30px;"></i>
</button>

<script src="script.js"></script>

</script>
</body>


</html>


60 changes: 60 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@


// Newsletter form submission handler
document
.getElementById("newsletter-form")
Expand All @@ -23,6 +25,7 @@ document
});

// Accordion functionality

const accordions = document.querySelectorAll(".accordion");

accordions.forEach((accordion, index) => {
Expand All @@ -47,3 +50,60 @@ accordions.forEach((accordion, index) => {
ic.classList.remove("ri-subtract-fill");
}
});


});

// Function to handle the active state of navbar items
function changeContent(page) {
// Get all navigation links
var links = document.querySelectorAll(".menu ul li a");

// Remove the active class from all links
links.forEach((link) => link.classList.remove("active"));

// Add the active class to the clicked link
document.getElementById(page + "-link").classList.add("active");
}

// Make "Home" the default active page on load
window.onload = function () {
document.getElementById("home-link").classList.add("active");
};

//JS for dark mode fuctionality
// Select the dark mode button
// Get the dark mode button element
const darkModeButton = document.getElementById('dark-mode-button');

// Add event listener for toggle functionality
darkModeButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');

// Toggle icon between moon and sun
const icon = darkModeButton.querySelector('i');
icon.classList.toggle('fa-moon');
icon.classList.toggle('fa-sun');

// Log the current classes for debugging
console.log(icon.classList); // Check the classes being applied to the icon
});


// Back to top button functionality
const backToTopButton = document.getElementById('back-to-top');

// Show the button when scrolled down 100px from the top
window.onscroll = function () {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
backToTopButton.style.display = "block";
} else {
backToTopButton.style.display = "none";
}
};

// Scroll to top when the button is clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });

});
Loading

0 comments on commit 5266d6e

Please sign in to comment.