Página inicial Explorar Ajuda
Entrar
gregory
/
ElectronMCLauncher
1
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

Initial work on welcome view, upgraded dependencies.

Daniel Scalzi 7 anos atrás
pai
8ea4ae8ec2
commit
454964ce0b
7 arquivos alterados com 448 adições e 272 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. 1 1
      app/app.ejs
  2. 149 0
      app/assets/css/launcher.css
  3. BIN
      app/assets/images/cloudTrans.png
  4. BIN
      app/assets/images/cloudTrans2.png
  5. 22 0
      app/welcome.ejs
  6. 273 268
      package-lock.json
  7. 3 3
      package.json

+ 1 - 1
app/app.ejs
Ver arquivo 

@@ -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>

+ 149 - 0
app/assets/css/launcher.css
Ver arquivo 

@@ -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
Ver arquivo


BIN
app/assets/images/cloudTrans2.png
Ver arquivo


+ 22 - 0
app/welcome.ejs
Ver arquivo 

@@ -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>

Diferenças do arquivo suprimidas por serem muito extensas
+ 273 - 268
package-lock.json


+ 3 - 3
package.json
Ver arquivo 

@@ -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-builder": "^19.54.0"
 
+    "electron": "^1.8.2",
 
+    "electron-builder": "^20.0.6"
 
   },
 
   },
 
   "build": {
 
   "build": {
 
     "appId": "westeroscraftlauncher",
 
     "appId": "westeroscraftlauncher",

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff