engineering/www.unturf.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add uncloseai widget section to styleguide

Browse source
This commit is contained in:
russell@unturf.com 2026-03-14 11:46:35 -04:00
parent 542b6aeb3d
commit e045fd4e97
1 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
styleguide/index.html
View file

@ -433,6 +433,39 @@ A living reference for every component, element, & pattern across <span class="u
<hr>
<!-- ============================================================ -->
<!-- 14. UNCLOSEAI WIDGET -->
<!-- ============================================================ -->
<h3>14. uncloseai. Widget</h3>
<p>Every content page loads the <a href="https://uncloseai.com/">uncloseai.</a> chat widget via a single script tag. The widget provides free machine learning chat, page translation, & text to speech.</p>
<h4>Embed Pattern</h4>
<pre><code>&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
<p>Place before <code>&lt;/body&gt;</code>. The script injects a floating button (bottom right) that opens a chat modal. Translation & TTS features appear as controls inside the modal.</p>
<h4>Behavior</h4>
<table>
<thead>
<tr><th>Feature</th><th>Trigger</th><th>Notes</th></tr>
</thead>
<tbody>
<tr><td>Chat</td><td>Click floating button</td><td>Page context passed automatically</td></tr>
<tr><td>Translate</td><td>Globe icon in modal controls</td><td>Renders translated page inline via iframe</td></tr>
<tr><td>Text to Speech</td><td>Speaker icon in modal controls</td><td>Multiple voices, adjustable speed</td></tr>
</tbody>
</table>
<h4>CSS Isolation</h4>
<p>The widget loads its own stylesheet (<code>uncloseai-modal-pico.css</code> on PicoCSS sites, <code>uncloseai-modal-builtin.css</code> elsewhere). All selectors scope to <code>dialog#uncloseai-embedded-modal</code>, <code>dialog#translate-modal</code>, or <code>dialog#tts-modal</code> to avoid leaking into host page styles.</p>
<h4>Software Page Card</h4>
<p>On the <a href="/software/">software page</a>, <code>.project-uncloseai</code> spans full grid width at desktop breakpoints.</p>
<hr>
<p><a href="/let-us-define-a-permacomputer/">&#8592; back to the manifesto</a></p>
</main>