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

fix vault lock screen showing when already unlocked, tighten vault card design

Browse source
This commit is contained in:
russell@unturf.com 2026-02-24 14:33:04 -05:00
parent 01439ed29a
commit 318b9f3ace
4 changed files with 88 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -418,9 +418,9 @@ async function openUncloseaiEmbeddedModalNew() {
vaultSection.style.display = "grid";
vaultSection.style.placeContent = "center";
vaultSection.style.height = "100%";
vaultSection.style.minHeight = "400px";
vaultSection.style.minHeight = "360px";
vaultSection.style.border = "none";
vaultSection.style.padding = "20px";
vaultSection.style.padding = "16px";
const hasVault = UncloseVault.hasVault();
const promptUI = document.createElement("div");
@ -445,8 +445,10 @@ async function openUncloseaiEmbeddedModalNew() {
submitBtn.onclick = () => {
const password = passwordInput.value;
// Check fresh vault state (not stale closure)
const vaultExists = UncloseVault.hasVault();
if (hasVault) {
if (vaultExists) {
// Unlock existing vault
const result = UncloseVault.unlock(password);
if (result.success) {
@ -1970,10 +1972,13 @@ async function openUncloseaiEmbeddedModalNew() {
submitBtn.onclick = () => {
const password = passwordInput.value;
if (hasVault) {
// Check fresh vault state (not stale closure)
const vaultExists = UncloseVault.hasVault();
if (vaultExists) {
const result = UncloseVault.unlock(password);
if (result.success) {
vaultGate.style.display = "none";
buildVaultUI();
refreshSettingsFromVault();
startChat();
} else {
@ -1992,6 +1997,7 @@ async function openUncloseaiEmbeddedModalNew() {
if (result.success) {
migrateSettingsToVault();
vaultGate.style.display = "none";
buildVaultUI();
refreshSettingsFromVault();
startChat();
} else {

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

@ -1443,40 +1443,40 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
/* Vault gate content card */
.uncloseai-vault-card {
display: grid;
gap: 20px;
gap: 14px;
width: 100%;
max-width: 380px;
max-width: 340px;
text-align: center;
padding: 40px 32px;
border-radius: 16px;
padding: 28px 24px;
border-radius: 12px;
animation: vault-fade-in 0.25s ease-out;
}
/* Vault lock icon */
.uncloseai-vault-icon {
font-size: 2.5em;
font-size: 1.8em;
line-height: 1;
}
/* Vault title */
.uncloseai-vault-title {
font-family: 'ChunkFiveRegular', monospace;
font-size: 1.8em;
font-size: 1.5em;
letter-spacing: -0.02em;
}
/* Vault explanation text */
.uncloseai-vault-explanation {
font-size: 0.92em;
line-height: 1.6;
font-size: 0.85em;
line-height: 1.5;
}
/* Vault password input */
.uncloseai-vault-input {
width: 100%;
padding: 14px 16px;
font-size: 1em;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95em;
border-radius: 8px;
border: 1.5px solid transparent;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@ -1485,37 +1485,37 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
.uncloseai-vault-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
/* Vault submit button */
.uncloseai-vault-submit {
width: 100%;
padding: 14px;
font-size: 1em;
padding: 12px;
font-size: 0.95em;
font-weight: 600;
border: none;
border-radius: 10px;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transition: transform 0.15s, box-shadow 0.15s;
transition: opacity 0.15s, box-shadow 0.15s;
letter-spacing: 0.02em;
}
.uncloseai-vault-submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
opacity: 0.92;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}
.uncloseai-vault-submit:active {
transform: translateY(0);
opacity: 0.85;
box-shadow: none;
}
/* Vault error message */
.uncloseai-vault-error {
font-size: 0.9em;
font-size: 0.85em;
color: #dc3545;
display: none;
}
@ -1526,8 +1526,8 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-gate {
}
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-title {
@ -1555,8 +1555,8 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-gate {
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-title {

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

@ -1498,40 +1498,40 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
/* Vault gate content card */
.uncloseai-vault-card {
display: grid;
gap: 20px;
gap: 14px;
width: 100%;
max-width: 380px;
max-width: 340px;
text-align: center;
padding: 40px 32px;
border-radius: 16px;
padding: 28px 24px;
border-radius: 12px;
animation: vault-fade-in 0.25s ease-out;
}
/* Vault lock icon */
.uncloseai-vault-icon {
font-size: 2.5em;
font-size: 1.8em;
line-height: 1;
}
/* Vault title */
.uncloseai-vault-title {
font-family: 'ChunkFiveRegular', monospace;
font-size: 1.8em;
font-size: 1.5em;
letter-spacing: -0.02em;
}
/* Vault explanation text */
.uncloseai-vault-explanation {
font-size: 0.92em;
line-height: 1.6;
font-size: 0.85em;
line-height: 1.5;
}
/* Vault password input */
.uncloseai-vault-input {
width: 100%;
padding: 14px 16px;
font-size: 1em;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95em;
border-radius: 8px;
border: 1.5px solid transparent;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@ -1540,37 +1540,37 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message {
.uncloseai-vault-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
/* Vault submit button */
.uncloseai-vault-submit {
width: 100%;
padding: 14px;
font-size: 1em;
padding: 12px;
font-size: 0.95em;
font-weight: 600;
border: none;
border-radius: 10px;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transition: transform 0.15s, box-shadow 0.15s;
transition: opacity 0.15s, box-shadow 0.15s;
letter-spacing: 0.02em;
}
.uncloseai-vault-submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
opacity: 0.92;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}
.uncloseai-vault-submit:active {
transform: translateY(0);
opacity: 0.85;
box-shadow: none;
}
/* Vault error message */
.uncloseai-vault-error {
font-size: 0.9em;
font-size: 0.85em;
color: #dc3545;
display: none;
}
@ -1581,8 +1581,8 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-gate {
}
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-card {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-vault-title {
@ -1610,8 +1610,8 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-gate {
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-vault-title {

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

@ -66,10 +66,10 @@
/* Vault gate demo containers */
.sg-vault-demo {
border-radius: 16px;
border-radius: 12px;
overflow: hidden;
position: relative;
min-height: 420px;
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
@ -88,34 +88,34 @@
/* Vault card styling for static demos */
.sg-vault-card {
display: grid;
gap: 20px;
gap: 14px;
width: 100%;
max-width: 380px;
max-width: 340px;
text-align: center;
padding: 40px 32px;
border-radius: 16px;
padding: 28px 24px;
border-radius: 12px;
}
.sg-vault-card-dark {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.sg-vault-card-light {
background: white;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.sg-vault-icon {
font-size: 2.5em;
font-size: 1.8em;
line-height: 1;
}
.sg-vault-title {
font-family: 'ChunkFiveRegular', monospace;
font-size: 1.8em;
font-size: 1.5em;
letter-spacing: -0.02em;
}
.sg-vault-explanation {
font-size: 0.92em;
line-height: 1.6;
font-size: 0.85em;
line-height: 1.5;
}
.sg-vault-explanation-dark {
color: rgba(255, 255, 255, 0.72);
@ -125,9 +125,9 @@
}
.sg-vault-input {
width: 100%;
padding: 14px 16px;
font-size: 1em;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95em;
border-radius: 8px;
border: 1.5px solid transparent;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@ -151,23 +151,23 @@
}
.sg-vault-submit {
width: 100%;
padding: 14px;
font-size: 1em;
padding: 12px;
font-size: 0.95em;
font-weight: 600;
border: none;
border-radius: 10px;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transition: transform 0.15s, box-shadow 0.15s;
transition: opacity 0.15s, box-shadow 0.15s;
letter-spacing: 0.02em;
}
.sg-vault-submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
opacity: 0.92;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}
.sg-vault-error {
font-size: 0.9em;
font-size: 0.85em;
color: #dc3545;
}
@ -283,10 +283,10 @@
}
.sg-gradient-btn {
padding: 10px 20px;
font-size: 1em;
font-size: 0.95em;
font-weight: 600;
border: none;
border-radius: 10px;
border-radius: 8px;
cursor: pointer;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
@ -328,9 +328,9 @@
border-color: #667eea;
}
.sg-input-rect {
padding: 14px 16px;
font-size: 1em;
border-radius: 10px;
padding: 12px 14px;
font-size: 0.95em;
border-radius: 8px;
border: 1.5px solid var(--muted-border-color);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
@ -340,7 +340,7 @@
}
.sg-input-rect:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
/* Message actions demo */