index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   3     <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5                 <link rel="stylesheet" type="text/css" href="style.css" />
   6                                 <script type="text/javascript" src="api.js" ></script>
   7                 <script type="text/javascript" src="business.js" ></script>
   8                 <link rel="stylesheet" href="jquery.mobile-1.2.0-beta.1.min.css" />
   9                 <script src="jquery-1.8.1.min.js"></script>
  10                 <script src="jquery.mobile-1.2.0-beta.1.min.js"></script>
  11
  12     </head>
  13     <body>
  14         <div data-role="page">
  15         <div data-role="header"><h1>GhostCluster</h1></div>
  16         <div data-role="content">
  17
  18         <a href="#popupBasic" data-role="button" data-rel="popup">Connect</a>
  19
  20         <div data-role="popup" id="popupBasic" data-transition="flip">
  21                 <form>
  22                         <label>Address:</label>
  23                         <input type="text" id="address" name="address" data-theme="a">
  24                         <div id="connectButton" data-role="button" >Connect</div>
  25                 </form>
  26         </div>
  27
  28         <div id="mainbox" class="hbox" >
  29                 <div class="needleParent" >
  30                         <div id="rpmNeedle" class="needle"></div>
  31                         <div id="engineCoolantNeedle" class="needle"></div>
  32                         <div id="oilTempNeedle" class="needle"></div>
  33                         <div class="centerCircle">
  34                                 <div id="velocityTable" >
  35                                         <div class="row centerText">
  36                                                 <div id="velocity" class="rightAlignText" >0</div>
  37                                                 <div id="velocityUnits" class="leftAlignText" >MPH</div>
  38                                         </div>
  39                                 </div>
  40                         </div>
  41                 </div>
  42
  43                 <div class="vbox">
  44                         <div class="hbox">
  45                         <div id="gaugeRow">
  46                         <div class="gauge" >
  47                         <img src="assets/dial-IAT-bg.png" >
  48                         <div id="iatNeedle" class="needle"></div>
  49                         </img>
  50                         </div>
  51                         <div class="gauge" >
  52                         <img id="wheel" src="assets/wheel.png" />
  53                         </div>
  54                         </div>
  55
  56                                 <div id="gaugeRow">
  57                                         <div class="gauge">
  58                                                 <img src="assets/dial-load-bg.svg"  >
  59                                                         <div id="loadNeedle" class="needle" ></div>
  60                                                 </img>
  61                                         </div>
  62                                         <div class="gauge">
  63                                                 <img src="assets/dial-throttle-bg.svg"  >
  64                                                         <div id="throttleNeedle" class="needle" ></div>
  65                                                 </img>
  66                                         </div>
  67                                 </div>
  68                         </div>
  69
  70                         <div data-role="popup" id="machineGunTurretPopup" data-transition="flip">
  71                                 <img id="machinegun" src="assets/machinegun.png" />
  72                         </div>
  73
  74                         <div id="infoarea">
  75                                 <div class="row underborder" >
  76                                         <div class="rightAlignText middleText">MPG</div>
  77                                         <div id="mpg" class="leftAlignText middleText">0</div>
  78                                 </div>
  79                                 <div class="row underborder" >
  80                                         <div class="rightAlignText middleText">AVG MPG</div>
  81                                         <div id="avgmpg" class="leftAlignText middleText">0</div>
  82                                 </div>
  83                                 <div class="row underborder" >
  84                                         <div class="rightAlignText middleText">Gear</div>
  85                                         <div id="gear" class="leftAlignText middleText">0</div>
  86                                 </div>
  87                                 <div class="row" >
  88                                         <div class="rightAlignText middleText">AVG SPEED</div>
  89                                         <div id="avgspeed" class="leftAlignText middleText">0</div>
  90                                 </div>
  91
  92                         </div>
  93
  94                 </div>
  95         </div>
  96         </div>
  97         </div>
  98     </body>
  99 </html>
 100