@willwade/aac-processors 0.1.10 โ 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/processors/gridset/resolver.js +10 -0
- package/dist/browser/processors/gridsetProcessor.js +128 -6
- package/dist/processors/gridset/resolver.js +10 -0
- package/dist/processors/gridsetProcessor.js +128 -6
- package/package.json +1 -3
- package/examples/.coverage +0 -0
- package/examples/.keep +0 -1
- package/examples/README.md +0 -55
- package/examples/browser-test.html +0 -331
- package/examples/communikate.dot +0 -2637
- package/examples/demo.js +0 -143
- package/examples/example-images.gridset +0 -0
- package/examples/example.ce +0 -0
- package/examples/example.dot +0 -14
- package/examples/example.grd +0 -1
- package/examples/example.gridset +0 -0
- package/examples/example.obf +0 -27
- package/examples/example.obz +0 -0
- package/examples/example.opml +0 -18
- package/examples/example.spb +0 -0
- package/examples/example.sps +0 -0
- package/examples/example2.grd +0 -1
- package/examples/obf/aboutme.json +0 -376
- package/examples/obf/array.json +0 -6
- package/examples/obf/hash.json +0 -4
- package/examples/obf/links.obz +0 -0
- package/examples/obf/simple.obf +0 -53
- package/examples/package-lock.json +0 -1326
- package/examples/package.json +0 -10
- package/examples/styled-output/converted-snap-to-touchchat.ce +0 -0
- package/examples/styled-output/styled-example.ce +0 -0
- package/examples/styled-output/styled-example.gridset +0 -0
- package/examples/styled-output/styled-example.obf +0 -37
- package/examples/styled-output/styled-example.spb +0 -0
- package/examples/styling-example.ts +0 -316
- package/examples/translate.js +0 -39
- package/examples/translate_demo.js +0 -254
- package/examples/typescript-demo.ts +0 -251
- package/examples/vitedemo/README.md +0 -164
- package/examples/vitedemo/index.html +0 -580
- package/examples/vitedemo/package-lock.json +0 -1751
- package/examples/vitedemo/package.json +0 -24
- package/examples/vitedemo/src/main.ts +0 -1001
- package/examples/vitedemo/src/vite-env.d.ts +0 -1
- package/examples/vitedemo/test-files/example.dot +0 -14
- package/examples/vitedemo/test-files/example.grd +0 -1
- package/examples/vitedemo/test-files/example.gridset +0 -0
- package/examples/vitedemo/test-files/example.obz +0 -0
- package/examples/vitedemo/test-files/example.opml +0 -18
- package/examples/vitedemo/test-files/simple.obf +0 -53
- package/examples/vitedemo/tsconfig.json +0 -24
- package/examples/vitedemo/vite.config.ts +0 -57
|
@@ -1,580 +0,0 @@
|
|
|
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.0">
|
|
6
|
-
<title>AAC Processors - Browser Demo</title>
|
|
7
|
-
<style>
|
|
8
|
-
* {
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
body {
|
|
15
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
16
|
-
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
-
min-height: 100vh;
|
|
18
|
-
padding: 20px;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.container {
|
|
22
|
-
max-width: 1400px;
|
|
23
|
-
margin: 0 auto;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
header {
|
|
27
|
-
background: white;
|
|
28
|
-
border-radius: 12px;
|
|
29
|
-
padding: 30px;
|
|
30
|
-
margin-bottom: 20px;
|
|
31
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
h1 {
|
|
35
|
-
color: #333;
|
|
36
|
-
margin-bottom: 10px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.subtitle {
|
|
40
|
-
color: #666;
|
|
41
|
-
font-size: 14px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.main-grid {
|
|
45
|
-
display: grid;
|
|
46
|
-
grid-template-columns: 400px 1fr;
|
|
47
|
-
gap: 20px;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.panel {
|
|
51
|
-
background: white;
|
|
52
|
-
border-radius: 12px;
|
|
53
|
-
padding: 20px;
|
|
54
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.panel-title {
|
|
58
|
-
font-size: 18px;
|
|
59
|
-
font-weight: 600;
|
|
60
|
-
color: #333;
|
|
61
|
-
margin-bottom: 15px;
|
|
62
|
-
padding-bottom: 10px;
|
|
63
|
-
border-bottom: 2px solid #667eea;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.tab-header {
|
|
67
|
-
display: flex;
|
|
68
|
-
gap: 8px;
|
|
69
|
-
margin-bottom: 15px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.tab-btn {
|
|
73
|
-
flex: 1;
|
|
74
|
-
border: 1px solid #d6daf5;
|
|
75
|
-
background: #f7f8ff;
|
|
76
|
-
color: #3d4bb8;
|
|
77
|
-
padding: 8px 12px;
|
|
78
|
-
border-radius: 8px;
|
|
79
|
-
font-size: 13px;
|
|
80
|
-
font-weight: 600;
|
|
81
|
-
cursor: pointer;
|
|
82
|
-
transition: all 0.2s;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.tab-btn.active {
|
|
86
|
-
background: #667eea;
|
|
87
|
-
color: #fff;
|
|
88
|
-
border-color: #667eea;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.tab-content {
|
|
92
|
-
display: none;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.tab-content.active {
|
|
96
|
-
display: block;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.upload-area {
|
|
100
|
-
border: 2px dashed #ccc;
|
|
101
|
-
border-radius: 8px;
|
|
102
|
-
padding: 30px;
|
|
103
|
-
text-align: center;
|
|
104
|
-
cursor: pointer;
|
|
105
|
-
transition: all 0.3s;
|
|
106
|
-
margin-bottom: 15px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.upload-area:hover {
|
|
110
|
-
border-color: #667eea;
|
|
111
|
-
background: #f8f9ff;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.upload-area.dragover {
|
|
115
|
-
border-color: #667eea;
|
|
116
|
-
background: #f0f2ff;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.upload-icon {
|
|
120
|
-
font-size: 48px;
|
|
121
|
-
margin-bottom: 10px;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
#fileInput {
|
|
125
|
-
display: none;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.btn {
|
|
129
|
-
background: #667eea;
|
|
130
|
-
color: white;
|
|
131
|
-
border: none;
|
|
132
|
-
padding: 10px 20px;
|
|
133
|
-
border-radius: 6px;
|
|
134
|
-
cursor: pointer;
|
|
135
|
-
font-size: 14px;
|
|
136
|
-
font-weight: 500;
|
|
137
|
-
transition: background 0.3s;
|
|
138
|
-
width: 100%;
|
|
139
|
-
margin-bottom: 10px;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.btn:hover {
|
|
143
|
-
background: #5568d3;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.btn:disabled {
|
|
147
|
-
background: #ccc;
|
|
148
|
-
cursor: not-allowed;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
.btn-secondary {
|
|
152
|
-
background: #6c757d;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.btn-secondary:hover {
|
|
156
|
-
background: #5a6268;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.stats {
|
|
160
|
-
display: grid;
|
|
161
|
-
grid-template-columns: repeat(2, 1fr);
|
|
162
|
-
gap: 10px;
|
|
163
|
-
margin-bottom: 15px;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.stat-card {
|
|
167
|
-
background: #f8f9fa;
|
|
168
|
-
border-radius: 8px;
|
|
169
|
-
padding: 15px;
|
|
170
|
-
text-align: center;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
.stat-value {
|
|
174
|
-
font-size: 24px;
|
|
175
|
-
font-weight: 700;
|
|
176
|
-
color: #667eea;
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.stat-label {
|
|
180
|
-
font-size: 12px;
|
|
181
|
-
color: #666;
|
|
182
|
-
margin-top: 5px;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
.processor-info {
|
|
186
|
-
background: #e7f3ff;
|
|
187
|
-
border-left: 4px solid #667eea;
|
|
188
|
-
padding: 12px;
|
|
189
|
-
border-radius: 4px;
|
|
190
|
-
margin-bottom: 15px;
|
|
191
|
-
font-size: 13px;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.validation-panel {
|
|
195
|
-
margin-top: 15px;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.validation-summary {
|
|
199
|
-
background: #f8f9fa;
|
|
200
|
-
border-radius: 8px;
|
|
201
|
-
padding: 10px 12px;
|
|
202
|
-
font-size: 13px;
|
|
203
|
-
font-weight: 600;
|
|
204
|
-
margin-bottom: 10px;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
.validation-summary.success {
|
|
208
|
-
border-left: 4px solid #2ecc71;
|
|
209
|
-
color: #2d7a4f;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.validation-summary.error {
|
|
213
|
-
border-left: 4px solid #e74c3c;
|
|
214
|
-
color: #b03a2e;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
.validation-list {
|
|
218
|
-
max-height: 180px;
|
|
219
|
-
overflow-y: auto;
|
|
220
|
-
font-size: 12px;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.validation-item {
|
|
224
|
-
padding: 6px 0;
|
|
225
|
-
border-bottom: 1px solid #ececec;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.validation-item.warn {
|
|
229
|
-
color: #c18401;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.validation-item.error {
|
|
233
|
-
color: #b03a2e;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.processor-name {
|
|
237
|
-
font-weight: 600;
|
|
238
|
-
color: #333;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.results-panel {
|
|
242
|
-
max-height: 600px;
|
|
243
|
-
overflow-y: auto;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.page-card {
|
|
247
|
-
background: #f8f9fa;
|
|
248
|
-
border-radius: 8px;
|
|
249
|
-
padding: 15px;
|
|
250
|
-
margin-bottom: 15px;
|
|
251
|
-
border-left: 4px solid #667eea;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.page-title {
|
|
255
|
-
font-size: 16px;
|
|
256
|
-
font-weight: 600;
|
|
257
|
-
color: #333;
|
|
258
|
-
margin-bottom: 10px;
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
.button-grid {
|
|
262
|
-
display: grid;
|
|
263
|
-
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
264
|
-
gap: 10px;
|
|
265
|
-
margin-top: 10px;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.button-item {
|
|
269
|
-
background: white;
|
|
270
|
-
border: 1px solid #ddd;
|
|
271
|
-
border-radius: 6px;
|
|
272
|
-
padding: 10px;
|
|
273
|
-
font-size: 12px;
|
|
274
|
-
cursor: pointer;
|
|
275
|
-
transition: all 0.2s;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.button-item:hover {
|
|
279
|
-
border-color: #667eea;
|
|
280
|
-
background: #f8f9ff;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.button-label {
|
|
284
|
-
font-weight: 600;
|
|
285
|
-
color: #333;
|
|
286
|
-
margin-bottom: 5px;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.button-message {
|
|
290
|
-
color: #666;
|
|
291
|
-
font-size: 11px;
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
.button-type {
|
|
295
|
-
display: inline-block;
|
|
296
|
-
padding: 2px 6px;
|
|
297
|
-
border-radius: 3px;
|
|
298
|
-
font-size: 10px;
|
|
299
|
-
margin-top: 5px;
|
|
300
|
-
font-weight: 500;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.type-speak { background: #d4edda; color: #155724; }
|
|
304
|
-
.type-navigate { background: #cce5ff; color: #004085; }
|
|
305
|
-
.type-other { background: #e2e3e5; color: #383d41; }
|
|
306
|
-
|
|
307
|
-
.log-panel {
|
|
308
|
-
background: #1e1e1e;
|
|
309
|
-
color: #d4d4d4;
|
|
310
|
-
border-radius: 8px;
|
|
311
|
-
padding: 15px;
|
|
312
|
-
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
|
|
313
|
-
font-size: 12px;
|
|
314
|
-
max-height: 200px;
|
|
315
|
-
overflow-y: auto;
|
|
316
|
-
margin-top: 15px;
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.log-entry {
|
|
320
|
-
margin-bottom: 5px;
|
|
321
|
-
padding: 3px 0;
|
|
322
|
-
}
|
|
323
|
-
|
|
324
|
-
.log-info { color: #4ec9b0; }
|
|
325
|
-
.log-success { color: #6a9955; }
|
|
326
|
-
.log-error { color: #f48771; }
|
|
327
|
-
.log-warn { color: #dcdcaa; }
|
|
328
|
-
|
|
329
|
-
.test-results {
|
|
330
|
-
margin-top: 15px;
|
|
331
|
-
padding: 15px;
|
|
332
|
-
background: #f8f9fa;
|
|
333
|
-
border-radius: 8px;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
.test-item {
|
|
337
|
-
display: flex;
|
|
338
|
-
align-items: center;
|
|
339
|
-
padding: 8px 0;
|
|
340
|
-
border-bottom: 1px solid #e0e0e0;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
.test-item:last-child {
|
|
344
|
-
border-bottom: none;
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
.test-status {
|
|
348
|
-
width: 24px;
|
|
349
|
-
height: 24px;
|
|
350
|
-
border-radius: 50%;
|
|
351
|
-
display: flex;
|
|
352
|
-
align-items: center;
|
|
353
|
-
justify-content: center;
|
|
354
|
-
margin-right: 10px;
|
|
355
|
-
font-weight: 700;
|
|
356
|
-
font-size: 14px;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
.test-pass { background: #d4edda; color: #155724; }
|
|
360
|
-
.test-fail { background: #f8d7da; color: #721c24; }
|
|
361
|
-
.test-pending { background: #e2e3e5; color: #383d41; }
|
|
362
|
-
|
|
363
|
-
.test-name {
|
|
364
|
-
flex: 1;
|
|
365
|
-
font-size: 13px;
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
.demo-section {
|
|
369
|
-
background: #f8f9ff;
|
|
370
|
-
border-radius: 10px;
|
|
371
|
-
padding: 15px;
|
|
372
|
-
border: 1px solid #e4e7ff;
|
|
373
|
-
margin-bottom: 15px;
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
.section-title {
|
|
377
|
-
font-size: 14px;
|
|
378
|
-
font-weight: 700;
|
|
379
|
-
color: #3942a3;
|
|
380
|
-
margin-bottom: 10px;
|
|
381
|
-
}
|
|
382
|
-
|
|
383
|
-
.field {
|
|
384
|
-
display: flex;
|
|
385
|
-
flex-direction: column;
|
|
386
|
-
gap: 6px;
|
|
387
|
-
margin-bottom: 10px;
|
|
388
|
-
font-size: 12px;
|
|
389
|
-
color: #4d4d4d;
|
|
390
|
-
}
|
|
391
|
-
|
|
392
|
-
.field select,
|
|
393
|
-
.field input {
|
|
394
|
-
border: 1px solid #d7d9f5;
|
|
395
|
-
border-radius: 6px;
|
|
396
|
-
padding: 8px 10px;
|
|
397
|
-
font-size: 13px;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.action-row {
|
|
401
|
-
display: flex;
|
|
402
|
-
gap: 10px;
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
.action-row .btn {
|
|
406
|
-
margin-bottom: 0;
|
|
407
|
-
}
|
|
408
|
-
|
|
409
|
-
.hint {
|
|
410
|
-
font-size: 12px;
|
|
411
|
-
color: #667;
|
|
412
|
-
margin-top: 8px;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
.status-pill {
|
|
416
|
-
margin-top: 10px;
|
|
417
|
-
font-size: 12px;
|
|
418
|
-
padding: 8px 10px;
|
|
419
|
-
border-radius: 8px;
|
|
420
|
-
background: #eef0ff;
|
|
421
|
-
color: #4a4a8a;
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.status-pill.success {
|
|
425
|
-
background: #e0f4e7;
|
|
426
|
-
color: #256d3b;
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
.status-pill.warn {
|
|
430
|
-
background: #fff4d6;
|
|
431
|
-
color: #7a5a00;
|
|
432
|
-
}
|
|
433
|
-
|
|
434
|
-
.code-preview {
|
|
435
|
-
background: #0f172a;
|
|
436
|
-
color: #d7e3ff;
|
|
437
|
-
padding: 12px;
|
|
438
|
-
border-radius: 8px;
|
|
439
|
-
font-size: 12px;
|
|
440
|
-
max-height: 220px;
|
|
441
|
-
overflow: auto;
|
|
442
|
-
white-space: pre-wrap;
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
@media (max-width: 1024px) {
|
|
446
|
-
.main-grid {
|
|
447
|
-
grid-template-columns: 1fr;
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
</style>
|
|
451
|
-
</head>
|
|
452
|
-
<body>
|
|
453
|
-
<div class="container">
|
|
454
|
-
<header>
|
|
455
|
-
<h1>๐ฏ AAC Processors Browser Demo</h1>
|
|
456
|
-
<p class="subtitle">Test AAC file processors in your browser - Vite bundled with full TypeScript support</p>
|
|
457
|
-
</header>
|
|
458
|
-
|
|
459
|
-
<div class="main-grid">
|
|
460
|
-
<!-- Left Panel: Upload & Controls -->
|
|
461
|
-
<div class="panel">
|
|
462
|
-
<div class="panel-title">๐ Load AAC File</div>
|
|
463
|
-
|
|
464
|
-
<div class="upload-area" id="dropArea">
|
|
465
|
-
<div class="upload-icon">๐ค</div>
|
|
466
|
-
<p><strong>Drop file here</strong> or click to upload</p>
|
|
467
|
-
<p style="font-size: 12px; color: #999; margin-top: 5px;">
|
|
468
|
-
Supports: .dot, .opml, .obf, .obz, .gridset, .sps, .spb, .ce, .plist, .grd
|
|
469
|
-
</p>
|
|
470
|
-
</div>
|
|
471
|
-
|
|
472
|
-
<input type="file" id="fileInput" accept=".dot,.opml,.obf,.obz,.gridset,.sps,.spb,.ce,.plist,.grd">
|
|
473
|
-
|
|
474
|
-
<div id="fileInfo" style="display: none;">
|
|
475
|
-
<div class="processor-info">
|
|
476
|
-
<div class="processor-name" id="processorName"></div>
|
|
477
|
-
<div id="fileDetails" style="margin-top: 5px; color: #666;"></div>
|
|
478
|
-
</div>
|
|
479
|
-
</div>
|
|
480
|
-
|
|
481
|
-
<button class="btn" id="processBtn" disabled>๐ Process File</button>
|
|
482
|
-
<button class="btn btn-secondary" id="validateBtn" disabled>โ
Validate File</button>
|
|
483
|
-
<button class="btn btn-secondary" id="runTestsBtn">๐งช Run Compatibility Tests</button>
|
|
484
|
-
<button class="btn btn-secondary" id="clearBtn">๐๏ธ Clear Results</button>
|
|
485
|
-
|
|
486
|
-
<div class="stats" id="stats" style="display: none;">
|
|
487
|
-
<div class="stat-card">
|
|
488
|
-
<div class="stat-value" id="pageCount">0</div>
|
|
489
|
-
<div class="stat-label">Pages</div>
|
|
490
|
-
</div>
|
|
491
|
-
<div class="stat-card">
|
|
492
|
-
<div class="stat-value" id="buttonCount">0</div>
|
|
493
|
-
<div class="stat-label">Buttons</div>
|
|
494
|
-
</div>
|
|
495
|
-
<div class="stat-card">
|
|
496
|
-
<div class="stat-value" id="textCount">0</div>
|
|
497
|
-
<div class="stat-label">Texts</div>
|
|
498
|
-
</div>
|
|
499
|
-
<div class="stat-card">
|
|
500
|
-
<div class="stat-value" id="loadTime">0ms</div>
|
|
501
|
-
<div class="stat-label">Load Time</div>
|
|
502
|
-
</div>
|
|
503
|
-
</div>
|
|
504
|
-
|
|
505
|
-
<div class="log-panel" id="logPanel">
|
|
506
|
-
<div class="log-entry log-info">Ready to process files...</div>
|
|
507
|
-
</div>
|
|
508
|
-
|
|
509
|
-
<div class="test-results" id="testResults" style="display: none;">
|
|
510
|
-
<div class="panel-title">Test Results</div>
|
|
511
|
-
<div id="testList"></div>
|
|
512
|
-
</div>
|
|
513
|
-
|
|
514
|
-
<div class="validation-panel" id="validationPanel" style="display: none;">
|
|
515
|
-
<div class="panel-title">Validation</div>
|
|
516
|
-
<div class="validation-summary" id="validationSummary"></div>
|
|
517
|
-
<div class="validation-list" id="validationList"></div>
|
|
518
|
-
</div>
|
|
519
|
-
</div>
|
|
520
|
-
|
|
521
|
-
<!-- Right Panel: Results -->
|
|
522
|
-
<div class="panel results-panel">
|
|
523
|
-
<div class="panel-title">๐ AAC Pageset Lab</div>
|
|
524
|
-
<div class="tab-header">
|
|
525
|
-
<button class="tab-btn active" data-tab="inspectTab">Inspect</button>
|
|
526
|
-
<button class="tab-btn" data-tab="pagesetTab">Create & Convert</button>
|
|
527
|
-
</div>
|
|
528
|
-
<div class="tab-content active" id="inspectTab">
|
|
529
|
-
<div id="results">
|
|
530
|
-
<p style="color: #999; text-align: center; padding: 40px;">
|
|
531
|
-
Load a file to see its contents here
|
|
532
|
-
</p>
|
|
533
|
-
</div>
|
|
534
|
-
</div>
|
|
535
|
-
<div class="tab-content" id="pagesetTab">
|
|
536
|
-
<div class="demo-section">
|
|
537
|
-
<div class="section-title">โจ Create a Sample Pageset</div>
|
|
538
|
-
<div class="field">
|
|
539
|
-
<label for="templateSelect">Template</label>
|
|
540
|
-
<select id="templateSelect">
|
|
541
|
-
<option value="starter">Starter 2x2 + Feelings</option>
|
|
542
|
-
<option value="home">Home & Core 3x3</option>
|
|
543
|
-
</select>
|
|
544
|
-
</div>
|
|
545
|
-
<div class="field">
|
|
546
|
-
<label for="formatSelect">Output format</label>
|
|
547
|
-
<select id="formatSelect">
|
|
548
|
-
<option value="obf">OBF (.obf)</option>
|
|
549
|
-
<option value="obz">OBZ (.obz)</option>
|
|
550
|
-
</select>
|
|
551
|
-
</div>
|
|
552
|
-
<div class="action-row">
|
|
553
|
-
<button class="btn" id="createPagesetBtn">Generate & Download</button>
|
|
554
|
-
<button class="btn btn-secondary" id="previewPagesetBtn">Preview in Viewer</button>
|
|
555
|
-
</div>
|
|
556
|
-
<div class="hint">Creates a demo AACTree, then exports to OBF/OBZ.</div>
|
|
557
|
-
</div>
|
|
558
|
-
|
|
559
|
-
<div class="demo-section">
|
|
560
|
-
<div class="section-title">๐ Convert Loaded Pageset</div>
|
|
561
|
-
<div class="action-row">
|
|
562
|
-
<button class="btn" id="convertToObfBtn" disabled>Download .obf</button>
|
|
563
|
-
<button class="btn btn-secondary" id="convertToObzBtn" disabled>Download .obz</button>
|
|
564
|
-
</div>
|
|
565
|
-
<div class="hint">Upload and process a file first, then export it in another format.</div>
|
|
566
|
-
<div class="status-pill" id="conversionStatus">No pageset loaded yet.</div>
|
|
567
|
-
</div>
|
|
568
|
-
|
|
569
|
-
<div class="demo-section">
|
|
570
|
-
<div class="section-title">๐ Export Preview</div>
|
|
571
|
-
<pre class="code-preview" id="pagesetOutput">Generate or convert a pageset to preview the output JSON.</pre>
|
|
572
|
-
</div>
|
|
573
|
-
</div>
|
|
574
|
-
</div>
|
|
575
|
-
</div>
|
|
576
|
-
</div>
|
|
577
|
-
|
|
578
|
-
<script type="module" src="/src/main.ts"></script>
|
|
579
|
-
</body>
|
|
580
|
-
</html>
|