Initial work on welcome view, upgraded dependencies.

This commit is contained in:
Daniel Scalzi 2018-02-19 20:27:42 -05:00
parent 8ea4ae8ec2
commit 454964ce0b
7 changed files with 456 additions and 280 deletions

View File

@ -18,7 +18,7 @@
<body>
<% include frame.ejs %>
<div id="main">
<% include login.ejs %>
<% include welcome.ejs %>
</div>
</body>
</html>

View File

@ -111,6 +111,155 @@ p {
background-color: #bfff76;
}
/*******************************************************************************
* *
* Welcome View (welcome.ejs) *
* *
******************************************************************************/
#welcomeContainer {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
transition: 0.25s ease;
}
#welcomeContent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50%;
top: -10%;
position: relative;
}
.cloudDiv {
position: absolute;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.cloudTop {
height: 50%;
width: 100%;
background-image: url('../images/cloudTrans.png');
animation: clouds1 80s linear infinite;
background-size: cover;
}
.cloudBottom {
height: 50%;
width: 100%;
background-image: url('../images/cloudTrans2.png');
animation: clouds2 70s linear infinite;
background-size: cover;
}
@keyframes clouds1 {
to {
background-position: 200%;
}
}
@keyframes clouds2 {
to {
background-position: 230%;
}
}
#welcomeImageSeal {
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: 10%;
margin-top: 10%;
}
#welcomeHeader {
font-family: 'Avenir Medium';
text-align: center;
color: white;
margin-bottom: 25px;
letter-spacing: 1px;
font-size: 20px;
text-shadow: white 0px 0px 0px;
}
#welcomeDescription {
font-family: 'Avenir Book';
text-align: center;
color: white;
font-size: 14px;
font-weight: 100;
text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px
}
/* Login button styles. */
#welcomeButton {
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;
transition: 0.5s ease;
margin-top: 5%;
margin-bottom: -5%;
}
#welcomeButton:disabled {
color: rgba(255, 255, 255, 0.75);
pointer-events: none;
}
#welcomeButton:hover,
#welcomeButton:focus {
text-shadow: 0px 0px 20px #fff;
outline: none;
}
#welcomeButton:active {
color: #c7c7c7;
text-shadow: 0px 0px 20px #c7c7c7;
}
#welcomeSVG {
-webkit-transform: translate3d(0, 0, 0);
overflow: visible;
transform: rotate(90deg);
margin-left: 20px;
transition: 0.25s ease;
width: 20px;
height: 20px;
}
#welcomeButton:hover #welcomeSVG,
#welcomeButton:focus #welcomeSVG {
-webkit-filter: drop-shadow(0px 0px 2px #fff);
}
#welcomeButton:active #welcomeSVG .arrowLine {
stroke: #c7c7c7;
}
#welcomeButton:active #welcomeSVG {
-webkit-filter: drop-shadow(0px 0px 2px #c7c7c7);
}
#welcomeButton:disabled #welcomeSVG .arrowLine {
stroke: rgba(255, 255, 255, 0.75);
}
#welcomeButtonContent {
display: flex;
align-items: center;
}
/*******************************************************************************
* *
* Login View (login.ejs) *

Binary file not shown.

After

Width:  |  Height:  |  Size: 882 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 882 KiB

22
app/welcome.ejs Normal file
View File

@ -0,0 +1,22 @@
<div id="welcomeContainer">
<div class="cloudDiv">
<div class="cloudTop"></div>
<div class="cloudBottom"></div>
</div>
<div id="welcomeContent">
<img id="welcomeImageSeal" src="assets/images/WesterosSealCircle.png"/>
<span id="welcomeHeader">WELCOME TO WESTEROSCRAFT</span>
<span id="welcomeDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
<button id="welcomeButton">
<div id="welcomeButtonContent">
CONTINUE
<svg id="welcomeSVG" viewBox="0 0 24.87 13.97">
<defs>
<style>.arrowLine{fill:none;stroke:#FFF;stroke-width:2px;transition: 0.25s ease;}</style>
</defs>
<polyline class="arrowLine" points="0.71 13.26 12.56 1.41 24.16 13.02"/>
</svg>
</div>
</button>
</div>
</div>

557
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -32,13 +32,13 @@
"ejs": "^2.5.7",
"ejs-electron": "^2.0.1",
"find-java-home": "^0.2.0",
"jquery": "^3.2.1",
"jquery": "^3.3.1",
"request-promise-native": "^1.0.5",
"uuid": "^3.2.1"
},
"devDependencies": {
"electron": "^1.7.11",
"electron-builder": "^19.54.0"
"electron": "^1.8.2",
"electron-builder": "^20.0.6"
},
"build": {
"appId": "westeroscraftlauncher",