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

Resolved conflits

This commit is contained in:
unknown 2022-03-08 11:25:39 +05:30
parent 3acfa01d13
commit 532871ac24
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 HomeSectionStyle from './HomeSection.style'
import Link from 'next/link'
import { motion } from 'framer-motion'
import Image from 'next/image'
import Axios from 'helpers/Axios'
import { Alert, Button, Collapse, IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
import QRCode from 'qrcode'
import { signup } from '@pages/signup'
import NotFound from '@pages/404'
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 = {
marginTop: '1.8em',
}
@ -22,6 +59,7 @@ function HomeSection(props) {
const setMinfy = async () => {
props.setLongUrl('')
setOpen(false)
setDisabled(true)
let res
@ -59,12 +97,32 @@ function HomeSection(props) {
}
}
const text1 = "Url";
const text2 = "MiniFy";
return (
<HomeSectionStyle>
<div className="content">
<h1 className={styles.title}>URL MINIFY</h1>
<div className={styles.searchBox}>
<motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible">
<div style={{ display: 'flex', marginBottom: '20px' }}>
{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
className={styles.search}
placeholder="Enter the url to be minified......"
@ -77,22 +135,23 @@ function HomeSection(props) {
variant={'contained'}
disabled={disabled}
className={styles.btn}
component={motion.div}
whileHover={{ scale: 1.15 }}
id="minify"
onClick={setMinfy}
>
MINIFY
</Button>
</div>
<div className={styles.info}>
<h3>
</motion.div>
<div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
<motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
Need more advanced features? |{' '}
<Link href="/signup">
<span style={{ textDecoration: 'underline' }}>
Create an account
<span style={{ textDecoration: 'underline', cursor: 'pointer' }} >
<a href={signup}>Create an account</a>
</span>
</Link>
</h3>
</motion.h3>
</div>
{
@ -112,10 +171,10 @@ function HomeSection(props) {
)
}
</div>
<Collapse in={open}>
<Alert
className={styles.showUrl}
className={styles.showUrl}
action={
<IconButton
aria-label="close"
@ -139,7 +198,6 @@ function HomeSection(props) {
</IconButton>
</Alert>
</Collapse>
</HomeSectionStyle>
)
}

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

@ -10,5 +10,7 @@ export default styled.section`
justify-content: center;
align-items: center;
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 { 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() {
return (
<div className="logo-wrapper">
<svg
className="logo"
<motion.svg
initial={{ rotate: -180 }}
animate={{ rotate: 0 }}
class="logo"
data-name="Layer 4"
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"
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"
transform="translate(-28.21 -17.61)"
fill="#fff"
stroke="white"
strokeWidth="3"
stroke-linecap="round"
fill="none"
/>
</svg>
<p className="logo-text">URL MINIFY</p>
</motion.svg>
</div>
)
}

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

@ -1,4 +1,5 @@
import React, { useContext } from 'react'
import { motion } from 'framer-motion'
import {
Avatar,
Box,
@ -49,8 +50,9 @@ function Index(props) {
>
<Container maxWidth="xl">
<Toolbar disableGutters="false">
<Typography variant="h4" sx={{ fontWeight: 'bold' }}>
URL MINIFY
<span><Logo /></span>
<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>
<Box
sx={{
@ -60,7 +62,7 @@ function Index(props) {
}}
>
<IconButton
size="large"
size="medium"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
@ -92,15 +94,15 @@ function Index(props) {
href="https://github.com/BRAVO68WEB/url-minify"
target={'_blank'}
>
<Typography textAlign="center" sx={{ display: 'flex' }}>
<GitHubIcon fontSize="small" />
<Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
<GitHubIcon fontSize="medium" />
GitHub
</Typography>
</a>
</MenuItem>
<MenuItem onClick={handleCloseNavMenu}>
<a href="NotFound">
<Typography textAlign="center" sx={{ display: 'flex' }}>
<a href={NotFound}>
<Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
CREDITS
</Typography>
</a>
@ -127,24 +129,33 @@ function Index(props) {
color: 'white',
display: 'flex',
gap: '10px',
fontSize: 'h5.fontSize',
fontFamily: 'sans-serif',
fontStyle: 'bold',
fontSize: 'h6.fontSize',
fontFamily: "'Open Sans', sans-serif;",
textTransform: 'capitalize',
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
</Button>
</a>
<a href="NotFound">
<a href={NotFound}>
<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}
sx={{
color: 'white',
display: 'block',
fontSize: 'h5.fontSize',
fontSize: 'h6.fontSize',
fontFamily: "'Open Sans', sans-serif;",
fontWeight: 'bold',
}}
>
CREDITS
@ -187,7 +198,16 @@ function Index(props) {
</Menu>
</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>
</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",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"framer-motion": "^6.2.8",
"nanoid": "^3.2.0",
"next": "12.0.9",
"qrcode": "^1.5.0",

3
frontend/pages/index.js
View File

@ -15,6 +15,9 @@ export default function Home() {
<Head>
<title>URL MiniFy</title>
<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>
<main className={'main-bg'}>

3
frontend/pages/login.js
View File

@ -1,5 +1,4 @@
import { useState } from 'react'
import Head from 'next/head'
import React from 'react'
import NavBar from 'components/NavBar'
import Features from 'components/Features'
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;
font-size: 5.5rem;
font-weight: bold;
color: white;
margin-bottom: 30px;
text-align: center;
}
.searchBox{
.searchBox {
position: relative;
}
.search{
font-size: 1.5rem;
.search {
font-family: 'Montserrat Alternates', sans-serif;
font-size: 1.3rem;
border-radius: 50px;
padding: 1rem;
width: 500px;
@ -22,7 +26,7 @@
margin-bottom: 15px;
}
.btn{
.btn {
font-weight: bold !important;
position: absolute !important;
align-items: center !important;
@ -31,42 +35,42 @@
height: 40px;
width: 100px;
border-radius: 50px !important ;
}
}
.info{
.info {
color: #fff;
text-align: center;
}
.showUrl{
.showUrl {
margin-top: 1rem;
}
@media (max-width: 600px) {
.title{
font-size: clamp(1rem, 15vw, 4rem);
.letter {
font-size: clamp(1rem, 15vw, 4rem);
}
.search{
.search {
width: 90vw;
font-size: 1.2rem;
}
.showUrl{
.showUrl {
width: 90vw;
}
}
@media (max-width: 400px) {
.btn{
.btn {
top: 100%;
width: 90vw;
font-size: 1.5rem;
}
.info{
.info {
margin-top: 50px;
width: 90vw;
font-size: 1rem;
}
}
}

12
frontend/styles/globals.css
View File

@ -6,6 +6,7 @@ body {
overflow-x: hidden;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
overflow-y: auto;
}
a {
@ -37,5 +38,14 @@ section {
background-position: center;
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