diff options
| author | Thomas Grothe <grothe.tr@gmail.com> | 2026-02-22 21:18:22 -0500 |
|---|---|---|
| committer | Thomas Grothe <grothe.tr@gmail.com> | 2026-02-22 21:18:22 -0500 |
| commit | f3d75ecf1e6006b2ab669a37dd73a5c7b03c4739 (patch) | |
| tree | 95ecc5d2e3ca919b312f6ae57ae4e7695e369b95 /index.html | |
| parent | 790f62dd2a54fb954a64304392d74a087cb45698 (diff) | |
cool toy with 3D graph CRDT
Diffstat (limited to 'index.html')
| -rwxr-xr-x[-rw-r--r--] | index.html | 110 |
1 files changed, 73 insertions, 37 deletions
diff --git a/index.html b/index.html index cd16b50..86429fb 100644..100755 --- a/index.html +++ b/index.html @@ -1,37 +1,73 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Template</title> - <link rel="stylesheet" href="css/skeleton.css"> - <link rel="stylesheet" href="css/main.css"> -</head> -<body> - <header> - <h2>.</h2> - <section> - <p> </p> - </section> - </header> - <main> - <center>- - -</center> - <section> - <h5></h5> - <p></p> - </section> - <center>- - -</center> - <section> - <div id="server-status">Server status: Connecting...</div> - </section> - <footer> - <p>Last updated ...</p> - </footer> - </main> -</body> -<script type = "text/javascript" src = "js/jquery-3.7.1.min.js"></script> -<script type = "text/javascript"> - window.env = {'thing': 123123}; -</script> -<script type = "text/javascript" src = "js/main.js"></script> -</html> +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Graph Visualizer</title>
+ <link rel="stylesheet" href="css/skeleton.css">
+ <link rel="stylesheet" href="css/main.css">
+ <link rel="stylesheet" href="css/table.css">
+ <style>
+ #visualizer-container {
+ width: 100%;
+ height: 500px;
+ background: #1a1a2e;
+ border-radius: 8px;
+ overflow: hidden;
+ position: relative;
+ }
+ #visualizer-container canvas {
+ display: block;
+ }
+ .visualizer-controls {
+ margin-top: 10px;
+ display: flex;
+ gap: 10px;
+ flex-wrap: wrap;
+ }
+ .visualizer-controls button {
+ margin-bottom: 0;
+ }
+ </style>
+</head>
+<body>
+ <header>
+ <h2>Graph Visualizer</h2>
+ <section>
+ <p>A collaborative 3D graph editor</p>
+ </section>
+ </header>
+ <main>
+ <section>
+ <h5>3D Graph View</h5>
+ <div id="visualizer-container"></div>
+ <div class="visualizer-controls">
+ <button id="btn-add-node">Add Node</button>
+ <button id="btn-add-edge">Add Random Edge</button>
+ <button id="btn-reset">Reset Graph</button>
+ </div>
+ </section>
+ <center>- - -</center>
+ <section>
+ <div id="server-status">Server status: Connecting...</div>
+ </section>
+ <footer>
+ <p>Drag to rotate | Scroll to zoom | Click nodes to select</p>
+ </footer>
+ </main>
+</body>
+<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
+<script type="importmap">
+{
+ "imports": {
+ "three": "https://cdn.jsdelivr.net/npm/three@0.162.0/build/three.module.js",
+ "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.162.0/examples/jsm/"
+ }
+}
+</script>
+<script type="text/javascript">
+ window.env = {'thing': 123123};
+</script>
+<script type="module" src="js/visualizer.js"></script>
+<script type="text/javascript" src="js/main.js"></script>
+</html>
|