Make it look good
This commit is contained in:
parent
ed1b5b504c
commit
0decfc410d
BIN
img/bg/mark-harpur-K2s_YE031CA-unsplash.jpg
Normal file
BIN
img/bg/mark-harpur-K2s_YE031CA-unsplash.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1019 KiB |
110
index.php
110
index.php
@ -4,33 +4,48 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>FixPhrase</title>
|
<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" />
|
<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/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/maplibre-gl/dist/mapbox-gl.js"></script>
|
||||||
<script src="js/map_maplibre.js"></script>
|
<script src="js/map_maplibre.js"></script>
|
||||||
<script src="js/map.js"></script>
|
<script src="js/map.js"></script>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100vh;
|
background-image: url(<?php
|
||||||
width: 100vw;
|
$bgs = glob("img/bg/*.jpg");
|
||||||
padding: 0;
|
echo $bgs[array_rand($bgs, 1)];
|
||||||
margin: 0;
|
?>);
|
||||||
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
#mapbox {
|
|
||||||
width: 100vw;
|
@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;
|
flex-grow: 9999;
|
||||||
|
max-height: 90vh;
|
||||||
|
height: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mapbox .mapboxgl-user-location-dot, #mapbox .mapboxgl-user-location-accuracy-circle {
|
#mapbox .mapboxgl-user-location-dot, #mapbox .mapboxgl-user-location-accuracy-circle {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wordbox {
|
|
||||||
width: 500px;
|
|
||||||
max-width: 75vw;
|
|
||||||
font-size: 110%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@ -40,10 +55,18 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header h1 {
|
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
|
||||||
padding: 0;
|
border-top-color: rgba(255, 255, 255, 0.4);
|
||||||
margin: 0;
|
border-width: 0.5rem 0.5rem 0;
|
||||||
margin-right: 1em;
|
}
|
||||||
|
.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 {
|
#page-container {
|
||||||
@ -88,16 +111,48 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="page-container">
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
||||||
<div id="header">
|
<div class="container-fluid">
|
||||||
<h1>FixPhrase</h1>
|
<a class="navbar-brand" href=".">FixPhrase</a>
|
||||||
<div><input type="text" placeholder="FixPhrase Words" id="wordbox"/> <button onclick="dolookup();">Find</button></div>
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<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="navbar-toggler-icon"></span>
|
||||||
<span class="taptext">Tap</span><span class="clicktext">Click</span> the map to
|
</button>
|
||||||
get the unique phrase for that spot. Type a phrase into the search box to
|
|
||||||
pinpoint it on the map.</div>
|
<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>
|
||||||
<div id="mapbox"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -105,11 +160,12 @@
|
|||||||
createMap();
|
createMap();
|
||||||
};
|
};
|
||||||
|
|
||||||
function dolookup() {
|
function dolookup(words) {
|
||||||
$.getJSON("lookup.php", {
|
$.getJSON("lookup.php", {
|
||||||
words: $("#wordbox").val()
|
words: words
|
||||||
}, function (resp) {
|
}, function (resp) {
|
||||||
if (resp.status == "OK") {
|
if (resp.status == "OK") {
|
||||||
|
location.hash = "#map";
|
||||||
new mapboxgl.Popup()
|
new mapboxgl.Popup()
|
||||||
.setLngLat({lat: resp.coords[0], lng: resp.coords[1]})
|
.setLngLat({lat: resp.coords[0], lng: resp.coords[1]})
|
||||||
.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
||||||
|
|||||||
@ -12,7 +12,7 @@ function maplibreMap() {
|
|||||||
|
|
||||||
var map = new mapboxgl.Map({
|
var map = new mapboxgl.Map({
|
||||||
container: 'mapbox',
|
container: 'mapbox',
|
||||||
style: "https://maps.netsyms.net/styles/osm-liberty/style.json",
|
style: "https://maps.netsyms.net/styles/klokantech-terrain/style.json",
|
||||||
//attributionControl: false,
|
//attributionControl: false,
|
||||||
interactive: true,
|
interactive: true,
|
||||||
pitch: 0,
|
pitch: 0,
|
||||||
@ -27,10 +27,10 @@ function maplibreMap() {
|
|||||||
latitude: coordinates.lat,
|
latitude: coordinates.lat,
|
||||||
longitude: coordinates.lng
|
longitude: coordinates.lng
|
||||||
}, function (resp) {
|
}, function (resp) {
|
||||||
new mapboxgl.Popup()
|
var popup = new mapboxgl.Popup();
|
||||||
.setLngLat(coordinates)
|
popup.setLngLat(coordinates);
|
||||||
.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
popup.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
||||||
.addTo(map);
|
popup.addTo(map);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user