codefortulsa · jdungan · Aug 29, 2014 · Aug 28, 2014 · Aug 28, 2014 · Aug 28, 2014
diff --git a/bpz/static/css/bpz.css b/bpz/static/css/bpz.css
@@ -0,0 +1,9 @@
+body {
+  padding-top:70px;
+}
+#map-canvas {
+  height:250px;
+}
+#btn-neighborhood {
+  font-size:2em;
+}
diff --git a/bpz/static/css/bpz.js b/bpz/static/css/bpz.js
diff --git a/bpz/static/js/home.js b/bpz/static/js/home.js
@@ -0,0 +1,26 @@
+// Google Maps JavaScript SDK
+function initialize() {
+  var mapOptions = {
+    center: new google.maps.LatLng(36.1314, -95.9372),
+    zoom: 8
+  };
+  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
+}
+google.maps.event.addDomListener(window, 'load', initialize);
+
+// Location
+$(document).ready(function() {
+  getLocation();
+});
+
+function getLocation() {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(processLocation);
+  }
+}
+
+function processLocation(position) {
+  var latitude = position.coords.latitude;
+  var longitude = position.coords.longitude;
+  window.location = '#latitude=' + latitude + '&longitude=' + longitude;
+}
diff --git a/bpz/templates/bpz/about.jinja2 b/bpz/templates/bpz/about.jinja2
@@ -0,0 +1,22 @@
+{% extends "bpz/base.jinja2" %}
+
+{% block head_title %}Neighborhood Plugin{% endblock %}
+
+{% block body_container %}
+<div class="container">
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
+      <h2 class="page-header">About</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lobortis justo, quis maximus urna placerat ut. Aenean porttitor lorem id maximus molestie. Integer mattis justo vulputate augue auctor, eu feugiat diam accumsan. Nullam metus elit, tincidunt sit amet ex malesuada, condimentum luctus dolor. Pellentesque eu aliquet neque. Integer gravida odio nibh, at fringilla enim maximus dictum. Proin tortor lectus, aliquet quis cursus a, malesuada sit amet massa. Sed efficitur finibus massa, pretium ornare dui venenatis tincidunt. Vivamus eget nisi tempus, aliquet ex sed, commodo dui. Aliquam sollicitudin tortor at varius blandit. Quisque condimentum congue lacus non commodo. Fusce dignissim ornare risus non tincidunt. Nulla fringilla rutrum dui, id iaculis velit dapibus nec.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
+      <a href="/" class="btn btn-success btn-block" id="btn-neighborhood">Find my Neighborhood&raquo;</a>
+    </div>
+
+  </div>
+
+</div><!-- /.container -->
+
+{% endblock %}
diff --git a/bpz/templates/bpz/base.jinja2 b/bpz/templates/bpz/base.jinja2
@@ -8,6 +8,7 @@
 
     <link href="{{ static('vendor/bootstrap-3.2.0-dist/css/bootstrap.min.css') }}" rel="stylesheet">
     <link href="{{ static('vendor/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css') }}" rel="stylesheet">
+    <link href="{{ static('css/bpz.css') }}" rel="stylesheet">
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
@@ -17,17 +18,38 @@
     <![endif]-->
   </head>
   <body>
+    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Neighborhood Plugin</a>
+        </div>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li><!-- if home page li class="active"--><a href="/">Home</a></li>
+            <li><!-- if about page li class="active"--><a href="/about">About</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+
     {% block body_container -%}
     {% block body_title_elem -%}
     <h1>{% block body_title %}TODO: set block title{% endblock %}</h1>
     {%- endblock body_title_elem %}
     {% block content %}{% endblock %}
     {%- endblock body_container %}
 
-    {% block body_js -%}
     <script src="{{ static('vendor/jquery/jquery-1.11.1.min.js') }}"></script>
     <script src="{{ static('vendor/bootstrap-3.2.0-dist/js/bootstrap.min.js') }}"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4JQW3kTKVpzBIroZ1mXguTPt2J1F1zXU"></script>
     <script src="{{ static('js/bpz.js') }}"></script>
+    {% block body_js -%}
     {%- endblock body_js %}
   </body>
 </html>
diff --git a/bpz/templates/bpz/home.jinja2 b/bpz/templates/bpz/home.jinja2
@@ -3,14 +3,24 @@
 {% block head_title %}Neighborhood Plugin{% endblock %}
 
 {% block body_container %}
-<div class="jumbotron">
-  <div class="container">
-    <h1 class="smaller">Welcome to the Neighborhood Plugin</h1>
-    <p>
-        Hi, this is some information about what this app is, what it does,
-        and why it needs to use your GPS to find your neighborhood.
-        <a href="#">Learn more&gt;&gt;</a>
-    </p>
+<div class="container">
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
+      <div id="map-canvas">
+      </div>
+    </div>
   </div>
-</div>
+  <div class="row">
+    <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
+      <p>Hi, this is some information about what this app is, what it does, and why it needs to use your GPS to find your neighborhood. <a href="#">Learn more&raquo;</a></p>
+    </div>
+
+  </div>
+
+</div><!-- /.container -->
+
 {% endblock %}
+
+{% block body_js -%}
+<script src="{{ static('js/home.js') }}"></script>
+{%- endblock body_js %}
diff --git a/bpz/urls.py b/bpz/urls.py
@@ -7,4 +7,7 @@
     url(r'^$', TemplateView.as_view(
         template_name='bpz/home.jinja2'),
         name='home'),
+    url(r'^about', TemplateView.as_view(
+        template_name='bpz/about.jinja2'),
+        name='about'),
 )