Init Merlin build of SLAcer.js with m3rlin.js jquery test file.

Add a m3rlin.css which sets all original SLAcer index elements to dis…
Update README.md. Add 3 m3rlin-btn files to modal-body.
lautr3k
Unified Split

Showing with 1,738 additions and 1,120 deletions.

+10 −0 README.md

+91 −0 css/m3rlin.css

+79 −80 css/main.css

BIN favicon.ico

BIN images/brijan-pale.gif

BIN images/brijan.gif

+768 −335 index.html

+42 −0 js/m3rlin.js

+748 −705 js/main.js
diff --git a/README.md b/README.md
@@ -1,7 +1,17 @@
 # SLAcer.js ([demo](http://lautr3k.github.io/SLAcer.js/))
+
 ![Screenshot](/screenshot.png?raw=true)
 
+This project is a fork of SLAcer.js adapted for the M3rlin project.
+
+Checkout the original SlAcer.js at
+
+Additional resources:
+brijan.gif : http://thepatternlibrary.com/
+favicon.ico : https://game-icons.net/1x1/delapouite/porcelain-vase.html
+
 # Main features
+
 - Browse or drag/drop STL file.
 - Mesh information: size, volume, cost, etc...
 - Mesh transformation: scale, rotate, translate, mirror.

diff --git a/css/m3rlin.css b/css/m3rlin.css
@@ -0,0 +1,91 @@
+.centerer {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+#hide {
+  display: none;
+  transition: 0.5s;
+}
+.modal-header {
+  color: rgb(105, 105, 105);
+  text-align: center;
+}
+.full_modal-dialog {
+  width: 98% !important;
+  height: 92% !important;
+  min-width: 98% !important;
+  min-height: 92% !important;
+  max-width: 98% !important;
+  max-height: 92% !important;
+  padding: 0 !important;
+}
+
+.full_modal-content {
+  height: 99% !important;
+  min-height: 99% !important;
+  max-height: 99% !important;
+}
+.modal-body {
+  background-image: url('../images/brijan-pale.gif');
+  /* display: flex; */
+  display: none;
+  align-content: center;
+  justify-content: center;
+}
+.m3rlin-options,
+m34 {
+  /* display: none; */
+  background-image: url('../images/brijan-pale.gif');
+  display: flex;
+  justify-content: space-around;
+
+  width: 100%;
+  margin: 0px;
+  padding: 50px;
+}
+.m3rlin-btn {
+  background-color: white;
+  border: 5px solid #696969;
+  border-radius: 10px;
+  background-size: contain;
+  font-size: 1.5em;
+  margin: 10px;
+  align-content: center;
+  padding: 3% 7% 3% 7%;
+  transition: 0.3s;
+}
+.modal-footer {
+  /* display: flex; */
+}
+#m3rlin-continue,
+#quick {
+  background: rgb(171, 250, 171);
+  transition: 0.3s;
+}
+.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; */
+}
+.caution {
+  border: 4px solid orange;
+  background-color: orange;
+}
diff --git a/css/main.css b/css/main.css
@@ -1,153 +1,152 @@
 /* Navbar */
 .navbar {
-    margin: 0;
+  margin: 0;
 }
 
-
 /* Sidebar */
 #sidebar {
-    position: fixed;
+  position: fixed;
-    top: 51px;
+  top: 51px;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    width: 300px;
+  width: 300px;
-    padding: 10px;
+  padding: 10px;
-    overflow-y: auto;
+  overflow-y: auto;
-    overflow-x: hidden;
+  overflow-x: hidden;
-    background-color: #f5f5f5;
+  background-color: #f5f5f5;
-    border-right: 1px solid #eeeeee;
+  border-right: 1px solid #eeeeee;
 }
 
 #sidebar .panel-placeholder {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
-    border-radius: 4px;
+  border-radius: 4px;
-    background-color: #eeeeee;
+  background-color: #eeeeee;
-    border: 1px dashed #cccccc;
+  border: 1px dashed #cccccc;
 }
 
 #sidebar .panel-body {
-    padding-bottom: 0;
+  padding-bottom: 0;
 }
 
 #sidebar .info {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 #sidebar .info-label {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 #sidebar .info,
 #sidebar .form-group {
-    min-height: 20px;
+  min-height: 20px;
 }
 
 #sidebar small {
-    color: #888888;
+  color: #888888;
-    font-weight: normal;
+  font-weight: normal;
 }
 
 #sidebar label,
 #sidebar .info-label {
-    width: 60%;
+  width: 60%;
-    float: left;
+  float: left;
 }
 
 #sidebar .info-value,
 #sidebar .form-control {
-    width: 40%;
+  width: 40%;
-    float: left;
+  float: left;
 }
 
 /* Main */
 #main {
-    position: fixed;
+  position: fixed;
-    left: 301px;
+  left: 301px;
-    right: 39px;
+  right: 39px;
-    top: 51px;
+  top: 51px;
-    bottom: 0;
+  bottom: 0;
 }
 
 /* Slider */
 #slider {
-    position: fixed;
+  position: fixed;
-    padding: 10px;
+  padding: 10px;
-    width: 60px;
+  width: 60px;
-    top: 51px;
+  top: 51px;
-    bottom: 0;
+  bottom: 0;
-    right: 0;
+  right: 0;
-    background-color: #f5f5f5;
+  background-color: #f5f5f5;
-    border-left: 1px solid #eeeeee;
+  border-left: 1px solid #eeeeee;
 }
 
 #slider .min,
 #slider .max {
-    padding: 0;
+  padding: 0;
-    height: 20px;
+  height: 20px;
-    display: block;
+  display: block;
-    text-align: center;
+  text-align: center;
 }
 
 #slider .max {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 #slider .min {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 #slider .slider {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 #slider .slider-handle {
-    border: 1px #cccccc solid;
+  border: 1px #cccccc solid;
-    background-color: #ffffff;
+  background-color: #ffffff;
-    background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+  background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
-    background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
-    background-image: linear-gradient(to bottom,#eeeeee 0%, #cccccc 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
-    background-repeat: repeat-x;
+  background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
-    filter: none;
+  filter: none;
 }
 
 #slider .slider-track {
-    border: 1px solid #eeeeee;
+  border: 1px solid #eeeeee;
 }
 
 #slider .slider-track,
 #slider .slider-selection {
-    background-color: #ffffff;
+  background-color: #ffffff;
-    background-image: none;
+  background-image: none;
-    filter: none;
+  filter: none;
 }
 
 /* Alert */
 #alert {
-    position: absolute;
+  position: absolute;
-    top: 61px;
+  top: 61px;
-    left: 311px;
+  left: 311px;
-    right: 71px;
+  right: 71px;
 }
 
 /* Button file */
 .btn-file {
-    position: relative;
+  position: relative;
-    overflow: hidden;
+  overflow: hidden;
-}
+}
-
+
-.btn-file input[type=file] {
+.btn-file input[type='file'] {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    right: 0;
+  right: 0;
-    min-width: 100%;
+  min-width: 100%;
-    min-height: 100%;
+  min-height: 100%;
-    font-size: 100px;
+  font-size: 100px;
-    text-align: right;
+  text-align: right;
-    filter: alpha(opacity=0);
+  filter: alpha(opacity=0);
-    opacity: 0;
+  opacity: 0;
-    outline: none;
+  outline: none;
-    background: white;
+  background: white;
-    cursor: inherit;
+  cursor: inherit;
-    display: block;
+  display: block;
 }
diff --git a/favicon.ico b/favicon.ico
diff --git a/images/brijan-pale.gif b/images/brijan-pale.gif
diff --git a/images/brijan.gif b/images/brijan.gif
diff --git a/index.html b/index.html
diff --git a/js/m3rlin.js b/js/m3rlin.js
@@ -0,0 +1,42 @@
+backToMain = () => {
+  $('#quick-confirm').css({ display: 'none' });
+
+  $('#greeter').fadeIn('slow');
+  $('.m3rlin-quickstart-btns').css({ display: 'none' });
+  $('.m3rlin-main-menu-btns').fadeIn('slow');
+};
+
+$(document).ready(function() {
+  //   alert('hi from m3rlin.js');
+  //   if ($slicerLayerHeight.val() > 100) {
+  //     alert('Wait - are you sure??');
+  //   }
+  $('#m3rlinModal').modal('toggle');
+  $('.m3rlin-quickstart-btns').css({ display: 'none' });
+  $('#settings').click(function() {
+    $('#m3rlinModal').modal('toggle');
+    $('#hide').css({ display: 'block' });
+    $('#hide').fadeIn('slow');
+  });
+
+  $('#quick').click(function() {
+    $('#quick-confirm').fadeIn('slow');
+    $('.m3rlin-greeter').css({ display: 'none' });
+    $('.m3rlin-main-menu-btns').css({ display: 'none' });
+    $('.m3rlin-quickstart-btns').fadeIn('slow');
+    $('.modal-footer').fadeIn('slow');
+    $('#greeter').css({ display: 'none' });
+  });
+
+  $('#m3rlin-back').click(function() {
+    backToMain();
+  });
+
+  $('#m3rlin-continue').on('click', function() {
+    window.print();
+    alert('aaaannnndd... Print!');
+    setTimeout(function() {
+      backToMain();
+    }, 500);
+  });
+});
diff --git a/js/main.js b/js/main.js