Skip to content

2
22_23-J 12
Commit ea889ede authored by Maniyangamage Malindu Jethaka's avatar Maniyangamage Malindu Jethaka
Browse files
Options

develop risk prediction pages

parent 6578bdad
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 0 deletions
Frontend/src/pages/CalculateRiskForm.js 0 → 100644
View file @ ea889ede
import { m } from "framer-motion";
import * as React from "react";
// @mui
import { styled } from "@mui/material/styles";
import { Box, Button, Typography } from "@mui/material";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import TextField from "@mui/material/TextField";
import Link from "@mui/material/Link";
// components
import Page from "../components/Page";
// ----------------------------------------------------------------------
const ContentStyle = styled("div")(({ theme }) => ({
maxWidth: "100%",
display: "flex",
justifyContent: "center",
flexDirection: "column",
padding: theme.spacing(6, 0, 3, 0),
}));
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#F1F1F1",
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: "left",
color: theme.palette.text.secondary,
}));
function Textf(props) {
return (
<Box>
<h3 style={{ paddingTop: "20px" }}>{props.name}</h3>
<TextField
fullWidth
id="outlined-select-risk"
select
label={props.labelName}
color="secondary"
style={{ backgroundColor: "white" }}
></TextField>
</Box>
);
}
// ----------------------------------------------------------------------
export default function CalculateRiskForm() {
return (
<Page title="Calculate Risk Form">
<ContentStyle sx={{ textAlign: "center", alignItems: "center" }}>
<m.div>
<Typography variant="h3" paragraph>
Calculate Risk Level
</Typography>
</m.div>
</ContentStyle>
<Grid
container
direction="row"
justifyContent="space-around"
alignItems="flex-start"
style={{ paddingBottom: "40px" }}
>
<Grid item sm={10}>
<Item>
<Grid
container
direction="row"
justifyContent="space-around"
alignItems="flex-start"
>
<Grid item sm={5} style={{ paddingBottom: "20px" }}>
<Textf name="Age Group" labelName="Select your age group" />
<Textf
name="Race/Ethicity"
labelName="Select your age race..."
/>
<Textf
name="History of breast cancer in a first degree relative"
labelName="Select your history"
/>
<Textf
name="Age (years) at menarche"
labelName="Select your age..."
/>
<Textf
name="Age (years) at first birth"
labelName="Select your age..."
/>
<Textf
name="BI-RADS breast density"
labelName="Select your breast density..."
/>
</Grid>
<Grid item sm={5}>
<Textf
name="Use of hormone replacement therapy"
labelName="Select value..."
/>
<Textf
name="Monopausal status"
labelName="Select your monopausal status..."
/>
<Textf name="BMI Group" labelName="Select your BMI Group" />
<Textf
name="Previous breast biopsy or aspiration"
labelName="Select your status..."
/>
<Textf
name="Prior breast cancer diagnosis"
labelName="Select your status..."
/>
<Box style={{ padding: "40px", textAlign: "center" }}>
<Button
variant="contained"
href="#"
style={{ textAlign: "center" }}
>
{" "}
Calculate Risk Level{" "}
</Button>
</Box>
</Grid>
</Grid>
</Item>
</Grid>
</Grid>
<Link href="#" underline="hover" color="error" padding={"0 0 50px 120px"}>
<b>{"Result"} </b>
</Link>
</Page>
);
}
Frontend/src/pages/RiskLevelPrediction.js 0 → 100644
View file @ ea889ede
import * as React from "react";
// @mui
import { styled } from "@mui/material/styles";
import { Box, Button } from "@mui/material";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
// components
import Page from "../components/Page";
import Image from "src/components/Image";
// ----------------------------------------------------------------------
const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === "dark" ? "#1A2027F" : "#fff",
...theme.typography.body2,
padding: theme.spacing(6),
textAlign: "left",
}));
// ----------------------------------------------------------------------
export default function RiskLevelPrediction() {
return (
<Page title="Risk Level Prediction">
<Grid
container
direction="row"
justifyContent="space-around"
alignItems="flex-start"
style={{ paddingTop: "50px" }}
>
<Grid item sm={8}>
<Item>
<h1 style={{ fontSize: "50px" }}>
Concerned <br /> About My Risk
</h1>
<h4 style={{ paddingBottom: "40px" }}>
If you are uncertain about your own risk of breast cancer,it can
help to learn about the known risk factors and steps you can take
to lower your risk as much as possible.
</h4>
<p>
Everyone has some risk of developing breast cancer,but there are
many factors that can increase or decrease each individual
person's breast cancer risk. <a href="#">Learn more</a>
</p>
<br />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of
Lorem Ipsum.
</p>
<Box style={{ padding: "10px", textAlign: "right" }}>
<Button
variant="contained"
href="#"
style={{ textAlign: "center" }}
>
{" "}
Calculate Risk Level{" "}
</Button>
</Box>
</Item>
</Grid>
<Grid item sm={3}>
<Item>
<Image src="/assets/illustrations/illustration_login.png" />
<Box style={{ padding: "20px" }}>
<a
href="#"
style={{
color: "black",
textDecoration: "none",
}}
>
Sections
</a>
<hr />
<a
href="#"
style={{
color: "black",
textDecoration: "none",
}}
>
U.S breast cancer facts and statistics
</a>
<hr />
<a
href="#"
style={{
color: "black",
textDecoration: "none",
}}
>
Breast cancer risk factors
</a>
<hr />
<a
href="#"
style={{
color: "black",
textDecoration: "none",
}}
>
Understanding breast cancer risk
</a>
<hr />
<a
href="#"
style={{
color: "black",
textDecoration: "none",
}}
>
Exercise,nutrition and maintaining a healthy weight
</a>
</Box>
</Item>
</Grid>
</Grid>
</Page>
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment