diff --git a/shared/homepage/app.js b/shared/homepage/app.js index 3f9ad8c..5795b05 100644 --- a/shared/homepage/app.js +++ b/shared/homepage/app.js @@ -95,9 +95,9 @@ function miCard(svc, state) { if (m.use) parts.push('
Use: ' + esc(m.use) + '
'); if (m.compaction) parts.push('
⚡ ' + esc(m.compaction) + '
'); if (m.supervision) parts.push('
' + esc(m.supervision) + '
'); - if (m.permission) parts.push('
⚠ ' + esc(m.permission) + '
'); - if (m.warn) parts.push('
' + - '⚠ ' + esc(m.warn) + '
'); + if (m.permission) parts.push('
⚠ ' + esc(m.permission) + '
'); + if (m.warn) parts.push('
⚠ privacy note' + + '
' + esc(m.warn) + '
'); const card = document.createElement('article'); card.className = 'mi-card mi-' + esc(m.unit); card.innerHTML = parts.join(''); @@ -109,7 +109,14 @@ function renderModelInfo(models) { panel.className = 'panel model-info'; const head = document.createElement('div'); head.className = 'mi-title'; - head.textContent = 'Model Information'; + const title = document.createElement('span'); + title.textContent = 'Model Information'; + head.appendChild(title); + const docsLink = document.createElement('a'); + docsLink.className = 'mi-docs-link'; + docsLink.href = '/docs#models'; + docsLink.textContent = 'AI guide \u2192'; + head.appendChild(docsLink); panel.appendChild(head); const grid = document.createElement('div'); grid.className = 'mi-grid'; @@ -132,19 +139,20 @@ function renderPanel(svc, state) { const art = svc.art ? '' : ''; const warn = svc.warn - ? '
⚠ ' + esc(svc.warn) + '
' + ? '
⚠ privacy note' + + '
' + esc(svc.warn) + '
' : ''; panel.innerHTML = '
' + art + ' ' + BADGE_LABEL[state] + '' + ' ' + esc(svc.name) + '' + '
' + - '
' + descHTML(svc) + '
' + warn + - ''; + '
' + descHTML(svc) + '
' + + '' + warn; if (svc.showLink && svc.url) { panel.classList.add('clickable'); panel.addEventListener('click', function (ev) { - if (!ev.target.closest('a')) window.location.href = svc.url; + if (ev.target.closest('a, .svc-warn')) return; }); } return panel; diff --git a/shared/homepage/style.css b/shared/homepage/style.css index 8ec8023..d236f92 100644 --- a/shared/homepage/style.css +++ b/shared/homepage/style.css @@ -81,7 +81,7 @@ body::after { } .panel { border: 1px solid var(--border); background: var(--panel); padding: 12px 14px; - border-radius: 6px; } + border-radius: 6px; display: flex; flex-direction: column; } .panel.clickable { cursor: pointer; transition: border-color 0.15s, filter 0.15s, transform 0.15s; } .panel.clickable:hover { border-color: var(--proto-cyan); @@ -134,6 +134,15 @@ body::after { .desc-inputs { color: var(--dim); } .desc-use { color: var(--fg); margin-top: 4px; } .links a { color: var(--link); text-decoration: underline; margin-right: 12px; } +/* Privacy disclosures: collapsed chip pinned to the panel bottom. */ +.svc-warn { margin-top: auto; padding-top: 8px; color: var(--down); } +.svc-warn summary, .mi-warn summary { cursor: pointer; color: var(--down); + list-style: none; user-select: none; } +.svc-warn summary::-webkit-details-marker, +.mi-warn summary::-webkit-details-marker { display: none; } +.svc-warn summary::after, .mi-warn summary::after { content: " \25B8"; } +.svc-warn[open] summary::after, .mi-warn[open] summary::after { content: " \25BE"; } +.warn-body { margin-top: 6px; color: var(--down); } .foot { margin-top: 24px; @@ -168,8 +177,11 @@ body::after { .docs pre code { color: var(--fg); } .docs img { display: block; max-width: 100%; border: 1px solid var(--border); border-radius: 2px; margin: 10px 0; } .docs .key-warn { color: var(--down); } -.docs [title].key-warn { cursor: help; - text-decoration: underline dotted color-mix(in srgb, var(--down) 60%, transparent); } +.docs details.key-warn summary { cursor: pointer; list-style: none; user-select: none; } +.docs details.key-warn summary::-webkit-details-marker { display: none; } +.docs details.key-warn summary::after { content: " \25B8"; } +.docs details.key-warn[open] summary::after { content: " \25BE"; } +.docs details.key-warn .warn-body { margin-top: 4px; } .docs .foot-note { color: var(--dim); } html[data-bare="1"] .docs h1, html[data-bare="1"] .docs h2 { color: #000; border-color: #000; } html[data-bare="1"] .docs a, html[data-bare="1"] .docs code { color: #000; } @@ -208,7 +220,20 @@ html[data-bare="1"] .top { border-image: none; } border-bottom: 1px solid var(--border); margin-bottom: 10px; padding-bottom: 4px; + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 12px; } +.mi-docs-link { + color: var(--link); + text-decoration: none; + text-transform: none; + letter-spacing: 0.06em; + font-size: 13px; + white-space: nowrap; +} +.mi-docs-link:hover { text-decoration: underline; } .mi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); @@ -218,9 +243,11 @@ html[data-bare="1"] .top { border-image: none; } font-size: 15px; line-height: 1.35; border: 1px solid var(--mi); + background: var(--mi-bg); padding: 10px 12px; border-radius: 6px; - background: linear-gradient(160deg, color-mix(in srgb, var(--mi) 5%, var(--panel)), var(--panel) 60%); + display: flex; + flex-direction: column; } .mi-zealot { --mi: #4fb4ff; } /* Zealot: Khai's blue blades */ .mi-archon { --mi: #a8ecff; } /* Archon: pure psychic light */ @@ -261,7 +288,7 @@ html[data-bare="1"] .top { border-image: none; } .mi-inputs { color: var(--dim); } .mi-use { color: var(--fg); margin-top: 4px; } .mi-super { color: var(--link); margin-top: 6px; } -.mi-warn { color: var(--down); margin-top: 4px; } +.mi-warn { margin-top: auto; padding-top: 8px; } .mi-perm { margin-top: 8px; padding: 6px 8px; @@ -278,7 +305,6 @@ html[data-bare="1"] .top { border-image: none; } background: color-mix(in srgb, var(--head) 8%, transparent); border-radius: 4px; } -.svc-warn { color: var(--down); margin-top: 6px; } /* Bare mode strips the model component to plain prose too. */ html[data-bare="1"] .mi-card { border-color: #000; box-shadow: none; background: none; } @@ -288,9 +314,12 @@ html[data-bare="1"] .mi-voice { color: #000; text-decoration: underline; } html[data-bare="1"] .mi-role, html[data-bare="1"] .mi-spec, html[data-bare="1"] .mi-use, html[data-bare="1"] .mi-comp, html[data-bare="1"] .mi-inputs, html[data-bare="1"] .mi-equiv, html[data-bare="1"] .mi-super, html[data-bare="1"] .mi-warn, html[data-bare="1"] .mi-hf { color: #000; } +html[data-bare="1"] .svc-warn summary, html[data-bare="1"] .mi-warn summary, +html[data-bare="1"] .warn-body { color: #000; } html[data-bare="1"] .app-art { display: none; } html[data-bare="1"] .svc-warn, html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { color: #000; border: none; text-shadow: none; padding: 0; } html[data-bare="1"] .mi-perm, html[data-bare="1"] .mi-comp { border: 1px solid #000; } +html[data-bare="1"] .mi-docs-link { color: #000; } /* Protoss layer: selection + scrollbar. */ ::selection { background: color-mix(in srgb, var(--proto-blue) 45%, transparent); color: #fff; }