mirror of
https://github.com/dscalzi/HeliosLauncher.git
synced 2024-12-22 11:42:14 -08:00
Initial work on welcome view, upgraded dependencies.
This commit is contained in:
Daniel Scalzi
parent
8ea4ae8ec2
commit
454964ce0b
@ -18,7 +18,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<% include frame.ejs %>
|
<% include frame.ejs %>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<% include login.ejs %>
|
<% include welcome.ejs %>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -111,6 +111,155 @@ p {
|
|||||||
background-color: #bfff76;
|
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) *
|
* Login View (login.ejs) *
|
||||||
|
|||||||
BIN
app/assets/images/cloudTrans.png
Normal file
BIN
app/assets/images/cloudTrans.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 882 KiB |
BIN
app/assets/images/cloudTrans2.png
Normal file
BIN
app/assets/images/cloudTrans2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 882 KiB |
22
app/welcome.ejs
Normal file
22
app/welcome.ejs
Normal 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
557
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -32,13 +32,13 @@
|
|||||||
"ejs": "^2.5.7",
|
"ejs": "^2.5.7",
|
||||||
"ejs-electron": "^2.0.1",
|
"ejs-electron": "^2.0.1",
|
||||||
"find-java-home": "^0.2.0",
|
"find-java-home": "^0.2.0",
|
||||||
"jquery": "^3.2.1",
|
"jquery": "^3.3.1",
|
||||||
"request-promise-native": "^1.0.5",
|
"request-promise-native": "^1.0.5",
|
||||||
"uuid": "^3.2.1"
|
"uuid": "^3.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"electron": "^1.7.11",
|
"electron": "^1.8.2",
|
||||||
"electron-builder": "^19.54.0"
|
"electron-builder": "^20.0.6"
|
||||||
},
|
},
|
||||||
"build": {
|
"build": {
|
||||||
"appId": "westeroscraftlauncher",
|
"appId": "westeroscraftlauncher",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user