From 771b0984f1c59872bc45cf631730441b45dcaab3 Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Wed, 17 May 2017 14:51:49 -0400
Subject: [PATCH] Adding login box
---
app/assets/css/styles.css | 60 +++++++++++++++++++++++++++++++++++++++
app/index.html | 16 ++++++++++-
2 files changed, 75 insertions(+), 1 deletion(-)
diff --git a/app/assets/css/styles.css b/app/assets/css/styles.css
index 10a79e54..a0869f6a 100644
--- a/app/assets/css/styles.css
+++ b/app/assets/css/styles.css
@@ -33,6 +33,20 @@ html {
background-size: cover;
}
+button {
+ background-color: #a02d2a;
+ color: #ffffff;
+ border: none;
+ padding: 7px 10px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 14px;
+}
+
+button:hover {
+ box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
/*******************************************************************************
* *
* Header *
@@ -151,6 +165,52 @@ html {
width: 30%;
}
+#welcome_text {
+ font-family: 'ringbearer';
+ font-size: 16px;
+ display: block;
+ text-align: center;
+ padding-top: 10px;
+}
+
+#login_container {
+ display: inline-flex;
+ width: 100%;
+}
+
+#login_image {
+ height: 85px;
+ width: auto;
+ display: block;
+ border: 3px solid #000000;
+}
+
+#login_container_right input,
+#login_container_right label {
+ display: flex;
+ width: 100%;
+}
+
+#login_container_left {
+ padding: 10px 0 10px 10px;
+}
+
+#login_container_right {
+ padding: 10px;
+ width: 100%;
+}
+
+.login_field {
+ font-size: 12px;
+ font-family: 'Segoe UI';
+ font-weight: 500;
+}
+
+#button_login {
+ float: right;
+ margin-right: 10px;
+}
+
/*******************************************************************************
* *
* Right Body Container *
diff --git a/app/index.html b/app/index.html
index e0b44407..d4023d20 100644
--- a/app/index.html
+++ b/app/index.html
@@ -38,7 +38,21 @@
<div id="main_content">
<div id="left_pane">
-
+ <span id="welcome_text">Welcome to WesterosCraft!</span>
+ <div id="login_container">
+ <div id="login_container_left">
+ <img src="https://minotar.net/avatar/TheAventine.png" id="login_image" />
+ </div>
+ <div id="login_container_right">
+ <label class="login_field">Username</label>
+ <input type="text" name="username"></input>
+ <label class="login_field">Password</label>
+ <input type="password" name="password"></input>
+ </div>
+ </div>
+ <div id="login_button_dock">
+ <button id="button_login">Login</button>
+ </div>
</div>
<div id="right_pane">
<div class="toggle-btn-grp">