myron/jarvis
1
0
Fork 0
mirror of https://github.com/myronblair/jarvis synced 2026-06-30 17:50:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement 7 JARVIS UI enhancements

Browse Source 
#1  Voice waveform: Web Audio API drives wave-bar heights in real time
#2  Ambient dim mode: panels fade to 12% after 90s idle
#6  Streaming AI replies: Groq tokens via SSE; frontend ReadableStream
#7  Quick-note capture: N key / "note: text" saves to kb_facts instantly
#8  Cancel in-flight request: AbortController + CANCEL button
#9  Accent color themes: Stark Blue / Widow Red / Hulk Green, localStorage
#10 Browser push notifications: critical alerts when tab is backgrounded

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Myron Blair
2026-06-17 11:39:45 +00:00
parent 58070c7f06
commit 6195f9bd3b
5 changed files with 368 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public_html/assets/css/jarvis.css
+40
View File
@@ -648,6 +648,46 @@ body::after{
box-shadow:0 0 4px var(--red);
}
@keyframes waveBounce{from{height:4px}to{height:24px}}
.wave-bar.live{animation:none!important;transition:height 0.06s}
/* ── AMBIENT DIM MODE ─────────────────────────────────────────────────── */
.ambient-dim-active .panel,.ambient-dim-active #bottomBar{
opacity:0.12;transition:opacity 2s ease;pointer-events:none}
.ambient-dim-active .panel:hover,.ambient-dim-active #bottomBar:hover{
opacity:1;pointer-events:auto;transition:opacity 0.3s ease}
/* ── THEME BUTTONS ────────────────────────────────────────────────────── */
.theme-btn{
background:none;border:1px solid rgba(0,212,255,0.25);border-radius:50%;
width:14px;height:14px;cursor:pointer;padding:0;font-size:0.6rem;line-height:1;
display:flex;align-items:center;justify-content:center;color:var(--cyan);
transition:all 0.2s;flex-shrink:0}
.theme-btn.active{border-color:currentColor;box-shadow:0 0 6px currentColor}
.theme-btn:hover{opacity:0.8;transform:scale(1.2)}
/* ── CANCEL BUTTON (in thinking bubble) ──────────────────────────────── */
.thinking-cancel{
background:none;border:1px solid rgba(255,34,68,0.4);color:rgba(255,34,68,0.8);
font-family:var(--font-mono);font-size:0.55rem;letter-spacing:1px;
padding:2px 8px;border-radius:2px;cursor:pointer;margin-top:6px;display:block}
.thinking-cancel:hover{background:rgba(255,34,68,0.1)}
/* ── QUICK NOTE BAR ──────────────────────────────────────────────────── */
#quickNoteBar{
position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
width:500px;max-width:90vw;background:rgba(0,8,16,0.95);
border:1px solid var(--cyan);border-radius:3px;padding:8px 14px;
display:none;z-index:1100;align-items:center;gap:8px}
#quickNoteBar.open{display:flex}
#quickNoteInput{
flex:1;background:none;border:none;color:var(--cyan);
font-family:var(--font-mono);font-size:0.75rem;outline:none;letter-spacing:0.5px}
#quickNoteInput::placeholder{color:rgba(0,212,255,0.4)}
/* ── STREAMING MESSAGE ───────────────────────────────────────────────── */
.msg.jarvis.streaming::after{
content:'▋';animation:blink 0.7s step-end infinite;color:var(--cyan);margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
/* ── RIGHT PANEL ─────────────────────────────────────────────────── */
#rightPanel{display:flex;flex-direction:column;gap:10px;overflow-y:auto}