src/frontend/index.html

<html>
    <head>
        <title>Not Waze</title>
        <meta charset="UTF-8" />

        <!-- Include Leaflet -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
        <!-- Include "humanize-duration" -->
        <script src="https://unpkg.com/humanize-duration@3.26.0/humanize-duration.js"></script>
        <!-- Include font-awesome -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

        <!-- Include CSS -->
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="header">
            <form class="header"><!--
                --><input class="header place-input interactable" type="text" id="starting-point-input" name="starting-point" placeholder="Starting Location..." autocomplete="off" /><!--
                --><input class="header place-input interactable" type="text" id="destination-input"    name="destination" placeholder="Destination..." autocomplete="off" /><!--
                --><button class="header header-bit interactable" type="submit">
                    <i class="fa fa-arrow-right" aria-hidden="true"></i>
                </button><!--
                --><div class="dropdown">
                    <button class="header header-bit interactable" onclick="return false;">
                        <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                    </button>
                    <div class="dropdown-content">
                        <p>
                        <label for="method-input">Shortest-Path Method</label>
                        <br>
                        <select name="method" id="method-input">
                            <option value="astar-euclidean">A* with Euclidean Heuristic</option>
                            <option value="astar-manhattan">A* with Manhattan Heuristic</option>
                            <option value="dijkstra">Dijkstra</option>
                        </select>
                        </p>

                        <p>
                        <label for="goal-input">Goal</label>
                        <br>
                        <select name="goal" id="goal-input">
                            <option value="shortest">Shortest Path</option>
                            <option value="fastest">Fastest Path</option>
                        </select>
                        </p>
                    </div>
                </div>
            </form>
        </div>

        <div id="map-container">
            <div id="map"></div>
        </div>

        <!-- Include Javascript -->
        <script src="index.js"></script>
    </body>
</html>