Initial work on welcome view, upgraded dependencies.
Daniel Scalzi
parent
8ea4ae8ec2
commit
454964ce0b
|
|
@ -18,7 +18,7 @@
|
|||
<body>
|
||||
<% include frame.ejs %>
|
||||
<div id="main">
|
||||
<% include login.ejs %>
|
||||
<% include welcome.ejs %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 |
|
|
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue