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 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;
|
||||
}
|
||||
#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;
|
||||
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])
|
||||
|
||||
@ -12,7 +12,7 @@ function maplibreMap() {
|
||||
|
||||
var map = new mapboxgl.Map({
|
||||
container: 'mapbox',
|
||||
style: "https://maps.netsyms.net/styles/osm-liberty/style.json",
|
||||
style: "https://maps.netsyms.net/styles/klokantech-terrain/style.json",
|
||||
//attributionControl: false,
|
||||
interactive: true,
|
||||
pitch: 0,
|
||||
@ -27,10 +27,10 @@ function maplibreMap() {
|
||||
latitude: coordinates.lat,
|
||||
longitude: coordinates.lng
|
||||
}, function (resp) {
|
||||
new mapboxgl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
||||
.addTo(map);
|
||||
var popup = new mapboxgl.Popup();
|
||||
popup.setLngLat(coordinates);
|
||||
popup.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
|
||||
popup.addTo(map);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user