soundtrcked.html modified

mapview modified
a lot of images and fonts added

mapview.html

@@ -16,6 +16,9 @@
     html, body, #map {
       height: 100%;
     }
+    #myModal {
+      style={background-color: white !important;} 
+    }
 
   </style>
   <style>
@@ -56,13 +59,26 @@
           <li class="active" style="color: white;"><a href="#">Home</a></li>
           <li><a href="#about" style="color: white;">About</a></li>
           <li><a href="#contact" style="color: white;">Contact</a></li>
+          <li><a href="#" class="btn" id="openBtn">Drop!</a></li>
         </ul>
       </div>
     </div>
   </nav>
 
-    <div id="map">
+  <div id="map">
   </div>
+        <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">×</button>
+              <h3>Modal header</h3>
+          </div>
+          <div class="modal-body">
+            <p>My modal content here…</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">Close</button>
+          </div>
+        </div>
 
 <!-- not https!! so using local version of same file
 	<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
@@ -74,6 +90,11 @@
   <!-- Placed at the end of the document so the pages load faster -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+  <script src="modallist.js">
+  </script>
+  <script src="soundtracked.js">
+  </script>
+
 	<script>
 		var map = L.map('map').setView([40.74486725088441, -73.98499131202698], 17);
 		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
@@ -83,8 +104,8 @@
 			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
 		id: 'mapbox.streets'
     }).addTo(map);
-
-	var marker = L.marker([40.74486725088441, -73.98499131202698]).addTo(map);
+    //TODO
+    //var marker = L.marker([40.74486725088441, -73.98499131202698], {icon: bluePointer}).addTo(map);
 
 	// show a dropdown on the map
 	// var legend = L.control({position: 'topright'});
@@ -97,9 +118,6 @@
 	// legend.addTo(map);
 
 	</script>
-	<script src="soundtracked.js">
-
-
-	</script>
+
 </body>
 </html>

modallist.js

@@ -0,0 +1,12 @@
+$(document).ready(function() {
+
+    $('#openBtn').click(function(){
+
+    	$('.modal-body').load('test2.html',function(result){
+    	  $('#myModal').modal({show:true});
+  		});
+
+
+	});
+
+});

soundtracked.html

@@ -10,13 +10,22 @@
 	@font-face {
 	    font-family: TokyoOneSolid;
 	    src: url(fonts/Tokyo-OneSolid.otf);
-
 	}
+  @font-face {
+      font-family: Deftone;
+      src: url(fonts/DEFTONE.ttf);
+  }
 	.tokyocustomfont { 
 		font-family: TokyoOneSolid;
 		font-size: 30px;
     	color: white;
 	}
+  .rock {
+    font-family: Deftone;
+    font-size: 30px;
+    color: #e50041;
+  }
+
 	</style>
 	<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
@@ -36,7 +45,7 @@
 
     <div id="todoapp">
 	    <div class="title">
-        <h1 class="tokyocustomfont" style="background-color: #e50041;">SOUNDTRACKED</h1>
+        <h1 class="tokyocustomfont" style="background-color: #e50041; color: white;">SOUNDTRACKED</h1>
 </div>
 
 <table cellpadding="0" cellspacing="0" height="100%" width="100%">
@@ -90,7 +99,6 @@ <h2>Sign Up</h2>
         Signed in as <%= Parse.User.current().escape("username") %> (<a href="#" class="log-out">Log out</a>)
       </div>
 
-      <img src="images/welcome2.png" height="630" width="357" boarder="0">
 
       <div class="starter-template">
 <button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('rushing')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color: #f7a51b;">
@@ -147,25 +155,27 @@ <h2>Sign Up</h2>
         Signed in as <%= Parse.User.current().escape("username") %> (<a href="#" class="log-out">Log out</a>)
       </div>
 
-      <img src="images/welcome2.png" height="630" width="357" boarder="0">
 
-      <div class="starter-template">
-<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('rushing')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color: #f7a51b;">
-				RUSHING
-			</button>
-			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('striding')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color: #bccb42;">
-				STRIDING
-			</button>
-			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('walking')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color:#5fb25f;">
-				WALKING
-			</button>
-			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('strolling')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color:#4cb6a8">
-				STROLLING
-			</button>
-			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('lounging')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color:#0098a8">
-				LOUNGING
-			</button>
-
+      <div class="starter-template" style="background-image: url(images/background.jpg);">
+      <img src="images/avatar.png"></img>
+      <p class="rock"> Welcome back </p>
+      <p class="rock"> "What's your speed? "</p>
+
+        <button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('rushing')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color: #f7a51b;">
+  				RUSHING
+  			</button>
+  			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('striding')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color: #bccb42;">
+  				STRIDING
+  			</button>
+  			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('walking')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color:#5fb25f;">
+  				WALKING
+  			</button>
+  			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('strolling')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color:#4cb6a8">
+  				STROLLING
+  			</button>
+  			<button type="button" class="btn btn-lg btn-block" onclick="openWindowWithPost('lounging')" style="margin-bottom: 15px; font-family: Helvetica Neue; font-weight: bold; color: #fff; background-color:#0098a8">
+  				LOUNGING
+  			</button>
 		</div>
 
 //     <div class="section">

soundtracked.js

@@ -1,7 +1,6 @@
 var blueNote = L.icon({
     iconUrl: 'images/bluenote.png',
     shadowUrl: 'images/shadownote.png',
-
     //iconSize:     [38, 95], // size of the icon
     //shadowSize:   [50, 64], // size of the shadow
     iconAnchor:   [12, 60], // point of the icon which will correspond to marker's location
@@ -11,14 +10,19 @@ var blueNote = L.icon({
 var yellowNote = L.icon({
     iconUrl: 'images/yellownote.png',
     shadowUrl: 'images/shadownote.png',
-
     //iconSize:     [38, 95], // size of the icon
     //shadowSize:   [50, 64], // size of the shadow
     iconAnchor:   [12, 60], // point of the icon which will correspond to marker's location
     shadowAnchor: [4, 38],  // the same for the shadow
     popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
 });
 
+var bluePointer = L.icon({
+    iconUrl: 'images/bluePointer.png',
+    iconAnchor:   [12, 60], // point of the icon which will correspond to marker's location
+    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
+});
+
 function AddMarkersForSongsInTheMood(songs){
 	var markers = [];
 	for (var i in songs){
@@ -49,8 +53,6 @@ function GetJsonFile(chosenMood){
 		var items = [];
 		$.each( data, function( key, val ) {
 			var songs = GetSongsFromJson(val, chosenMood);
-
-
 			var markers = AddMarkersForSongsInTheMood(songs);
 
 			if (markers.length > 0){

test.html

@@ -0,0 +1,56 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
+        <meta charset="utf-8">
+        <title>Bootply snippet - Bootstrap Bootstrap Modal with AJAX</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
+    <!--     Line not working: -->
+
+          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+
+   <link href="css/starter-template.css" rel="stylesheet">
+
+    </head>
+
+    <!-- HTML code from Bootply.com editor -->
+
+    <body  >
+
+      <a href="#" class="btn" id="openBtn">Open modal</a>
+
+      <div id="map">
+      </div>
+
+        <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal">×</button>
+              <h3>Modal header</h3>
+          </div>
+          <div class="modal-body">
+            <p>My modal content here…</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+
+        <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script type='text/javascript' src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+        <script type='text/javascript'>
+        $(document).ready(function() {
+            $('#openBtn').click(function(){
+            $('.modal-body').load('test2.html',function(result){
+            $('#myModal').modal({show:true});
+        });
+        }); 
+        });
+        </script>
+
+
+
+
+    </body>
+</html>

test2.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
+        <meta charset="utf-8">
+        <title>Bootply snippet - Bootstent 1</title>
+       <style>
+       .bkgclr {
+        background-color: white !important;
+       }
+       </style>
+
+    </head>
+
+    <!-- HTML code from Bootply.com editor -->
+
+    <body class="bkgclr" >
+
+        <h2>One</h2>
+
+Here is some <strong>HTML</strong> content from another url. Nullam sapien massa, ullamcorper in tortor. 
+Aliquam mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
+
+<br><br>
+<a href="http://www.bootply.com/62805">Link 62805</a>
+<br>
+<a href="http://www.bootply.com/62805" target="ext">http://bootply.com/62805</a>
+<br>
+<a href="http://www.bootply.com/62742" target="ext"><strong>AJAX Content Demo</strong></a>
+
+
+
+
+    </body>
+</html>

test3.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+          <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
+
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  <link href="css/starter-template.css" rel="stylesheet">
+
+<!-- not https!! so using local version of same file
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
+-->
+
+</head>
+<body>
+
+
+     Hello hello
+
+</body>
+</html>