aly/servatrice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

login page created (#4444)

Browse source 
login page html and css created with Seavor
This commit is contained in:
Aren Kasner 2021-10-25 20:36:20 -07:00 committed by GitHub
parent d684a9c5fc
commit ed32e72dc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 106 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
webclient/src/containers/Login/Login.css
View file

@ -49,13 +49,103 @@
}
.login-content__description {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 24px;
text-transform: uppercase;
overflow: hidden;
}
.login-content__description-wrapper {
position: relative;
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login-content__description-image {
width: 100%;
}
.login-content__description-placeholder {
width: 100%;
height: 207px;
border: 1px solid;
}
.login-content__description-subtitle1 {
margin: 40px 0 20px;
font-size: 28px;
font-weight: bold;
}
.login-content__description-subtitle2 {
font-size: 14px;
}
.login-content__description-square {
position: absolute;
border: 1px solid;
opacity: .1;
}
.login-content__description-bar {
position: absolute;
opacity: .2;
background-color: #401C7F;
border-radius: 8px;
}
.login-content__description-square.topLeft {
transform: rotate(27deg);
top: 38px;
left: 64px;
height: 134px;
width: 100px;
border-radius: 8px;
}
.login-content__description-square.topRight {
transform: rotate(10deg);
top: 74px;
right: 62px;
height: 50px;
width: 66px;
border-radius: 20px;
}
.login-content__description-square.bottomLeft {
transform: rotate(120deg);
bottom: 61px;
left: 66px;
height: 50px;
width: 66px;
border-radius: 20px;
}
.login-content__description-square.bottomRight {
transform: rotate(-24deg);
bottom: 54px;
right: 0;
height: 88px;
width: 66px;
border-radius: 8px;
}
.login-content__description-bar.bottomBar {
transform: rotate(30deg);
bottom: -4px;
left: -29px;
height: 50px;
width: 222px;
}
.login-content__description-bar.topBar {
transform: rotate(-330deg);
top: 10px;
right: -49px;
height: 50px;
width: 222px;
}
.login-footer {
margin-top: 30px;
}

17
webclient/src/containers/Login/Login.tsx
View file

@ -14,6 +14,7 @@ import { /* ServerDispatch, */ ServerSelectors } from "store";
import "./Login.css";
import logo from "images/logo.png";
/*import loginGraphic from "images/login-graphic.png"*/
const Login = ({ state, description }: LoginProps) => {
const isConnected = AuthenticationService.isConnected(state);
@ -61,9 +62,21 @@ const Login = ({ state, description }: LoginProps) => {
</Typography>
</div>
</div>
<ThemedLoginDescription className="login-content__description">
description
<div className="login-content__description-graphics">
<div className="topLeft login-content__description-square" />
<div className="topRight login-content__description-square" />
<div className="bottomRight login-content__description-square" />
<div className="bottomLeft login-content__description-square" />
<div className="topBar login-content__description-bar" />
<div className="bottomBar login-content__description-bar" />
</div>
<div className="login-content__description-wrapper">
{ /*<img src={loginGraphic} className="login-content__description-image"/>*/}
<div className="login-content__description-placeholder"/>
<p className="login-content__description-subtitle1">Play multiplayer card games online.</p>
<p className="login-content__description-subtitle2">Cross-platform virtual tabletop for multiplayer card games. Forever free.</p>
</div>
</ThemedLoginDescription>
</ThemedLoginContent>
</div>