PageRenderTime 59ms CodeModel.GetById 28ms RepoModel.GetById 1ms app.codeStats 0ms

/public/index.html

https://bitbucket.org/sikaredem/repa
HTML | 153 lines | 107 code | 22 blank | 24 comment | 0 complexity | acad73b94c9e0518bc609c13a8ed86bd MD5 | raw file
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <!-- Set the viewport width to device width for mobile -->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  7. <title>Environmental Data</title>
  8. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  9. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  10. <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  11. <!-- Included CSS Files -->
  12. <link rel="stylesheet" href="zf/stylesheets/foundation-style/globals.css">
  13. <link rel="stylesheet" href="zf/stylesheets/foundation-style/typography.css">
  14. <link rel="stylesheet" href="zf/stylesheets/foundation-style/grid.css">
  15. <link rel="stylesheet" href="zf/stylesheets/foundation-style/ui.css">
  16. <link rel="stylesheet" href="zf/stylesheets/foundation-style/buttons.css">
  17. <link rel="stylesheet" href="zf/stylesheets/foundation-style/tabs.css">
  18. <link rel="stylesheet" href="zf/stylesheets/foundation-style/navbar.css">
  19. <link rel="stylesheet" href="zf/stylesheets/foundation-style/forms.css">
  20. <link rel="stylesheet" href="zf/stylesheets/foundation-style/orbit.css">
  21. <link rel="stylesheet" href="zf/stylesheets/foundation-style/reveal.css">
  22. <link rel="stylesheet" href="zf/stylesheets/app.css">
  23. <script src="zf/javascripts/foundation/modernizr.foundation.js"></script>
  24. <!-- IE Fix for HTML5 Tags -->
  25. <!--[if lt IE 9]>
  26. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  27. <![endif]-->
  28. <link rel="stylesheet" href="css/app.css"/>
  29. <style>
  30. html, body {
  31. margin: 0;
  32. padding: 0;
  33. height: 100%;
  34. }
  35. #map-canvas {
  36. margin: 0;
  37. padding: 0;
  38. height: 55%;
  39. }
  40. </style>
  41. <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  42. <script>
  43. $(function() {
  44. $( "#dialog" ).dialog({
  45. autoOpen: false,
  46. show: {
  47. effect: "blind",
  48. duration: 100
  49. },
  50. hide: {
  51. effect: "explode",
  52. duration: 100
  53. }
  54. });
  55. });
  56. </script>
  57. </head>
  58. <body ng-controller="HouseCtrl">
  59. <div id="map-canvas"></div>
  60. <div class="row">
  61. <ul class="breadcrumbs">
  62. <li><a href="#">Home</a></li>
  63. <li><a href="#">About</a></li>
  64. <li class="unavailable"><a href="#">Hackathon</a></li>
  65. </ul>
  66. <header id="">
  67. <h3>Map Overlays | Environmental Data</h3>
  68. <form name="myForm">
  69. Leaf area index: <input type="checkbox" ng-click="overlayLeaf()" ng-model="leaf">
  70. Flooding risk: <input type="checkbox" ng-click="overlayFlood()" ng-model="flood" >
  71. Carbon map: <input type="checkbox" ng-click="overlayCarbon()" ng-model="carbon" >
  72. Pollution: <input type="checkbox" ng-click="overlayPollution()" ng-model="pollution" > <br/>
  73. </form>
  74. </header>
  75. <header id="header">
  76. <h3>Property Search</h3>
  77. </header>
  78. <!-- SOME DUMMY content to get started -->
  79. <!-- <div class="span10">
  80. <div class="panel" ng-repeat="house in houses">
  81. <!--<span data-tooltip class="has-tip"
  82. color="#FF0000" title="Warning this house has a high risk of flooding">House ID: {{house.guid}}<br>
  83. </span>--><!--
  84. Latitude: {{house.latitude}}<br>
  85. Longitude: {{house.longitude}}<br>
  86. Bedrooms:{{house.num_bedrooms}}<br>
  87. Address: {{house.address}}<br>
  88. Price: {{house.price}}<br>
  89. <img src="{{house.thumbnail_url}}"></img><br>
  90. Flood risk: {{house.flood_risk}}<br>
  91. Green density: {{house.green_percentage}}<br>
  92. <button class="opener" ng-click="openDialog($index)">Open Dialog</button>
  93. </div>
  94. </div>-->
  95. <!-- Row Layout for forms -->
  96. <form>
  97. <label>Search for a property</label>
  98. <input type="text" ng-model="postCode" placeholder="Postcode"/>
  99. <div class="row">
  100. <div class="three columns">
  101. <label>Max price</label>
  102. <input type="text" ng-model="maxPrice" placeholder="£250,000"/>
  103. </div>
  104. <div class="three columns">
  105. <label>Min price</label>
  106. <input type="text" ng-model="minPrice" placeholder="£80,000"/>
  107. </div>
  108. <div class="three columns">
  109. <label>Type</label>
  110. <input type="text" ng-model="type" placeholder="House"/>
  111. </div>
  112. <div class="three columns">
  113. <label>Min Bedrooms</label>
  114. <input type="text" ng-model="minBedrooms" placeholder="2"/>
  115. </div>
  116. </div>
  117. <a ng-click="zooplaSubmit()" class="button">Submit</a>
  118. </form>
  119. </div>
  120. <div id="dialog" title="Basic dialog" ng-model="dialog_house">
  121. <img border="0" src="{{dialog_house.image_url}}" width="304" height="228">
  122. <label> <b>House Price:</b> {{dialog_house.price}} </label> <br />
  123. <label> <b>Bedrooms: </b>{{dialog_house.num_bedrooms}} </label> <br />
  124. <label> <b>Green density:</b><div class="progress large-6 {{dialog_house.green_color}} round"><span class="meter" style="width: {{dialog_house.green_percentage}}%"></span></div></label> <br />
  125. <label> <b>Flood risk:</b><div class="progress large-6 {{dialog_house.flood_color}} round"><span class="meter" style="width: {{dialog_house.flood_risk}}%"></span></div></label><br />
  126. </div>
  127. <script src="lib/angular/angular.js"></script>
  128. <script src="js/app.js"></script>
  129. <script src="js/controllers.js"></script>
  130. </body>
  131. </html>