<!DOCTYPE html> <html lang="en"> <head> <!-- Meta --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>These3Words Map</title> <!-- Style --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <style> body { padding-top: 40px; } </style> </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"> Find a location anywhere in the world identified by three simple words. </p> <p class="text-warning">This is a very early pre-alpha release. Don't expect anything to work properly or reproducible. Especially since the underlying word-list will most likely change soon.</p> <p id="input3wordsContainer"> <input type="text" class="form-control" id="input3words" placeholder="spitting-ripple-fontanel"> </p> <p> <button id="button3words" class="btn btn-lg btn-primary">Find on Map</button> </p> </main> <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> <script> (function() { var default3words = 'spitting-ripple-fontanel'; 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>