Skip to content

Commit 3b3ecb3

Browse files
willwadewillwade
committed
update demo
1 parent 045a392 commit 3b3ecb3

3 files changed

Lines changed: 528 additions & 20 deletions

File tree

‎examples/vitedemo/QUICKSTART.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ The `test-files/` folder contains example AAC files you can use:
4040
- **Navigation**: Click NAVIGATE buttons to jump between pages
4141
- **Stats**: See page/button/text counts and load time
4242
- **Logs**: Watch the processing log in real-time
43+
- **Pageset Lab**: Open the "Create & Convert" tab to generate a sample pageset or convert an upload to OBF/OBZ
4344

4445
## 🛠️ Development
4546

‎examples/vitedemo/index.html‎

Lines changed: 160 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,39 @@
6363
border-bottom: 2px solid #667eea;
6464
}
6565

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+
6699
.upload-area {
67100
border: 2px dashed #ccc;
68101
border-radius: 8px;
@@ -290,6 +323,83 @@
290323
font-size: 13px;
291324
}
292325

326+
.demo-section {
327+
background: #f8f9ff;
328+
border-radius: 10px;
329+
padding: 15px;
330+
border: 1px solid #e4e7ff;
331+
margin-bottom: 15px;
332+
}
333+
334+
.section-title {
335+
font-size: 14px;
336+
font-weight: 700;
337+
color: #3942a3;
338+
margin-bottom: 10px;
339+
}
340+
341+
.field {
342+
display: flex;
343+
flex-direction: column;
344+
gap: 6px;
345+
margin-bottom: 10px;
346+
font-size: 12px;
347+
color: #4d4d4d;
348+
}
349+
350+
.field select,
351+
.field input {
352+
border: 1px solid #d7d9f5;
353+
border-radius: 6px;
354+
padding: 8px 10px;
355+
font-size: 13px;
356+
}
357+
358+
.action-row {
359+
display: flex;
360+
gap: 10px;
361+
}
362+
363+
.action-row .btn {
364+
margin-bottom: 0;
365+
}
366+
367+
.hint {
368+
font-size: 12px;
369+
color: #667;
370+
margin-top: 8px;
371+
}
372+
373+
.status-pill {
374+
margin-top: 10px;
375+
font-size: 12px;
376+
padding: 8px 10px;
377+
border-radius: 8px;
378+
background: #eef0ff;
379+
color: #4a4a8a;
380+
}
381+
382+
.status-pill.success {
383+
background: #e0f4e7;
384+
color: #256d3b;
385+
}
386+
387+
.status-pill.warn {
388+
background: #fff4d6;
389+
color: #7a5a00;
390+
}
391+
392+
.code-preview {
393+
background: #0f172a;
394+
color: #d7e3ff;
395+
padding: 12px;
396+
border-radius: 8px;
397+
font-size: 12px;
398+
max-height: 220px;
399+
overflow: auto;
400+
white-space: pre-wrap;
401+
}
402+
293403
@media (max-width: 1024px) {
294404
.main-grid {
295405
grid-template-columns: 1fr;
@@ -361,11 +471,56 @@ <h1>🎯 AAC Processors Browser Demo</h1>
361471

362472
<!-- Right Panel: Results -->
363473
<div class="panel results-panel">
364-
<div class="panel-title">📊 File Contents</div>
365-
<div id="results">
366-
<p style="color: #999; text-align: center; padding: 40px;">
367-
Load a file to see its contents here
368-
</p>
474+
<div class="panel-title">📊 AAC Pageset Lab</div>
475+
<div class="tab-header">
476+
<button class="tab-btn active" data-tab="inspectTab">Inspect</button>
477+
<button class="tab-btn" data-tab="pagesetTab">Create & Convert</button>
478+
</div>
479+
<div class="tab-content active" id="inspectTab">
480+
<div id="results">
481+
<p style="color: #999; text-align: center; padding: 40px;">
482+
Load a file to see its contents here
483+
</p>
484+
</div>
485+
</div>
486+
<div class="tab-content" id="pagesetTab">
487+
<div class="demo-section">
488+
<div class="section-title">✨ Create a Sample Pageset</div>
489+
<div class="field">
490+
<label for="templateSelect">Template</label>
491+
<select id="templateSelect">
492+
<option value="starter">Starter 2x2 + Feelings</option>
493+
<option value="home">Home & Core 3x3</option>
494+
</select>
495+
</div>
496+
<div class="field">
497+
<label for="formatSelect">Output format</label>
498+
<select id="formatSelect">
499+
<option value="obf">OBF (.obf)</option>
500+
<option value="obz">OBZ (.obz)</option>
501+
</select>
502+
</div>
503+
<div class="action-row">
504+
<button class="btn" id="createPagesetBtn">Generate & Download</button>
505+
<button class="btn btn-secondary" id="previewPagesetBtn">Preview in Viewer</button>
506+
</div>
507+
<div class="hint">Creates a demo AACTree, then exports to OBF/OBZ.</div>
508+
</div>
509+
510+
<div class="demo-section">
511+
<div class="section-title">🔁 Convert Loaded Pageset</div>
512+
<div class="action-row">
513+
<button class="btn" id="convertToObfBtn" disabled>Download .obf</button>
514+
<button class="btn btn-secondary" id="convertToObzBtn" disabled>Download .obz</button>
515+
</div>
516+
<div class="hint">Upload and process a file first, then export it in another format.</div>
517+
<div class="status-pill" id="conversionStatus">No pageset loaded yet.</div>
518+
</div>
519+
520+
<div class="demo-section">
521+
<div class="section-title">📄 Export Preview</div>
522+
<pre class="code-preview" id="pagesetOutput">Generate or convert a pageset to preview the output JSON.</pre>
523+
</div>
369524
</div>
370525
</div>
371526
</div>

0 commit comments

Comments
 (0)