diff --git a/ui-subsystem/src/App.js b/ui-subsystem/src/App.js index 37845757234ccb68531c10cf7a2ffc589c47e342..47658739f59f978b7aeb9b7f3b872755bd98d7f0 100644 --- a/ui-subsystem/src/App.js +++ b/ui-subsystem/src/App.js @@ -1,24 +1,10 @@ import logo from './logo.svg'; import './App.css'; +import Landing from './components/Landing'; function App() { return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> - </div> + <Landing/> ); } diff --git a/ui-subsystem/src/components/Landing.css b/ui-subsystem/src/components/Landing.css new file mode 100644 index 0000000000000000000000000000000000000000..1fc1bd16f4588a99eb7d9e2bdffa00b78c7e22c2 --- /dev/null +++ b/ui-subsystem/src/components/Landing.css @@ -0,0 +1,149 @@ +.bg { + background-color: black; + height: 100vh; + width: 100vw; + position: relative; + min-height: 100%; + overflow-x: hidden; + overflow-y: hidden; + display: block; + +} + +.container { + position: relative; + display: flex; + justify-content: center; + width: 100vw; + height: 100vh; +} + +.param-wrap { + display: block; + width: 80vw; + height: 100vh; + /* background-color: #FCFCFC; */ + overflow-x: hidden; + overflow-y: hidden; + text-align: center; +} + +.title { + color: white; + font-size: 2.5rem; + font-weight: 800; + display: block; +} + +.split-container { + display: flex; + justify-content: flex-start; +} + +.options-bg { + display: block; + width: 53vw; + height: 100vh; + /* background-color: #FCFCFC; */ + overflow-x: hidden; + overflow-y: hidden; + text-align: center; +} +.opitons-container { + display: flex; + flex-wrap: wrap; +} + +.options { + width: 60.3125rem; + height: 3.5625rem; + border-radius: 2.5rem; + /* background-color: white; */ + border: none; + display: flex; + justify-content: space-evenly; + +} + +.options-text { + font-size: large; + font-weight: 750; + color: white; +} + +.add-plant-btn { + width: 11.25rem; + height: 3.5625rem; + border-radius: 2.5rem; + background-color: #AA88FF; + border: none; + color: white; + font-size: large; + font-weight: 750; +} + +.options-text { + color: white +} + +.new-plant { + color: white; + /* padding: 10px; */ + margin: 1.25rem; + width: 60.3125rem; + height: 3.5625rem; + background-color: #A8FF35; + border-radius: 2.5rem; + +} + +.new-plant-text { + color: white +} + +.plant-container { + display: flex; + flex-wrap: wrap; +} + +.health-wrap { + display: block; + width: 11.25rem; + height: 100vh; + border-radius: 2.5rem; + background-color: #FFEA17; + align-items: center; + align-content: center; +} + +.health-container { + display: flex; + flex-wrap: wrap; + align-items: center; + align-content: center; + justify-content: center; +} + +.new-health { + width: 11.25rem; + height: 3.5625rem; + border-radius: 2.5rem; + background-color: #FFBF00; + margin: 1.25rem; + color: white; + font-size: large; + font-weight: 750; +} + +.health-header { + width: 11.25rem; + height: 3.5625rem; + border-radius: 2.5rem; + background-color: #FFBF00; + border: none; + color: white; + font-size: large; + font-weight: 750; + vertical-align: top; + +} \ No newline at end of file diff --git a/ui-subsystem/src/components/Landing.js b/ui-subsystem/src/components/Landing.js new file mode 100644 index 0000000000000000000000000000000000000000..6b37675e593f652f521f2b3c0bc7ac8b1a177369 --- /dev/null +++ b/ui-subsystem/src/components/Landing.js @@ -0,0 +1,71 @@ +import React, {useState, useEffect} from 'react'; +import './Landing.css'; + + +function Landing() { + const [plants,setPlants] = useState([]); + const [healths, setHealths] = useState([]); // fill this later w actual data + + const loadPlant = () => { + const newPlant = ( + <div className='new-plant'> + New Plant {plants.length + 1} + </div> + ); + + const newHealth = ( + <div className='new-health'> + New Health {healths.length + 1} + </div> + ); + + setPlants([...plants, newPlant]); + setHealths([...healths, newHealth]) + }; + + + + return ( + <div className='bg'> + <div className='container'> + <div className='param-wrap'> + <div className='title'> + <p>Green Your World</p> + <p>One Drop at a Time!</p> + </div> + <div className='split-container'> + <div className='options-bg'> + <div className='options-container'> + <div className='options'> + <button className='add-plant-btn' onClick={loadPlant}>Add Plant</button> + <p className='options-text'>Max Water Usage</p> + <p className='options-text'>Min Moisture Level</p> + <p className='options-text'>Watering Hours</p> + </div> + </div> + <div className='plant-container'> + {plants.map((plant, index) => ( + <div key = {index}>{plant}</div> + ))} + </div> + </div> + + <div className='health-wrap'> + <p className='health-header'>Plant Health</p> + <div className='health-container'> + {healths.map((health, index) => ( + <div key = {index}>{health}</div> + ))} + </div> + </div> + </div> + + </div> + + </div> + + </div> + ) +} + +export default Landing; \ No newline at end of file