nonbinary.computer
OR-1 dataflow CPU sketch
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>dfgraph — Dataflow Graph Renderer</title>
7 <style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9 body { font-family: system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; }
10 #toolbar { padding: 8px 16px; background: #1a1a2e; color: #eee; display: flex; align-items: center; gap: 12px; }
11 #toolbar h1 { font-size: 14px; font-weight: 600; }
12 #toolbar button { background: #2a2a4a; color: #eee; border: 1px solid #444; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; }
13 #toolbar button:hover { background: #3a3a5a; }
14 #view-toggle { background: #5c6bc0; border: none; font-weight: 500; }
15 #view-toggle:hover { background: #3f51b5; }
16 #graph { flex: 1; position: relative; }
17 #error-panel {
18 max-height: 200px;
19 overflow-y: auto;
20 background: #1a1a2e;
21 border-top: 2px solid #e53935;
22 color: #eee;
23 font-family: monospace;
24 font-size: 12px;
25 display: none;
26 }
27 #error-panel.visible { display: block; }
28 #error-panel .error-header {
29 padding: 6px 16px;
30 background: #e53935;
31 color: #fff;
32 font-weight: 600;
33 cursor: pointer;
34 display: flex;
35 justify-content: space-between;
36 }
37 #error-panel .error-list { padding: 0; margin: 0; list-style: none; }
38 #error-panel .error-item {
39 padding: 4px 16px;
40 border-bottom: 1px solid rgba(255,255,255,0.05);
41 cursor: pointer;
42 }
43 #error-panel .error-item:hover { background: rgba(255,255,255,0.05); }
44 #error-panel .error-line { color: #ff9800; margin-right: 8px; }
45 #error-panel .error-category { color: #9e9e9e; margin-right: 8px; }
46 #error-panel .error-suggestion { color: #4caf50; font-style: italic; display: block; padding-left: 16px; }
47 #parse-error-overlay {
48 position: absolute;
49 top: 50%;
50 left: 50%;
51 transform: translate(-50%, -50%);
52 background: rgba(26, 26, 46, 0.95);
53 padding: 24px 32px;
54 border-radius: 8px;
55 border: 2px solid #e53935;
56 color: #eee;
57 font-family: monospace;
58 font-size: 13px;
59 max-width: 600px;
60 white-space: pre-wrap;
61 display: none;
62 z-index: 10;
63 }
64 #parse-error-overlay.visible { display: block; }
65 </style>
66</head>
67<body>
68 <div id="toolbar">
69 <h1>dfgraph</h1>
70 <button id="view-toggle">Physical View</button>
71 <button id="export-svg">Export SVG</button>
72 <button id="export-png">Export PNG</button>
73 <button id="copy-png">Copy PNG</button>
74 </div>
75 <div id="graph">
76 <div id="parse-error-overlay" aria-live="polite"></div>
77 </div>
78 <div id="error-panel">
79 <div class="error-header">
80 <span id="error-count"></span>
81 <span>▼</span>
82 </div>
83 <ul class="error-list" id="error-list"></ul>
84 </div>
85 <script type="module" src="dist/bundle.js"></script>
86</body>
87</html>