@ -4,33 +4,48 @@
< 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 {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
background-image: url(<?php
$bgs = glob("img/bg/*.jpg");
echo $bgs[array_rand($bgs, 1)];
?>);
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;
}
}
#mapbox {
width: 100vw;
#mapcard {
flex-grow: 9999;
max-height: 90vh;
height: 800px;
}
#mapbox .mapboxgl-user-location-dot, #mapbox .mapboxgl-user-location-accuracy-circle {
pointer-events: none;
}
#wordbox {
width: 500px;
max-width: 75vw;
font-size: 110%;
}
#header {
display: flex;
justify-content: space-between;
@ -40,10 +55,18 @@
flex-wrap: wrap;
}
#header h1 {
padding: 0;
margin: 0;
margin-right: 1em;
.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 {
@ -88,16 +111,48 @@
< / head >
< body >
< div id = "page-container" >
< div id = "header" >
< h1 > FixPhrase< / h1 >
< div > < input type = "text" placeholder = "FixPhrase Words" id = "wordbox" / > < button onclick = "dolookup();" > Find< / button > < / div >
< div > Locate any place on Earth with just four words. < a href = "https://source.netsyms.com/Netsyms/fixphrase.com/src/branch/master/FixPhrase.lib.php" > Free and open source< / a > .
< 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 >
< 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" >
< div class = "card-body" >
< div class = "input-group mb-2 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 mb-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 >
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 >
< / div >
< div class = "card mb-2" id = "mapcard" >
< a name = "map" > < / a >
< div class = "card-body p-2" >
< div id = "mapbox" class = "w-100 h-100" > < / div >
< / div >
< / div >
< div id = "mapbox" > < / div >
< / div >
< script >
@ -105,11 +160,12 @@
createMap();
};
function dolookup() {
function dolookup(words ) {
$.getJSON("lookup.php", {
words: $("#wordbox").val()
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])
