diff --git a/index.html b/index.html index fda9727e..a02f5a98 100644 --- a/index.html +++ b/index.html @@ -1,313 +1,488 @@ - - - - AmbuFlow - - - - - - + + body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + color: #333; + display: flex; + flex-direction: column; + min-height: 100vh; + } + + .menu ul li a { + padding: 10px 15px; + color: black; + text-decoration: none; + border-radius: 10px; + } + + .menu ul li a.active { + color: white; + background-color:#1d4ed8; + } + + .content { + margin: 20px; + padding: 20px; + background-color: #fff; + border-radius: 5px; + flex-grow: 1; + } + + h1 { + color: #2c3e50; + text-align: center; + margin-bottom: 20px; + } + + .grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-template-rows: auto auto; + gap: 20px; + animation: fadeIn 1s ease-in-out; + } + + .feature { + background-color: #e7f3fe; + border-radius: 10px; + padding: 15px; + text-align: center; + transition: transform 0.3s, box-shadow 0.3s; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + } + + .feature:hover { + transform: translateY(-5px); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); + } + + .feature img { + width: 100px; + height: 100px; + object-fit: cover; + margin-bottom: 10px; + border-radius: 50%; + } + + .feature h2 { + color: #2980b9; + margin-bottom: 10px; + } + + .feature p { + color: #555; + } + + + .team-feature, + .team-feature, + .contact-feature { + padding: 20px; + display: flex; + align-items: center; + text-align: left; + border-radius: 10px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + grid-column: 1 / -1; + } + + .team-feature { + background-color: #e7ffe7; + } + + .contact-feature { + background-color: #f2e4aa; + + } + + + + .team-feature img, + .contact-feature img { + width: 150px; + height: auto; + margin-right: 20px; + border-radius: 10px; + } + + footer { + background-color: #000; + color: white; + text-align: center; + padding: 10px 0; + width: 100%; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + + to { + opacity: 1; + } + } + + /* Logo Animation */ + @keyframes logoAnimation { + 0% { + opacity: 0; + transform: translateX(-100px); /* Start from the left */ + } + 50% { + transform: translateX(10px); /* Move slightly to the right */ + } + 100% { + opacity: 1; + transform: translateX(0); /* End at original position */ + } + } + + /* Letter Drop Animation */ + @keyframes letterDrop { + 0% { + transform: translateY(-100%); + opacity: 0; + } + 50% { + transform: translateY(10px); /* Slight bounce */ + opacity: 1; + } + 100% { + transform: translateY(0); + } + } + + .logo { + display: flex; + align-items: center; + animation: logoAnimation 1s ease forwards; + } + + .brand-name { + display: flex; + flex-direction: row; + align-items: center; + margin-right: 10px; /* Space between the text and the logo image */ + } + + .letter { + display: inline-block; + font-size: 2rem; + animation: letterDrop 0.5s ease forwards; + } + + .red { + color: red; /* Change the color of letters in this class to red */ + } + + + + -
-
-
-
+
+
+
+
+
+ + +
+
+ + +
+ + + Get started +
- - -
-
-
+ +
+

Welcome to the Ambulance Monitoring System

+
+
+ Emergency Response +

Quick Emergency Response

+

+ Ensures patients receive timely medical assistance by locating the + nearest hospitals and ambulances. +

+
+
+ Real-Time Tracking +

Real-Time Tracking

+

+ Provides real-time updates on ambulance locations and traffic + conditions, optimizing route management. +

+
+
+ 24/7 Availability +

24/7 Availability

+

+ Ensures round-the-clock service, making sure that help is just a + call away, anytime, anywhere. +

+
+
+ Enhanced Communication +

Enhanced Communication

+

+ Facilitates seamless communication between patients, hospitals, and + ambulance drivers. +

+
+
+ Resource Management +

Resource Management

+

+ Helps hospitals manage their resources efficiently by providing + critical information and analytics. +

+
+ +
+
+ +
+
+
+
+ Meet the Team +

Meet the Team

- -
- - Get started +
+

+ Learn more about our dedicated team working tirelessly to ensure + efficient ambulance monitoring and resource management. +

+ Go to Team
+
-
- -
-

Welcome to the Ambulance Monitoring System

-
-
- Emergency Response -

Quick Emergency Response

-

- Ensures patients receive timely medical assistance by locating the - nearest hospitals and ambulances. -

-
-
- Real-Time Tracking -

Real-Time Tracking

-

- Provides real-time updates on ambulance locations and traffic - conditions, optimizing route management. -

-
-
- 24/7 Availability -

24/7 Availability

-

- Ensures round-the-clock service, making sure that help is just a - call away, anytime, anywhere. -

+ + +
+
+
+ Contact Us +

Contact Us

-
- Enhanced Communication -

Enhanced Communication

-

- Facilitates seamless communication between patients, hospitals, and - ambulance drivers. -

-
-
- Resource Management -

Resource Management

-

- Helps hospitals manage their resources efficiently by providing - critical information and analytics. -

+
+

+ Reach out to us for any inquiries or assistance. We're here to + help you 24/7 with our emergency services. +

+ Go to Contact
+
+
+
+
+ -
- -
-
-
- Meet the Team -

Meet the Team

-
-
-

- Learn more about our dedicated team working tirelessly to ensure - efficient ambulance monitoring and resource management. -

- Go to Team -
-
-
+ +
- -
-
-
- Contact Us -

Contact Us

-
-
-

- Reach out to us for any inquiries or assistance. We're here to - help you. -

- Contact Form -
-
-
-
+ + +
- -
-

Subscribe to Our Newsletter

- - - -
+ +
+

Contact Info

+ 
123 Emergency Lane, Mumbai, India
+Phone: +91-911-1234567
+
+Email: emergency@ambulanceservice.in
+
+ + +
+

Subscribe to Our Newsletter

+
+ +

+ +
+
+ + + + +
+ + +
+

© 2024 Ambulance Monitoring System. All rights reserved.

+
+
+ + + + + // Add this new code for handling the newsletter form submission + document.getElementById('newsletter-form').addEventListener('submit', function(e) { + e.preventDefault(); + var email = this.querySelector('input[type="email"]').value; + var messageElement = document.getElementById('subscription-message'); + + // Here you would typically send the email to your server + // For this example, we'll just show a success message + messageElement.textContent = 'Thank you for subscribing!'; + messageElement.style.display = 'block'; + + // Clear the form + this.reset(); + + // Hide the message after 5 seconds + setTimeout(function() { + messageElement.style.display = 'none'; + }, 5000); + }); + - + \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css index aedb4417..e960fca8 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -41,7 +41,7 @@ header { display: flex; justify-content: space-between; align-items: center; - padding: 10px 20px; + padding: 3px; } .brand-name{ @@ -160,7 +160,6 @@ header { } - @media (max-width: 768px) { .menu ul { flex-direction: column; @@ -346,7 +345,7 @@ header { border-radius: 50%; /* Ensure round shape */ } } -======= + #loader-wrapper { position: fixed; top: 0; diff --git a/src/css/login.css b/src/css/login.css index c590fa65..ef3bddfc 100644 --- a/src/css/login.css +++ b/src/css/login.css @@ -404,7 +404,7 @@ form.sign-in-form { position: absolute; top: 20px; left: 20px; - background: #083177; + background: #134497; color: #fff; padding: 10px; border-radius: 10px;