From b4881f498db925b95aa1dc10ae7eee38f4aa9d50 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 14:53:23 +0200
Subject: [PATCH] Style m3rlin buttons. Close m3rlin-modal with m3rlin.js
 jquery.

---
 css/m3rlin.css         |  30 +++++++++++++++++++++++++++++-
 images/brijan-pale.gif | Bin 0 -> 5054 bytes
 images/brijan.gif      | Bin 6258 -> 5134 bytes
 index.html             |   8 ++++----
 js/m3rlin.js           |   4 ++++
 5 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 images/brijan-pale.gif

diff --git a/css/m3rlin.css b/css/m3rlin.css
index bff8aee..9115f8a 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -22,5 +22,33 @@
   max-height: 99% !important;
 }
 .modal-body {
-  background-image: url('../images/brijan.gif');
+  background-image: url('../images/brijan-pale.gif');
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+.m3rlin-options {
+  display: flex;
+  justify-content: space-around;
+
+  width: 90%;
+  margin: 20px;
+  padding: 50px;
+}
+.m3rlin-btn {
+  background-color: white;
+  border: 5px solid #2a93ad;
+  border-radius: 10px;
+  background-size: contain;
+  font-size: 1.5em;
+  /* margin: 10px; */
+  align-content: center;
+  padding: 5% 7% 5% 7%;
+  transition: 0.5s;
+}
+
+.m3rlin-btn:hover {
+  background: #2a93ad;
+  color: white;
+  border: 5px solid orange;
 }
diff --git a/images/brijan-pale.gif b/images/brijan-pale.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9604b2dc44484675059f087d15197528b179a0d0
GIT binary patch
diff --git a/images/brijan.gif b/images/brijan.gif
index 2e2d86448304086338b6d12fc5a007ccbee823cd..87390e5c9f88ea4a63ddff4aeffa719e5e9fb447 100644
GIT binary patch
diff --git a/index.html b/index.html
index c574b10..e026969 100644
--- a/index.html
+++ b/index.html
@@ -675,9 +675,9 @@ <h3 class="panel-title">Colors</h3>
         <div class="modal-content full_modal-content">
           <div class="modal-header">
             <h1 class="modal-title" id="exampleModalLabel">
-              M3rlin 3D Clay Printer
+              M3rlin 3D
             </h1>
-            <h3>Built with SLAcer.js</h3>
+            <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
             <!-- <button
               type="button"
               class="close"
@@ -691,8 +691,8 @@ <h3>Built with SLAcer.js</h3>
             <div class="m3rlin-options">
 
                 <button class="m3rlin-btn">Quick Start</button>
-                <button class="m3rlin-btn">Configure Printer</button>
-                <button class="m3rlin-btn">About M3rlin</button>
+                <button class="m3rlin-btn" id="settings">Settings</button>
+                <button class="m3rlin-btn">About</button>
 
             </div>
           </div>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index e56f1b3..0952bc7 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -4,4 +4,8 @@ $(document).ready(function() {
   //     alert('Wait - are you sure??');
   //   }
   $('#m3rlinModal').modal('toggle');
+
+  $('#settings').click(function() {
+    $('#m3rlinModal').modal('toggle');
+  });
 });
