Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <style>
- html {
- height: 100%;
- }
- * {
- margin: 0;
- padding: 0;
- }
- body {
- font: normal 85% Arial, Helvetica, sans-serif;
- background-color: #848482;
- }
- p {
- padding: 0 0 10px 0;
- color: #FFF;
- line-height: 1.7em;
- font-size: 100%
- }
- img {
- border: 0;
- }
- h1,h2,h3,h4,h5,h6 {
- font: normal 175% Arial, Helvetica, sans-serif;
- color: #FFF;
- text-shadow: 1px 1px #1D1D1D;
- letter-spacing: -1px;
- margin: 0 0 10px 0;
- }
- h2 {
- font: normal 165% Arial, Helvetica, sans-serif;
- }
- h3 {
- font: normal 130% Arial, Helvetica, sans-serif;
- }
- h4,h5,h6 {
- margin: 0;
- padding: 0 0 0px 0;
- font: normal 150% Arial, Helvetica, sans-serif;
- line-height: 1.5em;
- }
- h5,h6 {
- font: normal 95% Arial, Helvetica, sans-serif;
- color: #888;
- padding-bottom: 15px;
- }
- .form-field { padding: 5px; }
- .form-field span { display: inline-block; margin-right: 10px; }
- .form-field input[type="radio"] { position: relative; top: 3px; }
- a {
- color: #FFF;
- font-weight: bold;
- background: transparent;
- outline: none;
- text-decoration: underline;
- }
- a:hover {
- text-decoration: none;
- }
- ul {
- margin: 2px 0 22px 30px;
- line-height: 1.7em;
- font-style: normal;
- font-size: 100%;
- }
- ol {
- margin: 8px 0 22px 20px;
- }
- ol li {
- margin: 0 0 11px 0;
- }
- #main,#header,#banner,#menubar,#site_content,#footer,#content_bottom {
- margin-left: auto;
- margin-right: auto;
- }
- #main {
- background: transparent;
- }
- #header {
- width: 960px;
- height: 120px;
- background: transparent;
- }
- #banner {
- width: 960px;
- position: relative;
- height: 50px;
- padding: 15px 0 0 0;
- background: transparent;
- }
- #menubar {
- width: 960px;
- height: 50px;
- text-align: center;
- margin: 0 auto;
- background: #0043A8;
- background: -moz-linear-gradient(#43A9FF, #0043A8);
- background: -o-linear-gradient(#43A9FF, #0043A8);
- background: -webkit-linear-gradient(#43A9FF, #0043A8);
- border-radius: 15px 15px 0px 0px;
- -moz-border-radius: 15px 15px 0px 0px;
- -webkit-border: 15px 15px 0px 0px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- }
- #welcome {
- width: 960px;
- float: left;
- height: 50px;
- margin: 0 auto;
- padding-left: 20px;
- background: transparent;
- }
- #welcome_slogan {
- width: 960px;
- float: left;
- height: 50px;
- margin: 0 auto;
- padding-left: 20px;
- background: transparent;
- }
- #welcome H1 {
- font: normal 300% Arial, Helvetica, sans-serif;
- letter-spacing: -3px;
- color: #FFF;
- text-shadow: 1px 1px #1D1D1D;
- }
- #welcome_slogan H1 {
- font: normal 200% Arial, Helvetica, sans-serif;
- letter-spacing: -2px;
- color: #FFF;
- text-shadow: 1px 1px #1D1D1D;
- }
- ul#menu {
- margin: 0;
- margin: 0 0 0 20px;
- }
- ul#menu li {
- padding: 0 0 0 0px;
- list-style: none;
- margin: 2px 0 0 0;
- display: inline;
- background: transparent;
- }
- ul#menu li a {
- float: left;
- font: bold 120% Arial, Helvetica, sans-serif;
- text-align: center;
- color: #FFF;
- text-decoration: none;
- height: 24px;
- text-shadow: 0px -1px 0px #000;
- padding: 16px 20px 10px 20px;
- background: transparent;
- }
- ul#menu li.current a {
- color: #FFF;
- background: #323232;
- text-shadow: none;
- }
- ul#menu li:hover a {
- color: #FFF;
- background: #323232;
- text-shadow: none;
- }
- #site_content {
- width: 940px;
- padding-left: 20px;
- overflow: hidden;
- margin: 0 auto;
- background: #323232;
- border-radius: 0px 0px 15px 15px;
- -moz-border-radius: 0px 0px 15px 15px;
- -webkit-border: 0px 0px 15px 15px;
- }
- .sidebar_container {
- float: left;
- margin: 10px 20px 0 0;
- width: 215px;
- padding: 0;
- }
- .sidebar {
- float: left;
- width: 250px;
- padding: 0;
- margin-top: 10px;
- margin-bottom: 10px;
- }
- .sidebar_item {
- font: normal 100% Arial, Helvetica, sans-serif;
- width: 215px;
- }
- .sidebar h2 {
- padding: 5px 0 0 10px;
- font: normal 140% Arial, Helvetica, sans-serif;
- height: 30px;
- text-shadow: 0px -1px 0px #000;
- color: #fff;
- background: #0043A8;
- background: -moz-linear-gradient(#43A9FF, #0043A8);
- background: -o-linear-gradient(#43A9FF, #0043A8);
- background: -webkit-linear-gradient(#43A9FF, #0043A8);
- border-radius: 15px 15px 15px 15px;
- -moz-border-radius: 15px 15px 15px 15px;
- -webkit-border: 15px 15px 15px 15px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- }
- #content {
- width: 680px;
- margin-bottom: 20px;
- float: left;
- }
- .content_item {
- width: 680px;
- margin-top: 20px;
- margin-bottom: 20px;
- }
- .content_image {
- position: relative;
- float: left;
- width: 100px;
- height: 120px;
- margin: 0 20px 10px 0;
- -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
- -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
- box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
- background-position: 50% 50%;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- }
- .content_container {
- width: 320px;
- padding: 5px;
- margin-right: 10px;
- float: left;
- }
- #content_bottom {
- width: 960px;
- height: 160px;
- text-align: center;
- }
- #content_bottom p {
- color: #000;
- text-shadow: 1px 1px #FFF;
- }
- #content_bottom h4 {
- color: #000;
- text-shadow: none;
- }
- .content_bottom_container_box {
- width: 295px;
- padding: 5px;
- text-align: center;
- margin: 20px 0 10px 10px;
- float: left;
- }
- .content_bottom_container_boxl {
- width: 295px;
- padding: 5px;
- text-align: center;
- margin: 20px 0 10px 10px;
- float: left;
- }
- #footer {
- width: 960px;
- height: 20px;
- padding-top: 20px;
- text-align: center;
- background: transparent;
- color: #1D1D1D;
- text-shadow: 1px 1px #FFF;
- }
- #footer a,#footer a:hover {
- color: #1D1D1D;
- text-decoration: none;
- padding-bottom: 20px;
- }
- #footer a:hover {
- text-decoration: underline;
- }
- .button_small {
- font: normal 110% Arial, Helvetica, sans-serif;
- height: 15px;
- width: 90px;
- padding: 5px 5px 10px 7px;
- background: #0043A8;
- background: -moz-linear-gradient(#43A9FF, #0043A8);
- background: -o-linear-gradient(#43A9FF, #0043A8);
- background: -webkit-linear-gradient(#43A9FF, #0043A8);
- border-radius: 15px 15px 15px 15px;
- -moz-border-radius: 15px 15px 15px 15px;
- -webkit-border: 15px 15px 15px 15px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- }
- .button_small a {
- color: #FFF;
- padding-left: 5px;
- }
- .form_settings {
- margin: 15px 0 0 0;
- }
- .form_settings p {
- padding: 0 0 4px 0;
- }
- .form_settings span {
- float: left;
- width: 280px;
- text-align: left;
- }
- .form_settings input,.form_settings textarea {
- padding: 2px;
- width: 299px;
- font: 100% arial;
- border: 1px solid #E5E5DB;
- background: #FFF;
- color: #47433F;
- }
- .form_settings input[type="checkbox"] {
- padding: 2px 0;
- width: 15px;
- font: 100% arial;
- border: 0;
- background: #FFF;
- color: #47433F;
- margin: 28px 0;
- }
- label {
- margin:10px;
- }
- .form_settings .submit {
- font: 100% arial;
- width: 99px;
- margin: 0 0 0 206px;
- height: 26px;
- padding: 2px 0 3px 0;
- cursor: pointer;
- background: #0043A8;
- background: -moz-linear-gradient(#43A9FF, #0043A8);
- background: -o-linear-gradient(#43A9FF, #0043A8);
- background: -webkit-linear-gradient(#43A9FF, #0043A8);
- border-radius: 7px 7px 7px 7px;
- -moz-border-radius: 7px 7px 7px 7px;
- -webkit-border: 7px 7px 7px 7px;
- -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
- color: #FFF;
- }
- #mapPlaceholder {
- height: 400px;
- width: 700px;
- }
- </style>
- <link rel="stylesheet" type="text/css" media="screen"
- href="/GUARDS II/css/style.css" />
- <meta http-equiv="content-type"
- content="application/xhtml+xml; charset=UTF-8" />
- <link
- href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
- rel="stylesheet" type="text/css" />
- <script type="text/javascript"
- src="http://maps.google.com/maps/api/js?sensor=false"></script>
- <script src="/Scripts/test.js" type="text/javascript"></script>
- <script>
- var ReverseGeocode = function() {
- var geocoder, map, marker;
- geocoder = new google.maps.Geocoder();
- function GeoCode(latlng) {
- // Make the Geocode request
- geocoder
- .geocode(
- {
- 'latLng' : latlng
- },
- function(results, status) {
- // Check the Geoeode status before proceeding
- if (status == google.maps.GeocoderStatus.OK) {
- // Marker at the returned address
- if (results[0]) {
- map.setZoom(16);
- marker = new google.maps.Marker({
- map : map,
- draggable : true
- });
- marker.setPosition(latlng);
- map.panTo(latlng);
- }
- // Update the 'startingPointCoords' field
- var address = (results[0].formatted_address);
- document
- .getElementById('startingPointCoords').value = address;
- }
- });
- }
- return {
- Init : function() {
- // Check if geolocation is supported
- if (navigator.geolocation) {
- navigator.geolocation
- .getCurrentPosition(showCurrentLocation);
- } else {
- alert("Geolocation API not supported.");
- }
- // Get the user's current location
- function showCurrentLocation(position) {
- var latitude = position.coords.latitude;
- var longitude = position.coords.longitude;
- var coords = new google.maps.LatLng(latitude, longitude);
- // Create map
- var myOptions = {
- zoom : 8,
- center : coords,
- mapTypeId : 'roadmap'
- };
- map = new google.maps.Map(document
- .getElementById('mapPlaceholder'), myOptions);
- var locations = [
- ['Hopple St.', 39.138668, -84.533647, 1],
- ['South of I-74', 39.199170, -84.476327, 2],
- ['I-74', 39.299170, -84.406327, 3],
- ['North of I-74', 39.399170, -84.336327, 4]
- ];
- var marker, i;
- var infowindow = new google.maps.InfoWindow();
- for (i = 0; i < locations.length; i++) {
- marker = new google.maps.Marker({
- position: new google.maps.LatLng(locations[i][1], locations[i][2]),
- map: map
- });
- google.maps.event.addListener(marker, 'click', (function(marker, i) {
- return function() {
- infowindow.setContent(locations[i][0]);
- infowindow.open(map, marker);
- };
- })(marker, i));
- // Get the address
- GeoCode(coords);
- }
- }},
- };
- }();
- // Function to populate dropdown according to which button user selects
- function populateDropdown(highway) {
- switch (highway) {
- case "I71":
- document.forms[0].highwayDropdown.length = 8;
- document.forms[0].highwayDropdown.disabled = false;
- document.forms[0].highwayDropdown.options[0].text = 'Montgomery Rd';
- document.forms[0].highwayDropdown.options[0].value = 'montgomery';
- document.forms[0].highwayDropdown.options[1].text = 'Dana Ave';
- document.forms[0].highwayDropdown.options[1].value = 'dana';
- document.forms[0].highwayDropdown.options[2].text = 'Smith Rd';
- document.forms[0].highwayDropdown.options[2].value = 'smith';
- document.forms[0].highwayDropdown.options[3].text = 'Robertson Ave';
- document.forms[0].highwayDropdown.options[3].value = 'robertson';
- document.forms[0].highwayDropdown.options[4].text = 'SR-562 (Norwood Lateral)';
- document.forms[0].highwayDropdown.options[4].value = 'sr56271';
- document.forms[0].highwayDropdown.options[5].text = 'Kennedy Ave';
- document.forms[0].highwayDropdown.options[5].value = 'kennedy';
- document.forms[0].highwayDropdown.options[6].text = 'Red Bank Rd';
- document.forms[0].highwayDropdown.options[6].value = 'redBank';
- document.forms[0].highwayDropdown.options[7].text = 'N of Stewart Rd';
- document.forms[0].highwayDropdown.options[7].value = 'stewart';
- document.forms[0].highwayDropdown.options[8].text = 'Euclid Ave';
- document.forms[0].highwayDropdown.options[8].value = 'euclid';
- document.forms[0].highwayDropdown.options[9].text = 'Montgomery Rd (Kenwood)';
- document.forms[0].highwayDropdown.options[9].value = 'montgomeryKenwood';
- document.forms[0].highwayDropdown.options[9].text = 'SR-126 (RRCC)';
- document.forms[0].highwayDropdown.options[9].value = 'sr12671';
- document.getElementById('destinationCoords').value = address;
- break;
- case "I75":
- document.forms[0].highwayDropdown.length = 11;
- document.forms[0].highwayDropdown.disabled = false;
- document.forms[0].highwayDropdown.options[0].text = 'Hopple';
- document.forms[0].highwayDropdown.options[0].value = 'hopple';
- document.forms[0].highwayDropdown.options[1].text = 'South of I-74';
- document.forms[0].highwayDropdown.options[1].value = 'southI74';
- document.forms[0].highwayDropdown.options[2].text = 'I-74';
- document.forms[0].highwayDropdown.options[2].value = 'I74';
- document.forms[0].highwayDropdown.options[3].text = 'North of I-74';
- document.forms[0].highwayDropdown.options[3].value = 'northI74';
- document.forms[0].highwayDropdown.options[4].text = 'Mitchell';
- document.forms[0].highwayDropdown.options[4].value = 'mitchell';
- document.forms[0].highwayDropdown.options[5].text = 'Vine';
- document.forms[0].highwayDropdown.options[5].value = 'vine';
- document.forms[0].highwayDropdown.options[6].text = 'SR-562 (Norwood Lateral)';
- document.forms[0].highwayDropdown.options[6].value = 'sr56275';
- document.forms[0].highwayDropdown.options[7].text = 'N of Towne';
- document.forms[0].highwayDropdown.options[7].value = 'towne';
- document.forms[0].highwayDropdown.options[8].text = 'North of Paddock';
- document.forms[0].highwayDropdown.options[8].value = 'paddock';
- document.forms[0].highwayDropdown.options[9].text = 'SR-126 (RRCC)';
- document.forms[0].highwayDropdown.options[9].value = 'sr12675';
- document.forms[0].highwayDropdown.options[10].text = 'N of Galbraith Rd';
- document.forms[0].highwayDropdown.options[10].value = 'galbraith';
- break;
- default:
- document.forms[0].highwayDropdown.length = 1;
- document.forms[0].highwayDropdown.options[0].text = 'Select a highway first';
- document.forms[0].highwayDropdown.disabled = true;
- }
- }
- </script>
- <title>GUARDS II</title>
- </head>
- <body onload="ReverseGeocode.Init()">
- <div id="main">
- <div id="header">
- <div id="banner">
- <div id="welcome">
- <h1>GUARDS II</h1>
- </div>
- <div id="welcome_slogan">
- <h1>Goal-driven Users and Agents for Recognition, Discovery
- and Synthesis of knowledge</h1>
- </div>
- </div>
- </div>
- <!-- end header -->
- <div id="menubar">
- <ul id="menu">
- <li class="current"><a href="Home.jsp">Home</a></li>
- <li><a href="ProjectBackground.jsp">Project Background</a></li>
- <li><a href="PastBids.jsp">Past Bids</a></li>
- <li><a href="AboutGuards.jsp">About</a></li>
- </ul>
- </div>
- <!-- end menu bar -->
- <div id="site_content">
- <div class="sidebar_container">
- <div class="sidebar">
- <div class="sidebar_item">
- <h2>How to use our website</h2>
- <p>Begin by selecting a location from I-75 or I-71 on the
- right. Select your destination from the dropdown menu.</p>
- </div>
- </div>
- <div class="sidebar">
- <div class="sidebar_item">
- <h2>Map</h2>
- <p>Based on predictive analytics, we have provided you with
- the shortest path to your destination.</p>
- </div>
- </div>
- <div class="sidebar">
- <div class="sidebar_item">
- <h2>Options below map</h2>
- <p>Below the map shows your options to see why this path was
- chosen and if you have insight into why this is a bad route.</p>
- </div>
- </div>
- </div>
- <div id="content">
- <div class="content_container">
- <p>Starting Point</p>
- <div>
- <input name="convertedAddress" type="text"
- id="startingPointCoords" size="40" />
- </div>
- </div>
- <div class="content_container">
- <p>Destination</p>
- <form action="this.html" method="post">
- <p>
- <input id="I71" type="radio" name="highway" value="I71"
- onclick="populateDropdown('I71')" /><label for="I71">I-71</label><br />
- <input id="I75" type="radio" name="highway" value="I75"
- onclick="populateDropdown('I75')" /><label for="I75">I-75</label><br />
- <select disabled="disabled" name="highwayDropdown">
- <option>Select a highway first</option>
- </select>
- </p>
- </form>
- </div>
- <div>
- <div id="mapPlaceholder"></div>
- </div>
- <div class="content_container">
- <p>Why was this route chosen?</p>
- <div class="button_small">
- <a href="RouteInfo.jsp">Read more</a>
- </div>
- </div>
- <div class="content_container">
- <p>Add bid</p>
- <div class="button_small">
- <select id="selectIncident">
- <option value="wreak">Wreak</option>
- <option value="traffic">Traffic</option>
- </select>
- </div>
- </div>
- </div>
- <!-- end content -->
- </div>
- <!-- end site content -->
- </div>
- <!-- end main -->
- <div id="footer">
- <H1>Parterns</H1>
- <a href="http://www.edaptive.com/">Edaptive Computing</a> | <a
- href="wbi-icc.com/centers-services/discovery-lab">AFRL Discovery
- Lab</a> | <a href="www.afrl.af.mil/">AFRL</a>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement