diff --git a/frontend/web-app/public/index.html b/frontend/web-app/public/index.html index aa069f2..40f9469 100644 --- a/frontend/web-app/public/index.html +++ b/frontend/web-app/public/index.html @@ -24,6 +24,10 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + + React App diff --git a/frontend/web-app/src/App.tsx b/frontend/web-app/src/App.tsx index 40a1860..5a1f320 100644 --- a/frontend/web-app/src/App.tsx +++ b/frontend/web-app/src/App.tsx @@ -1,5 +1,6 @@ import React from 'react'; import RouterProvider from './Components/Router'; +import './Styles/global.css' function App() { return ( diff --git a/frontend/web-app/src/Components/AddNewPlantCard.tsx b/frontend/web-app/src/Components/AddNewPlantCard.tsx new file mode 100644 index 0000000..d5762f9 --- /dev/null +++ b/frontend/web-app/src/Components/AddNewPlantCard.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import '../Styles/custom/addNewPlantCard.css' + +function AddNewPlantCard() { + return ( +
+
+ Add a new plant +
+
+ + +
+
+ ) +} + +export default AddNewPlantCard \ No newline at end of file diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx index 5289f58..23dda15 100644 --- a/frontend/web-app/src/Components/NavBar.tsx +++ b/frontend/web-app/src/Components/NavBar.tsx @@ -1,17 +1,42 @@ -import React from 'react' -import { Link, Outlet } from 'react-router-dom'; +import React, { useMemo } from 'react' +import { Link, Outlet, useLocation } from 'react-router-dom'; +import '../Styles/custom/navBar.css' function NavBar() { - return ( -
-
- Home - About - FAQ -
- -
- ) + + const location = useLocation(); + + const pageArray = useMemo(() => { + return [ + { + name: 'Home', + path: '/', + }, + { + name: 'About', + path: '/about', + }, + { + name: 'FAQ', + path: '/faq', + } + ] + }, []) + + return ( + <> +
+
Sproutly
+
+ {pageArray.map((page, index)=>{ + return {page.name} + })} +
+ +
+ + + ) }; export default NavBar; \ No newline at end of file diff --git a/frontend/web-app/src/Components/PlantCard.tsx b/frontend/web-app/src/Components/PlantCard.tsx new file mode 100644 index 0000000..b43d915 --- /dev/null +++ b/frontend/web-app/src/Components/PlantCard.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import '../Styles/custom/plantCard.css' +import dummyImage from '../Images/dummy-image.png' + +function PlantCard({status}: {status: string}) { + return ( +
+ {status==='dry'?
Water Me!
: null} + Error Img +
+
+ Name: Red Rose +
+
+ Status: Good +
+
+ Last Watered: 3:15 pm on 2/6/2025 +
+
+
+ ) +} + +export default PlantCard \ No newline at end of file diff --git a/frontend/web-app/src/Images/display-1.png b/frontend/web-app/src/Images/display-1.png new file mode 100644 index 0000000..942a13d Binary files /dev/null and b/frontend/web-app/src/Images/display-1.png differ diff --git a/frontend/web-app/src/Images/display-2.png b/frontend/web-app/src/Images/display-2.png new file mode 100644 index 0000000..55b227b Binary files /dev/null and b/frontend/web-app/src/Images/display-2.png differ diff --git a/frontend/web-app/src/Images/display-3.png b/frontend/web-app/src/Images/display-3.png new file mode 100644 index 0000000..d8cb5fd Binary files /dev/null and b/frontend/web-app/src/Images/display-3.png differ diff --git a/frontend/web-app/src/Images/error-1.png b/frontend/web-app/src/Images/error-1.png new file mode 100644 index 0000000..632d8f5 Binary files /dev/null and b/frontend/web-app/src/Images/error-1.png differ diff --git a/frontend/web-app/src/Images/faq-1.png b/frontend/web-app/src/Images/faq-1.png new file mode 100644 index 0000000..43e6386 Binary files /dev/null and b/frontend/web-app/src/Images/faq-1.png differ diff --git a/frontend/web-app/src/Images/rose.png b/frontend/web-app/src/Images/rose.png new file mode 100644 index 0000000..83b8ffd Binary files /dev/null and b/frontend/web-app/src/Images/rose.png differ diff --git a/frontend/web-app/src/Images/sproutly-logo.svg b/frontend/web-app/src/Images/sproutly-logo.svg new file mode 100644 index 0000000..11381b0 --- /dev/null +++ b/frontend/web-app/src/Images/sproutly-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/frontend/web-app/src/Images/sproutly-text.svg b/frontend/web-app/src/Images/sproutly-text.svg new file mode 100644 index 0000000..073f04c --- /dev/null +++ b/frontend/web-app/src/Images/sproutly-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/web-app/src/Pages/HomePage.tsx b/frontend/web-app/src/Pages/HomePage.tsx index a580b38..9e3dc36 100644 --- a/frontend/web-app/src/Pages/HomePage.tsx +++ b/frontend/web-app/src/Pages/HomePage.tsx @@ -1,5 +1,8 @@ import React, { useEffect } from 'react' import authController from '../Controller/AuthController' +import '../Styles/custom/homePage.css' +import PlantCard from '../Components/PlantCard' +import AddNewPlantCard from '../Components/AddNewPlantCard' function HomePage() { // example of using APIs @@ -17,7 +20,19 @@ function HomePage() { }, []) return ( -
HomePage
+
+
Vy's Plants
+
+ + + + + + + + +
+
) } diff --git a/frontend/web-app/src/Styles/custom/addNewPlantCard.css b/frontend/web-app/src/Styles/custom/addNewPlantCard.css new file mode 100644 index 0000000..04a8ce5 --- /dev/null +++ b/frontend/web-app/src/Styles/custom/addNewPlantCard.css @@ -0,0 +1,27 @@ +.addNewPlantCard{ + height: 532px; + width: 356px; + border-radius: 18px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #E6F2D7; +} + + +.addNewPlantCard-text{ + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 25px; + line-height: 37px; + margin-bottom: 22px; +} + +.addNewPlantCard-icon{ + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 100px; + line-height: 100px; +} + diff --git a/frontend/web-app/src/Styles/custom/homePage.css b/frontend/web-app/src/Styles/custom/homePage.css new file mode 100644 index 0000000..b478d47 --- /dev/null +++ b/frontend/web-app/src/Styles/custom/homePage.css @@ -0,0 +1,23 @@ +/* Home Page CSS */ + +.homePage{ + display: flex; + flex-direction: column; + padding: 44px 82px 94px 82px; +} + +.nameBar{ + font-family: "Poppins", serif; + font-size: 42px; + font-weight: 800; + color: #4C5740; +} + +.plantViewer{ + padding-top: 31px; + display: grid; + justify-content: center; + grid-template-columns: auto auto auto auto; + row-gap: 30px; + column-gap: 24px; +} \ No newline at end of file diff --git a/frontend/web-app/src/Styles/custom/navBar.css b/frontend/web-app/src/Styles/custom/navBar.css new file mode 100644 index 0000000..338bc6e --- /dev/null +++ b/frontend/web-app/src/Styles/custom/navBar.css @@ -0,0 +1,42 @@ +/* NavBar CSS */ + +.navbar { + display: flex; + flex-direction: row; + justify-content: space-between; + height: 72px; + align-items: center; + padding-left: 50px; + padding-right: 50px; + background-color: #AFD582; +} + +.navbar > *{ + font-family: "Poppins", serif; + font-weight: 1000; + text-decoration: none; + color: #4C5740; +} + +.navbar-link-container{ + width: 30%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.navbar-link{ + text-decoration: none; + color: #4C5740; +} + +.navbar-login-logout-button{ + height: 41.5px; + background-color: #E6F2D7; + display: flex; + line-height: 41.5px; + padding-left: 26px; + padding-right: 26px; + border-radius: 15px; + border-color: #E6F2D7; +} \ No newline at end of file diff --git a/frontend/web-app/src/Styles/custom/plantCard.css b/frontend/web-app/src/Styles/custom/plantCard.css new file mode 100644 index 0000000..667d539 --- /dev/null +++ b/frontend/web-app/src/Styles/custom/plantCard.css @@ -0,0 +1,58 @@ +/* Plant Card CSS */ + +.plantCard{ + height: 532px; + width: 356px; + border-radius: 18px; + display: flex; + flex-direction: column; + align-items: center; +} + +.good{ + background-color: #E6F2D7; +} + +.dry{ + background-color: #F2DDD7; +} + +.plantCard-image{ + height: 326px; + width: 302px; + border-radius: 15px; + margin-top: 23px; +} + +.plantCard-detail{ + width: 302px; + height: 133px; + margin-top: 15px; +} + +.plantCard-detail > *{ + font-family: 'Poppins', sans-serif; + font-weight: 400; + font-size: 23px; + line-height: 34px; +} + +.plantCard-dry-status-indicator{ + background-color: #7CD1F0; + width: 150px; + height: 47px; + border-radius: 23px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + margin-top: 11px; + margin-left: 192px; +} + +.plantCard-dry-status-indicator > * { + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 23px; + line-height: 34px; +} diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css index 538abe8..7e91d1c 100644 --- a/frontend/web-app/src/Styles/global.css +++ b/frontend/web-app/src/Styles/global.css @@ -1 +1,15 @@ /* Global CSS */ + +html, body, #root, .App { + height: 100%; + width: 100%; + margin: 0px; +} + +body{ + overflow: scroll; +} + +.text-white{ + color: #FFFFFF; +}