├── README.md ├── src ├── assets │ ├── ccgif.gif │ ├── earth.jpeg │ ├── bg1.svg │ ├── blob-haikei.svg │ ├── wave-haikei.svg │ ├── blob-scene-haikei.svg │ ├── footprintbg.svg │ ├── layered-waves-haikei.svg │ ├── stacked-waves-haikei.svg │ └── react.svg ├── main.jsx ├── App.jsx ├── components │ ├── Introduction.jsx │ ├── Home.jsx │ ├── Visualisations.jsx │ ├── ClimateChange.jsx │ ├── GlobalTemperature.jsx │ ├── Causes.jsx │ ├── EnergyConsumption.jsx │ ├── CarbonEmissions.jsx │ ├── Solutions.jsx │ ├── Earth.jsx │ └── Footprint.jsx ├── App.css └── index.css ├── vite.config.js ├── vercel.json ├── .gitignore ├── .eslintrc.cjs ├── package.json ├── public └── vite.svg └── index.html /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/assets/ccgif.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmd-anurag/climatechange/main/src/assets/ccgif.gif -------------------------------------------------------------------------------- /src/assets/earth.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmd-anurag/climatechange/main/src/assets/earth.jpeg -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "routes": [ 3 | { 4 | "src": "/(.*).(js|css|json|png|jpg|jpeg|svg|gif)$", 5 | "dest": "/$1.$2" 6 | }, 7 | { 8 | "src": "/(.*)", 9 | "dest": "/index.html" 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/assets/bg1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter, Route, Routes } from "react-router-dom"; 3 | import Home from "./components/Home"; 4 | import ClimateChange from "./components/ClimateChange"; 5 | import Footprint from "./components/Footprint"; 6 | 7 | const App = () => { 8 | return ( 9 | <> 10 | 11 | 12 | }> 13 | }> 14 | }> 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/assets/blob-haikei.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "che110project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "aos": "^2.3.4", 14 | "chart.js": "^4.4.2", 15 | "react": "^18.2.0", 16 | "react-dom": "^18.2.0", 17 | "react-router-dom": "^6.22.3", 18 | "react-type-animation": "^3.2.0", 19 | "three": "^0.162.0" 20 | }, 21 | "devDependencies": { 22 | "@types/react": "^18.2.64", 23 | "@types/react-dom": "^18.2.21", 24 | "@vitejs/plugin-react": "^4.2.1", 25 | "eslint": "^8.57.0", 26 | "eslint-plugin-react": "^7.34.0", 27 | "eslint-plugin-react-hooks": "^4.6.0", 28 | "eslint-plugin-react-refresh": "^0.4.5", 29 | "vite": "^5.1.6" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/assets/wave-haikei.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/blob-scene-haikei.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/footprintbg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Introduction.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ccgif from '../assets/ccgif.gif' 3 | 4 | const Introduction = () => { 5 | return ( 6 | <> 7 |

8 |

9 |

10 |

What is Climate Change?

11 |

Climate change refers to long-term changes in temperature, precipitation, wind patterns, and other aspects of the Earth's climate system. It is primarily caused by human activities, such as the burning of fossil fuels and deforestation, which release greenhouse gases into the atmosphere.

12 |

13 | 14 |

15 |

Why is Climate Change a Problem?

16 |

Climate change poses significant threats to the environment, ecosystems, and human societies. It leads to rising global temperatures, sea-level rise, extreme weather events, loss of biodiversity, and disruptions to agriculture and water resources. Addressing climate change is crucial for the sustainability and well-being of future generations.

17 |

18 |

19 |

20 |

21 |

22 |

23 | 24 | ) 25 | } 26 | 27 | export default Introduction 28 | -------------------------------------------------------------------------------- /src/components/Home.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Earth from "./Earth"; 3 | 4 | const Home = () => { 5 | 6 | const [exit, setExit] = useState(false); 7 | 8 | 9 | return ( 10 |

11 |

12 |

13 |

14 |

Climate

15 |

Change

16 | 17 |

18 |

19 |

THE EARTH

20 |

Earth stands alone as the only known planet capable of sustaining life, a delicate oasis in the vastness of space where ecosystems and biodiversity thrives. However, our actions are casting a shadow over this unique haven. Human activities, particularly the burning of fossil fuels and deforestation, are altering the Earth's climate at an unprecedented rate, leading to a phenomenon known as climate change

21 | 24 |

25 |

26 |

27 | 28 |

29 | ); 30 | }; 31 | 32 | export default Home; -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Climate Change 19 | 20 | 21 | 22 |

23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/Visualisations.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from 'react' 2 | import GlobalTemperature from './GlobalTemperature' 3 | import CarbonEmissions from './CarbonEmissions' 4 | import EnergyConsumption from './EnergyConsumption' 5 | import Aos from "aos"; 6 | import 'aos/dist/aos.css'; 7 | 8 | const Visualisations = () => { 9 | Aos.init({duration: 800}); 10 | const [selected, setSelected] = useState('button1') 11 | return ( 12 |

13 |

What does the data show?

14 |

15 | e.preventDefault()} onFocus={(e) => e.stopPropagation()} value='button1' onClick={()=>{setSelected('button1')}} type="radio" className="btn-check" name="btnradio" id="btnradio1" autoComplete="off" defaultChecked /> 16 | Global Temperature Average 17 | 18 | e.preventDefault()} onFocus={(e) => e.stopPropagation()} value='button2' onClick={()=>{setSelected('button2')}} type="radio" className="btn-check" name="btnradio" id="btnradio2" autoComplete="off" /> 19 | Greenhouse Emissions 20 | 21 | e.preventDefault()} onFocus={(e) => e.stopPropagation()} value='button3' onClick={()=>{setSelected('button3')}} type="radio" className="btn-check" name="btnradio" id="btnradio3" autoComplete="off" /> 22 | Energy Consumption 23 |

24 | {selected==='button1' &&

25 | 26 |

} 27 | {selected==='button2' &&

28 | 29 |

} 30 | {selected==='button3' &&

31 | 32 |

} 33 |

34 | ) 35 | } 36 | 37 | export default Visualisations 38 | -------------------------------------------------------------------------------- /src/assets/layered-waves-haikei.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | .stackedbg { 4 | background: url('./assets/blob-haikei.svg'); 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | min-height: 100vh; 8 | backdrop-filter: blur(10px); 9 | background-position: center; 10 | } 11 | 12 | .wavebg { 13 | background: url('./assets/layered-waves-haikei.svg'); 14 | background-repeat: no-repeat; 15 | background-size: cover; 16 | } 17 | 18 | .blurbg { 19 | background: url('./assets/stacked-waves-haikei.svg'); 20 | background-repeat: no-repeat; 21 | background-size: cover; 22 | } 23 | 24 | .solutionbg { 25 | background: url('./assets/wave-haikei.svg'); 26 | background-repeat: no-repeat; 27 | background-size: cover; 28 | min-height: 100vh; 29 | } 30 | 31 | .footprintbg { 32 | background: url('./assets/footprintbg.svg'); 33 | background-repeat: no-repeat; 34 | background-size: cover; 35 | min-height: 900px; 36 | background-attachment: fixed; 37 | } 38 | 39 | 40 | .climatechange-header { 41 | padding: 30px; 42 | display: flex; 43 | justify-content: space-between; 44 | flex-wrap: wrap; 45 | flex-direction: column; 46 | } 47 | 48 | .quote { 49 | color: #d9ebd0; 50 | margin-left: auto; 51 | font-size: clamp(20px, 2.5vw, 40px); 52 | 53 | } 54 | 55 | .introduction { 56 | max-width: 70%; 57 | } 58 | .introduction h2 { 59 | color: #84dc4c; 60 | font-weight: 800; 61 | 62 | } 63 | .introduction p { 64 | font-size: 18px; 65 | color: #eeeded; 66 | } 67 | 68 | .card { 69 | opacity: 0; 70 | padding: 0; 71 | background-color: #dbffe2; 72 | margin: 20px 0px; 73 | } 74 | 75 | .card-title { 76 | font-weight: 1000; 77 | } 78 | .card img { 79 | aspect-ratio: 16/10; 80 | } 81 | .card-text { 82 | color: #303030; 83 | } 84 | 85 | .carousel { 86 | position: relative; 87 | } 88 | 89 | .carousel::before { 90 | content: ""; 91 | position: absolute; 92 | top: 0; 93 | left: 0; 94 | width: 100%; 95 | height: 100%; 96 | background: rgba(0, 0, 0, 0.5); 97 | z-index: 1; 98 | } 99 | 100 | .carousel img { 101 | position: relative; 102 | z-index: 0; 103 | } 104 | 105 | .carousel-caption { 106 | z-index: 2; 107 | } 108 | 109 | .centered-control { 110 | top: 50%; 111 | transform: translateY(-50%); 112 | } 113 | 114 | .gradient-text { 115 | background: linear-gradient(90deg, #5bba01, #eaeaeb); 116 | background-clip: text; 117 | color: transparent; 118 | -webkit-background-clip: text; 119 | font-size: 40px; 120 | } -------------------------------------------------------------------------------- /src/components/ClimateChange.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import '../App.css' 3 | import Causes from './Causes' 4 | import Introduction from './Introduction'; 5 | import { TypeAnimation } from 'react-type-animation'; 6 | import Visualisations from './Visualisations'; 7 | import Solutions from './Solutions'; 8 | import Aos from 'aos'; 9 | import 'aos/dist/aos.css'; 10 | import { Link } from 'react-router-dom'; 11 | 12 | 13 | const ClimateChange = () => { 14 | Aos.init({duration: 800}); 15 | return ( 16 | <> 17 | 18 |

19 |

20 |

21 | 22 | 47 |

48 |

49 |

50 | 51 | Inaction today may paint
a future we can't undo. 52 |

53 | Calculate your Footprint! 54 |

55 |

56 |

57 | 58 |

59 |

60 | 61 |

62 |

63 |

What is causing Climate Change?

64 | 65 |

66 |

67 | 68 |

69 |

70 | 71 |

72 |

73 | 74 |

75 |

76 |

What can we do?

77 | 78 |

79 |

80 | 81 | ) 82 | } 83 | 84 | export default ClimateChange 85 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | 2 | #root { 3 | margin: 0; 4 | } 5 | body { 6 | margin: 0; 7 | } 8 | .container { 9 | font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 10 | } 11 | .container button { 12 | pointer-events: all; 13 | min-width: 130px; 14 | max-width: 170px; 15 | min-height: 40px; 16 | max-height: 80px; 17 | height: 9vh; 18 | width: 10vw; 19 | font-size: clamp(12px, 5vw, 20px); 20 | } 21 | 22 | .description { 23 | color: white; 24 | padding: 15px; 25 | word-wrap: break-word; 26 | flex-direction: column; 27 | font-size: clamp(15px, 3vw, 17px); 28 | } 29 | .row { 30 | margin: 0; 31 | /* overflow-x: hidden; */ 32 | } 33 | 34 | .earthcanvas { 35 | position: fixed; 36 | top: 0; 37 | left: 0; 38 | width: 100%; 39 | height: 100%; 40 | z-index: -1; 41 | min-height: 100vh; 42 | /* pointer-events: auto; */ 43 | } 44 | 45 | .mainheader1 { 46 | background: hsla(97, 56%, 42%, 1); 47 | background: linear-gradient(90deg, hsla(97, 56%, 42%, 1) 0%, hsla(92, 55%, 62%, 1) 100%); 48 | background: -moz-linear-gradient(90deg, hsla(97, 56%, 42%, 1) 0%, hsla(92, 55%, 62%, 1) 100%); 49 | background: -webkit-linear-gradient(90deg, hsla(97, 56%, 42%, 1) 0%, hsla(92, 55%, 62%, 1) 100%); 50 | filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#5DA92F", endColorstr="#9BD46A", GradientType=1 ); 51 | color: transparent; 52 | background-clip: text; 53 | font-weight: 1000; 54 | font-size: clamp(70px, 8vw, 100px); 55 | } 56 | .mainheader2 { 57 | background: hsla(41, 100%, 70%, 1); 58 | background: linear-gradient(0deg, hsla(41, 100%, 70%, 1) 0%, hsla(7, 76%, 47%, 1) 100%); 59 | background: -moz-linear-gradient(0deg, hsla(41, 100%, 70%, 1) 0%, hsla(7, 76%, 47%, 1) 100%); 60 | background: -webkit-linear-gradient(0deg, hsla(41, 100%, 70%, 1) 0%, hsla(7, 76%, 47%, 1) 100%); 61 | font-weight: 1000; 62 | font-size: clamp(60px, 8vw, 100px); 63 | color: transparent; 64 | background-clip: text; 65 | } 66 | 67 | a { 68 | pointer-events: auto; 69 | } 70 | 71 | @keyframes fadeInUp { 72 | 0% { 73 | opacity: 0; 74 | transform: translateY(100px); 75 | } 76 | 100% { 77 | opacity: 1; 78 | transform: translateY(10px); 79 | } 80 | } 81 | @keyframes fadeOutDown { 82 | 0% { 83 | opacity: 1; 84 | transform: translateY(0); 85 | } 86 | 100% { 87 | opacity: 0; 88 | transform: translateY(100px); 89 | } 90 | } 91 | 92 | .container.my-4.exit { 93 | animation: fadeOutDown 0.5s ease-out forwards; 94 | } 95 | 96 | .container.my-4 { 97 | padding: 0; 98 | opacity: 0; 99 | animation: fadeInUp 0.5s ease-out forwards; 100 | animation-delay: 1.5s; 101 | } 102 | -------------------------------------------------------------------------------- /src/components/GlobalTemperature.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import Chart from "chart.js/auto"; 3 | 4 | const GlobalTemperature = () => { 5 | const chartRef = useRef(null); 6 | const chartInstanceRef = useRef(null); 7 | 8 | useEffect(() => { 9 | if (chartRef.current) { 10 | // If there's a previous chart instance, destroy it 11 | if (chartInstanceRef.current) { 12 | chartInstanceRef.current.destroy(); 13 | chartInstanceRef.current = null; 14 | } 15 | 16 | // Create a new chart 17 | chartInstanceRef.current = new Chart(chartRef.current, { 18 | type: "line", 19 | data: { 20 | labels: [ 21 | 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 22 | 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 23 | 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 24 | 2019, 2020, 2021, 2022 25 | ], 26 | datasets: [ 27 | { 28 | label: "Annual Global Temperature (°C)", 29 | data: [ 30 | 11.5, 11.89, 11.83, 11.22, 11.89, 11.0, 12.0, 10.17, 12.61, 31 | 12.17, 12.39, 11.89, 11.61, 11.83, 12.06, 12.11, 11.11, 12.78, 32 | 11.17, 11.89, 12.11, 12.11, 11.06, 11.17, 11.5, 11.0, 13.67, 33 | 11.83, 13.11, 13.5, 13.44, 13.39, 13.44, 12.0, 13.17, 13.5, 34 | 13.28 35 | ], 36 | fill: false, 37 | backgroundColor: "rgb(100, 10, 000)", 38 | borderColor: "rgb(255, 000, 000)", 39 | tension: 0.3, 40 | }, 41 | ], 42 | }, 43 | options: { 44 | responsive: true, 45 | interaction: { 46 | mode: 'index', 47 | intersect: false 48 | }, 49 | scales: { 50 | x: { 51 | grid: { 52 | display: false 53 | }, 54 | }, 55 | y: { 56 | grid: { 57 | display: false 58 | }, 59 | beginAtZero: false, 60 | }, 61 | }, 62 | plugins: { 63 | title: { 64 | display: true, 65 | text: 'Annual Global Temperature (in Celsius)', 66 | font: { 67 | size: 24 68 | } 69 | }, 70 | legend: { 71 | display: false 72 | } 73 | } 74 | }, 75 | }); 76 | } 77 | 78 | // Cleanup function to destroy the chart instance when the component unmounts 79 | return () => { 80 | if (chartInstanceRef.current) { 81 | chartInstanceRef.current.destroy(); 82 | chartInstanceRef.current = null; 83 | } 84 | }; 85 | }, []); // Add any dependencies here if necessary 86 | 87 | return ( 88 |

89 |

91 | ); 92 | }; 93 | 94 | export default GlobalTemperature; 95 | -------------------------------------------------------------------------------- /src/components/Causes.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Aos from "aos"; 3 | import 'aos/dist/aos.css'; 4 | 5 | 6 | const Causes = () => { 7 | Aos.init({duration: 800}); 8 | return ( 9 | <> 10 |

11 | 12 |

13 |

14 |

15 |

Greenhouse Emissions

16 |

17 | Greenhouse gas emissions from fossil fuels and industry cause global warming. Switching to renewable energy is crucial for reducing these emissions and addressing climate change.

18 |

19 |

20 | 21 |

22 |

23 |

24 |

Deforestation

25 |

26 | Deforestation, primarily caused by human activities like logging and agriculture, leads to the loss of valuable biodiversity and contributes to climate change by reducing the Earth's carbon sink. 27 |

28 |

29 |

30 | 31 |

32 |

33 |

34 |

Industrial Processes

35 |

36 | Activities like cement production and land conversion release additional greenhouse gases and alter the Earth's energy balance, further exacerbating climate change. 37 |

38 |

39 |

40 | 41 |

42 |

43 |

44 |

Urbanization and Lifestyle

45 |

46 | Urbanization and lifestyle contribute to climate change through increased energy consumption and consumer habits. Sustainable planning is the key to reducing these impacts.

47 |

48 |

49 | 50 |

51 |

and many other human driven activities

52 | 53 | ); 54 | }; 55 | 56 | export default Causes; 57 | -------------------------------------------------------------------------------- /src/components/EnergyConsumption.jsx: -------------------------------------------------------------------------------- 1 | import React, {useEffect, useRef} from 'react' 2 | import { Chart } from 'chart.js/auto'; 3 | 4 | 5 | const EnergyConsumption = () => { 6 | const chartRef = useRef(null); 7 | const chartInstanceRef = useRef(null); 8 | useEffect(() => { 9 | if(chartRef.current) { 10 | if(chartInstanceRef.current) { 11 | chartInstanceRef.current.destroy(); 12 | chartInstanceRef.current = null; 13 | } 14 | chartInstanceRef.current = new Chart(chartRef.current, { 15 | type: 'doughnut', 16 | data: { 17 | labels: [ 18 | 'Industrial', 19 | 'Residential', 20 | 'Transport', 21 | 'Agriculture', 22 | 'Commercial', 23 | 'Electricity and Heat', 24 | 'Others' 25 | ], 26 | datasets: [{ 27 | label: 'Energy Consumption in %', 28 | data: [25, 24.2, 23.9, 9.1, 7, 6.1, 3.7], 29 | backgroundColor: [ 30 | 'rgb(255, 99, 132)', 31 | 'rgb(75, 192, 192)', 32 | 'rgb(201, 203, 207)', 33 | 'rgb(20, 205, 86)', 34 | 'rgb(54, 162, 235)', 35 | 'rgb(153, 102, 255)', 36 | 'rgb(255, 159, 64)' 37 | ] 38 | }] 39 | }, 40 | options: { 41 | maintainAspectRatio: false, 42 | responsive: true, 43 | scales: { 44 | x: { 45 | grid: { 46 | display: false 47 | }, 48 | ticks: { 49 | font: { 50 | size: 10 51 | } 52 | } 53 | }, 54 | y: { 55 | grid: { 56 | display: false 57 | } 58 | } 59 | }, 60 | plugins: { 61 | title: { 62 | display: true, 63 | text: 'Energy Consumption by Sector in %', 64 | font: { 65 | size: 25 66 | } 67 | } 68 | } 69 | } 70 | }) 71 | } 72 | return () => { 73 | if (chartInstanceRef.current) { 74 | chartInstanceRef.current.destroy(); 75 | chartInstanceRef.current = null; 76 | } 77 | }; 78 | },[]) 79 | return ( 80 |

81 |

83 | ); 84 | }; 85 | 86 | export default EnergyConsumption 87 | -------------------------------------------------------------------------------- /src/assets/stacked-waves-haikei.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/CarbonEmissions.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from 'react' 2 | import { Chart } from 'chart.js/auto'; 3 | 4 | const CarbonEmissions = () => { 5 | 6 | const chartRef = useRef(null); 7 | const chartInstanceRef = useRef(null); 8 | 9 | useEffect(() => { 10 | if(chartRef.current) { 11 | if(chartInstanceRef.current) { 12 | chartInstanceRef.current.destroy(); 13 | chartInstanceRef.current = null; 14 | } 15 | chartInstanceRef.current = new Chart(chartRef.current, { 16 | type: 'bar', 17 | data: { 18 | labels: ['China', 'United States', 'India', 'European Union', 'Russia', 'Japan', 'Brazil', 'Iran', 'Indonesia','Mexico'], 19 | datasets: [{ 20 | label: 'Carbon Emissions (in million Tonnes)', 21 | data: [14, 6, 3.5, 3.4, 2, 1.17, 1.14, 1.13, 1.106, 0.8], 22 | borderWidth: 1, 23 | backgroundColor: [ 24 | 'rgba(255, 50, 50, 0.6)', // Red 25 | 'rgba(54, 162, 235, 0.6)', // Blue 26 | 'rgba(255, 206, 86, 0.6)', // Yellow 27 | 'rgba(75, 192, 192, 0.6)', // Green 28 | 'rgba(153, 102, 255, 0.6)', // Purple 29 | 'rgba(255, 159, 64, 0.6)', // Orange 30 | 'rgba(255, 105, 180, 0.6)', // HotPink 31 | 'rgba(240, 230, 140, 0.6)', // Khaki 32 | 'rgba(32, 178, 170, 0.6)', // LightSeaGreen 33 | 'rgba(148, 0, 211, 0.6)' // DarkViolet 34 | ], 35 | borderColor: 'black', 36 | tension: 0.1 37 | }] 38 | }, 39 | options: { 40 | responsive: true, 41 | scales: { 42 | x: { 43 | grid: { 44 | display: false 45 | }, 46 | ticks: { 47 | font: { 48 | size: 16 49 | } 50 | } 51 | }, 52 | y: { 53 | grid: { 54 | display: false 55 | } 56 | } 57 | }, 58 | plugins: { 59 | title: { 60 | display: true, 61 | text: 'Top Carbon Emitting Countries (in million Tonnes)', 62 | font: { 63 | size: 25 64 | } 65 | }, 66 | legend: { 67 | display: false 68 | } 69 | } 70 | 71 | } 72 | }) 73 | } 74 | return () => { 75 | if (chartInstanceRef.current) { 76 | chartInstanceRef.current.destroy(); 77 | chartInstanceRef.current = null; 78 | } 79 | }; 80 | },[]) 81 | 82 | return ( 83 |

84 |

86 | ) 87 | } 88 | 89 | export default CarbonEmissions 90 | -------------------------------------------------------------------------------- /src/components/Solutions.jsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import { Link } from 'react-router-dom' 4 | 5 | const Solutions = () => { 6 | return ( 7 |

8 |

9 | 10 |

11 |

12 |

13 |

14 |

Power Down and Shift Up

15 |

Reduce your reliance on fossil fuels at home. Use energy-efficient appliances, switch to LED bulbs, and air-dry clothes whenever possible. Explore options for switching to renewable energy sources for your electricity.

16 |

17 |

18 |

19 |

20 |

21 |

Travel Green

22 |

Leave the car behind! Walk, bike, or use public transportation whenever possible. If you must drive, consider carpooling or switching to a fuel-efficient or electric vehicle.

23 |

24 |

25 |

26 |

27 |

28 |

The Three R's

29 |

Reduce, reuse, and recycle! Avoid single-use plastics and bring your own reusable bags for shopping. Look for products with minimal packaging and choose durable items over disposable ones. Properly recycle what you can't avoid throwing away.

30 |

31 |

32 |

33 |

34 |

35 |

Reduce your Carbon Footprint

36 |

By minimizing the amount of greenhouse gases we emit into the atmosphere, we can help slow the rate of global warming and protect the health of our planet.

37 |

38 |

39 |

40 | 44 | 48 |

49 |

50 | ) 51 | } 52 | 53 | export default Solutions 54 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Earth.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import * as THREE from "three"; 3 | import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; 4 | import earthtexture from '../assets/earth.jpeg' 5 | import { Link } from "react-router-dom"; 6 | 7 | function Earth(props) { 8 | 9 | const mountRef = useRef(null); 10 | const {exit} = props.exit; 11 | const isLerping = useRef(true); 12 | const exitRef = useRef(exit); 13 | const zoomedOutRef = useRef(false); 14 | const ccRef = useRef(); 15 | 16 | let animate1, animate2; 17 | const width = window.innerWidth, height = window.innerHeight; 18 | // make a camera 19 | const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 1000); 20 | camera.position.set(2, 5, -15); 21 | camera.lookAt(0, 0, 0); 22 | 23 | // make a scene 24 | const scene = new THREE.Scene(); 25 | 26 | // creating a light source 27 | const light = new THREE.DirectionalLight(0xffffff, 2, 10); 28 | light.position.set(5, 0, 0); 29 | 30 | // creating another dim light source 31 | const nightlight = new THREE.AmbientLight(0xffffff, 0.03, 10); 32 | nightlight.position.set(-5, 0, 0); 33 | 34 | // loading the earth texture 35 | const textureLoader = new THREE.TextureLoader(); 36 | const texture = textureLoader.load(earthtexture); 37 | 38 | // creating and adding the earth 39 | const SphereGeometry = new THREE.SphereGeometry(1.5, 64, 64); 40 | const SphereMaterial = new THREE.MeshPhysicalMaterial({ map: texture }); 41 | const sphere = new THREE.Mesh(SphereGeometry, SphereMaterial); 42 | sphere.position.set(0, 0, 0); 43 | 44 | const gridHelper = new THREE.GridHelper(50, 100); 45 | let renderer = new THREE.WebGLRenderer({ antialias: true }); 46 | 47 | // creating orbit controls 48 | const controls = new OrbitControls(camera, renderer.domElement); 49 | 50 | useEffect(() => { 51 | 52 | scene.add(light); 53 | scene.add(nightlight); 54 | scene.add(sphere); 55 | 56 | // Some helper objects 57 | 58 | // scene.add(gridHelper); 59 | // const plhelper = new THREE.PointLightHelper(light); 60 | // scene.add(plhelper); 61 | 62 | // creating the renderer 63 | renderer.setSize(width, height); 64 | mountRef.current.appendChild(renderer.domElement); 65 | renderer.domElement.className = 'earthcanvas'; 66 | 67 | // zoom-in animation 68 | const target = new THREE.Vector3(2, 0, 2); 69 | 70 | 71 | // animation loop 72 | const animate = function (time) { 73 | animate1 = requestAnimationFrame(animate); 74 | 75 | if (isLerping.current) { 76 | camera.position.lerp(target, 0.05); 77 | if (camera.position.distanceTo(target) < 0.01) { 78 | isLerping.current = false; 79 | } 80 | controls.update(); 81 | } 82 | sphere.rotation.y += 0.0025; 83 | renderer.render(scene, camera); 84 | }; 85 | animate(); 86 | 87 | // cleanup function 88 | return () => { 89 | cancelAnimationFrame(animate1) 90 | } 91 | }, []); 92 | 93 | useEffect(()=> { 94 | exitRef.current = exit; 95 | 96 | function zoomOut() { 97 | let targetPosition = new THREE.Vector3(1, 0, -1); // Define the target position to zoom out 98 | camera.position.lerp(targetPosition, 0.03); 99 | if (camera.position.distanceTo(targetPosition) < 1) { 100 | exitRef.current = false; 101 | zoomedOutRef.current = true; 102 | } 103 | } 104 | 105 | const animate = function (time) { 106 | if(!zoomedOutRef.current) { 107 | animate2 = requestAnimationFrame(animate); 108 | } 109 | 110 | if(exitRef.current) { 111 | document.querySelector('.container.my-4').classList.add('exit'); 112 | zoomOut(); 113 | controls.update(); 114 | } 115 | 116 | if(zoomedOutRef.current) { 117 | if(ccRef.current) { 118 | ccRef.current.click(); 119 | } 120 | } 121 | 122 | renderer.render(scene, camera); 123 | 124 | } 125 | animate(); 126 | 127 | }, [exit]) 128 | 129 | 130 | return <>

131 | 132 | ; 133 | } 134 | 135 | export default Earth; -------------------------------------------------------------------------------- /src/components/Footprint.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footprint = () => { 4 | 5 | const calculateFootprint = (e) => { 6 | e.preventDefault(); 7 | 8 | 9 | const carEmissionPerKm = 0.25; 10 | const busEmissionPerKm = 0.149; 11 | const planeEmissionPerKm = 0.195; 12 | const electricityEmissionPerKwh = 0.475; 13 | const gasEmissionPerKwh = 0.2; 14 | const wasteEmissionPerPerson = 0.59; 15 | 16 | 17 | const carKm = parseFloat(document.getElementById("carKm").value); 18 | const carDays = parseInt(document.getElementById("carDays").value); 19 | const busKm = parseFloat(document.getElementById("busKm").value); 20 | const busDays = parseInt(document.getElementById("busDays").value); 21 | const planeKm = parseFloat(document.getElementById("planeKm").value); 22 | const electricityKwh = parseFloat(document.getElementById("electricityKwh").value); 23 | const gasKwh = parseFloat(document.getElementById("gasKwh").value); 24 | const wasteKg = parseFloat(document.getElementById("wasteKg").value); 25 | const dietChoice = document.getElementById("dietChoice").value.toLowerCase(); 26 | 27 | 28 | const carEmission = carKm * carEmissionPerKm * carDays; 29 | const busEmission = busKm * busEmissionPerKm * busDays; 30 | const planeEmission = planeKm * planeEmissionPerKm; 31 | const electricityEmission = electricityKwh * electricityEmissionPerKwh; 32 | const gasEmission = gasKwh * gasEmissionPerKwh; 33 | const wasteEmission = wasteKg * wasteEmissionPerPerson; 34 | 35 | 36 | let dietEmission; 37 | switch (dietChoice) { 38 | case 'omnivore': 39 | dietEmission = 3.3; 40 | break; 41 | case 'vegetarian': 42 | dietEmission = 2.5; 43 | break; 44 | case 'vegan': 45 | dietEmission = 1.5; 46 | break; 47 | default: 48 | dietEmission = 0; 49 | break; 50 | } 51 | 52 | const totalEmission = carEmission + busEmission + planeEmission + 53 | electricityEmission + gasEmission + wasteEmission + dietEmission; 54 | 55 | document.getElementById('resultfootprint').innerText = "Your carbon footprint is approximately " + totalEmission.toFixed(2) + " kg CO2 equivalent per week."; 56 | } 57 | return ( 58 |

59 |

60 |

Carbon Footprint Calculator

61 |

62 |

63 | 64 | Kilometers driven by car per day 65 |

66 | 67 |

68 | 69 | Number of days per week you drive 70 |

71 | 72 |

73 | 74 | Kilometers traveled by bus per day 75 |

76 | 77 |

78 | 79 | Number of days per week you take the bus 80 |

81 | 82 |

83 | 84 | Kilometers traveled by plane per week 85 |

86 | 87 |

88 | 89 | Electricity consumption in kWh per month 90 |

91 | 92 |

93 | 94 | Natural gas consumption in kWh per month 95 |

96 | 97 |

98 | 99 | Waste production in kilograms per day 100 |

101 | 102 |

103 | 108 | Your diet type 109 |

110 | 111 | 126 | 127 | 128 | 129 |

130 |

131 |

132 | ) 133 | } 134 | 135 | export default Footprint 136 | --------------------------------------------------------------------------------