Reformat and bug Fix [Major Changes
This commit is contained in:
parent
e0b8038c89
commit
8a5ccfc031
|
|
@ -15,12 +15,15 @@ module.exports.getAllData = async (req, res) => {
|
|||
|
||||
module.exports.getURLData = async (req, res) => {
|
||||
try {
|
||||
const { alias } = req.params
|
||||
const data = await Minfy.findOne({
|
||||
alias: alias,
|
||||
alias: req.params.alias,
|
||||
})
|
||||
data.minifiedUrl = base_url + data.alias
|
||||
return res.json(data)
|
||||
// data.minifiedUrl = base_url + data.alias
|
||||
if (!data || data == null) {
|
||||
return res.json({ success: false, message: 'No data found' })
|
||||
} else {
|
||||
res.json({ success: true, data })
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
res.sendStatus(500)
|
||||
|
|
|
|||
|
|
@ -1,55 +1,55 @@
|
|||
const jwt = require("jsonwebtoken");
|
||||
const User = require("../models/user");
|
||||
const jwt = require('jsonwebtoken')
|
||||
const User = require('../models/user')
|
||||
|
||||
|
||||
module.exports.register = async ({ body: { email, password } }, res) => {
|
||||
try{
|
||||
if(!email || !password) return res.sendStatus(400)
|
||||
let oldUser = await User.findOne({ email }).catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
if (oldUser) return res.status(400).send('Already Exists');
|
||||
let user = new User({ email });
|
||||
user.setPassword(password);
|
||||
let validationError = false;
|
||||
await user.save().catch((err) => {
|
||||
validationError = true;
|
||||
return res.sendStatus(400);
|
||||
});
|
||||
if (!validationError) return res.send(user.generateJWT());
|
||||
|
||||
}catch(e){
|
||||
console.log(e)
|
||||
return res.sendStatus(500)
|
||||
}
|
||||
module.exports.register = async ({ body: { email, password } }, res) => {
|
||||
try {
|
||||
if (!email || !password) return res.sendStatus(400)
|
||||
let oldUser = await User.findOne({ email }).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
if (oldUser) return res.status(400).send('Already Exists')
|
||||
let user = new User({ email })
|
||||
user.setPassword(password)
|
||||
let validationError = false
|
||||
await user.save().catch((err) => {
|
||||
validationError = true
|
||||
return res.sendStatus(400)
|
||||
})
|
||||
if (!validationError) return res.send(user.generateJWT())
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return res.sendStatus(500)
|
||||
}
|
||||
}
|
||||
module.exports.login = async ({ body: { email, password } }, res) => {
|
||||
try{
|
||||
if (!email || !password) return res.sendStatus(400)
|
||||
let user = await User.findOne({email}).catch((err) => console.error(err));
|
||||
try {
|
||||
if (!email || !password) return res.sendStatus(400)
|
||||
let user = await User.findOne({ email }).catch((err) =>
|
||||
console.error(err)
|
||||
)
|
||||
|
||||
if (user && user.validatePassword(password))
|
||||
return res.json({access_token:user.generateJWT()});
|
||||
return res.status(401).send(null);
|
||||
}catch(err) {
|
||||
console.log(err)
|
||||
return res.sendStatus(500)
|
||||
}
|
||||
if (user && user.validatePassword(password))
|
||||
return res.json({ access_token: user.generateJWT() })
|
||||
return res.status(401).send(null)
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
return res.sendStatus(500)
|
||||
}
|
||||
}
|
||||
module.exports.me= async (req, res) => {
|
||||
try{
|
||||
if (!req.user.isAuthenticated) {
|
||||
res.sendStatus(401);
|
||||
return;
|
||||
}
|
||||
let user = req.user.data;
|
||||
res.send({
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
phone: user.phone,
|
||||
});
|
||||
}catch (e){
|
||||
console.log(e)
|
||||
return res.sendStatus(500)
|
||||
}
|
||||
module.exports.me = async (req, res) => {
|
||||
try {
|
||||
if (!req.user.isAuthenticated) {
|
||||
res.sendStatus(401)
|
||||
return
|
||||
}
|
||||
let user = req.user.data
|
||||
res.send({
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
phone: user.phone,
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return res.sendStatus(500)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const express = require('express')
|
||||
const cors = require('cors');
|
||||
const cors = require('cors')
|
||||
const http = require('http')
|
||||
const { urlencoded, json } = require('body-parser')
|
||||
const session = require('express-session')
|
||||
|
|
@ -10,7 +10,7 @@ require('dotenv').config()
|
|||
const app = express()
|
||||
|
||||
app.use(express.json())
|
||||
app.use(cors());
|
||||
app.use(cors())
|
||||
app.use(json())
|
||||
app.use(
|
||||
urlencoded({
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
const jwt = require("jsonwebtoken");
|
||||
const User = require("../models/user")
|
||||
|
||||
const jwt = require('jsonwebtoken')
|
||||
const User = require('../models/user')
|
||||
|
||||
module.exports.auth = async (req, res, next) => {
|
||||
let user = {isAuthenticated:false};
|
||||
if (req.headers.authorization && req.headers.authorization !== null) {
|
||||
try {
|
||||
let jwtData = jwt.verify(
|
||||
req.headers.authorization.replace("Bearer ", ""),
|
||||
process.env.AUTH_SECRET
|
||||
);
|
||||
let userData = await User.findOne({
|
||||
email: jwtData.email,
|
||||
hash: jwtData.hash,
|
||||
}).catch((err) => console.error(err));
|
||||
user.isAuthenticated = userData ? true : false;
|
||||
user.data = userData;
|
||||
} catch (err) {
|
||||
user.isAuthenticated = false;
|
||||
user.data = null;
|
||||
}
|
||||
}
|
||||
req.user = user;
|
||||
next();
|
||||
}
|
||||
let user = { isAuthenticated: false }
|
||||
if (req.headers.authorization && req.headers.authorization !== null) {
|
||||
try {
|
||||
let jwtData = jwt.verify(
|
||||
req.headers.authorization.replace('Bearer ', ''),
|
||||
process.env.AUTH_SECRET
|
||||
)
|
||||
let userData = await User.findOne({
|
||||
email: jwtData.email,
|
||||
hash: jwtData.hash,
|
||||
}).catch((err) => console.error(err))
|
||||
user.isAuthenticated = userData ? true : false
|
||||
user.data = userData
|
||||
} catch (err) {
|
||||
user.isAuthenticated = false
|
||||
user.data = null
|
||||
}
|
||||
}
|
||||
req.user = user
|
||||
next()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
const mongoose = require('mongoose')
|
||||
const { Schema } = mongoose
|
||||
|
||||
//build a schema
|
||||
const minifiedUrlSchema = new Schema(
|
||||
{
|
||||
originalUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
alias: {
|
||||
type: String,
|
||||
required: true,
|
||||
unique: true,
|
||||
},
|
||||
minifiedUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
views: {
|
||||
type: Number,
|
||||
},
|
||||
createdBy: {
|
||||
type: String,
|
||||
default: 'Anonymous',
|
||||
}
|
||||
},
|
||||
{ timestamp: true }
|
||||
)
|
||||
//make a model using this schema and export it
|
||||
module.exports = mongoose.model('minified_url_model', minifiedUrlSchema)
|
||||
const mongoose = require('mongoose')
|
||||
const { Schema } = mongoose
|
||||
|
||||
//build a schema
|
||||
const minifiedUrlSchema = new Schema(
|
||||
{
|
||||
originalUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
alias: {
|
||||
type: String,
|
||||
required: true,
|
||||
unique: true,
|
||||
},
|
||||
minifiedUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
views: {
|
||||
type: Number,
|
||||
},
|
||||
createdBy: {
|
||||
type: String,
|
||||
default: 'Anonymous',
|
||||
},
|
||||
},
|
||||
{ timestamp: true }
|
||||
)
|
||||
//make a model using this schema and export it
|
||||
module.exports = mongoose.model('minified_url_model', minifiedUrlSchema)
|
||||
|
|
|
|||
|
|
@ -1,63 +1,63 @@
|
|||
const mongoose = require("mongoose");
|
||||
const crypto = require("crypto");
|
||||
const jwt = require("jsonwebtoken");
|
||||
const mongoose = require('mongoose')
|
||||
const crypto = require('crypto')
|
||||
const jwt = require('jsonwebtoken')
|
||||
|
||||
const { Schema } = mongoose;
|
||||
const { Schema } = mongoose
|
||||
|
||||
const UsersSchema = new Schema(
|
||||
{
|
||||
email: {
|
||||
type: String,
|
||||
unique: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
// required: true,
|
||||
},
|
||||
hash: String,
|
||||
salt: String,
|
||||
},
|
||||
{
|
||||
timestamps: true,
|
||||
}
|
||||
);
|
||||
{
|
||||
email: {
|
||||
type: String,
|
||||
unique: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
// required: true,
|
||||
},
|
||||
hash: String,
|
||||
salt: String,
|
||||
},
|
||||
{
|
||||
timestamps: true,
|
||||
}
|
||||
)
|
||||
|
||||
UsersSchema.methods.setPassword = function (password) {
|
||||
this.salt = crypto.randomBytes(16).toString("hex");
|
||||
this.hash = crypto
|
||||
.pbkdf2Sync(password, this.salt, 10000, 512, "sha512")
|
||||
.toString("hex");
|
||||
};
|
||||
this.salt = crypto.randomBytes(16).toString('hex')
|
||||
this.hash = crypto
|
||||
.pbkdf2Sync(password, this.salt, 10000, 512, 'sha512')
|
||||
.toString('hex')
|
||||
}
|
||||
|
||||
UsersSchema.methods.validatePassword = function (password) {
|
||||
const hash = crypto
|
||||
.pbkdf2Sync(password, this.salt, 10000, 512, "sha512")
|
||||
.toString("hex");
|
||||
return this.hash === hash;
|
||||
};
|
||||
const hash = crypto
|
||||
.pbkdf2Sync(password, this.salt, 10000, 512, 'sha512')
|
||||
.toString('hex')
|
||||
return this.hash === hash
|
||||
}
|
||||
|
||||
UsersSchema.methods.generateJWT = function () {
|
||||
const today = new Date();
|
||||
const expirationDate = new Date(today);
|
||||
expirationDate.setDate(today.getDate() + 60);
|
||||
const today = new Date()
|
||||
const expirationDate = new Date(today)
|
||||
expirationDate.setDate(today.getDate() + 60)
|
||||
|
||||
return jwt.sign(
|
||||
{
|
||||
email: this.email,
|
||||
hash: this.hash,
|
||||
id: this._id,
|
||||
exp: parseInt(String(expirationDate.getTime() / 1000), 10),
|
||||
},
|
||||
process.env.AUTH_SECRET
|
||||
);
|
||||
};
|
||||
return jwt.sign(
|
||||
{
|
||||
email: this.email,
|
||||
hash: this.hash,
|
||||
id: this._id,
|
||||
exp: parseInt(String(expirationDate.getTime() / 1000), 10),
|
||||
},
|
||||
process.env.AUTH_SECRET
|
||||
)
|
||||
}
|
||||
|
||||
UsersSchema.methods.toAuthJSON = function () {
|
||||
return {
|
||||
id: this._id,
|
||||
email: this.email,
|
||||
token: this.generateJWT(),
|
||||
};
|
||||
};
|
||||
return {
|
||||
id: this._id,
|
||||
email: this.email,
|
||||
token: this.generateJWT(),
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = mongoose.model("users", UsersSchema);
|
||||
module.exports = mongoose.model('users', UsersSchema)
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,7 @@ const router = express.Router()
|
|||
const homeController = require('../controllers/home_controller')
|
||||
|
||||
router.get('/', homeController.home)
|
||||
router.use("/minify", require("./minify"))
|
||||
router.use('/user', require("./user"))
|
||||
router.use('/minify', require('./minify'))
|
||||
router.use('/user', require('./user'))
|
||||
|
||||
module.exports = router
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
const {Router} = require("express")
|
||||
const controller = require("../controllers/minify")
|
||||
const {auth} = require("../middlewares/auth")
|
||||
const { Router } = require('express')
|
||||
const controller = require('../controllers/minify')
|
||||
const { auth } = require('../middlewares/auth')
|
||||
|
||||
const router = Router();
|
||||
const router = Router()
|
||||
|
||||
router.get("/all", controller.getAllData)
|
||||
router.get("/id/:id", controller.findUrlById)
|
||||
router.get("/alias/:alias", controller.getURLData)
|
||||
router.get('/all', controller.getAllData)
|
||||
router.get('/id/:id', controller.findUrlById)
|
||||
router.get('/alias/:alias', controller.getURLData)
|
||||
|
||||
router.post("/add",controller.addURL)
|
||||
router.post("/add/custom",auth,controller.addURLAuthed)
|
||||
router.post('/add', controller.addURL)
|
||||
router.post('/add/custom', auth, controller.addURLAuthed)
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const {Router} = require("express")
|
||||
const controller = require("../controllers/user")
|
||||
const {auth} = require("../middlewares/auth")
|
||||
const { Router } = require('express')
|
||||
const controller = require('../controllers/user')
|
||||
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.get('/me',auth, controller.me)
|
||||
router.get('/me', auth, controller.me)
|
||||
|
||||
module.exports = router
|
||||
module.exports = router
|
||||
|
|
|
|||
|
|
@ -1,42 +1,82 @@
|
|||
import * as React from 'react';
|
||||
import { Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography, alpha, AppBar } from "@mui/material";
|
||||
import * as React from "react";
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Toolbar,
|
||||
Tooltip,
|
||||
Typography,
|
||||
alpha,
|
||||
AppBar,
|
||||
} 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 QrCodeScannerIcon from "@mui/icons-material/QrCodeScanner";
|
||||
import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
|
||||
import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', my: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
my: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<h1> SHORTEN, SHARE AND ANALYZE</h1>
|
||||
<br />
|
||||
</Box>
|
||||
<Box sx={{ flexGrow: 1, 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' }} />
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
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>
|
||||
</Box>
|
||||
<Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}>
|
||||
<QrCodeScannerIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "centre",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<QrCodeScannerIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
|
||||
<h4>QR CODE</h4>
|
||||
</Box>
|
||||
<Box style={{ display: 'flex', flexDirection: 'column', justifyContent: 'centre', alignItems: 'center', }}>
|
||||
<RocketLaunchIcon sx={{ width: '3.5rem', height: '3.5rem' }} />
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "centre",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<RocketLaunchIcon sx={{ width: "3.5rem", height: "3.5rem" }} />
|
||||
<h4>ROBUST API</h4>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -4,77 +4,78 @@ import Link from "next/link";
|
|||
import Axios from "helpers/Axios";
|
||||
|
||||
const head = {
|
||||
fontSize: "5rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "30px",
|
||||
fontSize: "5rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "30px",
|
||||
};
|
||||
const box = {
|
||||
fontSize: "1.5em",
|
||||
borderRadius: "50px",
|
||||
padding: "1em",
|
||||
width: "500px",
|
||||
height: "50px",
|
||||
fontSize: "1.5em",
|
||||
borderRadius: "50px",
|
||||
padding: "1em",
|
||||
width: "500px",
|
||||
height: "50px",
|
||||
};
|
||||
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) {
|
||||
const setMinfy = async () => {
|
||||
let res;
|
||||
try {
|
||||
res = await Axios.post(`/minify/add`, {
|
||||
originalUrl: props.longUrl,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
const setMinfy = async () => {
|
||||
let res;
|
||||
try {
|
||||
res = await Axios.post(`/minify/add`, {
|
||||
originalUrl: props.longUrl,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = await res.data;
|
||||
props.setShortUrl(data.minifiedUrl);
|
||||
navigator.clipboard.writeText(props.shortUrl);
|
||||
};
|
||||
const data = await res.data;
|
||||
props.setShortUrl(data.minifiedUrl);
|
||||
navigator.clipboard.writeText(props.shortUrl);
|
||||
};
|
||||
|
||||
return (
|
||||
<HomeSectionStyle>
|
||||
<div className="content">
|
||||
<h1 style={head} className="title">
|
||||
URL MINIFY
|
||||
</h1>
|
||||
return (
|
||||
<HomeSectionStyle>
|
||||
<div className="content">
|
||||
<h1 style={head} className="title">
|
||||
URL MINIFY
|
||||
</h1>
|
||||
|
||||
<div style={searchBox}>
|
||||
<input
|
||||
style={box}
|
||||
placeholder="Enter the url to be minified......"
|
||||
value={props.longUrl}
|
||||
onChange={(e) => {
|
||||
props.setLongUrl(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<button style={btn} id="minify" onClick={setMinfy}>
|
||||
MINIFY
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>
|
||||
Need more advanced features? | <Link href="/signup">Create an account</Link>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</HomeSectionStyle>
|
||||
);
|
||||
<div style={searchBox}>
|
||||
<input
|
||||
style={box}
|
||||
placeholder="Enter the url to be minified......"
|
||||
value={props.longUrl}
|
||||
onChange={(e) => {
|
||||
props.setLongUrl(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<button style={btn} id="minify" onClick={setMinfy}>
|
||||
MINIFY
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>
|
||||
Need more advanced features? |{" "}
|
||||
<Link href="/signup">Create an account</Link>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</HomeSectionStyle>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeSection;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,26 @@
|
|||
import React from 'react';
|
||||
import React from "react";
|
||||
|
||||
export default function Logo(){
|
||||
|
||||
return(
|
||||
export default function Logo() {
|
||||
return (
|
||||
<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>
|
||||
<p className="logo-text">
|
||||
URL MINIFY
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
<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>
|
||||
<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)``;
|
||||
|
|
|
|||
|
|
@ -1,136 +1,182 @@
|
|||
import React from 'react';
|
||||
import {Avatar, 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 React from "react";
|
||||
import {
|
||||
Avatar,
|
||||
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 Logo from './Logo';
|
||||
import Logo from "./Logo";
|
||||
|
||||
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
||||
const settings = ["Profile", "Account", "Dashboard", "Logout"];
|
||||
|
||||
function Index(props) {
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
||||
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
||||
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
const handleOpenNavMenu = (event) => {
|
||||
setAnchorElNav(event.currentTarget);
|
||||
};
|
||||
const handleOpenUserMenu = (event) => {
|
||||
setAnchorElUser(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
const handleCloseNavMenu = () => {
|
||||
setAnchorElNav(null);
|
||||
};
|
||||
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
const handleCloseUserMenu = () => {
|
||||
setAnchorElUser(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<NavbarStyle position="relative" sx={{bgcolor:alpha('#000000',0.50),m:'0px'}}>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters="false">
|
||||
<Typography variant='h4' sx={{fontWeight:'bold'}}>
|
||||
URL MINIFY
|
||||
</Typography>
|
||||
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse', display: { xs: 'flex', md: 'none' } }}>
|
||||
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: 'block', md: 'none' },
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
|
||||
<Typography textAlign="center" sx={{display:'flex'}} >
|
||||
<GitHubIcon fontSize='small'/>
|
||||
GitHub
|
||||
</Typography>
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center" sx={{display:'flex'}} >
|
||||
CRIDITS
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1,flexDirection:'row-reverse',gap:'10px',px:'20px', display: { xs: 'none', md: 'flex' } }}>
|
||||
<a href='https://github.com/BRAVO68WEB/url-minify' target={'_blank'} >
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ color: 'white', display: 'flex',gap:'10px',fontSize:'h5.fontSize',fontFamily:'sans-serif',fontStyle:'bold', textTransform: 'capitalize',fontWeight:'bold'}}
|
||||
>
|
||||
<GitHubIcon fontSize='large'/>
|
||||
GitHub
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{ color: 'white', display: 'block',fontSize:'h5.fontSize'}}
|
||||
>
|
||||
CREDITS
|
||||
</Button>
|
||||
|
||||
</Box>
|
||||
return (
|
||||
<NavbarStyle
|
||||
position="relative"
|
||||
sx={{ bgcolor: alpha("#000000", 0.5), m: "0px" }}
|
||||
>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters="false">
|
||||
<Typography variant="h4" sx={{ fontWeight: "bold" }}>
|
||||
URL MINIFY
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
flexDirection: "row-reverse",
|
||||
display: { xs: "flex", md: "none" },
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "left",
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "left",
|
||||
}}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{
|
||||
display: { xs: "block", md: "none" },
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a
|
||||
href="https://github.com/BRAVO68WEB/url-minify"
|
||||
target={"_blank"}
|
||||
>
|
||||
<Typography textAlign="center" sx={{ display: "flex" }}>
|
||||
<GitHubIcon fontSize="small" />
|
||||
GitHub
|
||||
</Typography>
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<Typography textAlign="center" sx={{ display: "flex" }}>
|
||||
CRIDITS
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</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>
|
||||
);
|
||||
<Box
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
flexDirection: "row-reverse",
|
||||
gap: "10px",
|
||||
px: "20px",
|
||||
display: { xs: "none", md: "flex" },
|
||||
}}
|
||||
>
|
||||
<a
|
||||
href="https://github.com/BRAVO68WEB/url-minify"
|
||||
target={"_blank"}
|
||||
>
|
||||
<Button
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
color: "white",
|
||||
display: "flex",
|
||||
gap: "10px",
|
||||
fontSize: "h5.fontSize",
|
||||
fontFamily: "sans-serif",
|
||||
fontStyle: "bold",
|
||||
textTransform: "capitalize",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<GitHubIcon fontSize="large" />
|
||||
GitHub
|
||||
</Button>
|
||||
</a>
|
||||
<Button
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,67 +1,105 @@
|
|||
import React from 'react';
|
||||
import React from "react";
|
||||
import RegStyle from "./Reg.style";
|
||||
import Image from 'next/image'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faUser, faEnvelope, faLock, faClose } from '@fortawesome/free-solid-svg-icons'
|
||||
import { useState } from 'react';
|
||||
import { Link } from '@mui/material';
|
||||
import Image from "next/image";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faUser,
|
||||
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({
|
||||
username: "",
|
||||
email: "",
|
||||
password:"",
|
||||
repassword:""
|
||||
})
|
||||
const handleInput = (event) => {
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
setUserData({ ...userData, [name]: value });
|
||||
};
|
||||
|
||||
const handleInput = (event) => {
|
||||
const name = event.target.name;
|
||||
const value = event.target.value;
|
||||
setUserData({ ...userData, [name]: value})
|
||||
}
|
||||
return (
|
||||
<RegStyle>
|
||||
<form className="form-wrapper">
|
||||
<div className="reg-wide-container">
|
||||
<FontAwesomeIcon icon={faClose} />
|
||||
</div>
|
||||
|
||||
return(
|
||||
<RegStyle>
|
||||
<form className='form-wrapper'>
|
||||
<div className='reg-wide-container'>
|
||||
<FontAwesomeIcon icon={faClose}/>
|
||||
</div>
|
||||
|
||||
<p className='reg-title'>Sign Up</p>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faUser}/>
|
||||
</div>
|
||||
<input className='reg-input' name='username' autoComplete='off' type="text" value={userData.username} onChange={handleInput} placeholder='Full Name' />
|
||||
</div>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faEnvelope}/>
|
||||
</div>
|
||||
<input className='reg-input' name='email' autoComplete='off' onChange={handleInput} type="text" value={userData.email} placeholder='Email Address'/>
|
||||
</div>
|
||||
<div className='reg-field'>
|
||||
<div className='reg-label'>
|
||||
<FontAwesomeIcon icon={faLock}/>
|
||||
</div>
|
||||
<input className='reg-input' name='password' autoComplete='off' onChange={handleInput} type="password" 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
|
||||
<Link href="/" exact className='foot-text underline'>here</Link>
|
||||
</p>
|
||||
|
||||
|
||||
</form>
|
||||
</RegStyle>
|
||||
|
||||
)
|
||||
<p className="reg-title">Sign Up</p>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faUser} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="username"
|
||||
autoComplete="off"
|
||||
type="text"
|
||||
value={userData.username}
|
||||
onChange={handleInput}
|
||||
placeholder="Full Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faEnvelope} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="email"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="text"
|
||||
value={userData.email}
|
||||
placeholder="Email Address"
|
||||
/>
|
||||
</div>
|
||||
<div className="reg-field">
|
||||
<div className="reg-label">
|
||||
<FontAwesomeIcon icon={faLock} />
|
||||
</div>
|
||||
<input
|
||||
className="reg-input"
|
||||
name="password"
|
||||
autoComplete="off"
|
||||
onChange={handleInput}
|
||||
type="password"
|
||||
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
|
||||
<Link href="/" exact className="foot-text underline">
|
||||
here
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
</RegStyle>
|
||||
);
|
||||
}
|
||||
export default Reg;
|
||||
export default Reg;
|
||||
|
|
|
|||
|
|
@ -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,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{
|
||||
font-size: 24px;
|
||||
width: 30px;
|
||||
color: #9134bd;
|
||||
position: relative;
|
||||
.reg-label {
|
||||
font-size: 24px;
|
||||
width: 30px;
|
||||
color: #9134bd;
|
||||
position: relative;
|
||||
}
|
||||
.reg-title{
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color:#9134bd;
|
||||
.reg-title {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-wide-container{
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #9134bd;
|
||||
font-size: 24px;
|
||||
.reg-wide-container {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
color: #9134bd;
|
||||
font-size: 24px;
|
||||
}
|
||||
.reg-input{
|
||||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
justify-content: flex-end;
|
||||
color: #9134bd;
|
||||
.reg-input {
|
||||
margin-left: 10px;
|
||||
height: 35px;
|
||||
width: 340px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
justify-content: flex-end;
|
||||
color: #9134bd;
|
||||
}
|
||||
.reg-input:active, .reg-input:focus{
|
||||
outline: none;
|
||||
.reg-input:active,
|
||||
.reg-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
.reg-input::placeholder{
|
||||
color: #6babc7;
|
||||
.reg-input::placeholder {
|
||||
color: #6babc7;
|
||||
}
|
||||
.reg-field{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
.reg-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.form-wrapper{
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
margin-top: 0;
|
||||
.form-wrapper {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 20px 30px 40px 30px;
|
||||
border-radius: 20px;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(6px);
|
||||
border-style: solid;
|
||||
border-color: #f1faff;
|
||||
border-width: 1px 0px 0px 1px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.submit-button{
|
||||
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 20px ;
|
||||
background-image: linear-gradient(135deg ,#cc5fff, #7E3EE4, #0087ca, #2db9ff);
|
||||
background-size: 200%;
|
||||
background-position: left;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
.submit-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
background-image: linear-gradient(135deg, #cc5fff, #7e3ee4, #0087ca, #2db9ff);
|
||||
background-size: 200%;
|
||||
background-position: left;
|
||||
color: white;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.submit-button:hover{
|
||||
background-position: right;
|
||||
.submit-button:hover {
|
||||
background-position: right;
|
||||
}
|
||||
.submit-button:active{
|
||||
transform: scale(0.95);
|
||||
transition: 0.1s
|
||||
.submit-button:active {
|
||||
transform: scale(0.95);
|
||||
transition: 0.1s;
|
||||
}
|
||||
|
||||
.icon{
|
||||
fill: black;
|
||||
.icon {
|
||||
fill: black;
|
||||
}
|
||||
|
||||
.foot-text{
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
.foot-text {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
margin-top: 50px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.underline{
|
||||
text-decoration: underline;
|
||||
color: #9134bd;
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
color: #9134bd;
|
||||
}
|
||||
.underline:hover{
|
||||
color: #008ed4;
|
||||
transition: 0.5s;
|
||||
.underline:hover {
|
||||
color: #008ed4;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import axios from "axios";
|
|||
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": "*",
|
||||
},
|
||||
baseURL: API_URL,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
"compilerOptions": {
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
reactStrictMode: true,
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,50 +1,50 @@
|
|||
{
|
||||
"name": "url-minify",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"prettier": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.3.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.0.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.0.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.0.0",
|
||||
"@fortawesome/react-fontawesome": "^0.1.17",
|
||||
"@mui/icons-material": "^5.3.1",
|
||||
"@mui/material": "^5.4.0",
|
||||
"@mui/styled-engine-sc": "^5.3.0",
|
||||
"axios": "^0.25.0",
|
||||
"nanoid": "^3.2.0",
|
||||
"next": "12.0.9",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"styled-components": "^5.3.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/bravo68web/url-minify.git"
|
||||
},
|
||||
"keywords": [
|
||||
"url-minify",
|
||||
"short-link",
|
||||
"generator",
|
||||
"nextjs",
|
||||
"frontend",
|
||||
"api",
|
||||
"rest"
|
||||
],
|
||||
"author": "BRAVO68WEB",
|
||||
"bugs": {
|
||||
"url": "https://github.com/bravo68web/url-minify/issues"
|
||||
},
|
||||
"homepage": "https://github.com/bravo68web/url-minify#readme",
|
||||
"devDependencies": {
|
||||
"prettier": "2.5.1"
|
||||
}
|
||||
"name": "url-minify",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"prettier": "prettier --write ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.7.1",
|
||||
"@emotion/styled": "^11.6.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.3.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.0.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.0.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.0.0",
|
||||
"@fortawesome/react-fontawesome": "^0.1.17",
|
||||
"@mui/icons-material": "^5.3.1",
|
||||
"@mui/material": "^5.4.0",
|
||||
"@mui/styled-engine-sc": "^5.3.0",
|
||||
"axios": "^0.25.0",
|
||||
"nanoid": "^3.2.0",
|
||||
"next": "12.0.9",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"styled-components": "^5.3.3"
|
||||
},
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/bravo68web/url-minify.git"
|
||||
},
|
||||
"keywords": [
|
||||
"url-minify",
|
||||
"short-link",
|
||||
"generator",
|
||||
"nextjs",
|
||||
"frontend",
|
||||
"api",
|
||||
"rest"
|
||||
],
|
||||
"author": "BRAVO68WEB",
|
||||
"bugs": {
|
||||
"url": "https://github.com/bravo68web/url-minify/issues"
|
||||
},
|
||||
"homepage": "https://github.com/bravo68web/url-minify#readme",
|
||||
"devDependencies": {
|
||||
"prettier": "2.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import React from "react";
|
||||
|
||||
export default function NotFound() {
|
||||
return <div>NotFound</div>;
|
||||
}
|
||||
|
|
@ -1,21 +1,105 @@
|
|||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import HomeSection from "components/HomeSection/homeSection"
|
||||
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 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 (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
// }
|
||||
// },[id])
|
||||
useEffect(() => {
|
||||
if (!props?.resData.success) {
|
||||
// router.push('/404')
|
||||
} else {
|
||||
// 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"}>
|
||||
Not Found
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
<main className={"main-bg"}>Not Found</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;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import '../styles/globals.css'
|
||||
import '../styles/logostyles.css'
|
||||
import '../components/Reg/styles.css'
|
||||
import "../styles/globals.css";
|
||||
import "../styles/logostyles.css";
|
||||
import "../components/Reg/styles.css";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
export default MyApp;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
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
|
||||
static async getInitialProps(ctx) {
|
||||
const sheet = new ServerStyleSheet();
|
||||
const originalRenderPage = ctx.renderPage;
|
||||
|
||||
try {
|
||||
ctx.renderPage = () =>
|
||||
originalRenderPage({
|
||||
enhanceApp: (App) => (props) =>
|
||||
sheet.collectStyles(<App {...props} />),
|
||||
})
|
||||
try {
|
||||
ctx.renderPage = () =>
|
||||
originalRenderPage({
|
||||
enhanceApp: (App) => (props) =>
|
||||
sheet.collectStyles(<App {...props} />),
|
||||
});
|
||||
|
||||
const initialProps = await Document.getInitialProps(ctx)
|
||||
return {
|
||||
...initialProps,
|
||||
styles: (
|
||||
<>
|
||||
{initialProps.styles}
|
||||
{sheet.getStyleElement()}
|
||||
</>
|
||||
),
|
||||
}
|
||||
} finally {
|
||||
sheet.seal()
|
||||
}
|
||||
const initialProps = await Document.getInitialProps(ctx);
|
||||
return {
|
||||
...initialProps,
|
||||
styles: (
|
||||
<>
|
||||
{initialProps.styles}
|
||||
{sheet.getStyleElement()}
|
||||
</>
|
||||
),
|
||||
};
|
||||
} finally {
|
||||
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,25 +1,29 @@
|
|||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import HomeSection from "components/HomeSection/homeSection"
|
||||
import { 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 Features from "components/Features";
|
||||
|
||||
export default function Home() {
|
||||
const [shortUrl, setShortUrl] = useState(null)
|
||||
const [longUrl, setLongUrl] = useState('')
|
||||
return (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
const [shortUrl, setShortUrl] = useState(null);
|
||||
const [longUrl, setLongUrl] = useState("");
|
||||
return (
|
||||
<div className={""}>
|
||||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className={"main-bg"}>
|
||||
<NavBar />
|
||||
<HomeSection shortUrl={shortUrl} setShortUrl={setShortUrl} longUrl={longUrl} setLongUrl={setLongUrl}/>
|
||||
<Features/>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
<main className={"main-bg"}>
|
||||
<NavBar />
|
||||
<HomeSection
|
||||
shortUrl={shortUrl}
|
||||
setShortUrl={setShortUrl}
|
||||
longUrl={longUrl}
|
||||
setLongUrl={setLongUrl}
|
||||
/>
|
||||
<Features />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
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 Features from "components/Features";
|
||||
import Reg from "components/Reg/Reg";
|
||||
|
||||
export default function signup(){
|
||||
return (
|
||||
<div className='flex-column'>
|
||||
<NavBar/>
|
||||
<Reg/>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
export default function signup() {
|
||||
return (
|
||||
<div className="flex-column">
|
||||
<NavBar />
|
||||
<Reg />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
arrowParens: 'always',
|
||||
singleQuote: true,
|
||||
tabWidth: 2,
|
||||
semi: false,
|
||||
}
|
||||
|
|
@ -1,116 +1,116 @@
|
|||
.container {
|
||||
padding: 0 2rem;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.grid {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,33 @@
|
|||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width:100vw;
|
||||
overflow-x:hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100vw;
|
||||
overflow-x: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding:0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
section{
|
||||
width:100vw;
|
||||
min-height:100vh;
|
||||
section {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.flex-column{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url("./../assets/bg/main-bg.png");
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: url("./../assets/bg/main-bg.png");
|
||||
}
|
||||
.main-bg{
|
||||
background-image: url("./../assets/bg/main-bg.png");
|
||||
.main-bg {
|
||||
background-image: url("./../assets/bg/main-bg.png");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
/* 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 */
|
||||
|
||||
.logo{
|
||||
width: 3rem;
|
||||
position: relative;
|
||||
top: 0.2rem;
|
||||
.logo {
|
||||
width: 3rem;
|
||||
position: relative;
|
||||
top: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
.logo-text{
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 3.5rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.7rem;
|
||||
.logo-text {
|
||||
font-family: sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 2rem;
|
||||
margin-left: 1rem;
|
||||
margin-right: 3.5rem;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.7rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -501,6 +501,13 @@ ansi-styles@^3.2.1:
|
|||
dependencies:
|
||||
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:
|
||||
version "2.8.0"
|
||||
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"
|
||||
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:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue