| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta name="description" content="ASTERIX WEB PAGE" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <link href='http://fonts.googleapis.com/css?family=Bitter|PT+Sans+Caption|Open+Sans' rel='stylesheet' type='text/css'> |
| <script src="http://code.jquery.com/jquery.min.js"></script> |
| <script src="http://www.jacklmoore.com/js/jquery.autosize.js"></script> |
| |
| <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> |
| <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"> |
| |
| |
| <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> |
| |
| <script type="text/javascript"> |
| $(document).ready(function(){ |
| $('textarea').autosize(); |
| |
| $("form#queryform").submit(function() { |
| $.post("/", $("form#queryform").serialize(), function(data) { |
| $('#output-message').html(data); |
| }); |
| return false; |
| }); |
| }); |
| </script> |
| |
| <meta charset=utf-8 /> |
| <title>ASTERIX Demo</title> |
| <style id="jsbin-css"> |
| body { |
| background: none repeat scroll 0 0 white; |
| color: #222222; |
| font-family: 'Bitter'; |
| font-size: 14px; |
| line-height: 17px; |
| width: 100%; |
| } |
| |
| .content { |
| margin-top: 70px; |
| } |
| |
| label.query, label.result { |
| font-size: 24px; |
| padding-bottom: 10px; |
| font-weight: bold; |
| } |
| |
| div.host { |
| float: left; |
| margin: 0 100px 0 10px; |
| } |
| |
| div.port { |
| } |
| |
| div.left { |
| float: left; |
| width: 320px; |
| padding: 0 20px 0 10px; |
| } |
| |
| div.right { |
| } |
| |
| button.btn { |
| clear: both; |
| float: left; |
| margin: 20px 0 0 10px;; |
| } |
| |
| textarea.query { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| -ms-box-sizing: border-box; |
| box-sizing: border-box; |
| font-size: 16px; |
| line-height: 20px; |
| font-family: bitter, helvetica; |
| width: 100%; |
| padding: 10px; |
| color: #999; |
| resize: none; |
| border: 10px solid #eee; |
| } |
| |
| textarea.query:focus { |
| outline: none; |
| color: #333; |
| } |
| |
| label { |
| padding-top: 10px; |
| } |
| |
| input[type=text] { |
| height: 20px; |
| } |
| |
| pre { |
| overflow: auto; |
| white-space: pre; |
| } |
| |
| div.output label.heading { |
| font-size: 24px; |
| margin-top: 2px; |
| padding-bottom: 10px; |
| font-weight: bold; |
| } |
| |
| div.output .message { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| -ms-box-sizing: border-box; |
| box-sizing: border-box; |
| color: #000; |
| resize: none; |
| } |
| |
| div.error label.heading { |
| color: #ff2020; |
| font-size: 24px; |
| margin-top: 2px; |
| padding-bottom: 10px; |
| font-weight: bold; |
| } |
| |
| div.error .message { |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| -ms-box-sizing: border-box; |
| box-sizing: border-box; |
| border-color: rgba(82, 168, 236, 0.8); |
| outline: 0; |
| outline: thin dotted 9; |
| |
| -webkit-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.8); |
| -moz-box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0); |
| box-shadow: inset 0 1px 1px rgba(250, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 1.0); |
| color: #000; |
| resize: none; |
| border: 1px solid #eee; |
| margin-top: 7px; |
| padding: 20px 20px 20px 20px; |
| } |
| |
| .footer { |
| margin-top: 40px; |
| } |
| |
| .footer .line { |
| border-top: 1px solid #EEEEEE; |
| bottom: 20px; |
| height: 10px; |
| left: 0; |
| position: fixed; |
| width: 100%; |
| } |
| |
| .footer .content { |
| background: none repeat scroll 0 0 #FFFFFF; |
| bottom: 0; |
| color: #666666; |
| font-size: 12px; |
| height: 25px; |
| left: 0; |
| padding-top: 5px; |
| position: fixed; |
| width: 100%; |
| } |
| |
| .footer .content .left { |
| padding-left: 20px; |
| float: left; |
| } |
| |
| .footer .content .right { |
| padding-right: 20px; |
| float: right; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class="navbar navbar-inverse navbar-fixed-top"> |
| <div class="navbar-inner"> |
| <div class="container"> |
| <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| <span class="icon-bar"></span> |
| </a> |
| <a class="brand" href="#">ASTERIX</a> |
| <div class="nav-collapse collapse"> |
| <ul class="nav"> |
| <li><a href="http://code.google.com/p/asterixdb/source/browse/">Open source</a></li> |
| <li><a href="http://code.google.com/p/asterixdb/issues/list">File issues</a></li> |
| <li><a href="https://groups.google.com/forum/?fromgroups#!forum/asterixdb-userst">Contact</a></li> |
| </ul> |
| </div><!--/.nav-collapse --> |
| </div> |
| </div> |
| </div> |
| |
| <div class="content"> |
| <div class="container"> |
| <div class="row-fluid"> |
| <div class="span6"> |
| <form id="queryform" class="form-horizontal" method="post"> |
| <div> |
| <label class="query">Query</label> |
| <textarea rows="20" name="query" class="query" value="%s" placeholder="Type your AQL query ..."></textarea> |
| </div> |
| <div> |
| <div class="left"> |
| <label class="checkbox"><input type="checkbox" name="print-expr-tree" value="true" /> Print parsed expressions</label> |
| </div> |
| <div class="right"> |
| <label class="checkbox"><input type="checkbox" name="print-rewritten-expr-tree" value="true" /> Print rewritten expressions</label> |
| </div> |
| </div> |
| <div> |
| <div class="left"> |
| <label class="checkbox"><input type="checkbox" name="print-logical-plan" value="true" /> Print logical plan</label> |
| </div> |
| <div class="right"> |
| <label class="checkbox"><input type="checkbox" name="print-optimized-logical-plan" value="true" /> Print optimized logical plan</label> |
| </div> |
| </div> |
| <div> |
| <div class="left"> |
| <label class="checkbox"><input type="checkbox" name="print-job" value="true" /> Print hyracks job</label> |
| </div> |
| </div> |
| <button type="submit" class="btn btn-danger">Execute</button> |
| </form> |
| </div> |
| |
| <div class="span6"> |
| <div class="output"> |
| <label class="heading">Output</label> |
| <div id="output-message" class="message"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="footer"> |
| <section class="line"><hr></section> |
| <section class="content"> |
| <section class="left"> |
| Developed by ASTERIX group |
| </section> |
| <section class="right"> |
| © Copyright 2013 University of California, Irvine |
| </section> |
| </section> |
| </div> |
| </body> |
| </html> |
| |