index.html | searchcode

/public/index.html

https://bitbucket.org/sikaredem/repa
HTML | 153 lines | 107 code | 22 blank | 24 comment | 0 complexity | acad73b94c9e0518bc609c13a8ed86bd MD5 | raw file

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8"/>

    <!-- Set the viewport width to device width for mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

    <title>Environmental Data</title>
    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    
    

    <!-- Included CSS Files -->
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/globals.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/typography.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/grid.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/ui.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/buttons.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/tabs.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/navbar.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/forms.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/orbit.css">
    <link rel="stylesheet" href="zf/stylesheets/foundation-style/reveal.css">
    <link rel="stylesheet" href="zf/stylesheets/app.css">

    <script src="zf/javascripts/foundation/modernizr.foundation.js"></script>


    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <link rel="stylesheet" href="css/app.css"/>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      #map-canvas {
        margin: 0;
        padding: 0;
        height: 55%;
      }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
  $(function() {
        $( "#dialog" ).dialog({
          autoOpen: false,
          show: {
            effect: "blind",
            duration: 100
          },
          hide: {
            effect: "explode",
            duration: 100
          }
        });
    });
  </script>
   
</head>
<body ng-controller="HouseCtrl">
<div id="map-canvas"></div>

<div class="row">
    <ul class="breadcrumbs">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="unavailable"><a href="#">Hackathon</a></li>
    </ul>

    <header id="">
        <h3>Map Overlays | Environmental Data</h3>

        <form name="myForm">
            Leaf area index: <input type="checkbox" ng-click="overlayLeaf()" ng-model="leaf">
            Flooding risk: <input type="checkbox" ng-click="overlayFlood()" ng-model="flood" >
            Carbon map: <input type="checkbox" ng-click="overlayCarbon()" ng-model="carbon" > 
            Pollution: <input type="checkbox" ng-click="overlayPollution()" ng-model="pollution" > <br/>
        </form>

    </header>

    <header id="header">
        <h3>Property Search</h3>
    </header>

    <!-- SOME DUMMY content to get started -->
   <!-- <div class="span10">
        <div class="panel" ng-repeat="house in houses">
           <!--<span data-tooltip class="has-tip" 
              color="#FF0000" title="Warning this house has a high risk of flooding">House ID: {{house.guid}}<br>
           </span>--><!--
            Latitude: {{house.latitude}}<br>
            Longitude: {{house.longitude}}<br>
            Bedrooms:{{house.num_bedrooms}}<br>
            Address: {{house.address}}<br>
            Price: {{house.price}}<br>
            <img src="{{house.thumbnail_url}}"></img><br>
            Flood risk: {{house.flood_risk}}<br>
            Green density: {{house.green_percentage}}<br>
            <button class="opener" ng-click="openDialog($index)">Open Dialog</button>
        </div>
    </div>-->
    <!-- Row Layout for forms -->
    <form>
        <label>Search for a property</label>
        <input type="text" ng-model="postCode" placeholder="Postcode"/>

        <div class="row">
            <div class="three columns">
                <label>Max price</label>
                <input type="text" ng-model="maxPrice" placeholder="£250,000"/>
            </div>
            <div class="three columns">
                <label>Min price</label>
                <input type="text" ng-model="minPrice" placeholder="£80,000"/>
            </div>
            <div class="three columns">
                <label>Type</label>
                <input type="text" ng-model="type" placeholder="House"/>
            </div>
            <div class="three columns">
                <label>Min Bedrooms</label>
                <input type="text" ng-model="minBedrooms" placeholder="2"/>
            </div>
        </div>
            <a ng-click="zooplaSubmit()" class="button">Submit</a>
    </form>
</div>
    
<div id="dialog" title="Basic dialog" ng-model="dialog_house">
    <img border="0" src="{{dialog_house.image_url}}" width="304" height="228">
    <label> <b>House Price:</b> {{dialog_house.price}} </label> <br />
    <label> <b>Bedrooms: </b>{{dialog_house.num_bedrooms}}  </label> <br />
    <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 />
    <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 />
</div>
 
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>