diff --git a/public/index.html b/public/index.html index aa069f2..dfd3157 100644 --- a/public/index.html +++ b/public/index.html @@ -2,14 +2,14 @@ - + - + - React App + WorldWide Frames diff --git a/public/logo123.ico b/public/logo123.ico new file mode 100644 index 0000000..f741ca2 Binary files /dev/null and b/public/logo123.ico differ diff --git a/public/logo123.jpg b/public/logo123.jpg new file mode 100644 index 0000000..df23036 Binary files /dev/null and b/public/logo123.jpg differ diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..0a1ac90 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,20 +1,20 @@ { - "short_name": "React App", + "short_name": "WorldWide Frames", "name": "Create React App Sample", "icons": [ { - "src": "favicon.ico", + "src": "logo123.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { - "src": "logo192.png", - "type": "image/png", + "src": "logo123.jpg", + "type": "image/jpg", "sizes": "192x192" }, { - "src": "logo512.png", - "type": "image/png", + "src": "logo523.jpg", + "type": "image/jpg", "sizes": "512x512" } ], diff --git a/src/App.js b/src/App.js index b7e3188..329b384 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,6 @@ import Product from "./Pages/ProductPage/ProductPage" import Login from "./Pages/SignInPage/SignInPage" import Cart from "./Pages/ShoppingCart/ShoppingCart" import Account from "./Pages/AccountPage/AccountPage" - import "./GeneralStyles.css"; import "./App.css" import home from "../src/images/homebutton.png" diff --git a/src/Pages/AccountPage/AccountPage.css b/src/Pages/AccountPage/AccountPage.css index cc6aa0c..94225c8 100644 --- a/src/Pages/AccountPage/AccountPage.css +++ b/src/Pages/AccountPage/AccountPage.css @@ -1,27 +1,21 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); -.body{ - /* height: 500%; - width:500%; */ - display: flex; - justify-content: center; - align-items: center; - padding: 100px; - background: linear-gradient(135deg, #71b7e6, #9b59b6); +body { + background-image: url("../../images/oceanimagedesktop.jpg"); } .nav { background-color: grey; height: 30px; } -.a{ - + +.a { color: white; margin-right: 2em; text-decoration: none; - } -.container{ + +.container { position: fixed; left: 25%; margin-top: 5%; @@ -31,42 +25,45 @@ padding: 25px 30px; border-radius: 10px; border: blue; - box-shadow: 0 5px 10px rgba(0,0,0,0.15); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); } -.container .title{ + +.container .title { font-size: 25px; font-weight: 500; position: relative; } -.container .title::before{ + +.container .title::before { content: ""; - position: absolute; + position: fixed; left: auto; bottom: auto; height: 3px; width: 30px; border-radius: 5px; - background: linear-gradient(135deg, #71b7e6, #9b59b6); + background: linear-gradient(135deg, #71b7e6, #314fa1); } -.content form .user-details{ + +.content form .user-details { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0 12px 0; } -.positioning{ - width: 8em; -} -form .user-details .input-box{ + +form .user-details .input-box { margin-bottom: 15px; width: calc(100% / 2 - 20px); } -form .input-box span.details{ + +form .input-box span.details { display: block; font-weight: 500; margin-bottom: 20px; } -.user-details .input-box input{ + +.user-details .input-box input { height: 45px; width: 100%; outline: none; @@ -77,26 +74,31 @@ form .input-box span.details{ border-bottom-width: 2px; transition: all 0.3s ease; } + .user-details .input-box input:focus, -.user-details .input-box input:valid{ +.user-details .input-box input:valid { border-color: #9b59b6; } - form .gender-details .gender-title{ + +form .gender-details .gender-title { font-size: 20px; font-weight: 500; - } - form .category{ - display: flex; - width: 80%; - margin: 14px 0 ; - justify-content: space-between; - } - form .category label{ - display: flex; - align-items: center; - cursor: pointer; - } - form .category label .dot{ +} + +form .category { + display: flex; + width: 80%; + margin: 14px 0; + justify-content: space-between; +} + +form .category label { + display: flex; + align-items: center; + cursor: pointer; +} + +form .category label .dot { height: 18px; width: 18px; border-radius: 50%; @@ -105,58 +107,69 @@ form .input-box span.details{ border: 5px solid transparent; transition: all 0.3s ease; } - #dot-1:checked ~ .category label .one, - #dot-2:checked ~ .category label .two, - #dot-3:checked ~ .category label .three{ - background: #9b59b6; - border-color: #d9d9d9; - } - form .input[type="radio"]{ - display: none; - } - form .button{ - height: 45px; - margin: 35px 0 - } - form .button input{ - height: 100%; - width: 100%; - border-radius: 5px; - border: none; - color: rgb(229, 236, 238); - font: bold; - font-size: 18px; - font-weight: 500; - letter-spacing: 1px; - cursor: pointer; - transition: all 0.3s ease; - background: linear-gradient(135deg, #71b7e6, #9b59b6); - } - form .button input:hover{ + +#dot-1:checked~.category label .one, +#dot-2:checked~.category label .two, +#dot-3:checked~.category label .three { + background: #9b59b6; + border-color: #d9d9d9; +} + +form .input[type="radio"] { + display: none; +} + +form .button { + height: 45px; + margin: 35px 0 +} + +form .button input { + height: 100%; + width: 100%; + border-radius: 5px; + border: none; + color: rgb(229, 236, 238); + font: bold; + font-size: 18px; + font-weight: 500; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg, #71b7e6, #314fa1); +} + +form .button input:hover { /* transform: scale(0.99); */ - background: linear-gradient(-135deg, #71b7e6, #9b59b6); - } - @media(max-width: 584px){ - .container{ - max-width: 100%; + background: linear-gradient(-135deg, #71b7e6, #314fa1); } -form .user-details .input-box{ + +@media(max-width: 584px) { + .container { + max-width: 100%; + } + + form .user-details .input-box { margin-bottom: 15px; width: 100%; } - form .category{ + + form .category { width: 100%; } - .content form .user-details{ + + .content form .user-details { max-height: 300px; overflow-y: scroll; } - .user-details::-webkit-scrollbar{ + + .user-details::-webkit-scrollbar { width: 5px; } - } - @media(max-width: 459px){ - .container .content .category{ +} + +@media(max-width: 459px) { + .container .content .category { flex-direction: column; } @@ -167,4 +180,4 @@ form .user-details .input-box{ color: red !important; } -} +} \ No newline at end of file diff --git a/src/Pages/AccountPage/AccountPage.js b/src/Pages/AccountPage/AccountPage.js index a637c91..a841d19 100644 --- a/src/Pages/AccountPage/AccountPage.js +++ b/src/Pages/AccountPage/AccountPage.js @@ -6,47 +6,47 @@ import { useHistory } from "react-router-dom"; function getAccountInformation() { - -return ( - -
-
Profile
-
-
-
-
- Full Name - -
-
- Username - -
-
- Email - -
-
- Phone Number - -
-
- Password - -
-
- Confirm Password - -
-
-
- + + return ( + +
+
Profile
+
+ +
+
+ First Name + +
+
+ Last Name + +
+
+ Username + +
+
+ Email + +
+
+ Phone Number + +
+
+ Address + +
+
+
+ +
+
- -
-
- -); +
+ + ); +} - } export default getAccountInformation; diff --git a/src/Pages/AdminPortal/adminPortal.css b/src/Pages/AdminPortal/adminPortal.css new file mode 100644 index 0000000..94225c8 --- /dev/null +++ b/src/Pages/AdminPortal/adminPortal.css @@ -0,0 +1,183 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + +body { + background-image: url("../../images/oceanimagedesktop.jpg"); +} + +.nav { + background-color: grey; + height: 30px; +} + +.a { + color: white; + margin-right: 2em; + text-decoration: none; +} + +.container { + position: fixed; + left: 25%; + margin-top: 5%; + max-width: 700px; + width: 100%; + background-color: rgb(255, 255, 255); + padding: 25px 30px; + border-radius: 10px; + border: blue; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); +} + +.container .title { + font-size: 25px; + font-weight: 500; + position: relative; +} + +.container .title::before { + content: ""; + position: fixed; + left: auto; + bottom: auto; + height: 3px; + width: 30px; + border-radius: 5px; + background: linear-gradient(135deg, #71b7e6, #314fa1); +} + +.content form .user-details { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} + +form .user-details .input-box { + margin-bottom: 15px; + width: calc(100% / 2 - 20px); +} + +form .input-box span.details { + display: block; + font-weight: 500; + margin-bottom: 20px; +} + +.user-details .input-box input { + height: 45px; + width: 100%; + outline: none; + font-size: 16px; + border-radius: 5px; + padding-left: 15px; + border: 1px solid black; + border-bottom-width: 2px; + transition: all 0.3s ease; +} + +.user-details .input-box input:focus, +.user-details .input-box input:valid { + border-color: #9b59b6; +} + +form .gender-details .gender-title { + font-size: 20px; + font-weight: 500; +} + +form .category { + display: flex; + width: 80%; + margin: 14px 0; + justify-content: space-between; +} + +form .category label { + display: flex; + align-items: center; + cursor: pointer; +} + +form .category label .dot { + height: 18px; + width: 18px; + border-radius: 50%; + margin-right: 10px; + background-color: #15a05a; + border: 5px solid transparent; + transition: all 0.3s ease; +} + +#dot-1:checked~.category label .one, +#dot-2:checked~.category label .two, +#dot-3:checked~.category label .three { + background: #9b59b6; + border-color: #d9d9d9; +} + +form .input[type="radio"] { + display: none; +} + +form .button { + height: 45px; + margin: 35px 0 +} + +form .button input { + height: 100%; + width: 100%; + border-radius: 5px; + border: none; + color: rgb(229, 236, 238); + font: bold; + font-size: 18px; + font-weight: 500; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg, #71b7e6, #314fa1); +} + +form .button input:hover { + /* transform: scale(0.99); */ + background: linear-gradient(-135deg, #71b7e6, #314fa1); +} + +@media(max-width: 584px) { + .container { + max-width: 100%; + } + + form .user-details .input-box { + margin-bottom: 15px; + width: 100%; + } + + form .category { + width: 100%; + } + + .content form .user-details { + max-height: 300px; + overflow-y: scroll; + } + + .user-details::-webkit-scrollbar { + width: 5px; + } +} + +@media(max-width: 459px) { + .container .content .category { + flex-direction: column; + } + + .nav { + background-color: grey; + height: 30px; + padding-left: 20px; + color: red !important; + + } +} \ No newline at end of file diff --git a/src/Pages/AdminPortal/adminPortal.js b/src/Pages/AdminPortal/adminPortal.js new file mode 100644 index 0000000..f5cfa7c --- /dev/null +++ b/src/Pages/AdminPortal/adminPortal.js @@ -0,0 +1,5 @@ +import { useState } from "react"; +import "./AccountPage.css" +import Axios from "axios"; +import { useHistory } from "react-router-dom"; + diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js index 012eaac..23b8fdd 100644 --- a/src/Pages/SignInPage/SignInPage.js +++ b/src/Pages/SignInPage/SignInPage.js @@ -28,7 +28,6 @@ function SignIn() { window.location.reload(true); history.push("/"); } - }); };