From d7f947c61514b36b8462ece7153d12d1897ed9d2 Mon Sep 17 00:00:00 2001
From: Tushar Goel <34160672+TG1999@users.noreply.github.com>
Date: Tue, 22 Jan 2019 17:41:56 +0530
Subject: [PATCH 1/2] Update index.html

---
 examples/index.html | 120 ++++++++++++++++++++------------------------
 1 file changed, 54 insertions(+), 66 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 63053b4c9b..01157a7701 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -20,8 +20,6 @@
   <script src="lib/urlHash.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
-  <script src="lib/intermediateHtmlStepUi.js" charset="utf-8"></script>
-  <script src="lib/cache.js" charset="utf-8"></script>
   <script src="demo.js" charset="utf-8"></script>
   <!-- for crop module: -->
   <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
@@ -29,7 +27,6 @@
 
   <!-- Download.js for large files -->
   <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
-
   <script src="lib/scrollToTop.js"></script>
 
 </head>
@@ -47,7 +44,7 @@
   <div class="container-fluid">
 
     <header class="text-center">
-      <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
+      <h1>Image Sequencer</h1>
       <p>
         A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original image, it
         creates a new image at each step in a sequence.
@@ -67,21 +64,13 @@ <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
         <i>Select or drag in an image to start!</i>
       </p>
       <center>
-        <input type="file" id="fileInput" value="" accept="image/*"><br />
-        <button type="button" id="take-photo">Take a Photo</button>
-        <video  id="video" width="400" height="300" style="display:none"></video>
-        <a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
-        <a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
-        <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
+        <input type="file" id="fileInput" value="" accept="image/*">
       </center>
     </div>
 
-    <section id="steps" class="row">
-      <div id="load-image"></div>
-    </section>
+    <section id="steps" class="row"></section>
 
     <hr />
-  <p class = "alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.</p>
   <div class="row">
     <div class="col-sm-8">
     <section id="addStep" class="panel panel-primary">
@@ -90,35 +79,41 @@ <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
           <p class="info">Select a new module to add to your sequence.</p>
           <div class="row center-align radio-group">
             <div>
-              <div class="radio" data-value="brightness">
-                <i class="fa fa-sun-o fa-4x i-over"></i>
-              </div>
+              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">
+                <i class="fa fa-sun-o fa-4x"></i>
+              </button>
               <p>Brightness</p>
             </div>
             <div>
-              <div class="radio" data-value="contrast">
-                <i class="fa fa-adjust fa-4x i-over"></i>
-              </div>
+              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">
+                <i class="fa fa-adjust fa-4x"></i>
+              </button>
               <p>Contrast</p>
             </div>
             <div>
-              <div class="radio" data-value="saturation">
-                <i class="fa fa-tint fa-4x i-over i-small"></i>
-              </div>
+              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">
+                <i class="fa fa-tint fa-4x"></i>
+              </button>
               <p>Saturation</p>
             </div>
             <div>
-              <div class="radio" data-value="rotate">
-                <i class="fa fa-rotate-right fa-4x i-over"></i>
-              </div>
+              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">
+                <i class="fa fa-rotate-right fa-4x"></i>
+              </button>
               <p>Rotate</p>
             </div>
             <div>
-              <div class="radio" data-value="crop">
-                <i class="fa fa-crop fa-4x i-over"></i>
-              </div>
+              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">
+                <i class="fa fa-crop fa-4x"></i>
+              </button>
               <p>Crop</p>
             </div>
+            <div>
+              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="resize">
+                <i class="fa fa-arrows-alt fa-4x"></i>
+              </button>
+              <p>Resize</p>
+            </div>
           </div>
           <div class="center-align">
             <select class="form-control input-lg" id="selectStep">
@@ -130,40 +125,6 @@ <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
         </div>
       </div>
     </section>
-
-    <section id="sequence-actions" class="panel">
-      <div class="panel-body">
-
-        <div class="row center-align">
-          <button class="btn btn-primary btn-block btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
-          <button class="btn btn-primary btn-block btn-lg js-view-as-gif" id="gif">View GIF</button>
-        </div>
-
-
-        <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
-          <div class="modal-dialog" role="document">
-            <div class="modal-content">
-              <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 class="modal-title">Your gif is ready</h4>
-              </div>
-              <div class="modal-body">
-                <div id="js-download-modal-gif-container">
-                  <!-- Gif should appear here -->
-                </div>
-              </div>
-              <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
-
-                <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </section>
-
     </div>
     <div class="col-sm-4">
     <section id="dwnld" class="panel panel-primary">
@@ -171,20 +132,47 @@ <h4 class="modal-title">Your gif is ready</h4>
         <div class="panel-body">
           <div style="text-align:center;">
             <button class="btn btn-success btn-lg" id="download-btn" name="download">Download PNG</button>
-            <button id="resetButton" class="btn btn-default btn-lg">Clear All Steps</button>
+            <button class="btn btn-success btn-lg js-view-as-gif" id="gif">View GIF</button>
+
+            <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Your gif is ready</h4>
+                  </div>
+                  <div class="modal-body">
+                    <div id="js-download-modal-gif-container">
+                      <!-- Gif should appear here -->
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+
+                    <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
+
         </div>
       </div>
     </section>
     </div>
   </div>
+  <div class="row">
+    <button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
+  </div>
 
+  <form class="move-up" action="#up">
+    <button><i class="fa fa-arrow-circle-o-up"></i></button>
+  </form>
+  
   <footer>
     <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
   </footer>
 
-  <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
-
   <script type="text/javascript">
     $(function() {
       var sequencer;

From 66657b7da2cd7fbfe662cc60ed2ac0af2a114e90 Mon Sep 17 00:00:00 2001
From: Tushar Goel <34160672+TG1999@users.noreply.github.com>
Date: Tue, 22 Jan 2019 17:53:37 +0530
Subject: [PATCH 2/2] Update index.html

---
 examples/index.html | 114 +++++++++++++++++++++++++-------------------
 1 file changed, 66 insertions(+), 48 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 01157a7701..fd3fcc128e 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -20,6 +20,8 @@
   <script src="lib/urlHash.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
+  <script src="lib/intermediateHtmlStepUi.js" charset="utf-8"></script>
+  <script src="lib/cache.js" charset="utf-8"></script>
   <script src="demo.js" charset="utf-8"></script>
   <!-- for crop module: -->
   <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
@@ -27,6 +29,7 @@
 
   <!-- Download.js for large files -->
   <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
+
   <script src="lib/scrollToTop.js"></script>
 
 </head>
@@ -44,7 +47,7 @@
   <div class="container-fluid">
 
     <header class="text-center">
-      <h1>Image Sequencer</h1>
+      <h1><a href="/" target='_blank' class="name-header">Image Sequencer</a></h1>
       <p>
         A pure JavaScript sequential image processing system, inspired by storyboards. Instead of modifying the original image, it
         creates a new image at each step in a sequence.
@@ -64,13 +67,21 @@ <h1>Image Sequencer</h1>
         <i>Select or drag in an image to start!</i>
       </p>
       <center>
-        <input type="file" id="fileInput" value="" accept="image/*">
+        <input type="file" id="fileInput" value="" accept="image/*"><br />
+        <button type="button" id="take-photo">Take a Photo</button>
+        <video  id="video" width="400" height="300" style="display:none"></video>
+        <a href="#" id="capture" style="display:none" class="btn btn-primary btn-md">Click Picture</a>
+        <a href="#" id="close" style="display:none" class="btn btn-default btn-md">Close</a>
+        <canvas id="canvas" width="400" height="300" style="display:none"></canvas>
       </center>
     </div>
 
-    <section id="steps" class="row"></section>
+    <section id="steps" class="row">
+      <div id="load-image"></div>
+    </section>
 
     <hr />
+  <p class = "alert alert-success savesequencemsg">Saved Sequence Success. Sequence can be found among other modules.</p>
   <div class="row">
     <div class="col-sm-8">
     <section id="addStep" class="panel panel-primary">
@@ -79,33 +90,33 @@ <h1>Image Sequencer</h1>
           <p class="info">Select a new module to add to your sequence.</p>
           <div class="row center-align radio-group">
             <div>
-              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">
-                <i class="fa fa-sun-o fa-4x"></i>
-              </button>
+              <div class="radio" data-value="brightness">
+                <i class="fa fa-sun-o fa-4x i-over"></i>
+              </div>
               <p>Brightness</p>
             </div>
             <div>
-              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">
-                <i class="fa fa-adjust fa-4x"></i>
-              </button>
+              <div class="radio" data-value="contrast">
+                <i class="fa fa-adjust fa-4x i-over"></i>
+              </div>
               <p>Contrast</p>
             </div>
             <div>
-              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">
-                <i class="fa fa-tint fa-4x"></i>
-              </button>
+              <div class="radio" data-value="saturation">
+                <i class="fa fa-tint fa-4x i-over i-small"></i>
+              </div>
               <p>Saturation</p>
             </div>
             <div>
-              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">
-                <i class="fa fa-rotate-right fa-4x"></i>
-              </button>
+              <div class="radio" data-value="rotate">
+                <i class="fa fa-rotate-right fa-4x i-over"></i>
+              </div>
               <p>Rotate</p>
             </div>
             <div>
-              <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">
-                <i class="fa fa-crop fa-4x"></i>
-              </button>
+              <div class="radio" data-value="crop">
+                <i class="fa fa-crop fa-4x i-over"></i>
+              </div>
               <p>Crop</p>
             </div>
             <div>
@@ -125,6 +136,40 @@ <h1>Image Sequencer</h1>
         </div>
       </div>
     </section>
+
+    <section id="sequence-actions" class="panel">
+      <div class="panel-body">
+
+        <div class="row center-align">
+          <button class="btn btn-primary btn-block btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
+          <button class="btn btn-primary btn-block btn-lg js-view-as-gif" id="gif">View GIF</button>
+        </div>
+
+
+        <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Your gif is ready</h4>
+              </div>
+              <div class="modal-body">
+                <div id="js-download-modal-gif-container">
+                  <!-- Gif should appear here -->
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+
+                <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
     </div>
     <div class="col-sm-4">
     <section id="dwnld" class="panel panel-primary">
@@ -132,47 +177,20 @@ <h1>Image Sequencer</h1>
         <div class="panel-body">
           <div style="text-align:center;">
             <button class="btn btn-success btn-lg" id="download-btn" name="download">Download PNG</button>
-            <button class="btn btn-success btn-lg js-view-as-gif" id="gif">View GIF</button>
-
-            <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
-              <div class="modal-dialog" role="document">
-                <div class="modal-content">
-                  <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h4 class="modal-title">Your gif is ready</h4>
-                  </div>
-                  <div class="modal-body">
-                    <div id="js-download-modal-gif-container">
-                      <!-- Gif should appear here -->
-                    </div>
-                  </div>
-                  <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
-
-                    <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <button id="resetButton" class="btn btn-default btn-lg">Clear All Steps</button>
           </div>
-
         </div>
       </div>
     </section>
     </div>
   </div>
-  <div class="row">
-    <button class="btn btn-primary btn-lg" name="save-sequence" id="save-seq">Save Sequence</button>
-  </div>
 
-  <form class="move-up" action="#up">
-    <button><i class="fa fa-arrow-circle-o-up"></i></button>
-  </form>
-  
   <footer>
     <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
   </footer>
 
+  <button id="move-up"><i class="fa fa-arrow-circle-o-up"></i></button>
+
   <script type="text/javascript">
     $(function() {
       var sequencer;