From cbbfe84e6064e1b560124c1eb7ef3b18928635c9 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 23:36:18 +0200
Subject: [PATCH] Style buttons.

---
 css/m3rlin.css | 24 ++++++++++++++++++------
 index.html     | 27 ++++++++++++++++++++++++---
 js/m3rlin.js   |  6 ++++--
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index ac7dac4..caed729 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -1,3 +1,9 @@
+.centerer {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
 #hide {
   /* opacity: 0.3; */
   display: none;
@@ -54,23 +60,29 @@ m34 {
 .modal-footer {
   /* display: flex; */
 }
-#m3rlin-continue {
+#m3rlin-continue,
+#quick {
   background: rgb(171, 250, 171);
   transition: 0.3s;
 }
-.m3rlin-btn:hover,
-#m3rlin-continue:hover {
+.m3rlin-btn:hover {
   background: #696969;
   color: white;
   border: 5px solid orange;
 }
+#m3rlin-continue:hover,
+#quick:hover {
+  background: #696969;
+
+  color: rgb(171, 250, 171);
+}
 
 #quick-confirm {
   /* display: flex; */
   display: none;
 }
 .m3rlin-quickstart-btns {
-  display: none;
-  align-content: space-between;
-  justify-content: center;
+  /* display: none; */
+  /* align-content: space-between;
+  justify-content: center; */
 }
diff --git a/index.html b/index.html
index 1446161..7dd11ee 100644
--- a/index.html
+++ b/index.html
@@ -696,6 +696,27 @@ <h4>
         </div>
             <div class="m3rlin-options">
             
+
+                    <div id="greeter">
+                            <div class="col">
+                                <div class="row">
+                                    <h2 class="centered">
+                                      Welcome to M3rlin Prototype
+                                    </h2>
+                                </div>
+                                <div class="row">
+                                    <h4 class="padded centered">
+Select one of the options below
+                                    </h4>
+                                    <h4 class="centered">
+                               Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
+                                    </h4>
+                                    
+                                  </div>
+                              </div>
+                        </div>
+
+
                     <div id="quick-confirm">
                         <div class="col">
                             <div class="row">
@@ -714,18 +735,18 @@ <h4 class="centered">
                                 
                               </div>
                           </div>
-                        </div>
+                    </div>
               
             </div>
             <div class="modal-footer">
 
                     <div class="row">
-                            <div class="m3rlin-main-menu-btns">
+                            <div class=" centerer m3rlin-main-menu-btns">
                                     <button class="m3rlin-btn" id="quick">Quick Start</button>
                                     <button class="m3rlin-btn" id="settings">Settings</button>
                                     <button class="m3rlin-btn">About</button>
                                 </div>
-                            <div class="m3rlin-quickstart-btns">
+                            <div class="centerer m3rlin-quickstart-btns">
                                 <button class="m3rlin-btn" id="m3rlin-back">Back</button>
                                 <button class="m3rlin-btn" id="m3rlin-continue">Continue</button>
                                 <button class="m3rlin-btn">Help</button>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 4aacdc4..717df43 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -4,7 +4,7 @@ $(document).ready(function() {
   //     alert('Wait - are you sure??');
   //   }
   $('#m3rlinModal').modal('toggle');
-
+  $('.m3rlin-quickstart-btns').css({ display: 'none' });
   $('#settings').click(function() {
     $('#m3rlinModal').modal('toggle');
     // $('#hide').css({ display: 'block' });
@@ -17,12 +17,14 @@ $(document).ready(function() {
     $('.m3rlin-main-menu-btns').css({ display: 'none' });
     $('.m3rlin-quickstart-btns').fadeIn('slow');
     $('.modal-footer').fadeIn('slow');
+    $('#greeter').css({ display: 'none' });
   });
 
   $('#m3rlin-back').click(function() {
     $('#quick-confirm').css({ display: 'none' });
-    $('.m3rlin-quickstart-btns').css({ display: 'none' });
 
+    $('#greeter').fadeIn('slow');
+    $('.m3rlin-quickstart-btns').css({ display: 'none' });
     $('.m3rlin-main-menu-btns').fadeIn('slow');
   });
 });
