Skip to content

Commit

Permalink
Merge pull request #106 from Web-Dev-Learner/improve-nav-section
Browse files Browse the repository at this point in the history 
Improved navigation section with SPA, icons, animation, and footer
  • Loading branch information
@mansiruhil13
mansiruhil13 authored Oct 4, 2024
2 parents 91ee42d + fa81e43 commit 45dbb00
Show file tree
Hide file tree
Showing 19 changed files with 890 additions and 6 deletions.
191 changes: 191 additions & 0 deletions contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.logo span {
font-size: 28px;
font-weight: bold;
background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-webkit-background-clip: text;
color: transparent;
letter-spacing: 2px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-family: 'Arial', sans-serif;
}

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;
}

.menu ul li a.active {
color: white;
background-color: #000;
}

.content {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
flex-grow: 1;
}

h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}

.contact-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
animation: fadeIn 1s ease-in-out;
}

.contact-item {
background-color: #e7f3fe;
border-radius: 10px;
padding: 15px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
width: 250px; /* Adjusted width for a better fit in a row */
transition: transform 0.3s, box-shadow 0.3s;
}

.contact-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.contact-item img {
width: 80px;
height: 80px;
margin-bottom: 10px;
}

.social-media {
display: flex;
justify-content: center;
margin-top: 30px;
gap: 20px;
}

.social-icon {
font-size: 24px;
color: #2980b9;
transition: color 0.3s;
}

.social-icon:hover {
color: #ff5733;
}

footer {
background-color: #000;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>

<header>
<div class="container">
<div class="logo">
<span>Ambulance Monitoring System</span>
</div>
<nav class="menu">
<ul>
<li><a href="home.html" id="home-link" onclick="changeContent('home')">Home</a></li>
<li><a href="features.html" id="features-link" onclick="changeContent('features')">Features</a></li>
<li><a href="team.html" id="team-link" onclick="changeContent('team')">Team</a></li>
<li><a href="contact.html" id="contact-link" onclick="changeContent('contact')">Contact</a></li>
</ul>
</nav>
<div class="buttons">
<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>
</div>
</div>
</header>

<div class="content" id="main-content">
<h1>Contact Us</h1>
<div class="contact-info">
<div class="contact-item">
<img src="images/call1-w.avif" alt="Call Us">
<h2>Call Us</h2>
<p>For immediate assistance, call our emergency line at <strong>123-456-7890</strong>.</p>
</div>
<div class="contact-item">
<img src="images/help-w.png" alt="Help">
<h2>Need Help?</h2>
<p>Our team is available 24/7 to help you with any inquiries.</p>
</div>
<div class="contact-item">
<img src="images/caremeregency-w.png" alt="Emergency Care">
<h2>Emergency Care</h2>
<p>In case of an emergency, please do not hesitate to reach out to us immediately.</p>
</div>
</div>

<!-- 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="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin"></i></a>
</div>
</div>

<footer>
<p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
</footer>

<script>
function changeContent(page) {
var links = document.querySelectorAll('.menu ul li a');
links.forEach(link => link.classList.remove('active'));
document.getElementById(page + '-link').classList.add('active');
}

window.onload = function() {
document.getElementById('contact-link').classList.add('active');
};
</script>

</body>
</html>
190 changes: 190 additions & 0 deletions features.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Features</title>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.logo span {
font-size: 28px;
font-weight: bold;
background: linear-gradient(45deg, #ff5733, #33ff57, #3357ff);
-webkit-background-clip: text;
color: transparent;
letter-spacing: 2px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
font-family: 'Arial', sans-serif;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
}
.menu ul {
list-style-type: none;
padding: 0;
}
.menu ul li {
display: inline;
margin-right: 10px; /* Space between menu items */
}
.menu ul li a {
padding: 10px 15px;
color: black;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.menu ul li a:hover {
background-color: #000;
color: white;
}
.menu ul li a.active {
color: white;
background-color: #000;
}
.content {
margin: 20px;
padding: 20px;
background-color: #e6eef3;
border-radius: 5px;
flex-grow: 1; /* Allows content area to expand */
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 20px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
animation: fadeIn 1s ease-in-out; /* Animation for the grid */
}
.feature-card {
background: #abd4fc;
padding: 15px;
border-radius: 5px;
text-align: center;
transition: transform 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 40px;
color: #0560c2; /* Bootstrap primary color */
margin-bottom: 10px;
}
footer {
background-color: #000;
color: white;
text-align: center;
padding: 10px 0; /* Padding for the footer */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>

<header>
<div class="container">
<div class="logo">
<span>Ambulance Monitoring System</span>
</div>
<nav class="menu">
<ul>
<li><a href="home.html" id="home-link">Home</a></li>
<li><a href="features.html" id="features-link" class="active">Features</a></li>
<li><a href="team.html" id="team-link">Team</a></li>
<li><a href="contact.html" id="contact-link">Contact</a></li>
</ul>
</nav>
<div class="buttons">
<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>
</div>
</div>
</header>

<div class="content" id="main-content">
<h1>Features</h1>
<p>Here are the features of the Ambulance Monitoring System:</p>
<div class="features-grid">
<div class="feature-card">
<i class="fas fa-ambulance feature-icon"></i>
<h2>Quick Emergency Response</h2>
<p>Immediate notifications to the nearest ambulance service.</p>
</div>
<div class="feature-card">
<i class="fas fa-map-marked-alt feature-icon"></i>
<h2>Real-Time Tracking</h2>
<p>Track ambulances in real-time for better coordination.</p>
</div>
<div class="feature-card">
<i class="fas fa-comments feature-icon"></i>
<h2>Enhanced Communication</h2>
<p>Instant communication between dispatch and ambulances.</p>
</div>
<div class="feature-card">
<i class="fas fa-cogs feature-icon"></i>
<h2>Resource Management</h2>
<p>Efficient allocation of resources for emergencies.</p>
</div>
<div class="feature-card">
<i class="fas fa-user-friends feature-icon"></i>
<h2>User-Friendly Interface</h2>
<p>Easy-to-navigate system for users and providers.</p>
</div>
<div class="feature-card">
<i class="fas fa-clock feature-icon"></i>
<h2>24/7 Availability</h2>
<p>Always available support and monitoring services.</p>
</div>
<div class="feature-card">
<i class="fas fa-heartbeat feature-icon"></i>
<h2>Patient Health Monitoring</h2>
<p>Real-time monitoring of patient vitals during transport.</p>
</div>
<div class="feature-card">
<i class="fas fa-lock feature-icon"></i>
<h2>Data Security</h2>
<p>Ensuring the security of patient and operational data.</p>
</div>
<div class="feature-card">
<i class="fas fa-phone-alt feature-icon"></i>
<h2>Emergency Contact Integration</h2>
<p>Seamless integration with emergency contact services.</p>
</div>
<div class="feature-card">
<i class="fas fa-comments-dollar feature-icon"></i>
<h2>Feedback System</h2>
<p>Collecting feedback to improve service quality.</p>
</div>
</div>
</div>

<!-- Footer -->
<footer>
<p>&copy; 2024 Ambulance Monitoring System. All rights reserved.</p>
</footer>

</body>
</html>
Loading

0 comments on commit 45dbb00

Please sign in to comment.