diff options
Diffstat (limited to 'docs/index.html')
| -rw-r--r-- | docs/index.html | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..448f762 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,98 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>UIUC Course Graph</title> + <link rel="stylesheet" href="styles.css" /> + <link rel="preconnect" href="https://cdn.jsdelivr.net" /> + </head> + <body> + <div id="app"> + <header> + <h1>UIUC Course Graph</h1> + <div class="controls"> + <label> + Course (e.g., CS 225 or CS): + <span class="search-box"> + <input id="searchInput" type="text" placeholder="CS 225" autocomplete="off" /> + <div id="searchSuggestions" class="suggestions hidden" role="listbox" aria-label="Suggestions"></div> + </span> + </label> + <label> + Depth: + <input id="depthInput" type="number" min="0" max="10" step="1" value="2" /> + </label> + <label> + Include corequisites + <input id="toggleCoreq" type="checkbox" checked /> + </label> + <button id="btnApply">Apply</button> + <button id="btnReset">Reset</button> + <label> + Layout: + <select id="layoutSelect"> + <option value="preset">Preset</option> + <option value="dagre">Dagre</option> + <option value="cose">CoSE</option> + <option value="fcose">fCoSE</option> + <option value="cola">Cola</option> + <option value="elk">ELK Layered</option> + <option value="fa2">ForceAtlas2 (linlog)</option> + </select> + </label> + + <label> + Spread: + <input id="spreadInput" type="number" min="0.5" step="0.5" value="1.5" /> + </label> + <label> + Hide labels until zoom + <input id="toggleLabels" type="checkbox" /> + </label> + </div> + </header> + + <main> + <div id="cy"></div> + </main> + + <footer> + <span id="status">Loading dataset...</span> + </footer> + <aside id="sidebar" class="sidebar" aria-label="Edge details"> + <div class="sidebar-header"> + <span>Edge Details</span> + <button id="btnCloseSidebar" type="button">Close</button> + </div> + <div class="sidebar-content"> + <div id="sidebarBody">Hover an edge to see details here.</div> + <div style="margin-top:10px;"> + <button id="btnUnlock" type="button" class="hidden">Unlock</button> + </div> + </div> + </aside> + <button id="sidebarHandle" class="sidebar-handle" title="Toggle details">Details</button> + </div> + + <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.28.1/dist/cytoscape.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/webcola@3.4.0/WebCola/cola.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2.5.1/cytoscape-cola.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cytoscape-fcose@2.2.0/cytoscape-fcose.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/elkjs@0.8.2/lib/elk.bundled.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cytoscape-elk@2.2.1/cytoscape-elk.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/cytoscape-forceatlas2@1.2.2/cytoscape-forceatlas2.js"></script> + <script> + cytoscape.use(window.cytoscapeDagre); + cytoscape.use(window.cytoscapeCola); + cytoscape.use(window.cytoscapeFcose); + cytoscape.use(window.cytoscapeElk); + cytoscape.use(window.cytoscapeForceAtlas2); + </script> + <script src="index.js"></script> + </body> + </html> + + |