-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from Sustainer2020/ui_calc
UI and calculater
- Loading branch information
Showing
32 changed files
with
8,321 additions
and
6,032 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,93 @@ | ||
| // App.js | ||
|
|
||
| import React, { useState } from "react"; | ||
| import "bootstrap/dist/css/bootstrap.min.css"; | ||
| import "./styles.css"; | ||
| import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; | ||
| import AppNavbar from "./components/Navbar"; | ||
| import HeroSection from "./components/HeroSection"; | ||
| import Footer from "./components/Footer"; | ||
| import StatePage from "./components/StatePage"; | ||
| import IndiaMap from "./components/IndiaMap"; | ||
| import Calculator from "./components/WaterCalculator.js"; | ||
|
|
||
| const Home = ({ setSelectedState }) => { | ||
| function handleStateClick(stateName) { | ||
| setSelectedState(stateName); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="d-flex justify-content-between m-5"> | ||
| <div className="col-md-6 mt-4"> | ||
| <HeroSection /> | ||
| </div> | ||
| <div className="right col-md-5"> | ||
| <IndiaMap onStateClick={handleStateClick} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const App = () => { | ||
| const [selectedState, setSelectedState] = useState("Uttarakhand"); | ||
|
|
||
| return ( | ||
| <Router> | ||
| <AppNavbar /> | ||
| <Routes> | ||
| <Route | ||
| path="/" | ||
| element={<Home setSelectedState={setSelectedState} />} | ||
| /> | ||
| <Route path="/calculator" element={<Calculator />} /> | ||
| <Route | ||
| path={`/${selectedState}`} | ||
| element={<StatePage selectedState={selectedState} />} | ||
| /> | ||
| </Routes> | ||
| <Footer /> | ||
| </Router> | ||
| ); | ||
| }; | ||
|
|
||
| export default App; | ||
| // App.js | ||
|
|
||
| import React, { useState, useEffect } from "react"; | ||
| import "bootstrap/dist/css/bootstrap.min.css"; | ||
| import "./styles.css"; | ||
| import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; | ||
| import AppNavbar from "./components/Navbar"; | ||
| import HeroSection from "./components/HeroSection"; | ||
| import Footer from "./components/Footer"; | ||
| import StatePage from "./components/StatePage"; | ||
| import IndiaMap from "./components/IndiaMap"; | ||
| import Calculator from "./components/WaterCalculator.js"; | ||
| import StateComparison from "./components/stateComp.js"; | ||
| import StateData from './data/StateData.json'; | ||
| import AboutUsPage from "./components/aboutUs.js"; | ||
| const Home = ({ setSelectedState }) => { | ||
| function handleStateClick(stateName) { | ||
| setSelectedState(stateName); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="d-flex justify-content-between m-5"> | ||
| <div className="col-md-6 mt-4"> | ||
| <HeroSection /> | ||
| </div> | ||
| <div className="right col-md-5"> | ||
| <IndiaMap onStateClick={handleStateClick} /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const App = () => { | ||
| const [selectedState, setSelectedState] = useState("Uttarakhand"); | ||
| const [navbarFixed, setNavbarFixed] = useState(false); | ||
| const defaultState = 'Uttarakhand'; | ||
|
|
||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| if (window.scrollY > 0) { | ||
| setNavbarFixed(true); | ||
| } else { | ||
| setNavbarFixed(false); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener("scroll", handleScroll); | ||
|
|
||
| return () => { | ||
| window.removeEventListener("scroll", handleScroll); | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
|
|
||
| <> | ||
| <AppNavbar className={"fixed-navbar"} ></AppNavbar> | ||
|
|
||
| <Router> | ||
| <Routes> | ||
| <Route | ||
| path="/" | ||
| element={<Home setSelectedState={setSelectedState} />} | ||
| /> | ||
| <Route path="/calculator" element={<Calculator />} /> | ||
| <Route | ||
| path="/" | ||
| element={<Navigate to={`/${defaultState}`} />} | ||
| /> | ||
| <Route | ||
| path="/:selectedState" | ||
| element={<StatePage selectedState={selectedState} />} | ||
| /> | ||
| <Route | ||
| path="/stateComparison" | ||
| element={<StateComparison stateData={StateData} />} | ||
| /> | ||
| <Route | ||
| path="/AboutUs" | ||
| element={<AboutUsPage/>} | ||
| /> | ||
| </Routes> | ||
| <br /> | ||
| </Router> | ||
| {/* <Footer></Footer> */} | ||
| </> | ||
|
|
||
| ); | ||
|
|
||
|
|
||
| }; | ||
|
|
||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| // src/components/Footer.js | ||
| import React from 'react'; | ||
|
|
||
| const Footer = () => { | ||
| return ( | ||
| <footer className='static-bottom'> | ||
| <p className='text-center'>© {new Date().getFullYear()} Made with ❤ </p> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Footer; | ||
| // src/components/Footer.js | ||
| import React from 'react'; | ||
|
|
||
| const Footer = () => { | ||
| return ( | ||
| <footer className='static-bottom'> | ||
| <p className='text-center'>© {new Date().getFullYear()} Made with ❤ </p> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Footer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,44 @@ | ||
| /* src/components/HeroSection.css */ | ||
| @keyframes fadeInUp { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| .fade-in-up { | ||
| animation: fadeInUp 1s ease; | ||
| } | ||
|
|
||
| .jumbotron-custom { | ||
| padding: 2rem 1rem; | ||
| margin-bottom: 2rem; | ||
| background-color: rgba(255, 255, 255, 0.5); /* White background with transparency */ | ||
| border-radius: 0.3rem; | ||
| backdrop-filter: blur(10px); /* Adds blur effect */ | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); | ||
|
|
||
| /* Add the following CSS to move the whole section to the left */ | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .jumbotron-custom h1, | ||
| .jumbotron-custom p { | ||
| color: #333; /* Text color for the heading and description */ | ||
| } | ||
|
|
||
| .jumbotron-custom h1 { | ||
| font-family: var(--big-heading-font-family); | ||
| font-size: var(--big-heading-font-size); | ||
| font-weight: var(--big-heading-font-weight); | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .jumbotron-custom p { | ||
| font-family: var(--short-description-font-family); | ||
| font-size: var(--short-description-font-size); | ||
| } | ||
| /* src/components/HeroSection.css */ | ||
| @keyframes fadeInUp { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(20px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| .fade-in-up { | ||
| animation: fadeInUp 1s ease; | ||
| } | ||
|
|
||
| .jumbotron-custom { | ||
| padding: 2rem 1rem; | ||
| margin-bottom: 2rem; | ||
| background-color: rgba(255, 255, 255, 0.5); /* White background with transparency */ | ||
| border-radius: 0.3rem; | ||
| backdrop-filter: blur(10px); /* Adds blur effect */ | ||
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); | ||
|
|
||
| /* Add the following CSS to move the whole section to the left */ | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .jumbotron-custom h1, | ||
| .jumbotron-custom p { | ||
| color: #333; /* Text color for the heading and description */ | ||
| } | ||
|
|
||
| .jumbotron-custom h1 { | ||
| font-family: var(--big-heading-font-family); | ||
| font-size: var(--big-heading-font-size); | ||
| font-weight: var(--big-heading-font-weight); | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .jumbotron-custom p { | ||
| font-family: var(--short-description-font-family); | ||
| font-size: var(--short-description-font-size); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,29 @@ | ||
| // src/components/HeroSection.js | ||
| import React from 'react'; | ||
| import './HeroSection.css'; // Create a new file HeroSection.css | ||
| import Button from 'react-bootstrap/Button'; | ||
|
|
||
| const HeroSection = () => { | ||
| return ( | ||
|
|
||
| <div classname="d-flex justify-content-center"> | ||
| <div className="jumbotron jumbotron-custom"> | ||
| <div className="container fade-in-up"> | ||
| <h1>Water Footprint of India</h1> | ||
| <p> | ||
|
|
||
| The water footprint measures water use and pollution for goods, services, and processes. It helps companies, governments, and individuals understand dependencies, resource protection, and food/energy security. It includes direct and indirect water use and consists of green, blue, and grey components. Managing water footprints is vital for sustainable water use and preservation.by identifying the source of water consumed, such as rainfall, soil moisture, surface water, or groundwater, and the volume of fresh water needed to assimilate pollutants. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <Button variant="dark" href="/calculator">Calculate Your Water Footprint</Button> | ||
| </div> | ||
|
|
||
| ); | ||
| }; | ||
|
|
||
| export default HeroSection; | ||
| // src/components/HeroSection.js | ||
| import React from 'react'; | ||
| import './HeroSection.css'; // Create a new file HeroSection.css | ||
| import Button from 'react-bootstrap/Button'; | ||
|
|
||
| const HeroSection = () => { | ||
| return ( | ||
|
|
||
| <div classname="d-flex justify-content-center"> | ||
| <div className="jumbotron jumbotron-custom"> | ||
| <div className="container fade-in-up"> | ||
| <h1>Water Footprint of India</h1> | ||
| <p> | ||
|
|
||
| The water footprint measures water use and pollution for goods, services, and processes. It helps companies, governments, and individuals understand dependencies, resource protection, and food/energy security. It includes direct and indirect water use and consists of green, blue, and grey components. Managing water footprints is vital for sustainable water use and preservation.by identifying the source of water consumed, such as rainfall, soil moisture, surface water, or groundwater, and the volume of fresh water needed to assimilate pollutants. | ||
| </p> | ||
| </div> | ||
| </div > | ||
| <> | ||
| <Button variant="dark" href="/calculator">Calculate Your Water Footprint</Button>{' '} | ||
| <Button variant="dark" href="/stateComparison">Compare States</Button> | ||
| </> | ||
|
|
||
| </div> | ||
|
|
||
| ); | ||
| }; | ||
|
|
||
| export default HeroSection; |
Oops, something went wrong.