# CleanEarth Pollution Reporting Interactive Demo

## 1. Project Overview

This project is the coding implementation for the CleanEarth Human-Computer Interaction assignment. It demonstrates one key feature from the CleanEarth high-fidelity UI prototype: the Pollution Reporting feature.

The purpose of this demo is not to build a complete beta application, but to show how one important UI function can work interactively using front-end technologies. The demo was developed using HTML, CSS and JavaScript.

This implementation supports the assignment requirement of designing and developing a user interface that incorporates visual and audio techniques using standard APIs.

---

## 2. Implemented Feature

The implemented feature is the CleanEarth Pollution Reporting function.

Users can:

- Select a pollution type
- Upload photo evidence
- Preview the uploaded image
- Capture current location
- Enter a pollution description
- Submit the pollution report
- View a success confirmation card
- View a demo-level environmental impact chart
- Hear an audio confirmation message after submission

---

## 3. Technologies and APIs Used

| Technology / API | Purpose |
|---|---|
| HTML | Builds the structure of the web page |
| CSS | Creates the mobile-style interface and green environmental theme |
| JavaScript | Handles user interaction and dynamic feedback |
| File API | Allows users to upload and preview pollution images |
| Geolocation API | Captures the user's current latitude and longitude |
| Canvas API | Displays a visual environmental impact chart |
| Web Speech API | Provides audio confirmation after successful report submission |

---

## 4. Visual and Audio Techniques

The demo includes several visual feedback techniques, such as:

- Pollution type card selection
- Image preview after upload
- GPS location status display
- Character counter for the description box
- Submission progress bar
- Success confirmation card
- Canvas-based impact chart

The audio technique is implemented using the Web Speech API. After the report is submitted successfully, the system reads out a confirmation message:

> Your pollution report has been submitted successfully. Thank you for helping CleanEarth protect the environment.

---

## 5. How to Run the Demo

### Option 1: Run locally

1. Download or clone this repository.
2. Open the project folder in Visual Studio Code.
3. Open `index.html`.
4. Right-click the file and choose `Open with Live Server`.

### Option 2: Run directly in browser

Open the deployed GitHub Pages link:

[Insert GitHub Pages link here]

---

## 6. Important Notes

This project is a front-end proof-of-concept only. It does not include a real backend, database, cloud storage or admin dashboard.

The report ID, eco points and environmental impact chart are generated locally for demonstration purposes only. They do not represent real stored data or verified environmental analytics.

The Geolocation API requires browser permission. If location access is blocked, the GPS function may not work properly.

---

## 7. File Structure

```text
CleanEarth-Coding-Demo/
│
├── index.html
└── README.md