Smart Air-Quality Mesh: Landing Site

A hand-built static front end for a smart air-quality sensor mesh: real-time PM2.5, PM10, CO₂, temperature and humidity monitoring, presented with a standard AQI color scale and a Hedera proof-publishing interface.

Urban air pollution is invisible until it is measured. This site presents a distributed sensor-mesh concept that makes it readable at a glance, live pollutant metrics, an AQI band scale anyone can interpret, and tamper-evident readings anchored on Hedera Hashgraph. The whole front end is written by hand with zero frameworks and zero build step: just semantic HTML, BEM-structured CSS and a small vanilla-JS file.

Pages

• index.html: landing page: hero with live-style AQI chips, the six-band AQI color scale, mesh-coverage and real-time-monitoring feature sections, an insights-dashboard overview and the Hedera Proof Publisher panel.
• reports.html: focused Proof Publisher page: paste a canonical JSON sensor reading, preview its SHA-256 digest and submit a compact proof (node_id, ts, hash) toward a Hedera HCS topic. The signing/anchoring endpoint (/api/hedera/publish) is server-side by design and not part of this static repo.

Key Features

• Readable air data: pollutant metrics and the standard 0-301+ AQI scale rendered as clear, color-coded bands.
• Hedera proof-publishing UI: a complete front end for anchoring sensor readings on-chain, with hash preview, feedback region and a recent-proofs table.
• Accessible by default: skip link, aria-expanded sync on the mobile nav toggler, labeled forms, aria-live status feedback and screen-reader-only labels.
• Motion that respects users: a dependency-free scroll-reveal built on IntersectionObserver that disables itself under prefers-reduced-motion.
• Responsive without a framework: collapsible mobile navigation and footer sections driven by ~40 lines of vanilla JS.
• Hardened static hosting: vercel.json ships X-Frame-Options, X-Content-Type-Options, Referrer-Policy and Permissions-Policy headers on every route.

Tech Stack

• Semantic HTML5 (two pages, no templating)
• Hand-written CSS with BEM naming, CSS custom properties and normalize.css
• Vanilla JavaScript: no libraries, no build tooling
• Google Fonts (Sora, Spline Sans, JetBrains Mono)
• Vercel static-hosting config with security headers

Quick Start

No dependencies, no build, no environment variables.

git clone https://github.com/w4seemdev/AirQualityPureFront.git
cd AirQualityPureFront
# open index.html directly, or serve it:
npx serve .

What This Project Demonstrates

• Building a polished, responsive marketing/product site with zero frameworks
• Accessibility fundamentals applied throughout, not bolted on
• Designing a clean client/server boundary for a blockchain (Hedera HCS) integration
• Production-minded static deployment with security headers

---

Built by Waseem Abu Fares, github.com/w4seemdev