Added tabs ui

Author: styopdev

css/style.css

@@ -240,7 +240,7 @@ canvas{
     width: 30px;
     height: 30px;
     position: absolute;
-    top: 10px;
+    top: 50px;
     right: 20px;
     z-index: 99;
 }
@@ -580,6 +580,34 @@ select:not([multiple]) {
                                     supported by Chrome and Opera */
 }
 
+.tabs {
+    text-align: left;
+}
+
+.tabs .tab {
+    width: 80px;
+    padding: 11px 0;
+    border: 1px solid #a6a6a6;
+    display: inline-block;
+    cursor: pointer;
+    border-bottom: 0px ;
+    text-align: center;
+}
+
+.tabs .tab:first-child {
+    border-top-left-radius: 5px;
+    border-right: 1px;
+}
+
+.tabs .tab:not(:first-child) {
+    margin-left: -4px;
+    border-top-right-radius: 5px;
+}
+
+.tabs .tab.active {
+    background-color: #ffffff;
+}
+
 @media only screen and (max-width: 1048px) and (min-width: 992px)  {
     .warning {
         justify-content: start;

index.html

@@ -142,6 +142,10 @@
                         </div>
 
                         <div id="generated-tree" class="generated-tree">
+                            <div class="tabs">
+                                <a onclick="switchTab(this)" class="tab active">Image</a>
+                                <a onclick="switchTab(this)" class="tab">Json</a>
+                            </div>
                             <a class="back cp" title="Try again">
                                 <div class="back-bg"></div>
                                 <img src="./img/reload.png" class="back-image" alt="Go back" onclick="retry()">

js/script.js

@@ -184,6 +184,13 @@ function readFile(file) {
     };
 }
 
+function switchTab(elem) {
+    document
+        .querySelectorAll('.tabs .tab.active')
+        .forEach(tab => tab.classList.remove('active'));
+    elem.classList.add('active');
+}
+
 Dropzone.options.myAwesomeDropzone = {
     paramName: "file",
     maxFiles: 1,