[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","689bb205d9388191b09727f6aeb75ae4","versionInt","title","Lifetime Carbon Footprint Predictor (single-file React)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Card, CardHeader, CardContent, CardTitle, CardFooter } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Leaf, Plane, Car, Home, Beef, Coins, RefreshCw, SlidersHorizontal, Train } from \"lucide-react\";\nimport { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from \"recharts\";\n\n// ------------------------------\n// Lifetime Carbon Footprint App (v2)\n// ------------------------------\n// What changed:\n// - Added more realistic questions: region/grid, car occupancy, public transit & rail km, and flight class.\n// - Refined electricity & EV/heating factors with a region grid multiplier.\n// - Fixed the \"black disc\" by explicitly coloring the RadialBar + adding a light background track.\n// - Kept design: green/white palette with gentle gradients and clean cards.\n\nconst COLORS = [\"#10b981\", \"#34d399\", \"#6ee7b7\", \"#a7f3d0\", \"#d1fae5\", \"#bbf7d0\", \"#86efac\"]; // Emerald palette\n\nconst clamp = (n, min, max) => Math.min(Math.max(n, min), max);\n\nexport default function LifetimeCarbonFootprintApp() {\n // ------------------------------\n // Inputs (questions)\n // ------------------------------\n const [age, setAge] = useState(30);\n const [householdSize, setHouseholdSize] = useState(2);\n\n // New: region/grid proxy\n const [region, setRegion] = useState(\"avg\"); // low | avg | high | verylow\n\n const [homeType, setHomeType] = useState(\"apartment\"); // apartment | semi | detached\n const [efficiency, setEfficiency] = useState(\"average\"); // good | average | poor\n const [heating, setHeating] = useState(\"gas\"); // gas | oil | electric | heatpump | district | none\n const [renewables, setRenewables] = useState(30); // % green tariff or rooftop share\n\n const [diet, setDiet] = useState(\"mixed\"); // vegan | vegetarian | mixed | high\n\n const [carType, setCarType] = useState(\"petrol\"); // petrol | diesel | hybrid | ev | none\n const [carKm, setCarKm] = useState(8000);\n const [carOccupancy, setCarOccupancy] = useState(1.3); // average people in car\n\n // New: public transit & rail\n const [transitKm, setTransitKm] = useState(500); // bus/metro/tram km per year\n const [railKm, setRailKm] = useState(300); // intercity/regional rail km per year\n\n const [shortFlights, setShortFlights] = useState(1); // round trips per year\n const [longFlights, setLongFlights] = useState(0); // round trips per year\n const [flightClass, setFlightClass] = useState(\"economy\"); // economy | premium | business\n\n const [spend, setSpend] = useState(\"avg\"); // low | avg | high\n\n const [improvementPct, setImprovementPct] = useState(2); // % per year\n const [includePast, setIncludePast] = useState(false);\n\n // Quick presets\n const applyPreset = (key) => {\n if (key === \"low\") {\n setAge(25); setHouseholdSize(3); setRegion(\"verylow\"); setHomeType(\"apartment\"); setEfficiency(\"good\"); setHeating(\"heatpump\"); setRenewables(90);\n setDiet(\"vegan\"); setCarType(\"none\"); setCarKm(0); setCarOccupancy(0); setTransitKm(1200); setRailKm(1500);\n setShortFlights(0); setLongFlights(0); setFlightClass(\"economy\"); setSpend(\"low\"); setImprovementPct(5); setIncludePast(false);\n }\n if (key === \"typical\") {\n setAge(32); setHouseholdSize(2); setRegion(\"avg\"); setHomeType(\"semi\"); setEfficiency(\"average\"); setHeating(\"gas\"); setRenewables(35);\n setDiet(\"mixed\"); setCarType(\"hybrid\"); setCarKm(10000); setCarOccupancy(1.4); setTransitKm(600); setRailKm(400);\n setShortFlights(1); setLongFlights(0); setFlightClass(\"economy\"); setSpend(\"avg\"); setImprovementPct(2); setIncludePast(false);\n }\n if (key === \"high\") {\n setAge(40); setHouseholdSize(2); setRegion(\"high\"); setHomeType(\"detached\"); setEfficiency(\"poor\"); setHeating(\"oil\"); setRenewables(10);\n setDiet(\"high\"); setCarType(\"petrol\"); setCarKm(20000); setCarOccupancy(1.1); setTransitKm(0); setRailKm(0);\n setShortFlights(3); setLongFlights(1); setFlightClass(\"business\"); setSpend(\"high\"); setImprovementPct(1); setIncludePast(false);\n }\n };\n\n // ------------------------------\n // Emissions model\n // ------------------------------\n const results = useMemo(() => {\n // Grid multiplier proxy by region (affects electricity-driven items: home electric, EVs, electric heating)\n const gridFactor = ({ verylow: 0.6, low: 0.8, avg: 1.0, high: 1.3 }[region]) ?? 1.0;\n\n // Renewable share scaling (residual ~10% at 100% renewables)\n const rShare = clamp(renewables, 0, 100) / 100;\n const scaleElec = 1 - 0.9 * rShare; // 1.0 -> 0.1 as renewables goes 0% -> 100%\n\n const homeTypeFactor = { apartment: 0.85, semi: 1.0, detached: 1.2 }[homeType] ?? 1.0;\n const efficiencyFactor = { good: 0.8, average: 1.0, poor: 1.25 }[efficiency] ?? 1.0;\n\n // Home electricity base per household (tons) — very rough global-average baseline\n const baseElecT = 1.2; // tCO2e/household/yr, before scaling\n const homeElectricityT = baseElecT * homeTypeFactor * efficiencyFactor * gridFactor * scaleElec;\n\n // Heating addition per household (tons)\n let heatingT = 0;\n switch (heating) {\n case \"gas\": heatingT = 1.5; break;\n case \"oil\": heatingT = 2.1; break;\n case \"district\": heatingT = 1.0 * gridFactor; break; // proxy mix\n case \"electric\": heatingT = 1.3 * gridFactor * scaleElec; break; // resistance\n case \"heatpump\": heatingT = 0.6 * gridFactor * scaleElec; break;\n case \"none\": heatingT = 0.15 * gridFactor * scaleElec; break;\n default: heatingT = 1.5;\n }\n\n const homePerPerson = (homeElectricityT + heatingT) / Math.max(1, householdSize);\n\n // Diet per person (tons/year)\n const dietT = ({ vegan: 1.5, vegetarian: 1.9, mixed: 2.5, high: 3.5 }[diet]) ?? 2.5;\n\n // Car: emission factor (kg/km)\n let carEFkgKm = 0;\n switch (carType) {\n case \"petrol\": carEFkgKm = 0.192; break;\n case \"diesel\": carEFkgKm = 0.171; break;\n case \"hybrid\": carEFkgKm = 0.120; break;\n case \"ev\": carEFkgKm = 0.080 * gridFactor * scaleElec; break; // grid-adjusted\n case \"none\": carEFkgKm = 0; break;\n default: carEFkgKm = 0.150;\n }\n const occ = clamp(carOccupancy || 1, 1, 5);\n const carT = (clamp(carKm, 0, 100000) * carEFkgKm) / 1000 / occ; // tons per person\n\n // Public transit & rail (kg/km per passenger)\n const transitEF = 0.08; // bus/metro/tram average\n const railEF = 0.035; // electric rail average\n const transitT = (clamp(transitKm, 0, 100000) * transitEF) / 1000;\n const railT = (clamp(railKm, 0, 100000) * railEF) / 1000;\n\n // Flights (tons/year): radiative-forcing-inclusive values per round trip (economy)\n const classMult = ({ economy: 1.0, premium: 1.5, business: 2.0 }[flightClass]) ?? 1.0;\n const flightT = (shortFlights * 0.3 + longFlights * 1.6) * classMult;\n\n // Goods & Services (tons/year)\n const goodsT = ({ low: 0.8, avg: 1.5, high: 2.5 }[spend]) ?? 1.5;\n\n const categories = [\n { key: \"Home\", value: homePerPerson },\n { key: \"Car\", value: carT },\n { key: \"Public transit\", value: transitT },\n { key: \"Rail\", value: railT },\n { key: \"Flights\", value: flightT },\n { key: \"Diet\", value: dietT },\n { key: \"Goods & Services\", value: goodsT },\n ];\n\n const annualTotal = categories.reduce((a, c) => a + c.value, 0);\n\n // Lifetime projection to age 80\n const remainingYears = Math.max(0, 80 - Math.floor(age));\n const r = clamp(improvementPct, 0, 50) / 100; // cap at 50%/yr\n const lifetimeRemaining = r > 0\n ? annualTotal * (1 - Math.pow(1 - r, remainingYears)) / r\n : annualTotal * remainingYears;\n\n // Optional rough past estimate\n const pastYears = Math.max(0, Math.floor(age));\n const childYears = Math.min(18, pastYears);\n const adultYears = Math.max(0, pastYears - childYears);\n const pastEstimate = includePast ? annualTotal * (0.5 * childYears + adultYears) : 0;\n\n const lifetimeTotalTo80 = pastEstimate + lifetimeRemaining;\n\n // Personal budget guidance (very rough): 2 tCO2e/year compatible with ~1.5°C pathways.\n const remainingBudget = (80 - Math.floor(age)) * 2;\n const budgetUsePct = remainingBudget > 0 ? (lifetimeRemaining / remainingBudget) * 100 : 0;\n const budgetGauge = clamp(100 - (budgetUsePct - 100), 0, 100); // >100% use => lower score\n\n // Tips based on largest categories\n const sortedCats = [...categories].sort((a, b) => b.value - a.value);\n const top = sortedCats.slice(0, 3).map(c => c.key);\n\n const tips = [];\n if (top.includes(\"Car\")) {\n if (carType === \"petrol\" || carType === \"diesel\") tips.push(\"Cut solo driving; raise occupancy to 1.8+ (carpool) or switch to hybrid/EV.\");\n if (carType === \"ev\") tips.push(\"Charge on green tariffs or daytime solar to shrink EV footprint further.\");\n }\n if (top.includes(\"Home\")) {\n if (heating === \"gas\" || heating === \"oil\") tips.push(\"Plan a heat pump or district heat switch when feasible; add insulation and smart controls.\");\n tips.push(\"Increase renewable electricity share via a green tariff or rooftop solar.\");\n }\n if (top.includes(\"Flights\")) tips.push(\"Bundle trips, choose rail for short hops, fly economy and non‑stop when possible.\");\n if (top.includes(\"Public transit\") || top.includes(\"Rail\")) tips.push(\"Keep shifting car km to transit/rail; it adds up.\");\n if (top.includes(\"Diet\")) tips.push(\"Shift a few meals/week to plant‑based options and reduce food waste.\");\n if (top.includes(\"Goods & Services\")) tips.push(\"Buy durable goods, repair more, and prefer second‑hand where practical.\");\n\n return {\n categories,\n annualTotal,\n lifetimeRemaining,\n pastEstimate,\n lifetimeTotalTo80,\n remainingYears,\n remainingBudget,\n budgetUsePct,\n budgetGauge,\n tips,\n };\n }, [age, householdSize, region, homeType, efficiency, heating, renewables, diet, carType, carKm, carOccupancy, transitKm, railKm, shortFlights, longFlights, flightClass, spend, improvementPct, includePast]);\n\n const pieData = useMemo(() => (\n results.categories.map((c, i) => ({ name: c.key, value: Number(c.value.toFixed(2)), fill: COLORS[i % COLORS.length] }))\n ), [results.categories]);\n\n const resetAll = () => {\n setAge(30); setHouseholdSize(2); setRegion(\"avg\"); setHomeType(\"apartment\"); setEfficiency(\"average\"); setHeating(\"gas\"); setRenewables(30);\n setDiet(\"mixed\"); setCarType(\"petrol\"); setCarKm(8000); setCarOccupancy(1.3); setTransitKm(500); setRailKm(300);\n setShortFlights(1); setLongFlights(0); setFlightClass(\"economy\"); setSpend(\"avg\"); setImprovementPct(2); setIncludePast(false);\n };\n\n return (\n

Lifetime Carbon Footprint – Predictor

\n \n \n \n \n

\n\n

\n {/* LEFT: Questions */}\n \n \n \n Your details\n \n \n

\n Age (years)\n setAge(parseInt(e.target.value||\"0\"))} className=\"w-full accent-emerald-600\"/>\n

{age} years

\n\n

\n Household size\n setHouseholdSize(parseInt(e.target.value||\"1\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500 bg-white\"/>\n

\n Renewable electricity\n

\n setRenewables(parseInt(e.target.value||\"0\"))} className=\"w-full accent-emerald-600\"/>\n {renewables}%\n

\n\n

\n Region (grid)\n \n

\n Home type\n \n

\n Efficiency\n \n

\n Heating\n \n

\n \n \n\n \n \n Diet\n \n \n \n \n \n\n \n \n Transport\n \n \n

\n Car type\n \n

\n Car km per year\n setCarKm(parseInt(e.target.value||\"0\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 bg-white\"/>\n

\n Avg people in car\n setCarOccupancy(parseFloat(e.target.value||\"1\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 bg-white\"/>\n

\n Public transit km/yr\n setTransitKm(parseInt(e.target.value||\"0\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 bg-white\"/>\n

\n Rail km/yr\n setRailKm(parseInt(e.target.value||\"0\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 bg-white\"/>\n

\n Flight class\n \n

\n Short‑haul flights / yr (RT)\n setShortFlights(parseInt(e.target.value||\"0\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 bg-white\"/>\n

\n Long‑haul flights / yr (RT)\n setLongFlights(parseInt(e.target.value||\"0\"))} className=\"w-full rounded-xl border border-emerald-200 px-3 py-2 bg-white\"/>\n

\n \n \n\n \n \n Goods & Services\n \n \n \n \n \n\n \n \n Trajectory\n \n \n

\n Planned annual improvement\n

\n setImprovementPct(parseInt(e.target.value||\"0\"))} className=\"w-full accent-emerald-600\"/>\n {improvementPct}%\n

\n \n setIncludePast(e.target.checked)} className=\"rounded border-emerald-300 text-emerald-600 focus:ring-emerald-500\"/>\n Include rough estimate of past emissions\n \n \n Estimates are indicative, not definitive. No personal data leaves your device.\n \n \n\n {/* RIGHT: Results */}\n \n \n \n Your footprint summary\n \n \n {/* Big lifetime number (simplified: removed circular gauge) */}\n

{results.lifetimeRemaining.toFixed(1)} tCO₂e

Remaining lifetime to 80 (with {improvementPct}%/yr improvement)

\n Budget score\n {Math.round(results.budgetGauge)} / 100\n

Budget: {results.remainingBudget.toFixed(1)} t (2 t/yr × {results.remainingYears} yrs)

\n\n {/* Breakdown & Annual */}\n

\n \n \n \n {pieData.map((entry, index) => (\n \n ))}\n \n `${v} t/yr`} />\n \n \n \n

{results.annualTotal.toFixed(1)} tCO₂e/yr

Estimated annual footprint

\n {c.key}\n {c.value.toFixed(2)} t\n

\n {includePast && (\n

\n Past (rough): {results.pastEstimate.toFixed(1)} t\n

\n )}\n

\n Lifetime to 80 total: {results.lifetimeTotalTo80.toFixed(1)} t\n

Gauge shows how your remaining footprint compares to a simple personal budget. Higher is better.

\n \n \n\n \n \n Personalized ideas to lower your footprint\n \n \n {results.tips.length === 0 ? (\n

Adjust the inputs to see targeted suggestions.

\n ) : (\n

• {t}

\n )}\n \n \n\n \n \n About these estimates\n \n \n

\n This is a friendly, first‑pass calculator meant for exploration. It uses transparent, simplified factors.\n The new questions (region/grid, car occupancy, transit/rail km, and flight class) bring it closer to real‑world behavior\n without making it overwhelming. Electricity‑driven emissions scale with both your grid proxy and renewable share.\n

\n For decisions that matter, consult a detailed calculator with country‑specific data and activity‑based tracking.\n

\n \n \n \n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","16310806016578665002","traceTime",1776548766817]