4 files changed, 117 insertions, 5 deletions
diff --git a/share/frontend/imconcat/img/concat.png b/share/frontend/imconcat/img/concat.png
new file mode 100644
index 0000000..eb14906
--- /dev/null
+++ b/share/frontend/imconcat/img/concat.png
diff --git a/share/frontend/imconcat/img/logo.jpg b/share/frontend/imconcat/img/logo.jpg
new file mode 100644
index 0000000..a0f7a36
--- /dev/null
+++ b/share/frontend/imconcat/img/logo.jpg
diff --git a/share/frontend/imconcat/img/logo_original.jpg b/share/frontend/imconcat/img/logo_original.jpg
new file mode 100644
index 0000000..e1248b5
--- /dev/null
+++ b/share/frontend/imconcat/img/logo_original.jpg
diff --git a/share/frontend/imconcat/index.html b/share/frontend/imconcat/index.html
index 3dceeaf..af18849 100644
--- a/share/frontend/imconcat/index.html
+++ b/share/frontend/imconcat/index.html
@@ -3,17 +3,120 @@
   <head>
     <meta charset="utf-8" />
     <title>Getting started with JSON Form</title>
-    <link rel="stylesheet" style="text/css" href="deps/opt/bootstrap.css" />
+<!--    <link rel="stylesheet" style="text/css" href="deps/opt/bootstrap.css" />-->
+     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
+  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
+    <style type="text/css">
+       #result{
+         position:absolute;
+         top 0;
+         z-index:100;
+         height:700px;
+         width:1000px;
+         background-color: rgba(22,22,22,0.2);
+       }
+       form{
+         margin-left:10px;
+       }
+       .pb_links{
+         display: inline-block;
+         font-size: 2em;
+         color:active: #999999;
+         color: #00000;
+       }
+       #links{
+         border-bottom:1px solid black;
+         margin-bottom: 10px;
+       }
+    </style>
   </head>
   <body>
-    <h1>Getting started with JSON Form</h1>
-    <form></form>
+    <div id="links">
+      <span class="pb_links">links:</span>
+      <a class="pb_links" href="http://asdf.us/im/gallery">gallery</a>
+      <a class="pb_links" href="http://asdf.us/imgradient">imgradient</a>
+      <a class="pb_links" href="http://asdf.us/imgrid">imgrid</a>
+      <a class="pb_links" href="http://asdf.us/impattern">impattern</a>
+      <a class="pb_links" href="http://asdf.us/imlandscape">imlandscape</a>
+      <a class="pb_links" href="http://asdf.us/imbreak">imbreak</a>
+      <a class="pb_links" href="http://asdf.us/shader">shader</a>
+    </div>
+    <h1>
+      <a href="">
+        <img src="img/logo.jpg" /></br><img src="img/concat.png" />
+      </a>
+    </h1>
+        <h2>Small Modal</h2>
+          <!-- Trigger the modal with a button -->
+          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
+
+          <!-- Modal -->
+          <div class="modal fade" id="myModal" role="dialog">
+            <div class="modal-dialog modal-lg">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Modal Header</h4>
+                </div>
+                <div class="modal-body">
+                  <p>This is a small modal.</p>
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+              </div>
+            </div>
+          </div>    
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
+  <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" id="gridSystemModalLabel">Modal title</h4>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-md-4">.col-md-4</div>
+          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
+        </div>
+        <div class="row">
+          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
+          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
+        </div>
+        <div class="row">
+          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
+        </div>
+        <div class="row">
+          <div class="col-sm-9">
+            Level 1: .col-sm-9
+            <div class="row">
+              <div class="col-xs-8 col-sm-6">
+                Level 2: .col-xs-8 .col-sm-6
+              </div>
+              <div class="col-xs-4 col-sm-6">
+                Level 2: .col-xs-4 .col-sm-6
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+  <form></form>
     <div id="res" class="alert"></div>
-    <script type="text/javascript" src="deps/jquery.min.js"></script>
     <script type="text/javascript" src="deps/underscore.js"></script>
     <script type="text/javascript" src="deps/opt/jsv.js"></script>
     <script type="text/javascript" src="lib/jsonform.js"></script>
     <script type="text/javascript">
+      $(document).ready(function(){
+        $('.modal').modal();
+      })
       $('form').jsonForm({
           "schema": {
             "image_url1": {
@@ -43,9 +146,18 @@
                   "type": "string",
                   "title": "Merge Direction:",
                   "enum": [ "gif", "jpg", "png" ]
+            },
+            "username": {
+                  "type": "string",
+                  "title": "Username:"
             }
-          }
+          },
+          "onSubmitValid": function (values) {
+          // "values" follows the schema, yeepee!
+          console.log(values);
+          } 
       });
+
     </script>
   </body>
 </html>