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-17 10:44:55 +00:00
< / head >
< body >
< 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-17 13:45:04 +00:00
Find a location anywhere in the world identified by three simple 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-17 10:44:55 +00:00
< p id = "input3wordsContainer" >
2014-11-18 15:05:44 +00:00
< input type = "text" class = "form-control" id = "input3words" placeholder = "Your address OR opulent-crusade-zaar" >
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
< script >
(function() {
2014-11-18 15:05:44 +00:00
var default3words = 'opulent-crusade-zaar';
2014-11-17 10:44:55 +00:00
var threewordsField = document.getElementById('input3words');
document.getElementById('button3words').addEventListener('click', function(evt) {
var threewords = threewordsField.value;
if (threewords.length === 0) {
threewords = default3words;
}
if (/\w+-\w+-\w+/.test(threewords)) {
window.location = '/' + threewords;
} else {
document.getElementById('input3wordsContainer').classList.add('has-error');
}
});
})();
< / script >
< / div >
< / body >
< / html >
