bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #101 from 404-Terror/feat#86 

Feat#86(Added Animations)
This commit is contained in:
Lethal_Moana 2022-03-08 12:34:23 +05:30 committed by GitHub
parent 0fcd1de9e1 38c3d13997
commit 2268a23e66
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 6112 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/components/HomeSection/HomeSection.jsx
View File

@ -1,15 +1,52 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import HomeSectionStyle from './HomeSection.style' import HomeSectionStyle from './HomeSection.style'
import Link from 'next/link' import Link from 'next/link'
import { motion } from 'framer-motion'
import Image from 'next/image' import Image from 'next/image'
import Axios from 'helpers/Axios' import Axios from 'helpers/Axios'
import { Alert, Button, Collapse, IconButton } from '@mui/material' import { Alert, Button, Collapse, IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close' import CloseIcon from '@mui/icons-material/Close'
import ContentCopyIcon from '@mui/icons-material/ContentCopy' import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import { signup } from '@pages/signup'
import NotFound from '@pages/404' import NotFound from '@pages/404'
import styles from '../../styles/HomeSection.module.css' import styles from '../../styles/HomeSection.module.css'
const spanVariants = {
visible: { y: 0, scaleY: 1 },
hover: {
y: [-1, -2, -2.8, 0.9, 0],
scaleY: [1, 1.3, 0.8, 1.2, 1],
color: '#4A1C40'
}
}
const list = {
hidden: {
opacity: 0,
transition: {
when: 'afterChildren'
}
},
visible: {
opacity: 1,
transition: {
when: 'beforeChildren',
staggerChildren: 0.3
}
}
}
const effect = {
hidden: {
opacity: 0,
},
visible: {
opacity: 1,
y: [-1, -1.9, -2.7, 1],
scaleY: [1, 1.3, 0.8, 1]
}
}
const QR = { const QR = {
marginTop: '1.8em', marginTop: '1.8em',
} }
@ -22,6 +59,7 @@ function HomeSection(props) {
const setMinfy = async () => { const setMinfy = async () => {
props.setLongUrl('')
setOpen(false) setOpen(false)
setDisabled(true) setDisabled(true)
let res let res
@ -59,12 +97,32 @@ function HomeSection(props) {
} }
} }
const text1 = "Url";
const text2 = "MiniFy";
return ( return (
<HomeSectionStyle> <HomeSectionStyle>
<div className="content"> <div className="content">
<h1 className={styles.title}>URL MINIFY</h1> <motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible">
<div style={{ display: 'flex', marginBottom: '20px' }}>
<div className={styles.searchBox}> {text1.split("").map((Letter, id) => (
<motion.div variants={effect}>
<span className={styles.head} key={id}>
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
</span></motion.div>
))}
&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div style={{ display: 'flex' }}>
{text2.split("").map((Letter, id) => (
<motion.div variants={effect}><span className={styles.head} key={id}>
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
</span></motion.div>
))}
</div>
</motion.span>
<motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>
<input <input
className={styles.search} className={styles.search}
placeholder="Enter the url to be minified......" placeholder="Enter the url to be minified......"
@ -77,22 +135,23 @@ function HomeSection(props) {
variant={'contained'} variant={'contained'}
disabled={disabled} disabled={disabled}
className={styles.btn} className={styles.btn}
component={motion.div}
whileHover={{ scale: 1.15 }}
id="minify" id="minify"
onClick={setMinfy} onClick={setMinfy}
> >
MINIFY MINIFY
</Button> </Button>
</div> </motion.div>
<div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
<div className={styles.info}> <motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
<h3>
Need more advanced features? |{' '} Need more advanced features? |{' '}
<Link href="/signup"> <Link href="/signup">
<span style={{ textDecoration: 'underline' }}> <span style={{ textDecoration: 'underline', cursor: 'pointer' }} >
Create an account <a href={signup}>Create an account</a>
</span> </span>
</Link> </Link>
</h3> </motion.h3>
</div> </div>
{ {
@ -112,10 +171,10 @@ function HomeSection(props) {
) )
} }
</div> </div>
<Collapse in={open}> <Collapse in={open}>
<Alert <Alert
className={styles.showUrl} className={styles.showUrl}
action={ action={
<IconButton <IconButton
aria-label="close" aria-label="close"
@ -139,7 +198,6 @@ function HomeSection(props) {
</IconButton> </IconButton>
</Alert> </Alert>
</Collapse> </Collapse>
</HomeSectionStyle> </HomeSectionStyle>
) )
} }

2
frontend/components/HomeSection/HomeSection.style.js
View File

@ -10,5 +10,7 @@ export default styled.section`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.title{display: flex;
margin-bottom:0.5rem;}
} }
` `

39
frontend/components/NavBar/Logo.js
View File

@ -1,26 +1,47 @@
import React from 'react' import React from 'react'
import { motion } from 'framer-motion'
const pathvariant = {
initial: { pathLength: 0, opacity: 0 },
animate: { pathLength: 1, opacity: 1, transition: { duration: 1.5, yoyo: Infinity, ease: 'easeInOut' } }
}
export default function Logo() { export default function Logo() {
return ( return (
<div className="logo-wrapper"> <div className="logo-wrapper">
<svg <motion.svg
className="logo" initial={{ rotate: -180 }}
animate={{ rotate: 0 }}
class="logo"
data-name="Layer 4" data-name="Layer 4"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 53.4 53.31" viewBox="0 0 65 65"
> >
<path <motion.path
variants={pathvariant}
animate="animate"
initial="initial"
d="M58.84,53.91a9.2,9.2,0,0,1-6.54-2.72L50.14,49a2.59,2.59,0,1,1,3.67-3.66L56,47.53a4.07,4.07,0,0,0,5.76,0L75.24,34.08a4.08,4.08,0,0,0,0-5.76L70.94,24a4.08,4.08,0,0,0-5.76,0l-6.76,6.73A2.59,2.59,0,0,1,54.76,27l6.76-6.73a9.27,9.27,0,0,1,13.09,0l4.31,4.33a9.27,9.27,0,0,1,0,13.09L65.39,51.21A9.22,9.22,0,0,1,58.84,53.91Z" d="M58.84,53.91a9.2,9.2,0,0,1-6.54-2.72L50.14,49a2.59,2.59,0,1,1,3.67-3.66L56,47.53a4.07,4.07,0,0,0,5.76,0L75.24,34.08a4.08,4.08,0,0,0,0-5.76L70.94,24a4.08,4.08,0,0,0-5.76,0l-6.76,6.73A2.59,2.59,0,0,1,54.76,27l6.76-6.73a9.27,9.27,0,0,1,13.09,0l4.31,4.33a9.27,9.27,0,0,1,0,13.09L65.39,51.21A9.22,9.22,0,0,1,58.84,53.91Z"
transform="translate(-28.21 -17.61)" transform="translate(-28.21 -17.61)"
fill="#fff" stroke="white"
stroke-linecap="round"
strokeWidth="3"
fill="none"
/> />
<path <motion.path
variants={pathvariant}
animate="animate"
initial="initial"
d="M41.77,70.93a9.28,9.28,0,0,1-6.55-2.72l-4.31-4.33a9.27,9.27,0,0,1,0-13.09L44.44,37.33a9.26,9.26,0,0,1,13.09,0l2.16,2.16A2.59,2.59,0,1,1,56,43.17L53.86,41a4.07,4.07,0,0,0-5.76,0L34.59,54.46a4.08,4.08,0,0,0,0,5.76l4.32,4.33a4.08,4.08,0,0,0,5.76,0l6.75-6.73a2.59,2.59,0,1,1,3.66,3.67l-6.75,6.73A9.26,9.26,0,0,1,41.77,70.93Z" d="M41.77,70.93a9.28,9.28,0,0,1-6.55-2.72l-4.31-4.33a9.27,9.27,0,0,1,0-13.09L44.44,37.33a9.26,9.26,0,0,1,13.09,0l2.16,2.16A2.59,2.59,0,1,1,56,43.17L53.86,41a4.07,4.07,0,0,0-5.76,0L34.59,54.46a4.08,4.08,0,0,0,0,5.76l4.32,4.33a4.08,4.08,0,0,0,5.76,0l6.75-6.73a2.59,2.59,0,1,1,3.66,3.67l-6.75,6.73A9.26,9.26,0,0,1,41.77,70.93Z"
transform="translate(-28.21 -17.61)" transform="translate(-28.21 -17.61)"
fill="#fff" stroke="white"
strokeWidth="3"
stroke-linecap="round"
fill="none"
/> />
</svg> </motion.svg>
<p className="logo-text">URL MINIFY</p>
</div> </div>
) )
} }

48
frontend/components/NavBar/index.js
View File

@ -1,4 +1,5 @@
import React, { useContext } from 'react' import React, { useContext } from 'react'
import { motion } from 'framer-motion'
import { import {
Avatar, Avatar,
Box, Box,
@ -49,8 +50,9 @@ function Index(props) {
> >
<Container maxWidth="xl"> <Container maxWidth="xl">
<Toolbar disableGutters="false"> <Toolbar disableGutters="false">
<Typography variant="h4" sx={{ fontWeight: 'bold' }}> <span><Logo /></span>
URL MINIFY <Typography component={motion.div} initial={{ y: -50, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { delay: 1 } }} variant="h5" sx={{ fontWeight: 'bold', fontFamily: "'Montserrat Alternates', sans-serif;" }}>
UrlMiniFy
</Typography> </Typography>
<Box <Box
sx={{ sx={{
@ -60,7 +62,7 @@ function Index(props) {
}} }}
> >
<IconButton <IconButton
size="large" size="medium"
aria-label="account of current user" aria-label="account of current user"
aria-controls="menu-appbar" aria-controls="menu-appbar"
aria-haspopup="true" aria-haspopup="true"
@ -92,15 +94,15 @@ function Index(props) {
href="https://github.com/BRAVO68WEB/url-minify" href="https://github.com/BRAVO68WEB/url-minify"
target={'_blank'} target={'_blank'}
> >
<Typography textAlign="center" sx={{ display: 'flex' }}> <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
<GitHubIcon fontSize="small" /> <GitHubIcon fontSize="medium" />
GitHub GitHub
</Typography> </Typography>
</a> </a>
</MenuItem> </MenuItem>
<MenuItem onClick={handleCloseNavMenu}> <MenuItem onClick={handleCloseNavMenu}>
<a href="NotFound"> <a href={NotFound}>
<Typography textAlign="center" sx={{ display: 'flex' }}> <Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
CREDITS CREDITS
</Typography> </Typography>
</a> </a>
@ -127,24 +129,33 @@ function Index(props) {
color: 'white', color: 'white',
display: 'flex', display: 'flex',
gap: '10px', gap: '10px',
fontSize: 'h5.fontSize', fontSize: 'h6.fontSize',
fontFamily: 'sans-serif', fontFamily: "'Open Sans', sans-serif;",
fontStyle: 'bold',
textTransform: 'capitalize', textTransform: 'capitalize',
fontWeight: 'bold', fontWeight: 'bold',
}} }}
component={motion.div}
initial={{ y: -50, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
> >
<GitHubIcon fontSize="large" /> <GitHubIcon fontSize="medium" />
GitHub GitHub
</Button> </Button>
</a> </a>
<a href="NotFound"> <a href={NotFound}>
<Button <Button
component={motion.div}
initial={{ y: -50, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
onClick={handleCloseNavMenu} onClick={handleCloseNavMenu}
sx={{ sx={{
color: 'white', color: 'white',
display: 'block', display: 'block',
fontSize: 'h5.fontSize', fontSize: 'h6.fontSize',
fontFamily: "'Open Sans', sans-serif;",
fontWeight: 'bold',
}} }}
> >
CREDITS CREDITS
@ -187,7 +198,16 @@ function Index(props) {
</Menu> </Menu>
</Box> </Box>
) : ( ) : (
<Typography onClick={login}> <Typography sx={{
color: 'white',
display: 'flex',
fontSize: 'h6.fontSize',
fontFamily: "'Open Sans', sans-serif;",
fontWeight: 'bold',
}} component={motion.div}
initial={{ y: -50, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }} onClick={login}>
<Link href="./login">LOGIN</Link> <Link href="./login">LOGIN</Link>
</Typography> </Typography>
)} )}

4367
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
frontend/package.json
View File

@ -22,6 +22,7 @@
"apexcharts": "^3.33.1", "apexcharts": "^3.33.1",
"axios": "^0.26.0", "axios": "^0.26.0",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
"framer-motion": "^6.2.8",
"cors": "^2.8.5", "cors": "^2.8.5",
"nanoid": "^3.2.0", "nanoid": "^3.2.0",
"next": "12.0.9", "next": "12.0.9",

3
frontend/pages/index.js
View File

@ -15,6 +15,9 @@ export default function Home() {
<Head> <Head>
<title>URL MiniFy</title> <title>URL MiniFy</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
</Head> </Head>
<main className={'main-bg'}> <main className={'main-bg'}>

3
frontend/pages/login.js
View File

@ -1,5 +1,4 @@
import { useState } from 'react' import React from 'react'
import Head from 'next/head'
import NavBar from 'components/NavBar' import NavBar from 'components/NavBar'
import Features from 'components/Features' import Features from 'components/Features'
import Login from 'components/Login/Login' import Login from 'components/Login/Login'

36
frontend/styles/HomeSection.module.css
View File

@ -1,18 +1,22 @@
.title { .head {
font-family: 'Montserrat Alternates', sans-serif;
color: #fff;
margin-bottom: 30px;
text-shadow: 3px 2px 1px black;
line-height: 1.15; line-height: 1.15;
font-size: 5.5rem; font-size: 5.5rem;
font-weight: bold; font-weight: bold;
color: white;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
} }
.searchBox{ .searchBox {
position: relative; position: relative;
} }
.search{ .search {
font-size: 1.5rem; font-family: 'Montserrat Alternates', sans-serif;
font-size: 1.3rem;
border-radius: 50px; border-radius: 50px;
padding: 1rem; padding: 1rem;
width: 500px; width: 500px;
@ -22,7 +26,7 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
.btn{ .btn {
font-weight: bold !important; font-weight: bold !important;
position: absolute !important; position: absolute !important;
align-items: center !important; align-items: center !important;
@ -31,42 +35,42 @@
height: 40px; height: 40px;
width: 100px; width: 100px;
border-radius: 50px !important ; border-radius: 50px !important ;
} }
.info{ .info {
color: #fff; color: #fff;
text-align: center; text-align: center;
} }
.showUrl{ .showUrl {
margin-top: 1rem; margin-top: 1rem;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.title{ .letter {
font-size: clamp(1rem, 15vw, 4rem); font-size: clamp(1rem, 15vw, 4rem);
} }
.search{ .search {
width: 90vw; width: 90vw;
font-size: 1.2rem; font-size: 1.2rem;
} }
.showUrl{ .showUrl {
width: 90vw; width: 90vw;
} }
} }
@media (max-width: 400px) { @media (max-width: 400px) {
.btn{ .btn {
top: 100%; top: 100%;
width: 90vw; width: 90vw;
font-size: 1.5rem; font-size: 1.5rem;
} }
.info{ .info {
margin-top: 50px; margin-top: 50px;
width: 90vw; width: 90vw;
font-size: 1rem; font-size: 1rem;
} }
} }

12
frontend/styles/globals.css
View File

@ -6,6 +6,7 @@ body {
overflow-x: hidden; overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
overflow-y: auto;
} }
a { a {
@ -37,5 +38,14 @@ section {
background-position: center; background-position: center;
background-size: cover; background-size: cover;
} }
body::-webkit-scrollbar {
width: 10px;
z-index: 100;
background-color: white;
}
body::-webkit-scrollbar-thumb {
background-color: rgb(61, 61, 61);
border-width: 2px 0 2px;
border-radius: 10px;
}

1572
frontend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff