1 files changed, 105 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3fc98d0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>hostinfo</title>
+
+    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
+    <style>
+      a {
+        color: #F00;
+        font-weight: bold;
+      }
+
+      a:hover {
+        color: rgb(168, 0, 0);
+      }
+
+      h1 {
+        text-align: center;
+      }
+
+      #hosts li {
+        list-style-type: none;
+        text-align: center;
+        line-height: 100px;
+        margin: 10px;
+      }
+
+      #hosts li a {
+        display: block;
+      }
+
+      #hosts li a:hover {
+        background-color: #CCC;
+        color: #000;
+        text-decoration: none;
+      }
+    </style>
+
+    <script src="js/js-yaml.min.js"></script>
+    <script src="js/jquery-2.0.0.min.js"></script>
+    <script src="js/jquery.mustache.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/mustache.js"></script>
+    <script type="text/javascript">
+
+      var strip = function(data) { return data.split('.')[0] };
+
+      render = {
+        'index' : function() {
+          jQuery.get('data/hosts', function(raw) {
+              var data = jsyaml.load(raw),
+                  hosts = [];
+
+              for(var i=0; i < data.hosts.length; i++) {
+                  var entry = data.hosts[i];
+                  hosts.push({
+                      'name' : strip(entry),
+                      'uri' : entry
+                  });
+              }
+
+              $.Mustache.load('./templates/index.html').done(function () {
+                  $('#content').mustache('hosts', {'hosts':hosts});
+
+                  $("#hosts a").click("hover", function(event){
+                    var uri = $(this).attr('data-uri');
+                    render.host(uri);
+                  });
+              });
+          });
+        },
+
+        'host' : function(uri) {
+          jQuery.get('data/'+uri, function(raw) {
+              var data = jsyaml.load(raw);
+              data.name = strip(data.hostname);
+              $.Mustache.load('./templates/host.html').done(function () {
+                  $('#content').mustache('hostinfo', data, {method:'html'});
+              });
+
+              $("#index").click("hover", function(event){
+                render.index();
+              });
+          });
+        }
+      };
+
+      $(document).ready(function() {
+        render.index();
+      });
+
+    </script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="row">
+
+        <div class="span12" id="content">
+        </div>
+      </div>
+    </div>
+
+  </body>
+</html>