Week 2: Extended Functionality
This commit is contained in:
parent
10058827d5
commit
0d31b6d150
|
@ -5,7 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pacific Trails Resort :: Yurts</title>
|
||||
<link rel="stylesheet" href="pacific.css">
|
||||
<link rel="stylesheet" href="atlantic.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
|
||||
|
@ -23,7 +23,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="yurts.html">Yurts</a></li>
|
||||
<li><a href="tackle.html">Yurts</a></li>
|
||||
<li><a href="activities.html">Activities</a></li>
|
||||
<li><a href="reservations.html">Reservations</a></li>
|
||||
</ul>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
After Width: | Height: | Size: 224 KiB |
60
index.html
60
index.html
|
@ -2,25 +2,27 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta name="description"
|
||||
content="Pacific Trails Resort, a special lodging company on the California North Coast.Rent Yurts, go hiking, or relax in the heated pool">
|
||||
content="Atlantic Fishing Resort, a special lodging company on the Namibian West Coast. Rent fishing equipment, go exploring, or relax in the heated pool">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pacific Trails Resort</title>
|
||||
<link rel="stylesheet" href="pacific.css">
|
||||
<title>Atlantic Fishing Resort</title>
|
||||
<link rel="stylesheet" href="atlantic.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<script src="/js/geo.js"></script>
|
||||
|
||||
<!-- Completed files -->
|
||||
</head>
|
||||
<body>
|
||||
<header id="wrapper">
|
||||
<h1>Pacific Trails Resort</h1>
|
||||
<h1>Atlantic Fishing Resort</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="yurts.html">Yurts</a></li>
|
||||
<li><a href="tackle.html">Tackle</a></li>
|
||||
<li><a href="activities.html">Activities</a></li>
|
||||
<li><a href="reservations.html">Reservations</a></li>
|
||||
</ul>
|
||||
|
@ -39,25 +41,51 @@
|
|||
</video>
|
||||
<article>
|
||||
<h3>What We Offer</h3>
|
||||
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North
|
||||
Coast.
|
||||
Relax in serenity with panoramic views of the Pacific Ocean.</p>
|
||||
<p><span class="resort">Atlantic Fishing Resort</span> offers a special lodging experience on the Namibian West
|
||||
Coast.<br/>
|
||||
Relax in serenity with panoramic views of the Atlantic Ocean.</p>
|
||||
<ul>
|
||||
<li>Private yurts with decks overlooking the ocean</li>
|
||||
<li>Activities lodge with fireplace and gift shop</li>
|
||||
<li>Private apartments with beach front views</li>
|
||||
<li>Activities in and around town</li>
|
||||
<li>shops in walking distance</li>
|
||||
<li>Nightly fine dining at the Overlook Cafe</li>
|
||||
<li>Heated outdoor pool and whirlpool</li>
|
||||
<li>Guided hiking tours of the redwoods</li>
|
||||
<li>Heated jacuzzi and sauna</li>
|
||||
<li>Guided fishing tours</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<div style="padding: 50px 0;">
|
||||
<div class="flex-container" style="display: flex; align-items: flex-start; justify-content: space-evenly;">
|
||||
<div>
|
||||
<h3>Find us</h3>
|
||||
<h4>Using our GEO Location service</h4>
|
||||
<p>Allow us to check your location and we will send you tips to find us based on your current
|
||||
location.</p>
|
||||
<button type="button" id="toggleWatchBtn" style="margin-bottom: 20px;">Check my location</button>
|
||||
<!--Position information will be inserted here-->
|
||||
<div id="result" ></div>
|
||||
</div>
|
||||
<div style="padding: 50px 0px; ">
|
||||
<img id="default-image" src="/images/default.jpg" alt="Atlantic Holiday Resort"
|
||||
style="width: 100%;">
|
||||
<img id="book-flight-image" src="/images/book_flight.jpg" alt="Book a flight to Namibia"
|
||||
style="width: 100%; display: none;">
|
||||
<img id="rent-car-image" src="/images/rent_car.jpg" alt="Rent a car in Namibia"
|
||||
style="width: 100%; display: none;">
|
||||
<img id="walking-distance-image" src="/images/walking_distance.jpg" alt="Walking in the dunes"
|
||||
style="width: 100%; display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<span class="resort">Pacific Trails Resort</span><br>
|
||||
12010 Pacific Trails Road<br>
|
||||
Zephyr, CA 95555<br><br>
|
||||
<span class="resort">Atlantic Fishing Resort</span><br>
|
||||
12010 Atlantic Fishing Road<br>
|
||||
Hentiesbaai, Namibia 95555<br><br>
|
||||
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
|
||||
<span id="desktop">888-555-5555</span><br><br>
|
||||
Copyright © 2016 Pacific Trails Resort<br>
|
||||
Copyright © 1999 Atlantic Fishing Resort<br>
|
||||
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
@ -0,0 +1,106 @@
|
|||
// Geo Location code adapted from: https://www.tutorialrepublic.com/html-tutorial/html5-geolocation.php
|
||||
|
||||
// Set global variable
|
||||
var watchID;
|
||||
var prevLat;
|
||||
var prevLong;
|
||||
// the latitude and longitude of Henties Bay Namibia
|
||||
var prevLatHome = -22.1147;
|
||||
var prevLongHome = 14.2732;
|
||||
// the latitude and longitude of Windhoek Namibia
|
||||
// var prevLatHome = -22.5608807;
|
||||
// var prevLongHome = 17.0657549;
|
||||
|
||||
// JavaScript program to calculate Distance Between
|
||||
// Two Points on Earth
|
||||
function getDistance(lat1, lat2, lon1, lon2) {
|
||||
|
||||
// The math module contains a function
|
||||
// named toRadians which converts from
|
||||
// degrees to radians.
|
||||
lon1 = lon1 * Math.PI / 180;
|
||||
lon2 = lon2 * Math.PI / 180;
|
||||
lat1 = lat1 * Math.PI / 180;
|
||||
lat2 = lat2 * Math.PI / 180;
|
||||
|
||||
// Haversine formula
|
||||
let dlon = lon2 - lon1;
|
||||
let dlat = lat2 - lat1;
|
||||
let a = Math.pow(Math.sin(dlat / 2), 2)
|
||||
+ Math.cos(lat1) * Math.cos(lat2)
|
||||
* Math.pow(Math.sin(dlon / 2), 2);
|
||||
|
||||
let c = 2 * Math.asin(Math.sqrt(a));
|
||||
|
||||
// Radius of earth in kilometers. Use 3956
|
||||
// for miles
|
||||
let r = 6371;
|
||||
|
||||
// calculate the result and round
|
||||
return Math.round((c * r));
|
||||
}
|
||||
|
||||
function showPosition() {
|
||||
if (navigator.geolocation) {
|
||||
watchID = navigator.geolocation.watchPosition(successCallback);
|
||||
} else {
|
||||
alert("Sorry, your browser does not support HTML5 geolocation.");
|
||||
}
|
||||
}
|
||||
|
||||
function successCallback(position) {
|
||||
document.getElementById("toggleWatchBtn").innerHTML = "Stop checking my location";
|
||||
|
||||
// Check position has been changed or not before doing anything
|
||||
if (prevLat != position.coords.latitude || prevLong != position.coords.longitude) {
|
||||
|
||||
// Set previous location
|
||||
prevLat = position.coords.latitude;
|
||||
prevLong = position.coords.longitude;
|
||||
// get the distance
|
||||
let distance = getDistance(prevLat, prevLatHome, prevLong, prevLongHome);
|
||||
// set add details
|
||||
basedOnDistance(distance);
|
||||
}
|
||||
}
|
||||
|
||||
function basedOnDistance(distance) {
|
||||
// set notice
|
||||
let positionInfo = "Your current position is (Latitude: " + prevLat + ", Longitude: " + prevLong + ") which is " + distance + " kilometers away!";
|
||||
// update the result
|
||||
document.getElementById("result").innerHTML = positionInfo;
|
||||
document.getElementById("default-image").style.display = 'none';
|
||||
// show ad
|
||||
if (distance > 1000) {
|
||||
// they are far away and need to book a flight
|
||||
document.getElementById("book-flight-image").style.display = 'block';
|
||||
document.getElementById("rent-car-image").style.display = 'none';
|
||||
document.getElementById("walking-distance-image").style.display = 'none';
|
||||
} else if (distance < 10) {
|
||||
// they are close enough to walk
|
||||
document.getElementById("book-flight-image").style.display = 'none';
|
||||
document.getElementById("rent-car-image").style.display = 'none';
|
||||
document.getElementById("walking-distance-image").style.display = 'block';
|
||||
} else {
|
||||
// they are far, but in driving distance and need to book a rental vehicle
|
||||
document.getElementById("book-flight-image").style.display = 'none';
|
||||
document.getElementById("rent-car-image").style.display = 'block';
|
||||
document.getElementById("walking-distance-image").style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function startWatch() {
|
||||
document.getElementById("toggleWatchBtn").addEventListener('click', function () {
|
||||
if (watchID) {
|
||||
document.getElementById("toggleWatchBtn").innerHTML = "Start checking my location";
|
||||
navigator.geolocation.clearWatch(watchID);
|
||||
watchID = false;
|
||||
} else {
|
||||
document.getElementById("toggleWatchBtn").innerHTML = "Acquiring Geo Location...";
|
||||
showPosition();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialise the whole system (above)
|
||||
window.onload = startWatch;
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pacific Trails Resort :: Reservations</title>
|
||||
<link rel="stylesheet" href="pacific.css">
|
||||
<link rel="stylesheet" href="atlantic.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
|
||||
|
@ -23,7 +23,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="yurts.html">Yurts</a></li>
|
||||
<li><a href="tackle.html">Yurts</a></li>
|
||||
<li><a href="activities.html">Activities</a></li>
|
||||
<li><a href="reservations.html">Reservations</a></li>
|
||||
</ul>
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pacific Trails Resort :: Yurts</title>
|
||||
<link rel="stylesheet" href="pacific.css">
|
||||
<link rel="stylesheet" href="atlantic.css">
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
|
||||
|
@ -23,7 +23,7 @@
|
|||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="yurts.html">Yurts</a></li>
|
||||
<li><a href="tackle.html">Yurts</a></li>
|
||||
<li><a href="activities.html">Activities</a></li>
|
||||
<li><a href="reservations.html">Reservations</a></li>
|
||||
</ul>
|
Loading…
Reference in New Issue