Scaffold homepage, small style tweaks

This commit is contained in:
David Stotijn
2020-09-23 23:43:20 +02:00
parent 71de41e6e6
commit 8828a586a1
22 changed files with 1041 additions and 55 deletions

View File

@ -22,7 +22,7 @@ function App({ Component, pageProps }: AppProps): JSX.Element {
return (
<React.Fragment>
<Head>
<title>Hetty</title>
<title>Hetty://</title>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"

View File

@ -10,10 +10,15 @@ export default class MyDocument extends Document {
<Html lang="en">
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
<link rel="stylesheet" href="/style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
/>
</Head>
<body>
<Main />

View File

@ -1,8 +1,81 @@
import {
Box,
Button,
createStyles,
IconButton,
makeStyles,
Theme,
Typography,
} from "@material-ui/core";
import SettingsEthernetIcon from "@material-ui/icons/SettingsEthernet";
import SendIcon from "@material-ui/icons/Send";
import Link from "next/link";
import Layout from "../components/Layout";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
titleHighlight: {
color: theme.palette.secondary.main,
},
subtitle: {
fontSize: "1.6rem",
width: "60%",
lineHeight: 2,
marginBottom: theme.spacing(5),
},
button: {
marginRight: theme.spacing(2),
},
})
);
function Index(): JSX.Element {
const classes = useStyles();
return (
<div>
<h1>Hetty123</h1>
</div>
<Layout>
<Box p={4}>
<Box mb={4} width="60%">
<Typography variant="h2">
<span className={classes.titleHighlight}>Hetty://</span>
<br />
The simple HTTP toolkit for security research.
</Typography>
</Box>
<Typography className={classes.subtitle} paragraph>
What if security testing was intuitive, powerful, and good looking?
What if it was <strong>free</strong>, instead of $400 per year?{" "}
<span className={classes.titleHighlight}>Hetty</span> is listening on{" "}
<code>:8080</code>
</Typography>
<Box>
<Link href="/proxy" passHref>
<Button
className={classes.button}
variant="contained"
color="secondary"
component="a"
size="large"
startIcon={<SettingsEthernetIcon />}
>
Setup proxy
</Button>
</Link>
<Link href="/proxy" passHref>
<Button
className={classes.button}
variant="contained"
color="primary"
component="a"
size="large"
startIcon={<SendIcon />}
>
Send HTTP requests
</Button>
</Link>
</Box>
</Box>
</Layout>
);
}

View File

@ -1,8 +1,29 @@
import React from "react";
import { Box, Button, Typography } from "@material-ui/core";
import ListIcon from "@material-ui/icons/List";
import Link from "next/link";
import Layout from "../../components/Layout";
function Index(): JSX.Element {
return (
<div>
<h1>Proxy123</h1>
</div>
<Layout>
<Box mb={2}>
<Typography variant="h5">Proxy setup</Typography>
</Box>
<Typography paragraph>Coming soon</Typography>
<Link href="/proxy/logs" passHref>
<Button
variant="contained"
color="secondary"
component="a"
size="large"
startIcon={<ListIcon />}
>
View logs
</Button>
</Link>
</Layout>
);
}

View File

@ -0,0 +1,16 @@
import { Box, Typography } from "@material-ui/core";
import Layout from "../../components/Layout";
function Index(): JSX.Element {
return (
<Layout>
<Box mb={2}>
<Typography variant="h5">Sender</Typography>
</Box>
<Typography paragraph>Coming soon</Typography>
</Layout>
);
}
export default Index;