2014-11-17 10:44:55 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Meta -->
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2014-11-17 16:11:28 +00:00
< title > These3Words Map< / title >
2014-11-17 10:44:55 +00:00
<!-- Style -->
< link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" >
2014-11-18 09:10:18 +00:00
< link rel = "stylesheet" href = "/static/css/style.css" >
2014-11-18 13:37:48 +00:00
< script src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places" > < / script >
2014-11-18 14:40:05 +00:00
< script src = "/static/js/app.js" > < / script >
2014-11-17 10:44:55 +00:00
< / head >
2014-11-18 14:46:56 +00:00
< body >
2014-11-17 10:44:55 +00:00
< div class = "container" >
% if err:
< aside class = "alert alert-danger" role = "alert" > Error: {{ err }}< / aside >
% end
< main class = "jumbotron" >
< h1 > These3Words Map< / h1 >
< p class = "lead" >
2014-11-21 08:55:09 +00:00
Remember a location anywhere in the world with just three words.
2014-11-17 10:44:55 +00:00
< / p >
2014-11-18 15:05:44 +00:00
< p class = "text-warning" > This is hot off the press. We are still
finalising the word list so locations might not be
reproducible. So do not use it to mark the location of your
antarctic resupply drop quite yet!< / p >
2014-11-21 08:55:09 +00:00
< p >
< ul class = "lead" >
< li > Type in a location to find out the three words by which to remember it (try < i > 1600 Pennsylvania avenue ...< / i > )< / li >
< li > To find the location referenced by a set of three words given to you, type them in separated by a dash (try < i > scone-scud-inbox< / i > )< / li >
< li > Go straight to exploring the map by clicking the < i > Find on Map< / i > button< / li >
< / ul >
< / p >
2014-11-17 10:44:55 +00:00
< p id = "input3wordsContainer" >
2014-11-21 08:55:09 +00:00
< input type = "text" class = "form-control" id = "input3words" placeholder = "1600 Pennsylvania .. OR scone-scud-inbox" >
2014-11-17 10:44:55 +00:00
< / p >
< p >
< button id = "button3words" class = "btn btn-lg btn-primary" > Find on Map< / button >
< / p >
< / main >
2014-11-17 16:11:28 +00:00
< footer >
< p class = "text-center text-muted" > Made with ♥ by < a href = "https://betatim.github.io/" > Tim< / a > and < a href = "https://dun.gs" > Kevin< / a > . < a href = "https://github.com/betatim/these-3-words" > Fork it on GitHub< / a > .
< / footer >
2014-11-17 10:44:55 +00:00
< / div >
2014-11-18 14:40:05 +00:00
< script >
(function () {
var initialise = function () {
2014-11-21 08:55:09 +00:00
var default3words = 'scone-scud-inbox';
2014-11-18 14:40:05 +00:00
var searchbox = new google.maps.places.SearchBox(
(document.getElementById('input3words')));
2014-11-18 15:47:47 +00:00
2014-11-18 14:40:05 +00:00
google.maps.event.addListener(searchbox, 'places_changed', function() {
// Get the place details from the autocomplete object.
var places = searchbox.getPlaces();
if (places.length > 0) {
place = places[0];
These3Words.apiGetFromLatLng(place.geometry.location,
function(status, data) {
if (status >= 200 & & status < 400 ) {
window.location = "/" + data.three;
}
});
} else {
var words = document.getElementById('input3words').value;
if (/\w+-\w+-\w+/.test(words)) {
window.location = '/' + words;
}
}
});
2014-11-18 15:47:47 +00:00
document.getElementById('button3words').addEventListener('click', function(evt) {
var threewords = document.getElementById('input3words').value;
if (threewords.length === 0) {
threewords = default3words;
}
if (/\w+-\w+-\w+/.test(threewords)) {
window.location = '/' + threewords;
} else {
document.getElementById('input3wordsContainer').classList.add('has-error');
}
});
2014-11-18 14:40:05 +00:00
};
window.addEventListener('load', initialise);
}());
< / script >
2014-11-17 10:44:55 +00:00
< / body >
< / html >
