Skip to content

Commit

Permalink
updated how to use aed
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctkqiang
ctkqiang committed Nov 4, 2024
1 parent e7ffd00 commit a57f3df
Show file tree
Hide file tree
Showing 6 changed files with 306 additions and 9 deletions.
Binary file added public/assets/illustration/medicine-student-doing-their-practice-hospital.webp
View file
Binary file not shown.
Binary file added public/assets/illustration/paramedic-giving-oxygen-injured-girl_107420-63759.webp
View file
Binary file not shown.
29 changes: 20 additions & 9 deletions public/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,23 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
.hero-section {
background: linear-gradient(135deg, #1e88e5, #1565c0);
color: white;
padding: 100px 0;
min-height: 100vh;
}
.hero-section {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('/assets/illustration/paramedic-giving-oxygen-injured-girl_107420-63759.webp');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: white;
padding: 100px 0;
min-height: 100vh;
position: relative;
}
/* Add this for better text readability */
.hero-content {
position: relative;
z-index: 2;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.feature-card {
transition: transform 0.3s ease;
Expand Down Expand Up @@ -119,13 +130,13 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#features">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/public/how-to-use-aed">How To Use AED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
<a class="nav-link" href="/public/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/public/pages/contact">Contact</a>
Expand Down Expand Up @@ -167,7 +178,7 @@
<button class="btn btn-light btn-lg pulse">Find Nearest AED</button>
</a>
</div>
<div class="screenshot col-lg-6 animate__animated animate__fadeInRight">
<div class="col-lg-6 animate__animated animate__fadeInRight">
<img src="/assets/screenshot.png" alt="AED Location Map" class="screenshot img-fluid rounded shadow">
</div>
</div>
Expand Down
201 changes: 201 additions & 0 deletions public/pages/about.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= title %> - About Us</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
.hero-section {
background: linear-gradient(135deg, #1e88e5, #1565c0);
color: white;
padding: 120px 0 60px 0;
margin-bottom: 40px;
}
.mission-card {
border-radius: 15px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
background: white;
}
.mission-card:hover {
transform: translateY(-5px);
}
.stat-card {
text-align: center;
padding: 25px;
border-radius: 10px;
background: #f8f9fa;
margin-bottom: 20px;
}
.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #1e88e5;
margin-bottom: 10px;
}
.team-section {
background: #f8f9fa;
padding: 60px 0;
margin: 40px 0;
}
.icon-feature {
font-size: 2.5rem;
color: #1e88e5;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/public/main">
<i class="bi bi-heart-pulse"></i> <%= title %>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/public/main">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/public/pages/contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Hero Section -->
<section class="hero-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center animate__animated animate__fadeIn">
<h1 class="display-4 fw-bold mb-4">About <%= title %></h1>
<p class="lead">Every Second Counts in Saving Lives</p>
</div>
</div>
</div>
</section>

<!-- Main Content -->
<div class="container">
<!-- Mission Statement -->
<div class="row justify-content-center mb-5">
<div class="col-lg-8 text-center">
<div class="mission-card animate__animated animate__fadeInUp">
<i class="bi bi-clock-history icon-feature"></i>
<h2 class="mb-4">Our Mission</h2>
<p class="lead">
At <%= title %>, we are dedicated to minimizing emergency response times in cardiac arrest situations.
We believe that every second saved increases the chance of survival by 10%. Through strategic AED placement
and public awareness, we're building a safer Penang where life-saving equipment is always within reach.
</p>
</div>
</div>
</div>

<!-- Statistics -->
<div class="row mb-5">
<div class="col-md-4">
<div class="stat-card animate__animated animate__fadeInLeft">
<div class="stat-number">3-5</div>
<div class="stat-label">Minutes Critical Window</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card animate__animated animate__fadeInUp">
<div class="stat-number">70%</div>
<div class="stat-label">Survival Rate with Quick AED</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card animate__animated animate__fadeInRight">
<div class="stat-number">100+</div>
<div class="stat-label">AEDs Mapped in Penang</div>
</div>
</div>
</div>

<!-- Key Features -->
<div class="row mb-5">
<div class="col-md-4">
<div class="mission-card">
<i class="bi bi-geo-alt icon-feature"></i>
<h3>Strategic Placement</h3>
<p>We analyze population density and emergency data to optimize AED locations across Penang.</p>
</div>
</div>
<div class="col-md-4">
<div class="mission-card">
<i class="bi bi-speedometer2 icon-feature"></i>
<h3>Rapid Response</h3>
<p>Our system ensures that AEDs are accessible within 3 minutes of any cardiac emergency.</p>
</div>
</div>
<div class="col-md-4">
<div class="mission-card">
<i class="bi bi-people icon-feature"></i>
<h3>Community Training</h3>
<p>Regular workshops and training sessions to empower the public with life-saving skills.</p>
</div>
</div>
</div>

<!-- Impact Section -->
<div class="row justify-content-center mb-5">
<div class="col-lg-10">
<div class="mission-card">
<h2 class="text-center mb-4">Our Impact</h2>
<p class="lead text-center">
Through our initiatives, we've significantly improved cardiac emergency response times in Penang.
Our network of strategically placed AEDs, combined with our user-friendly locator system, has made
life-saving equipment more accessible than ever before.
</p>
<div class="text-center mt-4">
<a href="/public/pages/contact" class="btn btn-primary btn-lg">Join Our Mission</a>
</div>
</div>
</div>
</div>
</div>

<!-- Footer -->
<footer class="bg-dark text-white py-4">
<div class="container text-center">
<p class="mb-0">&copy; 2024 <%= title %>. All rights reserved. 上饶满星科技</p>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Animation trigger on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate__animated', 'animate__fadeInUp');
}
});
}, {
threshold: 0.1
});
document.querySelectorAll('.mission-card').forEach(card => {
observer.observe(card);
});
</script>
</body>
</html>
81 changes: 81 additions & 0 deletions public/pages/aed.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,87 @@
margin-bottom: 1rem;
color: #1e88e5;
}
.custom-popup .leaflet-popup-content-wrapper {
background: #ffffff;
color: #333333;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.custom-popup .leaflet-popup-content {
margin: 12px;
}
.custom-popup .leaflet-popup-tip-container {
margin-top: -1px;
}
.custom-popup .leaflet-popup-tip {
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
/* Popup header */
.custom-popup h5 {
color: #1e88e5; /* Match your theme blue color */
margin-bottom: 10px;
font-weight: 600;
}
/* Popup content */
.custom-popup p {
margin-bottom: 8px;
color: #4a4a4a;
}
/* Strong text in popup */
.custom-popup strong {
color: #2196F3;
}
/* Navigation button in popup */
.custom-popup .btn-primary {
background-color: #1e88e5;
border-color: #1e88e5;
transition: all 0.3s ease;
}
.custom-popup .btn-primary:hover {
background-color: #1565c0;
border-color: #1565c0;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Images in popup */
.custom-popup .popup-images img {
border: 2px solid #f5f5f5;
transition: transform 0.3s ease;
}
.custom-popup .popup-images img:hover {
transform: scale(1.02);
}
/* Carousel in popup */
.custom-popup .carousel {
border: 2px solid #f5f5f5;
border-radius: 8px;
}
/* Close button */
.custom-popup .leaflet-popup-close-button {
color: #1e88e5;
font-size: 20px;
padding: 5px;
transition: all 0.3s ease;
}
.custom-popup .leaflet-popup-close-button:hover {
color: #1565c0;
transform: scale(1.1);
}
</style>
</head>
<body>
Expand Down
4 changes: 4 additions & 0 deletions src/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,10 @@ app.get('/public/locate-aed', (req, res) => {
});
});

app.get('/public/about', (req, res) => {
res.render('pages/about', { title: APP_NAME });
});

app.get('/public/how-to-use-aed', (req, res) => {
res.render('pages/how-to-use-aed', { title: APP_NAME });
});
Expand Down

0 comments on commit a57f3df

Please sign in to comment.