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

Add morning briefing, command palette, and boot animations

Browse Source 
#11 Smart Morning Briefing: auto-speaks once per day before noon — fetches
tasks, appointments, active alerts, and weather, composes a ~2-sentence TTS
summary. Stored in localStorage (jarvis_brief_YYYY-MM-DD) to fire only once.

#12 Quick Command Palette (Ctrl+K): frosted-glass overlay with 20 pre-loaded
commands across 6 groups (Network/Agents/Planner/Media/Smart Home/System).
Fuzzy filter as you type, arrow-key navigation, Enter to fire. Matches are
highlighted. Backdrop click or Escape to close.

#13 Live Boot Animation: stat bars and numbers now count from 0 on first render
via tickTo() change. Arc Reactor rings spin in with staggered delays (0.08s
per ring) on login using boot-spin CSS class + @keyframes arcBootSpin.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Myron Blair
2026-06-17 03:00:16 +00:00
parent 462ce257a8
commit b2aa3280e1
4 changed files with 252 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public_html/assets/css/jarvis.css
+61
View File
@@ -1101,3 +1101,64 @@ body::after{
.intel-new-btn:hover{background:rgba(0,212,255,0.12)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
/* ── ARC REACTOR BOOT SPIN ───────────────────────────────────────────── */
@keyframes arcBootSpin{
0%{transform:rotate(0deg) scale(0.6);opacity:0.2}
40%{opacity:1}
100%{transform:rotate(360deg) scale(1);opacity:1}
}
#arcReactor.boot-spin .arc-ring{animation:arcBootSpin 1.4s cubic-bezier(0.4,0,0.2,1) both!important}
#arcReactor.boot-spin .arc-ring.r3{animation-delay:0s!important}
#arcReactor.boot-spin .arc-ring.r5{animation-delay:0.08s!important}
#arcReactor.boot-spin .arc-ring.r7{animation-delay:0.16s!important}
#arcReactor.boot-spin .arc-core{animation:arcBootSpin 1.0s 0.3s cubic-bezier(0.4,0,0.2,1) both!important}
/* ── COMMAND PALETTE ─────────────────────────────────────────────────── */
#cmdPalette{
position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;
display:none;align-items:flex-start;justify-content:center;
padding-top:12vh;backdrop-filter:blur(4px);
opacity:0;transition:opacity 0.18s ease;
}
#cmdPalette.open{opacity:1}
#cmdPaletteBox{
width:min(640px,92vw);background:rgba(5,15,25,0.97);
border:1px solid rgba(0,212,255,0.35);border-radius:4px;
box-shadow:0 0 40px rgba(0,212,255,0.15),0 20px 60px rgba(0,0,0,0.8);
overflow:hidden;transform:translateY(-8px);transition:transform 0.18s ease;
}
#cmdPalette.open #cmdPaletteBox{transform:translateY(0)}
#cmdPaletteInput{
width:100%;background:transparent;border:none;border-bottom:1px solid rgba(0,212,255,0.2);
color:var(--cyan);font-family:var(--font-display);font-size:0.85rem;letter-spacing:1px;
padding:16px 20px;outline:none;caret-color:var(--cyan);
}
#cmdPaletteInput::placeholder{color:rgba(0,212,255,0.3);letter-spacing:2px}
#cmdPaletteList{max-height:360px;overflow-y:auto;padding:8px 0}
#cmdPaletteList .cp-group{
font-family:var(--font-display);font-size:0.4rem;letter-spacing:3px;
color:rgba(0,212,255,0.4);padding:8px 20px 4px;text-transform:uppercase
}
#cmdPaletteList .cp-item{
display:flex;align-items:center;gap:10px;padding:8px 20px;cursor:pointer;
font-family:var(--font-mono);font-size:0.68rem;color:rgba(200,230,255,0.7);
transition:background 0.1s,color 0.1s;
}
#cmdPaletteList .cp-item:hover,#cmdPaletteList .cp-item.cp-active{
background:rgba(0,212,255,0.08);color:var(--cyan)
}
#cmdPaletteList .cp-item .cp-icon{color:rgba(0,212,255,0.4);flex-shrink:0;font-size:0.6rem}
#cmdPaletteList .cp-item .cp-label{flex:1}
#cmdPaletteList .cp-item .cp-label mark{background:none;color:var(--cyan);font-weight:700}
#cmdPaletteList .cp-item .cp-kbd{
font-family:var(--font-mono);font-size:0.45rem;color:rgba(0,212,255,0.3);
border:1px solid rgba(0,212,255,0.2);border-radius:2px;padding:1px 5px;
opacity:0;transition:opacity 0.1s;
}
#cmdPaletteList .cp-item.cp-active .cp-kbd,#cmdPaletteList .cp-item:hover .cp-kbd{opacity:1}
#cmdPaletteFooter{
font-family:var(--font-display);font-size:0.4rem;letter-spacing:2px;
color:rgba(0,212,255,0.25);padding:8px 20px;border-top:1px solid rgba(0,212,255,0.1);
display:flex;gap:16px
}