You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
188 lines
7.5 KiB
HTML
188 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FixPhrase</title>
|
|
<link rel="stylesheet" href="https://static.netsyms.net/bootstrap/5/bootstrap.quartz.min.css" />
|
|
<link rel="stylesheet" href="js/maplibre-gl/dist/mapbox-gl.css" />
|
|
<script src="https://static.netsyms.net/jquery/jquery.min.js"></script>
|
|
<script src="https://static.netsyms.net/bootstrap/5/bootstrap.bundle.min.js"></script>
|
|
<script src="js/map.js"></script>
|
|
<script src="js/maplibre-gl/dist/mapbox-gl.js"></script>
|
|
<script src="js/map_maplibre.js"></script>
|
|
<script src="js/map.js"></script>
|
|
<style>
|
|
|
|
body {
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@media (min-width: 1200px) and (max-width: 1499px) {
|
|
#page-container {
|
|
padding-left: 10rem;
|
|
padding-right: 10rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1500px) {
|
|
#page-container {
|
|
padding-left: 15rem;
|
|
padding-right: 15rem;
|
|
}
|
|
}
|
|
|
|
#mapcard {
|
|
flex-grow: 9999;
|
|
max-height: 90vh;
|
|
height: 800px;
|
|
}
|
|
|
|
#mapbox .mapboxgl-user-location-dot, #mapbox .mapboxgl-user-location-accuracy-circle {
|
|
pointer-events: none;
|
|
}
|
|
|
|
#header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
padding: 1em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
|
|
border-top-color: rgba(255, 255, 255, 0.4);
|
|
border-width: 0.5rem 0.5rem 0;
|
|
}
|
|
.mapboxgl-popup-content {
|
|
background-image: linear-gradient(125deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3) 70%);
|
|
box-shadow: inset 1px 1px rgba(255, 255, 255, 0.2), inset -1px -1px rgba(255, 255, 255, 0.1), 1px 3px 24px -1px rgba(0, 0, 0, 0.15);
|
|
background-color: transparent;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
background-clip: border-box;
|
|
color: black;
|
|
}
|
|
|
|
#page-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.clicktext {
|
|
display: none;
|
|
}
|
|
@media (pointer:fine) {
|
|
.taptext {
|
|
display: none;
|
|
}
|
|
.clicktext {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Matomo -->
|
|
<script type="text/javascript">
|
|
var _paq = window._paq = window._paq || [];
|
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function () {
|
|
var u = "https://analytics.netsyms.net/";
|
|
_paq.push(['setTrackerUrl', u + 'matomo.php']);
|
|
_paq.push(['setSiteId', '35']);
|
|
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
|
g.type = 'text/javascript';
|
|
g.async = true;
|
|
g.src = u + 'matomo.js';
|
|
s.parentNode.insertBefore(g, s);
|
|
})();
|
|
</script>
|
|
<!-- End Matomo Code -->
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href=".">FixPhrase</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://source.netsyms.com/Netsyms/fixphrase.com/src/branch/master/FixPhrase.lib.php">Open Source</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container mw-100" id="page-container">
|
|
<div class="card mb-2 mt-2 border-secondary">
|
|
<div class="card-header text-dark">
|
|
Locate any place on Earth with just four words.
|
|
<span class="taptext">Tap</span><span class="clicktext">Click</span> the map to
|
|
get the unique phrase for that spot. Type a phrase into the search box to
|
|
pinpoint it on the map.
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="input-group d-none d-md-flex">
|
|
<input class="form-control" type="text" placeholder="FixPhrase Words" id="wordbox"/>
|
|
<button class="btn btn-secondary" onclick="dolookup($('#wordbox').val());">Find on Map</button>
|
|
</div>
|
|
<div class="d-grid d-md-none gap-2">
|
|
<input class="form-control" type="text" placeholder="FixPhrase Words" id="wordbox-mobile"/>
|
|
<button class="btn btn-secondary btn-block" onclick="dolookup($('#wordbox-mobile').val());">Find on Map</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card mb-2 border-secondary" id="mapcard">
|
|
<a name="map"></a>
|
|
<div class="card-body p-2">
|
|
<div id="mapbox" class="w-100 h-100"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = function () {
|
|
createMap();
|
|
|
|
var bgs = [
|
|
"dale-nibbe-GR09HcWwP-w-unsplash.jpg",
|
|
"hide-obara-VzWx1l2LuIA-unsplash.jpg",
|
|
"john-fowler-jcbq3qWpKoo-unsplash.jpg",
|
|
"mark-harpur-K2s_YE031CA-unsplash.jpg",
|
|
"renns-art-TXhxOXHN1EE-unsplash.jpg",
|
|
"solotravelgoals-7kLufxYoqWk-unsplash.jpg"
|
|
];
|
|
var bgimg = bgs[Math.floor(Math.random() * bgs.length)];
|
|
$("body").css("background-image", "url(./img/bg/" + bgimg + ")");
|
|
};
|
|
|
|
function dolookup(words) {
|
|
$.getJSON("lookup.php", {
|
|
words: words
|
|
}, function (resp) {
|
|
if (resp.status == "OK") {
|
|
location.hash = "#map";
|
|
new mapboxgl.Popup()
|
|
.setLngLat({lat: resp.coords[0], lng: resp.coords[1]})
|
|
.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
|
.addTo(map);
|
|
map.animateMapIn(resp.coords[0], resp.coords[1], 18);
|
|
} else {
|
|
alert(resp.msg);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|