diff --git a/DWD_final_colordone/index.html b/DWD_final_colordone/index.html new file mode 100644 index 0000000..53fe3f5 --- /dev/null +++ b/DWD_final_colordone/index.html @@ -0,0 +1,155 @@ + + + + Accessible metro map + + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Accessible Metro Station Near Me

+

See stations nearby on the map, or search your location.

+
+
+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/DWD_final_colordone/script.js b/DWD_final_colordone/script.js new file mode 100644 index 0000000..5fce0e0 --- /dev/null +++ b/DWD_final_colordone/script.js @@ -0,0 +1,42 @@ + +$(document).ready(function(){ + $(".nav-tabs a").click(function(){ + $(this).tab('show'); + }); +}); + + +function initMap() { + var map = new google.maps.Map(document.getElementById('map'), { + center: {lat: -34.397, lng: 150.644}, + zoom: 16 + }); + var infoWindow = new google.maps.InfoWindow({map: map}); + + // Try HTML5 geolocation. + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(function(position) { + var pos = { + lat: position.coords.latitude, + lng: position.coords.longitude + }; + + infoWindow.setPosition(pos); + infoWindow.setContent('Location found.'); + map.setCenter(pos); + }, function() { + handleLocationError(true, infoWindow, map.getCenter()); + }); + } else { + // Browser doesn't support Geolocation + handleLocationError(false, infoWindow, map.getCenter()); + } +} + +function handleLocationError(browserHasGeolocation, infoWindow, pos) { + infoWindow.setPosition(pos); + infoWindow.setContent(browserHasGeolocation ? + 'Error: The Geolocation service failed.' : + 'Error: Your browser doesn\'t support geolocation.'); +} + diff --git a/DWD_final_colordone/style.css b/DWD_final_colordone/style.css new file mode 100644 index 0000000..d4922aa --- /dev/null +++ b/DWD_final_colordone/style.css @@ -0,0 +1,65 @@ + + #map { + height: 1000px; + + } + + .circleRed { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: red; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circleGreen { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: green; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circlePurple { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: purple; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circleBlue { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: blue; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circleOrange { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: orange; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} \ No newline at end of file