Show quick-start options on quick start click.

lautr3k · Apr 7, 2019 · afc3eb3ff314430bf6580784d8eb5687b80ea5cf · afc3eb3
1 parent 5f7dc48
commit afc3eb3ff314430bf6580784d8eb5687b80ea5cf
Unified Split

Showing with 76 additions and 28 deletions.

+28 −10 css/m3rlin.css

+46 −17 index.html

+2 −1 js/m3rlin.js
diff --git a/css/m3rlin.css b/css/m3rlin.css
@@ -25,35 +25,53 @@
 .modal-body {
   background-image: url('../images/brijan-pale.gif');
   display: flex;
+  /* display: none; */
   align-content: center;
   justify-content: center;
 }
-.m3rlin-options {
+.m3rlin-options,
+.m3rlin-main-menu-btns {
+  /* display: none; */
+  background-image: url('../images/brijan-pale.gif');
   display: flex;
   justify-content: space-around;
 
-  width: 90%;
-  margin: 20px;
+  width: 100%;
+  margin: 0px;
   padding: 50px;
 }
 .m3rlin-btn {
   background-color: white;
-  border: 5px solid #2a93ad;
+  border: 5px solid #696969;
   border-radius: 10px;
   background-size: contain;
   font-size: 1.5em;
-  /* margin: 10px; */
+  margin: 10px;
   align-content: center;
-  padding: 5% 7% 5% 7%;
-  transition: 0.5s;
+  padding: 3% 7% 3% 7%;
+  transition: 0.3s;
 }
-
-.m3rlin-btn:hover {
-  background: #2a93ad;
+.modal-footer {
+  display: none;
+  background-image: url('../images/brijan-pale.gif');
+}
+#m3rlin-continue {
+  background: rgb(171, 250, 171);
+  transition: 0.3s;
+}
+.m3rlin-btn:hover,
+#m3rlin-continue:hover {
+  background: #696969;
   color: white;
   border: 5px solid orange;
 }
 
 #quick-confirm {
+  /* display: flex; */
   display: none;
 }
+.m3rlin-quickstart-btns {
+  display: flex;
+  align-content: space-between;
+  justify-content: center;
+}
diff --git a/index.html b/index.html
@@ -677,7 +677,10 @@ <h3 class="panel-title">Colors</h3>
             <h1 class="modal-title" id="exampleModalLabel">
               M3rlin 3D
             </h1>
-            <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
+            <h4>
+              Prototyped with
+              <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a>
+            </h4>
             <!-- <button
               type="button"
               class="close"
@@ -688,25 +691,51 @@ <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
             </button> -->
           </div>
           <div class="modal-body">
-              <div id="quick-confirm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, sapiente?</div>
-            <div class="m3rlin-options">
-
-                <button class="m3rlin-btn" id="quick">Quick Start</button>
-                <button class="m3rlin-btn" id="settings">Settings</button>
-                <button class="m3rlin-btn">About</button>
-
+            <div id="quick-confirm">
+              <div class="col">
+                <div class="row">
+                  <h2 class="centered">
+                    Quick Start
+                  </h2>
+                </div>
+                <div class="row">
+                  <h4 class="padded centered">
+                    To print test image using default settings:
+                  </h4>
+                  <h4 class="centered">
+                    Please ensure printer is connected and ready to print; then press Continue.
+                  </h4>
+
+                </div>
             </div>
           </div>
-          <!-- <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-secondary"
-              data-dismiss="modal"
-            >
-              Close
+        </div>
+            <div class="m3rlin-options">
+                <div class="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>
+            <div class="modal-footer">
+
+                    <div class="row">
+<div class="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>
+                          </div>
+                        </div>
+                <!-- <button
+                type="button"
+                class="btn btn-secondary"
+                data-dismiss="modal"
+                >
+                Close
             </button>
-            <button type="button" class="btn btn-primary">Save changes</button>
-          </div> -->
+            <button type="button" class="btn btn-primary">Save changes</button> -->
+        </div>
+    </div>
         </div>
       </div>
     </div>

diff --git a/js/m3rlin.js b/js/m3rlin.js
@@ -13,6 +13,7 @@ $(document).ready(function() {
 
   $('#quick').click(function() {
     $('#quick-confirm').fadeIn('slow');
-    $('.m3rlin-options').css({ display: 'none' });
+    $('.modal-footer').fadeIn('slow');
+    $('.m3rlin-main-menu-btns').css({ display: 'none' });
   });
 });