diff options
| author | blackhao <13851610112@163.com> | 2025-08-22 02:51:50 -0500 |
|---|---|---|
| committer | blackhao <13851610112@163.com> | 2025-08-22 02:51:50 -0500 |
| commit | 4aab4087dc97906d0b9890035401175cdaab32d4 (patch) | |
| tree | 4e2e9d88a711ec5b1cfa02e8ac72a55183b99123 /web/index.html | |
| parent | afa8f50d1d21c721dabcb31ad244610946ab65a3 (diff) | |
2.0
Diffstat (limited to 'web/index.html')
| -rw-r--r-- | web/index.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..11e2b87 --- /dev/null +++ b/web/index.html @@ -0,0 +1,82 @@ +<!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): + <input id="searchInput" type="text" placeholder="CS 225" /> + </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> + </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> + + |