From cad4f06759a64c49954cbe87864cde8b94177769 Mon Sep 17 00:00:00 2001 From: Mastan Sayyad Date: Mon, 24 Jun 2024 04:58:49 +0530 Subject: [PATCH 1/9] Update index.css --- src/index.css | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/index.css b/src/index.css index ac49e1e..b862f3d 100644 --- a/src/index.css +++ b/src/index.css @@ -17,14 +17,24 @@ body { display: none; } ::-webkit-scrollbar { - width: 15px; + width: 7px; +} + +::-webkit-scrollbar:hover { + width: 9px; + } ::-webkit-scrollbar-track { - background: #d1e5ff; + background: #15013c; } ::-webkit-scrollbar-thumb { - background: linear-gradient(#674a97, #8400ff); - border-radius: 10px; + background: linear-gradient(rgb(203, 131, 255), rgb(106, 0, 255)); + border-radius: 7px; +} + +::-webkit-scrollbar-thumb:hover { + background: linear-gradient(rgb(191, 102, 255), rgb(137, 58, 249)); + border-radius: 7px; } \ No newline at end of file From 64ced54b82d8d239ea5a5de6154f3817fd351560 Mon Sep 17 00:00:00 2001 From: Akhila Sunesh <140897461+AkhilaSunesh@users.noreply.github.com> Date: Mon, 24 Jun 2024 12:20:47 +0530 Subject: [PATCH 2/9] done --- src/components/Footer/Footer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index dd614aa..0393d07 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -15,7 +15,7 @@ function Footer() { - + From 0e4f1469d89eaa54acc968c39a806d66d5ae6849 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Tue, 25 Jun 2024 01:13:20 +0530 Subject: [PATCH 3/9] test --- package.json | 6 +- src/components/Navbar/Navbar.jsx | 3 + src/main.jsx | 3 + src/pages/Login/page.jsx | 430 +++++++++++++++++++++++++++++++ 4 files changed, 441 insertions(+), 1 deletion(-) create mode 100644 src/pages/Login/page.jsx diff --git a/package.json b/package.json index 8b15eeb..47892cf 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,9 @@ }, "dependencies": { "@emailjs/browser": "^4.3.3", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.2", + "@hookform/resolvers": "^3.6.0", "@react-three/drei": "^9.106.0", "@react-three/fiber": "^8.16.6", "@tsparticles/all": "^3.4.0", @@ -24,7 +27,8 @@ "react-router-dom": "^6.23.1", "react-scroll": "^1.9.0", "three": "^0.164.1", - "typed.js": "^2.1.0" + "typed.js": "^2.1.0", + "zod": "^3.23.8" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 986c998..a6e6510 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -121,6 +121,9 @@ function Navbar() {
  • ("rem-default " + (isActive ? ' active' : ''))} to="/about">About us
    • +
  • + ("rem-default " + (isActive ? ' active' : ''))} to="/login">AstroAccess +
    • {renderContactLink()} diff --git a/src/main.jsx b/src/main.jsx index ee0b24b..1d1cd6d 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -4,11 +4,13 @@ import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } import './index.css' import App from './App.jsx' import Home from "./pages/Home/Home.jsx" +import Login from './pages/Login/page.jsx' import MarsRover from './pages/MarsRover/MarsRover.jsx' import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx" import About from "./pages/About/About.jsx" import NotFoundPage from "./pages/404 Page/NotfoundPage.jsx" + const router = createBrowserRouter( createRoutesFromElements( }> @@ -16,6 +18,7 @@ const router = createBrowserRouter( } /> } /> } /> + } /> } /> ) diff --git a/src/pages/Login/page.jsx b/src/pages/Login/page.jsx new file mode 100644 index 0000000..5f921c9 --- /dev/null +++ b/src/pages/Login/page.jsx @@ -0,0 +1,430 @@ +"use client"; + +import React, { useState } from 'react'; +import * as z from "zod"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'; + +// Define the form schema using zod +const formSchema = z.object({ + name: z.string().nonempty("*Name is required"), + email: z.string().email("*Invalid email address"), + password: z.string().min(6, "*Password should be at least 6 characters"), +}); + +// Contact form component +export default function SignInSignUp() { + const [type, setType] = useState('signIn'); + const [isSubmitted, setIsSubmitted] = useState(false); + const [isVisible, setIsVisible] = useState(false); + + const signInForm = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + email: "", + password: "" + } + }); + + const signUpForm = useForm({ + resolver: zodResolver(formSchema), + defaultValues: { + name: "", + email: "", + password: "" + } + }); + + // Handle form submission + const handleSignInSubmit = (values) => { + console.log("Sign In:", values); + // Handle form submission (e.g., send data to the server) + setIsSubmitted(true); + signInForm.reset(); + setTimeout(() => setIsSubmitted(false), 3000); // Hide notification after 3 seconds + }; + + const handleSignUpSubmit = (values) => { + console.log("Sign Up:", values); + // Handle form submission (e.g., send data to the server) + setIsSubmitted(true); + signUpForm.reset(); + setTimeout(() => setIsSubmitted(false), 3000); // Hide notification after 3 seconds + }; + + const handleOnClick = (text) => { + if (text !== type) { + setType(text); + } + }; + + const togglePasswordVisibility = () => { + setIsVisible(!isVisible); + }; + + const containerClass = `container ${type === 'signUp' ? 'right-panel-active' : ''}`; + + return React.createElement('div', { className: 'App' }, + React.createElement('style', null, ` + @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); + @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); + + * { + box-sizing: border-box; + } + + body { + background: black; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: 'Montserrat', sans-serif; + height: 100vh; + margin: -20px 0 50px; + } + + + h1 { + font-weight: bold; + margin: 0; + color: darkturquoise; + font-size: 26px; + } + + h2 { + text-align: center; + } + + p { + font-size: 16px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; + } + + span { + font-size: 14px; + color: #333; + } + + a { + color: blue; + font-size: 14px; + text-decoration: none; + margin: 15px 0; + } + + button { + border-radius: 20px; + border: 2px solid yellow; + background-color: darkturquoise; + color: #ffffff; + font-size: 12px; + font-weight: bold; + padding: 12px 45px; + letter-spacing: 1px; + text-transform: uppercase; + transition: transform 80ms ease-in; + } + button:hover { + transform: scale(1.1); + } + + button:active { + transform: scale(0.95); + } + + button:focus { + outline: none; + } + + button.ghost { + background-color: transparent; + border-color: darkturquoise; + } + + form { + background-color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; + border: solid 2px darkturquoise; + + } + + input { + background-color: #eee; + border: dotted 2px darkturquoise; + padding: 12px 15px; + margin: 8px 0; + width: 100%; + color: darkturquoise; + } + + .container { + background-color: #fff; + border-radius: 10px; + border: solid 2px darkturquoise; + box-shadow: 10px 14px 28px rgba(0, 0, 0, 0.25), 10px 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + height: 580px; + width: 1250px; + max-width: 100%; + min-height: 480px; + + } + + .form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; + border: solid 2px darkturquoise; + } + + .eye-button { + position: absolute; + right: -19px; + top: 9px; + background: none; + border: none; + cursor: pointer; + color: darkturquoise; + } + + .sign-in-container { + left: 0; + width: 50%; + z-index: 2; + border: solid 2px darkturquoise; + } + + .container.right-panel-active .sign-in-container { + transform: translateX(100%); + } + + .sign-up-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; + } + + .container.right-panel-active .sign-up-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; + } + + @keyframes show { + 0% { + opacity: 0; + transform: translateX(200%); + } + 100% { + opacity: 1; + transform: translateX(0); + } + } + + .overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; + } + + .container.right-panel-active .overlay-container { + transform: translateX(-100%); + } + + .overlay { + background: #ff416c; + background: -webkit-linear-gradient(to right, #242533, #242533); + background: linear-gradient(to right, #242533, #242533); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #ffffff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; + } + + .container.right-panel-active .overlay { + transform: translateX(50%); + } + + .overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; + } + + .overlay-left { + transform: translateX(-20%); + } + + .container.right-panel-active .overlay-left { + transform: translateX(0); + } + + .overlay-right { + right: 0; + transform: translateX(0); + } + + .container.right-panel-active .overlay-right { + transform: translateX(20%); + } + + /* Styling for social icons */ + .social-container { + display: flex; + justify-content: center; + margin-top: 20px; + } + + .social-container .social { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + width: 50px; + border-radius: 50%; + background-color: darkturquoise; + margin: 0 10px; + font-size: 20px; + color: white; + transition: transform 0.3s ease; + } + + .social-container .social:hover { + transform: scale(1.1); + } + `), + React.createElement('div', { className: containerClass, id: 'container' }, + React.createElement('div', { className: 'form-container sign-up-container' }, + React.createElement('form', { onSubmit: signUpForm.handleSubmit(handleSignUpSubmit) }, + React.createElement('h1', null, 'Create Account'), + React.createElement('div', { className: 'social-container' }, + React.createElement('a', { href: 'https://www.facebook.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-facebook-f' }) + ), + React.createElement('a', { href: 'https://www.google.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-google-plus-g' }) + ), + React.createElement('a', { href: 'https://www.linkedin.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-linkedin-in' }) + ), + React.createElement('a', { href: 'https://www.twitter.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-twitter' }) + ) + ), + React.createElement('br', null), + React.createElement('span', null, 'or use your email for registration'), + React.createElement('input', { type: 'text', placeholder: 'Name', ...signUpForm.register("name") }), + signUpForm.formState.errors.name && ( + React.createElement('p', { className: 'text-darkturquoise' }, signUpForm.formState.errors.name?.message) + ), + React.createElement('input', { type: 'email', placeholder: 'Email', ...signUpForm.register("email") }), + signUpForm.formState.errors.email && ( + React.createElement('p', { className: 'text-darkturquoise' }, signUpForm.formState.errors.email?.message) + ), + React.createElement('div', { style: { position: 'relative', width: '100%' } }, + React.createElement('input', { type: isVisible ? "text" : "password", placeholder: 'Password', ...signUpForm.register("password") }), + React.createElement('button', { type: 'button', className: 'eye-button', onClick: togglePasswordVisibility }, + React.createElement(FontAwesomeIcon, { icon: isVisible ? faEyeSlash : faEye }) + ) + ), + signUpForm.formState.errors.password && ( + React.createElement('p', { className: 'text-darkturquoise' }, signUpForm.formState.errors.password?.message) + ), + React.createElement('button', { type: 'submit' }, 'Sign Up') + ) + ), + React.createElement('div', { className: 'form-container sign-in-container' }, + React.createElement('form', { onSubmit: signInForm.handleSubmit(handleSignInSubmit) }, + React.createElement('h1', null, 'Access your Account'), + React.createElement('div', { className: 'social-container' }, + React.createElement('a', { href: 'https://www.facebook.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-facebook-f' }) + ), + React.createElement('a', { href: 'https://www.google.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-google-plus-g' }) + ), + React.createElement('a', { href: 'https://www.linkedin.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-linkedin-in' }) + ), + React.createElement('a', { href: 'https://www.twitter.com', className: 'social' }, + React.createElement('i', { className: 'fab fa-twitter' }) + ) + ), + React.createElement('br', null), + React.createElement('span', null, 'or Proceed with Your Profile'), + React.createElement('input', { type: 'email', placeholder: 'Email', ...signInForm.register("email") }), + signInForm.formState.errors.email && ( + React.createElement('p', { className: 'text-darkturquoise' }, signInForm.formState.errors.email?.message) + ), + React.createElement('div', { style: { position: 'relative', width: '100%' } }, + React.createElement('input', { type: isVisible ? "text" : "password", placeholder: 'Password', ...signInForm.register("password") }), + React.createElement('button', { type: 'button', className: 'eye-button', onClick: togglePasswordVisibility }, + React.createElement(FontAwesomeIcon, { icon: isVisible ? faEyeSlash : faEye }) + ) + ), + signInForm.formState.errors.password && ( + React.createElement('p', { className: 'text-darkturquoise' }, signInForm.formState.errors.password?.message) + ), + React.createElement('span', null, + React.createElement('a', { href: 'https://cosmoxplore.vercel.app/' }, 'Forgot your password?') + ), + React.createElement('br', null), + React.createElement('button', { type: 'submit' }, 'Sign In') + ) + ), + React.createElement('div', { className: 'overlay-container' }, + React.createElement('div', { className: 'overlay' }, + React.createElement('div', { className: 'overlay-panel overlay-left' }, + React.createElement('h1', null, 'Welcome Back!'), + React.createElement('p', null, 'To keep connected with us please login with your personal info'), + React.createElement('button', { className: 'ghost', onClick: () => handleOnClick('signIn') }, 'Sign In') + ), + React.createElement('div', { className: 'overlay-panel overlay-right' }, + React.createElement('h1', null, 'Welcome aboard!'), + React.createElement('p', null, 'Share a bit about yourself and let\'s embark on a journey together filled with discovery and excitement.'), + React.createElement('button', { className: 'ghost', onClick: () => handleOnClick('signUp') }, 'Sign Up') + ) + ) + ) + ), + isSubmitted && ( + React.createElement('p', { className: 'mt-4 text-Blue-1000' }, 'Form submitted successfully!') + ) + ); +} From ea9ceab7ad3479fb161c3a2db127fcd2ef6d40c4 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Sun, 30 Jun 2024 18:04:15 +0530 Subject: [PATCH 4/9] Login/Signup Page Updated --- src/pages/Login/page.jsx | 100 ++++++++++++++++++++------------------- 1 file changed, 51 insertions(+), 49 deletions(-) diff --git a/src/pages/Login/page.jsx b/src/pages/Login/page.jsx index 5f921c9..c51f2f4 100644 --- a/src/pages/Login/page.jsx +++ b/src/pages/Login/page.jsx @@ -71,48 +71,48 @@ export default function SignInSignUp() { @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); - * { - box-sizing: border-box; - } body { - background: black; - display: flex; + background: rgb(11, 3, 71);; justify-content: center; align-items: center; flex-direction: column; font-family: 'Montserrat', sans-serif; - height: 100vh; - margin: -20px 0 50px; - } - - - h1 { - font-weight: bold; - margin: 0; - color: darkturquoise; - font-size: 26px; } +h1 { + font-weight: bold; + margin: 0; + font-size: 23px; + background: linear-gradient(90deg, #8a2be2, #d896ff); /* Adjust the colors to match your gradient */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} h2 { text-align: center; + background: linear-gradient(90deg, #8a2be2, #d896ff); /* Adjust the colors to match your gradient */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } p { - font-size: 16px; + font-size: 14px; font-weight: 100; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px; + background: linear-gradient(90deg, #8a2be2, #d896ff); /* Adjust the colors to match your gradient */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } span { font-size: 14px; - color: #333; + color: #9000ff; } a { - color: blue; + color:#9000ff ; font-size: 14px; text-decoration: none; margin: 15px 0; @@ -121,7 +121,7 @@ export default function SignInSignUp() { button { border-radius: 20px; border: 2px solid yellow; - background-color: darkturquoise; + background-color: #9000ff; color: #ffffff; font-size: 12px; font-weight: bold; @@ -144,7 +144,7 @@ export default function SignInSignUp() { button.ghost { background-color: transparent; - border-color: darkturquoise; + border-color: #9000ff; } form { @@ -156,31 +156,33 @@ export default function SignInSignUp() { padding: 0 50px; height: 100%; text-align: center; - border: solid 2px darkturquoise; - + border: solid 2px #9000ff; } input { background-color: #eee; - border: dotted 2px darkturquoise; - padding: 12px 15px; - margin: 8px 0; + border: dotted 2px #9000ff; + padding: 6px 6px; + margin: 6px 0; width: 100%; - color: darkturquoise; + background: linear-gradient(90deg, #8a2be2, #d896ff); /* Adjust the colors to match your gradient */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .container { background-color: #fff; border-radius: 10px; - border: solid 2px darkturquoise; - box-shadow: 10px 14px 28px rgba(0, 0, 0, 0.25), 10px 10px 10px rgba(0, 0, 0, 0.22); - position: relative; + border: solid 2px #9000ff; + box-shadow: 10px 14px 28px #9000ff, 10px 10px 10px #9000ff; + position: absolute; overflow: hidden; + margin-top:7% ; + margin-left:9%; height: 580px; width: 1250px; max-width: 100%; min-height: 480px; - } .form-container { @@ -188,7 +190,7 @@ export default function SignInSignUp() { top: 0; height: 100%; transition: all 0.6s ease-in-out; - border: solid 2px darkturquoise; + border: solid 2px #9000ff; } .eye-button { @@ -198,14 +200,14 @@ export default function SignInSignUp() { background: none; border: none; cursor: pointer; - color: darkturquoise; + color: #9000ff; } .sign-in-container { left: 0; width: 50%; z-index: 2; - border: solid 2px darkturquoise; + border: solid 2px #9000ff; } .container.right-panel-active .sign-in-container { @@ -254,8 +256,8 @@ export default function SignInSignUp() { .overlay { background: #ff416c; - background: -webkit-linear-gradient(to right, #242533, #242533); - background: linear-gradient(to right, #242533, #242533); + background: -webkit-linear-gradient(to right, #03001D, #03001D); + background: linear-gradient(to right, #03001D, #03001D); background-repeat: no-repeat; background-size: cover; background-position: 0 0; @@ -318,7 +320,7 @@ export default function SignInSignUp() { height: 50px; width: 50px; border-radius: 50%; - background-color: darkturquoise; + background-color: #9000ff; margin: 0 10px; font-size: 20px; color: white; @@ -348,14 +350,14 @@ export default function SignInSignUp() { ) ), React.createElement('br', null), - React.createElement('span', null, 'or use your email for registration'), + React.createElement('span', null, 'Join Cosmoxplore by creating your account or register with your email'), React.createElement('input', { type: 'text', placeholder: 'Name', ...signUpForm.register("name") }), signUpForm.formState.errors.name && ( - React.createElement('p', { className: 'text-darkturquoise' }, signUpForm.formState.errors.name?.message) + React.createElement('p', { className: 'text- #9000ff' }, signUpForm.formState.errors.name?.message) ), React.createElement('input', { type: 'email', placeholder: 'Email', ...signUpForm.register("email") }), signUpForm.formState.errors.email && ( - React.createElement('p', { className: 'text-darkturquoise' }, signUpForm.formState.errors.email?.message) + React.createElement('p', { className: 'text- #9000ff' }, signUpForm.formState.errors.email?.message) ), React.createElement('div', { style: { position: 'relative', width: '100%' } }, React.createElement('input', { type: isVisible ? "text" : "password", placeholder: 'Password', ...signUpForm.register("password") }), @@ -364,14 +366,14 @@ export default function SignInSignUp() { ) ), signUpForm.formState.errors.password && ( - React.createElement('p', { className: 'text-darkturquoise' }, signUpForm.formState.errors.password?.message) + React.createElement('p', { className: 'text- #9000ff' }, signUpForm.formState.errors.password?.message) ), React.createElement('button', { type: 'submit' }, 'Sign Up') ) ), React.createElement('div', { className: 'form-container sign-in-container' }, React.createElement('form', { onSubmit: signInForm.handleSubmit(handleSignInSubmit) }, - React.createElement('h1', null, 'Access your Account'), + React.createElement('h1', null, 'Access your Cosmoxplore account'), React.createElement('div', { className: 'social-container' }, React.createElement('a', { href: 'https://www.facebook.com', className: 'social' }, React.createElement('i', { className: 'fab fa-facebook-f' }) @@ -387,10 +389,10 @@ export default function SignInSignUp() { ) ), React.createElement('br', null), - React.createElement('span', null, 'or Proceed with Your Profile'), + React.createElement('span', null, 'Join Cosmoxplore by creating your account or continue with your profile'), React.createElement('input', { type: 'email', placeholder: 'Email', ...signInForm.register("email") }), signInForm.formState.errors.email && ( - React.createElement('p', { className: 'text-darkturquoise' }, signInForm.formState.errors.email?.message) + React.createElement('p', { className: 'text- #9000ff' }, signInForm.formState.errors.email?.message) ), React.createElement('div', { style: { position: 'relative', width: '100%' } }, React.createElement('input', { type: isVisible ? "text" : "password", placeholder: 'Password', ...signInForm.register("password") }), @@ -399,7 +401,7 @@ export default function SignInSignUp() { ) ), signInForm.formState.errors.password && ( - React.createElement('p', { className: 'text-darkturquoise' }, signInForm.formState.errors.password?.message) + React.createElement('p', { className: 'text- #9000ff' }, signInForm.formState.errors.password?.message) ), React.createElement('span', null, React.createElement('a', { href: 'https://cosmoxplore.vercel.app/' }, 'Forgot your password?') @@ -411,13 +413,13 @@ export default function SignInSignUp() { React.createElement('div', { className: 'overlay-container' }, React.createElement('div', { className: 'overlay' }, React.createElement('div', { className: 'overlay-panel overlay-left' }, - React.createElement('h1', null, 'Welcome Back!'), - React.createElement('p', null, 'To keep connected with us please login with your personal info'), + React.createElement('h1', null, 'Welcome back! Dive into your Cosmoxplore journey'), + React.createElement('p', null, 'We are glad you are here! Connect with us by logging in with your personal details to explore Cosmoxplore'), React.createElement('button', { className: 'ghost', onClick: () => handleOnClick('signIn') }, 'Sign In') ), React.createElement('div', { className: 'overlay-panel overlay-right' }, - React.createElement('h1', null, 'Welcome aboard!'), - React.createElement('p', null, 'Share a bit about yourself and let\'s embark on a journey together filled with discovery and excitement.'), + React.createElement('h1', null, 'Explore the universe with Cosmoxplore'), + React.createElement('p', null, 'Cosmoxplore: Unveiling the mysteries of the cosmos'), React.createElement('button', { className: 'ghost', onClick: () => handleOnClick('signUp') }, 'Sign Up') ) ) @@ -427,4 +429,4 @@ export default function SignInSignUp() { React.createElement('p', { className: 'mt-4 text-Blue-1000' }, 'Form submitted successfully!') ) ); -} +} \ No newline at end of file From 3bcf9cc1dd4bbd296cbf10a02f8e67c893e5bb0b Mon Sep 17 00:00:00 2001 From: Anjaliavv51 <154777864+Anjaliavv51@users.noreply.github.com> Date: Thu, 25 Jul 2024 16:28:06 +0530 Subject: [PATCH 5/9] Automatic Label Addition #465 --- .github/workflows/auto-label-issues.yml | 43 +++++++++++++++++++++++++ .github/workflows/auto-label-pr.yml | 43 +++++++++++++++++++++++++ 2 files changed, 86 insertions(+) create mode 100644 .github/workflows/auto-label-issues.yml create mode 100644 .github/workflows/auto-label-pr.yml diff --git a/.github/workflows/auto-label-issues.yml b/.github/workflows/auto-label-issues.yml new file mode 100644 index 0000000..9648740 --- /dev/null +++ b/.github/workflows/auto-label-issues.yml @@ -0,0 +1,43 @@ +name: Auto Label Issues +on: + issues: + types: [opened, edited] + +jobs: + label_issues: + runs-on: ubuntu-latest + steps: + - uses: actions/github-script@v6 + with: + github-token: ${{secrets.GITHUB_TOKEN}} + script: | + const issue = context.payload.issue; + const title = issue.title.toLowerCase(); + const body = issue.body.toLowerCase(); + + const labels = []; + + if (title.includes('gssoc') || body.includes('gssoc')) { + labels.push('GSSoC'); + } + + if (title.includes('enhancement') || body.includes('enhancement')) { + labels.push('Enhancement'); + } + + if (title.includes('bug') || body.includes('bug')) { + labels.push('Bug'); + } + + if (title.includes('documentation') || body.includes('documentation')) { + labels.push('Documentation'); + } + + if (labels.length > 0) { + github.rest.issues.addLabels({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.name, + labels: labels + }); + } \ No newline at end of file diff --git a/.github/workflows/auto-label-pr.yml b/.github/workflows/auto-label-pr.yml new file mode 100644 index 0000000..f835bfa --- /dev/null +++ b/.github/workflows/auto-label-pr.yml @@ -0,0 +1,43 @@ +name: Auto Label PRs +on: + pull_request: + types: [opened, edited, synchronize] + +jobs: + label_prs: + runs-on: ubuntu-latest + steps: + - uses: actions/github-script@v6 + with: + github-token: ${{secrets.GITHUB_TOKEN}} + script: | + const pr = context.payload.pull_request; + const title = pr.title.toLowerCase(); + const body = pr.body ? pr.body.toLowerCase() : ''; + + const labels = []; + + if (title.includes('gssoc') || body.includes('gssoc')) { + labels.push('GSSoC'); + } + + if (title.includes('enhancement') || body.includes('enhancement')) { + labels.push('Enhancement'); + } + + if (title.includes('bug') || body.includes('bug')) { + labels.push('Bug'); + } + + if (title.includes('documentation') || body.includes('documentation')) { + labels.push('Documentation'); + } + + if (labels.length > 0) { + github.rest.issues.addLabels({ + issue_number: context.issue.number, + owner: context.repo.owner, + repo: context.repo.name, + labels: labels + }); + } \ No newline at end of file From d60ce2e3f623d7629c574d1039577a4e96bebe32 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Mon, 29 Jul 2024 19:16:09 +0530 Subject: [PATCH 6/9] MultiLanguage Facility --- src/components/Hero/Hero.jsx | 54 ++++++++++++++++++++++++++--- src/components/Hero/Hero.module.css | 1 + 2 files changed, 51 insertions(+), 4 deletions(-) diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx index 054365b..11fc768 100644 --- a/src/components/Hero/Hero.jsx +++ b/src/components/Hero/Hero.jsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react'; import Typed from 'typed.js'; -import Earth from '../3D_Models/Earth/Earth.jsx' -import Styles from './Hero.module.css' +import Earth from '../3D_Models/Earth/Earth.jsx'; function Hero() { useEffect(() => { @@ -19,12 +18,59 @@ function Hero() { }; }, []); // Empty dependency array to run only once when component mounts + useEffect(() => { + // Function to dynamically load Google Translate script + const loadGoogleTranslateScript = () => { + const script = document.createElement('script'); + script.src = "https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"; + script.type = 'text/javascript'; + script.onerror = () => handleError(); + document.body.appendChild(script); + }; + + // Function to handle script load errors + const handleError = () => { + console.error("Error loading Google Translate script."); + }; + + // Function to initialize Google Translate + window.loadGoogleTranslate = () => { + new window.google.translate.TranslateElement( + { + pageLanguage: "en", + includedLanguages: "en,hi,pa,sa,mr,ur,bn,es,fr,de,it", + layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE, + }, + "google_element" + ); + }; + + loadGoogleTranslateScript(); + + // Cleanup function to remove script from document + return () => { + const script = document.querySelector('script[src*="translate.google.com"]'); + if (script) { + document.body.removeChild(script); + } + }; + }, []); // Empty dependency array to run only once when component mounts + + // Inline styles for Google Translate container + const googleTranslateStyle = { + position: 'absolute', + top: '10px', + left: '10px', + zIndex: 1000, + }; + return (
    -
    +
    +

    Let's embark on a Cosmic
    X

    Welcome to CosmoXplore, where NASA's API unveils celestial wonders. Discover breathtaking images and cutting-edge astronomical data, embarking on a cosmic journey that transcends the boundaries of earthly imagination.

    @@ -39,4 +85,4 @@ function Hero() { ); } -export default Hero; \ No newline at end of file +export default Hero; diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css index 62470e8..054b493 100644 --- a/src/components/Hero/Hero.module.css +++ b/src/components/Hero/Hero.module.css @@ -5,4 +5,5 @@ margin: 0; margin-top: 5%; } + } \ No newline at end of file From 87b868047d5dc7f82455d88610ad38602cce90e0 Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Tue, 30 Jul 2024 19:10:12 +0530 Subject: [PATCH 7/9] MultiLanguage Facility --- src/components/Navbar/Navbar.jsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index a6e6510..02e031b 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -99,6 +99,29 @@ function Navbar() { } }; + useEffect(() => { + const loadGoogleTranslate = () => { + new window.google.translate.TranslateElement( + { + pageLanguage: 'en', + includedLanguages: 'en,hi,pa,sa,mr,ur,bn,es,fr,de,it', + layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE, + }, + 'google_element' + ); + }; + + const script = document.createElement('script'); + script.type = 'text/javascript'; + script.src = 'https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate'; + script.onerror = () => console.error('Error loading Google Translate script'); + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + }; + }, []); + return (