Skip to content

feat: Add Pollution Education Hub page (education.html) #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Riya-Kharade wants to merge 1 commit into from
Closed

feat: Add Pollution Education Hub page (education.html) #296

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions education.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EcoPulse | Education Hub</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>

<script>
tailwind.config = {
theme: {
extend: {
colors: {
'eco-green': '#10B981',
'eco-blue': '#3B82F6',
'eco-purple': '#8B5CF6',
'eco-orange': '#F97316',
'eco-red': '#EF4444',
}
}
}
}
</script>

<style>
.accordion-content {
display: none;
}
</style>

</head>

<body class="bg-gray-50 text-gray-800">

<!-- Navbar -->
<nav class="bg-white shadow-md p-4 flex justify-between items-center">
<h1 class="text-2xl font-bold text-eco-green">Pollution Education Hub 🧠</h1>
<a href="index.html" class="bg-eco-blue text-white px-4 py-2 rounded hover:bg-eco-purple transition">
⬅ Back Home
</a>
</nav>

<!-- Hero Section -->
<section class="text-center py-14 bg-gradient-to-r from-eco-green to-eco-blue text-white">
<h2 class="text-4xl font-bold mb-3">Learn About Environmental Pollution</h2>
<p class="opacity-90 max-w-3xl mx-auto">
Understand key environmental concepts, pollution types, and scientific terms
to better interpret pollution data.
</p>
</section>

<!-- Content Section -->
<section class="max-w-5xl mx-auto px-6 py-16 space-y-6">

<!-- AQI -->
<div class="bg-white shadow-lg rounded-xl p-6">
<button onclick="toggleAccordion(this)"
class="w-full text-left text-xl font-semibold text-eco-green">
🌫 What is AQI?
</button>
<div class="accordion-content mt-4 text-gray-700">
<p>
AQI stands for Air Quality Index. It is a numerical scale used to measure
the quality of air and its impact on health. The higher the AQI value,
the greater the level of air pollution and health concern.
</p>
<ul class="mt-3 list-disc ml-6 text-sm">
<li>0–50: Good</li>
<li>51–100: Moderate</li>
<li>101–200: Unhealthy</li>
<li>200+: Hazardous</li>
</ul>
</div>
</div>

<!-- PM2.5 -->
<div class="bg-white shadow-lg rounded-xl p-6">
<button onclick="toggleAccordion(this)"
class="w-full text-left text-xl font-semibold text-eco-orange">
🫁 What is PM2.5?
</button>
<div class="accordion-content mt-4 text-gray-700">
<p>
PM2.5 refers to fine particulate matter that is 2.5 micrometers or smaller.
These particles can penetrate deep into the lungs and even enter the bloodstream,
causing respiratory and cardiovascular diseases.
</p>
</div>
</div>

<!-- Air Pollution -->
<div class="bg-white shadow-lg rounded-xl p-6">
<button onclick="toggleAccordion(this)"
class="w-full text-left text-xl font-semibold text-eco-purple">
🌍 Types of Pollution Explained
</button>
<div class="accordion-content mt-4 text-gray-700 space-y-4">

<div>
<h4 class="font-semibold text-eco-blue">🌫 Air Pollution</h4>
<p>Caused by vehicle emissions, industrial smoke, and burning fuels.</p>
</div>

<div>
<h4 class="font-semibold text-eco-orange">💧 Water Pollution</h4>
<p>Occurs due to industrial waste, sewage discharge, and plastic waste.</p>
</div>

<div>
<h4 class="font-semibold text-eco-green">🌱 Soil Pollution</h4>
<p>Caused by chemical fertilizers, pesticides, and hazardous waste.</p>
</div>

<div>
<h4 class="font-semibold text-eco-red">🔊 Noise Pollution</h4>
<p>Excessive sound levels from traffic, construction, and industries.</p>
</div>

</div>
</div>

</section>

<!-- Footer -->
<footer class="bg-gray-900 text-gray-300 py-6 text-center">
<p>© 2026 EcoPulse. All rights reserved.</p>
</footer>

<script>
function toggleAccordion(button){
const content = button.nextElementSibling;
content.style.display = content.style.display === "block" ? "none" : "block";
}
</script>

</body>
</html>
Loading