40 | Share on social media with hashtag #SaveEarth , #SaveEarthChallenge . Don't forget the
41 | photo and caption
42 |
43 |
44 | Mention your friends and Challenge them. Make it a Chain Reaction and Together We Can.
45 |
46 |
47 |
48 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/public/images/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/options/icons/earth.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/facts/facts.js:
--------------------------------------------------------------------------------
1 | const fact = [
2 | 'The concentration of carbon dioxide (CO2) in our atmosphere, as of 2018, is the highest it has been in 3 million years.',
3 | 'NASA and NOAA data show that global averages in 2016 were 1.78 degrees F (0.99 degrees C) warmer than the mid-20th century average. Seventeen of the 18 warmest years have occurred since 2000.',
4 | 'Eleven percent of all global greenhouse gas emissions caused by humans are caused by deforestation — comparable to the emissions from all of the cars and trucks on the planet.',
5 | 'In the Amazon, 1% of tree species sequester 50% of the region’s carbon.',
6 | 'Eleven percent of the world’s population is currently vulnerable to climate change impacts such as droughts, floods, heat waves, extreme weather events and sea-level rise.',
7 | 'Just 0.7% of the world’s forests are coastal mangroves, yet they store up to 10 times as much carbon per hectare as tropical forests.',
8 | 'An area of coastal ecosystems larger than New York City is destroyed every year, removing an important buffer from extreme weather for coastal communities and releasing carbon dioxide into the atmosphere.',
9 | 'Conserving ecosystems is often more cost-effective than human-made interventions. In the Maldives, building a sea wall for coastal protection cost about US$ 2.2 billion. Even after 10 years of maintenance costs, it is still four times cheaper to preserve the natural reef.',
10 | 'Tropical forests are incredibly effective at storing carbon — providing at least 30% of action needed to prevent the worst climate change scenarios. Yet nature-based solutions only receive only 2% of all climate funding.',
11 | '195 countries signed the 2015 Paris Agreement, agreeing to limit global warming and adapt to climate change, partly by protecting nature.',
12 | 'This is what it would take to make the changes humanity needs to adapt to a warming world. It may sound like a lot, but it’s less than 0.1% of global GDP.',
13 | 'Natural climate solutions like ending deforestation and restoring degraded forests could, at the global level, create 80 million jobs, bring 1 billion people out of poverty and add US$ 2.3 trillion in productive growth.'
14 | ];
15 |
16 | export default fact;
17 |
--------------------------------------------------------------------------------
/src/components/comparison/icons/us.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/stats/images/thaw.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/comparison/comparison.componenet.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ReactComponent as Dark } from './icons/dark.svg';
3 | import { ReactComponent as Clean } from './icons/clean.svg';
4 | import { ReactComponent as IND } from './icons/in.svg';
5 | import { ReactComponent as PAK } from './icons/pk.svg';
6 | import { ReactComponent as IR } from './icons/ir.svg';
7 |
8 | import { ReactComponent as DK } from './icons/dk.svg';
9 | import { ReactComponent as SW } from './icons/sw.svg';
10 | import { ReactComponent as NL } from './icons/nl.svg';
11 | import { ReactComponent as US } from './icons/us.svg';
12 | import { ReactComponent as ZA } from './icons/za.svg';
13 | import { ReactComponent as FI } from './icons/fi.svg';
14 | import { ReactComponent as CA } from './icons/ca.svg';
15 | import { ReactComponent as EU } from './icons/eu.svg';
16 |
17 | export default function Comparison() {
18 | return (
19 |
102 |
108 |
109 | Average Human LifeSpan in this condition
110 |
111 | {lifeSpan} Years
112 |
113 |
114 |
115 |
116 | );
117 | }
118 |
--------------------------------------------------------------------------------
/src/components/stats/images/sunset.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/challenge/icons/users.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/src/components/results/results.styles.css:
--------------------------------------------------------------------------------
1 | .wrap {
2 | width: 490px;
3 | margin: 0 auto;
4 | position: relative;
5 | }
6 |
7 | .wrap .bg {
8 | width: 450px;
9 | padding: 20px;
10 | }
11 |
12 | .wrap .sun {
13 | width: 140px;
14 | height: 140px;
15 | position: absolute;
16 | top: 20px;
17 | right: 10px;
18 | animation: rotate-sun 60s infinite linear;
19 | -webkit-animation: rotate-sun 60s infinite linear;
20 | -moz-animation: rotate-sun 60s infinite linear;
21 | }
22 |
23 | .wrap .cloud {
24 | position: absolute;
25 | width: 120px;
26 | height: 70px;
27 | }
28 |
29 | .cloud.cloud-1 {
30 | top: 150px;
31 | left: -20px;
32 | }
33 | .cloud.cloud-2 {
34 | top: 40px;
35 | left: 150px;
36 | animation: animate-cloud 14s infinite linear;
37 | -webkit-animation: animate-cloud 14s infinite linear;
38 | -moz-animation: animate-cloud 14s infinite linear;
39 | }
40 | .cloud.cloud-3 {
41 | top: 190px;
42 | right: -20px;
43 | animation: animate-cloud 8s infinite linear;
44 | -webkit-animation: animate-cloud 8s infinite linear;
45 | -moz-animation: animate-cloud 8s infinite linear;
46 | }
47 |
48 | .rain {
49 | position: absolute;
50 | width: 20px;
51 | height: 120px;
52 | overflow: none;
53 | top: 160px;
54 | }
55 | .drop {
56 | position: inherit;
57 | top: calc(50%);
58 | height: 10px;
59 | width: 10px;
60 | border-radius: 50%;
61 | background-color: powderblue;
62 | animation: raining 1s infinite;
63 | }
64 |
65 | .drop-1::before,
66 | .drop-2::before,
67 | .drop-3::before,
68 | .drop-4::before,
69 | .drop-5::before {
70 | content: '';
71 | position: relative;
72 | top: -37px;
73 | width: 0;
74 | height: 0;
75 | border-left: 10px solid transparent;
76 | border-right: 10px solid transparent;
77 | border-bottom: 23px solid powderblue;
78 | }
79 |
80 | .drop-1 {
81 | left: calc(50% - 10px);
82 | animation-delay: 1s;
83 | }
84 |
85 | .drop-2 {
86 | left: calc(50% + 5px);
87 | animation-delay: 0.5s;
88 | }
89 |
90 | .drop-3 {
91 | left: calc(50% + 20px);
92 | animation-delay: 0.75s;
93 | }
94 |
95 | .drop-4 {
96 | left: calc(50% + 35px);
97 | animation-delay: 0.25s;
98 | }
99 |
100 | .drop-5 {
101 | left: calc(50% + 50px);
102 | animation-delay: 0.4s;
103 | }
104 |
105 | @keyframes rotate-sun {
106 | 0% {
107 | -webkit-transform: rotateZ(0);
108 | transform: rotateZ(0);
109 | }
110 | 100% {
111 | -webkit-transform: rotateZ(-360deg);
112 | transform: rotateZ(-360deg);
113 | }
114 | }
115 |
116 | @keyframes animate-cloud {
117 | 0% {
118 | transform: translateX(0%);
119 | }
120 | 25% {
121 | transform: translateX(10%);
122 | }
123 | 50% {
124 | transform: translateX(20%);
125 | }
126 | 75% {
127 | transform: translateX(10%);
128 | }
129 | 100% {
130 | transform: translateX(0%);
131 | }
132 | }
133 |
134 | @keyframes raining {
135 | 0% {
136 | opacity: 1;
137 | transform: translateY(0px);
138 | }
139 | 100% {
140 | opacity: 0;
141 | transform: translateY(70px);
142 | }
143 | }
144 |
145 | #smoke {
146 | position: absolute;
147 | z-index: 3;
148 | width: 1px;
149 | height: 160px;
150 | left: 50%;
151 | bottom: 30px;
152 | }
153 |
154 | /* smoke balls */
155 |
156 | #smoke span {
157 | display: block;
158 | position: absolute;
159 | bottom: -35px;
160 | left: 50%;
161 | margin-left: -20px;
162 | height: 0px;
163 | width: 0px;
164 | border: 35px solid #4b4b4b;
165 | border-radius: 35px;
166 | left: -14px;
167 | opacity: 0;
168 | transform: scale(0.2);
169 | }
170 |
171 | /* Smoke animation */
172 |
173 | @keyframes smokeL {
174 | 0% {
175 | transform: scale(0.2) translate(0, 0);
176 | }
177 | 10% {
178 | opacity: 1;
179 | transform: scale(0.2) translate(0, -5px);
180 | }
181 | 100% {
182 | opacity: 0;
183 | transform: scale(1) translate(-20px, -130px);
184 | }
185 | }
186 |
187 | @keyframes smokeR {
188 | 0% {
189 | transform: scale(0.2) translate(0, 0);
190 | }
191 | 10% {
192 | opacity: 1;
193 | transform: scale(0.2) translate(0, -5px);
194 | }
195 | 100% {
196 | opacity: 0;
197 | transform: scale(1) translate(20px, -130px);
198 | }
199 | }
200 |
201 | #smoke .s0 {
202 | animation: smokeL 10s 0s infinite;
203 | }
204 | #smoke .s1 {
205 | animation: smokeR 10s 1s infinite;
206 | }
207 | #smoke .s2 {
208 | animation: smokeL 10s 2s infinite;
209 | }
210 | #smoke .s3 {
211 | animation: smokeR 10s 3s infinite;
212 | }
213 | #smoke .s4 {
214 | animation: smokeL 10s 4s infinite;
215 | }
216 | #smoke .s5 {
217 | animation: smokeR 10s 5s infinite;
218 | }
219 | #smoke .s6 {
220 | animation: smokeL 10s 6s infinite;
221 | }
222 | #smoke .s7 {
223 | animation: smokeR 10s 7s infinite;
224 | }
225 | #smoke .s8 {
226 | animation: smokeL 10s 8s infinite;
227 | }
228 | #smoke .s9 {
229 | animation: smokeR 10s 9s infinite;
230 | }
231 |
--------------------------------------------------------------------------------
/src/components/stats/images/carbon-dioxide.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
92 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/components/stats/images/sea.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
116 |
--------------------------------------------------------------------------------
/src/components/stats/images/beach.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/ngo/ngo.js:
--------------------------------------------------------------------------------
1 | const ngoList = {
2 | Greenpeace:
3 | 'A well-known NGO; an independent campaigning organization on various frontiers of environmental issues, which uses non-violent, creative confrontation to expose global environmental problems. This approach enables them to force solutions which are essential to a green and peaceful future.',
4 | 'World Wildlife Fund':
5 | "The world’s leading conservation organization has, like Raptim, Dutch roots. WWF works in 100 countries and has drawn support from 1.2 million members in the United States and close to 5 million globally. WWF's unique way of working combines global reach with a foundation in science and involves action at every level from local to global.They ensure the delivery of innovative solutions that meet the needs of both people and nature.",
6 | '350.org':
7 | 'An NGO which exclusively believes in a safe climate and a better future — a just, prosperous, and equitable world built with the power of compassionate and dedicated people.',
8 | 'African Wildlife Foundation':
9 | 'The African Wildlife Foundation, together with the people of Africa, works to ensure the wildlife and wild lands of Africa will endure forever.',
10 | 'Conservation International':
11 | 'Building upon a strong foundation of science, partnership, and field demonstration, CI empowers societies to responsibly and sustainably care for nature in addition to our global biodiversity for the well-being of humanity.',
12 | 'Earth Day Network':
13 | 'Their mission is to broaden and diversify the environmental movement worldwide and to mobilize it as the most efficient vehicle to build a healthy, sustainable environment, address climate change, and protect the Earth for future generations.',
14 |
15 | 'Fauna and Flora International':
16 | 'Fauna & Flora International (FFI) is a proven conservation innovator that continues to make a lasting impact on global biodiversity – the variety of life on Earth.',
17 | 'Friends of Nature':
18 | 'An international movement with a background in the Social Democratic movement. It aims to make nature accessible to the wider community by providing appropriate recreational and travel facilities.',
19 | 'Green Cross International':
20 | 'The primary mission of Green Cross International is to respond to the combined challenges of security, poverty, and environmental degradation to ensure a sustainable and secure future.',
21 | 'IDEAS For Us':
22 | 'This is an environmental NPO/NGO run by compassionate people, and it’s all about being sustainable and doing good all over the world.',
23 | 'Plant a Tree Today Foundation':
24 | "PATT's projects focus on three main things: native forest restoration, environmental education, and community development. These three components combined will create a sustainable impact for our future generation.",
25 | 'Project AWARE':
26 | 'With new programs and more online resources than ever before, Project AWARE supports an unprecedented global movement of divers acting in their communities to protect the ocean and implement long-lasting change.',
27 | 'Rainforest Alliance':
28 | 'The Rainforest Alliance works to conserve biodiversity and ensure sustainable livelihoods by transforming land-use practices, business practices, and consumer behavior. They envision the world where people and planet prosper together.',
29 | 'The Climate Reality Project':
30 | 'Their mission is to catalyze a global solution to the climate crisis by making urgent actions a necessity across every level of society.',
31 | 'WILD Foundation':
32 | 'WILD Foundation has been the heart of the global wilderness community for over 40 years. It protects wilderness while meeting the needs of human communities, working across cultures and boundaries. How? By collaborating with local peoples, organizations, the private sector, and governments to create dynamic, practical projects, inspiring solutions, and communications initiatives.',
33 | 'World Land Trust':
34 | 'World Land Trust (WLT) is an international conservation charity which protects the world’s most biologically important and threatened habitats. Since its foundation in 1989, WLT has funded partner organizations around the world to create reserves and give permanent protection to habitats and wildlife.',
35 | 'Global Witness':
36 | 'Many of the world’s worst environmental and human rights abuses are driven by the exploitation of natural resources and corruption in the global political and economic system. Global Witness is campaigning to bring an end to this. They are independent, not-for-profit, and work with dedicated partners around the world in a fight for justice.',
37 | 'Friends of the Earth':
38 | 'Campaigning on today’s most urgent environmental and social issues, Friends of the Earth challenge the current model of economic and corporate globalization. They promote solutions that will help create environmentally sustainable and socially just societies.',
39 | 'Rainforest Trust':
40 | 'This NGO vows to protect threatened tropical forests and endangered wildlife by partnering with local and community organizations in and around the areas that are being threatened. After purchasing acres of endangered land, they empower local people to help protect it by equipping them with education, training, and employment.',
41 | 'Forest Stewardship Council':
42 | "The Forest Stewardship Council A.C. (FSC) promotes environmentally appropriate, socially beneficial, and economically viable management of the world's forests.",
43 | NatureServe:
44 | 'The NatureServe network includes many faces, names, and expertise from the United States, Canada, and Latin America. More than 1,000 conservation professionals work hand in hand to ensure that relevant and reliable science is driving towards important conservation action. They believe the beauty of natural life that exists all around us must be discovered, documented, protected, and saved.',
45 | Earthwatch:
46 | 'This is an international environmental charity that brings individuals from all walks of life together with world-class scientists to work for the good of the planet.',
47 | 'Environmental Defense Fund':
48 | 'Their mission is to preserve the natural systems on which all life depends. Guided by science and economics, this NGO finds practical and lasting solutions to the most detrimental environmental issues and challenges.',
49 | 'The Mountain Institute':
50 | 'Mountains sustain life on earth. In a world facing unparalleled economic and environmental upheaval, The Mountain Institute is committed to protecting our mountains. By conserving mountain ecosystems and empowering the people in the mountain communities, The Mountain Institute ensures the preservation of resources—natural, cultural and spiritual—that are crucial to maintaining a healthy plan',
51 | 'Water Ambassadors':
52 | 'Canada, The mission at Water Ambassadors Canada (WAC), is to respond to the global need for clean water and reach the desperately poor people in developing countries in the name of Jesus Christ.',
53 | CESOSACO:
54 | 'With nearly 50 years as an international economic development organization, they’ve seen how private sector development and strengthening governing structures drive both economic and social change at local, national and international levels.',
55 | 'Energy for All':
56 | 'An Alberta based non-profit dedicated to alleviating poverty by increasing people’s access to clean water, renewable energy, and improved wastewater infrastructure.',
57 | 'Veterinarians Without Borders':
58 | 'Their mission is to work for, and with, communities in need to foster the health of animals, people and the environments that sustain us.',
59 | 'EMAS Canada':
60 | 'They seek to build up and nurture locally-initiated programs by providing healthcare services, equipment, supplies, and continuing education.'
61 | };
62 |
63 | export default ngoList;
64 |
--------------------------------------------------------------------------------
/src/components/tips/images/change.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/results/result.svg:
--------------------------------------------------------------------------------
1 |
36 |
37 |
38 |
46 |
47 |
48 |
![{item[0]}]({item[1].image})
17 | 
31 | 
108 |
109 | Average Human LifeSpan in this condition
110 |