design update

express-server/public/ocrscan/ocrscan.js

@@ -1,9 +1,16 @@
 var id;
 
 $(document).ready(function() {
+
+    M.AutoInit();
         //initialize all modals           
-        $('.modal').modal();
+        $('.modal').modal({
+            dismissible: false
+        });
+        
         $('.materialboxed').materialbox();
+        $('.fixed-action-btn').floatingActionButton();
+
 
         if ($(window).width() > 600) {
             //large     
@@ -116,6 +123,18 @@ $(document).on("click", ".collection-item", function() {
     $(this).addClass("active");
 });
 
+$(".btncont").click(function() {
+    $('.r1').animate({'margin-top': '0'}, 1000);
+});
+
+$(".opt1").click(function() {
+    $('.r1').animate({'margin-top': '-100%'}, 1000);
+    $(".r2").css("display", "block");
+});
+
+$(".opt2").click(function() {
+   // $('.row').animate({'margin-top': '-100%'}, 1000);
+});
 
 });
 

express-server/public/ocrscan/style.css

@@ -1,18 +1,37 @@
 .opt1 {
-    background-color: #ff5722 ;
+    background-color: #f4511e;
     height: 100%;
     max-height: 100%;
+    transition: 1s;
+}
+
+.opt1:hover {
+    background-color: #ff8a65;
 }
 
 .opt2 {
-    background-color: #03a9f4;
+    background-color: #039be5 ;
     height: 100%;
     max-height: 100%;
+    transition: 1s;
 }
 
-.row {
+.opt2:hover {
+    background-color: #4fc3f7;
+}
+
+.r1 {
     height: 100%;
     max-height: 100%;
+    margin-top: 100%;
+}
+
+.r2 {
+    height: 100%;
+    max-height: 100%;
+    background-color: forestgreen;
+    display: none;
+    margin-top: 50%;
 }
 
 html, body {
@@ -20,6 +39,7 @@ html, body {
     margin: 0;
     max-height: 100%;
     overflow: hidden;
+    background-color: #161616;
   }
 
 .ico {
@@ -32,4 +52,4 @@ html, body {
 .collection .collection-item.active {
     /* background-color: #00c853; */
 
-}
+}