examples/queryBuilder/index.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>Adding and querying example</title>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>

    <!-- Firebase -->
    <script type="module">
      import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js'
      import { getDatabase, ref, push } from 'https://www.gstatic.com/firebasejs/9.8.4/firebase-database.js'
    </script>

    <!-- GeoFire -->
    <script src="https://cdn.firebase.com/libs/geofire/6.0.0/geofire.min.js"></script>

    <!-- Custom JS -->
    <script src="js/queryBuilder.js" defer></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/queryBuilder.css">
  </head>

  <body>
    <!-- Contribution -->
    <p>Contributed by <a id="firebaseRef" href="https://github.com/stefek99" target="_blank">@stefek99</a></p>

    <!-- Add fish  -->
    <form id="addfish">
      <label>
        Lat: <input id="addlat" type="number" step="any" min="-90" max="90" required>
      </label>
      <label>
        Lon: <input id="addlon" type="number" step="any" min="-180" max="180" required>
      </label>
      <input type="submit" value="add fish">
    </form>

    <!-- Query fish  -->
    <form id="queryfish">
      <label>
        Lat: <input id="querylat" type="number" step="any" min="-90" max="90" required>
      </label>
      <label>
        Lon: <input id="querylon" type="number" step="any" min="-180" max="180" required>
      </label>
      <label>
        Radius: <input id="queryradius" type="number" step="any" min="0" max="40000" required>
      </label>
      <input type="submit" value="query">
    </form>

    <!-- Message log -->
    <div id="log"></div>
  </body>
</html>