-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (142 loc) · 5.92 KB
/
index.html
File metadata and controls
157 lines (142 loc) · 5.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<!-- SPDX-License-Identifier: MPL-2.0 -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark light" />
<title>DotMatrix-FilePrinter</title>
<meta name="description" content="Neurosymbolic filesystem manipulation via Forth kernel" />
</head>
<body>
<div class="shell">
<header class="shell__header">
<h1 class="shell__title">DotMatrix-FilePrinter</h1>
<span id="gforth-status" class="status status--warning" role="status" aria-live="polite">
<span class="status__dot"></span>Gforth: Checking...
</span>
</header>
<div id="error" class="alert alert--danger" role="alert" aria-live="assertive"></div>
<main class="shell__main">
<div class="left-panel">
<div class="panel">
<div class="panel__header">
<span>Input</span>
<button id="help-btn" class="btn btn--small" title="Help (?)">?</button>
</div>
<div class="panel__body">
<div class="mode-selector" role="tablist">
<button id="mode-text" class="mode-selector__btn mode-selector__btn--active" role="tab" aria-selected="true">Text</button>
<button id="mode-hex" class="mode-selector__btn" role="tab" aria-selected="false">Hex</button>
<button id="mode-bytes" class="mode-selector__btn" role="tab" aria-selected="false">Bytes</button>
</div>
<textarea
id="input"
class="input input--textarea"
placeholder="Type text here..."
aria-label="Input data"
></textarea>
<div id="bytes-preview" class="bytes-preview" style="display: none;"></div>
<div class="target-path">
<label for="target-path">Target:</label>
<input
type="text"
id="target-path"
class="input"
value="dist/substrate.bin"
aria-label="Target file path"
/>
</div>
<div class="actions">
<button id="parse-btn" class="btn" disabled>
Parse<span class="btn__shortcut">⏎</span>
</button>
<button id="preview-btn" class="btn" disabled>
Preview<span class="btn__shortcut">Ctrl+P</span>
</button>
<button id="strike-btn" class="btn btn--primary" disabled>
Strike<span class="btn__shortcut">Ctrl+⏎</span>
</button>
<button id="verify-btn" class="btn" disabled>
Verify<span class="btn__shortcut">Ctrl+V</span>
</button>
</div>
</div>
</div>
</div>
<div class="right-panel">
<div id="preview-panel" class="panel" aria-live="polite" aria-label="Strike preview"></div>
<div id="verify-panel" class="panel" style="margin-top: 1rem;" aria-live="polite" aria-label="Verification result"></div>
</div>
</main>
<footer class="shell__footer">
<div class="footer-left">
<span id="status" role="status" aria-live="polite">Initializing...</span>
</div>
<div class="footer-right">
<span class="shortcuts-hint">Press <kbd>?</kbd> for help</span>
</div>
</footer>
</div>
<!-- Help panel -->
<div id="help-overlay" class="help-overlay"></div>
<aside id="help-panel" class="help-panel">
<div class="help-panel__header">
<span>Help</span>
<button id="help-close" class="btn btn--small">×</button>
</div>
<div class="help-panel__body">
<div class="help-panel__section">
<h3>Input Modes</h3>
<ul>
<li><strong>Text:</strong> Enter plain text (converts to ASCII bytes)</li>
<li><strong>Hex:</strong> Enter hex pairs like "48 65 6c 6c 6f" or "48656c6c6f"</li>
<li><strong>Bytes:</strong> Enter comma-separated decimals like "72, 101, 108, 108, 111"</li>
</ul>
</div>
<div class="help-panel__section">
<h3>Keyboard Shortcuts</h3>
<div class="help-panel__kbd">
<kbd>Enter</kbd> Parse input
</div>
<div class="help-panel__kbd">
<kbd>Ctrl</kbd>+<kbd>P</kbd> Preview strike
</div>
<div class="help-panel__kbd">
<kbd>Ctrl</kbd>+<kbd>Enter</kbd> Execute strike
</div>
<div class="help-panel__kbd">
<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> Verify substrate
</div>
<div class="help-panel__kbd">
<kbd>?</kbd> Toggle help panel
</div>
<div class="help-panel__kbd">
<kbd>Esc</kbd> Close help panel
</div>
</div>
<div class="help-panel__section">
<h3>Byte Constraints</h3>
<p>Valid bytes: 0-127 (ASCII)</p>
<p>Forbidden bytes: 160 (NBSP), 194 (UTF-8 marker)</p>
<p>These constraints ensure clean substrate files.</p>
</div>
<div class="help-panel__section">
<h3>Safety Features</h3>
<ul>
<li>Path traversal protection (no .. or ~)</li>
<li>Formally verified math operations</li>
<li>Constant-time hex comparison</li>
<li>Contamination detection</li>
</ul>
</div>
<div class="help-panel__section">
<h3>About</h3>
<p>DotMatrix-FilePrinter uses a Forth kernel to write bytes directly to files, bypassing OS text encoding layers.</p>
<p>Powered by the <strong>proven</strong> library for formally verified safety.</p>
</div>
</div>
</aside>
<script type="module" src="/src/main.js"></script>
</body>
</html>