Initial commit

Signed-off-by: shivennarang <[email protected]>
abhay-raj19 · Jun 16, 2024 · d9d9a6a · d9d9a6a
1 parent 58fdd0b
commit d9d9a6a
Show file tree

Hide file tree

Showing 10 changed files with 3,282 additions and 13,603 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "dev":"vite"
+    "dev": "vite"
   },
   "eslintConfig": {
     "extends": [
@@ -53,5 +53,9 @@
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.2.11",
     "esbuild": "^0.15.0"
-  }
+  },
+  "description": "<h1 align=\"center\">🏋🏽FitBody🏋🏽</h1>\r <p align=\"center\">\r <div align=\"center\">\r <img src=\"https://forthebadge.com/images/badges/built-with-love.svg\" />\r <img src=\"https://forthebadge.com/images/badges/uses-brains.svg\" />\r <img src=\"https://forthebadge.com/images/badges/powered-by-responsibility.svg\" />\r    <br>\r    <img src=\"https://img.shields.io/github/repo-size/abhay-raj19/FitBody?style=for-the-badge\" />\r    <img src=\"https://img.shields.io/github/issues/abhay-raj19/FitBody?style=for-the-badge\" />\r    <img src=\"https://img.shields.io/github/issues-closed-raw/abhay-raj19/FitBody?style=for-the-badge\" />\r     <img src=\"https://img.shields.io/github/license/abhay-raj19/FitBody?style=for-the-badge\" />",
+  "main": "vite.config.js",
+  "author": "",
+  "license": "ISC"
 }
diff --git a/server/package.json b/server/package.json
@@ -1,7 +1,6 @@
 {
   "name": "server",
   "version": "1.0.0",
-  "description": "",
   "main": "index.js",
   "type": "module",
   "scripts": {
@@ -21,5 +20,6 @@
     "mongoose": "^8.3.4",
     "nodemon": "^3.1.0",
     "zod": "^3.23.8"
-  }
+  },
+  "description": ""
 }
diff --git a/src/App.css b/src/App.css
@@ -23,12 +23,14 @@
 .light-mode-app {
   background-color: #f7f7f7;
   color: #333;
+  height:100vh;
 }
 
 /* Styles for dark mode */
 .dark-mode-app {
   background-color:#111;
-   color:#f7f7f7
+   color:#f7f7f7;
+   height:100vh;
 }
 
 @media (max-width: 768px) {

diff --git a/src/App.jsx b/src/App.jsx
@@ -18,6 +18,7 @@ import Licensing from "./components/UI/Licensing";
 import TermsAndConditions from "./components/UI/termsandconditions";
 import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
 import Error from "./components/UI/Error";
+import Register from "./components/UI/Register";
 
 
 
@@ -54,6 +55,7 @@ function App() {
           <Route path="/privacypolicy" element={<PrivacyPolicy />} />
           <Route path="/licensing" element={<Licensing />} />
           <Route path="/termsandconditions" element={<TermsAndConditions />} />
+          <Route path="/register" element={<Register/>} />
           <Route path="*" element={<Error />} />
         </Routes>
       </Router>

diff --git a/src/assets/img/exercise.avif b/src/assets/img/exercise.avif
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,14 +1,14 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import "../../styles/header.css";
 import logo from "../../assets/img/dumble.png";
-import { useEffect, useState } from "react";
 import gsap from "gsap";
+import { NavLink } from "react-router-dom";
 import { useGSAP } from "@gsap/react";
 gsap.registerPlugin(useGSAP);
 
 const nav__links = [
 	{
-		path: "#home",
+		path: "/",
 		display: "Home",
 	},
 	{
@@ -28,6 +28,7 @@ const nav__links = [
 		display: "Contact Us",
 	},
 ];
+
 const Header = ({ isDarkMode, setDarkMode }) => {
 	const [open, setOpen] = useState(false);
 	const [headerBackground, setHeaderBackground] = useState(
@@ -71,16 +72,21 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 		};
 	}, [isDarkMode]);
 
-	const handleClick = (e) => {
+	const handleClick = (e, path) => {
 		e.preventDefault();
 
-		const targetAttr = e.target.getAttribute("href");
-		const location = document.querySelector(targetAttr).offsetTop;
-
-		window.scrollTo({
-			left: 0,
-			top: location - 80,
-		});
+		if (path === "/") {
+			window.scrollTo({
+				left: 0,
+				top: 0,
+			});
+		} else {
+			const location = document.querySelector(path).offsetTop;
+			window.scrollTo({
+				left: 0,
+				top: location - 80,
+			});
+		}
 		toggleMobileMenu();
 	};
 
@@ -110,7 +116,7 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 							</div>
 							<div className="icon_logo">
 								<h2>
-									<a href="/">FitBody</a>
+									<NavLink to="/">FitBody</NavLink>
 								</h2>
 							</div>
 							<div
@@ -146,25 +152,33 @@ const Header = ({ isDarkMode, setDarkMode }) => {
 							<ul className="menu">
 								{nav__links.map((item, index) => (
 									<li className="nav_item" key={index}>
-										<a
-											onClick={handleClick}
-											href={item.path}
-										>
-											{item.display}
-										</a>
+										{item.path === "/" ? (
+											<NavLink
+
+												to="/"
+											>
+												{item.display}
+											</NavLink>
+										) : (
+											<a
+												onClick={(e) =>
+													handleClick(e, item.path)
+												}
+												href={item.path}
+											>
+												{item.display}
+											</a>
+										)}
 									</li>
 								))}
 							</ul>
 						</div>
 
 						{/* Nav Right */}
 
-						<div className="nav_right">
+						<NavLink to="/register"><div className="nav_right">
 							<button className="register_btn">Register</button>
-							{/* <span className="mobile__menu">
-                <i className="ri-menu-line"></i>
-              </span> */}
-						</div>
+						</div></NavLink>
 					</div>
 				</div>
 			</div>

diff --git a/src/components/UI/Register.jsx b/src/components/UI/Register.jsx
@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+
+import logo from "../../assets/img/exercise.avif"; // Correct import statement
+import "../../styles/register.css";
+import Header from "../Header/Header";
+
+function Register() {
+  const [isDarkMode, setDarkMode] = useState(false);
+  return (
+    <div
+      className={
+        isDarkMode ? "dark-mode-app background" : "light-mode-app background"
+      }
+    >
+        <Header
+        className="header" isDarkMode={isDarkMode} setDarkMode={setDarkMode}/>
+      <div className="outerDiv">
+        <div className="innerDiv1">
+          <img src={logo} alt="Logo" className="img"/>
+        </div>
+        <div className="innerDiv2">
+          <div className="txt">Create Account</div>
+          <div className="btns">
+            <div className="btn">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                x="0px"
+                y="0px"
+                width="30"
+                height="30"
+                viewBox="0 0 48 48"
+              >
+                <path
+                  fill="#FFC107"
+                  d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+                ></path>
+                <path
+                  fill="#FF3D00"
+                  d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+                ></path>
+                <path
+                  fill="#4CAF50"
+                  d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+                ></path>
+                <path
+                  fill="#1976D2"
+                  d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+                ></path>
+              </svg>
+              <div>Continue With Google</div>
+            </div>
+            <div className="btn">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                x="0px"
+                y="0px"
+                width="30"
+                height="30"
+                viewBox="0 0 48 48"
+              >
+                <path
+                  fill="#039be5"
+                  d="M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z"
+                ></path>
+                <path
+                  fill="#fff"
+                  d="M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z"
+                ></path>
+              </svg>
+              <div>Continue With Facebook</div>
+            </div>
+          </div>
+          <div className="lines">
+            <div className="line"></div>
+            <div>or</div>
+            <div className="line"></div>
+          </div>
+          <div className="input-container">
+            <input type="email" placeholder=" " id="email" />
+            <label htmlFor="email">E-mail address</label>
+          </div>
+          <div className="input-container">
+            <input type="text" placeholder=" " id="name" />
+            <label htmlFor="name">Full Name</label>
+          </div>
+          <div className="input-container">
+            <input type="password" placeholder=" " id="password" />
+            <label htmlFor="password">Password</label>
+          </div>
+          <div className="input-container">
+            <input type="password" placeholder=" " id="password" />
+            <label htmlFor="password">Confirm Password</label>
+          </div>
+
+          <button class="account" role="button">
+            Create Account
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Register;
diff --git a/src/styles/Classes.css b/src/styles/Classes.css
@@ -3,13 +3,15 @@
   background-color: #f7f7f7; /* Light mode background color */
   color: #333333; /* Light mode text color */
   transition: 0.3s ease-in;
+  height: 100vh;
 }
 
 /* Dark mode styles */
 .dark-mode-app {
   background-color: #121212; /* Dark mode background color */
   color: #ffffff; /* Dark mode text color */
   transition: 0.3s ease-in;
+  height:100vh;
 }
 
 /* Common styles */