added login and reg page
This commit is contained in:
parent
03c6cb657f
commit
b542cf1f7c
|
@ -0,0 +1,87 @@
|
||||||
|
import React from "react";
|
||||||
|
import LoginStyle from "./Login.style";
|
||||||
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
||||||
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
|
import {
|
||||||
|
faUser,
|
||||||
|
faEnvelope,
|
||||||
|
faLock,
|
||||||
|
faClose,
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { UserContext } from "../../pages/user/usercontext";
|
||||||
|
import { useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useContext } from "react";
|
||||||
|
|
||||||
|
function Login() {
|
||||||
|
const [userData, setUserData] = useState({
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleInput = (event) => {
|
||||||
|
const name = event.target.name;
|
||||||
|
const value = event.target.value;
|
||||||
|
setUserData({ ...userData, [name]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LoginStyle>
|
||||||
|
<form className="form-wrapper">
|
||||||
|
<div className="reg-wide-container">
|
||||||
|
<FontAwesomeIcon icon={faClose} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="reg-title">Sign in</p>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="/images/user.png"
|
||||||
|
width={100}
|
||||||
|
height={100}
|
||||||
|
style={{ "margin-bottom": 20 }}
|
||||||
|
></img>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<Link href="/">
|
||||||
|
<button type="submit" className="submit-button">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<p className="foot-text">
|
||||||
|
New here?
|
||||||
|
<Link href="/signup" exact className="foot-text underline">
|
||||||
|
Create an account
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</LoginStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default Login;
|
|
@ -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;
|
||||||
|
}
|
||||||
|
`
|
|
@ -1,136 +1,191 @@
|
||||||
import React from 'react';
|
import React, { useContext } from "react";
|
||||||
import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography,alpha} from "@mui/material";
|
import {
|
||||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
Avatar,
|
||||||
import MenuIcon from '@mui/icons-material/Menu';
|
Box,
|
||||||
|
Button,
|
||||||
|
Container,
|
||||||
|
IconButton,
|
||||||
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Toolbar,
|
||||||
|
Tooltip,
|
||||||
|
Typography,
|
||||||
|
alpha,
|
||||||
|
} from "@mui/material";
|
||||||
|
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||||
|
import MenuIcon from "@mui/icons-material/Menu";
|
||||||
import NavbarStyle from "./Navbar.style";
|
import NavbarStyle from "./Navbar.style";
|
||||||
import Logo from './Logo';
|
import Logo from "./Logo";
|
||||||
|
import UserAuth, { UserContext } from "pages/user/usercontext";
|
||||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
import Link from "next/link";
|
||||||
|
const settings = ["Profile", "Account", "Dashboard", "Logout"];
|
||||||
|
|
||||||
function Index(props) {
|
function Index(props) {
|
||||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||||
|
|
||||||
const handleOpenNavMenu = (event) => {
|
const handleOpenNavMenu = (event) => {
|
||||||
setAnchorElNav(event.currentTarget);
|
setAnchorElNav(event.currentTarget);
|
||||||
};
|
};
|
||||||
const handleOpenUserMenu = (event) => {
|
const handleOpenUserMenu = (event) => {
|
||||||
setAnchorElUser(event.currentTarget);
|
setAnchorElUser(event.currentTarget);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseNavMenu = () => {
|
const handleCloseNavMenu = () => {
|
||||||
setAnchorElNav(null);
|
setAnchorElNav(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseUserMenu = () => {
|
const handleCloseUserMenu = () => {
|
||||||
setAnchorElUser(null);
|
setAnchorElUser(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
const { user, login, logout } = useContext(UserAuth);
|
||||||
<NavbarStyle position="relative" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}>
|
|
||||||
<Container maxWidth="xl">
|
|
||||||
<Toolbar disableGutters="false">
|
|
||||||
<Typography variant='h4' sx={{fontWeight:'bold'}}>
|
|
||||||
URL MINIFY
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse', display: { xs: 'flex', md: 'none' } }}>
|
|
||||||
|
|
||||||
<IconButton
|
|
||||||
size="large"
|
|
||||||
aria-label="account of current user"
|
|
||||||
aria-controls="menu-appbar"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleOpenNavMenu}
|
|
||||||
color="inherit"
|
|
||||||
>
|
|
||||||
<MenuIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-appbar"
|
|
||||||
anchorEl={anchorElNav}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'left',
|
|
||||||
}}
|
|
||||||
keepMounted
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'left',
|
|
||||||
}}
|
|
||||||
open={Boolean(anchorElNav)}
|
|
||||||
onClose={handleCloseNavMenu}
|
|
||||||
sx={{
|
|
||||||
display: { xs: 'block', md: 'none' },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem onClick={handleCloseNavMenu}>
|
|
||||||
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
|
|
||||||
<Typography textAlign="center" sx={{display:'flex'}} >
|
|
||||||
<GitHubIcon fontSize='small'/>
|
|
||||||
GitHub
|
|
||||||
</Typography>
|
|
||||||
</a>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem onClick={handleCloseNavMenu}>
|
|
||||||
<Typography textAlign="center" sx={{display:'flex'}} >
|
|
||||||
CRIDITS
|
|
||||||
</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse',gap:'10px',px:'20px', display: { xs: 'none', md: 'flex' } }}>
|
|
||||||
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
|
|
||||||
<Button
|
|
||||||
onClick={handleCloseNavMenu}
|
|
||||||
sx={{ color: 'white', display: 'flex',gap:'10px',fontSize:'h5.fontSize',fontFamily:'sans-serif',fontStyle:'bold', textTransform: 'capitalize',fontWeight:'bold'}}
|
|
||||||
>
|
|
||||||
<GitHubIcon fontSize='large'/>
|
|
||||||
GitHub
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
<Button
|
|
||||||
onClick={handleCloseNavMenu}
|
|
||||||
sx={{ color: 'white', display: 'block',fontSize:'h5.fontSize'}}
|
|
||||||
>
|
|
||||||
CREDITS
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ flexGrow: 0 }}>
|
return (
|
||||||
<Tooltip title="Open settings">
|
<NavbarStyle
|
||||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
position="relative"
|
||||||
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" sx={{ width: 50, height: 50 }} />
|
sx={{ bgcolor: alpha("#000000", 0.5), m: "0px" }}
|
||||||
</IconButton>
|
>
|
||||||
</Tooltip>
|
<Container maxWidth="xl">
|
||||||
<Menu
|
<Toolbar disableGutters="false">
|
||||||
sx={{ mt: '45px' }}
|
<Typography variant="h4" sx={{ fontWeight: "bold" }}>
|
||||||
id="menu-appbar"
|
URL MINIFY
|
||||||
anchorEl={anchorElUser}
|
</Typography>
|
||||||
anchorOrigin={{
|
<Box
|
||||||
vertical: 'top',
|
sx={{
|
||||||
horizontal: 'right',
|
flexGrow: 1,
|
||||||
}}
|
flexDirection: "row-reverse",
|
||||||
keepMounted
|
display: { xs: "flex", md: "none" },
|
||||||
transformOrigin={{
|
}}
|
||||||
vertical: 'top',
|
>
|
||||||
horizontal: 'right',
|
<IconButton
|
||||||
}}
|
size="large"
|
||||||
open={Boolean(anchorElUser)}
|
aria-label="account of current user"
|
||||||
onClose={handleCloseUserMenu}
|
aria-controls="menu-appbar"
|
||||||
>
|
aria-haspopup="true"
|
||||||
{settings.map((setting) => (
|
onClick={handleOpenNavMenu}
|
||||||
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
color="inherit"
|
||||||
<Typography textAlign="center">{setting}</Typography>
|
>
|
||||||
</MenuItem>
|
<MenuIcon />
|
||||||
))}
|
</IconButton>
|
||||||
</Menu>
|
<Menu
|
||||||
</Box>
|
id="menu-appbar"
|
||||||
</Toolbar>
|
anchorEl={anchorElNav}
|
||||||
</Container>
|
anchorOrigin={{
|
||||||
</NavbarStyle>
|
vertical: "bottom",
|
||||||
);
|
horizontal: "left",
|
||||||
|
}}
|
||||||
|
keepMounted
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: "top",
|
||||||
|
horizontal: "left",
|
||||||
|
}}
|
||||||
|
open={Boolean(anchorElNav)}
|
||||||
|
onClose={handleCloseNavMenu}
|
||||||
|
sx={{
|
||||||
|
display: { xs: "block", md: "none" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={handleCloseNavMenu}>
|
||||||
|
<a
|
||||||
|
href="https://github.com/BRAVO68WEB/url-minify"
|
||||||
|
target={"_blank"}
|
||||||
|
>
|
||||||
|
<Typography textAlign="center" sx={{ display: "flex" }}>
|
||||||
|
<GitHubIcon fontSize="small" />
|
||||||
|
GitHub
|
||||||
|
</Typography>
|
||||||
|
</a>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={handleCloseNavMenu}>
|
||||||
|
<Typography textAlign="center" sx={{ display: "flex" }}>
|
||||||
|
CREDITS
|
||||||
|
</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "row-reverse",
|
||||||
|
gap: "10px",
|
||||||
|
px: "20px",
|
||||||
|
display: { xs: "none", md: "flex" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://github.com/BRAVO68WEB/url-minify"
|
||||||
|
target={"_blank"}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
onClick={handleCloseNavMenu}
|
||||||
|
sx={{
|
||||||
|
color: "white",
|
||||||
|
display: "flex",
|
||||||
|
gap: "10px",
|
||||||
|
fontSize: "h5.fontSize",
|
||||||
|
fontFamily: "sans-serif",
|
||||||
|
fontStyle: "bold",
|
||||||
|
textTransform: "capitalize",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<GitHubIcon fontSize="large" />
|
||||||
|
GitHub
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
onClick={handleCloseNavMenu}
|
||||||
|
sx={{ color: "white", display: "block", fontSize: "h5.fontSize" }}
|
||||||
|
>
|
||||||
|
CREDITS
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{user ? (
|
||||||
|
<Box sx={{ flexGrow: 0 }}>
|
||||||
|
<Tooltip title="Open settings">
|
||||||
|
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
||||||
|
<Avatar
|
||||||
|
alt="Remy Sharp"
|
||||||
|
src="/static/images/avatar/2.jpg"
|
||||||
|
sx={{ width: 50, height: 50 }}
|
||||||
|
/>
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Menu
|
||||||
|
sx={{ mt: "45px" }}
|
||||||
|
id="menu-appbar"
|
||||||
|
anchorEl={anchorElUser}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: "top",
|
||||||
|
horizontal: "right",
|
||||||
|
}}
|
||||||
|
keepMounted
|
||||||
|
transformOrigin={{
|
||||||
|
vertical: "top",
|
||||||
|
horizontal: "right",
|
||||||
|
}}
|
||||||
|
open={Boolean(anchorElUser)}
|
||||||
|
onClose={handleCloseUserMenu}
|
||||||
|
>
|
||||||
|
{settings.map((setting) => (
|
||||||
|
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
||||||
|
<Typography textAlign="center">{setting}</Typography>
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</Menu>
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Typography onClick={login}>
|
||||||
|
<Link href="./login">LOGIN</Link>
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Toolbar>
|
||||||
|
</Container>
|
||||||
|
</NavbarStyle>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|
|
@ -1,67 +1,105 @@
|
||||||
import React from 'react';
|
import React from "react";
|
||||||
import RegStyle from "./Reg.style";
|
import RegStyle from "./Reg.style";
|
||||||
import Image from 'next/image'
|
import Image from "next/image";
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faUser, faEnvelope, faLock, faClose } from '@fortawesome/free-solid-svg-icons'
|
import {
|
||||||
import { useState } from 'react';
|
faUser,
|
||||||
import { Link } from '@mui/material';
|
faEnvelope,
|
||||||
|
faLock,
|
||||||
|
faClose,
|
||||||
|
} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Link } from "@mui/material";
|
||||||
|
|
||||||
function Reg(){
|
function Reg() {
|
||||||
|
const [userData, setUserData] = useState({
|
||||||
|
username: "",
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
repassword: "",
|
||||||
|
});
|
||||||
|
|
||||||
const [userData, setUserData] = useState({
|
const handleInput = (event) => {
|
||||||
username: "",
|
const name = event.target.name;
|
||||||
email: "",
|
const value = event.target.value;
|
||||||
password:"",
|
setUserData({ ...userData, [name]: value });
|
||||||
repassword:""
|
};
|
||||||
})
|
|
||||||
|
|
||||||
const handleInput = (event) => {
|
return (
|
||||||
const name = event.target.name;
|
<RegStyle>
|
||||||
const value = event.target.value;
|
<form className="form-wrapper">
|
||||||
setUserData({ ...userData, [name]: value})
|
<div className="reg-wide-container">
|
||||||
}
|
<FontAwesomeIcon icon={faClose} />
|
||||||
|
</div>
|
||||||
|
|
||||||
return(
|
<p className="reg-title">Sign Up</p>
|
||||||
<RegStyle>
|
<div className="reg-field">
|
||||||
<form className='form-wrapper'>
|
<div className="reg-label">
|
||||||
<div className='reg-wide-container'>
|
<FontAwesomeIcon icon={faUser} />
|
||||||
<FontAwesomeIcon icon={faClose}/>
|
</div>
|
||||||
</div>
|
<input
|
||||||
|
className="reg-input"
|
||||||
<p className='reg-title'>Sign Up</p>
|
name="username"
|
||||||
<div className='reg-field'>
|
autoComplete="off"
|
||||||
<div className='reg-label'>
|
type="text"
|
||||||
<FontAwesomeIcon icon={faUser}/>
|
value={userData.username}
|
||||||
</div>
|
onChange={handleInput}
|
||||||
<input className='reg-input' name='username' autoComplete='off' type="text" value={userData.username} onChange={handleInput} placeholder='Full Name' />
|
placeholder="Full Name"
|
||||||
</div>
|
/>
|
||||||
<div className='reg-field'>
|
</div>
|
||||||
<div className='reg-label'>
|
<div className="reg-field">
|
||||||
<FontAwesomeIcon icon={faEnvelope}/>
|
<div className="reg-label">
|
||||||
</div>
|
<FontAwesomeIcon icon={faEnvelope} />
|
||||||
<input className='reg-input' name='email' autoComplete='off' onChange={handleInput} type="text" value={userData.email} placeholder='Email Address'/>
|
</div>
|
||||||
</div>
|
<input
|
||||||
<div className='reg-field'>
|
className="reg-input"
|
||||||
<div className='reg-label'>
|
name="email"
|
||||||
<FontAwesomeIcon icon={faLock}/>
|
autoComplete="off"
|
||||||
</div>
|
onChange={handleInput}
|
||||||
<input className='reg-input' name='password' autoComplete='off' onChange={handleInput} type="password" value={userData.password} placeholder='Password'/>
|
type="text"
|
||||||
</div>
|
value={userData.email}
|
||||||
<div className='reg-field'>
|
placeholder="Email Address"
|
||||||
<div className='reg-label'>
|
/>
|
||||||
<FontAwesomeIcon icon={faLock}/>
|
</div>
|
||||||
</div>
|
<div className="reg-field">
|
||||||
<input className='reg-input' name='repassword' autoComplete='off' onChange={handleInput} type="password" value={userData.repassword} placeholder='Confirm Password' />
|
<div className="reg-label">
|
||||||
</div>
|
<FontAwesomeIcon icon={faLock} />
|
||||||
<button type='submit' className='submit-button'>Submit</button>
|
</div>
|
||||||
<p className="foot-text">Already registered? Login
|
<input
|
||||||
<Link href="/" exact className='foot-text underline'>here</Link>
|
className="reg-input"
|
||||||
</p>
|
name="password"
|
||||||
|
autoComplete="off"
|
||||||
|
onChange={handleInput}
|
||||||
</form>
|
type="password"
|
||||||
</RegStyle>
|
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
|
||||||
|
<Link href="/login" exact className="foot-text underline">
|
||||||
|
here
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</RegStyle>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
export default Reg;
|
export default Reg;
|
||||||
|
|
|
@ -1,106 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
|
@ -1,5 +1,6 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"baseUrl": "."
|
"baseUrl": ".",
|
||||||
|
"paths": { "@pages/*": ["pages/*"] }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -738,6 +738,19 @@
|
||||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
|
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
|
||||||
},
|
},
|
||||||
|
"history": {
|
||||||
|
"version": "4.10.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
|
||||||
|
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.1.2",
|
||||||
|
"loose-envify": "^1.2.0",
|
||||||
|
"resolve-pathname": "^3.0.0",
|
||||||
|
"tiny-invariant": "^1.0.2",
|
||||||
|
"tiny-warning": "^1.0.0",
|
||||||
|
"value-equal": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"hoist-non-react-statics": {
|
"hoist-non-react-statics": {
|
||||||
"version": "3.3.2",
|
"version": "3.3.2",
|
||||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||||
|
@ -775,6 +788,11 @@
|
||||||
"has": "^1.0.3"
|
"has": "^1.0.3"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"isarray": {
|
||||||
|
"version": "0.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||||
|
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||||
|
},
|
||||||
"js-tokens": {
|
"js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
|
@ -808,6 +826,15 @@
|
||||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"mini-create-react-context": {
|
||||||
|
"version": "0.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||||
|
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.12.1",
|
||||||
|
"tiny-warning": "^1.0.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"ms": {
|
"ms": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||||
|
@ -870,6 +897,14 @@
|
||||||
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
|
||||||
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
|
"integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
|
||||||
},
|
},
|
||||||
|
"path-to-regexp": {
|
||||||
|
"version": "1.8.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||||
|
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||||
|
"requires": {
|
||||||
|
"isarray": "0.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"path-type": {
|
"path-type": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
|
||||||
|
@ -942,6 +977,44 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||||
},
|
},
|
||||||
|
"react-router": {
|
||||||
|
"version": "5.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
|
||||||
|
"integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.12.13",
|
||||||
|
"history": "^4.9.0",
|
||||||
|
"hoist-non-react-statics": "^3.1.0",
|
||||||
|
"loose-envify": "^1.3.1",
|
||||||
|
"mini-create-react-context": "^0.4.0",
|
||||||
|
"path-to-regexp": "^1.7.0",
|
||||||
|
"prop-types": "^15.6.2",
|
||||||
|
"react-is": "^16.6.0",
|
||||||
|
"tiny-invariant": "^1.0.2",
|
||||||
|
"tiny-warning": "^1.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react-is": {
|
||||||
|
"version": "16.13.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-router-dom": {
|
||||||
|
"version": "5.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
|
||||||
|
"integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.12.13",
|
||||||
|
"history": "^4.9.0",
|
||||||
|
"loose-envify": "^1.3.1",
|
||||||
|
"prop-types": "^15.6.2",
|
||||||
|
"react-router": "5.2.1",
|
||||||
|
"tiny-invariant": "^1.0.2",
|
||||||
|
"tiny-warning": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-transition-group": {
|
"react-transition-group": {
|
||||||
"version": "4.4.2",
|
"version": "4.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
|
||||||
|
@ -973,6 +1046,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
|
||||||
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
|
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
|
||||||
},
|
},
|
||||||
|
"resolve-pathname": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
|
||||||
|
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
|
||||||
|
},
|
||||||
"safe-buffer": {
|
"safe-buffer": {
|
||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||||
|
@ -1042,6 +1120,16 @@
|
||||||
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
|
||||||
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
|
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
|
||||||
},
|
},
|
||||||
|
"tiny-invariant": {
|
||||||
|
"version": "1.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
|
||||||
|
"integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg=="
|
||||||
|
},
|
||||||
|
"tiny-warning": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||||
|
},
|
||||||
"to-fast-properties": {
|
"to-fast-properties": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||||
|
@ -1055,6 +1143,11 @@
|
||||||
"object-assign": "^4.1.1"
|
"object-assign": "^4.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"value-equal": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
|
||||||
|
},
|
||||||
"yaml": {
|
"yaml": {
|
||||||
"version": "1.10.2",
|
"version": "1.10.2",
|
||||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
|
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
|
||||||
|
|
|
@ -19,8 +19,9 @@
|
||||||
"@mui/material": "^5.4.0",
|
"@mui/material": "^5.4.0",
|
||||||
"@mui/styled-engine-sc": "^5.3.0",
|
"@mui/styled-engine-sc": "^5.3.0",
|
||||||
"next": "12.0.9",
|
"next": "12.0.9",
|
||||||
"react": "17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
|
"react-router-dom": "^5.3.0",
|
||||||
"styled-components": "^5.3.3"
|
"styled-components": "^5.3.3"
|
||||||
},
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
|
|
@ -1,9 +1,14 @@
|
||||||
import '../styles/globals.css'
|
import "../styles/globals.css";
|
||||||
import '../styles/logostyles.css'
|
import "../styles/logostyles.css";
|
||||||
import '../components/Reg/styles.css'
|
import "../styles/styles.css";
|
||||||
|
import { UserAuthProvider } from "./user/usercontext";
|
||||||
|
|
||||||
function MyApp({ Component, pageProps }) {
|
function MyApp({ Component, pageProps }) {
|
||||||
return <Component {...pageProps} />
|
return (
|
||||||
|
<UserAuthProvider>
|
||||||
|
<Component {...pageProps} />
|
||||||
|
</UserAuthProvider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default MyApp
|
export default MyApp;
|
||||||
|
|
|
@ -1,25 +1,29 @@
|
||||||
import { useState } from 'react'
|
import { useState, useMemo } from "react";
|
||||||
import Head from 'next/head'
|
import Head from "next/head";
|
||||||
import HomeSection from "components/HomeSection/homeSection"
|
import HomeSection from "components/HomeSection/homeSection";
|
||||||
import NavBar from "components/NavBar";
|
import NavBar from "components/NavBar";
|
||||||
import Features from 'components/Features'
|
import Features from "components/Features";
|
||||||
|
import Reg from "components/Reg/Reg";
|
||||||
|
import Login from "components/Login/Login";
|
||||||
|
import { UserAuthProvider, UserContext } from "./user/usercontext";
|
||||||
|
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [shortUrl, setShortUrl] = useState(null)
|
const [shortUrl, setShortUrl] = useState(null);
|
||||||
const [longURL, setLongURL] = useState('')
|
const [longURL, setLongURL] = useState("");
|
||||||
return (
|
|
||||||
<div className={""}>
|
|
||||||
<Head>
|
|
||||||
<title>URL MiniFy</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<main className={"main-bg"}>
|
return (
|
||||||
<NavBar />
|
<>
|
||||||
<HomeSection />
|
<Head>
|
||||||
<Features/>
|
<title>URL MiniFy</title>
|
||||||
</main>
|
<link rel="icon" href="/favicon.ico" />
|
||||||
</div>
|
</Head>
|
||||||
)
|
|
||||||
|
<main className={"main-bg"}>
|
||||||
|
<NavBar />
|
||||||
|
<HomeSection />
|
||||||
|
<Features />
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { useState } from "react";
|
||||||
|
import Head from "next/head";
|
||||||
|
import NavBar from "components/NavBar";
|
||||||
|
import Features from "components/Features";
|
||||||
|
import Login from "components/Login/Login";
|
||||||
|
|
||||||
|
export default function signup() {
|
||||||
|
return (
|
||||||
|
<div className="flex-column">
|
||||||
|
<NavBar />
|
||||||
|
<Login />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { createContext } from "react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const UserAuth = createContext({
|
||||||
|
user: null,
|
||||||
|
login: () => {},
|
||||||
|
logout: () => {},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const UserAuthProvider = ({ children }) => {
|
||||||
|
const [user, setUser] = useState(null);
|
||||||
|
const login = () => {
|
||||||
|
setUser("default");
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
setUser(null);
|
||||||
|
};
|
||||||
|
const context = { user, login, logout };
|
||||||
|
|
||||||
|
return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserAuth;
|
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
|
@ -0,0 +1,107 @@
|
||||||
|
@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;
|
||||||
|
}
|
Loading…
Reference in New Issue