diff options
| author | grothedev <grothedev@gmail.com> | 2025-10-02 20:13:46 -0400 |
|---|---|---|
| committer | grothedev <grothedev@gmail.com> | 2025-10-02 20:13:46 -0400 |
| commit | 39124e6854b2740e9f30c058e873355dfd739a4e (patch) | |
| tree | 5cd1fb7986b1aebbde79ce478ecfc0b077690414 /web-timeplot/index.html | |
| parent | 836459dce3f50767d41978be4a2f7ac788e6a9ba (diff) | |
starting with pixijs implementation
Diffstat (limited to 'web-timeplot/index.html')
| -rw-r--r-- | web-timeplot/index.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/web-timeplot/index.html b/web-timeplot/index.html new file mode 100644 index 0000000..b93562c --- /dev/null +++ b/web-timeplot/index.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>TimePlot - PixiJS Waterfall Display</title> + <style> + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: #1a1a1f; + color: #fff; + overflow: hidden; + } + + #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; + } + + kbd { + background: #3a3a4f; + padding: 2px 6px; + border-radius: 3px; + font-size: 11px; + border: 1px solid #4a4a5f; + } + </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> + </div> + <div class="info" id="metrics-display"> + Starting... + </div> + </div> + </div> + <script type="module" src="/src/main.js"></script> +</body> +</html> |