样式预览：(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤
![图片[1] - cloudreve修改首页以及背景图片详细教程 - 曦丽的小木屋](https://www.yxy.cc/wp-content/uploads/2022/06/aa8dfda05b8d-1024x476-1.png)
![图片[2] - cloudreve修改首页以及背景图片详细教程 - 曦丽的小木屋](https://www.yxy.cc/wp-content/uploads/2022/06/aa8dfda05b8d-1-1024x476-1.png)
![图片[3] - cloudreve修改首页以及背景图片详细教程 - 曦丽的小木屋](https://www.yxy.cc/wp-content/uploads/2022/06/3fea81bf4bee-1024x475-1.png)
1、登录界面修改
src\component\Login\LoginForm.js
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import {
Avatar,
Button,
Divider,
FormControl,
Input,
InputLabel,
Link,
makeStyles,
Paper,
Typography,
} from "@material-ui/core";
import { useHistory } from "react-router-dom";
import API from "../../middleware/Api";
import Auth from "../../middleware/Auth";
import { bufferDecode, bufferEncode } from "../../utils/index";
import { Fingerprint, VpnKey } from "@material-ui/icons";
import VpnIcon from "@material-ui/icons/VpnKeyOutlined";
import { useLocation } from "react-router";
import { ICPFooter } from "../Common/ICPFooter";
import Register from "./Register";
import { useCaptcha } from "../../hooks/useCaptcha";
import {
applyThemes,
setSessionStatus,
toggleSnackbar,
} from "../../redux/explorer";
import styled from "styled-components";
const MyStyled = styled.div`
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
body,
input {
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #fff;
min-height: calc(100vh - 64px);
overflow: hidden;
flex: 1 1 0;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.signin-signup {
position: absolute;
top: 48%;
transform: translate(-50%, -50%);
left: 75%;
width: 28%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
.sign-up-form {
opacity: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.sign-in-form {
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.title {
font-size: 2.2rem;
color: #444;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 45px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 45px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #333;
border-radius: 50%;
border: 1px solid #333;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
background-color: #fff;
}
.social-icon:hover {
color: #4481eb;
border-color: #4481eb;
cursor: pointer;
}
.btn {
width: 150px;
background-color: #5995fd;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #4d84e2;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #4481eb 0%, #04befe 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: none;
border: 2px solid #fff;
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .signin-signup {
left: 25%;
}
.container.sign-up-mode .sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode .sign-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
@media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh - 64px;
}
.signin-signup {
width: 100%;
top: 100%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.signin-signup,
.container.sign-up-mode .signin-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .signin-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
@media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}
`;
const useStyles = makeStyles((theme) => ({
paper: {
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
3
)}px !important`,
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
display: "contents",
},
link: {
marginTop: "20px",
display: "flex",
width: "100%",
justifyContent: "space-around",
},
captchaContainer: {
display: "flex",
marginTop: "10px",
[theme.breakpoints.down("sm")]: {
display: "block",
},
},
captchaPlaceholder: {
width: 200,
},
buttonContainer: {
display: "flex",
alignItems: "center",
},
authnLink: {
textAlign: "center",
marginTop: 10,
},
contentTheme: {
backgroundColor: `${theme.palette.background.default} !important`,
},
}));
function useQuery() {
return new URLSearchParams(useLocation().search);
}
function LoginForm() {
const [email, setEmail] = useState("");
const [pwd, setPwd] = useState("");
const [loading, setLoading] = useState(false);
const [useAuthn, setUseAuthn] = useState(false);
const [twoFA, setTwoFA] = useState(false);
const [faCode, setFACode] = useState("");
const [isActive, setActive] = useState(false);
const loginCaptcha = useSelector((state) => state.siteConfig.loginCaptcha);
const registerEnabled = useSelector(
(state) => state.siteConfig.registerEnabled
);
const title = useSelector((state) => state.siteConfig.title);
const QQLogin = useSelector((state) => state.siteConfig.QQLogin);
const authn = useSelector((state) => state.siteConfig.authn);
const dispatch = useDispatch();
const ToggleSnackbar = useCallback(
(vertical, horizontal, msg, color) =>
dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
[dispatch]
);
const ApplyThemes = useCallback(
(theme) => dispatch(applyThemes(theme)),
[dispatch]
);
const SetSessionStatus = useCallback(
(status) => dispatch(setSessionStatus(status)),
[dispatch]
);
const history = useHistory();
const location = useLocation();
const {
captchaLoading,
isValidate,
validate,
CaptchaRender,
captchaRefreshRef,
captchaParamsRef,
} = useCaptcha();
const query = useQuery();
const classes = useStyles();
useEffect(() => {
setEmail(query.get("username"));
}, [location]);
const afterLogin = (data) => {
Auth.authenticate(data);
// 设置用户主题色
if (data["preferred_theme"] !== "") {
ApplyThemes(data["preferred_theme"]);
}
// 设置登录状态
SetSessionStatus(true);
history.push("/home");
ToggleSnackbar("top", "right", "登录成功", "success");
sessionStorage.removeItem("Key");
localStorage.removeItem("siteConfigCache");
};
const authnLogin = (e) => {
e.preventDefault();
if (!navigator.credentials) {
ToggleSnackbar("top", "right", "当前浏览器或环境不支持", "warning");
return;
}
setLoading(true);
API.get("/user/authn/" + email)
.then((response) => {
const credentialRequestOptions = response.data;
console.log(credentialRequestOptions);
credentialRequestOptions.publicKey.challenge = bufferDecode(
credentialRequestOptions.publicKey.challenge
);
credentialRequestOptions.publicKey.allowCredentials.forEach(
function (listItem) {
listItem.id = bufferDecode(listItem.id);
}
);
return navigator.credentials.get({
publicKey: credentialRequestOptions.publicKey,
});
})
.then((assertion) => {
const authData = assertion.response.authenticatorData;
const clientDataJSON = assertion.response.clientDataJSON;
const rawId = assertion.rawId;
const sig = assertion.response.signature;
const userHandle = assertion.response.userHandle;
return API.post(
"/user/authn/finish/" + email,
JSON.stringify({
id: assertion.id,
rawId: bufferEncode(rawId),
type: assertion.type,
response: {
authenticatorData: bufferEncode(authData),
clientDataJSON: bufferEncode(clientDataJSON),
signature: bufferEncode(sig),
userHandle: bufferEncode(userHandle),
},
})
);
})
.then((response) => {
afterLogin(response.data);
})
.catch((error) => {
console.log(error);
ToggleSnackbar("top", "right", error.message, "warning");
})
.then(() => {
setLoading(false);
});
};
const login = (e) => {
e.preventDefault();
setLoading(true);
if (!isValidate.current.isValidate && loginCaptcha) {
validate(() => login(e), setLoading);
return;
}
API.post("/user/session", {
userName: email,
Password: pwd,
...captchaParamsRef.current,
})
.then((response) => {
setLoading(false);
if (response.rawData.code === 203) {
setTwoFA(true);
} else {
afterLogin(response.data);
}
})
.catch((error) => {
setLoading(false);
ToggleSnackbar("top", "right", error.message, "warning");
captchaRefreshRef.current();
});
};
const initQQLogin = () => {
setLoading(true);
API.post("/user/qq")
.then((response) => {
window.location.href = response.data;
})
.catch((error) => {
setLoading(false);
ToggleSnackbar("top", "right", error.message, "warning");
});
};
const twoFALogin = (e) => {
e.preventDefault();
setLoading(true);
API.post("/user/2fa", {
code: faCode,
})
.then((response) => {
setLoading(false);
afterLogin(response.data);
})
.catch((error) => {
setLoading(false);
ToggleSnackbar("top", "right", error.message, "warning");
});
};
const handleToggle = (event) => {
setActive(!isActive);
};
return (
<MyStyled>
<div
className={`container ${classes.contentTheme} ${
isActive ? "sign-up-mode" : ""
}`}
>
<div className="forms-container">
<div className="signin-signup">
{!twoFA && (
<>
<Paper
className={`sign-in-form ${classes.paper}`}
>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
登录 {title}
</Typography>
{!useAuthn && (
<form
className={classes.form}
onSubmit={login}
>
<div className="input-field">
<i className="fas fa-user"></i>
<input
id="email"
type="email"
name="email"
onChange={(e) =>
setEmail(e.target.value)
}
autoComplete
value={email}
autoFocus
required
placeholder="电子邮箱"
/>
</div>
<div className="input-field">
<i className="fas fa-lock"></i>
<input
type="password"
placeholder="密码"
name="password"
onChange={(e) =>
setPwd(e.target.value)
}
id="password"
value={pwd}
autoComplete
required
/>
</div>
{loginCaptcha && <CaptchaRender />}
{QQLogin && (
<div
className={
classes.buttonContainer
}
>
<input
type="submit"
variant="contained"
color="primary"
disabled={loading}
value="登 录"
className="btn solid"
/>
<div
className={`social-media ${classes.submit}`}
variant="contained"
color="secondary"
style={{
marginLeft: "10px",
}}
disabled={loading}
onClick={initQQLogin}
>
<button
className="social-icon"
onClick={
initQQLogin
}
disabled={loading}
>
<i className="fab fa-qq"></i>
</button>
</div>
</div>
)}
{!QQLogin && (
<input
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={loading}
className="btn solid"
/>
)}
</form>
)}
{useAuthn && (
<form className={classes.form}>
<FormControl
margin="normal"
required
fullWidth
>
<InputLabel htmlFor="email">
电子邮箱
</InputLabel>
<Input
id="email"
type="email"
name="email"
onChange={(e) =>
setEmail(e.target.value)
}
autoComplete
value={email}
autoFocus
/>
</FormControl>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={
loading ||
(loginCaptcha
? captchaLoading
: false)
}
onClick={authnLogin}
className={classes.submit}
>
下一步
</Button>
</form>
)}
<Divider />
<div className={classes.link}>
<div>
<Link
href={"/forget"}
color="primary"
>
忘记密码
</Link>
</div>
<div>
{registerEnabled && (
<Link
onClick={handleToggle}
color="primary"
style={{
cursor: "pointer",
}}
>
注册账号
</Link>
)}
</div>
</div>
<ICPFooter />
<div
style={{
textAlign: "center",
marginTop: "20px",
}}
>
©2022 By
<a
href="https://cloud.anzhiy.cn/"
style={{
cursor: "pointer",
color: "#1c6bbb",
textDecoration: "none",
}}
one-link-mark="yes"
>
安知鱼云盘
</a>
||
<a
href="https://www.cloud.anzhiy.cn/"
target="_blank"
rel="noreferrer"
style={{
cursor: "pointer",
color: "#1c6bbb",
textDecoration: "none",
}}
one-link-mark="yes"
>
云盘官网
</a>
||
<a
href="https://forum.anzhiy.cn/"
style={{
cursor: "pointer",
color: "#1c6bbb",
textDecoration: "none",
}}
target="_blank"
rel="noreferrer"
one-link-mark="yes"
>
交流社区
</a>
||
<a
href="https://anzhiy.cn/"
style={{
cursor: "pointer",
color: "#1c6bbb",
textDecoration: "none",
}}
target="_blank"
rel="noreferrer"
one-link-mark="yes"
>
资源投稿
</a>
<div
style={{
color: "#ffffff",
backgroundColor: "#49b1f5",
padding: "5px",
border: "1px solid #49b1f5",
borderRadius: "10px",
fontSize: "12px",
clear: "both",
maxWidth: "400px",
textAlign: "center",
lineHeight: "initial",
margin: "auto",
}}
>
谨防刷单兼职,网贷,金融,裸聊敲诈,赌博等诈骗,请立即举报
</div>
</div>
</Paper>
<div className="sign-up-form">
<Register handleToggle={handleToggle} />
</div>
{authn && (
<div className={classes.authnLink}>
<Button
color="primary"
onClick={() =>
setUseAuthn(!useAuthn)
}
>
{!useAuthn && (
<>
<Fingerprint
style={{
marginRight: 8,
}}
/>
使用外部验证器登录
</>
)}
{useAuthn && (
<>
<VpnKey
style={{
marginRight: 8,
}}
/>
使用密码登录
</>
)}
</Button>
</div>
)}
</>
)}
{twoFA && (
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<VpnIcon />
</Avatar>
<Typography component="h1" variant="h5">
二步验证
</Typography>
<form
className={classes.form}
onSubmit={twoFALogin}
>
<FormControl
margin="normal"
required
fullWidth
>
<InputLabel htmlFor="code">
请输入六位二步验证代码
</InputLabel>
<Input
id="code"
type="number"
name="code"
onChange={(event) =>
setFACode(event.target.value)
}
autoComplete
value={faCode}
autoFocus
/>
</FormControl>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
disabled={loading}
className={classes.submit}
>
继续登录
</Button>{" "}
</form>{" "}
<Divider />
</Paper>
)}
</div>
</div>
<div className="panels-container">
<div className="panel left-panel">
<div className="content">
<h3>新用户?</h3>
<p>
好兄弟,你来了,我们的网站就差你的加入了,点击下方注册按钮加入我们吧!!
</p>
<button
className="btn transparent"
id="sign-up-btn"
onClick={handleToggle}
>
注册
</button>
</div>
<img
src={"/static/img/log.svg"}
className="image"
/>
</div>
<div className="panel right-panel">
<div className="content">
<h3>已经是我们自己人了吗?</h3>
<p>
那好兄弟,你直接点击登录按钮,登录到我们这优秀的系统里!!
</p>
<button
className="btn transparent"
id="sign-in-btn"
onClick={handleToggle}
>
登 录
</button>
</div>
<img
src={"/static/img/register.svg"}
className="image"
/>
</div>
</div>
</div>
</MyStyled>
);
}
export default LoginForm;
2、注册界面修改
src\component\Login\Register.js
import React, { useCallback, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import RegIcon from "@material-ui/icons/AssignmentIndOutlined";
import {
Avatar,
Button,
Divider,
FormControl,
Input,
InputLabel,
Link,
makeStyles,
Paper,
Typography,
} from "@material-ui/core";
import { useHistory } from "react-router-dom";
import API from "../../middleware/Api";
// import { customInstance } from "../../middleware/Api";
import EmailIcon from "@material-ui/icons/EmailOutlined";
import { useCaptcha } from "../../hooks/useCaptcha";
import { toggleSnackbar } from "../../redux/explorer";
import styled from "styled-components";
const useStyles = makeStyles((theme) => ({
layout: {
width: "auto",
// marginTop: "110px",
marginLeft: theme.spacing(3),
marginRight: theme.spacing(3),
[theme.breakpoints.up("sm")]: {
width: 400,
marginLeft: "auto",
marginRight: "auto",
},
// marginBottom: 110,
},
paper: {
// marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(
3
)}px`,
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%", // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
marginTop: theme.spacing(3),
},
link: {
marginTop: "20px",
display: "flex",
width: "100%",
justifyContent: "space-between",
},
captchaContainer: {
display: "flex",
marginTop: "10px",
[theme.breakpoints.down("sm")]: {
display: "block",
},
},
captchaPlaceholder: {
width: 200,
},
buttonContainer: {
display: "flex",
},
authnLink: {
textAlign: "center",
marginTop: 16,
},
avatarSuccess: {
margin: theme.spacing(1),
backgroundColor: theme.palette.primary.main,
},
}));
const MyStyled = styled.div`
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
body,
input {
font-family: "Poppins", sans-serif;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #f0f0f0;
margin: 10px 0;
height: 45px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 45px;
color: #acacac;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
.input-field input::placeholder {
color: #aaa;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #333;
border-radius: 50%;
border: 1px solid #333;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
background-color: #fff;
}
.social-icon:hover {
color: #4481eb;
border-color: #4481eb;
cursor: pointer;
}
.rgbtn {
width: 100%;
background-color: #5995fd;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
&:hover {
background-color: #4d84e2;
}
}
`;
function Register(props) {
const [input, setInput] = useState({
email: "",
password: "",
password_repeat: "",
});
const [loading, setLoading] = useState(false);
const [emailActive, setEmailActive] = useState(false);
const title = useSelector((state) => state.siteConfig.title);
const regCaptcha = useSelector((state) => state.siteConfig.regCaptcha);
const dispatch = useDispatch();
const ToggleSnackbar = useCallback(
(vertical, horizontal, msg, color) =>
dispatch(toggleSnackbar(vertical, horizontal, msg, color)),
[dispatch]
);
const history = useHistory();
const handleInputChange = (name) => (e) => {
setInput({
...input,
[name]: e.target.value,
});
};
const {
captchaLoading,
isValidate,
validate,
CaptchaRender,
captchaRefreshRef,
captchaParamsRef,
} = useCaptcha();
const classes = useStyles();
const handleToggle = () => props.handleToggle();
const register = (e) => {
e.preventDefault();
if (input.password !== input.password_repeat) {
ToggleSnackbar("top", "right", "两次密码输入不一致", "warning");
return;
}
setLoading(true);
if (!isValidate.current.isValidate && regCaptcha) {
validate(() => register(e), setLoading);
return;
}
API.post("/user", {
userName: input.email,
Password: input.password,
...captchaParamsRef.current,
})
.then((response) => {
setLoading(false);
if (response.rawData.code === 203) {
setEmailActive(true);
} else {
const Key = sessionStorage.getItem("Key");
// customInstance
// .post("/withdraw/setSubordinate", {
// Key: Key,
// email: input.email,
// })
// .then((response) => {
// sessionStorage.removeItem("Key");
// })
// .catch((error) => {
// ToggleSnackbar(
// "top",
// "right",
// error.message,
// "error"
// );
// });
history.push("/login?username=" + input.email);
props.handleToggle();
ToggleSnackbar("top", "right", "注册成功", "success");
}
})
.catch((error) => {
setLoading(false);
ToggleSnackbar("top", "right", error.message, "warning");
captchaRefreshRef.current();
});
};
return (
<MyStyled className={classes.layout}>
<>
{!emailActive && (
<Paper className={classes.paper}>
<Avatar className={classes.avatar}>
<RegIcon />
</Avatar>
<Typography component="h1" variant="h5">
注册 {title}
</Typography>
<form className={classes.form} onSubmit={register}>
<div className="input-field">
<i className="fas fa-user"></i>
<input
id="register_email"
type="email"
name="email"
onChange={handleInputChange("email")}
autoComplete
value={input.email}
autoFocus
placeholder="电子邮箱"
required
/>
</div>
<div className="input-field">
<i className="fas fa-lock"></i>
<input
placeholder="密码"
name="password"
onChange={handleInputChange("password")}
type="password"
id="register_password"
value={input.password}
autoComplete
required
/>
</div>
<div className="input-field">
<i className="fas fa-lock"></i>
<input
placeholder="确认密码"
name="pwdRepeat"
onChange={handleInputChange(
"password_repeat"
)}
type="password"
id="pwdRepeat"
value={input.password_repeat}
autoComplete
required
/>
</div>
{/* <FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="register_email">
电子邮箱
</InputLabel>
<Input
id="register_email"
type="email"
name="email"
onChange={handleInputChange("email")}
autoComplete
value={input.email}
autoFocus
/>
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="register_password">
密码
</InputLabel>
<Input
name="password"
onChange={handleInputChange("password")}
type="password"
id="register_password"
value={input.password}
autoComplete
/>
</FormControl>
<FormControl margin="normal" required fullWidth>
<InputLabel htmlFor="password">
确认密码
</InputLabel>
<Input
name="pwdRepeat"
onChange={handleInputChange(
"password_repeat"
)}
type="password"
id="pwdRepeat"
value={input.password_repeat}
autoComplete
/>
</FormControl> */}
{regCaptcha && <CaptchaRender />}
<input
type="submit"
variant="contained"
color="primary"
disabled={
loading ||
(regCaptcha ? captchaLoading : false)
}
value="注册账号"
className={`rgbtn solid`}
/>
</form>
<Divider />
<div className={classes.link}>
<div>
<Link
onClick={handleToggle}
style={{ cursor: "pointer" }}
>
返回登录
</Link>
</div>
<div>
<Link
target="_blank"
href={"https://forum.anzhiy.cn/d/29"}
>
注册协议
</Link>
</div>
</div>
</Paper>
)}
{emailActive && (
<Paper className={classes.paper}>
<Avatar className={classes.avatarSuccess}>
<EmailIcon />
</Avatar>
<Typography component="h1" variant="h5">
邮件激活
</Typography>
<Typography style={{ marginTop: "10px" }}>
一封激活邮件已经发送至您的邮箱，请访问邮件中的链接以继续完成注册。
</Typography>
</Paper>
)}
</>
</MyStyled>
);
}
export default Register;
3、在 public\index.html 中添加以下代码
<!-- fontawesome图标 -->
<link
rel="stylesheet"
href="https://npm.elemecdn.com/@fortawesome/fontawesome-free@6/css/all.min.css"
/>
<script
src="https://kit.fontawesome.com/64d58efce2.js"
crossorigin="anonymous"
></script>
4、在 public\static\imgs 中放入以下两个文件（svg图片）
logo.svg
<svg id="b759170a-51c3-4e2f-999d-77dec9fd6d11" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1140.56" height="787.27" viewBox="0 0 1140.56 787.27"><defs><linearGradient id="c518dc33-18b9-48bc-b516-0f83ad79191e" x1="852.39" y1="835.88" x2="852.39" y2="338.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>maker launch</title><path d="M38.48,470.82c20.16-32.93,65.75-27.19,98.08-10s64.59,42.85,100.17,37.92c30-4.16,54.6-30.32,67.89-60.5s17.19-64.21,20.93-97.54Q332.6,277.89,339.64,215c1.72-15.33,3.75-31.51,12.37-43.64,11.39-16,32.27-20.92,50.13-16.11s33.09,17.71,46.12,32.1C490,233.43,513.65,295.72,550.14,347c7.43,10.44,15.82,20.76,26.92,25.8,16,7.25,34.37,2.12,50-5.95,51-26.29,85.26-79.94,118.93-130,16.38-24.33,36.35-50.35,63.6-53C838.26,181,863.15,205.43,880,231.3c54.08,83.24,65.67,196.88,131,269.48,8.11,9,17.06,17.32,27.37,22.91a70.65,70.65,0,0,0,10.6,4.65c57,19.73,76,98.93,33.84,145.89-.91,1-1.84,2-2.78,3-6.26,6.61-13.35,12.86-21.81,14.83-7.87,1.82-16-.28-23.8-2.55-49.86-14.55-99.12-36.79-150.67-35.71-50.16,1-97.74,24.17-147.34,32.51-33.35,5.61-67.28,4.49-101,3.28q-168.46-6.06-336.85-14.1c-55.72-2.56-111.46-5-167.17-7.85-42.92-2.23-70.26-7.14-75.24-56.95C51.79,567.07,12.63,513.06,38.48,470.82Z" transform="translate(-29.72 -56.36)" fill="#2271ff" opacity="0.1"/><ellipse cx="789.9" cy="749.54" rx="269.99" ry="37.73" fill="#30374e"/><path d="M178.46,643.13s13.2-3,21.85,5.87c0,0-5.56,5-18.64-.54Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M177,643s-7.82,11.08-2.86,22.45c0,0,6.76-3.25,6.57-17.45Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M168.2,626.3s4.69-10.15,27,2.12c0,0-2.4,6.78-11.88,6.88S171,631.29,168.2,626.3Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M166.78,625.68s-11.17-.52-10.54,24.92c0,0,7.13,1,11.58-7.38S169.91,630.51,166.78,625.68Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M159,605.88S164,588.2,187.47,599c0,0-4.1,16.19-25.8,12.64Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M150.29,580.54s10.58-18.24,32.49-3.44c0,0-6.19,16.87-30.29,9.55Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M146.15,556.14s12.63-16.95,34.36-2.31c0,0-12.06,14.94-34.09,6.4Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M142.41,532.42s12.76-17.66,33.59-3.15c0,0-14.68,15.83-33.33,7.07Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M142.23,511.16s13.15-22.53,32.65-9.17c0,0-14.42,19.57-32.37,13.26Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M144,486.18S158,463.78,177.09,479c0,0-17.1,19.75-32.87,11.15Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M147.63,463.72s17-21.31,33.55-14.37c0,0-17.68,22.6-34,19.76Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M152.63,442.32s19.54-26,32.37-18.62c0,0-14.31,20.09-33.58,23.35Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M160.25,417.38s17.17-21.32,31-17.24c0,0-14.45,21.89-33.1,23.68Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M167.1,394.07s19.18-20.6,28.31-17.82c0,0-13.35,22.36-28.92,22.15Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M173.87,372.51s16.09-24.15,25.82-23c0,0-9.31,21.19-25.66,25.33Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M180.86,343.6s14.39-18.66,22.81-19.18c0,0-10.71,24.34-23.07,25Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M184.86,324.39l12.58-37.69s3,33.1-14,44.62Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M188.25,283.53s.44-30.79-1.33-33.17c0,0,12.47,24.74,2.14,46.71Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M158.36,605.51s-16.26-8.62-24.77,15.73c0,0,14.5,8.28,27-9.81Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M149.72,579.59s-19.72-7.45-27.35,17.88c0,0,15.47,9.15,29.51-11.76Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M145.36,557.67S130.57,542.56,111,560c0,0,13.94,13.19,34.63,1.79Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M141.94,532.46s-15-15.81-33.71,1.36c0,0,16.66,13.73,34,2.55Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M142.27,511.76s-11.36-23.47-31.83-11.67c0,0,12.86,20.63,31.24,15.74Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M145.17,486s-11.33-23.9-32.06-11.07c0,0,14.66,21.61,31.34,14.93Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M149.7,463.7s-5.64-26.65-23.55-27.87c0,0,5.68,28.13,21.51,32.88Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M153.09,442.34s-3.67-32.31-18.46-32.46c0,0,2.15,24.57,17.11,37.15Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M161.72,416.35s-6.21-26.66-20.47-29c0,0,3.5,26,19.53,35.72Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M168.78,394.15s-2-28.07-10.9-31.62c0,0-3.61,25.78,8.65,35.38Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M174.51,372.16s-3.15-28.85-12.31-32.32c0,0-1.5,23.09,11.1,34.3Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M182.26,345.82s-1.64-23.51-8.35-28.61c0,0-4.58,26.19,5.35,33.56Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M184,323.28l-8.8-38.74s-6.23,32.64,9.57,45.78Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M182.63,284.28S165,259,165.14,256.06c0,0,3.54,27.48,24.41,39.89Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M184,276.39s-17.46-36.39-24.43-39c0,0,22.09,9.43,25.61,37.8Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M180.54,349.61l-1-.25c9.85-42,11.24-68.48,3.9-74.56l.68-.82C191.86,280.42,190.64,306.58,180.54,349.61Z" transform="translate(-29.72 -56.36)" fill="#444053"/><path d="M152.26,448.27l-1.55-.43c1.09-3.86,2.27-7.79,3.53-11.66,11-33.72,20.14-65,25.75-88.94l1.27-.75c-5.62,24-14.51,56.43-25.49,90.18C154.52,440.53,153.34,444.43,152.26,448.27Z" transform="translate(-29.72 -56.36)" fill="#444053"/><path d="M199.31,672.67c-.22-.21-22.22-21.87-39.12-60.24a232.37,232.37,0,0,1-18.61-70.77c-3-30.53,1.1-65.13,10-96.9l1.28,1.32c-20,71.31-6.19,130.34,9.23,165.4,16.73,38,38.48,59.45,38.7,59.66Z" transform="translate(-29.72 -56.36)" fill="#444053"/><path d="M223.53,558.46s8-1.83,13.22,3.55c0,0-3.37,3-11.27-.33Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M222.66,558.39s-4.72,6.7-1.72,13.57c0,0,4.08-2,4-10.55Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M217.34,548.28s2.83-6.13,16.3,1.29c0,0-1.45,4.09-7.18,4.15S219.05,551.3,217.34,548.28Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M216.48,547.91s-6.76-.31-6.38,15.06c0,0,4.31.6,7-4.46S218.37,550.83,216.48,547.91Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M211.75,535.94s3.07-10.69,17.23-4.18c0,0-2.47,9.79-15.59,7.64Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M206.51,520.62s6.39-11,19.64-2.08c0,0-3.75,10.2-18.31,5.77Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M204,505.87s7.64-10.25,20.77-1.4c0,0-7.28,9-20.6,3.87Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M201.74,491.53s7.72-10.68,20.31-1.9c0,0-8.87,9.57-20.15,4.27Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M201.64,478.67s8-13.61,19.73-5.54c0,0-8.72,11.83-19.57,8Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M202.68,463.58s8.49-13.55,20-4.38c0,0-10.34,11.94-19.88,6.74Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M204.9,450s10.27-12.88,20.28-8.68c0,0-10.69,13.66-20.53,11.94Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M207.92,437.06s11.81-15.71,19.57-11.26c0,0-8.65,12.15-20.3,14.12Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M212.53,422s10.38-12.89,18.76-10.42c0,0-8.73,13.23-20,14.31Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M216.67,407.89s11.59-12.45,17.11-10.77c0,0-8.06,13.51-17.48,13.39Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M220.76,394.86s9.73-14.6,15.61-13.92c0,0-5.62,12.81-15.51,15.32Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M225,377.38s8.7-11.28,13.79-11.6c0,0-6.48,14.72-13.95,15.09Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M227.41,365.76,235,343s1.8,20-8.49,27Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M229.46,341.06s.26-18.61-.81-20.05c0,0,7.54,14.95,1.29,28.24Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M211.38,535.72s-9.82-5.22-15,9.5c0,0,8.77,5,16.33-5.92Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M206.17,520s-11.93-4.5-16.54,10.81c0,0,9.35,5.53,17.84-7.1Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M203.52,506.79s-8.93-9.13-20.77,1.4c0,0,8.43,8,20.94,1.08Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M201.46,491.55s-9.07-9.55-20.38.83c0,0,10.07,8.29,20.54,1.54Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M201.66,479s-6.87-14.19-19.25-7.06c0,0,7.78,12.47,18.89,9.52Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M203.41,463.45S196.56,449,184,456.76c0,0,8.86,13.07,18.95,9Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M206.15,450s-3.41-16.12-14.24-16.85c0,0,3.43,17,13,19.87Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M208.2,437.07S206,417.54,197,417.44c0,0,1.3,14.86,10.34,22.47Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M213.41,421.36s-3.75-16.12-12.37-17.54c0,0,2.12,15.71,11.81,21.59Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M217.68,407.94s-1.23-17-6.58-19.12c0,0-2.19,15.59,5.22,21.39Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M221.15,394.64s-1.9-17.44-7.44-19.54c0,0-.91,14,6.71,20.74Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M225.83,378.72s-1-14.21-5-17.3c0,0-2.77,15.84,3.23,20.29Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M226.91,365.09l-5.32-23.42s-3.77,19.74,5.78,27.68Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M226.06,341.52s-10.65-15.27-10.57-17.06c0,0,2.13,16.61,14.75,24.11Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M226.86,336.74s-10.56-22-14.77-23.55c0,0,13.36,5.7,15.48,22.86Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M224.79,381l-.63-.15c6-25.39,6.8-41.4,2.36-45.07l.41-.5C231.64,339.18,230.9,355,224.79,381Z" transform="translate(-29.72 -56.36)" fill="#444053"/><path d="M207.7,440.66l-.94-.27c.66-2.33,1.38-4.7,2.14-7,6.63-20.39,12.17-39.3,15.56-53.77l.77-.46c-3.4,14.5-8.77,34.12-15.41,54.53C209.06,436,208.35,438.33,207.7,440.66Z" transform="translate(-29.72 -56.36)" fill="#444053"/><path d="M236.14,576.32c-.13-.13-13.43-13.22-23.65-36.42a140.72,140.72,0,0,1-11.25-42.78c-1.83-18.46.67-39.38,6.06-58.59l.77.8c-12.09,43.11-3.74,78.8,5.58,100,10.12,23,23.26,35.93,23.4,36.06Z" transform="translate(-29.72 -56.36)" fill="#444053"/><path d="M266.22,626.32a38.24,38.24,0,0,0-7.5,2.14C204.78,650,205.68,791,205.68,791H189.8s-5-60.51-26.79-146.84c-19.63-77.67,60.88-147.28,77.23-160.48,1.84-1.47,2.86-2.25,2.86-2.25C324.19,511.23,266.22,626.32,266.22,626.32Z" transform="translate(-29.72 -56.36)" fill="#afc0e0"/><path d="M249,483.88c-1.87-.86-3.8-1.68-5.85-2.43,0,0-1,.78-2.86,2.25-16.35,13.2-96.86,82.81-77.23,160.48C184.85,730.51,189.8,791,189.8,791h8.93s-4.95-60.51-26.79-146.84C152.39,566.85,232.12,497.5,249,483.88Z" transform="translate(-29.72 -56.36)" fill="#fff" opacity="0.2"/><path d="M533.76,644.18C511.92,730.51,507,791,507,791H491.09s1-147.36-56.73-163.81a31.53,31.53,0,0,0-3.81-.89s-58-115.09,23.12-144.87c0,0,.82.61,2.3,1.8C471,495.26,553.61,565.61,533.76,644.18Z" transform="translate(-29.72 -56.36)" fill="#afc0e0"/><path d="M266.22,626.32a38.24,38.24,0,0,0-7.5,2.14A979.21,979.21,0,0,1,240.24,483.7c1.84-1.47,2.86-2.25,2.86-2.25C324.19,511.23,266.22,626.32,266.22,626.32Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M456,483.25a901,901,0,0,1-21.61,144,31.53,31.53,0,0,0-3.81-.89s-58-115.09,23.12-144.87C453.67,481.45,454.49,482.06,456,483.25Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M426.31,648.14q-8.4,33.14-19.69,68s-35.72,37.21-122,0c0,0-8.62-24.3-18.1-65.61-20.87-90.83-45.9-263.92,7.43-441.71A661.75,661.75,0,0,1,341.13,56.36s45.56,52.31,79,152.43S474.85,456.86,426.31,648.14Z" transform="translate(-29.72 -56.36)" fill="#e3e8f4"/><circle cx="318.66" cy="293.6" r="71.63" fill="#afc0e0"/><path d="M399.18,350a50.8,50.8,0,0,1-83,39.29,51.33,51.33,0,0,1-9.52-10.33,50,50,0,0,1-3.28-5.39A50.7,50.7,0,0,1,297.59,350c0-.41,0-.81,0-1.21a50.86,50.86,0,0,1,37-47.72,52.53,52.53,0,0,1,12.24-1.86h1.52A50.8,50.8,0,0,1,399.18,350Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M420.12,208.79c-81.27,38.91-146.22,0-146.22,0A661.75,661.75,0,0,1,341.13,56.36S386.69,108.67,420.12,208.79Z" transform="translate(-29.72 -56.36)" fill="#afc0e0"/><path d="M426.31,648.14q-5.7,22.44-12.7,45.65-3.32,11.07-7,22.32s-35.72,37.21-122,0c0,0-2.8-7.89-7-22.32-3.14-10.9-7.05-25.51-11.13-43.29,0,0,32.12,13.71,77.71,13.71A214.11,214.11,0,0,0,426.31,648.14Z" transform="translate(-29.72 -56.36)" fill="#afc0e0"/><path d="M413.61,693.79q-3.32,11.07-7,22.32s-35.72,37.21-122,0c0,0-2.8-7.89-7-22.32C277.6,693.79,365.54,719.09,413.61,693.79Z" transform="translate(-29.72 -56.36)" fill="#e3e8f4"/><path d="M334.62,301l-.11.08-36.9,47.64c0,.4,0,.8,0,1.21a50.7,50.7,0,0,0,5.79,23.57l43.48-74.36Z" transform="translate(-29.72 -56.36)" fill="#fff" opacity="0.2"/><path d="M346.4,344l-30.22,45.25a51.33,51.33,0,0,1-9.52-10.33l36-38.64Z" transform="translate(-29.72 -56.36)" fill="#fff" opacity="0.2"/><path d="M303.92,716.12s-8.62-24.31-18.1-65.61c-20.87-90.84-45.9-263.93,7.43-441.72A664.18,664.18,0,0,1,352.1,70.7c-6.77-9.49-11-14.33-11-14.33A661.68,661.68,0,0,0,273.9,208.79c-53.33,177.79-28.3,350.88-7.43,441.72,9.48,41.3,18.1,65.61,18.1,65.61,34.09,14.69,60.28,17.77,79.5,16.13C347.65,731,327.71,726.37,303.92,716.12Z" transform="translate(-29.72 -56.36)" fill="#fff" opacity="0.2"/><path d="M966.7,785.29s46.74-58.16,43.64-116.41a113.05,113.05,0,0,1,18.54-69.06,190.19,190.19,0,0,1,22-27" transform="translate(-29.72 -56.36)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M1049.11,536.14c-3.34,8.11,1.66,37.68,1.66,37.68s24.37-17.48,27.71-25.59a15.88,15.88,0,0,0-29.37-12.09Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1006.33,571.08c1.61,8.62,21.88,30.72,21.88,30.72s11-27.91,9.35-36.54a15.88,15.88,0,0,0-31.23,5.82Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M975.79,648.3c5.74,6.63,34.4,15.48,34.4,15.48s-4.64-29.63-10.38-36.27a15.88,15.88,0,0,0-24,20.79Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M965.84,711.93c4.53,7.51,31.28,21.07,31.28,21.07s.44-30-4.09-37.5a15.88,15.88,0,1,0-27.19,16.43Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1058.4,616.07c-8.14,3.25-37.66-2.05-37.66-2.05s17.72-24.19,25.87-27.45a15.88,15.88,0,0,1,11.79,29.5Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1045.82,690.34c-8.74.67-35.32-13.22-35.32-13.22s24.14-17.79,32.89-18.46a15.89,15.89,0,0,1,2.43,31.68Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1023.69,760.84c-8.51,2.14-37.05-7.06-37.05-7.06s20.79-21.61,29.3-23.74a15.88,15.88,0,1,1,7.75,30.8Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1049.11,536.14c-3.34,8.11,1.66,37.68,1.66,37.68s24.37-17.48,27.71-25.59a15.88,15.88,0,0,0-29.37-12.09Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M1006.33,571.08c1.61,8.62,21.88,30.72,21.88,30.72s11-27.91,9.35-36.54a15.88,15.88,0,0,0-31.23,5.82Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M975.79,648.3c5.74,6.63,34.4,15.48,34.4,15.48s-4.64-29.63-10.38-36.27a15.88,15.88,0,0,0-24,20.79Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M965.84,711.93c4.53,7.51,31.28,21.07,31.28,21.07s.44-30-4.09-37.5a15.88,15.88,0,1,0-27.19,16.43Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M1058.4,616.07c-8.14,3.25-37.66-2.05-37.66-2.05s17.72-24.19,25.87-27.45a15.88,15.88,0,0,1,11.79,29.5Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M1045.82,690.34c-8.74.67-35.32-13.22-35.32-13.22s24.14-17.79,32.89-18.46a15.89,15.89,0,0,1,2.43,31.68Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M1023.69,760.84c-8.51,2.14-37.05-7.06-37.05-7.06s20.79-21.61,29.3-23.74a15.88,15.88,0,1,1,7.75,30.8Z" transform="translate(-29.72 -56.36)" opacity="0.25"/><path d="M967.12,782.86s66.3-34.24,87.07-88.74a113,113,0,0,1,44.94-55.63,189.91,189.91,0,0,1,31-15.76" transform="translate(-29.72 -56.36)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/><path d="M1143.42,588.46c-6.34,6.07-13.75,35.13-13.75,35.13s29.36-6.11,35.7-12.17a15.88,15.88,0,0,0-21.95-23Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1090.16,603.07c-2,8.54,7.55,37,7.55,37S1119,619,1121.06,610.41a15.88,15.88,0,0,0-30.9-7.34Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1030.94,661.29c2.56,8.39,25.18,28.09,25.18,28.09s7.77-29,5.21-37.35a15.88,15.88,0,0,0-30.39,9.26Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M996.06,715.43c1.1,8.71,20.06,31.94,20.06,31.94s12.56-27.23,11.45-35.94a15.88,15.88,0,0,0-31.51,4Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1119.53,665.3c-8.77-.32-33.6-17.13-33.6-17.13s26-14.93,34.77-14.61a15.88,15.88,0,1,1-1.17,31.74Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1077.93,728.1c-8.27-2.93-26.94-26.4-26.94-26.4s29.29-6.47,37.55-3.54a15.88,15.88,0,1,1-10.61,29.94Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1029.12,783.59c-8.64-1.49-31-21.47-31-21.47s27.77-11.32,36.41-9.83a15.88,15.88,0,1,1-5.4,31.3Z" transform="translate(-29.72 -56.36)" fill="#2271ff"/><path d="M1061.39,750.72,1010,676.19s-1-18.45-4.32-22.76-.72-13.9-.72-13.9,3.6-5.27.48-5.75-.48-12.23-.48-12.23l-.24-18.69s2.88-18,.48-22.28a7.07,7.07,0,0,1,.24-7.67s2.88-10.31,0-12.94-2.16-18.7-1.44-31.4-5.05-19.89-5.05-21.81-19-20.61-19-22.28-12-8.63-19.21-10.55-10.81-3.35-10.57-4.31-11.29-4.79-11.29-4.79-10.09-.72-13.94-5.76-15.59-6.48-15.93-6.53c-.07-.33-.15-.67-.22-1s-.15-.72-.22-1.08c.91-1.53,1.75-3.09,2.51-4.7.23-.49.45-1,.66-1.46,4.21-.19,8.53-1.09,11.83-3.67a16.11,16.11,0,0,0,5.75-11.49,25.19,25.19,0,0,0-2.81-12.77c-2.1-4.32-5.19-8.79-4.13-13.47.47-2,1.68-3.8,2.3-5.78,1.17-3.75.09-7.87-1.73-11.35s-4.35-6.54-6.37-9.91a38.7,38.7,0,0,1-5.07-14c-.41-2.6-.57-5.34-1.88-7.63a14.21,14.21,0,0,0-4.21-4.25,42.07,42.07,0,0,0-25.82-7.83c-6.54.23-13.06,2-19.55,1.19-3.91-.48-7.64-1.87-11.42-3-8.06-2.38-17.35-3.36-24.37,1.25s-9.81,13.68-14.56,20.77c-4.2,6.28-10.36,11.54-13.56,18.18,0-.12.06-.25.1-.38a21.75,21.75,0,0,0-1.79,4.84c-1.22,5.22-.2,10.68,1.07,15.89.65,2.69,1.55,5.61,3.88,7.1s5.63,1.16,8.39,1.65c-.1.45-.22.91-.32,1.37a54.9,54.9,0,0,0,38.09,64c0,.49,0,1,0,1.46a36.33,36.33,0,0,1-.25,4.12h0s-24.15-5-30.64-1.6-19.22,6-21.14,7.9-6.72.48-11,11.75-4.8,22.76-10.33,28-8.4,8.87-8.64,12.71.72,4.79-1.45,6-5.28,6.23-4.32,8.15c0,0,1.2,4.79-2.64,7.18s-3.37,7.19-3.37,7.19-1.44,5.28-4.8,6.47-5.53,9.11-5.53,9.11L730.52,596,708.93,572.1a9.1,9.1,0,0,0-12.85-.66L685.48,581a20.94,20.94,0,0,0-10.61,6.32,27.35,27.35,0,0,0-5.49,8.18l-5.81,5.22A14.75,14.75,0,0,0,662.08,617l13.83,15.29.09.13c-5.23.66-9.85,2.34-13.38,5.45-20.65,18.21-20.9,35-17.77,42.65s29.3,37.15,29.3,37.15,15.21,19.77,37.17,30.29l0,0-.17.17c-.43.46-.86,1-1.28,1.5l-.36.46-.33.46-.39.58c-.11.15-.21.31-.31.47s-.28.45-.41.69l-.27.46c-.16.3-.33.61-.49.93l-.16.31c-.2.42-.4.85-.59,1.3-.07.16-.13.33-.2.49-.12.31-.25.63-.37,1s-.15.41-.22.62-.21.62-.31.94-.14.45-.2.67-.2.7-.29,1.06-.11.42-.17.65c-.13.55-.26,1.12-.37,1.72,0,.22-.08.45-.12.68q-.12.6-.21,1.23c-.05.29-.08.58-.12.87s-.1.79-.15,1.19l-.09.92c0,.44-.08.9-.11,1.36,0,.28,0,.56-.05.84,0,.76-.08,1.52-.09,2.32-.48,28,1.16,32.11,1.16,32.11s3.39,8.93,12.75,9.57a16.3,16.3,0,0,0,4.11-.22c12.49-2.16,41.79-7.19,52.12-5.27,6.21,1.15,17.71-.55,25.9-2.1l2.15-.41,1.5,4.76,4.75-1.3,4,2.33,2.55,1.46c4.74,16.08,24,10.6,24,10.6L843,826l46.36,1.2s10,6,16.41,7.88a15.24,15.24,0,0,0,2.33.51,105.21,105.21,0,0,0,12.92.24c3.55-.09,6.3-.24,6.3-.24s-.47-12.59-1.15-26.68c17.72-.74,33.43-1.85,42.94-3.52,24.76-4.35,35.09-26.86,38.89-38.89a113.19,113.19,0,0,1,2.43,14.93,106.74,106.74,0,0,0,3.85,12.94,43.73,43.73,0,0,0,5.28,9.58c18.26-6.23,7.21-15.57,3.36-19.65s2.65-7.43,2.65-7.43,5-3.35,4.56-6.47-.72-6.47,15.61-6.23S1061.39,750.72,1061.39,750.72Zm-253.66-153c.21,1.37,2.49,16.14,4.55,20,.43.82.6,3.73.54,7.89-9.68-.77-19.76-1.18-19.76-1.18a2.32,2.32,0,0,1,.52,1.23l-1.52-.34-2.21-.54,17.83-27.12Zm-35.32,56.2,16.75,2.66,1.41.22a55.11,55.11,0,0,0-.87,7.91c0,.25.38.55.92.9a21.57,21.57,0,0,0-.33,4c.27,1.33,8.1,4.19,17.08,6.57-.12.48-.24.94-.36,1.37h0c-7.93-4.17-20.43-6.12-21.87-9.22s-44-18-44-18-1.55-.82-4.23-2.12l11.2,2.12,3.08-.31A167.91,167.91,0,0,0,772.41,653.9Z" transform="translate(-29.72 -56.36)" fill="url(#c518dc33-18b9-48bc-b516-0f83ad79191e)"/><path d="M1006.71,761.15s-6.66,40.23-40.47,46.18-146.66,4.76-146.66,4.76-64.52-9.28-87.85-63.8S693.4,672.1,713.4,671.15s127.85,36.43,134,36.9S1012.66,625.2,1006.71,761.15Z" transform="translate(-29.72 -56.36)" fill="#434175"/><path d="M1006.71,761.15s-6.66,40.23-40.47,46.18-146.66,4.76-146.66,4.76-64.52-9.28-87.85-63.8S693.4,672.1,713.4,671.15s127.85,36.43,134,36.9S1012.66,625.2,1006.71,761.15Z" transform="translate(-29.72 -56.36)" opacity="0.05"/><path d="M704.07,805.9s3.37,8.88,12.64,9.51a16.43,16.43,0,0,0,4.07-.22c12.38-2.14,41.43-7.14,51.66-5.24,6.16,1.15,17.55-.55,25.66-2.08,5.4-1,9.34-2,9.34-2s-9.52-31.66-10.72-32.61-42.85-25.95-42.85-25.95l-33-2.37h-.1s-6.11.41-11.18,6.57c-3.49,4.21-6.48,11.13-6.68,22.47C702.45,801.85,704.07,805.9,704.07,805.9Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M704.07,805.9s3.37,8.88,12.64,9.51a135.54,135.54,0,0,1-9-13.08l.17-23.09c-1.47-17.29,6.62-28.36,13-34.27h-.1s-17.38,1.18-17.86,29S704.07,805.9,704.07,805.9Z" transform="translate(-29.72 -56.36)" opacity="0.05"/><path d="M847.2,755.43l30.71-24,48.33-47.62s-5.22-.25-13.09-.59c-2,1.25-7.45,5.18-7.65,10-.24,5.82-13.07.4-19.73,3.73s-39.28,45.08-45,44.81-10.23-2.9-12.62,1.15c0,.09-.11.17-.17.26Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M709.6,751.53c1.09.53,2.19,1,3.32,1.52,23.34,10,52.14,31,54.29,34.76,1.3,2.32,18,12.46,30.89,20.06,5.4-1,9.34-2,9.34-2s-9.52-31.66-10.72-32.61-42.85-25.95-42.85-25.95l-33-2.37h-.1S714.67,745.37,709.6,751.53Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M644.84,683.29c3.09,7.62,29,36.91,29,36.91s16.42,21.42,39.76,31.42,52.14,31,54.28,34.76c1.38,2.45,20,13.65,33.08,21.35l2.93,1.71,6.5,3.77,3.44,2s8-6.4,15.91-12.84,15.63-12.75,15.76-13.11c.23-.71,3.32-8.81,2.61-9.28-.37-.25-2-3.55-5-7.37a33.82,33.82,0,0,0-12.13-10c-11-5-15.71-16.38-15.71-16.38s-1-.76-2.63-1.76c-2.82-1.78-7.35-4.34-10.7-4.77-5.25-.66-15-11.37-15-11.37s-6.67-4.29-9.29-9.76c-2.5-5.22-39.42-30.58-42.84-32.92l89.51,57.48,21.42,13.77,30.71-24,48.34-47.62s-6.5-.32-16-.72c-23.49-1-65.21-2.61-70.48-1.42a40.17,40.17,0,0,1-13.1.85s-11.88.54-19.74-3.61-20.25-6.09-21.68-9.16-43.57-17.85-43.57-17.85-57.37-30.47-77.85-12.37S641.74,675.68,644.84,683.29Z" transform="translate(-29.72 -56.36)" fill="#434175"/><path d="M829.82,508.55l7.38,24.52,9.52,55.23,35,2.38,10.13-16.8L902,557.11s6.3-22.32,10.83-43.91c4-19.1,6.62-37.64,2.26-39.65-3.86-1.79-6.4-8.22-8-15.14-.21-.85-.4-1.72-.58-2.59a134.62,134.62,0,0,1-2.32-17.75s-73.33-3.8-63.09,26.43a48.18,48.18,0,0,1,2.76,16.08,38.23,38.23,0,0,1-.25,4.09A34.3,34.3,0,0,1,829.82,508.55Z" transform="translate(-29.72 -56.36)" fill="#ee8e9e"/><path d="M814.58,504.5l2.62,41.66,5.95,35.47,6.67,16.43,5.95,89.88s57.41,6.64,71.37-.12a6.14,6.14,0,0,0,2.53-2C926.53,660.39,921,586.63,921,586.63L927.43,539l-4.29-24.72-10.35-1.1-8-.85s-1.8,2.22-4.4,5.65c-7.06,9.32-20,27.65-19.17,35.3,1.18,10.48-1.43,21.19-5.48,22.86s-7.38,4.52-8.09,1.67-1.43-3.57-.72-7.62-3.1-16.43-3.1-16.43-6.42-14.52-6-20.71-.71-13.34-2.62-15-4.52-3.34-2.38-11-9.39-22.45-9.39-22.45Z" transform="translate(-29.72 -56.36)" fill="#e3e8f4"/><path d="M890.41,608.55l2.38,71.19,13.75,7.62a6.15,6.15,0,0,0,2.53-2c16.87-25.47,11.34-99.22,11.34-99.22l6.43-47.62-4.29-24.71-10.36-1.1c4-19.1,6.62-37.64,2.27-39.65-3.87-1.79-6.41-8.22-8.06-15.14h0L899,508.32s.62,4.54.84,9.22c.17,3.48.11,7-.6,8.87-1.67,4.29-.48,11.91-.48,11.91-4.29,7.56-6.43,21.57-7.48,35.1C889.87,591.41,890.41,608.55,890.41,608.55Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M906.63,456.82s12,1.49,15.8,6.49S936.24,469,936.24,469s11.43,3.81,11.19,4.76,3.33,2.39,10.48,4.29,19,8.81,19,10.48,18.81,20.23,18.81,22.14,5.72,9,5,21.66-1.43,28.57,1.43,31.19,0,12.86,0,12.86A7,7,0,0,0,1002,584c2.38,4.29-.47,22.15-.47,22.15l.23,18.57s-2.62,11.66.48,12.14-.48,5.71-.48,5.71-2.62,9.53.72,13.81,4.28,22.62,4.28,22.62l51,74s.72,13.57-15.47,13.33-16,3.1-15.48,6.19-4.52,6.43-4.52,6.43-6.43,3.33-2.62,7.38,14.76,13.33-3.33,19.52a43.16,43.16,0,0,1-5.24-9.52,107.72,107.72,0,0,1-3.81-12.85s-1.67-18.1-5-20.48-2.86-13.81-2.86-13.81,4.76-9.28-1.9-13.09S894.1,678.77,894.1,678.77l-2.38-71.19s-1.67-52.61,8.33-70.23c0,0-1.19-7.62.48-11.9s-.24-18.1-.24-18.1Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M844.23,485.38s-23.93-4.93-30.36-1.6-19,6-21,7.86-6.67.48-10.95,11.67-4.77,22.61-10.24,27.85-8.33,8.81-8.57,12.62.71,4.76-1.43,6-5.24,6.19-4.29,8.1S807,601.63,807,601.63s2.39,16,4.53,20-2.38,59.76-7.14,63.57,32.14,3.46,32.14,3.46,1.66-36.55,3.09-38.46-1-41-1-41-.24-33.33,2.86-42.14S844.23,529,844.23,529s2.74-17.57,6.07-21.67S844.23,485.38,844.23,485.38Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M843.52,484.67s-23.94-4.93-30.37-1.6-19,5.95-20.95,7.86-6.66.47-11,11.66-4.76,22.62-10.24,27.86-8.33,8.81-8.57,12.62.72,4.76-1.42,5.95-5.24,6.19-4.29,8.09,49.52,43.81,49.52,43.81,2.38,16,4.52,20-2.38,59.75-7.14,63.56,32.14,3.46,32.14,3.46,1.67-36.55,3.1-38.45-1-41-1-41-.23-33.33,2.86-42.14,2.75-38.1,2.75-38.1,2.74-17.57,6.06-21.66S843.52,484.67,843.52,484.67Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M841,464.5a48.18,48.18,0,0,1,2.76,16.08,54.63,54.63,0,0,0,62.65-24.76,134.62,134.62,0,0,1-2.32-17.75S830.77,434.27,841,464.5Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M804.82,426.88A54.52,54.52,0,1,0,806,415.55,54.53,54.53,0,0,0,804.82,426.88Z" transform="translate(-29.72 -56.36)" fill="#ee8e9e"/><path d="M769.82,553.06l-13.09,4.05s1.19,4.76-2.62,7.14-3.33,7.15-3.33,7.15-1.43,5.23-4.76,6.42-5.48,9-5.48,9l-10.95,12.62s-4.05,3.33-3.33,5-4.29,2.14-4.29,2.14L724.59,649l22.62,4.29,14-1.43,11.43-4.29,10-6L787.2,630l20-30.47Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M725.3,610s-29-41.91-50.71-19.29,8.81,59.28,15.95,58.09,41.19-3.09,41.19-3.09Z" transform="translate(-29.72 -56.36)" fill="#ee8e9e"/><rect x="671.34" y="583.93" width="61.42" height="69.8" rx="12.62" ry="12.62" transform="translate(-263.46 573.17) rotate(-42.05)" fill="#30374e"/><rect x="671.34" y="583.93" width="61.42" height="69.8" rx="12.62" ry="12.62" transform="translate(-263.46 573.17) rotate(-42.05)" opacity="0.1"/><rect x="672.16" y="580.48" width="61.42" height="69.8" rx="12.62" ry="12.62" transform="translate(-260.94 572.83) rotate(-42.05)" fill="#30374e"/><circle cx="672.39" cy="560.74" r="13.57" fill="#2271ff"/><circle cx="672.39" cy="560.74" r="13.57" opacity="0.1"/><circle cx="673.15" cy="559.02" r="13.57" fill="#2271ff"/><path d="M706.5,618.77c-.24,31.43,64.76,38.09,64.76,38.09l16.6,2.64,7.44,1.18L798.4,630s-3.41-.51-7.67-1.5c-6.29-1.47-14.44-4-16.15-7.55C771.73,615,706.73,587.35,706.5,618.77Z" transform="translate(-29.72 -56.36)" fill="#ee8e9e"/><path d="M806,415.55a6.47,6.47,0,0,1,4,1.78c1.84,1.95,1.94,5.41,4.33,6.61a4.92,4.92,0,0,0,2.84.33c6.33-.9,10-8,16.07-10,3.46-1.12,7.27-.39,10.65.91a7.93,7.93,0,0,1,3.53,2.27c2,2.63.61,6.5,1.55,9.69,1.31,4.42,6.59,6.18,11.16,6.76s9.72.9,12.77,4.35c2.16,2.45,2.71,6,2.27,9.21a7.29,7.29,0,0,0,0,3.41c1.26,3.57,7.44,3,9.05.22,1.18-2.05.82-3.75,3.6-4.32,1.88-.39,4.09.4,5.83,1a42.71,42.71,0,0,0,15.08,2.32A54.53,54.53,0,1,0,806,415.55Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M875.14,449.43a7.29,7.29,0,0,1,0-3.41c.43-3.23-.11-6.77-2.27-9.21-3-3.45-8.2-3.78-12.77-4.35s-9.85-2.33-11.16-6.75c-.94-3.19.48-7.07-1.55-9.7a7.8,7.8,0,0,0-3.52-2.26c-3.39-1.31-7.2-2-10.66-.92-6.07,2-9.74,9.12-16.07,10a4.92,4.92,0,0,1-2.84-.33c-2.39-1.2-2.49-4.66-4.33-6.6-2.89-3.06-8.38-1.09-11.92-3.36-2.31-1.49-3.2-4.38-3.84-7.05-1.26-5.18-2.27-10.61-1.06-15.79,2.07-8.86,10-14.93,15-22.49,4.71-7.05,7.35-16,14.43-20.64s16.17-3.61,24.15-1.24c3.74,1.11,7.44,2.49,11.31,3,6.44.79,12.9-1,19.38-1.18a41.62,41.62,0,0,1,25.59,7.77,14.16,14.16,0,0,1,4.18,4.23c1.29,2.28,1.46,5,1.85,7.58a38.75,38.75,0,0,0,5,13.93c2,3.35,4.51,6.39,6.32,9.85s2.87,7.55,1.71,11.27c-.61,2-1.82,3.73-2.27,5.74-1.06,4.65,2,9.09,4.09,13.38a25.1,25.1,0,0,1,2.78,12.69,16,16,0,0,1-5.7,11.41c-3.37,2.64-7.8,3.52-12.07,3.66a42.78,42.78,0,0,1-15.38-2.31c-1.75-.6-4-1.39-5.83-1-2.78.57-2.42,2.27-3.6,4.32C882.57,452.47,876.4,453,875.14,449.43Z" transform="translate(-29.72 -56.36)" fill="#434175"/><path d="M845.77,756.86l30.71-24,48.34-47.62s-6.5-.32-16-.72c-1.73,1.76-3.27,4-3.37,6.5-.24,5.82-13.07.41-19.73,3.74s-39.28,45.07-45,44.8-10.23-2.9-12.62,1.15a2.46,2.46,0,0,1-.17.27,6.77,6.77,0,0,1-3.63,2.15Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M783.87,755.19l15.43,49.26,2.42,7.74,7.35-2,16.2-4.45,72.16-19.82s13.56-.18,26-6.93c13.75-7.48,29.26-11.24,44.84-9.78,9.54.89,20.15-3.22,29-19.48,0,0,20-59-30.48-76s-52.88,9-52.88,9-.26.14-.68.42c-2,1.25-7.45,5.18-7.65,10-.24,5.82-13.07.4-19.73,3.73s-39.28,45.08-45,44.81-10.23-2.9-12.62,1.15c0,.09-.11.17-.17.26-1.76,2.43-7.06,3-10.57,3.09-1.91.06-3.3,0-3.3,0l-.45.14L810,747.37Z" transform="translate(-29.72 -56.36)" fill="#434175"/><path d="M787.86,659.5l7.44,1.18L798.4,630s-3.41-.51-7.67-1.5C791.86,632.75,789.3,649.32,787.86,659.5Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M982.54,516s22.14-6.43,16.66,56.43S952.78,675,952.78,675s-47.14,20.71-68.33,17.38-36.66-4-36.66-4a53.79,53.79,0,0,0-21.43-5.71c-11.91-.48-36.9-7.86-37.38-10.24s6.19-37.38,3.33-40c0,0,33.33,1.37,36.67,3.78s8.09.68,11.66,0,14.53-10.21,36.19-1.87c0,0,7.38.71,10.24-1.19s7.44-.48,7.44-.48S899,631,899.69,630s6.42,0,6.42,0a2.54,2.54,0,0,0,3.58-1.67,15.56,15.56,0,0,1,3.33-5.23s6.43-36.19,18.57-49.76c0,0,3.57-3.1,2.62-6.91S954,508.37,982.54,516Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M982,511.16s22.14-6.43,16.67,56.43S952.19,670.2,952.19,670.2s-47.14,20.71-68.33,17.38-36.66-4.05-36.66-4.05a53.72,53.72,0,0,0-21.43-5.71c-11.9-.48-36.9-7.86-37.38-10.24s6.19-37.38,3.34-40c0,0,33.33,1.37,36.66,3.78s8.1.68,11.67,0,14.52-10.2,36.19-1.87c0,0,7.38.71,10.23-1.19s7.45-.48,7.45-.48,4.46-1.67,5.17-2.62,6.43,0,6.43,0a2.53,2.53,0,0,0,3.57-1.66,15.54,15.54,0,0,1,3.33-5.24s6.43-36.19,18.57-49.76c0,0,3.57-3.1,2.62-6.9S953.38,503.54,982,511.16Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M810,747.37l31.44,38c.12-.11.2-.19.2-.22.24-.72,3.33-8.81,2.62-9.29s-6.19-12.38-17.14-17.38c-6.69-3-11.07-8.49-13.46-12.25Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M810.43,813.21l3.44,2s8-6.4,15.91-12.84,15.63-12.75,15.76-13.11c.23-.71,3.32-8.81,2.61-9.28-.37-.25-2-3.55-5-7.37-21.32-6-7.75,8.83-5.94,9.51,0,0-26-6-27.38,22.31A33.36,33.36,0,0,0,810.43,813.21Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M836.72,825.19l4.53,2.62,46,1.19s9.86,6,16.26,7.82a13.93,13.93,0,0,0,2.31.51,103.27,103.27,0,0,0,12.8.24c3.52-.09,6.25-.24,6.25-.24s-2.18-58-3.82-64c-.78-2.92-4.63-2.28-8.43-.82a55.19,55.19,0,0,0-8.23,4.17s-19.52,1.89-22.62,3.57-11.9-1-17.38,0-15.23-6.45-15.23-6.45c-26.67-8.8-11.67,7.62-9.77,8.34,0,0-25.94-6-27.37,22.31S836.72,825.19,836.72,825.19Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M903.15,802.81c.5,12,9.85,26.89,15.42,34.76,3.52-.09,6.25-.24,6.25-.24s-2.18-58-3.82-64c-.78-2.92-4.63-2.28-8.43-.82C908,781.11,902.75,793.14,903.15,802.81Z" transform="translate(-29.72 -56.36)" fill="#565387"/><path d="M903.15,802.81c.5,12,9.85,26.89,15.42,34.76,3.52-.09,6.25-.24,6.25-.24s-2.18-58-3.82-64c-.78-2.92-4.63-2.28-8.43-.82C908,781.11,902.75,793.14,903.15,802.81Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><path d="M895.29,804.4c3.16,11.58,3.13,24.57,8.17,32.42a13.93,13.93,0,0,0,2.31.51,103.27,103.27,0,0,0,12.8.24c3.52-.09,6.25-.24,6.25-.24s-2.18-58-3.82-64c-.78-2.92-4.63-2.28-8.43-.82a55.19,55.19,0,0,0-8.23,4.17S891.25,789.58,895.29,804.4Z" transform="translate(-29.72 -56.36)" opacity="0.05"/><path d="M736.77,686.94s22.82,7.41,42.16,33.73Z" transform="translate(-29.72 -56.36)" opacity="0.1"/><g opacity="0.1"><path d="M922.23,401.26a4.67,4.67,0,0,1-.14.5,16.15,16.15,0,0,1-.79,2A14.93,14.93,0,0,1,922.23,401.26Z" transform="translate(-29.72 -56.36)"/><path d="M793.11,389.71a21.46,21.46,0,0,1,1.77-4.81c-.12.41-.25.82-.35,1.24-1.21,5.18-.2,10.61,1.06,15.79.65,2.67,1.53,5.56,3.84,7.05,3.55,2.27,9,.29,11.92,3.35,1.84,1.95,1.94,5.41,4.34,6.61a4.91,4.91,0,0,0,2.84.33c6.32-.9,10-8,16.07-10,3.46-1.12,7.26-.39,10.65.92a7.8,7.8,0,0,1,3.52,2.26c2,2.63.61,6.51,1.55,9.69,1.31,4.42,6.59,6.18,11.16,6.75s9.72.9,12.77,4.36c2.16,2.44,2.71,6,2.27,9.21a7.42,7.42,0,0,0,0,3.41c1.26,3.57,7.44,3,9,.22,1.18-2.05.83-3.75,3.61-4.32,1.87-.39,4.08.4,5.82,1a42.78,42.78,0,0,0,15.38,2.31c4.27-.15,8.71-1,12.07-3.66a14,14,0,0,0,3.7-4.5A15.14,15.14,0,0,1,921,445c-3.36,2.64-7.79,3.52-12.07,3.66a42.69,42.69,0,0,1-15.37-2.31c-1.75-.6-4-1.39-5.83-1-2.78.57-2.43,2.27-3.6,4.32-1.62,2.82-7.79,3.35-9.06-.22a7.42,7.42,0,0,1,0-3.41c.44-3.23-.1-6.77-2.26-9.21-3.06-3.45-8.21-3.78-12.78-4.35s-9.85-2.33-11.15-6.75c-.95-3.19.48-7.07-1.55-9.7a7.88,7.88,0,0,0-3.53-2.26c-3.39-1.31-7.19-2-10.65-.92-6.08,2-9.75,9.12-16.07,10a4.91,4.91,0,0,1-2.84-.33c-2.4-1.2-2.5-4.66-4.34-6.6-2.89-3.06-8.37-1.09-11.91-3.36-2.32-1.49-3.2-4.38-3.85-7.05C792.9,400.32,791.89,394.89,793.11,389.71Z" transform="translate(-29.72 -56.36)"/></g><path d="M925.92,580.26c-4.36,5.89-9.34,11.34-13.2,17.57s-6.59,13.5-5.78,20.78c4-4.1,5.82-9.76,8.34-14.9,4.26-8.7,10.64-16.08,16-24.08,1-1.53,7.61-10.35,4.28-10.77C932.82,568.51,927.41,578.25,925.92,580.26Z" transform="translate(-29.72 -56.36)" opacity="0.1"/></svg>
register.svg
<svg id="26e08365-e7f3-4f87-b2fd-e29738693ebb" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="999" height="797.25" viewBox="0 0 999 797.25"><defs><linearGradient id="c24143ca-a0c1-48a5-a3b5-0343775bf348" x1="778.67" y1="845.35" x2="778.67" y2="329.26" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>press play</title><path d="M421.71,82.64c30.78-27.43,79.11-33,123.09-30.84,138.16,6.87,262.87,73.56,370.74,149,39.05,27.31,77.5,56.74,102.85,94.35,51.6,76.57,36.3,182.63-35.46,245.7-24.41,21.46-54,37.91-84.39,52.5-54,25.93-112.31,46.74-173.62,52.67-43.73,4.22-88,.79-131.46-5.11C472,624.45,352.81,588,252.9,525.72c-43.82-27.33-85.13-61.3-103.19-105.52S143.21,320,188,293.8c18.51-10.82,40.64-15.71,62.3-20.3,31.89-6.76,64.29-13.42,93.06-27.15,29.72-14.19,64.92-41.63,59-73C396,139.63,391,110,421.71,82.64Z" transform="translate(-100.5 -51.37)" fill="#2271ff" opacity="0.1"/><circle cx="174.08" cy="129.4" r="31.5" fill="#2271ff" opacity="0.1"/><circle cx="108.09" cy="54.4" r="19.5" fill="#2271ff" opacity="0.1"/><circle cx="925.57" cy="114.4" r="12" fill="#2271ff" opacity="0.1"/><ellipse cx="689.92" cy="788.85" rx="84.24" ry="8.4" fill="#2271ff" opacity="0.1"/><polygon points="214 487.31 213.63 507.26 210.67 668.97 185.33 728.31 98 729.31 98 496.5 189.14 489.28 214 487.31" fill="#5f5d7e"/><polygon points="214 487.31 213.63 507.26 210.67 668.97 185.33 728.31 98 729.31 98 496.5 189.14 489.28 214 487.31" opacity="0.1"/><polygon points="214 487.31 213.63 507.26 210.67 668.97 185.33 728.31 192 507.64 191.98 507.5 189.14 489.28 214 487.31" fill="#5f5d7e"/><polygon points="189.14 489.28 214 487.31 213.63 507.26 191.98 507.5 98 508.55 98 496.5 189.14 489.28" opacity="0.1"/><polygon points="999 496.5 999 727.97 978.67 727.97 897.33 668.64 897.33 489.97 970 483.14 974.46 485.19 978.67 487.13 999 496.5" fill="#5f5d7e"/><rect x="978.67" y="485.19" width="20.33" height="242.78" opacity="0.1"/><polygon points="999 485.19 999 498.5 978.67 498.73 897.33 499.63 897.33 489.97 970 483.14 974.46 485.19 978.67 487.13 978.67 485.19 999 485.19" opacity="0.1"/><polygon points="999 477.64 999 496.5 0 507.64 0 483.64 94 464.64 912 458.64 999 477.64" fill="#5f5d7e"/><polygon points="999 477.64 999 496.5 0 507.64 0 483.64 999 477.64" opacity="0.1"/><rect x="365.5" y="194.97" width="349.92" height="271.69" rx="22.82" ry="22.82" fill="#474157"/><rect x="393.66" y="219.48" width="294.12" height="221.63" fill="#ededf4"/><circle cx="382.18" cy="330.29" r="4.82" fill="#e6e8ec"/><circle cx="700.81" cy="330.81" r="7.95" fill="#e6e8ec"/><path d="M672.93,382.52l-37.61-22.86a5.14,5.14,0,0,0-7.63,4.48V408.6a5.14,5.14,0,0,0,7.63,4.48l37.61-21.58A5.15,5.15,0,0,0,672.93,382.52Zm28.28,3.85a53,53,0,1,0-53,53A53,53,0,0,0,701.21,386.37Zm-95.74,0a42.74,42.74,0,1,1,42.74,42.74A42.73,42.73,0,0,1,605.47,386.37Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M904.38,560.51a12.5,12.5,0,0,0-1.13-3.52c.76-2.59,1.25-4.18,1.25-4.18s0-.38-.12-1a15.35,15.35,0,0,0-15.55-12.88c-6,.11-17.38.51-30,1.93.72-5.05,1.58-11.09,2.48-17.31l1.65.18c.38,0,.78,0,1.18.06h.53a5.44,5.44,0,0,0,3.66-1.12,2.16,2.16,0,0,0-.67-3.54,8.92,8.92,0,0,0,7.83-3.28,7,7,0,0,0,0-8.14c-2.11-3-6.58-5-6.82-8.53-.13-2,1.21-3.8,2.26-5.57a23.27,23.27,0,0,0-3.67-27.95,54.76,54.76,0,0,0-4.44-3.95c-2.2-8.08-4.5-15.3-5.18-15.53-.88-.29-2.39-2.19-3.83-3.82a18.4,18.4,0,0,0-.07-4.13c-1.06-7-8-12-11.82-18.18s-4.51-13.75-3.53-20.83,3.45-13.93,5.46-20.84c1.5-5.13,2.75-10.58,1.07-15.67-1.19-3.63-3.78-6.77-6.45-9.72-6.41-7.09-13.8-13.73-22.92-18a45.55,45.55,0,0,0-20.29-4.34h-.07l-1.1.06-.78.05-.78.08-.83.08h0c-.85.11-1.69.24-2.53.41a87.31,87.31,0,0,0-18.55-2.08h-.81a9.5,9.5,0,0,0-5.3,1.25c-2.22,1.55-2.5,4.33-3.17,6.75a18.73,18.73,0,0,1-7.2,10c-2.39,1.72-5.2,3-7.48,4.8s-4.06,4.5-3.45,7.16c.51,2.23,2.59,3.89,5,4.9-.29.36-.59.71-.87,1.08.47.19,1,.36,1.43.5,3,.89,6.23,1,9.27,1.81a20.31,20.31,0,0,1,2.46.83,35.12,35.12,0,0,0-4.11,16.52,35.59,35.59,0,0,0,18.62,31.22c0,.34,0,.67,0,1,.31,10.44-.48,23.14-5.82,25.29s-10.45,4.58-13.6,6.15l-1,.53c-.83-.38-1.66-.78-2.47-1.2,0,0-4.25-.5-3.51,2.74,0,0-12.85-2-19.9,3.49s-18.62,16.95-20.89,19.94S688,483.54,688,483.54s5.53-7.73,3.14-17.2c0,0-2.64-11.42-1.38-16s4.53-21.58,4.53-21.58.46-17.94-9.33-26.17-16.6-15-12.82-7a111.46,111.46,0,0,0,5.54,10.71s-23.41,5.56-15.1,14.24,10.57,8.69,10.57,8.69-2.77,21.43-3.28,25.42-5,34.39-5,34.39-.25,14.46,2.27,16.7c0,0,1.65,9.31,12.08,9,0,0,19.88-.5,25.42-2.74s24.66-14.21,26.68-13.46a1.15,1.15,0,0,1,.39.26,2.83,2.83,0,0,1,.3.3c-2,4.43-6.74,19.47-4.72,26.86,0,0-1.76,20.93,8.81,27.66,0,0,15.35,25.92,9.56,39.87-.46,1.13-.87,2.17-1.25,3.18-8.79-7.29-22.2-14-42.68-17.71-2.09-.38-4.17-.84-6.23-1.34-5.82-1.41-21.83-2.7-29.45,22.61a111.36,111.36,0,0,1-6.76,17.12c-3,6.07-6.33,14.77-6.4,23.4-.17,12.1,6.08,24.09,28.76,28.49.25,9,1.28,19.72,4.36,27.43,6.29,15.7,16.36,41.12,16.36,41.12s12.08,25.92,12.84,36.38c.49,6.85,1.21,15.83.71,22,0,.38-.06.74-.1,1.1a26.52,26.52,0,0,1-3.38,3.07c-1.76,1-7.55,7.23-7.55,8.72a26.64,26.64,0,0,0,.38,4.26c-2.74,2.39-4.24,5-4.24,7.6,0,13.52,38.37,24.48,85.7,24.48s85.69-11,85.69-24.48c0-12.34-32-22.54-73.58-24.22,8.67-3.46,16.37-7.09,19.56-10a4.68,4.68,0,0,0,1.51-2.06l-8.05-18.69s-.63.14-1.56.41l-.56-.84c-3.58-5.45-10.47-16.31-10.47-19.26,0-1.09-1.82-8.06-4.46-17.61V698c26.26,4,60.1-1.44,60.1-1.44l.15-.08h.66v-.36c4.55-2.52,27.31-15.85,34.06-33.53,2-5.16-.49-12.55-5.44-20.45,3.46-8.59,12-30.78,11.15-39.63,0-.47-.06-1-.06-1.52a26.12,26.12,0,0,0,.1-2.72c1-13,9-36.75,9-36.75S904.48,561.11,904.38,560.51Zm-170-57.76c1.82,3.2,3.77,7.29,4.54,8.95h0S736.26,506.8,734.43,502.75Zm1.9,280.1-.19.07,0-1a59.38,59.38,0,0,1,.19-7.82,9.16,9.16,0,0,0-.86-4.06,96,96,0,0,1-6.13-24.13c-1-8.72-1.83-18.23-1.31-20.65.78-3.71,1.42-31.81.45-45.66l15.48,3.48,18,36.7s11.58,17.92,15.17,32.06V766a34.6,34.6,0,0,1-5.41,11.74c-2.39,3.27-4.72,6.58-6.88,10-.66,1.06-1.39,2.15-2.12,3.17-.24,0-12.07.69-14.08,2.91-1.24,1.37-3.4,3.53-3.76,5.7l-.51.08C742,792.69,736.33,782.85,736.33,782.85Z" transform="translate(-100.5 -51.37)" fill="url(#c24143ca-a0c1-48a5-a3b5-0343775bf348)"/><path d="M812.43,770l-4,13-17,14.75-25,7.18s-11.75-6.43-7.75-7.68c1.11-.35,2.43-1.62,3.77-3.28-1.4,5.1,9.73-1.47,9.73-1.47s28.75-20.5,31.75-22.75a22.61,22.61,0,0,1,6.4-2.93C811.58,768.77,812.43,770,812.43,770Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M812.43,770l-4,13-17,14.75-25,7.18s-11.75-6.43-7.75-7.68c1.11-.35,2.43-1.62,3.77-3.28a50,50,0,0,0,3.34-4.82c2.14-3.44,4.46-6.76,6.83-10a36,36,0,0,0,6.31-16.61c1.75-13.75-16-41.5-16-41.5l-32.25-66.25,45,5.5s24.25,83.25,24.25,87.25c0,3,6.84,13.85,10.4,19.32C811.58,768.77,812.43,770,812.43,770Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><ellipse cx="686.97" cy="771.05" rx="85.12" ry="24.55" fill="#5f5d7e"/><path d="M820.43,786a4.8,4.8,0,0,1-1.5,2.07c-6.18,5.67-29.29,14.1-43.57,18.68A101.11,101.11,0,0,1,763.93,810c-3.5.25-10.75-2-15.75-5.07s-.5-7.43,1.52-9.68,14-2.92,14-2.92c-5.75,9.57,8.49,1.17,8.49,1.17s28.75-20.5,31.75-22.75,8.5-3.5,8.5-3.5Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M820.43,786a4.8,4.8,0,0,1-1.5,2.07c-6.18,5.67-29.29,14.1-43.57,18.68A101.11,101.11,0,0,1,763.93,810c-3.5.25-10.75-2-15.75-5.07s-.5-7.43,1.52-9.68,14-2.92,14-2.92c-5.75,9.57,8.49,1.17,8.49,1.17s28.75-20.5,31.75-22.75,8.5-3.5,8.5-3.5Z" transform="translate(-100.5 -51.37)" opacity="0.3"/><path d="M818.93,788.09c-6.18,5.67-29.29,14.1-43.57,18.68C788.3,795.81,810,790.08,818.93,788.09Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><ellipse cx="686.97" cy="763.14" rx="17.03" ry="4.91" opacity="0.1"/><rect x="677.5" y="633.64" width="17.5" height="129.5" fill="#5f5d7e"/><path d="M795.5,691.43v15c-3.5-1.08-11.49-5.63-17.5-9.21V685h3.65Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M754.27,628.63s57.78-14.87,72.16-26,70.85,41.24,63.39,61-34.62,34.07-34.62,34.07-75.11,12.22-87.9-13.27S754.27,628.63,754.27,628.63Z" transform="translate(-100.5 -51.37)" fill="#474157"/><path d="M754.27,628.63s57.78-14.87,72.16-26,70.85,41.24,63.39,61-34.62,34.07-34.62,34.07-75.11,12.22-87.9-13.27S754.27,628.63,754.27,628.63Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M749.27,622.63s57.78-14.87,72.16-26,70.85,41.24,63.39,61-34.62,34.07-34.62,34.07-75.11,12.22-87.9-13.27S749.27,622.63,749.27,622.63Z" transform="translate(-100.5 -51.37)" fill="#474157"/><path d="M695.68,486.27,689.43,484s5.5-7.75,3.13-17.25c0,0-2.63-11.46-1.38-16.1s4.5-21.65,4.5-21.65.46-18-9.27-26.25-16.48-15-12.73-7a111.4,111.4,0,0,0,5.5,10.75s-23.25,5.57-15,14.29,10.5,8.71,10.5,8.71-2.75,21.5-3.25,25.5-5,34.5-5,34.5-.25,14.5,2.25,16.75a11.31,11.31,0,0,0,12,9C682.46,515.22,703.68,491.77,695.68,486.27Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M846.68,440.27v14L832.18,459l-24.7,18.18L800.93,482l-29.25-11.75-18.5-19.5s.9-.49,2.46-1.3l1-.53c3.13-1.57,8.06-4,13.51-6.17s6.09-14.89,5.78-25.37l0-1c-.25-7.35-1-13.36-1-13.36s3.05-.58,7.49-1.24c12.31-1.83,35.28-4.3,33.26,3.24a17.37,17.37,0,0,0,0,7.79c.06.28.12.57.19.85,2.08,9.09,8.52,18.61,8.52,18.61l20,7.2.56.2Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M846.68,444.52v-4.25a14,14,0,0,1,4.75,0c1.75.5,5.07,5.75,6.57,6.25s10.68,34.75,9.68,37.75S857.23,555,857.23,555l-19.05,21-3.75-57.75L846.68,484Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M747.93,601.77s-17.41,3.75-15.2,9.25,11.95,5.75,11.95,5.75Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M772.18,490.72l-13.25,28.55-15.75,11.5L740.43,513s-5.32-11.75-7.61-13.74a1.15,1.15,0,0,0-.39-.26c-2-.75-21,11.25-26.5,13.5s-25.25,2.75-25.25,2.75L689.43,484s17.5-6.5,19.75-9.5,13.75-14.5,20.75-20S749.7,451,749.7,451l.2.08,3.28,1.42,9.5,23.25Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M737.43,775.52a59.64,59.64,0,0,0-.19,7.84c.07,2.79.19,5.16.19,5.16l-5.75,12s-19.75,6.5-16.5,3.75c1.13-.95,1.71-3.42,2-6.69.49-6.18-.22-15.19-.71-22.06-.75-10.5-12.75-36.5-12.75-36.5s-10-25.5-16.25-41.25-4-44.25-4-44.25,1-21.5,5.5-28,22-8.75,22-8.75L719.18,644s6.75,25.5,9.25,29.25,1.75,48.5.75,53.25c-.51,2.43.35,12,1.31,20.72a97.31,97.31,0,0,0,6.08,24.2A9.24,9.24,0,0,1,737.43,775.52Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M737.43,788.52l-5.75,12s-19.75,6.5-16.5,3.75c1.13-.95,1.71-3.42,2-6.69.71-.71,1.47-1.49,2.25-2.29a50.49,50.49,0,0,1,17.85-11.93h0C737.31,786.15,737.43,788.52,737.43,788.52Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M746.45,806.38a.59.59,0,0,1,0,.14c-1,4.75-17.5,11.25-17.5,11.25s-10.5,1.75-16.5,3.25a4.15,4.15,0,0,1-1.41.13c-4.63-.35-4.84-9.26-4.84-10.63s5.75-7.75,7.5-8.75a53.63,53.63,0,0,0,5.56-5.33,51.6,51.6,0,0,1,18.22-12.17h0S747.25,801.45,746.45,806.38Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M746.45,806.38a.59.59,0,0,1,0,.14c-1,4.75-17.5,11.25-17.5,11.25s-10.5,1.75-16.5,3.25a4.15,4.15,0,0,1-1.41.13c-4.63-.35-4.84-9.26-4.84-10.63s5.75-7.75,7.5-8.75a53,53,0,0,0,5.64-5.41,50.57,50.57,0,0,1,17.86-12l.28-.11S747.25,801.45,746.45,806.38Z" transform="translate(-100.5 -51.37)" opacity="0.3"/><path d="M746.45,806.38a.59.59,0,0,1,0,.14c-1,4.75-17.5,11.25-17.5,11.25s-10.5,1.75-16.5,3.25a4.15,4.15,0,0,1-1.41.13c5.44-3.73,18.63-12.68,20.41-12.88S742,805.55,746.45,806.38Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M815.91,413.66c-6.18,5.09-11.86,4.36-20.49,4.36-6.24,0-14.35,2.19-19.46-.62-.21-7.81-1-14.38-1-14.38s43.5-8.25,40.75,2A18.18,18.18,0,0,0,815.91,413.66Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M828.93,385.06a35.75,35.75,0,0,1-35.75,35.75c-.92,0-1.84,0-2.74-.1h0a35.75,35.75,0,1,1,38.5-35.65Z" transform="translate(-100.5 -51.37)" fill="#fdc2cc"/><path d="M762.68,475.77l9.5,15-13.25,28.55-15.75,11.5L740.43,513s-5.32-11.75-7.61-13.74c.66-1.61,1.11-2.35,1.11-1.76,0,2.5,6.15,13.75,6.15,13.75,19-6.5,13.1-31.75,13.1-31.75s-2.36-22.5-3.28-28.42l3.28,1.42Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M846.68,440.27v14L832.18,459l-24.7,18.18L800.93,482l-29.25-11.75-18.5-19.5s.9-.49,2.46-1.3l1-.53c12.87,5.85,26.8,8,36.75,8.77a111,111,0,0,0,13.76.31C844.82,452,845.94,442.9,845,439.67Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M857.43,667a280.29,280.29,0,0,1-29,12.25c-17.25,6.25-55.25-2-60-3.25s-41.25-15.75-55.25-21.25-17.5-1-20.75-1.5-5.5-6.75-6-8.5,9-17,14.25-24.75,21-6.25,23.25-6.75,18,0,18,0-1-5,4.75-19-9.5-40-9.5-40c-10.5-6.75-8.75-27.75-8.75-27.75-2.5-9.25,5.5-30.5,5.5-28s6.15,13.75,6.15,13.75c19-6.5,13.1-31.75,13.1-31.75s-2.75-26.25-3.48-29.5,3.48-2.75,3.48-2.75q1.22.63,2.46,1.2c13.16,6.2,27.56,8.46,37.78,9.24a111,111,0,0,0,13.76.31c45.67-7.37,37.58-19.12,37.28-19.54l2.22.79c16.5,12,11.5,51.75,11.5,51.75L852,521.67l-4.59,22.1s16.25,98.5,17.75,103.5S857.43,667,857.43,667Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M735.68,622c-1,.75-12.25,24-4,30.5S735.68,622,735.68,622Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M743.68,625.27c.25.75,23.5,37.75,36.25,40.75Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M799.69,332.48l-3.72.79a25.07,25.07,0,0,1,3.14-.93Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M855.71,492l-7,29.65a36.22,36.22,0,0,1-9.72-6.51c-2.23-2.12-4.23-4.55-7.1-5.94-3.69-1.79-8.14-1.55-12.33-1.7a59.32,59.32,0,0,1-15.42-2.64,10.88,10.88,0,0,1-4-1.94c-2.38-2.1-2.22-5.49-2-8.45a129.57,129.57,0,0,0,.15-17.29c-.06-1.08-.14-2.16-.23-3.24-.4-4.83-1.7-10.43-6.64-12.5-2.54-1-5.57-.92-8-2.13a6.61,6.61,0,0,1-1-.62c-3.6-2.52-3.93-7.57-3.79-11.82q.32-8.76.61-17.53a50.94,50.94,0,0,0-.19-8.65h0a19.21,19.21,0,0,0-1.56-5.52c-2.17-4.64-6.69-8.51-7.5-13.41a5.43,5.43,0,0,1-.09-.69c-.42-4.38,2.34-8.46,3.31-12.77,1.94-8.67-4.58-18.17-14.17-20.66-3-.78-6.22-.93-9.21-1.82a14.79,14.79,0,0,1-1.41-.5c7.24-9.66,19.65-16,33.74-16,22.33,0,40.44,16,40.44,35.75,0,11.2-5.83,21.19-14.94,27.75.06.28.13.57.21.85,2.35,9.09,9.64,18.61,9.64,18.61l22.64,7.2,2.52.8C861.37,452.27,855.71,492,855.71,492Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M868,520.72c-.22,0-.43-.05-.64-.09A1.33,1.33,0,0,1,868,520.72Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M790.68,331.49a86,86,0,0,0-19.08-2.23c-2.09,0-4.33.11-6,1.26-2.21,1.55-2.49,4.35-3.15,6.77a18.78,18.78,0,0,1-7.15,10c-2.37,1.73-5.16,3-7.43,4.82s-4,4.52-3.43,7.18S748,364,751,364.85s6.19,1,9.21,1.82c9.59,2.49,16.1,12,14.16,20.65-1,4.31-3.73,8.39-3.31,12.77.49,5.23,5.32,9.26,7.59,14.11,2.07,4.42,1.93,9.38,1.77,14.16l-.61,17.54c-.16,4.62.24,10.18,4.8,12.44,2.44,1.2,5.48,1.07,8,2.13,4.94,2.06,6.24,7.67,6.64,12.49a129.1,129.1,0,0,1,.08,20.53c-.23,3-.39,6.35,2,8.45a10.72,10.72,0,0,0,4,1.94,59.32,59.32,0,0,0,15.42,2.64c4.2.16,8.64-.08,12.33,1.7,2.87,1.39,4.87,3.83,7.1,5.94a39.24,39.24,0,0,0,23.18,10.15c1.85.16,3.95.12,5.24-1.07s.53-3.76-1.31-3.61a8.89,8.89,0,0,0,8.42-3.22,7.1,7.1,0,0,0,0-8.17c-2.09-3-6.53-5-6.77-8.56-.13-2,1.2-3.81,2.24-5.59a23.51,23.51,0,0,0-3.64-28c-4.69-4.85-11.72-8.53-13.36-14.75-1.09-4.16.56-8.53-.07-12.76-1-7-7.93-12-11.74-18.24s-4.48-13.79-3.51-20.89,3.43-14,5.43-20.9c1.49-5.15,2.72-10.62,1.06-15.73-1.19-3.63-3.75-6.78-6.41-9.75-6.37-7.11-13.7-13.77-22.76-18s-20.1-5.87-29.72-2.74" transform="translate(-100.5 -51.37)" fill="#474157"/><path d="M790.68,331.49a86,86,0,0,0-19.08-2.23c-2.09,0-4.33.11-6,1.26-2.21,1.55-2.49,4.35-3.15,6.77a18.78,18.78,0,0,1-7.15,10c-2.37,1.73-5.16,3-7.43,4.82s-4,4.52-3.43,7.18S748,364,751,364.85s6.19,1,9.21,1.82c9.59,2.49,16.1,12,14.16,20.65-1,4.31-3.73,8.39-3.31,12.77.49,5.23,5.32,9.26,7.59,14.11,2.07,4.42,1.93,9.38,1.77,14.16l-.61,17.54c-.16,4.62.24,10.18,4.8,12.44,2.44,1.2,5.48,1.07,8,2.13,4.94,2.06,6.24,7.67,6.64,12.49a129.1,129.1,0,0,1,.08,20.53c-.23,3-.39,6.35,2,8.45a10.72,10.72,0,0,0,4,1.94,59.32,59.32,0,0,0,15.42,2.64c4.2.16,8.64-.08,12.33,1.7,2.87,1.39,4.87,3.83,7.1,5.94a39.24,39.24,0,0,0,23.18,10.15c1.85.16,3.95.12,5.24-1.07s.53-3.76-1.31-3.61a8.89,8.89,0,0,0,8.42-3.22,7.1,7.1,0,0,0,0-8.17c-2.09-3-6.53-5-6.77-8.56-.13-2,1.2-3.81,2.24-5.59a23.51,23.51,0,0,0-3.64-28c-4.69-4.85-11.72-8.53-13.36-14.75-1.09-4.16.56-8.53-.07-12.76-1-7-7.93-12-11.74-18.24s-4.48-13.79-3.51-20.89,3.43-14,5.43-20.9c1.49-5.15,2.72-10.62,1.06-15.73-1.19-3.63-3.75-6.78-6.41-9.75-6.37-7.11-13.7-13.77-22.76-18s-20.1-5.87-29.72-2.74" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M737.18,554.27s8.5,3.25,17.5-5.75S737.18,554.27,737.18,554.27Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><g opacity="0.1"><path d="M794.44,331.34a35.56,35.56,0,0,1,5-.63,37.93,37.93,0,0,0-7,.22Z" transform="translate(-100.5 -51.37)"/><path d="M844.58,514.16c-2.24-2.11-4.23-4.55-7.11-5.94-3.68-1.78-8.13-1.54-12.33-1.7a59,59,0,0,1-15.42-2.64,10.72,10.72,0,0,1-4-1.94c-2.38-2.1-2.21-5.48-2-8.45a129.1,129.1,0,0,0-.08-20.53c-.41-4.82-1.7-10.43-6.65-12.49-2.53-1.06-5.56-.93-8-2.13-4.56-2.26-5-7.82-4.81-12.44q.31-8.77.61-17.53c.17-4.79.3-9.75-1.77-14.17-2.27-4.85-7.1-8.87-7.59-14.11-.41-4.37,2.35-8.46,3.32-12.77,1.94-8.67-4.58-18.16-14.17-20.65-3-.78-6.22-.94-9.21-1.82s-5.89-2.78-6.51-5.5,1.15-5.36,3.42-7.19,5.06-3.09,7.44-4.82a18.71,18.71,0,0,0,7.14-10c.67-2.42,1-5.21,3.15-6.77a8,8,0,0,1,4.1-1.2c-.89,0-1.78-.05-2.66-.05-2.09,0-4.33.11-6,1.25-2.21,1.56-2.49,4.35-3.15,6.77a18.78,18.78,0,0,1-7.15,10c-2.37,1.73-5.16,3-7.43,4.82s-4,4.52-3.43,7.19,3.53,4.61,6.52,5.5,6.19,1,9.21,1.82c9.59,2.49,16.1,12,14.16,20.65-1,4.31-3.73,8.4-3.31,12.77.49,5.24,5.32,9.26,7.59,14.11,2.07,4.42,1.94,9.38,1.77,14.17q-.31,8.76-.61,17.53c-.16,4.62.24,10.18,4.8,12.44,2.44,1.2,5.48,1.07,8,2.13,4.94,2.06,6.24,7.67,6.64,12.49a129.1,129.1,0,0,1,.08,20.53c-.23,3-.39,6.35,2,8.45a10.72,10.72,0,0,0,4,1.94,58.91,58.91,0,0,0,15.42,2.64c4.2.16,8.64-.08,12.33,1.7,2.87,1.39,4.87,3.83,7.11,5.94a39.18,39.18,0,0,0,23.17,10.15,10.71,10.71,0,0,0,3.35-.13A39.11,39.11,0,0,1,844.58,514.16Z" transform="translate(-100.5 -51.37)"/></g><path d="M689.43,484s-8,7.34-6.83,10.34S689.43,484,689.43,484Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M696.85,578.35c-5.77-1.41-21.68-2.71-29.25,22.68a112.32,112.32,0,0,1-6.71,17.17c-7.26,14.91-16.64,45.57,24.61,52.32l99,22.5s53,6.5,56.5,4,3-8,3-8-58.5,0-70-18-12-42.5-12-42.5,1.44-37.83-59-48.82C701,579.32,698.9,578.85,696.85,578.35Z" transform="translate(-100.5 -51.37)" fill="#474157"/><path d="M696.85,578.52c-5.77-1.41-21.68-2.71-29.25,22.69a112.32,112.32,0,0,1-6.71,17.17c-7.26,14.9-16.64,45.56,24.61,52.31l99,22.5s53,6.5,56.5,4,3-8,3-8-58.5,0-70-18-12-42.5-12-42.5,1.44-37.83-59-48.82C701,579.49,698.9,579,696.85,578.52Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M904.38,552.48a15.29,15.29,0,0,0-15.45-12.92c-14.24.26-58.07,2.16-78.43,15.46,0,0-15.5,10-20,10s-65.5,52,25,98.5c0,0,48.5,13.8,67.5-18.6,0,0,13.5-34.8,12.5-46.85s9-44.55,9-44.55S904.48,553.13,904.38,552.48Z" transform="translate(-100.5 -51.37)" fill="#474157"/><path d="M904.38,561.24c-1.14-7-7.8-12.06-15.45-11.93-14.24.24-58.07,2-78.43,14.27,0,0-15.5,9.23-20,9.23s-65.5,48,25,90.93c0,0,48.5,12.74,67.5-17.17,0,0,13.5-32.13,12.5-43.25s9-41.12,9-41.12S904.48,561.84,904.38,561.24Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><rect x="739.5" y="612.14" width="16" height="34.07" fill="#5f5d7e"/><ellipse cx="170.24" cy="470.71" rx="45.04" ry="2.89" opacity="0.1"/><path d="M308.54,410.62a17.18,17.18,0,0,0-2.28,4.29c-.14.38-.28.8-.42,1.21a3.69,3.69,0,0,0-.79-.27,11.34,11.34,0,0,0-3.57-.31c0-.46.06-1,.07-1.46.15-5.27-.47-12.62-5.5-9.51-4.82,3-1.38,8,1.73,11.21l.8.78c-2.84,2-3.38,6.73-3.85,11.64s-4.64,10.29-7.41,13.34c-.28.31-.53.59-.78.85a10.11,10.11,0,0,0-8.05-2.07c-.11-.43-.24-.88-.37-1.36-2.24-8.08-6.89-22.09-12.82-25.16l.78-1c2.52-3.3,5.36-8.19,1.17-9.45s-4.57,4.25-4.34,8.37c0,.52.08,1,.12,1.46a6.17,6.17,0,0,0-4.38,2.14l-.65-.76c-3.4-4-9.63-10.37-11.52-5.56-1.76,4.48,3.73,10.29,7.59,13.66l.24.21C251.72,433.4,263,442,269.12,445.72l.79.48c-8.4,9.9-13.59,28.45-13.59,28.45l23.52,4.2s15.6-13.45,13.6-26.09l.16,0c15.59-3.12,19.13-19.74,16.7-29.61l.28-.11a17.74,17.74,0,0,0,7.22-5.46C322.16,411.51,313,404.67,308.54,410.62Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M308.54,410.62a17.18,17.18,0,0,0-2.28,4.29c-.14.38-.28.8-.42,1.21a3.69,3.69,0,0,0-.79-.27,11.34,11.34,0,0,0-3.57-.31c0-.46.06-1,.07-1.46.15-5.27-.47-12.62-5.5-9.51-4.82,3-1.38,8,1.73,11.21l.8.78c-2.84,2-3.38,6.73-3.85,11.64s-4.64,10.29-7.41,13.34c-.28.31-.53.59-.78.85a10.11,10.11,0,0,0-8.05-2.07c-.11-.43-.24-.88-.37-1.36-2.24-8.08-6.89-22.09-12.82-25.16l.78-1c2.52-3.3,5.36-8.19,1.17-9.45s-4.57,4.25-4.34,8.37c0,.52.08,1,.12,1.46a6.17,6.17,0,0,0-4.38,2.14l-.65-.76c-3.4-4-9.63-10.37-11.52-5.56-1.76,4.48,3.73,10.29,7.59,13.66l.24.21C251.72,433.4,263,442,269.12,445.72l.79.48c-8.4,9.9-13.59,28.45-13.59,28.45l23.52,4.2s15.6-13.45,13.6-26.09l.16,0c15.59-3.12,19.13-19.74,16.7-29.61l.28-.11a17.74,17.74,0,0,0,7.22-5.46C322.16,411.51,313,404.67,308.54,410.62Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M261.72,417.4,259,425.45s-1.53-1.08-3.46-2.78c-3.86-3.37-9.35-9.18-7.59-13.66,1.89-4.81,8.12,1.54,11.52,5.56C260.81,416.16,261.72,417.4,261.72,417.4Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M267.52,412.81a38.89,38.89,0,0,1-2.68,3.15,42.22,42.22,0,0,1-.49-4.23c-.23-4.12.21-9.59,4.34-8.37S270,409.51,267.52,412.81Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M303,414.08c-.08,2.65-.34,4.76-.34,4.76a34,34,0,0,1-3.43-3.06c-3.11-3.23-6.55-8.21-1.73-11.21C302.52,401.46,303.14,408.81,303,414.08Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M319.24,417.55A17.74,17.74,0,0,1,312,423a20.18,20.18,0,0,1-2.42.87l-3.24-4.55a33.05,33.05,0,0,1,1.34-4.42,17.18,17.18,0,0,1,2.28-4.29C314.46,404.67,323.6,411.51,319.24,417.55Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M259.44,414.57c1.37,1.59,2.28,2.83,2.28,2.83L259,425.45s-1.53-1.08-3.46-2.78a15.75,15.75,0,0,1,3.1-7.07C258.88,415.23,259.17,414.88,259.44,414.57Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M267.52,412.81a38.89,38.89,0,0,1-2.68,3.15,42.22,42.22,0,0,1-.49-4.23A5.46,5.46,0,0,1,267.52,412.81Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M281,444.77l-6.84,3s-1.49-.72-3.64-2.06c-7.19-4.43-21.64-15.56-11.95-28.68s17.77,10.42,20.95,21.92C280.53,442.4,281,444.77,281,444.77Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M299.22,415.78a5.57,5.57,0,0,1,3.77-1.7c-.08,2.65-.34,4.76-.34,4.76A34,34,0,0,1,299.22,415.78Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M312,423a20.18,20.18,0,0,1-2.42.87l-3.24-4.55a33.05,33.05,0,0,1,1.34-4.42C309.79,416.14,311.33,419.17,312,423Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M295,452.73l-1.15.2c-22.93,3.49-7.56-8.88-7.56-8.88s1-.95,2.43-2.51c2.77-3.05,6.93-8.4,7.41-13.34.72-7.43,1.55-14.4,10.32-12.35C315.1,417.86,316.75,448.38,295,452.73Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><rect x="150.3" y="458.44" width="43.81" height="11.52" fill="#474157"/><rect x="143.34" y="421" width="57.24" height="40.2" fill="#474157"/><rect x="149.88" y="458.44" width="43.81" height="11.52" opacity="0.1"/><rect x="143.16" y="421.01" width="57.24" height="40.2" opacity="0.1"/><rect x="153.18" y="458.44" width="43.81" height="11.52" fill="#474157"/><path d="M279.56,439c1,3.44,1.48,5.81,1.48,5.81l-6.84,3s-1.49-.72-3.64-2.06C273.24,442.32,276.26,439.75,279.56,439Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M295,452.73l-1.15.2c-22.93,3.49-7.56-8.88-7.56-8.88s1-.95,2.43-2.51C293,445,294.81,448.83,295,452.73Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M257.76,474.65s12.84-46,30.85-31.8-7.33,36-7.33,36Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><circle cx="163.74" cy="372.87" r="1.44" opacity="0.1"/><circle cx="163.62" cy="379.6" r="1.44" opacity="0.1"/><circle cx="205.39" cy="374.19" r="1.44" opacity="0.1"/><circle cx="171.78" cy="408.64" r="1.44" opacity="0.1"/><circle cx="202.39" cy="385.36" r="1.44" opacity="0.1"/><circle cx="187.51" cy="400.24" r="1.44" opacity="0.1"/><circle cx="168.66" cy="375.75" r="1.44" opacity="0.1"/><circle cx="201.43" cy="378.52" r="1.44" opacity="0.1"/><circle cx="196.51" cy="389.68" r="1.44" opacity="0.1"/><circle cx="181.38" cy="407.56" r="1.44" opacity="0.1"/><circle cx="178.26" cy="400.48" r="1.44" opacity="0.1"/><circle cx="170.82" cy="384.52" r="1.44" opacity="0.1"/><rect x="153.18" y="458.44" width="43.81" height="4.21" opacity="0.1"/><rect x="146.22" y="421" width="57.24" height="40.2" fill="#474157"/><circle cx="183.3" cy="414.04" r="1.44" opacity="0.1"/><circle cx="174.66" cy="415.84" r="1.44" opacity="0.1"/><path d="M412.39,626s7.13,9.33-3.29,23.41-19,26-15.56,34.76c0,0,15.74-26.16,28.55-26.52S426.48,641.74,412.39,626Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M412.39,626a11.49,11.49,0,0,1,1.46,2.92c12.49,14.68,19.15,28.38,7.14,28.73C409.8,658,396.38,678,393.16,683c.11.39.24.78.38,1.15,0,0,15.74-26.16,28.55-26.52S426.48,641.74,412.39,626Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M425.65,637.9c0,3.28-.37,5.94-.82,5.94s-.82-2.66-.82-5.94.46-1.74.91-1.74S425.65,634.61,425.65,637.9Z" transform="translate(-100.5 -51.37)" fill="#ffd037"/><path d="M430.2,641.82c-2.88,1.57-5.39,2.52-5.61,2.12s1.94-2,4.83-3.57,1.74-.43,2,0S433.09,640.25,430.2,641.82Z" transform="translate(-100.5 -51.37)" fill="#ffd037"/><path d="M374.7,626s-7.13,9.33,3.29,23.41,19,26,15.55,34.76c0,0-15.73-26.16-28.54-26.52S360.61,641.74,374.7,626Z" transform="translate(-100.5 -51.37)" fill="#2271ff"/><path d="M374.7,626a11.49,11.49,0,0,0-1.46,2.92c-12.49,14.68-19.15,28.38-7.14,28.73C377.29,658,390.71,678,393.93,683a11.1,11.1,0,0,1-.39,1.15S377.81,658,365,657.66,360.61,641.74,374.7,626Z" transform="translate(-100.5 -51.37)" opacity="0.1"/><path d="M361.44,637.9c0,3.28.37,5.94.82,5.94s.82-2.66.82-5.94-.46-1.74-.91-1.74S361.44,634.61,361.44,637.9Z" transform="translate(-100.5 -51.37)" fill="#ffd037"/><path d="M356.89,641.82c2.88,1.57,5.39,2.52,5.61,2.12s-1.94-2-4.83-3.57-1.74-.43-2,0S354,640.25,356.89,641.82Z" transform="translate(-100.5 -51.37)" fill="#ffd037"/><ellipse cx="293.04" cy="692.74" rx="74.6" ry="11.45" fill="#2271ff" opacity="0.1"/><path d="M431.94,671.61l-.36,2.91-.5,4.12-.2,1.71-.51,4.12-.21,1.72-.5,4.11L424,737.1c-.51,4.18-7.34,7.43-15.57,7.43H378.71c-8.24,0-15-3.25-15.56-7.43l-5.72-46.8-.5-4.11-.21-1.72-.51-4.12-.2-1.71-.5-4.12-.36-2.91c-.29-2.36,3.4-4.36,8.07-4.36h60.66C428.53,667.25,432.23,669.25,431.94,671.61Z" transform="translate(-100.5 -51.37)" fill="#65617d"/><polygon points="331.08 623.15 330.58 627.26 255.51 627.26 255.01 623.15 331.08 623.15" fill="#9d9cb5"/><polygon points="330.38 628.98 329.88 633.1 256.22 633.1 255.71 628.98 330.38 628.98" fill="#9d9cb5"/><polygon points="329.66 634.81 329.16 638.93 256.93 638.93 256.43 634.81 329.66 634.81" fill="#9d9cb5"/></svg>
5、
- 查看效果（不想预览，看效果的可以跳过这一步）
修改src\setupProxy.js第7行和第15行为你自己的线上网址url
![图片[3]-cloudreve魔改首页教程-安知鱼の小窝](https://www.yxy.cc/wp-content/themes/b2/Assets/fontend/images/default-img.jpg)
在项目根目录启动终端或者Git Bash Here，执行以下命令启动项目
yarn run start此时会自动打开浏览器，等待一会就可以预览看到了，注意由于是链接的线上数据库，此时操作也会影响线上数据，仅为预览！不建议这样到后台去修改配置等
- 预览后确定登录注册等没问题后，就可以进行打包上线了在项目根目录启动终端或者Git Bash Here，执行以下命令打包项目
yarn run build
等待1-2分钟项目根目录下会产生build文件夹，将该文件夹压缩成一个压缩包。
然后来到服务器上cloudreve启动文件所在目录
执行 以下命令
./cloudreve -eject随后会在同级目录生成statics文件夹
进入statics文件夹，将里面的文件全部删除，再将刚刚的压缩包上传至statics文件夹里面，然后解压
解压完成以后记得重启cloudreve进程。
![图片[3]-cloudreve魔改首页教程-安知鱼の小窝](https://www.yxy.cc/wp-content/uploads/2022/06/62a18244b3a5d.png)
在项目根目录启动终端或者Git Bash Here，执行以下命令启动项目
至此完成魔改登录注册页面。
