testing/MCTXWeb/public_html/index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3   <head>
   4     <title>MCTX3420 Web Interface</title>
   5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6     <!--[if lte IE 8]>
   7       <script language="javascript" type="text/javascript" src="static/excanvas.min.js"></script>
   8     <![endif]-->
   9     <script type="text/javascript" src="static/jquery-1.10.1.min.js"></script>
  10     <script type="text/javascript" src="static/jquery.flot.min.js"></script>
  11     <script type="text/javascript" src="static/mctx.gui.js"></script>
  12     <link rel="stylesheet" type="text/css" href="static/style.css">
  13     <link rel="stylesheet" type="text/css" href="static/nav-menu.css">
  14     <script type="text/javascript">
  15       $(document).ready(function () {
  16         $("#menu-container").populateNavbar();
  17         $("#cam1").setCamera();
  18       });
  19     </script>
  20   </head>
  21
  22   <body>
  23     <div id="header">
  24       <span id="title">Exploding Cans</span>
  25       <div id="rightnav">
  26         <div id="menu-container" class="nav-menu">
  27         </div>
  28         <span id="date">
  29           <script type="text/javascript">getDate();</script>
  30         </span>
  31       </div>
  32       <div class="clear"></div>
  33     </div>
  34     <!-- End header -->
  35
  36     <div id="content">
  37       <div id="sidebar">
  38         <div class="widget">
  39           <div class="title">Status</div>
  40           <div class="item">
  41             <table class="status centre">
  42               <tr><th>Module</th> <th>State</th></tr>
  43               <tr><td>Case interlock</td> <td>FAIL</td></tr>
  44               <tr><td>Pressure level</td> <td>PASS</td></tr>
  45             </table>
  46           </div>
  47         </div>
  48
  49         <div class="widget">
  50           <div class="title">Pressure controls</div>
  51         </div>
  52
  53         <div class="widget">
  54           <div class="title">Login</div>
  55           <div class="item">
  56             <form action="#">
  57               <table class="centre">
  58                 <tr><td>Username</td><td><input name="username" type="text"></td></tr>
  59                 <tr><td>Password</td><td><input name="pass" type="password"></td></tr>
  60                 <tr><td></td><td><input type="button" value="Submit"></td></tr>
  61               </table>
  62             </form>
  63           </div>
  64         </div>
  65       </div>
  66       <!-- End sidebar -->
  67
  68       <div id="main">
  69         <div class="widget">
  70           <div class="title">Dashboard</div>
  71
  72         </div>
  73
  74         <div class="widget">
  75           <div class="title">Strain gauges</div>
  76           <div id="strain-graphs" class="graph">
  77             <!-- Strain graph placeholder -->
  78             <script type="text/javascript">
  79               $("#strain-graphs").setStrainGraphs();
  80             </script>
  81           </div>
  82         </div>
  83
  84         <div class="widget">
  85           <div class="title">Camera Dilatometer</div>
  86           <img src="#" alt="Camera 1" id="cam1" class="centre">
  87         </div>
  88       </div>
  89       <!-- End main content -->
  90
  91     </div>
  92   </body>
  93 </html>