Rearrange code, add some license headers, add app download modal

master
Skylar Ittner 2 years ago
parent 1def759b43
commit 84a72426dd

@ -1,6 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<!--
Copyright 2021 Netsyms Technologies.
Redistribution and use in source and binary forms, with or without modification, are permitted
provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of conditions
and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of
conditions and the following disclaimer in the documentation and/or other materials provided with
the distribution.
3. Neither the name of the copyright holder nor the names of its contributors may be used to
endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FixPhrase</title>
@ -8,6 +33,7 @@
<link rel=“canonical” href=“https://fixphrase.com” />
<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" />
<link rel="stylesheet" href="style.css" />
<meta property="og:title" content="FixPhrase">
<meta property="og:description" content="Describe and locate any place on Earth with just four words.">
<meta property="og:image" content="https://fixphrase.com/img/socialcard.png">
@ -20,92 +46,6 @@
<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;
}
.mapboxgl-ctrl-attrib, .mapboxgl-ctrl-attrib-inner a {
color: black !important;
}
.nav-pills .nav-link {
background-color: rgba(50,50,50,0.7);
}
.nav-pills .nav-link.active {
background-color: rgba(0,0,0,0.9);
}
#page-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.copyonclick {
cursor: pointer;
}
.clicktext {
display: none;
}
@media (pointer:fine) {
.taptext {
display: none;
}
.clicktext {
display: initial;
}
}
</style>
<!-- Matomo -->
<script type="text/javascript">
@ -140,6 +80,9 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#appModal">Android/iOS App</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://source.netsyms.com/Netsyms/fixphrase.com/wiki/How-It-Works">How it Works</a>
</li>
@ -191,141 +134,46 @@
</div>
</div>
<script>
window.onload = function () {
$("#mapbox").css("height", "calc(100% - " + $("#map-style-switcher").css("height") + ")");
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 + ")");
map.resize();
// Load style preference from cookie
var cookies = decodeURIComponent(document.cookie).split("; ");
cookies.forEach(val => {
if (val.indexOf("mapstyle") === 0) {
var style = val.substring(9);
setMapStyle(style);
$("#map-style-switcher a.nav-link").removeClass("active");
$("#map-style-switcher a.nav-link[data-style=" + style + "]").addClass("active");
}
});
$("body").on("click", ".copyonclick", function () {
var copyitem = $(this);
var copytext = copyitem.text();
if (copytext == "Copied to clipboard!") {
// prevent copying copied text if double-clicked
return;
}
navigator.clipboard.writeText(copytext).then(() => {
copyitem.text("Copied to clipboard!");
setTimeout(function () {
copyitem.text(copytext);
}, 1000);
});
});
$("body").on("keypress", "#wordbox,#wordbox-mobile", function (e) {
if (e.which == 13) {
dolookup($(this).val());
}
});
$("#map-style-switcher").on("click", "a.nav-link", function (e) {
e.preventDefault();
$("#map-style-switcher a.nav-link").removeClass("active");
setMapStyle($(this).data("style"));
$(this).addClass("active");
// Save style preference in cookie
var date = new Date();
date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000));
document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString();
});
// Read URL hash and try to parse it
window.addEventListener('hashchange', function () {
parseWindowHash();
}, false);
// Don't try to read hash until map is loaded, this prevents errors
var checkIfMapLoaded = function () {
if (map.isStyleLoaded()) {
parseWindowHash();
} else {
setTimeout(checkIfMapLoaded, 200);
}
};
checkIfMapLoaded();
};
function dolookup(words) {
try {
words = words.trim().toLowerCase().replace(/\s+/g, ' ');
if (!/^[a-z ]+?$/i.test(words)) {
// Not a FixPhrase, run a search
$.getJSON("lookup.php", {
search: words
}, function (resp) {
if (resp.status == "OK") {
lookupAndShowCoords(resp.coords[0], resp.coords[1]);
} else {
alert("Error: " + resp.msg);
}
});
return;
}
var coords = FixPhrase.decode(words);
showLocationPopup(coords[0], coords[1], coords[3], coords[2]);
$("#wordbox").val(coords[3]);
$("#wordbox-mobile").val(coords[3]);
var zoomlevel = 18;
switch (coords[2]) {
case 0.1:
zoomlevel = 10;
break;
case 0.01:
zoomlevel = 13;
break;
}
map.animateMapIn(coords[0], coords[1], zoomlevel);
} catch (e) {
alert(e);
}
}
<div class="modal fade" id="appModal" tabindex="-1" aria-labelledby="appModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="appModalLabel">Get the App</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
The FixPhrase app is easier to use than the website on small screens, and
adds easy sharing options for your location. It has a dark mode and extra
map styles, and is fully open source.
Your location doesn't leave your device and all calculations are done locally.
<div>
<a class="btn btn-info m-1" href="https://play.google.com/store/apps/details?id=com.fixphrase.app">
Android (Google Play)
</a>
<a class="btn btn-info m-1" href="https://apps.apple.com/us/app/fixphrase/id1598775970">
iPhone/iPad (App Store)
</a>
</div>
<div>
<a class="btn btn-info m-1 btn-sm" href="https://repo.netsyms.com/">
F-Droid repository
</a>
<a class="btn btn-info m-1 btn-sm" href="https://build.netsyms.net/job/FixPhrase%20App/">
Android (APK)
</a>
<a class="btn btn-info m-1 btn-sm" href="https://source.netsyms.com/Netsyms/FixPhraseApp">
Source Code
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
function parseWindowHash() {
var hash = window.location.hash.substr(1);
if (/^-?[0-9]{1,2}\.?[0-9]*,-?[0-9]{1,3}\.?[0-9]*$/.test(hash)) {
var lat = hash.split(",")[0];
var lon = hash.split(",")[1];
lat = (Math.round(lat * 10000) / 10000);
lon = (Math.round(lon * 10000) / 10000);
lookupAndShowCoords(lat, lon);
} else if (/^[a-z]+\-[a-z]+\-?[a-z]+?\-?[a-z]+?$/.test(hash)) {
var words = hash.replaceAll("-", " ");
dolookup(words);
$("#wordbox").val(words);
$("#wordbox-mobile").val(words);
} else if (/^[a-z]+\ [a-z]+\ ?[a-z]+?\ ?[a-z]+?$/.test(decodeURI(hash))) {
var words = decodeURI(hash);
dolookup(words);
}
}
</script>
<script src="js/app.js"></script>
</body>
</html>

@ -0,0 +1,160 @@
/*
Copyright 2021 Netsyms Technologies.
Redistribution and use in source and binary forms, with or without modification, are permitted
provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of conditions
and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of
conditions and the following disclaimer in the documentation and/or other materials provided with
the distribution.
3. Neither the name of the copyright holder nor the names of its contributors may be used to
endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
window.onload = function () {
$("#mapbox").css("height", "calc(100% - " + $("#map-style-switcher").css("height") + ")");
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 + ")");
map.resize();
// Load style preference from cookie
var cookies = decodeURIComponent(document.cookie).split("; ");
cookies.forEach(val => {
if (val.indexOf("mapstyle") === 0) {
var style = val.substring(9);
setMapStyle(style);
$("#map-style-switcher a.nav-link").removeClass("active");
$("#map-style-switcher a.nav-link[data-style=" + style + "]").addClass("active");
}
});
$("body").on("click", ".copyonclick", function () {
var copyitem = $(this);
var copytext = copyitem.text();
if (copytext == "Copied to clipboard!") {
// prevent copying copied text if double-clicked
return;
}
navigator.clipboard.writeText(copytext).then(() => {
copyitem.text("Copied to clipboard!");
setTimeout(function () {
copyitem.text(copytext);
}, 1000);
});
});
$("body").on("keypress", "#wordbox,#wordbox-mobile", function (e) {
if (e.which == 13) {
dolookup($(this).val());
}
});
$("#map-style-switcher").on("click", "a.nav-link", function (e) {
e.preventDefault();
$("#map-style-switcher a.nav-link").removeClass("active");
setMapStyle($(this).data("style"));
$(this).addClass("active");
// Save style preference in cookie
var date = new Date();
date.setTime(date.getTime() + (90 * 24 * 60 * 60 * 1000));
document.cookie = "mapstyle=" + $(this).data("style") + "; expires=" + date.toUTCString();
});
// Read URL hash and try to parse it
window.addEventListener('hashchange', function () {
parseWindowHash();
}, false);
// Don't try to read hash until map is loaded, this prevents errors
var checkIfMapLoaded = function () {
if (map.isStyleLoaded()) {
parseWindowHash();
} else {
setTimeout(checkIfMapLoaded, 200);
}
};
checkIfMapLoaded();
};
function dolookup(words) {
try {
words = words.trim().toLowerCase().replace(/\s+/g, ' ');
if (!/^[a-z ]+?$/i.test(words)) {
// Not a FixPhrase, run a search
$.getJSON("lookup.php", {
search: words
}, function (resp) {
if (resp.status == "OK") {
lookupAndShowCoords(resp.coords[0], resp.coords[1]);
} else {
alert("Error: " + resp.msg);
}
});
return;
}
var coords = FixPhrase.decode(words);
showLocationPopup(coords[0], coords[1], coords[3], coords[2]);
$("#wordbox").val(coords[3]);
$("#wordbox-mobile").val(coords[3]);
var zoomlevel = 18;
switch (coords[2]) {
case 0.1:
zoomlevel = 10;
break;
case 0.01:
zoomlevel = 13;
break;
}
map.animateMapIn(coords[0], coords[1], zoomlevel);
} catch (e) {
alert(e);
}
}
function parseWindowHash() {
var hash = window.location.hash.substr(1);
if (/^-?[0-9]{1,2}\.?[0-9]*,-?[0-9]{1,3}\.?[0-9]*$/.test(hash)) {
var lat = hash.split(",")[0];
var lon = hash.split(",")[1];
lat = (Math.round(lat * 10000) / 10000);
lon = (Math.round(lon * 10000) / 10000);
lookupAndShowCoords(lat, lon);
} else if (/^[a-z]+\-[a-z]+\-?[a-z]+?\-?[a-z]+?$/.test(hash)) {
var words = hash.replaceAll("-", " ");
dolookup(words);
$("#wordbox").val(words);
$("#wordbox-mobile").val(words);
} else if (/^[a-z]+\ [a-z]+\ ?[a-z]+?\ ?[a-z]+?$/.test(decodeURI(hash))) {
var words = decodeURI(hash);
dolookup(words);
}
}

@ -1,5 +1,31 @@
<?php
/*
Copyright 2021 Netsyms Technologies.
Redistribution and use in source and binary forms, with or without modification, are permitted
provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of conditions
and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of
conditions and the following disclaimer in the documentation and/or other materials provided with
the distribution.
3. Neither the name of the copyright holder nor the names of its contributors may be used to
endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
require_once __DIR__ . "/FixPhrase.lib.php";
header("Access-Control-Allow-Origin: *");
@ -60,6 +86,9 @@ try {
]
];
} else if (!empty($_GET["search"])) {
/*
* Please don't access this API endpoint if forking the code. Substitute for a different API.
*/
$resp = file_get_contents("https://data.netsyms.net/v1/gis/geocode/?address=" . urlencode($_GET["search"]));
$data = json_decode($resp, true);

@ -0,0 +1,109 @@
/*
Copyright 2021 Netsyms Technologies.
Redistribution and use in source and binary forms, with or without modification, are permitted
provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of conditions
and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list of
conditions and the following disclaimer in the documentation and/or other materials provided with
the distribution.
3. Neither the name of the copyright holder nor the names of its contributors may be used to
endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
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;
}
.mapboxgl-ctrl-attrib, .mapboxgl-ctrl-attrib-inner a {
color: black !important;
}
.nav-pills .nav-link {
background-color: rgba(50,50,50,0.7);
}
.nav-pills .nav-link.active {
background-color: rgba(0,0,0,0.9);
}
#page-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.copyonclick {
cursor: pointer;
}
.clicktext {
display: none;
}
@media (pointer:fine) {
.taptext {
display: none;
}
.clicktext {
display: initial;
}
}
Loading…
Cancel
Save