Initial work on login UI. Will continue to experiment with the layout and tweak colors and sizing.
This commit is contained in:
Daniel Scalzi
parent
965b56c6bd
commit
e555dd747f
24
app/app.ejs
Normal file
24
app/app.ejs
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Westeroscraft Launcher</title>
|
||||||
|
<script src="./assets/js/uicore.js"></script>
|
||||||
|
<script src="./assets/js/actionbinder.js"></script>
|
||||||
|
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: url('assets/images/backgrounds/<%=0%>.jpg') no-repeat center center fixed;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
#main {
|
||||||
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<% include frame.ejs %>
|
||||||
|
<div id="main">
|
||||||
|
<% include login.ejs %>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -9,6 +9,11 @@
|
|||||||
src: url('../fonts/Avenir.ttc');
|
src: url('../fonts/Avenir.ttc');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Avenir Medium';
|
||||||
|
src: url('../fonts/Avenir-Medium.otf');
|
||||||
|
}
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
* *
|
* *
|
||||||
* Element Styles *
|
* Element Styles *
|
||||||
@ -92,6 +97,227 @@ p {
|
|||||||
background-color: #D6FFA6;
|
background-color: #D6FFA6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*******************************************************************************
|
||||||
|
* *
|
||||||
|
* Login View (login.ejs) *
|
||||||
|
* *
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
#loginContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginContent {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginForm {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginImageSeal {
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid #cad7e1;
|
||||||
|
background: rgba(1, 2, 1, 0.5);
|
||||||
|
height: 125px;
|
||||||
|
width: 125px;
|
||||||
|
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginSpan {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginSpanDim {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #848484;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginForm a {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 12px;
|
||||||
|
color: #848484;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginSVG {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
#labelPassword {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginField {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
background: none;
|
||||||
|
border-width: 1.5px 0px 0px 0px;
|
||||||
|
border-style: solid;
|
||||||
|
width: 250px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-color: #fff;
|
||||||
|
color: rgb(197, 197, 197);
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 7.5px;
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginField:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginField::-webkit-input-placeholder {
|
||||||
|
color: rgb(197, 197, 197);
|
||||||
|
font-size: 10px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.loginField:focus::-webkit-input-placeholder {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginSubheader {
|
||||||
|
font-family: 'Avenir Medium';
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginOptions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginRememberText {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#checkmarkContainer input {
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Customize the label (the container) */
|
||||||
|
#checkmarkContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 22px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide the browser's default checkbox */
|
||||||
|
#checkmarkContainer input {
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create a custom checkbox */
|
||||||
|
.loginCheckmark {
|
||||||
|
position: relative;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px;
|
||||||
|
border: 1px solid #848484;
|
||||||
|
border-radius: 1px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* On mouse-over, add a grey background color */
|
||||||
|
#checkmarkContainer:hover input ~ .loginCheckmark {
|
||||||
|
border-color: #848484;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When the checkbox is checked, add a blue background */
|
||||||
|
#checkmarkContainer input:checked ~ .loginCheckmark {
|
||||||
|
border-color: #848484;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Create the checkmark/indicator (hidden when not checked) */
|
||||||
|
.loginCheckmark:after {
|
||||||
|
content: "";
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the checkmark when checked */
|
||||||
|
#checkmarkContainer input:checked ~ .loginCheckmark:after {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the checkmark/indicator */
|
||||||
|
#checkmarkContainer .loginCheckmark:after {
|
||||||
|
position: absolute;
|
||||||
|
left: 3.5px;
|
||||||
|
top: 0.5px;
|
||||||
|
width: 2px;
|
||||||
|
height: 6px;
|
||||||
|
border: solid #848484;
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginDisclaimer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginDisclaimerText {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 7px;
|
||||||
|
color: #848484;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginRegisterSpan {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginButton {
|
||||||
|
background: none;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
letter-spacing: 2px;
|
||||||
|
border: none;
|
||||||
|
padding: 15px 5px;
|
||||||
|
margin: 10px 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
right: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginButton img {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
* *
|
* *
|
||||||
* Login View (login.ejs) *
|
* Login View (login.ejs) *
|
||||||
@ -293,7 +519,6 @@ p {
|
|||||||
background: rgba(1, 2, 1, 0.5);
|
background: rgba(1, 2, 1, 0.5);
|
||||||
height: 70px;
|
height: 70px;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
width: auto;
|
|
||||||
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
BIN
app/assets/fonts/Avenir-Medium.otf
Normal file
BIN
app/assets/fonts/Avenir-Medium.otf
Normal file
Binary file not shown.
12
app/assets/images/icons/lock.svg
Normal file
12
app/assets/images/icons/lock.svg
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.36 137.43">
|
||||||
|
<defs>
|
||||||
|
<style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#231f20;}</style>
|
||||||
|
<clipPath id="clip-path">
|
||||||
|
<rect class="cls-1" x="44.02" y="34.21" width="51.96" height="68.48"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<title>Lock</title>
|
||||||
|
<g class="cls-2">
|
||||||
|
<path class="cls-3" d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 756 B |
10
app/assets/images/icons/profile.svg
Normal file
10
app/assets/images/icons/profile.svg
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.36 137.43">
|
||||||
|
<defs>
|
||||||
|
<style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}</style>
|
||||||
|
<clipPath id="clip-path"><rect class="cls-1" x="45.51" y="44.33" width="55.14" height="59.33"/></clipPath>
|
||||||
|
</defs>
|
||||||
|
<title>Profile</title>
|
||||||
|
<g class="cls-2">
|
||||||
|
<path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 602 B |
38
app/login.ejs
Normal file
38
app/login.ejs
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<div id="loginContainer">
|
||||||
|
<div id="loginContent">
|
||||||
|
<form id='loginForm'>
|
||||||
|
<img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
|
||||||
|
<span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
|
||||||
|
<svg id="profileSVG" class="loginSVG" viewBox="40 37 65.36 61.43" height="20px" width="20px">
|
||||||
|
<g>
|
||||||
|
<path d="M86.77,58.12A13.79,13.79,0,1,0,73,71.91,13.79,13.79,0,0,0,86.77,58.12M97,103.67a3.41,3.41,0,0,0,3.39-3.84,27.57,27.57,0,0,0-54.61,0,3.41,3.41,0,0,0,3.39,3.84Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<input id="loginUsername" class="loginField" type="text" placeholder="EMAIL"/>
|
||||||
|
<svg id="lockSVG" class="loginSVG" viewBox="40 32 60.36 70.43" height="20px" width="20px">
|
||||||
|
<g>
|
||||||
|
<path d="M86.16,54a16.38,16.38,0,1,0-32,0H44V102.7H96V54Zm-25.9-3.39a9.89,9.89,0,1,1,19.77,0A9.78,9.78,0,0,1,79.39,54H60.89A9.78,9.78,0,0,1,60.26,50.59ZM70,96.2a6.5,6.5,0,0,1-6.5-6.5,6.39,6.39,0,0,1,3.1-5.4V67h6.5V84.11a6.42,6.42,0,0,1,3.39,5.6A6.5,6.5,0,0,1,70,96.2Z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<input id="loginPassword" class="loginField" type="password" placeholder="PASSWORD"/>
|
||||||
|
<div id="loginOptions">
|
||||||
|
<span class="loginSpanDim">
|
||||||
|
<a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">forgot password?</a>
|
||||||
|
</span>
|
||||||
|
<label id="checkmarkContainer">
|
||||||
|
<span id="loginRememberText" class="loginSpanDim">remember me?</span>
|
||||||
|
<input id="loginRememberOption" type="checkbox">
|
||||||
|
<span class="loginCheckmark"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button id="loginButton" type="submit">LOGIN <img src="assets/images/icons/arrow.svg" id="menu_img"/></button>
|
||||||
|
<div id="loginDisclaimer">
|
||||||
|
<span class="loginSpanDim" id="loginRegisterSpan">
|
||||||
|
<a href="https://minecraft.net/en-us/store/minecraft/">Need an Account?</a>
|
||||||
|
</span>
|
||||||
|
<p class="loginDisclaimerText">Your password is sent directly to mojang and never stored.</p>
|
||||||
|
<p class="loginDisclaimerText">WesterosCraft is not affiliated with Mojang AB.</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
30
app/loginOLD.ejs
Normal file
30
app/loginOLD.ejs
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!-- Temp for tests -->
|
||||||
|
<% include frame.ejs %>
|
||||||
|
<script src="./assets/js/uicore.js"></script>
|
||||||
|
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
||||||
|
<!-- end temp -->
|
||||||
|
<div id="login_main">
|
||||||
|
<div id="login_filter"></div>
|
||||||
|
<div id="login_container">
|
||||||
|
<div id="login_content">
|
||||||
|
<div id="login_header" class="login_section">
|
||||||
|
<img id="login_image_seal" src="assets/images/WesterosSealCircle.png"/>
|
||||||
|
<span id="login_header_text">MEMBER LOGIN</span>
|
||||||
|
</div>
|
||||||
|
<div id="login_information" class="login_section">
|
||||||
|
<input type="text" placeholder="EMAIL/USERNAME"/>
|
||||||
|
<input type="password" placeholder="PASSWORD"/>
|
||||||
|
<div id="login_links">
|
||||||
|
<a href="https://help.mojang.com/customer/en/portal/articles/329524-change-or-forgot-password">Forgot Password?</a>
|
||||||
|
<a href="https://minecraft.net/en-us/store/minecraft/">Need an account?</a>
|
||||||
|
</div>
|
||||||
|
<button id="login_button">LOGIN</button>
|
||||||
|
</div>
|
||||||
|
<div id="login_footer" class="login_section">
|
||||||
|
<p id="login_disclaimer">
|
||||||
|
Disclamer text...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
2
index.js
2
index.js
@ -22,7 +22,7 @@ function createWindow() {
|
|||||||
ejse.data('bkid', Math.floor((Math.random() * fs.readdirSync(path.join(__dirname, 'app', 'assets', 'images', 'backgrounds')).length)))
|
ejse.data('bkid', Math.floor((Math.random() * fs.readdirSync(path.join(__dirname, 'app', 'assets', 'images', 'backgrounds')).length)))
|
||||||
|
|
||||||
win.loadURL(url.format({
|
win.loadURL(url.format({
|
||||||
pathname: path.join(__dirname, 'app', 'index.ejs'),
|
pathname: path.join(__dirname, 'app', 'app.ejs'),
|
||||||
protocol: 'file:',
|
protocol: 'file:',
|
||||||
slashes: true
|
slashes: true
|
||||||
}))
|
}))
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user