diff --git a/src/components/Signinbutton.tsx b/src/components/Signinbutton.tsx new file mode 100644 index 0000000..2f83261 --- /dev/null +++ b/src/components/Signinbutton.tsx @@ -0,0 +1,29 @@ +import { Button } from "@mui/material"; +import { + Box, + Paper, + Stack, + TextField, + Typography, + Direction, +} from "@mui/material"; +import { useState } from "react"; + +export default function SigninButton() { + return ( + <h2 style={{ + textAlign: "center",}}> + <Box component="div" p={2} > + <Button + sx={{ + width: "20%", + alignItems: "center" + }} + variant="text" + > + sign in + </Button> + </Box> + </h2> + ); +} diff --git a/src/components/Signupbutton.tsx b/src/components/Signupbutton.tsx new file mode 100644 index 0000000..e5311e8 --- /dev/null +++ b/src/components/Signupbutton.tsx @@ -0,0 +1,41 @@ +import { Button } from "@mui/material"; +import { + Box, + Paper, + Stack, + TextField, + Direction, + Typography, +} from "@mui/material"; +import React from "react"; + + +import FemaleWorkerCheckingData from "../images/female-worker-checking-data.png"; + + +export default function SignupButton() { + return ( + + + + + + + + + <h2 style={{ textAlign: "center" }}> + <Box component="div" p={2}> + + <Button + color="primary" + sx={{ + width: "20%", + alignItems: "center" }} + variant="text" + > + sign up + </Button> + </Box> + </h2> + ); +} diff --git a/src/images/cattumaguro.png b/src/images/cattumaguro.png new file mode 100644 index 0000000..dd4b41e Binary files /dev/null and b/src/images/cattumaguro.png differ diff --git a/src/images/cattumaguro.png:Zone.Identifier b/src/images/cattumaguro.png:Zone.Identifier new file mode 100644 index 0000000..1231d52 --- /dev/null +++ b/src/images/cattumaguro.png:Zone.Identifier @@ -0,0 +1,3 @@ +[ZoneTransfer] +ZoneId=3 +HostUrl=https://cdn.discordapp.com/attachments/1104767562471964784/1109454765433311322/118_2.png diff --git a/src/pages/font.css b/src/pages/font.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/signin.tsx b/src/pages/signin.tsx new file mode 100644 index 0000000..ab187b9 --- /dev/null +++ b/src/pages/signin.tsx @@ -0,0 +1,77 @@ +import { AdditiveAnimationBlendMode, GridHelper, PlaneHelper } from "three"; +import React, { useState } from "react"; +import { + Box, + Button, + Paper, + Stack, + TextField, + Typography, +} from "@mui/material"; +import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; +import { Diversity1 } from "@mui/icons-material"; +export const Login = () => { + const [isRevealPassword, setIsRevealPassword] = useState(false); + const titleClass: string = "title"; + return ( + <Box + component="div" + sx={{ width: "100vw", height: "100vh", backgroundColor: "#FFFDE2" }} + display="flex" + > + <Paper + sx={{ + width: "50%", + margin: "auto", + marginY: "auto", + p: 3, + backgroundColor: "#FFFDcc", + }} + > + <Typography + color="primary" + sx={{ + // color: "#03A40", + textAlign: "center", + fontWeight: "bold", + }} + variant="h4" + fontWeight="" + > + SIGN IN + </Typography> + <Stack> + <Stack p={2} spacing={2} sx={{ justifyContent: "center" }}> + <TextField + sx={{ backgroundColor: "#FFFDED" }} + placeholder="必須" + required + id="outlined-required" + label="メールアドレス" + /> + <TextField + required + label=" パスワード (パスワードは半角16文字以上で入力してください。) " + type="password" + placeholder="必須" + sx={{ backgroundColor: "#FFFDED" }} + /> + </Stack> + <h2 style={{ textAlign: "center" }}> + <Box component="div" p={2}> + <Button + sx={{ + width: "20%", + }} + variant="contained" + > + 送信 + </Button> + </Box> + </h2> + </Stack> + </Paper> + </Box> + ); +}; +export default Login; diff --git a/src/pages/toppage.tsx b/src/pages/toppage.tsx new file mode 100644 index 0000000..c483115 --- /dev/null +++ b/src/pages/toppage.tsx @@ -0,0 +1,49 @@ +import { Box } from "@mui/material"; +import SigninButton from "../components/Signinbutton"; +import SignupButton from "../components/Signupbutton"; +import { Button, Paper, Stack, TextField, Typography } from "@mui/material"; +import { Style } from "@mui/icons-material"; +import Image from "next/image"; +import cattumaguro from "../images/cattumaguro.png"; +import { isTemplateSpan } from "typescript"; + +export default function Toppage() { + return ( + <div> + + <Paper + sx={{ + width: "100vw", + height: "100vh", + margin: "auto", + marginY: "auto", + p: 3, + backgroundColor: "#FFFDE2", + }} + > + <Box component="div" p={10}> + <Typography + color="primary" + sx={{ + textAlign: "center", + fontWeight: "bold", + }} + variant="h4" + fontWeight="" + > + にゃーーーーーん + </Typography> + </Box> + + <SigninButton /> + <SignupButton /> +<Image + src={cattumaguro} + alt="cattumaguro.png" + height={300} + width={300} +/> + </Paper> + </div> + ); +}