Here is all you need to build this app

The Prompts

Prompt 1: Tool Description

Act as a senior front-end engineer AND a sustainability SME (GHG Protocol Scope 3). Deliver a COMPLETE, SINGLE-FILE app (one .html file) called Scope 3 Explorer that I can paste directly into Replit and run. It must be fully self-contained: vanilla HTML/CSS/JS only (no frameworks, no external CDNs, no images). Dark theme, responsive, accessible, fast.

App goal

A workshop tool that shows all 15 Scope 3 categories as clickable cards (with small icons + short description). Clicking a card opens a side panel with:

• Method (prefer average-data or spend-based when no primary data),
• Activity data to pull,
• Emission factor sources,
• Internal owners (who to chase for data). Include a tiny “copy section” button in the panel to copy that category’s details to clipboard.

Data (USE EXACTLY THIS ARRAY)

Embed this array in the JS and render from it. Do not alter field names.

const SCOPE3 = [ {"id":1,"icon":"📦","title":"Cat 1 — Purchased Goods & Services","description":"Cradle-to-gate emissions of purchased goods/services.","method":"Average-data (mass/units × cradle-to-gate EF). Fallback: spend-based (currency × EEIO EF).","activityData":["Material quantity (kg/units) from SAP/ERP (e.g., MM/PO lines)","Purchase lines by material/service"],"emissionFactors":["LCI/industry databases; cradle-to-gate factors"],"owners":["Procurement/Sourcing","Category Managers","ESG/LCA"]}, {"id":2,"icon":"🏗️","title":"Cat 2 — Capital Goods","description":"Cradle-to-gate emissions of purchased capex items.","method":"Average-data by asset type; fallback: spend-based.","activityData":["Asset register (CapEx lines)","Specs/weights if available"],"emissionFactors":["LCI factors for typical equipment/buildings"],"owners":["Engineering/CapEx PMO","Procurement","Finance (Fixed Assets)"]}, {"id":3,"icon":"🔌","title":"Cat 3 — Fuel & Energy-Related (not in S1/S2)","description":"Upstream (WTT) of fuels/electricity + T&D losses (exclude combustion already in S1/S2).","method":"Apply upstream/WTT factors to S1 fuels and S2 electricity; include T&D losses.","activityData":["Annual fuel & electricity use (from S1/S2 files)"],"emissionFactors":["Upstream/WTT fuel factors","Upstream electricity & T&D loss factors"],"owners":["Facilities/Energy","Finance (utilities AP)"]}, {"id":4,"icon":"🚚","title":"Cat 4 — Upstream Transport & Distribution","description":"Third-party inbound logistics & inter-facility T&D.","method":"Average-data (ton-km × mode EF); fallback: spend-based by lane.","activityData":["Weights, distances, modes from 3PL/transport logs"],"emissionFactors":["Mode-specific freight factors"],"owners":["Logistics/Supply Chain","3PLs"]}, {"id":5,"icon":"🗑️","title":"Cat 5 — Waste in Operations","description":"Third-party treatment/disposal of operational waste.","method":"Average-data (mass by waste type × treatment EF).","activityData":["Waste tickets/invoices by stream & mass (EWC codes if EU)"],"emissionFactors":["Landfill/incineration/recycling/wastewater EFs"],"owners":["EHS/Facilities","Waste vendors"]}, {"id":6,"icon":"✈️","title":"Cat 6 — Business Travel","description":"Third-party travel for employees.","method":"Average-data (passenger-km × mode EF). If gaps: spend-based or short survey.","activityData":["TMC exports (e.g., Concur/Amadeus): air/rail/car, hotel nights → distances"],"emissionFactors":["Passenger-km factors by mode (air/rail/road/hotel)"],"owners":["Travel/HR","Finance (T&E)"]}, {"id":7,"icon":"🚇","title":"Cat 7 — Employee Commuting","description":"Home–work travel; telework optional.","method":"Short employee survey → mode share × distance × days → average-data.","activityData":["Headcount/site","Survey: mode, distance, days/year"],"emissionFactors":["Mode factors (car, bus, rail, bike, walk)"],"owners":["HR","Site Admin"]}, {"id":8,"icon":"🏢","title":"Cat 8 — Upstream Leased Assets","description":"Operation of assets you lease (not in S1/S2).","method":"Average-data using floor area or metered energy × EFs.","activityData":["Lease list","Floor area","Utility bills if any"],"emissionFactors":["Grid/fuel factors"],"owners":["Real Estate","Facilities"]}, {"id":9,"icon":"📦➡️","title":"Cat 9 — Downstream Transport & Distribution","description":"Third-party outbound logistics/retail not owned/controlled.","method":"Average-data (ton-km × mode EF); fallback: spend-based.","activityData":["Shipment weights/lanes (customers/distributors)","Retail kWh if available"],"emissionFactors":["Freight mode factors","Retail energy factors"],"owners":["Sales Ops/Logistics","Distributors/Retail"]}, {"id":10,"icon":"🛠️","title":"Cat 10 — Processing of Sold Products","description":"Processing by downstream manufacturers.","method":"Average-data (per-unit processing energy × EF).","activityData":["Units sold by product","Typical processing steps"],"emissionFactors":["Industry/LCA processing profiles & factors"],"owners":["Product/Technical","ESG/LCA"]}, {"id":11,"ico...

Prompt 2: Brand Details

Scope 3 Dashboard UI Design to match my brand identity. Apply my brand color system, typography, and layout rules consistently across the interface.

📌 Brand Identity Rules to Apply Colors (Hex Codes): Primary Brand Colors: Electric Purple → #6C63FF (hero, titles, active selections, highlights) Bright Sustainability Green → #00A86B (action states, CTA highlights, sustainability categories) Secondary Colors: Lime Highlight → #C7F464 (tags, hover states, emphasis markers) Off-White → #FAFAFA (backgrounds for search bar or neutral panels) Neutrals: Charcoal Gray → #333333 (main body text, neutral card background) Light Gray → #E5E5E5 (dividers, inactive borders, subtle backgrounds)

Typography: Headings & Titles: Poppins Bold (all caps for section headers) Body Text: Inter Regular (clean, neutral readability) Layout & Component Rules: Main Title (“Scope 3 Onboarding Dashboard”):

Poppins Bold, Purple (#6C63FF) Optional Green underline/accent for separation

Search Bar: Background: Off-White (#FAFAFA) Text: Charcoal Gray (#333333) Focus/Active outline: Purple (#6C63FF) Category Cards (default state): Background: Charcoal Gray (#333333) Text: Inter Regular, White (#FFFFFF) Border: Light Gray (#E5E5E5) Category Cards (hover state): Subtle Lime (#C7F464) glow or underline Cursor hover effect → Green (#00A86B) border highlight Category Cards (active/selected): Purple (#6C63FF) border highlight Slight background tint toward Dark Purple Bolded heading text Icons: Use flat/line icon style (no random multicolor). Green (#00A86B) for sustainability categories (Purchased Goods, Waste, End-of-Life, etc.) Purple (#6C63FF) for data/finance/AI-related categories (Investments, Capital Goods, etc.) Charcoal (#333333) for neutral/supportive categories. Optional Lime accent dots (#C7F464) for emphasis or alerts. Footer/Dividers: Light Gray (#E5E5E5) lines, subtle to not overpower.

🔹 Output Expectation A modern dashboard interface that: Looks clean and minimal. Feels consistent with my brand assets (one-pagers, carousels, newsletter). Uses Purple for recognition, Green for action/anchors, Lime for emphasis, Neutrals for readability.

[You can simply replace those colors, fonts, design, etc. with what you want for your dashboard]

The table

Other resources to keep in mind:

SustainaTrend - A weekly publication for sustainability professionals who are actually looking for real use cases to apply AI to advance their career

https://sustainatrend.beehiiv.com/