diff options
Diffstat (limited to 'index.html')
-rw-r--r-- | index.html | 105 |
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> |