More meaningful root page

frontend/index.html

@@ -63,6 +63,17 @@
             <p class="body">Sender is waiting for GPS signal</p>
         </div>
 
+        <div class="cover hidden" id="index">
+            <img src="./assets/logo.svg" class="logo">
+            <p class="body" style="margin-top:7vmin;">Point the Hauk app to this server to share your location:</p>
+            <p class="body" id="url">https://localhost/</p>
+            <p class="body"><a href="https://f-droid.org/packages/info.varden.hauk">
+                <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
+                alt="Get it on F-Droid"
+                class="f-droid">
+            </a></p>
+        </div>
+
         <div id="expired" class="dialog hidden">
             <div>
                 <p class="header">Share expired</p>

frontend/main.js

@@ -208,15 +208,22 @@ function setNewInterval(expire, interval) {
 }
 
 var noGPS = document.getElementById("searching");
-
-// Attempt to fetch location data from the server once.
-getJSON("./api/fetch.php?id=" + id, function(data) {
-    noGPS.style.display = "block";
-    setNewInterval(data.expire, data.interval);
-    processUpdate(data);
-}, function() {
-    document.getElementById("notfound").style.display = "block";
-});
+console.log(id);
+if (location.href.indexOf("?") === -1 || id == "") {
+    // If there is no share ID, show the root page.
+    var url = location.href.indexOf("?") === -1 ? location.href : location.href.substring(0, location.href.indexOf("?"));
+    document.getElementById("url").textContent = url;
+    document.getElementById("index").style.display = "block";
+} else {
+    // Attempt to fetch location data from the server once.
+    getJSON("./api/fetch.php?id=" + id, function(data) {
+        noGPS.style.display = "block";
+        setNewInterval(data.expire, data.interval);
+        processUpdate(data);
+    }, function() {
+        document.getElementById("notfound").style.display = "block";
+    });
+}
 
 // Whether or not an initial location has been received.
 var hasReceivedFirst = false;

frontend/style.css

@@ -94,6 +94,17 @@
     font-size: 1em;
 }
 
+/* Visible on the root page of Hauk. */
+#url {
+    color: #d80037;
+    font-family: monospace;
+    font-size: 5vmin;
+}
+.f-droid {
+    margin-top: 1vmin;
+    width: 50vmin;
+}
+
 /* Display the Hauk logo in the bottom left corner of the map if the viewport is
    wide enough to accomodate it. If it's so narrow that the Leaflet attribution
    could be covered by it, display it in the bottom left corner instead, above