UI optimize | Register UI

This commit is contained in:
Maxel Black 2022-07-07 03:15:23 +08:00
parent a59457d8fc
commit bf9480079f
5 changed files with 147 additions and 22 deletions

View File

@ -8,14 +8,24 @@
Do you like manifest, google? Here you are '<link rel="manifest" href="%PUBLIC_URL%/fucku.json" />'
-->
<title>Charmless Yggdrasil</title>
<link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" >
<style>
@font-face {
font-family: "OPPO Sans";
src: url(https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2);
}
body {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
font-family: "OPPO Sans" !important;
}
div.rootPanel {
background-image: url("charmlessbg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
</head>
<body>
<script type="text/javascript" src="noie.js" />

View File

@ -4,6 +4,7 @@ import { createTheme } from '@mui/material/styles'
import { PageLogin } from './pages/login'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { PageNotFound } from './pages/notfound'
import { PageRegister } from './pages/register'
const API_BASE_ADDRESS = "http://127.0.0.1:30"
@ -39,6 +40,7 @@ const LSPYggdrasilWebApp = () => {
return <BrowserRouter>
<Routes>
<Route path="/" element={ <PageLogin /> } />
<Route path="/register" element={ <PageRegister /> } />
<Route path="*" element={ <PageNotFound /> } />
</Routes>
</BrowserRouter>

37
src/pages/custom.css Normal file
View File

@ -0,0 +1,37 @@
.MuiBox-root {
min-width: 100%;
min-height: 100%;
display: flex;
}
.MuiGrid-item {
min-width: 100%;
min-height: 100%;
}
.MuiButton-root {
min-width: 100% !important;
border-radius: 18px !important;
}
.MuiAlert-root,.MuiOutlinedInput-root {
border-radius: 8px !important;
}
.MuiLink-root {
text-align: center;
min-width: 100%;
}
.MuiAlert-message,.MuiInputLabel-root,.MuiButton-contained {
font-family: "OPPO Sans" !important;
}
div.title {
font-size: 1.8rem !important;
min-width: unset;
}
div.inlineBox {
background-color: #0009;
padding: 2.6em;
border-radius: 30px;
min-width: 430px;
min-height: 330px;
max-width: 500px;
}

View File

@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"
import { api, theme } from '../index'
import axios from "axios"
import { useRef, useState } from "react"
import "./custom.css"
export const PageLogin = () => {
const navigate = useNavigate()
@ -33,48 +34,41 @@ export const PageLogin = () => {
return <ThemeProvider theme={theme}>
<CssBaseline />
<div style={{
backgroundImage: 'url("charmlessbg.png")', // wtf with this error? but however it worked somehow lol.
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover'
}}> { /* The error mentioned above have been fixed by adding this 'as any' */ }
<div className="rootPanel">
<Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
<Box>
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
<Paper style={{minWidth: '430px', minHeight: '330px', borderRadius: '30px'} as any} elevation={3}>
<Paper elevation={3} className="inlineBox">
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
<Grid style={{ minWidth: '80%', minHeight: '100%', marginTop: '5%' }} item>
<Grid item className="title">
<Typography variant="h5">
</Typography>
</Grid>
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
<Grid item>
<Collapse in={illegal}>
<Alert severity="error">
</Alert>
</Collapse>
</Grid>
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
<Grid item>
<TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
</Grid>
<Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
<Grid item>
<TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
</Grid>
<Grid style={{ minWidth: '80%',minHeight: '100%' }} item>
<Button onClick={handleLogin} style={{ minWidth: '100%', minHeight: '100%' }} variant="contained" color="primary" >
<Grid item>
<Button onClick={handleLogin} variant="contained" color="primary" >
</Button>
</Grid>
<Grid style={{ marginBottom: "2%" }} item>
<Grid item>
<Link onClick={() => { navigate("/register") }} underline="always"> ? </Link>
</Grid>
</Grid>

82
src/pages/register.tsx Normal file
View File

@ -0,0 +1,82 @@
import { Box, Button, CssBaseline, Grid, Paper, TextField, ThemeProvider, Typography, Alert, Collapse } from "@mui/material"
import { useNavigate } from "react-router-dom"
import { api, theme } from '../index'
import axios from "axios"
import { useRef, useState } from "react"
import "./custom.css"
export const PageRegister = () => {
const navigate = useNavigate()
const [illegal1, setIllegal1] = useState(false)
const [illegal2, setIllegal2] = useState(false)
const [illegal3, setIllegal3] = useState(false)
//TODO
return <ThemeProvider theme={theme}>
<CssBaseline />
<div className="rootPanel">
<Box>
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
<Paper elevation={3} className="inlineBox">
<Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
<Grid item className="title">
<Typography variant="h5">
</Typography>
</Grid>
<Grid container spacing={2}>
<Grid item><Collapse in={illegal1}>
<Alert severity="error">
</Alert>
</Collapse></Grid>
<Grid item><Collapse in={illegal2}>
<Alert severity="error">
</Alert>
</Collapse></Grid>
<Grid item><Collapse in={illegal3}>
<Alert severity="error">
</Alert>
</Collapse></Grid>
</Grid>
<Grid item>
<TextField fullWidth required label="用户名" type="text" /* inputRef={usernameInput} */ onInput={() => setIllegal1(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="密码" type="password" /* inputRef={passwordInput} */ onInput={() => setIllegal1(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="邮箱" type="text" /* inputRef={emailInput} */ onInput={() => setIllegal1(false)} />
</Grid>
<Grid item>
<TextField fullWidth required label="校验码" type="text" /* inputRef={validationCodeInput} */ onInput={() => setIllegal2(false)} />
</Grid>
<Grid item>
<TextField fullWidth label="邀请码" type="text" /* inputRef={invitationCodeInput} */ onInput={() => setIllegal3(false)} />
</Grid>
<Grid item>
<Button /* onClick={handleRegister} */ variant="contained" color="primary" >
</Button>
</Grid>
</Grid>
</Paper>
</Grid>
</Box>
</div>
</ThemeProvider>
}