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

Merge branch 'main' into Duplicate-Alias

This commit is contained in:
Mrudul Kolambe 2022-03-14 23:19:40 +05:30 committed by GitHub
parent 1b6a115e13 79fcb20d5a
commit e5e5d10f45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 3856 additions and 1223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/Dashboard/Dashboard.style.js
View File

@ -22,11 +22,13 @@ export default styled.div`
height: 100%;
color: white !important;
transition: all 0.25s;
overflow: auto;
@media (max-width: 1100px) {
left: -300px;
position: absolute;
z-index: 100;
padding-bottom: 100px;
}
/* for small screens */
@ -102,12 +104,14 @@ export default styled.div`
width: 100%;
background-color: transparent;
border: none;
border-left: 5px solid transparent;
outline: none;
color: white;
font-size: 1.1rem;
margin: 0;
padding: 10px 10px 10px 20px;
text-align: left;
cursor: pointer;
:hover {
background-color: #07344a;
color: #43bfd6;

32
frontend/components/Features/index.js
View File

@ -1,50 +1,36 @@
import * as React from 'react'
import {
Avatar,
Box,
Button,
Container,
IconButton,
Menu,
MenuItem,
Toolbar,
Tooltip,
Typography,
alpha,
AppBar,
} from '@mui/material'
import { Box } from '@mui/material'
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
import NotFound from '@pages/404'
import styles from '../../styles/Features.module.css'
import { motion } from 'framer-motion'
export default function Index() {
return (
<Box className={styles.container}>
<Box className={styles.heading}>
<h1> SHORTEN, SHARE AND ANALYZE</h1>
<h1> SHORTEN, SHARE & ANALYSE</h1>
<br />
</Box>
<Box className={styles.featuresContainer}>
<Box className={styles.feature}>
<a className="Link" href="NotFound">
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
<a href="NotFound">
<RemoveRedEyeIcon className={styles.icons} />
<h4>VIEW COUNTER</h4>
</a>
</Box>
<Box className={styles.feature}>
<a className="Link" href="NotFound">
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
<a href="NotFound">
<QrCodeScannerIcon className={styles.icons} />
<h4>QR CODE</h4>
</a>
</Box>
<Box className={styles.feature}>
<a className="Link" href="NotFound">
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
<a href="NotFound">
<RocketLaunchIcon className={styles.icons} />
<h4>ROBUST API</h4>
</a>

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

@ -9,8 +9,9 @@ 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'
import toast from 'react-hot-toast'
import { Toaster } from 'react-hot-toast'
const spanVariants = {
visible: { y: 0, scaleY: 1 },
@ -31,7 +32,7 @@ const list = {
opacity: 1,
transition: {
when: 'beforeChildren',
staggerChildren: 0.3
staggerChildren: 0.27
}
}
}
@ -54,36 +55,40 @@ const QR = {
function HomeSection(props) {
let qrCode
let minifiedUrl
const [disabled, setDisabled] = useState(false)
const [open, setOpen] = useState(false)
const [disabled, setdisabled] = useState(false)
const setMinfy = async () => {
props.setLongUrl('')
setOpen(false)
setDisabled(true)
let res
try {
res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl,
})
} catch (err) {
console.error(err)
return
if (props.longUrl === '') {
props.setShowQrCode(false)
setOpen(false)
toast.error("Please enter a valid URL !!");
}
else {
setdisabled(true)
setTimeout(() => { setdisabled(false) }, 6000)
setOpen(false)
let res
try {
res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl,
})
} catch (err) {
console.error(err)
return
}
toast.success("Successfully shortened your URL !!")
const data = await res.data
console.log(`Data: ${data}`);
const data = await res.data
console.log(`Data: ${data}`);
props.setShortUrl(data.minifiedUrl)
minifiedUrl = data.minifiedUrl
navigator.clipboard.writeText(props.shortUrl)
if (minifiedUrl) {
generateQR()
props.setShortUrl(data.minifiedUrl)
minifiedUrl = data.minifiedUrl
if (minifiedUrl) {
generateQR()
}
setOpen(true)
}
await navigator.clipboard.writeText(data.minifiedUrl)
setOpen(true)
setDisabled(false)
}
// Generate QRCODE for the generated link
@ -97,6 +102,11 @@ function HomeSection(props) {
}
}
const handlecopy = async () => {
navigator.clipboard.writeText(props.shortUrl)
toast.success("URL copied to clipboard !!")
}
const text1 = "Url";
const text2 = "MiniFy";
@ -105,25 +115,19 @@ function HomeSection(props) {
<HomeSectionStyle>
<div className="content">
<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>
{text1.split("").map((Letter, id) => (
<motion.span variants={effect} className={styles.head} key={id}>
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
</motion.span>
))}
&nbsp;&nbsp;&nbsp;&nbsp;
{text2.split("").map((Letter, id) => (
<motion.span variants={effect} className={styles.head} key={id}>
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
</motion.span>
))}
</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......"
@ -158,8 +162,8 @@ function HomeSection(props) {
{
// show QR code if a url is generated
props.showQrCode ? (
<div style={QR}>
props.showQrCode && open ? (
<motion.div initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { ease: 'easeInOut', duration: 1 } }} style={QR}>
<Image
src={props.qrData}
placeholder="blur"
@ -167,7 +171,7 @@ function HomeSection(props) {
width={150}
height={150}
/>
</div>
</motion.div>
) : (
''
)
@ -182,25 +186,28 @@ function HomeSection(props) {
aria-label="close"
color="inherit"
size="small"
sx={{ padding: '5px 0 0 0' }}
onClick={() => {
setOpen(false)
}}
>
<CloseIcon fontSize="inherit" />
<CloseIcon sx={{ marginRight: '10px', '&:hover': { color: 'red', background: '#D1D1D1' } }} />
</IconButton>
}
sx={{ mb: 2 }}
sx={{ mb: 2, fontWeight: 'bold', color: 'black' }}
>
Your Shortened URL: {props.shortUrl}{' '}
<IconButton
onClick={() => navigator.clipboard.writeText(props.shortUrl)}
style={{ marginLeft: '15px', padding: 0 }}
onClick={handlecopy}
sx={{ marginLeft: '15px', padding: 0, '&:hover': { color: 'blue' } }}
>
<ContentCopyIcon />
</IconButton>
</Alert>
</Collapse>
<Toaster position="bottom-right" toastOptions={{ duration: 2500, style: { padding: '5px 10px', borderRadius: '30px', fontWeight: 'bold', fontSize: '14px' } }} />
</HomeSectionStyle>
)
}

2642
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
frontend/package.json
View File

@ -22,8 +22,8 @@
"apexcharts": "^3.33.1",
"axios": "^0.26.0",
"bootstrap": "^5.1.3",
"framer-motion": "^6.2.8",
"cors": "^2.8.5",
"framer-motion": "^6.2.8",
"nanoid": "^3.2.0",
"next": "12.0.9",
"qrcode": "^1.5.0",
@ -31,6 +31,7 @@
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.2.0",
"react-dom": "17.0.2",
"react-hot-toast": "^2.2.0",
"react-page-loading": "^1.0.2",
"styled-components": "^5.3.3",
"styled-jsx": "^5.0.0"

4
frontend/pages/index.js
View File

@ -3,6 +3,7 @@ import Head from 'next/head'
import HomeSection from 'components/HomeSection/HomeSection'
import NavBar from 'components/NavBar'
import Features from 'components/Features'
import Toaster from 'react-hot-toast'
export default function Home() {
const [shortUrl, setShortUrl] = useState(null)
@ -15,6 +16,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=Cabin+Sketch:wght@700&family=IBM+Plex+Serif:ital@1&family=Monoton&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&family=Poppins&family=Share+Tech+Mono&family=Special+Elite&display=swap" rel="stylesheet" />
</Head>
<main className={'main-bg'}>

94
frontend/styles/Features.module.css
View File

@ -1,43 +1,61 @@
.heading{
width: 90%;
text-align: center;
margin: 0 auto;
.container {
padding-bottom: 3rem;
}
.heading {
width: 90%;
text-align: center;
margin: 0 auto;
font-size: 1.3rem;
color: #fff;
font-family: 'Poppins', sans-serif;
}
.featuresContainer{
display: flex;
flex-direction: row;
width: 500px;
margin: 0 auto;
padding: 1rem;
align-items: center;
justify-content: space-between;
.featuresContainer {
display: flex;
flex-direction: row;
width: 500px;
margin: 0 auto;
color: #fff;
padding-bottom: 40px;
align-items: center;
justify-content: space-between;
}
.feature a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.icons {
font-size: 3.7rem !important;
}
.icons{
font-size: 3.5rem !important;
@media screen and (max-width: 500px) {
.heading {
font-size: 1.5rem;
}
.featuresContainer {
width: 90vw;
padding: 0;
flex-direction: column;
}
.feature {
width: 200px;
}
.feature a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 1rem;
margin: 10px 0;
width: 100%;
}
.icons {
font-size: clamp(2rem, 10vw, 4rem) !important;
}
.container {
padding-bottom: 7rem;
}
}
@media screen and (max-width: 500px) {
.featuresContainer{
width: 90vw;
padding: 0;
flex-direction: column;
}
.feature{
width: 200px;
}
.feature a{
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 10px 0;
width: 100%;
}
.icons{
font-size: clamp(2rem, 10vw, 4rem) !important;
}
}

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

@ -1,12 +1,11 @@
.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;
margin-bottom: 30px;
margin-bottom: 17px;
text-align: center;
}
@ -34,7 +33,7 @@
top: 5px;
height: 40px;
width: 100px;
border-radius: 50px !important ;
border-radius: 50px !important;
}
.info {
@ -44,6 +43,7 @@
.showUrl {
margin-top: 1rem;
border-radius: 25px !important;
}
@media (max-width: 600px) {
@ -53,9 +53,9 @@
.search {
width: 90vw;
font-size: 1.2rem;
font-size: 1rem;
}
.showUrl {
width: 90vw;
}
@ -73,4 +73,4 @@
width: 90vw;
font-size: 1rem;
}
}
}

2183
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff