Apply LotusGuild design system convergence (aesthetic_diff.md)

- §5: Section headers now ╠═══ TITLE ═══╣ (was ═══ TITLE ═══)
- §8+§18: Replace inline-style showTerminalNotification() with lt.toast.*
  delegate wrapper; load base.js from /base.js
- §12: Fix --text-muted #008822→#00bb33 (WCAG AA contrast)

base.js symlinked from web_template into public/ so lt.* is available.
showTerminalNotification() is kept as a thin wrapper so all existing
call sites continue to work unchanged.

README: Remove completed pending items (toast, text-muted, position)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-14 21:40:36 -04:00
parent 18a6b642d1
commit 3f6e04d1ab
3 changed files with 53 additions and 46 deletions

View File

@@ -20,7 +20,7 @@
--bg-terminal-border: #003300;
--text-primary: #00ff41;
--text-secondary: #00cc33;
--text-muted: #008822;
--text-muted: #00bb33;
/* Border & UI */
--border-color: #00ff41;
@@ -271,11 +271,11 @@
text-shadow: var(--glow-amber);
}
.card h3::before {
content: '═══ ';
content: '═══ ';
color: var(--terminal-green);
}
.card h3::after {
content: ' ═══';
content: ' ═══';
color: var(--terminal-green);
}
.status {
@@ -803,6 +803,7 @@
animation: slide-in 0.3s ease-out;
}
</style>
<script src="/base.js"></script>
</head>
<body>
<div class="container">
@@ -2899,45 +2900,12 @@
}
}
// Show terminal notification
// Show terminal notification — delegates to lt.toast from base.js
function showTerminalNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 80px;
right: 20px;
background: #001a00;
border: 2px solid var(--terminal-green);
color: var(--terminal-green);
padding: 15px 20px;
font-family: var(--font-mono);
z-index: 10000;
animation: slide-in 0.3s ease-out;
box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
`;
if (type === 'error') {
notification.style.borderColor = '#ff4444';
notification.style.color = '#ff4444';
message = '✗ ' + message;
} else if (type === 'success') {
message = '✓ ' + message;
} else {
message = ' ' + message;
}
notification.textContent = message;
document.body.appendChild(notification);
// Play beep
terminalBeep(type);
// Remove after 3 seconds
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transition = 'opacity 0.5s';
setTimeout(() => notification.remove(), 500);
}, 3000);
if (type === 'success') return lt.toast.success(message);
if (type === 'error') return lt.toast.error(message);
if (type === 'warning') return lt.toast.warning(message);
return lt.toast.info(message);
}
function connectWebSocket() {