diff --git a/.vscode/c_cpp_properties.json b/.vscode/c_cpp_properties.json new file mode 100644 index 0000000..87c564b --- /dev/null +++ b/.vscode/c_cpp_properties.json @@ -0,0 +1,20 @@ +{ + "configurations": [ + { + "name": "Mac", + "includePath": [ + "${workspaceFolder}/**" + ], + "defines": [], + "macFrameworkPath": [ + "/System/Library/Frameworks", + "/Library/Frameworks" + ], + "compilerPath": "/usr/bin/clang", + "cStandard": "c11", + "cppStandard": "c++98", + "intelliSenseMode": "macos-clang-x64" + } + ], + "version": 4 +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 01dc13a..930056f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4321,6 +4321,22 @@ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==" }, + "cookie-parser": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.6.tgz", + "integrity": "sha512-z3IzaNjdwUC2olLIB5/ITd0/setiaFMLYiZJle7xg5Fe9KWAceil7xszYfHHBtDFYLSgJduS2Ty0P1uJdPDJeA==", + "requires": { + "cookie": "0.4.1", + "cookie-signature": "1.0.6" + }, + "dependencies": { + "cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==" + } + } + }, "cookie-signature": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", @@ -6428,6 +6444,51 @@ } } }, + "express-session": { + "version": "1.17.2", + "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.17.2.tgz", + "integrity": "sha512-mPcYcLA0lvh7D4Oqr5aNJFMtBMKPLl++OKKxkHzZ0U0oDq1rpKBnkR5f5vCHR26VeArlTOEF9td4x5IjICksRQ==", + "requires": { + "cookie": "0.4.1", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~2.0.0", + "on-headers": "~1.0.2", + "parseurl": "~1.3.3", + "safe-buffer": "5.2.1", + "uid-safe": "~2.1.5" + }, + "dependencies": { + "cookie": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz", + "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==" + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", + "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" + } + } + }, "ext": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz", @@ -6725,6 +6786,11 @@ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -12408,6 +12474,11 @@ "performance-now": "^2.1.0" } }, + "random-bytes": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz", + "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs=" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -14904,6 +14975,14 @@ "is-typedarray": "^1.0.0" } }, + "uid-safe": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz", + "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==", + "requires": { + "random-bytes": "~1.0.0" + } + }, "unbox-primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", diff --git a/package.json b/package.json index 557c027..7952101 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,11 @@ "@testing-library/user-event": "^12.8.3", "axios": "^0.26.0", "body-parser": "^1.19.0", + "cookie-parser": "^1.4.6", "cors": "^2.8.5", "express": "^4.17.1", + "express-session": "^1.17.2", + "font-awesome": "^4.7.0", "mysql": "^2.18.1", "path": "^0.12.7", "react": "^17.0.2", diff --git a/src/App.js b/src/App.js index 8f0207a..3c69a05 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,4 @@ +import Account from "./Pages/AccountPage/AccountPage"; import React, { useEffect, useState } from "react"; import Registration from "./Pages/RegistrationPage/RegistrationPage"; import Home from "./Pages/HomePage/HomePage" diff --git a/src/GeneralStyles.css b/src/GeneralStyles.css index 72aab57..bfa75bb 100644 --- a/src/GeneralStyles.css +++ b/src/GeneralStyles.css @@ -1,7 +1,7 @@ button { border: none; margin-left: 1%; - background-color: rgb(102, 255, 0); + background-color: lightseagreen; border-radius: 10px; } diff --git a/src/Pages/AccountPage/AccountPage.css b/src/Pages/AccountPage/AccountPage.css new file mode 100644 index 0000000..57857a4 --- /dev/null +++ b/src/Pages/AccountPage/AccountPage.css @@ -0,0 +1,170 @@ +@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); +} + +.nav { + background-color: grey; + height: 30px; +} +.a{ + color: white; + margin-right: 2em; + text-decoration: none; + +} +.container{ + max-width: 700px; + width: 100%; + background-color: #fff; + padding: 25px 30px; + border-radius: 5px; + 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: absolute; + left: auto; + bottom: auto; + height: 3px; + width: 30px; + border-radius: 5px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} +.content form .user-details{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} +div.positioning{ + margin-left: auto; + margin-right: auto; + width: 8em +} +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, #9b59b6); + } + form .button input:hover{ + /* transform: scale(0.99); */ + background: linear-gradient(-135deg, #71b7e6, #9b59b6); + } + @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; + + } +} diff --git a/src/Pages/AccountPage/AccountPage.js b/src/Pages/AccountPage/AccountPage.js new file mode 100644 index 0000000..a637c91 --- /dev/null +++ b/src/Pages/AccountPage/AccountPage.js @@ -0,0 +1,52 @@ +import { useState } from "react"; +import "./AccountPage.css" +import Axios from "axios"; +import { useHistory } from "react-router-dom"; + + + +function getAccountInformation() { + +return ( + +
+
Profile
+
+
+
+
+ Full Name + +
+
+ Username + +
+
+ Email + +
+
+ Phone Number + +
+
+ Password + +
+
+ Confirm Password + +
+
+
+ +
+
+
+
+ +); + + } +export default getAccountInformation; diff --git a/src/Pages/RegistrationPage/RegistrationPage.css b/src/Pages/RegistrationPage/RegistrationPage.css index 291bd12..9dc82a8 100644 --- a/src/Pages/RegistrationPage/RegistrationPage.css +++ b/src/Pages/RegistrationPage/RegistrationPage.css @@ -1,11 +1,23 @@ +div.page-background{ + position: fixed; + background-image:url("../../images/oceanimagedesktop.jpg"); + background-blend-mode: soft-light; + background-size: cover; + opacity: 95%; + height: 100% !important; + width: 100% !important; + } + .information { + position: relative; display: flex; - min-height: 100vh; - width: 100%; + height: 88%; + left: 40%; + top: 2%; + width: 300px; flex-direction: column; justify-content: center; align-items: center; - background-color: aqua; } .information input { diff --git a/src/Pages/RegistrationPage/RegistrationPage.js b/src/Pages/RegistrationPage/RegistrationPage.js index 2229dbe..3f492d0 100644 --- a/src/Pages/RegistrationPage/RegistrationPage.js +++ b/src/Pages/RegistrationPage/RegistrationPage.js @@ -47,51 +47,53 @@ function Registration() { }; return ( -
- - { - setUsername(event.target.value); - }} - /> - - { - setPassword(event.target.value); - }} - /> - - { - setEmail(event.target.value); - }} - /> - - { - setAddress(event.target.value); - }} - /> - - { - setFirstname(event.target.value); - }} - /> - - { - setLastname(event.target.value); - }} - /> - - { - setPhone(event.target.value); - }} - /> - -

{registrationStatus}

+
+
+ + { + setUsername(event.target.value); + }} + /> + + { + setPassword(event.target.value); + }} + /> + + { + setEmail(event.target.value); + }} + /> + + { + setAddress(event.target.value); + }} + /> + + { + setFirstname(event.target.value); + }} + /> + + { + setLastname(event.target.value); + }} + /> + + { + setPhone(event.target.value); + }} + /> + +

{registrationStatus}

+
); } diff --git a/src/Pages/SignInPage/SignInPage.css b/src/Pages/SignInPage/SignInPage.css index 62ef674..f2a6d83 100644 --- a/src/Pages/SignInPage/SignInPage.css +++ b/src/Pages/SignInPage/SignInPage.css @@ -1,11 +1,24 @@ +div.page-background{ + position: fixed; + background-image:url("../../images/oceanimagedesktop.jpg"); + background-blend-mode: soft-light; + background-size: cover; + height: 100% !important; + width: 100% !important; +} + .signin-wrapper { + position: fixed; display: flex; flex-direction: column; - width: 100%; + width: 350px; + height: 350px; + left: 39%; + top: 25%; justify-content: center; align-items: center; - background-color: aqua; - min-height: 100vh; + + min-height: 300px; } .signin-wrapper input { @@ -20,4 +33,4 @@ width: 320px; height: 50px; margin-top: 15px; -} \ No newline at end of file +} diff --git a/src/Pages/SignInPage/SignInPage.js b/src/Pages/SignInPage/SignInPage.js index b946cca..8b4ac81 100644 --- a/src/Pages/SignInPage/SignInPage.js +++ b/src/Pages/SignInPage/SignInPage.js @@ -41,28 +41,30 @@ function SignIn() { }, []) return ( -
-
-

Sign In

- { - setUsername(e.target.value); - }} - /> - - { - setPassword(e.target.value); - }} - /> -
- +
+
+
+

Sign In

+ { + setUsername(e.target.value); + }} + /> + + { + setPassword(e.target.value); + }} + /> +
+ +
+

{loginStatus}

-

{loginStatus}

); diff --git a/src/images/oceanimagedesktop.jpg b/src/images/oceanimagedesktop.jpg new file mode 100644 index 0000000..9b65bf7 Binary files /dev/null and b/src/images/oceanimagedesktop.jpg differ