Modifications to welcome view, smoothing welcome transitions.

Disabled clouds on welcome.ejs. Added some welcome text to replace the lorem ipsum. The alignment was also changed from center to justify, to make the UI look sharper. Transitions between each view was changed from 250ms to 500ms.

Removed some testing code from login.ejs.

app/assets/css/launcher.css

@@ -137,6 +137,7 @@ p {
     position: relative;
 }
 
+/*
 .cloudDiv {
     position: absolute;
     height: 100%;
@@ -171,6 +172,7 @@ p {
         background-position: 230%;
     }
 }
+*/
 
 #welcomeImageSeal {
     border-radius: 50%;
@@ -179,7 +181,7 @@ p {
     height: 125px;
     width: 125px;
     box-shadow: 0px 0px 10px 0px rgb(0, 0, 0);
-    margin-bottom: 10%;
+    margin-bottom: 5%;
     margin-top: 10%;
 }
 
@@ -194,6 +196,15 @@ p {
 }
 
 #welcomeDescription {
+    font-family: 'Avenir Book';
+    text-align: justify;
+    color: white;
+    font-size: 14px;
+    font-weight: 100;
+    text-shadow: rgba(255, 255, 255, 0.75) 0px 0px 20px
+}
+
+#welcomeDescCTA {
     font-family: 'Avenir Book';
     text-align: center;
     color: white;

app/login.ejs

@@ -221,7 +221,12 @@
                 loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS')
                 $('.circle-loader').toggleClass('load-complete')
                 $('.checkmark').toggle()
-                console.log(value)
+                //console.log(value)
+                setTimeout(() => {
+                    $('#loginContainer').fadeOut(500, () => {
+                        $('#landingContainer').fadeIn(500)
+                    })
+                }, 1000)
             }).catch((err) => {
                 loginLoading(false)
                 const errF = resolveError(err)
@@ -234,13 +239,6 @@
                 console.log(err)
             })
 
-            // Temp for debugging, use procedure with real code.
-            setTimeout(() => {
-                loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS')
-                $('.circle-loader').toggleClass('load-complete')
-                $('.checkmark').toggle()
-            }, 2500)
-
         })
     </script>
     <!-- Will reuse this down the line, then it will be removed from this file. -->

app/welcome.ejs

@@ -1,12 +1,14 @@
 <div id="welcomeContainer" style="display: none;">
-    <div class="cloudDiv">
+    <!--<div class="cloudDiv">
         <div class="cloudTop"></div>
         <div class="cloudBottom"></div>
-    </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>
+        <span id="welcomeDescription">Our mission is to recreate the universe imagined by author George RR Martin in his book series, A Song of Ice and Fire, as accurately and precisely as possible within Minecraft. The world we are creating is yours to explore. Journey from Sunspear to the Last Hearth, and if you aren't afraid, beyond the wall. Best not delay. House Stark is always right eventually, winter is coming.</span>
+        <br>
+        <span id="welcomeDescCTA">You are just a few clicks away from Westeros.</span>
         <button id="welcomeButton">
             <div id="welcomeButtonContent">
                 CONTINUE
@@ -25,8 +27,8 @@
         const welcomeButton = document.getElementById('welcomeButton')
 
         welcomeButton.addEventListener('click', e => {
-            $('#welcomeContainer').fadeOut(250, () => {
-                $('#loginContainer').fadeIn(250)
+            $('#welcomeContainer').fadeOut(500, () => {
+                $('#loginContainer').fadeIn(500)
             })
         })