Skip to content

Commit

Permalink
Merge pull request #499 from ananyag309/master
Browse files Browse the repository at this point in the history 
Created FAQ popup model and added it to footer
  • Loading branch information
@vimistify
vimistify authored Oct 9, 2024
2 parents 48a4745 + bf122ad commit 267cdff
Showing 1 changed file with 134 additions and 4 deletions.
138 changes: 134 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,72 @@
pointer-events: none;
z-index: 9999;
}

/* FAQ Popup Styles */
#faqPopup {
font-family: Arial, sans-serif;
}

#faqPopup h2 {
color: #2980b9;
margin-bottom: 20px;
}

.faq-item {
margin-bottom: 20px;
}

.faq-item h3 {
color: #34495e;
margin-bottom: 10px;
}

.faq-item p {
color: #7f8c8d;
}

#faqButton:hover {
background-color: #2c3e50;
}

/* FAQ Button Styles */
#faqButton {
position: fixed;
bottom: 20px;
right: 80px; /* Moved further to the left */
z-index: 1000;
background-color: #2980b9;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}

#faqButton:hover {
background-color: #3498db;
}

/* Back to Top Button Styles */
#backToTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
background-color: #e81a1a;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
display: none; /* Hidden by default */
transition: opacity 0.3s, visibility 0.3s;
}

#backToTopBtn:hover {
background-color: #c91515;
}
</style>

</head>
Expand Down Expand Up @@ -502,6 +568,8 @@
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<header class="sticky">
<div class="container">
Expand Down Expand Up @@ -627,7 +695,9 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Quick Links<
<li><a href="contact.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Contact Us</a></li>
<li><a href="privacy.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Privacy Policy</a></li>
<li><a href="terms.html" style="color: #000000; background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Terms of Service</a></li>
<li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
<li><a href="sitemap.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">Site Map</a></li>
<!-- Add FAQ link here -->
<li><a href="faq.html" style="color: #000000;background:none; cursor: pointer; text-decoration: none;" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">FAQ</a></li>
</ul>
</div>

Expand Down Expand Up @@ -664,8 +734,7 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
<button type="submit"
style="background-color: #e81a1a; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;">Subscribe</button>
</form>
</div>

</div>
<style>
.hover-link {
color: #000000;
Expand Down Expand Up @@ -708,7 +777,18 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
document.addEventListener('DOMContentLoaded', function() {
var backToTopBtn = document.getElementById("backToTopBtn");

backToTopBtn.addEventListener('click', function() {
// Show/hide button based on scroll position
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) { // Show button after scrolling down 300px
backToTopBtn.style.display = "block";
} else {
backToTopBtn.style.display = "none";
}
});

// Smooth scroll to top when button is clicked
backToTopBtn.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
Expand Down Expand Up @@ -794,3 +874,53 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
});
});
</script>

<!-- FAQ Popup Button -->
<button id="faqButton" style="position: fixed; bottom: 20px; right: 80px; z-index: 1000; background-color: #2980b9; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;">FAQ</button>

<!-- FAQ Popup -->
<div id="faqPopup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1001; max-width: 80%; max-height: 80%; overflow-y: auto;">
<h2>Frequently Asked Questions</h2>
<div class="faq-content">
<div class="faq-item">
<h3>What is AmbuFlow?</h3>
<p>AmbuFlow is an advanced ambulance monitoring system designed to optimize emergency response times and improve patient care.</p>
</div>
<div class="faq-item">
<h3>How does real-time tracking work?</h3>
<p>Our system uses GPS technology to track ambulances in real-time, allowing for efficient dispatch and route optimization.</p>
</div>
<div class="faq-item">
<h3>Is the service available 24/7?</h3>
<p>Yes, AmbuFlow operates round the clock to ensure emergency services are always available when needed.</p>
</div>
<div class="faq-item">
<h3>How can hospitals benefit from AmbuFlow?</h3>
<p>Hospitals can improve resource management, reduce response times, and enhance overall patient care through our integrated system.</p>
</div>
</div>
<button id="closeFaqPopup" style="background-color: #e74c3c; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; margin-top: 10px;">Close</button>
</div>

<script>
// FAQ Popup functionality
const faqButton = document.getElementById('faqButton');
const faqPopup = document.getElementById('faqPopup');
const closeFaqPopup = document.getElementById('closeFaqPopup');

faqButton.addEventListener('click', () => {
faqPopup.style.display = 'block';
});

closeFaqPopup.addEventListener('click', () => {
faqPopup.style.display = 'none';
});

// Close popup when clicking outside
window.addEventListener('click', (event) => {
if (event.target === faqPopup) {
faqPopup.style.display = 'none';
}
});
</script>

0 comments on commit 267cdff

Please sign in to comment.