<!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-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;
                }
            }

            #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">

                <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>

        <script>
            window.onload = function () {
                createMap();
            };

            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>
