GYFX35 · GYFX35 · Jan 19, 2026 · Jan 19, 2026
diff --git a/eco_project/backend/app.py b/eco_project/backend/app.py
@@ -465,6 +465,45 @@ def livestock():
     ]
     return jsonify(mock_data)
 
+@app.route('/api/air_quality')
+def air_quality():
+    openaq_api_key = os.environ.get('OPENAQ_API_KEY')
+    if not openaq_api_key:
+        return jsonify({"error": "OpenAQ API key is not configured."}), 500
+
+    cities = ["New York", "Los Angeles", "Chicago", "Houston"]
+    url = "https://api.openaq.org/v3/latest"
+    headers = {"X-API-Key": openaq_api_key}
+    params = {"city": cities, "limit": 100}
+
+    try:
+        response = requests.get(url, headers=headers, params=params)
+        response.raise_for_status()
+        data = response.json()
+
+        formatted_data = []
+        if data and data.get('results'):
+            processed_cities = set()
+            for result in data['results']:
+                city_name = result.get('city')
+                if city_name and city_name in cities and city_name not in processed_cities:
+                    measurement = next((m for m in result.get('measurements', []) if m.get('parameter') == 'pm25'), None)
+                    if not measurement and result.get('measurements'):
+                        measurement = result['measurements'][0]
+
+                    if measurement:
+                        formatted_data.append({
+                            "city": city_name,
+                            "aqi": measurement.get('value'),
+                            "pollutant": measurement.get('parameter')
+                        })
+                        processed_cities.add(city_name)
+
+        return jsonify(formatted_data)
+
+    except requests.exceptions.RequestException as e:
+        return jsonify({"error": str(e)}), 500
+
 import json
 import bleach
 from filelock import FileLock

diff --git a/eco_project/backend/static/air_quality.css b/eco_project/backend/static/air_quality.css
@@ -0,0 +1,11 @@
+#data-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+}
+
+.data-item {
+    border: 1px solid #ccc;
+    padding: 15px;
+    border-radius: 5px;
+}
diff --git a/eco_project/backend/static/air_quality.html b/eco_project/backend/static/air_quality.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Air Quality - Environment Protection</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="air_quality.css">
+</head>
+<body>
+    <header>
+        <h1>Air Quality</h1>
+        <nav>
+            <a href="index.html">Home</a>
+        </nav>
+    </header>
+    <main>
+        <section id="air-quality-data">
+            <h2>Air Quality Data</h2>
+            <div id="data-container">
+                <!-- Air quality data will go here -->
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2025 Environment Protection Initiative</p>
+    </footer>
+    <script src="air_quality.js"></script>
+</body>
+</html>
diff --git a/eco_project/backend/static/air_quality.js b/eco_project/backend/static/air_quality.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const dataContainer = document.getElementById('data-container');
+
+    fetch('/api/air_quality')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (!data || data.length === 0) {
+                dataContainer.innerHTML = '<p>No air quality data found.</p>';
+                return;
+            }
+            data.forEach(item => {
+                const itemElement = document.createElement('div');
+                itemElement.classList.add('data-item');
+                itemElement.innerHTML = `
+                    <h3>${item.city}</h3>
+                    <p><strong>AQI:</strong> ${item.aqi}</p>
+                    <p><strong>Pollutant:</strong> ${item.pollutant}</p>
+                `;
+                dataContainer.appendChild(itemElement);
+            });
+        })
+        .catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+            dataContainer.innerHTML = '<p>Could not fetch air quality data. Please try again later.</p>';
+        });
+});
diff --git a/eco_project/backend/static/index.html b/eco_project/backend/static/index.html
@@ -57,6 +57,7 @@ <h2>Community</h2>
                 <li><a href="forest_seeds.html">Forest Seeds Promotion</a></li>
                 <li><a href="chat.html">Join the Chat</a></li>
                 <li><a href="sports.html">Watch Sports</a></li>
+                <li><a href="air_quality.html">Air Quality</a></li>
             </ul>
         </section>
         <section id="ai-agent">