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

Reformat and bug Fix [Major Changes

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2022-02-13 13:58:33 +05:30
parent e0b8038c89
commit 8a5ccfc031
37 changed files with 4922 additions and 3762 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
backend/controllers/minify.js
View File

@ -15,12 +15,15 @@ module.exports.getAllData = async (req, res) => {
module.exports.getURLData = async (req, res) => { module.exports.getURLData = async (req, res) => {
try { try {
const { alias } = req.params
const data = await Minfy.findOne({ const data = await Minfy.findOne({
alias: alias, alias: req.params.alias,
}) })
data.minifiedUrl = base_url + data.alias // data.minifiedUrl = base_url + data.alias
return res.json(data) if (!data || data == null) {
return res.json({ success: false, message: 'No data found' })
} else {
res.json({ success: true, data })
}
} catch (err) { } catch (err) {
console.error(err) console.error(err)
res.sendStatus(500) res.sendStatus(500)

98
backend/controllers/user.js
View File

@ -1,55 +1,55 @@
const jwt = require("jsonwebtoken"); const jwt = require('jsonwebtoken')
const User = require("../models/user"); const User = require('../models/user')
module.exports.register = async ({ body: { email, password } }, res) => {
module.exports.register = async ({ body: { email, password } }, res) => { try {
try{ if (!email || !password) return res.sendStatus(400)
if(!email || !password) return res.sendStatus(400) let oldUser = await User.findOne({ email }).catch((err) => {
let oldUser = await User.findOne({ email }).catch((err) => { console.error(err)
console.error(err); })
}); if (oldUser) return res.status(400).send('Already Exists')
if (oldUser) return res.status(400).send('Already Exists'); let user = new User({ email })
let user = new User({ email }); user.setPassword(password)
user.setPassword(password); let validationError = false
let validationError = false; await user.save().catch((err) => {
await user.save().catch((err) => { validationError = true
validationError = true; return res.sendStatus(400)
return res.sendStatus(400); })
}); if (!validationError) return res.send(user.generateJWT())
if (!validationError) return res.send(user.generateJWT()); } catch (e) {
console.log(e)
}catch(e){ return res.sendStatus(500)
console.log(e) }
return res.sendStatus(500)
}
} }
module.exports.login = async ({ body: { email, password } }, res) => { module.exports.login = async ({ body: { email, password } }, res) => {
try{ try {
if (!email || !password) return res.sendStatus(400) if (!email || !password) return res.sendStatus(400)
let user = await User.findOne({email}).catch((err) => console.error(err)); let user = await User.findOne({ email }).catch((err) =>
console.error(err)
)
if (user && user.validatePassword(password)) if (user && user.validatePassword(password))
return res.json({access_token:user.generateJWT()}); return res.json({ access_token: user.generateJWT() })
return res.status(401).send(null); return res.status(401).send(null)
}catch(err) { } catch (err) {
console.log(err) console.log(err)
return res.sendStatus(500) return res.sendStatus(500)
} }
} }
module.exports.me= async (req, res) => { module.exports.me = async (req, res) => {
try{ try {
if (!req.user.isAuthenticated) { if (!req.user.isAuthenticated) {
res.sendStatus(401); res.sendStatus(401)
return; return
} }
let user = req.user.data; let user = req.user.data
res.send({ res.send({
email: user.email, email: user.email,
name: user.name, name: user.name,
phone: user.phone, phone: user.phone,
}); })
}catch (e){ } catch (e) {
console.log(e) console.log(e)
return res.sendStatus(500) return res.sendStatus(500)
} }
} }

4
backend/index.js
View File

@ -1,5 +1,5 @@
const express = require('express') const express = require('express')
const cors = require('cors'); const cors = require('cors')
const http = require('http') const http = require('http')
const { urlencoded, json } = require('body-parser') const { urlencoded, json } = require('body-parser')
const session = require('express-session') const session = require('express-session')
@ -10,7 +10,7 @@ require('dotenv').config()
const app = express() const app = express()
app.use(express.json()) app.use(express.json())
app.use(cors()); app.use(cors())
app.use(json()) app.use(json())
app.use( app.use(
urlencoded({ urlencoded({

47
backend/middlewares/auth.js
View File

@ -1,26 +1,25 @@
const jwt = require("jsonwebtoken"); const jwt = require('jsonwebtoken')
const User = require("../models/user") const User = require('../models/user')
module.exports.auth = async (req, res, next) => { module.exports.auth = async (req, res, next) => {
let user = {isAuthenticated:false}; let user = { isAuthenticated: false }
if (req.headers.authorization && req.headers.authorization !== null) { if (req.headers.authorization && req.headers.authorization !== null) {
try { try {
let jwtData = jwt.verify( let jwtData = jwt.verify(
req.headers.authorization.replace("Bearer ", ""), req.headers.authorization.replace('Bearer ', ''),
process.env.AUTH_SECRET process.env.AUTH_SECRET
); )
let userData = await User.findOne({ let userData = await User.findOne({
email: jwtData.email, email: jwtData.email,
hash: jwtData.hash, hash: jwtData.hash,
}).catch((err) => console.error(err)); }).catch((err) => console.error(err))
user.isAuthenticated = userData ? true : false; user.isAuthenticated = userData ? true : false
user.data = userData; user.data = userData
} catch (err) { } catch (err) {
user.isAuthenticated = false; user.isAuthenticated = false
user.data = null; user.data = null
} }
} }
req.user = user; req.user = user
next(); next()
} }

62
backend/models/minifed_urls.js
View File

@ -1,31 +1,31 @@
const mongoose = require('mongoose') const mongoose = require('mongoose')
const { Schema } = mongoose const { Schema } = mongoose
//build a schema //build a schema
const minifiedUrlSchema = new Schema( const minifiedUrlSchema = new Schema(
{ {
originalUrl: { originalUrl: {
type: String, type: String,
required: true, required: true,
}, },
alias: { alias: {
type: String, type: String,
required: true, required: true,
unique: true, unique: true,
}, },
minifiedUrl: { minifiedUrl: {
type: String, type: String,
required: true, required: true,
}, },
views: { views: {
type: Number, type: Number,
}, },
createdBy: { createdBy: {
type: String, type: String,
default: 'Anonymous', default: 'Anonymous',
} },
}, },
{ timestamp: true } { timestamp: true }
) )
//make a model using this schema and export it //make a model using this schema and export it
module.exports = mongoose.model('minified_url_model', minifiedUrlSchema) module.exports = mongoose.model('minified_url_model', minifiedUrlSchema)

100
backend/models/user.js
View File

@ -1,63 +1,63 @@
const mongoose = require("mongoose"); const mongoose = require('mongoose')
const crypto = require("crypto"); const crypto = require('crypto')
const jwt = require("jsonwebtoken"); const jwt = require('jsonwebtoken')
const { Schema } = mongoose; const { Schema } = mongoose
const UsersSchema = new Schema( const UsersSchema = new Schema(
{ {
email: { email: {
type: String, type: String,
unique: true, unique: true,
}, },
name: { name: {
type: String, type: String,
// required: true, // required: true,
}, },
hash: String, hash: String,
salt: String, salt: String,
}, },
{ {
timestamps: true, timestamps: true,
} }
); )
UsersSchema.methods.setPassword = function (password) { UsersSchema.methods.setPassword = function (password) {
this.salt = crypto.randomBytes(16).toString("hex"); this.salt = crypto.randomBytes(16).toString('hex')
this.hash = crypto this.hash = crypto
.pbkdf2Sync(password, this.salt, 10000, 512, "sha512") .pbkdf2Sync(password, this.salt, 10000, 512, 'sha512')
.toString("hex"); .toString('hex')
}; }
UsersSchema.methods.validatePassword = function (password) { UsersSchema.methods.validatePassword = function (password) {
const hash = crypto const hash = crypto
.pbkdf2Sync(password, this.salt, 10000, 512, "sha512") .pbkdf2Sync(password, this.salt, 10000, 512, 'sha512')
.toString("hex"); .toString('hex')
return this.hash === hash; return this.hash === hash
}; }
UsersSchema.methods.generateJWT = function () { UsersSchema.methods.generateJWT = function () {
const today = new Date(); const today = new Date()
const expirationDate = new Date(today); const expirationDate = new Date(today)
expirationDate.setDate(today.getDate() + 60); expirationDate.setDate(today.getDate() + 60)
return jwt.sign( return jwt.sign(
{ {
email: this.email, email: this.email,
hash: this.hash, hash: this.hash,
id: this._id, id: this._id,
exp: parseInt(String(expirationDate.getTime() / 1000), 10), exp: parseInt(String(expirationDate.getTime() / 1000), 10),
}, },
process.env.AUTH_SECRET process.env.AUTH_SECRET
); )
}; }
UsersSchema.methods.toAuthJSON = function () { UsersSchema.methods.toAuthJSON = function () {
return { return {
id: this._id, id: this._id,
email: this.email, email: this.email,
token: this.generateJWT(), token: this.generateJWT(),
}; }
}; }
module.exports = mongoose.model("users", UsersSchema); module.exports = mongoose.model('users', UsersSchema)

3521
backend/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

4
backend/routers/index.js
View File

@ -4,7 +4,7 @@ const router = express.Router()
const homeController = require('../controllers/home_controller') const homeController = require('../controllers/home_controller')
router.get('/', homeController.home) router.get('/', homeController.home)
router.use("/minify", require("./minify")) router.use('/minify', require('./minify'))
router.use('/user', require("./user")) router.use('/user', require('./user'))
module.exports = router module.exports = router

22
backend/routers/minify.js
View File

@ -1,18 +1,18 @@
const {Router} = require("express") const { Router } = require('express')
const controller = require("../controllers/minify") const controller = require('../controllers/minify')
const {auth} = require("../middlewares/auth") const { auth } = require('../middlewares/auth')
const router = Router(); const router = Router()
router.get("/all", controller.getAllData) router.get('/all', controller.getAllData)
router.get("/id/:id", controller.findUrlById) router.get('/id/:id', controller.findUrlById)
router.get("/alias/:alias", controller.getURLData) router.get('/alias/:alias', controller.getURLData)
router.post("/add",controller.addURL) router.post('/add', controller.addURL)
router.post("/add/custom",auth,controller.addURLAuthed) router.post('/add/custom', auth, controller.addURLAuthed)
router.patch('/edit/:id', auth, controller.updateUrlData) router.patch('/edit/:id', auth, controller.updateUrlData)
router.delete('/delete/:id',auth,controller.deleteUrlData) router.delete('/delete/:id', auth, controller.deleteUrlData)
module.exports = router; module.exports = router

14
backend/routers/user.js
View File

@ -1,11 +1,11 @@
const {Router} = require("express") const { Router } = require('express')
const controller = require("../controllers/user") const controller = require('../controllers/user')
const {auth} = require("../middlewares/auth") const { auth } = require('../middlewares/auth')
const router = Router(); const router = Router()
router.post('/login',controller.login ) router.post('/login', controller.login)
router.post('/register', controller.register) router.post('/register', controller.register)
router.get('/me',auth, controller.me) router.get('/me', auth, controller.me)
module.exports = router module.exports = router

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

@ -1,42 +1,82 @@
import * as React from 'react'; import * as React from "react";
import { Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography, alpha, AppBar } from "@mui/material"; import {
Avatar,
Box,
Button,
Container,
IconButton,
Menu,
MenuItem,
Toolbar,
Tooltip,
Typography,
alpha,
AppBar,
} from "@mui/material";
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'; import QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner";
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'; import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'; import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
export default function Index() { export default function Index() {
return ( return (
<Box
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', my: 2 }}> sx={{
flexGrow: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
my: 2,
}}
>
<Box> <Box>
<h1> SHORTEN, SHARE AND ANALYZE</h1> <h1> SHORTEN, SHARE AND ANALYZE</h1>
<br /> <br />
</Box> </Box>
<Box sx={{ flexGrow: 1, display: 'flex', justifyContent:'space-around', alignContent:'space-around', alignItems: 'space-around', width:'50vw'}}> <Box
sx={{
<Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}> flexGrow: 1,
<RemoveRedEyeIcon sx={{ width: '3.5rem', height: '3.5rem' }} /> display: "flex",
justifyContent: "space-around",
alignContent: "space-around",
alignItems: "space-around",
width: "50vw",
}}
>
<Box
style={{
display: "flex",
flexDirection: "column",
justifyContent: "centre",
alignItems: "center",
}}
>
<RemoveRedEyeIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
<h4>VIEW COUNTER</h4> <h4>VIEW COUNTER</h4>
</Box> </Box>
<Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}> <Box
<QrCodeScannerIcon sx={{ width: '3.5rem', height: '3.5rem' }} /> style={{
display: "flex",
flexDirection: "column",
justifyContent: "centre",
alignItems: "center",
}}
>
<QrCodeScannerIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
<h4>QR CODE</h4> <h4>QR CODE</h4>
</Box> </Box>
<Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}> <Box
<RocketLaunchIcon sx={{ width: '3.5rem', height: '3.5rem' }} /> style={{
display: "flex",
flexDirection: "column",
justifyContent: "centre",
alignItems: "center",
}}
>
<RocketLaunchIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
<h4>ROBUST API</h4> <h4>ROBUST API</h4>
</Box> </Box>
</Box> </Box>
</Box> </Box>
); );
} }

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

@ -1,13 +1,13 @@
import styled from "styled-components" import styled from "styled-components";
export default styled.section` export default styled.section`
display: flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
.content { .content {
display: flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
flex-direction:column; flex-direction: column;
} }
` `;

121
frontend/components/HomeSection/homeSection.jsx
View File

@ -4,77 +4,78 @@ import Link from "next/link";
import Axios from "helpers/Axios"; import Axios from "helpers/Axios";
const head = { const head = {
fontSize: "5rem", fontSize: "5rem",
fontWeight: "bold", fontWeight: "bold",
marginBottom: "30px", marginBottom: "30px",
}; };
const box = { const box = {
fontSize: "1.5em", fontSize: "1.5em",
borderRadius: "50px", borderRadius: "50px",
padding: "1em", padding: "1em",
width: "500px", width: "500px",
height: "50px", height: "50px",
}; };
const btn = { const btn = {
fontWeight: "bold", fontWeight: "bold",
position: "absolute", position: "absolute",
alignItems: "center", alignItems: "center",
right: "0px", right: "0px",
marginRight: "5px", marginRight: "5px",
marginTop: "4.5px", marginTop: "4.5px",
marginBottom: "3px", marginBottom: "3px",
height: "40px", height: "40px",
width: "100px", width: "100px",
borderRadius: "50px", borderRadius: "50px",
}; };
const searchBox = { const searchBox = {
position: "relative", position: "relative",
}; };
function HomeSection(props) { function HomeSection(props) {
const setMinfy = async () => { const setMinfy = async () => {
let res; let res;
try { try {
res = await Axios.post(`/minify/add`, { res = await Axios.post(`/minify/add`, {
originalUrl: props.longUrl, originalUrl: props.longUrl,
}); });
} catch (err) { } catch (err) {
console.error(err); console.error(err);
return; return;
} }
const data = await res.data; const data = await res.data;
props.setShortUrl(data.minifiedUrl); props.setShortUrl(data.minifiedUrl);
navigator.clipboard.writeText(props.shortUrl); navigator.clipboard.writeText(props.shortUrl);
}; };
return ( return (
<HomeSectionStyle> <HomeSectionStyle>
<div className="content"> <div className="content">
<h1 style={head} className="title"> <h1 style={head} className="title">
URL MINIFY URL MINIFY
</h1> </h1>
<div style={searchBox}> <div style={searchBox}>
<input <input
style={box} style={box}
placeholder="Enter the url to be minified......" placeholder="Enter the url to be minified......"
value={props.longUrl} value={props.longUrl}
onChange={(e) => { onChange={(e) => {
props.setLongUrl(e.target.value); props.setLongUrl(e.target.value);
}} }}
/> />
<button style={btn} id="minify" onClick={setMinfy}> <button style={btn} id="minify" onClick={setMinfy}>
MINIFY MINIFY
</button> </button>
</div> </div>
<div> <div>
<h3> <h3>
Need more advanced features? | <Link href="/signup">Create an account</Link> Need more advanced features? |{" "}
</h3> <Link href="/signup">Create an account</Link>
</div> </h3>
</div> </div>
</HomeSectionStyle> </div>
); </HomeSectionStyle>
);
} }
export default HomeSection; export default HomeSection;

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

@ -1,13 +1,26 @@
import React from 'react'; import React from "react";
export default function Logo(){ export default function Logo() {
return (
return(
<div className="logo-wrapper"> <div className="logo-wrapper">
<svg class="logo" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.4 53.31"><path 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"/><path 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"/></svg> <svg
<p className="logo-text"> class="logo"
URL MINIFY data-name="Layer 4"
</p> xmlns="http://www.w3.org/2000/svg"
</div> viewBox="0 0 53.4 53.31"
) >
<path
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"
/>
<path
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"
/>
</svg>
<p className="logo-text">URL MINIFY</p>
</div>
);
} }

6
frontend/components/NavBar/Navbar.style.js
View File

@ -1,4 +1,4 @@
import styled from "styled-components" import styled from "styled-components";
import {AppBar} from "@mui/material"; import { AppBar } from "@mui/material";
export default styled(AppBar)`` export default styled(AppBar)``;

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

@ -1,136 +1,182 @@
import React from 'react'; import React 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";
const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; 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 ( return (
<NavbarStyle position="relative" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}> <NavbarStyle
<Container maxWidth="xl"> position="relative"
<Toolbar disableGutters="false"> sx={{ bgcolor: alpha("#000000", 0.5), m: "0px" }}
<Typography variant='h4' sx={{fontWeight:'bold'}}> >
URL MINIFY <Container maxWidth="xl">
</Typography> <Toolbar disableGutters="false">
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse', display: { xs: 'flex', md: 'none' } }}> <Typography variant="h4" sx={{ fontWeight: "bold" }}>
URL MINIFY
<IconButton </Typography>
size="large" <Box
aria-label="account of current user" sx={{
aria-controls="menu-appbar" flexGrow: 1,
aria-haspopup="true" flexDirection: "row-reverse",
onClick={handleOpenNavMenu} display: { xs: "flex", md: "none" },
color="inherit" }}
> >
<MenuIcon /> <IconButton
</IconButton> size="large"
<Menu aria-label="account of current user"
id="menu-appbar" aria-controls="menu-appbar"
anchorEl={anchorElNav} aria-haspopup="true"
anchorOrigin={{ onClick={handleOpenNavMenu}
vertical: 'bottom', color="inherit"
horizontal: 'left', >
}} <MenuIcon />
keepMounted </IconButton>
transformOrigin={{ <Menu
vertical: 'top', id="menu-appbar"
horizontal: 'left', anchorEl={anchorElNav}
}} anchorOrigin={{
open={Boolean(anchorElNav)} vertical: "bottom",
onClose={handleCloseNavMenu} horizontal: "left",
sx={{ }}
display: { xs: 'block', md: 'none' }, keepMounted
}} transformOrigin={{
> vertical: "top",
<MenuItem onClick={handleCloseNavMenu}> horizontal: "left",
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} > }}
<Typography textAlign="center" sx={{display:'flex'}} > open={Boolean(anchorElNav)}
<GitHubIcon fontSize='small'/> onClose={handleCloseNavMenu}
GitHub sx={{
</Typography> display: { xs: "block", md: "none" },
</a> }}
</MenuItem> >
<MenuItem onClick={handleCloseNavMenu}> <MenuItem onClick={handleCloseNavMenu}>
<Typography textAlign="center" sx={{display:'flex'}} > <a
CRIDITS href="https://github.com/BRAVO68WEB/url-minify"
</Typography> target={"_blank"}
</MenuItem> >
</Menu> <Typography textAlign="center" sx={{ display: "flex" }}>
</Box> <GitHubIcon fontSize="small" />
GitHub
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse',gap:'10px',px:'20px', display: { xs: 'none', md: 'flex' } }}> </Typography>
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} > </a>
<Button </MenuItem>
onClick={handleCloseNavMenu} <MenuItem onClick={handleCloseNavMenu}>
sx={{ color: 'white', display: 'flex',gap:'10px',fontSize:'h5.fontSize',fontFamily:'sans-serif',fontStyle:'bold', textTransform: 'capitalize',fontWeight:'bold'}} <Typography textAlign="center" sx={{ display: "flex" }}>
> CRIDITS
<GitHubIcon fontSize='large'/> </Typography>
GitHub </MenuItem>
</Button> </Menu>
</a> </Box>
<Button
onClick={handleCloseNavMenu}
sx={{ color: 'white', display: 'block',fontSize:'h5.fontSize'}}
>
CREDITS
</Button>
</Box>
<Box sx={{ flexGrow: 0 }}> <Box
<Tooltip title="Open settings"> sx={{
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}> flexGrow: 1,
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" sx={{ width: 50, height: 50 }} /> flexDirection: "row-reverse",
</IconButton> gap: "10px",
</Tooltip> px: "20px",
<Menu display: { xs: "none", md: "flex" },
sx={{ mt: '45px' }} }}
id="menu-appbar" >
anchorEl={anchorElUser} <a
anchorOrigin={{ href="https://github.com/BRAVO68WEB/url-minify"
vertical: 'top', target={"_blank"}
horizontal: 'right', >
}} <Button
keepMounted onClick={handleCloseNavMenu}
transformOrigin={{ sx={{
vertical: 'top', color: "white",
horizontal: 'right', display: "flex",
}} gap: "10px",
open={Boolean(anchorElUser)} fontSize: "h5.fontSize",
onClose={handleCloseUserMenu} fontFamily: "sans-serif",
> fontStyle: "bold",
{settings.map((setting) => ( textTransform: "capitalize",
<MenuItem key={setting} onClick={handleCloseUserMenu}> fontWeight: "bold",
<Typography textAlign="center">{setting}</Typography> }}
</MenuItem> >
))} <GitHubIcon fontSize="large" />
</Menu> GitHub
</Box> </Button>
</Toolbar> </a>
</Container> <Button
</NavbarStyle> onClick={handleCloseNavMenu}
); sx={{ color: "white", display: "block", fontSize: "h5.fontSize" }}
>
CREDITS
</Button>
</Box>
<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>
</Toolbar>
</Container>
</NavbarStyle>
);
} }
export default Index; export default Index;

160
frontend/components/Reg/Reg.jsx
View File

@ -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&nbsp; <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&nbsp;
<Link href="/" exact className="foot-text underline">
here
</Link>
</p>
</form>
</RegStyle>
);
} }
export default Reg; export default Reg;

14
frontend/components/Reg/Reg.style.js
View File

@ -1,13 +1,13 @@
import styled from "styled-components" import styled from "styled-components";
export default styled.section` export default styled.section`
display: flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
.content { .content {
display: flex; display: flex;
justify-content:center; justify-content: center;
align-items:center; align-items: center;
flex-direction:column; flex-direction: column;
} }
` `;

174
frontend/components/Reg/styles.css
View File

@ -1,106 +1,106 @@
@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{ .reg-label {
font-size: 24px; font-size: 24px;
width: 30px; width: 30px;
color: #9134bd; color: #9134bd;
position: relative; position: relative;
} }
.reg-title{ .reg-title {
font-family: 'Montserrat', sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 40px;
color:#9134bd; color: #9134bd;
} }
.reg-wide-container{ .reg-wide-container {
width: 100%; width: 100%;
text-align: right; text-align: right;
color: #9134bd; color: #9134bd;
font-size: 24px; font-size: 24px;
} }
.reg-input{ .reg-input {
margin-left: 10px; margin-left: 10px;
height: 35px; height: 35px;
width: 340px; width: 340px;
font-family: 'Montserrat', sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
border: none; border: none;
justify-content: flex-end; justify-content: flex-end;
color: #9134bd; color: #9134bd;
} }
.reg-input:active, .reg-input:focus{ .reg-input:active,
outline: none; .reg-input:focus {
outline: none;
} }
.reg-input::placeholder{ .reg-input::placeholder {
color: #6babc7; color: #6babc7;
} }
.reg-field{ .reg-field {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
} }
.form-wrapper{ .form-wrapper {
background-color: rgba(255,255,255,0.5); background-color: rgba(255, 255, 255, 0.5);
padding: 20px 30px 40px 30px; padding: 20px 30px 40px 30px;
border-radius: 20px; border-radius: 20px;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border-style: solid; border-style: solid;
border-color: #f1faff; border-color: #f1faff;
border-width: 1px 0px 0px 1px; border-width: 1px 0px 0px 1px;
margin-top: 0; margin-top: 0;
} }
.submit-button{ .submit-button {
width: 100px;
width: 100px; height: 40px;
height: 40px; font-family: "Montserrat", sans-serif;
font-family: 'Montserrat', sans-serif; font-weight: 400;
font-weight: 400; font-size: 18px;
font-size: 18px; border-radius: 10px;
border-radius: 10px; border: none;
border: none; margin-top: 20px;
margin-top: 20px ; background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
background-image: linear-gradient(135deg ,#cc5fff, #7E3EE4, #0087ca, #2db9ff); background-size: 200%;
background-size: 200%; background-position: left;
background-position: left; color: white;
color: white; transition: 0.5s;
transition: 0.5s;
} }
.submit-button:hover{ .submit-button:hover {
background-position: right; background-position: right;
} }
.submit-button:active{ .submit-button:active {
transform: scale(0.95); transform: scale(0.95);
transition: 0.1s transition: 0.1s;
} }
.icon{ .icon {
fill: black; fill: black;
} }
.foot-text{ .foot-text {
font-family: 'Montserrat', sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
margin-top: 50px; margin-top: 50px;
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
.underline{ .underline {
text-decoration: underline; text-decoration: underline;
color: #9134bd; color: #9134bd;
} }
.underline:hover{ .underline:hover {
color: #008ed4; color: #008ed4;
transition: 0.5s; transition: 0.5s;
} }

10
frontend/helpers/Axios.js
View File

@ -3,9 +3,9 @@ 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({ export default axios.create({
baseURL: API_URL, baseURL: API_URL,
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Origin": "*",
}, },
}); });

2
frontend/jsconfig.json
View File

@ -2,4 +2,4 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": "." "baseUrl": "."
} }
} }

4
frontend/next.config.js
View File

@ -1,3 +1,3 @@
module.exports = { module.exports = {
reactStrictMode: true, reactStrictMode: true,
} };

2122
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

96
frontend/package.json
View File

@ -1,50 +1,50 @@
{ {
"name": "url-minify", "name": "url-minify",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"prettier": "prettier --write ." "prettier": "prettier --write ."
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.7.1", "@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0", "@emotion/styled": "^11.6.0",
"@fortawesome/fontawesome-svg-core": "^1.3.0", "@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-brands-svg-icons": "^6.0.0", "@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0", "@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0", "@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.17", "@fortawesome/react-fontawesome": "^0.1.17",
"@mui/icons-material": "^5.3.1", "@mui/icons-material": "^5.3.1",
"@mui/material": "^5.4.0", "@mui/material": "^5.4.0",
"@mui/styled-engine-sc": "^5.3.0", "@mui/styled-engine-sc": "^5.3.0",
"axios": "^0.25.0", "axios": "^0.25.0",
"nanoid": "^3.2.0", "nanoid": "^3.2.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",
"styled-components": "^5.3.3" "styled-components": "^5.3.3"
}, },
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/bravo68web/url-minify.git" "url": "git+https://github.com/bravo68web/url-minify.git"
}, },
"keywords": [ "keywords": [
"url-minify", "url-minify",
"short-link", "short-link",
"generator", "generator",
"nextjs", "nextjs",
"frontend", "frontend",
"api", "api",
"rest" "rest"
], ],
"author": "BRAVO68WEB", "author": "BRAVO68WEB",
"bugs": { "bugs": {
"url": "https://github.com/bravo68web/url-minify/issues" "url": "https://github.com/bravo68web/url-minify/issues"
}, },
"homepage": "https://github.com/bravo68web/url-minify#readme", "homepage": "https://github.com/bravo68web/url-minify#readme",
"devDependencies": { "devDependencies": {
"prettier": "2.5.1" "prettier": "2.5.1"
} }
} }

5
frontend/pages/404.js Normal file
View File

@ -0,0 +1,5 @@
import React from "react";
export default function NotFound() {
return <div>NotFound</div>;
}

116
frontend/pages/[id].js
View File

@ -1,21 +1,105 @@
import { useState } from 'react' import { useEffect, useState } 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 { useRouter } from "next/router";
var axios = require("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);
// });
export default function Home() { // }
return ( // },[id])
<div className={""}> useEffect(() => {
<Head> if (!props?.resData.success) {
<title>URL MiniFy</title> // router.push('/404')
<link rel="icon" href="/favicon.ico" /> } else {
</Head> // router.replace(`${props.resData.data.originalUrl}`)
}
}, []);
return (
<div className={""}>
<Head>
<title>URL MiniFy</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={"main-bg"}> <main className={"main-bg"}>Not Found</main>
Not Found </div>
</main> );
</div>
)
} }
Redirector.getInitialProps = async (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;
});
}
if (context?.res) {
const go = resData?.data?.originalUrl ? resData?.data?.originalUrl : "/404";
console.log(go);
context?.res.writeHead(302, {
Location: go,
});
context?.res.end();
}
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;

10
frontend/pages/_app.js
View File

@ -1,9 +1,9 @@
import '../styles/globals.css' import "../styles/globals.css";
import '../styles/logostyles.css' import "../styles/logostyles.css";
import '../components/Reg/styles.css' import "../components/Reg/styles.css";
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
return <Component {...pageProps} /> return <Component {...pageProps} />;
} }
export default MyApp export default MyApp;

50
frontend/pages/_document.js
View File

@ -1,30 +1,30 @@
import Document from 'next/document' import Document from "next/document";
import { ServerStyleSheet } from 'styled-components' import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps(ctx) { static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet() const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage const originalRenderPage = ctx.renderPage;
try { try {
ctx.renderPage = () => ctx.renderPage = () =>
originalRenderPage({ originalRenderPage({
enhanceApp: (App) => (props) => enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />), sheet.collectStyles(<App {...props} />),
}) });
const initialProps = await Document.getInitialProps(ctx) const initialProps = await Document.getInitialProps(ctx);
return { return {
...initialProps, ...initialProps,
styles: ( styles: (
<> <>
{initialProps.styles} {initialProps.styles}
{sheet.getStyleElement()} {sheet.getStyleElement()}
</> </>
), ),
} };
} finally { } finally {
sheet.seal() sheet.seal();
}
} }
} }
}

2
frontend/pages/api/hello.js
View File

@ -1,5 +1,5 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) { export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' }) res.status(200).json({ name: "John Doe" });
} }

44
frontend/pages/index.js
View File

@ -1,25 +1,29 @@
import { useState } from 'react' import { useState } 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";
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 ( return (
<div className={""}> <div className={""}>
<Head> <Head>
<title>URL MiniFy</title> <title>URL MiniFy</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className={"main-bg"}> <main className={"main-bg"}>
<NavBar /> <NavBar />
<HomeSection shortUrl={shortUrl} setShortUrl={setShortUrl} longUrl={longUrl} setLongUrl={setLongUrl}/> <HomeSection
<Features/> shortUrl={shortUrl}
</main> setShortUrl={setShortUrl}
</div> longUrl={longUrl}
) setLongUrl={setLongUrl}
/>
<Features />
</main>
</div>
);
} }

25
frontend/pages/signup.js
View File

@ -1,15 +1,14 @@
import { useState } from 'react' import { useState } from "react";
import Head from 'next/head' 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 Reg from 'components/Reg/Reg' import Reg from "components/Reg/Reg";
export default function signup(){ export default function signup() {
return ( return (
<div className='flex-column'> <div className="flex-column">
<NavBar/> <NavBar />
<Reg/> <Reg />
</div> </div>
);
) }
}

1200
frontend/pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

6
frontend/prettier.config.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
arrowParens: 'always',
singleQuote: true,
tabWidth: 2,
semi: false,
}

122
frontend/styles/Home.module.css
View File

@ -1,116 +1,116 @@
.container { .container {
padding: 0 2rem; padding: 0 2rem;
} }
.main { .main {
min-height: 100vh; min-height: 100vh;
padding: 4rem 0; padding: 4rem 0;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer { .footer {
display: flex; display: flex;
flex: 1; flex: 1;
padding: 2rem 0; padding: 2rem 0;
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.footer a { .footer a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-grow: 1; flex-grow: 1;
} }
.title a { .title a {
color: #0070f3; color: #0070f3;
text-decoration: none; text-decoration: none;
} }
.title a:hover, .title a:hover,
.title a:focus, .title a:focus,
.title a:active { .title a:active {
text-decoration: underline; text-decoration: underline;
} }
.title { .title {
margin: 0; margin: 0;
line-height: 1.15; line-height: 1.15;
font-size: 4rem; font-size: 4rem;
} }
.title, .title,
.description { .description {
text-align: center; text-align: center;
} }
.description { .description {
margin: 4rem 0; margin: 4rem 0;
line-height: 1.5; line-height: 1.5;
font-size: 1.5rem; font-size: 1.5rem;
} }
.code { .code {
background: #fafafa; background: #fafafa;
border-radius: 5px; border-radius: 5px;
padding: 0.75rem; padding: 0.75rem;
font-size: 1.1rem; font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace; Bitstream Vera Sans Mono, Courier New, monospace;
} }
.grid { .grid {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 800px; max-width: 800px;
} }
.card { .card {
margin: 1rem; margin: 1rem;
padding: 1.5rem; padding: 1.5rem;
text-align: left; text-align: left;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
border-radius: 10px; border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px; max-width: 300px;
} }
.card:hover, .card:hover,
.card:focus, .card:focus,
.card:active { .card:active {
color: #0070f3; color: #0070f3;
border-color: #0070f3; border-color: #0070f3;
} }
.card h2 { .card h2 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
font-size: 1.5rem; font-size: 1.5rem;
} }
.card p { .card p {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.5; line-height: 1.5;
} }
.logo { .logo {
height: 1em; height: 1em;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.grid { .grid {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
} }
} }

41
frontend/styles/globals.css
View File

@ -1,34 +1,33 @@
html, html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
width:100vw; width: 100vw;
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;
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
* { * {
margin: 0; margin: 0;
padding:0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
section{ section {
width:100vw; width: 100vw;
min-height:100vh; min-height: 100vh;
} }
.flex-column{ .flex-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: url("./../assets/bg/main-bg.png"); background-image: url("./../assets/bg/main-bg.png");
} }
.main-bg{ .main-bg {
background-image: url("./../assets/bg/main-bg.png"); background-image: url("./../assets/bg/main-bg.png");
} }

28
frontend/styles/logostyles.css
View File

@ -1,21 +1,19 @@
/* This StyleSheet was prepared for the logo in the NavBar. /* This StyleSheet was prepared for the logo in the NavBar.
Please put any other style definitions inside globals.css or create a new stylesheet under styles folder */ Please put any other style definitions inside globals.css or create a new stylesheet under styles folder */
.logo{ .logo {
width: 3rem; width: 3rem;
position: relative; position: relative;
top: 0.2rem; top: 0.2rem;
} }
.logo-text {
.logo-text{ font-family: sans-serif;
font-family: sans-serif; font-weight: 700;
font-weight: 700; font-size: 2rem;
font-size: 2rem; margin-left: 1rem;
margin-left: 1rem; margin-right: 3.5rem;
margin-right: 3.5rem; display: inline-block;
display: inline-block; position: relative;
position: relative; top: -0.7rem;
top: -0.7rem;
} }

12
frontend/yarn.lock
View File

@ -501,6 +501,13 @@ ansi-styles@^3.2.1:
dependencies: dependencies:
color-convert "^1.9.0" color-convert "^1.9.0"
axios@^0.25.0:
version "0.25.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.25.0.tgz#349cfbb31331a9b4453190791760a8d35b093e0a"
integrity sha512-cD8FOb0tRH3uuEe6+evtAbgJtfxr7ly3fQjYcMcuPlgkwVS9xboaVIpcDV+cYQe+yGykgwZCs1pzjntcGa6l5g==
dependencies:
follow-redirects "^1.14.7"
babel-plugin-macros@^2.6.1: babel-plugin-macros@^2.6.1:
version "2.8.0" version "2.8.0"
resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz" resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz"
@ -640,6 +647,11 @@ find-root@^1.1.0:
resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz" resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
follow-redirects@^1.14.7:
version "1.14.8"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
function-bind@^1.1.1: function-bind@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"