diff options
| author | grothedev <grothedev@gmail.com> | 2025-11-26 00:19:54 -0500 |
|---|---|---|
| committer | grothedev <grothedev@gmail.com> | 2025-11-26 00:19:54 -0500 |
| commit | a1c95e72bea26f554eb05916d6fc584927367159 (patch) | |
| tree | 4b6a5e25b9f1d15c64bf91ace252700c20b578d0 /web-timeplot/index.html | |
| parent | 43420f2987b76aa7ede0012e1998ba8d61419bc9 (diff) | |
making this into a prototyping framework
Diffstat (limited to 'web-timeplot/index.html')
| -rw-r--r-- | web-timeplot/index.html | 81 |
1 files changed, 3 insertions, 78 deletions
diff --git a/web-timeplot/index.html b/web-timeplot/index.html index 37702a2..6f0d26d 100644 --- a/web-timeplot/index.html +++ b/web-timeplot/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>TimePlot - PixiJS Waterfall Display</title> + <title>PixiJS Prototyping Framework</title> <style> * { margin: 0; @@ -21,92 +21,17 @@ #app { width: 100vw; height: 100vh; - display: flex; - flex-direction: column; } #canvas-container { - flex: 1; - position: relative; - } - - #controls { - background: #2a2a2f; - padding: 10px 20px; - border-top: 2px solid #3a3a4f; - display: flex; - gap: 15px; - align-items: center; - flex-wrap: wrap; - } - - .control-group { - display: flex; - gap: 10px; - align-items: center; - } - - button { - background: #4a4a5f; - color: #fff; - border: none; - padding: 8px 16px; - border-radius: 4px; - cursor: pointer; - font-size: 14px; - transition: background 0.2s; - } - - button:hover { - background: #5a5a7f; - } - - button.active { - background: #6a6aff; - } - - .info { - font-family: monospace; - font-size: 12px; - color: #6f6; - margin-left: auto; - min-width: 600px; - text-align: right; - } - - kbd { - background: #3a3a4f; - padding: 2px 6px; - border-radius: 3px; - font-size: 11px; - border: 1px solid #4a4a5f; + width: 100%; + height: 100%; } </style> </head> <body> <div id="app"> <div id="canvas-container"></div> - <div id="controls"> - <div class="control-group"> - <button id="toggle-grid"> - Grid: <kbd>G</kbd> - </button> - <button id="toggle-metrics"> - Metrics: <kbd>M</kbd> - </button> - <button id="export-metrics"> - Export: <kbd>E</kbd> - </button> - </div> - <div class="control-group"> - <span>Renderer: <span id="renderer-type">Loading...</span></span> - <span style="margin-left: 15px;">Time Range Zoom: <span id="time-scale">1.0x</span></span> - <span style="font-size: 11px; color: #888;">(Middle-drag ↕)</span> - </div> - <div class="info" id="metrics-display"> - Starting... - </div> - </div> </div> <script type="module" src="/src/main.js"></script> </body> |