Home Explore Help
Sign In
gregory
/
ElectronMCLauncher
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Initial work on login UI. Will continue to experiment with the layout and tweak colors and sizing.

Daniel Scalzi 7 years ago
parent
965b56c6bd
commit
e555dd747f
8 changed files with 341 additions and 2 deletions
Unified View Show Diff Stats
  1. 24 0
      app/app.ejs
  2. 226 1
      app/assets/css/launcher.css
  3. BIN
      app/assets/fonts/Avenir-Medium.otf
  4. 12 0
      app/assets/images/icons/lock.svg
  5. 10 0
      app/assets/images/icons/profile.svg
  6. 38 0
      app/login.ejs
  7. 30 0
      app/loginOLD.ejs
  8. 1 1
      index.js

+ 24 - 0
app/app.ejs
View 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>

+ 226 - 1
app/assets/css/launcher.css
View File 

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


+ 12 - 0
app/assets/images/icons/lock.svg
View 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>

+ 10 - 0
app/assets/images/icons/profile.svg
View 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>

+ 38 - 0
app/login.ejs
View 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 - 0
app/loginOLD.ejs
View 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>

+ 1 - 1
index.js
View File 

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