index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Search Algorithm Visualization</title>
        <link rel="icon" type="image/png" href="images/pc.ico" />
        <link rel="stylesheet" href="style/style.css" />
        <script src="script/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <a id="repository" href="https://github.com/polcats/VisualSearch" target="_blank">
            <img src="images/github.png" alt="GitHub" title="Visit Repository" />
        </a>
        <div id="menu-container">
            <div id="notes">
                <h2>Notes</h2>
                <ul>
                    <li>You can drag and drop the start and finish icons.</li>
                    <li>You can add blockades by smearing your mouse on the cells while 'Add Blocks' is active.</li>
                    <li>Ongoing implementation of more algorithms plus the actual animations.</li>
                </ul>
            </div>
            <div id="algorithm-options">
                <label>Algorithm</label>
                <select id="algorithm">
                    <option value="astar">A-Star Search</option>
                </select>
            </div>
            <div id="movement-options">
                <label>Allowed Movement</label>
                <select id="movements">
                    <option value="cross">Vertical and Horizontal</option>
                    <option value="all">Vertical, Horizontal, and Diagonal</option>
                </select>
            </div>
            <div id="heuristic-options">
                <label>Heuristic</label>
                <select id="heuristics">
                    <option value="diagonal">Diagonal</option>
                    <option value="euclidean">Euclidean</option>
                    <option value="manhattan">Manhanttan Distance</option>
                </select>
            </div>
            <div id="buttons">
                <input id="find-path" type="button" value="Find Path" />
                <input id="add-block" type="button" value="Add Blocks" />
                <input id="reset-all" type="button" value="Reset" />
            </div>
        </div>
        <div id="cell-container">
            <table id="cell-table"></table>
        </div>
        <div id="hidden-container"><svg id="path-svg"></svg></div>
        <script type="module" src="script/main.mjs"></script>
        <script type="module" src="script/tests.mjs"></script>
    </body>
</html>