index.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <title>Project Size | Solar</title>
  10. <link href="css/bootstrap.min.css" rel="stylesheet">
  11. <link href="css/style.css" rel="stylesheet">
  12. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  13. <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  14. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzK93ZAR-RHPNwB-xMLdBQSv-pz1wEOtg&v=3.exp&sensor=false&libraries=places,drawing,geometry"> </script>
  15. <script src="js/script.js"></script>
  16. </head>
  17. <body>
  18. <script>
  19. </script>
  20. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  21. <div class="container">
  22. <div class="navbar-header">
  23. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  24. <span class="sr-only">Toggle</span>
  25. <span class="icon-bar"></span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. </button>
  29. <a class="navbar-brand" href="#"></a>
  30. </div>
  31. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  32. <ul class="nav navbar-nav">
  33. <li><a href="#"></a></li>
  34. <li><a href="#"></a></li>
  35. <li><a href="#"></a></li>
  36. </ul>
  37. </div>
  38. </div>
  39. </nav>
  40. <div class="container">
  41. <div class="row">
  42. <div class="col-md-3">
  43. <p class="lead">Solar Tools</p>
  44. <div class="list-group">
  45. <a href="index.html" class="list-group-item active">Project Size</a>
  46. <a href="utility.html" class="list-group-item">Utility Rates</a>
  47. <a href="bill.html" class="list-group-item">Bill Fetch</a>
  48. <a href="irradiance.html" class="list-group-item">Solar Irradiance</a>
  49. <a href="system.html" class="list-group-item">System Production</a>
  50. <a href="incentives.html" class="list-group-item">Financial Incentives</a>
  51. <a href="costs.html" class="list-group-item">Installation Cost</a>
  52. </div>
  53. </div>
  54. <div class="col-md-9">
  55. <h2>Project Size</h2>
  56. <div class="thumbnail">
  57. <div style="width: 100%; height: 500px;" id="mapDiv"></div>
  58. <div id="mapDiv45"></div>
  59. <div style="display: none;" id="mapDivImage"> </div>
  60. <div id="draggable"><img src="img/compass.png"></div>
  61. <div class="caption-full">
  62. <form class="form-inline">
  63. ADDRESS:
  64. <br />
  65. <div class="form-group first-row">
  66. <input id="address" class="form-control" size="60" value="1306 SC-72, Greenwood, SC 29649" />
  67. </div>
  68. <div class="form-group form-groups btn-group">
  69. <input type="button" class="btn btn-default" href="javascript:void(0)" id="update_address" value="Update Address">
  70. </div>
  71. <div class="form-group">
  72. <input type="button" class="btn btn-success" id="calculate" VALUE="Run Model">
  73. </div>
  74. </form>
  75. </div>
  76. </div>
  77. <div class="well">
  78. <div class="text-right">
  79. <a id="show-hide-advanced-fields" href="#">Show / Hide Advanced Fields</a>
  80. </div>
  81. <div id="advanced-fields">
  82. <div id='mapcontrols'>
  83. <input type="button" class="btn btn-default" id="btnTerrain" value="Terrain">
  84. <input type="button" class="btn btn-default" id="btnRoadmap" value="Roadmap">
  85. <input type="button" class="btn btn-default" id="btnSatellite" value="Satellite">
  86. <input type="button" class="btn btn-default" id="btnHybrid" value="Hybrid">
  87. <input type="button" class="btn btn-default" id="btnCompass" value="Compass">
  88. <input type="button" class="btn btn-default" id="btnInspector" value="Inspect Roof">
  89. </div>
  90. <br />
  91. INPUTS:
  92. <br />
  93. <div class="form-group" style="margin-right: 20px;">
  94. Orientation of the roof: <input id="azimuth" size="4" value="180" /> (<a href="#" onclick="$('#draggable').toggle();">Show/Hide Compass</a>)
  95. </div>
  96. <div class="form-group" style="margin-right: 20px;">
  97. Tilt: <input id="tilt" size="4" value="20" />
  98. </div>
  99. <div class="form-group" style="margin-right: 20px;">
  100. PPA Price: <input id="ppa" size="4" value="0.15" />
  101. </div>
  102. <br><br>
  103. </div>
  104. <div id="results"></div>
  105. <div id="results2"></div>
  106. <div id="results3"></div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. <div class="container">
  112. <hr>
  113. <footer>
  114. <div class="row">
  115. <div class="col-lg-12">
  116. <p><small>Data provided by <a href="http://www.nrel.gov/" target="_blank">NREL</a></small></p>
  117. </div>
  118. </div>
  119. </footer>
  120. </div>
  121. <script src="js/bootstrap.min.js"></script>
  122. </body>
  123. </html>