integrated Increase View counts when visited (#73)
This commit is contained in:
Koustav Mondal
GitHub
parent
602a4004f7
commit
ed216981f3
|
|
@ -0,0 +1 @@
|
|||
.idea
|
||||
|
|
@ -99,3 +99,18 @@ module.exports.addURLAuthed = async (req, res) => {
|
|||
res.sendStatus(500)
|
||||
})
|
||||
}
|
||||
|
||||
module.exports.visitor = async (req, res) => {
|
||||
Minfy.findOneAndUpdate(
|
||||
{ alias: req.params.alias },
|
||||
{ $inc: { views: 1 } },
|
||||
{ new: true }
|
||||
)
|
||||
.then((data) => {
|
||||
res.send(`views increased`)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
res.sendStatus(500)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,4 +15,6 @@ router.patch('/edit/:id', auth, controller.updateUrlData)
|
|||
|
||||
router.delete('/delete/:id', auth, controller.deleteUrlData)
|
||||
|
||||
router.get('/:alias/views', controller.visitor)
|
||||
|
||||
module.exports = router
|
||||
|
|
|
|||
|
|
@ -1,81 +1,66 @@
|
|||
import CreateLinkStyle from "./createlink.style";
|
||||
import CreateLinkStyle from './createlink.style'
|
||||
|
||||
function Links() {
|
||||
return (
|
||||
<div className="frame">
|
||||
<h2>Create a link</h2>
|
||||
|
||||
<div className="card">
|
||||
<form action="#">
|
||||
<div className="hugediv">
|
||||
<label for="hugeInput">Huge link</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="hugeInput"
|
||||
placeholder="https://www.example.com/abc/xyz"
|
||||
/>
|
||||
</div>
|
||||
<div className="aliasdiv">
|
||||
<label for="customAlias">Custom alias</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="customAlias"
|
||||
placeholder="shorturl.com/url"
|
||||
/>
|
||||
</div>
|
||||
<div className="titlediv">
|
||||
<label for="title">Title</label>
|
||||
|
||||
function Links(){
|
||||
return(
|
||||
<div className="frame">
|
||||
<h2>
|
||||
Create a link
|
||||
</h2>
|
||||
<input type="text" id="title" placeholder="Enter the Title" />
|
||||
</div>
|
||||
<div className="textdiv">
|
||||
<label for="desc">Description</label>
|
||||
|
||||
<div className="card">
|
||||
<textarea
|
||||
name="desc"
|
||||
id="desc"
|
||||
cols="30"
|
||||
rows="10"
|
||||
placeholder="Enter the Description"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<form action="#">
|
||||
<div className="btndiv">
|
||||
<button>Cancel</button>
|
||||
|
||||
<div className="hugediv">
|
||||
<label for="hugeInput">Huge link</label>
|
||||
|
||||
<input type="text" id="hugeInput" placeholder="https://www.example.com/abc/xyz" />
|
||||
|
||||
</div>
|
||||
<div className="aliasdiv">
|
||||
<label for="customAlias">Custom alias</label>
|
||||
|
||||
<input type="text" id="customAlias" placeholder="shorturl.com/url" />
|
||||
|
||||
</div>
|
||||
<div className="titlediv">
|
||||
<label for="title">Title</label>
|
||||
|
||||
<input type="text" id="title" placeholder="Enter the Title" />
|
||||
|
||||
</div>
|
||||
<div className="textdiv">
|
||||
<label for="desc">Description</label>
|
||||
|
||||
<textarea name="desc" id="desc" cols="30" rows="10" placeholder="Enter the Description"></textarea>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div className="btndiv">
|
||||
|
||||
<button>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button type="submit" className="submit">
|
||||
Submit
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
<button type="submit" className="submit">
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateLink(){
|
||||
function CreateLink() {
|
||||
return (
|
||||
<CreateLinkStyle>
|
||||
<Links />
|
||||
</CreateLinkStyle>
|
||||
)
|
||||
}
|
||||
|
||||
return(
|
||||
|
||||
<CreateLinkStyle>
|
||||
<Links/>
|
||||
</CreateLinkStyle>
|
||||
|
||||
|
||||
|
||||
)
|
||||
|
||||
|
||||
};
|
||||
|
||||
export default CreateLink;
|
||||
export default CreateLink
|
||||
|
|
|
|||
|
|
@ -1,82 +1,77 @@
|
|||
import DashboardStyle from "./Dashboard.style";
|
||||
import DashboardStyle from './Dashboard.style'
|
||||
|
||||
function Sidebar1() {
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<div className="nav-item mb-2 brand-name"><h1>Brand Name</h1></div>
|
||||
<div className="profile">
|
||||
<div className="profile-image"><img
|
||||
src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg"/>
|
||||
</div>
|
||||
<p className="name">Hayat</p>
|
||||
<p className="profession">Product Designer</p>
|
||||
</div>
|
||||
<div className="creatButton">
|
||||
<button className={""}>Create Link</button>
|
||||
</div>
|
||||
<li className="nav-buttons">
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
Overview
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
My Links
|
||||
</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>
|
||||
Extras
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<ul>
|
||||
<div className="nav-item mb-2 brand-name">
|
||||
<h1>Brand Name</h1>
|
||||
</div>
|
||||
)
|
||||
<div className="profile">
|
||||
<div className="profile-image">
|
||||
<img src="https://png.pngtree.com/png-vector/20190307/ourlarge/pngtree-vector-edit-profile-icon-png-image_760869.jpg" />
|
||||
</div>
|
||||
<p className="name">Hayat</p>
|
||||
<p className="profession">Product Designer</p>
|
||||
</div>
|
||||
<div className="creatButton">
|
||||
<button className={''}>Create Link</button>
|
||||
</div>
|
||||
<li className="nav-buttons">
|
||||
<div className="nav-item">
|
||||
<button>Overview</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>My Links</button>
|
||||
</div>
|
||||
<div className="nav-item">
|
||||
<button>Extras</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar2() {
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<h2 className="dash">Overview</h2>
|
||||
<div className="row">
|
||||
<div className="column">Box1</div>
|
||||
<div className="column">Box2</div>
|
||||
<div className="column">Box3</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<h2 className="dash">Overview</h2>
|
||||
<div className="row">
|
||||
<div className="column">Box1</div>
|
||||
<div className="column">Box2</div>
|
||||
<div className="column">Box3</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Graph() {
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<div className="row">
|
||||
<div className="column">Daily Insight</div>
|
||||
<div className="column">
|
||||
<ul>
|
||||
<li className="list2">Api Version</li>
|
||||
<li className="list2">Frontend Version</li>
|
||||
<li className="list2">Links generated yet</li>
|
||||
<li className="list2">Total views yet</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="sidebar2">
|
||||
<div className="row">
|
||||
<div className="column">Daily Insight</div>
|
||||
<div className="column">
|
||||
<ul>
|
||||
<li className="list2">Api Version</li>
|
||||
<li className="list2">Frontend Version</li>
|
||||
<li className="list2">Links generated yet</li>
|
||||
<li className="list2">Total views yet</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<DashboardStyle>
|
||||
<Sidebar1/>
|
||||
<Sidebar2/>
|
||||
<Graph/>
|
||||
</DashboardStyle>
|
||||
);
|
||||
return (
|
||||
<DashboardStyle>
|
||||
<Sidebar1 />
|
||||
<Sidebar2 />
|
||||
<Graph />
|
||||
</DashboardStyle>
|
||||
)
|
||||
}
|
||||
|
||||
export default App;
|
||||
export default App
|
||||
|
|
|
|||
|
|
@ -1,88 +1,87 @@
|
|||
import styled from "styled-components"
|
||||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
.sidebar{
|
||||
background-color:#00253A;
|
||||
.sidebar {
|
||||
background-color: #00253a;
|
||||
float: left;
|
||||
width: 20%;
|
||||
height: 100vh;
|
||||
color:white !important;
|
||||
.brand-name{
|
||||
margin-top:40px;
|
||||
padding-left:20px;
|
||||
color: white !important;
|
||||
.brand-name {
|
||||
margin-top: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.profile{
|
||||
margin:25px 0;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
.profile {
|
||||
margin: 25px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items:center;
|
||||
.profile-image{
|
||||
max-width:35%;
|
||||
margin:auto;
|
||||
border-radius:100%;
|
||||
img{
|
||||
max-width:100%;
|
||||
border-radius:100%;
|
||||
align-items: center;
|
||||
.profile-image {
|
||||
max-width: 35%;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
.name{
|
||||
font-size:1.2rem;
|
||||
font-weight:bold;
|
||||
.name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin: 3px 0;
|
||||
}
|
||||
.profession{
|
||||
color:gray;
|
||||
font-size:0.8rem;
|
||||
font-weight:bold;
|
||||
margin: 0;
|
||||
.profession {
|
||||
color: gray;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.creatButton{
|
||||
|
||||
margin:40px auto 80px;
|
||||
width:70%;
|
||||
button{
|
||||
width:100%;
|
||||
color:white;
|
||||
font-weight:bold;
|
||||
font-size:1rem;
|
||||
padding:10px;
|
||||
background-color:blueviolet;
|
||||
outline:none;
|
||||
border:none;
|
||||
border-radius:5px;
|
||||
.creatButton {
|
||||
margin: 40px auto 80px;
|
||||
width: 70%;
|
||||
button {
|
||||
width: 100%;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
padding: 10px;
|
||||
background-color: blueviolet;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-buttons{
|
||||
.nav-buttons {
|
||||
.nav-item {
|
||||
margin:0;
|
||||
button{
|
||||
width:100%;
|
||||
background-color:transparent;
|
||||
border:none;
|
||||
outline:none;
|
||||
padding:10px;
|
||||
color:white;
|
||||
font-size:1.1rem;
|
||||
margin:0;
|
||||
padding-left:20px;
|
||||
margin: 0;
|
||||
button {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
:hover{
|
||||
background-color:#07344A;
|
||||
color:#43BFD6;
|
||||
border-left:5px solid #43BFD6;
|
||||
:hover {
|
||||
background-color: #07344a;
|
||||
color: #43bfd6;
|
||||
border-left: 5px solid #43bfd6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar2{
|
||||
.sidebar2 {
|
||||
text-align: center;
|
||||
}
|
||||
.dash{
|
||||
.dash {
|
||||
text-align: left;
|
||||
margin-left: 1.5px;
|
||||
margin-left: 1.5px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
|
|
@ -92,8 +91,8 @@ export default styled.div`
|
|||
flex: 30%;
|
||||
height: 250px;
|
||||
}
|
||||
.list2{
|
||||
.list2 {
|
||||
margin-bottom: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
`
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,119 +1,86 @@
|
|||
import styled from "styled-components";
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
||||
|
||||
export default styled.div`
|
||||
h2{
|
||||
color:#00253A;
|
||||
font-size:33px;
|
||||
|
||||
|
||||
|
||||
export default styled.div`
|
||||
h2 {
|
||||
color: #00253a;
|
||||
font-size: 33px;
|
||||
}
|
||||
input{
|
||||
width:550px;
|
||||
padding:16px;
|
||||
border-radius: 5px;
|
||||
background-color:#F2F2F2;
|
||||
border:none;
|
||||
input {
|
||||
width: 550px;
|
||||
padding: 16px;
|
||||
border-radius: 5px;
|
||||
background-color: #f2f2f2;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.frame{
|
||||
width:79%;
|
||||
margin-left:26%;
|
||||
padding-top:60px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
.frame {
|
||||
width: 79%;
|
||||
margin-left: 26%;
|
||||
padding-top: 60px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.card{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
form{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-between;
|
||||
align-items:start;
|
||||
gap:20px;
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
button{
|
||||
|
||||
width:49%;
|
||||
height:45px;
|
||||
border-radius: 5px;
|
||||
background-color:#F2F2F2;
|
||||
border:none;
|
||||
font-size:16px;
|
||||
cursor:pointer;
|
||||
button {
|
||||
width: 49%;
|
||||
height: 45px;
|
||||
border-radius: 5px;
|
||||
background-color: #f2f2f2;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btndiv{
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
width:100%;
|
||||
|
||||
.btndiv {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.submit{
|
||||
background-color:#43BFD6;
|
||||
color:white;
|
||||
|
||||
.submit {
|
||||
background-color: #43bfd6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border:none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color:#F2F2F2;
|
||||
background-color: #f2f2f2;
|
||||
font-size: 16px;
|
||||
resize: none;
|
||||
}
|
||||
.textdiv{
|
||||
width:100%;
|
||||
}
|
||||
.textdiv {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.textdiv, .aliasdiv , .titlediv , .hugediv{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-between;
|
||||
align-items:start;
|
||||
gap:7px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
`
|
||||
.textdiv,
|
||||
.aliasdiv,
|
||||
.titlediv,
|
||||
.hugediv {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
gap: 7px;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import * as React from "react";
|
||||
import * as React from 'react'
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
|
|
@ -12,21 +12,21 @@ import {
|
|||
Typography,
|
||||
alpha,
|
||||
AppBar,
|
||||
} from "@mui/material";
|
||||
} 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 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'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
my: 2,
|
||||
}}
|
||||
>
|
||||
|
|
@ -37,53 +37,53 @@ export default function Index() {
|
|||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
justifyContent: "space-around",
|
||||
alignContent: "space-around",
|
||||
alignItems: "space-around",
|
||||
width: "50vw",
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
alignContent: 'space-around',
|
||||
alignItems: 'space-around',
|
||||
width: '50vw',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "centre",
|
||||
alignItems: "center",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'centre',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<a className="Link" href = "NotFound">
|
||||
<RemoveRedEyeIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
|
||||
<h4>VIEW COUNTER</h4>
|
||||
<a className="Link" href="NotFound">
|
||||
<RemoveRedEyeIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<h4>VIEW COUNTER</h4>
|
||||
</a>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "centre",
|
||||
alignItems: "center",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'centre',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<a className="Link" href = "NotFound">
|
||||
<QrCodeScannerIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
|
||||
<h4>QR CODE</h4>
|
||||
<a className="Link" href="NotFound">
|
||||
<QrCodeScannerIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<h4>QR CODE</h4>
|
||||
</a>
|
||||
</Box>
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "centre",
|
||||
alignItems: "center",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'centre',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<a className="Link" href = "NotFound">
|
||||
<RocketLaunchIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
|
||||
<h4>ROBUST API</h4>
|
||||
<a className="Link" href="NotFound">
|
||||
<RocketLaunchIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<h4>ROBUST API</h4>
|
||||
</a>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styled from "styled-components";
|
||||
import styled from 'styled-components'
|
||||
|
||||
export default styled.section`
|
||||
display: flex;
|
||||
|
|
@ -11,4 +11,4 @@ export default styled.section`
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,94 +1,91 @@
|
|||
import React, {useState} from "react";
|
||||
import HomeSectionStyle from "./HomeSection.style";
|
||||
import Link from "next/link";
|
||||
import React, { useState } from 'react'
|
||||
import HomeSectionStyle from './HomeSection.style'
|
||||
import Link from 'next/link'
|
||||
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 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 NotFound from "@pages/404";
|
||||
import NotFound from '@pages/404'
|
||||
|
||||
const QR = {
|
||||
marginTop: '1.8em'
|
||||
marginTop: '1.8em',
|
||||
}
|
||||
const head = {
|
||||
fontSize: "5.5rem",
|
||||
fontWeight: "bold",
|
||||
color:"white",
|
||||
marginBottom: "30px",
|
||||
};
|
||||
fontSize: '5.5rem',
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
marginBottom: '30px',
|
||||
}
|
||||
const box = {
|
||||
fontSize: "1.5em",
|
||||
borderRadius: "50px",
|
||||
padding: "1em",
|
||||
width: "500px",
|
||||
height: "50px",
|
||||
outline:"none !important",
|
||||
border:"none !important",
|
||||
marginBottom:"15px"
|
||||
};
|
||||
fontSize: '1.5em',
|
||||
borderRadius: '50px',
|
||||
padding: '1em',
|
||||
width: '500px',
|
||||
height: '50px',
|
||||
outline: 'none !important',
|
||||
border: 'none !important',
|
||||
marginBottom: '15px',
|
||||
}
|
||||
const btn = {
|
||||
fontWeight: "bold",
|
||||
position: "absolute",
|
||||
alignItems: "center",
|
||||
right: "0px",
|
||||
marginRight: "5px",
|
||||
marginTop: "4.5px",
|
||||
marginBottom: "3px",
|
||||
height: "40px",
|
||||
width: "100px",
|
||||
borderRadius: "50px",
|
||||
};
|
||||
fontWeight: 'bold',
|
||||
position: 'absolute',
|
||||
alignItems: 'center',
|
||||
right: '0px',
|
||||
marginRight: '5px',
|
||||
marginTop: '4.5px',
|
||||
marginBottom: '3px',
|
||||
height: '40px',
|
||||
width: '100px',
|
||||
borderRadius: '50px',
|
||||
}
|
||||
const searchBox = {
|
||||
position: "relative",
|
||||
};
|
||||
|
||||
position: 'relative',
|
||||
}
|
||||
|
||||
function HomeSection(props) {
|
||||
var qrCode;
|
||||
var minifiedUrl;
|
||||
const [disabled,setDisabled] = useState(false)
|
||||
const [open, setOpen] = React.useState(false);
|
||||
var qrCode
|
||||
var minifiedUrl
|
||||
const [disabled, setDisabled] = useState(false)
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const setMinfy = async () => {
|
||||
setOpen(false)
|
||||
setDisabled(true);
|
||||
let res;
|
||||
setDisabled(true)
|
||||
let res
|
||||
try {
|
||||
res = await Axios.post(`/minify/add`, {
|
||||
originalUrl: props.longUrl,
|
||||
});
|
||||
})
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
console.error(err)
|
||||
return
|
||||
}
|
||||
|
||||
const data = await res.data;
|
||||
props.setShortUrl(data.minifiedUrl);
|
||||
minifiedUrl = data.minifiedUrl;
|
||||
navigator.clipboard.writeText(props.shortUrl);
|
||||
if(minifiedUrl){
|
||||
generateQR();
|
||||
const data = await res.data
|
||||
props.setShortUrl(data.minifiedUrl)
|
||||
minifiedUrl = data.minifiedUrl
|
||||
navigator.clipboard.writeText(props.shortUrl)
|
||||
if (minifiedUrl) {
|
||||
generateQR()
|
||||
}
|
||||
await navigator.clipboard.writeText(data.minifiedUrl);
|
||||
await navigator.clipboard.writeText(data.minifiedUrl)
|
||||
setOpen(true)
|
||||
setDisabled(false)
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// Generate QRCODE for the generated link
|
||||
const generateQR = async () => {
|
||||
try {
|
||||
qrCode = await QRCode.toDataURL(minifiedUrl);
|
||||
props.setQrData(qrCode);
|
||||
props.setShowQrCode(true);
|
||||
qrCode = await QRCode.toDataURL(minifiedUrl)
|
||||
props.setQrData(qrCode)
|
||||
props.setShowQrCode(true)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<HomeSectionStyle>
|
||||
<div className="content">
|
||||
<h1 style={head} className="title">
|
||||
|
|
@ -101,50 +98,75 @@ function HomeSection(props) {
|
|||
placeholder="Enter the url to be minified......"
|
||||
value={props.longUrl}
|
||||
onChange={(e) => {
|
||||
props.setLongUrl(e.target.value);
|
||||
props.setLongUrl(e.target.value)
|
||||
}}
|
||||
/>
|
||||
<a href = "NotFound">
|
||||
<Button variant={"contained"} disabled={disabled} style={btn} id="minify" onClick={setMinfy}>
|
||||
MINIFY
|
||||
</Button>
|
||||
<a href="NotFound">
|
||||
<Button
|
||||
variant={'contained'}
|
||||
disabled={disabled}
|
||||
style={btn}
|
||||
id="minify"
|
||||
onClick={setMinfy}
|
||||
>
|
||||
MINIFY
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
<div style={{marginBottom:"40px",color:"#fff"}}>
|
||||
<div style={{ marginBottom: '40px', color: '#fff' }}>
|
||||
<h3>
|
||||
Need more advanced features? |{" "}
|
||||
<Link href="/signup"><span style={{textDecoration:"underline"}}>Create an account</span></Link>
|
||||
Need more advanced features? |{' '}
|
||||
<Link href="/signup">
|
||||
<span style={{ textDecoration: 'underline' }}>
|
||||
Create an account
|
||||
</span>
|
||||
</Link>
|
||||
</h3>
|
||||
</div>
|
||||
{ // show QR code if a url is generated
|
||||
props.showQrCode ?
|
||||
{
|
||||
// show QR code if a url is generated
|
||||
props.showQrCode ? (
|
||||
<div style={QR}>
|
||||
<Image src={props.qrData} placeholder="blur" blurDataURL width={150} height={150}/>
|
||||
</div>
|
||||
: ""
|
||||
<Image
|
||||
src={props.qrData}
|
||||
placeholder="blur"
|
||||
blurDataURL
|
||||
width={150}
|
||||
height={150}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<Collapse in={open}>
|
||||
<Alert
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
color="inherit"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ mb: 2 }}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
color="inherit"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
setOpen(false)
|
||||
}}
|
||||
>
|
||||
<CloseIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
}
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
Your Shortened URL: {props.shortUrl} <IconButton onClick={() => navigator.clipboard.writeText(props.shortUrl)} style={{marginLeft:"15px",padding:0}}><ContentCopyIcon /></IconButton>
|
||||
Your Shortened URL: {props.shortUrl}{' '}
|
||||
<IconButton
|
||||
onClick={() => navigator.clipboard.writeText(props.shortUrl)}
|
||||
style={{ marginLeft: '15px', padding: 0 }}
|
||||
>
|
||||
<ContentCopyIcon />
|
||||
</IconButton>
|
||||
</Alert>
|
||||
</Collapse>
|
||||
</HomeSectionStyle>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeSection;
|
||||
export default HomeSection
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import styled from "styled-components"
|
||||
import styled from 'styled-components'
|
||||
|
||||
export default styled.section`
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-direction:column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React from "react";
|
||||
import React from 'react'
|
||||
|
||||
export default function Logo() {
|
||||
return (
|
||||
|
|
@ -22,5 +22,5 @@ export default function Logo() {
|
|||
</svg>
|
||||
<p className="logo-text">URL MINIFY</p>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styled from "styled-components";
|
||||
import { AppBar } from "@mui/material";
|
||||
import styled from 'styled-components'
|
||||
import { AppBar } from '@mui/material'
|
||||
|
||||
export default styled(AppBar)``;
|
||||
export default styled(AppBar)``
|
||||
|
|
|
|||
|
|
@ -99,10 +99,10 @@ function Index(props) {
|
|||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a href = "NotFound">
|
||||
<Typography textAlign="center" sx={{ display: 'flex' }}>
|
||||
CREDITS
|
||||
</Typography>
|
||||
<a href="NotFound">
|
||||
<Typography textAlign="center" sx={{ display: 'flex' }}>
|
||||
CREDITS
|
||||
</Typography>
|
||||
</a>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
|
@ -138,13 +138,17 @@ function Index(props) {
|
|||
GitHub
|
||||
</Button>
|
||||
</a>
|
||||
<a href = "NotFound">
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ color: 'white', display: 'block', fontSize: 'h5.fontSize' }}
|
||||
>
|
||||
CREDITS
|
||||
</Button>
|
||||
<a href="NotFound">
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
color: 'white',
|
||||
display: 'block',
|
||||
fontSize: 'h5.fontSize',
|
||||
}}
|
||||
>
|
||||
CREDITS
|
||||
</Button>
|
||||
</a>
|
||||
</Box>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import styled from "styled-components";
|
||||
import styled from 'styled-components'
|
||||
|
||||
export default styled.section`
|
||||
display: flex;
|
||||
|
|
@ -10,4 +10,4 @@ export default styled.section`
|
|||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
`;
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
|
||||
|
||||
.reg-label {
|
||||
font-size: 24px;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
position: relative;
|
||||
}
|
||||
.reg-title {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
.submit-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
.foot-text {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import axios from "axios";
|
||||
import axios from 'axios'
|
||||
|
||||
var API_URL = process.env.NEXT_PUBLIC_API_URL;
|
||||
var API_URL = process.env.NEXT_PUBLIC_API_URL
|
||||
|
||||
export default axios.create({
|
||||
baseURL: API_URL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import { createContext } from "react";
|
||||
import { useState } from "react";
|
||||
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 [user, setUser] = useState(null)
|
||||
const login = () => {
|
||||
setUser("default");
|
||||
};
|
||||
setUser('default')
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
setUser(null);
|
||||
};
|
||||
const context = { user, login, logout };
|
||||
setUser(null)
|
||||
}
|
||||
const context = { user, login, logout }
|
||||
|
||||
return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>;
|
||||
};
|
||||
return <UserAuth.Provider value={context}>{children}</UserAuth.Provider>
|
||||
}
|
||||
|
||||
export default UserAuth;
|
||||
export default UserAuth
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
import { urlAlphabet } from 'nanoid';
|
||||
import React from 'react';
|
||||
import { urlAlphabet } from 'nanoid'
|
||||
import React from 'react'
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<div className='Box'>
|
||||
<div className='Box2'>
|
||||
<p className='P1'>404 Not Found</p>
|
||||
<p className='P2'>The page you are looking for is not available</p>
|
||||
<button className='Button'><a className='Take-me-back' href = "/">Take me back!</a></button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="Box">
|
||||
<div className="Box2">
|
||||
<p className="P1">404 Not Found</p>
|
||||
<p className="P2">The page you are looking for is not available</p>
|
||||
<button className="Button">
|
||||
<a className="Take-me-back" href="/">
|
||||
Take me back!
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFound;
|
||||
export default NotFound
|
||||
|
|
|
|||
|
|
@ -1,105 +1,59 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import Head from "next/head";
|
||||
import HomeSection from "components/HomeSection/homeSection";
|
||||
import NavBar from "components/NavBar";
|
||||
import Features from "components/Features";
|
||||
import { useRouter } from "next/router";
|
||||
var axios = require("axios");
|
||||
import { useEffect, useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import HomeSection from 'components/HomeSection/homeSection'
|
||||
import NavBar from 'components/NavBar'
|
||||
import Features from 'components/Features'
|
||||
import { useRouter } from 'next/router'
|
||||
import axios from 'helpers/Axios'
|
||||
|
||||
function Redirector(props) {
|
||||
const router = useRouter();
|
||||
// const { id } = router.query;
|
||||
// useEffect(() => {
|
||||
// if (id) {
|
||||
// var config = {
|
||||
// method: 'get',
|
||||
// url: `http://localhost:5000/minify/alias/${id}`
|
||||
// };
|
||||
// axios(config)
|
||||
// .then(function (response) {
|
||||
// if(!response.data.success){
|
||||
// router.replace('/404')
|
||||
// }
|
||||
// else{
|
||||
// router.replace(response.data.data.originalUrl)
|
||||
// }
|
||||
// })
|
||||
// .catch(function (error) {
|
||||
// console.log(error);
|
||||
// });
|
||||
|
||||
// }
|
||||
// },[id])
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
if (!props?.resData.success) {
|
||||
// router.push('/404')
|
||||
} else {
|
||||
// router.replace(`${props.resData.data.originalUrl}`)
|
||||
}
|
||||
}, []);
|
||||
}, [])
|
||||
return (
|
||||
<div className={""}>
|
||||
<div className={''}>
|
||||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className={"main-bg"}>Not Found</main>
|
||||
<main className={'main-bg'}>Not Found</main>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
Redirector.getInitialProps = async (context) => {
|
||||
const { id } = context.query;
|
||||
let resData = {};
|
||||
const { id } = context.query
|
||||
let resData = {}
|
||||
if (id) {
|
||||
var config = {
|
||||
method: "get",
|
||||
url: `http://localhost:5000/minify/alias/${id}`,
|
||||
};
|
||||
await axios(config)
|
||||
axios.get(`/minify/${id}/views`).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
await axios
|
||||
.get(`/minify/alias/${id}`)
|
||||
.then(function (response) {
|
||||
resData = response.data;
|
||||
resData = response.data
|
||||
})
|
||||
.catch(function (error) {
|
||||
resData = error;
|
||||
});
|
||||
resData = error
|
||||
})
|
||||
}
|
||||
|
||||
if (context?.res) {
|
||||
const go = resData?.data?.originalUrl ? resData?.data?.originalUrl : "/404";
|
||||
console.log(go);
|
||||
const go = resData?.data?.originalUrl ? resData?.data?.originalUrl : '/404'
|
||||
console.log(go)
|
||||
context?.res.writeHead(302, {
|
||||
Location: go,
|
||||
});
|
||||
context?.res.end();
|
||||
})
|
||||
context?.res.end()
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
return {}
|
||||
}
|
||||
|
||||
// export async function getServerSideProps(context){
|
||||
// const { id } = context.query;
|
||||
// let resData = {};
|
||||
// if (id) {
|
||||
// var config = {
|
||||
// method: 'get',
|
||||
// url: `http://localhost:5000/minify/alias/${id}`
|
||||
// };
|
||||
// await axios(config)
|
||||
// .then(function (response) {
|
||||
// resData = response.data;
|
||||
// })
|
||||
// .catch(function (error) {
|
||||
// resData = error;
|
||||
// });
|
||||
|
||||
// }
|
||||
|
||||
// return {
|
||||
// props: {
|
||||
// resData : resData
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
export default Redirector;
|
||||
export default Redirector
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import Document from "next/document";
|
||||
import { ServerStyleSheet } from "styled-components";
|
||||
import Document from 'next/document'
|
||||
import { ServerStyleSheet } from 'styled-components'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps(ctx) {
|
||||
const sheet = new ServerStyleSheet();
|
||||
const originalRenderPage = ctx.renderPage;
|
||||
const sheet = new ServerStyleSheet()
|
||||
const originalRenderPage = ctx.renderPage
|
||||
|
||||
try {
|
||||
ctx.renderPage = () =>
|
||||
originalRenderPage({
|
||||
enhanceApp: (App) => (props) =>
|
||||
sheet.collectStyles(<App {...props} />),
|
||||
});
|
||||
})
|
||||
|
||||
const initialProps = await Document.getInitialProps(ctx);
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return {
|
||||
...initialProps,
|
||||
styles: (
|
||||
|
|
@ -22,9 +22,9 @@ export default class MyDocument extends Document {
|
|||
{sheet.getStyleElement()}
|
||||
</>
|
||||
),
|
||||
};
|
||||
}
|
||||
} finally {
|
||||
sheet.seal();
|
||||
sheet.seal()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
|
||||
export default function handler(req, res) {
|
||||
res.status(200).json({ name: "John Doe" });
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
import React from 'react';
|
||||
import Head from "next/head";
|
||||
import NavBar from "../../components/NavBar";
|
||||
import Dashboard from "components/Dashboard/Dashboard"
|
||||
import React from 'react'
|
||||
import Head from 'next/head'
|
||||
import NavBar from '../../components/NavBar'
|
||||
import Dashboard from 'components/Dashboard/Dashboard'
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
<title>Dashboard</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
return (
|
||||
<div className={''}>
|
||||
<Head>
|
||||
<title>Dashboard</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main>
|
||||
<NavBar />
|
||||
<Dashboard/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
<main>
|
||||
<NavBar />
|
||||
<Dashboard />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Index;
|
||||
export default Index
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
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";
|
||||
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 (
|
||||
|
|
@ -10,5 +10,5 @@ export default function signup() {
|
|||
<NavBar />
|
||||
<Login />
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
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";
|
||||
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 (
|
||||
|
|
@ -10,5 +10,5 @@ export default function signup() {
|
|||
<NavBar />
|
||||
<Reg />
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,46 +1,46 @@
|
|||
.Box{
|
||||
position: absolute;
|
||||
background: rgb(231,231,231);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
padding: 15px;
|
||||
.Box {
|
||||
position: absolute;
|
||||
background: rgb(231, 231, 231);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.3rem;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.Box2{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.Box2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.P1{
|
||||
font-size: 55px;
|
||||
color: #16a085;
|
||||
.P1 {
|
||||
font-size: 55px;
|
||||
color: #16a085;
|
||||
}
|
||||
|
||||
.P2{
|
||||
color: #16a085;
|
||||
.P2 {
|
||||
color: #16a085;
|
||||
}
|
||||
|
||||
.Button{
|
||||
width: 55%;
|
||||
padding: 13px;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: #16a085;
|
||||
font-size: 25px;
|
||||
.Button {
|
||||
width: 55%;
|
||||
padding: 13px;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: #16a085;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.Take-me-back{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
}
|
||||
.Take-me-back {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@ section {
|
|||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url("./../assets/bg/main-bg.png");
|
||||
background-image: url('./../assets/bg/main-bg.png');
|
||||
}
|
||||
.main-bg {
|
||||
background-image: url("./../assets/bg/main-bg.png");
|
||||
background-image: url('./../assets/bg/main-bg.png');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.Link{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center
|
||||
.Link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;500;700&display=swap');
|
||||
|
||||
.reg-label {
|
||||
font-size: 24px;
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
position: relative;
|
||||
}
|
||||
.reg-title {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
.submit-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
}
|
||||
|
||||
.foot-text {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
|
|
|
|||
1495
frontend/yarn.lock
1495
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue