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

fix modal header on host pages, button reset, remove emoji, add all 3 headers to styleguide, 42+ voices

Browse source
This commit is contained in:
russell@unturf.com 2026-02-24 15:16:14 -05:00
parent 31328aeddc
commit ca8df46ddc
5 changed files with 104 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

7
public/src/uncloseai-embed-modal.js
View file

@ -274,6 +274,8 @@ async function openUncloseaiEmbeddedModalNew() {
const modal = document.createElement("dialog");
modal.id = "uncloseai-embedded-modal";
modal.setAttribute("data-theme", theme);
// Force zero padding inline so host page dialog styles can't push the header inward
modal.style.padding = "0";
// CSS handles all styling now - no inline styles needed
// But we still need isMobile for some responsive text sizing
@ -292,15 +294,14 @@ async function openUncloseaiEmbeddedModalNew() {
const title = document.createElement("h2");
title.innerHTML =
"🤖 <span style=\"font-family: 'ChunkFiveRegular', monospace;\">uncloseai.</span>";
"<span style=\"font-family: 'ChunkFiveRegular', monospace;\">uncloseai.</span>";
title.className = `uncloseai-modal-title ${isMobile ? "uncloseai-modal-title-mobile" : "uncloseai-modal-title-desktop"}`;
const subtitle = document.createElement("div");
const pageTitle = document.title || window.location.hostname;
subtitle.innerHTML = `
<div class="uncloseai-modal-subtitle">
<span style="font-family: 'ChunkFiveRegular', monospace;">uncloseai.</span> ${getUIText("hermesIntro")}<br>
<span class="uncloseai-modal-subtitle-dim">${getUIText("discussingPage")}: ${pageTitle}</span>
${getUIText("discussingPage")}: ${pageTitle}
</div>
`;

27
public/src/uncloseai-modal-builtin.css
View file

@ -76,7 +76,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
.uncloseai-modal-settings-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white !important;
color: white;
font-size: 18px;
width: 36px;
height: 36px;
@ -86,7 +86,6 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
place-content: center;
transition: background 0.2s;
margin-right: 8px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.uncloseai-modal-settings-btn:hover {
@ -896,8 +895,28 @@ dialog#translate-modal h3,
dialog#translate-modal h4,
dialog#translate-modal h5,
dialog#translate-modal h6 {
padding: 0 !important;
margin: 0 !important;
padding: 0;
margin: 0;
}
/* Reset host page button styles that leak into our modals */
dialog#uncloseai-embedded-modal button,
dialog#tts-modal button,
dialog#translate-modal button {
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
padding: 0;
margin: 0;
border: none;
background: none;
font: inherit;
line-height: normal;
letter-spacing: normal;
text-transform: none;
text-align: center;
box-sizing: border-box;
}
/* API Configuration Styles */

25
public/src/uncloseai-modal-pico.css
View file

@ -95,10 +95,10 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
}
/* Settings button */
.uncloseai-modal-settings-btn {
dialog#uncloseai-embedded-modal .uncloseai-modal-settings-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white !important;
color: white;
font-size: 18px;
width: 36px;
height: 36px;
@ -108,7 +108,6 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
place-content: center;
transition: background 0.2s;
margin-right: 8px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.uncloseai-modal-settings-btn:hover {
@ -970,6 +969,26 @@ dialog#translate-modal h6 {
margin: 0 !important;
}
/* Reset host page button styles that leak into our modals */
dialog#uncloseai-embedded-modal button,
dialog#tts-modal button,
dialog#translate-modal button {
min-width: unset;
max-width: unset;
min-height: unset;
max-height: unset;
padding: 0;
margin: 0;
border: none;
background: none;
font: inherit;
line-height: normal;
letter-spacing: normal;
text-transform: none;
text-align: center;
box-sizing: border-box;
}
/* API Configuration Styles */
.uncloseai-toggle-container {
display: block;

62
public/uncloseai-js-styleguide.html
View file

@ -219,7 +219,6 @@
/* Modal header demo */
.sg-header-demo {
padding: 16px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: grid;
grid-template-columns: 1fr auto;
@ -228,9 +227,18 @@
margin: 16px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sg-header-demo-purple {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.sg-header-demo-green {
background: linear-gradient(45deg, #4CAF50 0%, #45a049 100%);
}
.sg-header-title {
font-weight: 600;
font-size: 18px;
font-size: 20px;
}
.sg-header-title-brand {
font-family: 'ChunkFiveRegular', monospace;
}
.sg-header-subtitle {
font-size: 12px;
@ -248,6 +256,13 @@
display: grid;
place-content: center;
}
.sg-header-btn-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 8px;
align-items: center;
}
/* Control strip demo */
.sg-controls-demo {
@ -619,15 +634,38 @@
<!-- ============================================ -->
<!-- MODAL HEADER -->
<!-- ============================================ -->
<h2 id="modal-header">Modal Header</h2>
<p>Purple gradient header with title, subtitle, and settings gear. The gradient <code>linear-gradient(135deg, #667eea, #764ba2)</code> is the visual anchor across the entire modal system.</p>
<h2 id="modal-header">Modal Headers</h2>
<p>All three modals share the same header structure: gradient background, title, and action buttons. The purple gradient anchors the chat and TTS modals, while translate uses green.</p>
<div class="sg-header-demo">
<h3 id="header-chat">Chat Modal</h3>
<p>Purple gradient with brand title, page context subtitle, settings gear, and close button.</p>
<div class="sg-header-demo sg-header-demo-purple">
<div>
<div class="sg-header-title">Hermes Machine Learning</div>
<div class="sg-header-subtitle">Discussing: uncloseai.js Styleguide</div>
<div class="sg-header-title sg-header-title-brand">uncloseai.</div>
<div class="sg-header-subtitle">discussing: uncloseai.js Styleguide</div>
</div>
<button class="sg-header-btn">&#x2699;</button>
<div class="sg-header-btn-row">
<button class="sg-header-btn">&#x2699;&#xFE0F;</button>
<button class="sg-header-btn">&#x2715;</button>
</div>
</div>
<h3 id="header-tts">TTS Modal</h3>
<p>Purple gradient with "Text to Speech" title and close button.</p>
<div class="sg-header-demo sg-header-demo-purple">
<div>
<div class="sg-header-title">Text to Speech</div>
</div>
<button class="sg-header-btn">&#x2715;</button>
</div>
<h3 id="header-translate">Translate Modal</h3>
<p>Green gradient (<code>#4CAF50 → #45a049</code>) with "Translate" title and close button.</p>
<div class="sg-header-demo sg-header-demo-green">
<div>
<div class="sg-header-title">Translate</div>
</div>
<button class="sg-header-btn">&#x2715;</button>
</div>
<!-- ============================================ -->
@ -790,7 +828,13 @@
<li><a href="#vault-error">Error State</a></li>
</ul>
</li>
<li><a href="#modal-header">Modal Header</a></li>
<li><a href="#modal-header">Modal Headers</a>
<ul>
<li><a href="#header-chat">Chat</a></li>
<li><a href="#header-tts">TTS</a></li>
<li><a href="#header-translate">Translate</a></li>
</ul>
</li>
<li><a href="#chat">Chat Messages</a>
<ul>
<li><a href="#message-actions">Message Actions</a></li>

4
public/uncloseai-js.html
View file

@ -131,7 +131,7 @@
<h3 id="tts">Text-to-Speech</h3>
<ul>
<li>40+ voices across multiple TTS models (standard, HD, cloned)</li>
<li>42+ voices across multiple TTS models (standard, HD, cloned)</li>
<li>Speak any message, paste arbitrary text, or read the whole page aloud</li>
<li>Adjustable playback speed</li>
<li>Buffered or streaming audio modes</li>
@ -211,7 +211,7 @@
<p>Choose from dynamically discovered models. The dropdown shows the endpoint and model name. Models are auto-discovered by querying <code>/v1/models</code> on each configured endpoint.</p>
<h3 id="settings-voice">Voice Selection</h3>
<p>40+ voices organized by TTS model. Voices are discovered dynamically from the speech endpoint. Includes standard, HD, and cloned voice options.</p>
<p>42+ voices organized by TTS model. Voices are discovered dynamically from the speech endpoint. Includes standard, HD, and cloned voice options.</p>
<h3 id="settings-language">Language</h3>
<p>Switch the UI and model response language. Changes take effect immediately across all text.</p>