[Feature Request] Add Pollution Alerts Page (alerts.html)

[Riya-Kharade]

💡 The Problem

Currently, EcoPulse provides dashboards and comparison tools, but it does not include a real-time alert system to notify users about critical pollution levels.

Users are unable to:

• View high AQI warnings
• Identify severe pollution conditions instantly
• Receive alert-style visual feedback

Without an alert system, the platform lacks urgency and real-time environmental awareness.

---

🚀 Proposed Solution

Create a new page called alerts.html that displays pollution alerts in a monitoring-style interface.

The page should include:

• 🚨 High AQI warning alerts
• 🎨 Severity badges (Low / Moderate / High / Severe)
• ❌ Dismiss alert option
• 🔄 Mock real-time updates (auto-refresh simulation)
• 📍 City-based alert display

The feature will simulate live environmental monitoring behavior using static or mock data.

No backend required.

---

🎨 Visual Representation

The alerts.html page should include:

1️⃣ Hero Section

• Title: "Live Pollution Alerts"
• Short description about monitoring environmental risks

---

2️⃣ Alert Cards Section

Each alert card should display:

• City name
• Pollution type (Air, Water, Noise, etc.)
• AQI value
• Severity badge:
  • 🟢 Low
  • 🟡 Moderate
  • 🟠 High
  • 🔴 Severe
• Dismiss (close) button
• Timestamp (mock real-time)

Color-coded background based on severity level.

---

3️⃣ Real-Time Simulation

• Use JavaScript to:
  • Randomly update AQI values
  • Add new alert cards periodically
  • Show “Last updated” indicator

Optional enhancements:

• Pulsing red animation for severe alerts
• Auto-remove dismissed alerts
• Sound notification toggle

---

🛠️ Implementation Details

• New File: alerts.html
• Use Tailwind CSS for eco-themed alert cards
• Use Vanilla JavaScript for:
  • Alert generation logic
  • Severity classification
  • Dismiss functionality
  • Mock real-time update simulation
• No backend required
• Responsive layout for mobile & desktop

---

🎯 Impact

This feature will:

• Simulate a real environmental monitoring system
• Add urgency and realism to the platform
• Increase user engagement
• Strengthen hackathon and portfolio presentation value
• Improve production-level perception

It transforms EcoPulse from a visualization dashboard into a live environmental alert system.

Assign this issue to me under ECWOC'26