Skip to content

Commit

Permalink
Merge branch 'main' into cursor_tail
Browse files Browse the repository at this point in the history
  • Loading branch information
@ritiksingh-01
ritiksingh-01 authored Oct 8, 2024
2 parents 1213013 + 671f80b commit ccd5186
Show file tree
Hide file tree
Showing 8 changed files with 888 additions and 181 deletions.
38 changes: 30 additions & 8 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@
width: 80px;
height: 80px;
margin-bottom: 10px;
border-radius: 50%;
border: 3px solid #2980b9;
}

.social-media {
Expand All @@ -82,14 +84,34 @@

.social-icon {
font-size: 24px;
color: #2980b9;
transition: color 0.3s;
color: #000000;
transition: transform 0.9s ease, color 0.9s ease;
/* Smooth transition */
}

.social-icon:hover {
color: #ff5733;
#facebook:hover {
color: #1877F2;
transform: scale(1.5);
}

#twitter:hover {
color: #1da1f2;
transform: scale(1.5);
}

#instagram:hover {
background: linear-gradient(45deg, #FF0080, #FF8C00, #FFD700);
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transform: scale(1.5);
}
#linkedin:hover {
color: #0077B5;
transform: scale(1.5);
}


footer {
background-color: #C4D7FF;
color: white;
Expand Down Expand Up @@ -228,10 +250,10 @@ <h2>Emergency Care</h2>

<!-- Social Media Section -->
<div class="social-media">
<a href="#" class="social-icon"><i class="fab fa-facebook"></i></a>
<a href="#" class="social-icon"><i class="fa-brands fa-x-twitter"></i></a> <!--Updated icon-->
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
<a href="#" class="social-icon"><i class="fab fa-facebook" id="facebook"></i></a>
<a href="#" class="social-icon"><i class="fa-brands fa-x-twitter" id="twitter"></i></a> <!--Updated icon-->
<a href="#" class="social-icon"><i class="fab fa-instagram" id="instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin" id="linkedin"></i></a>
</div>
</div>

Expand Down
192 changes: 114 additions & 78 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 @@ -102,6 +109,7 @@
object-fit: cover;
margin-bottom: 10px;
border-radius: 50%;
border: 3px solid #2980b9;
}

.feature h2 {
Expand Down Expand Up @@ -382,6 +390,7 @@
z-index: 9999;
}
</style>

</head>

<body>
Expand Down Expand Up @@ -420,6 +429,42 @@
<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 @@ -439,6 +484,7 @@
/></a>
</div>


<nav class="menu">
<ul>
<li>
Expand Down Expand Up @@ -537,79 +583,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 @@ -753,23 +781,25 @@ <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>
Expand Down Expand Up @@ -813,5 +843,11 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">Subscribe to
});

</script>


</body>


</html>


Loading

0 comments on commit ccd5186

Please sign in to comment.