2 files changed, 104 insertions, 0 deletions
diff --git a/includes/style.css b/includes/style.css
new file mode 100644
index 0000000..caf7a34
--- /dev/null
+++ b/includes/style.css
@@ -0,0 +1,63 @@
+body {
+  font-size:        1em;
+  background-color: #FFFFFF;
+}
+.header_bar {
+  color:            #000000;
+  text-align:       center;
+  margin-bottom:    1em;
+}
+.footer_bar {
+  color:            #000000;
+  font-size:        1.2em;
+  text-align:       center;
+  margin-top:       1em;
+  width:            50%;
+  margin-left:      auto;
+  margin-right:     auto;
+}
+.logo {
+  text-align:       center;
+  padding:          1%;
+}
+.content {
+  color:            #000000;
+  font-size:        1.1em;
+  text-align:       center;
+  width:            50%;
+  display:          block;
+  margin-left:      auto;
+  margin-right:     auto;
+}
+.confirm {
+  width:            50%;
+  margin-left:      auto;
+  margin-right:     auto;
+}
+.loading {
+  margin-top:       1em;
+  width:            50%;
+  margin-left:      auto;
+  margin-right:     auto;
+}
+.reset {
+  width:            25%;
+  margin-left:      auto;
+  margin-right:     auto;
+}
+pre {
+  color:            #FFFFFF;
+  background-color: #000000;
+  text-decoration:  none;
+  width:            70%;
+  margin-left:      auto;
+  margin-right:     auto;
+}
+a {
+  color:            #000000;
+  text-decoration:  none;
+}
+a:hover {
+  color:            #000000;
+  text-decoration:  none;
+}
diff --git a/includes/utils.js b/includes/utils.js
new file mode 100644
index 0000000..3bcde51
--- /dev/null
+++ b/includes/utils.js
@@ -0,0 +1,41 @@
+$(function() {
+  // hide the optional parameters field
+  $('.result').hide();
+  $('.loading').hide();
+
+  // show and hide loading bar
+  $(document).ajaxStart(function() {
+    $('.loading').show();
+  });
+  $(document).ajaxStop(function() {
+    $('.loading').hide();
+  });
+
+  // validate the parameters field
+  $('#input-params').on('input', function() {
+    var cmd = $('#query').val();
+  });
+
+  // reset the view to the default one
+  $('#backhome').click(function() {
+    $('.content').slideDown();
+    $('.result').slideUp();
+  });
+
+  // send an ajax request that will get the info on the router
+  $('form').on('submit', function(e) {
+    e.preventDefault();
+
+    $.ajax({
+      type: 'post',
+      url: 'execute.php',
+      data: $('form').serialize()
+    }).done(function(response, state, xhr) {
+      $('#output').text(response);
+      $('.content').slideUp();
+      $('.result').slideDown();
+    }).fail(function(xhr, state, error) {
+      alert('The following error occured: ' + state, error);
+    });
+  });
+});