Merge pull request #42 from DarkFalc0n/main

Sign Up created
This commit is contained in:
Jyotirmoy Bandyopadhayaya 2022-02-08 21:45:47 +05:30 committed by GitHub
commit 571d0b13b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 932 additions and 669 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 788 KiB

View File

@ -0,0 +1,45 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="#000">
<g>
<path d="M448,64H64C28.656,64,0,92.656,0,128v256c0,35.344,28.656,64,64,64h384c35.344,0,64-28.656,64-64V128
C512,92.656,483.344,64,448,64z M342.656,234.781l135.469-116.094c0.938,3,1.875,6,1.875,9.313v256
c0,2.219-0.844,4.188-1.281,6.281L342.656,234.781z M448,96c2.125,0,4,0.813,6,1.219L256,266.938L58,97.219
C60,96.813,61.875,96,64,96H448z M33.266,390.25C32.828,388.156,32,386.219,32,384V128c0-3.313,0.953-6.313,1.891-9.313
L169.313,234.75L33.266,390.25z M64,416c-3.234,0-6.172-0.938-9.125-1.844l138.75-158.563l51.969,44.531
C248.578,302.719,252.297,304,256,304s7.422-1.281,10.406-3.875l51.969-44.531l138.75,158.563C454.188,415.062,451.25,416,448,416
H64z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 61.2 (89653) - https://sketch.com -->
<title>Icons 56/lock_outline_56</title>
<desc>Created with Sketch.</desc>
<g id="Icons-56/lock_outline_56" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="lock_outline_56">
<polygon points="0 0 56 0 56 56 0 56"></polygon>
<path d="M28,4.99999695 C33.5228475,4.99999695 38,9.47714945 38,14.9999969 L38.0017546,21.0280484 C39.4179964,21.106545 40.3764802,21.3582942 41.368488,21.8888258 C42.5431453,22.5170394 43.4829606,23.4568547 44.1111742,24.631512 C44.7715728,25.8663502 45,27.049243 45,29.1277704 L45,40.8722296 C45,42.950757 44.7715728,44.1336498 44.1111742,45.368488 C43.4829606,46.5431453 42.5431453,47.4829606 41.368488,48.1111742 C40.1336498,48.7715728 38.950757,49 36.8722296,49 L19.1277704,49 C17.049243,49 15.8663502,48.7715728 14.631512,48.1111742 C13.4568547,47.4829606 12.5170394,46.5431453 11.8888258,45.368488 C11.2284272,44.1336498 11,42.950757 11,40.8722296 L11,29.1277704 C11,27.049243 11.2284272,25.8663502 11.8888258,24.631512 C12.5170394,23.4568547 13.4568547,22.5170394 14.631512,21.8888258 C15.6237549,21.3581685 16.5824578,21.1064257 17.9992523,21.0279927 L18,14.9999969 C18,9.47714945 22.4771525,4.99999695 28,4.99999695 Z M36.8722296,24 L19.1277704,24 C17.3447329,24 16.6981604,24.1856512 16.0463086,24.5342654 C15.3944567,24.8828796 14.8828796,25.3944567 14.5342654,26.0463086 C14.1856512,26.6981604 14,27.3447329 14,29.1277704 L14,40.8722296 C14,42.6552671 14.1856512,43.3018396 14.5342654,43.9536914 C14.8828796,44.6055433 15.3944567,45.1171204 16.0463086,45.4657346 C16.6981604,45.8143488 17.3447329,46 19.1277704,46 L36.8722296,46 C38.6552671,46 39.3018396,45.8143488 39.9536914,45.4657346 C40.6055433,45.1171204 41.1171204,44.6055433 41.4657346,43.9536914 C41.8143488,43.3018396 42,42.6552671 42,40.8722296 L42,29.1277704 C42,27.3447329 41.8143488,26.6981604 41.4657346,26.0463086 C41.1171204,25.3944567 40.6055433,24.8828796 39.9536914,24.5342654 C39.3018396,24.1856512 38.6552671,24 36.8722296,24 Z M28,30 C29.6568542,30 31,31.3431458 31,33 C31,34.3058822 30.1656226,35.4168852 29.0009007,35.8289758 L29,39 C29,39.5522847 28.5522847,40 28,40 C27.4477153,40 27,39.5522847 27,39 L27.0000889,35.8293257 C25.8348501,35.4175144 25,34.3062521 25,33 C25,31.3431458 26.3431458,30 28,30 Z M28,7.99999695 C24.1340068,7.99999695 21,11.1340037 21,14.9999969 L21,20.9999969 L35,20.9999969 L35,14.9999969 C35,11.1340037 31.8659932,7.99999695 28,7.99999695 Z" id="↳-Icon-Color" fill="currentColor" fill-rule="nonzero"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -0,0 +1 @@
<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g id="about"><path d="M16,16A7,7,0,1,0,9,9,7,7,0,0,0,16,16ZM16,4a5,5,0,1,1-5,5A5,5,0,0,1,16,4Z"/><path d="M17,18H15A11,11,0,0,0,4,29a1,1,0,0,0,1,1H27a1,1,0,0,0,1-1A11,11,0,0,0,17,18ZM6.06,28A9,9,0,0,1,15,20h2a9,9,0,0,1,8.94,8Z"/></g></svg>

After

Width:  |  Height:  |  Size: 330 B

View File

@ -2,6 +2,7 @@ import { borderRadius, padding } from '@mui/system';
import React from 'react';
import { render } from 'react-dom';
import HomeSectionStyle from "./HomeSection.style";
import Link from 'next/link';
const head={
@ -48,9 +49,9 @@ function HomeSection(props) {
<button style={btn} id="minify">MINIFY</button>
</div>
<div>
<h3>Need more advanced features? | <a href="">Create an account</a></h3>
<h3>Need more advanced features? | <Link href="/signup">Create an account</Link></h3>
</div>
</div>
</div>
</HomeSectionStyle>
);
}

View File

@ -27,7 +27,7 @@ function Index(props) {
};
return (
<NavbarStyle position="fixed" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}>
<NavbarStyle position="relative" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}>
<Container maxWidth="xl">
<Toolbar disableGutters="false">
<Typography variant='h4' sx={{fontWeight:'bold'}}>

View File

@ -0,0 +1,67 @@
import React from 'react';
import RegStyle from "./Reg.style";
import Image from 'next/image'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser, faEnvelope, faLock, faClose } from '@fortawesome/free-solid-svg-icons'
import { useState } from 'react';
import { Link } from '@mui/material';
function Reg(){
const [userData, setUserData] = useState({
username: "",
email: "",
password:"",
repassword:""
})
const handleInput = (event) => {
const name = event.target.name;
const value = event.target.value;
setUserData({ ...userData, [name]: value})
}
return(
<RegStyle>
<form className='form-wrapper'>
<div className='reg-wide-container'>
<FontAwesomeIcon icon={faClose}/>
</div>
<p className='reg-title'>Sign Up</p>
<div className='reg-field'>
<div className='reg-label'>
<FontAwesomeIcon icon={faUser}/>
</div>
<input className='reg-input' name='username' autoComplete='off' type="text" value={userData.username} onChange={handleInput} placeholder='Full Name' />
</div>
<div className='reg-field'>
<div className='reg-label'>
<FontAwesomeIcon icon={faEnvelope}/>
</div>
<input className='reg-input' name='email' autoComplete='off' onChange={handleInput} type="text" value={userData.email} placeholder='Email Address'/>
</div>
<div className='reg-field'>
<div className='reg-label'>
<FontAwesomeIcon icon={faLock}/>
</div>
<input className='reg-input' name='password' autoComplete='off' onChange={handleInput} type="password" value={userData.password} placeholder='Password'/>
</div>
<div className='reg-field'>
<div className='reg-label'>
<FontAwesomeIcon icon={faLock}/>
</div>
<input className='reg-input' name='repassword' autoComplete='off' onChange={handleInput} type="password" value={userData.repassword} placeholder='Confirm Password' />
</div>
<button type='submit' className='submit-button'>Submit</button>
<p className="foot-text">Already registered? Login&nbsp;
<Link href="/" exact className='foot-text underline'>here</Link>
</p>
</form>
</RegStyle>
)
}
export default Reg;

View File

@ -0,0 +1,13 @@
import styled from "styled-components"
export default styled.section`
display: flex;
justify-content:center;
align-items:center;
.content {
display: flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
`

View File

@ -0,0 +1,106 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
.reg-label{
font-size: 24px;
width: 30px;
color: #9134bd;
position: relative;
}
.reg-title{
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 36px;
text-align: center;
margin-bottom: 40px;
color:#9134bd;
}
.reg-wide-container{
width: 100%;
text-align: right;
color: #9134bd;
font-size: 24px;
}
.reg-input{
margin-left: 10px;
height: 35px;
width: 340px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 16px;
border-radius: 20px;
padding: 10px;
border: none;
justify-content: flex-end;
color: #9134bd;
}
.reg-input:active, .reg-input:focus{
outline: none;
}
.reg-input::placeholder{
color: #6babc7;
}
.reg-field{
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}
.form-wrapper{
background-color: rgba(255,255,255,0.5);
padding: 20px 30px 40px 30px;
border-radius: 20px;
font-size: 24px;
text-align: center;
backdrop-filter: blur(6px);
border-style: solid;
border-color: #f1faff;
border-width: 1px 0px 0px 1px;
margin-top: 0;
}
.submit-button{
width: 100px;
height: 40px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 18px;
border-radius: 10px;
border: none;
margin-top: 20px ;
background-image: linear-gradient(135deg ,#cc5fff, #7E3EE4, #0087ca, #2db9ff);
background-size: 200%;
background-position: left;
color: white;
transition: 0.5s;
}
.submit-button:hover{
background-position: right;
}
.submit-button:active{
transform: scale(0.95);
transition: 0.1s
}
.icon{
fill: black;
}
.foot-text{
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 18px;
margin-top: 50px;
color: black;
text-decoration: none;
}
.underline{
text-decoration: underline;
color: #9134bd;
}
.underline:hover{
color: #008ed4;
transition: 0.5s;
}

View File

@ -290,6 +290,51 @@
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
},
"@fortawesome/fontawesome-common-types": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz",
"integrity": "sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz",
"integrity": "sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.3.0"
}
},
"@fortawesome/free-brands-svg-icons": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.0.0.tgz",
"integrity": "sha512-BIhsy2YeGuk8+KQwpqmyayQDWo1lvGMHsMIE+z5ApPRgV7T+zGhmNzYVoBT4IrJMC6ep5WpGrxoHX+IvNxHnkw==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.3.0"
}
},
"@fortawesome/free-regular-svg-icons": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.0.0.tgz",
"integrity": "sha512-lYK6oyQL8HwZUAVWGqF7TGuwQBVfphNBVTdvPSD3h4gmQfGazm/xcwg3kmtcRycu3y6QspOC7hPXSoJbVqSYCw==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.3.0"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0.tgz",
"integrity": "sha512-o4FZ1XbndcgeWNb8Wh0y+Hgf73CjmyOQowUSaqQCtgIIdS+XliSBSOwCl330wER+I6CGYE96hT27bHBPmzX2Gg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.3.0"
}
},
"@fortawesome/react-fontawesome": {
"version": "0.1.17",
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.17.tgz",
"integrity": "sha512-dX43Z5IvMaW7fwzU8farosYjKNGfRb2HB/DgjVBHeJZ/NSnuuaujPPx0YOdcAq+n3mqn70tyCde2HM1mqbhiuw==",
"requires": {
"prop-types": "^15.8.1"
}
},
"@mui/base": {
"version": "5.0.0-alpha.67",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.67.tgz",

View File

@ -10,6 +10,11 @@
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.17",
"@mui/icons-material": "^5.3.1",
"@mui/material": "^5.4.0",
"@mui/styled-engine-sc": "^5.3.0",

View File

@ -1,5 +1,6 @@
import '../styles/globals.css'
import '../styles/logostyles.css'
import '../components/Reg/styles.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />

View File

@ -15,7 +15,7 @@ export default function Home() {
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={""}>
<main className={"main-bg"}>
<NavBar />
<HomeSection />
<Features/>

15
frontend/pages/signup.js Normal file
View File

@ -0,0 +1,15 @@
import { useState } from 'react'
import Head from 'next/head'
import NavBar from "components/NavBar";
import Features from 'components/Features'
import Reg from 'components/Reg/Reg'
export default function signup(){
return (
<div className='flex-column'>
<NavBar/>
<Reg/>
</div>
)
}

View File

@ -23,5 +23,12 @@ section{
width:100vw;
min-height:100vh;
}
.flex-column{
display: flex;
flex-direction: column;
background-image: url("./../assets/bg/main-bg.png");
}
.main-bg{
background-image: url("./../assets/bg/main-bg.png");
}

File diff suppressed because it is too large Load Diff