Skip to content

site: merge hero into one terminal + real verification steps #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FiscalMindset merged 1 commit into from
Jul 15, 2026
Merged

site: merge hero into one terminal + real verification steps #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 47 additions & 43 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,14 +394,16 @@
.tbody .ann{color:#6a6a90;font-style:italic}
.tbody .hr{display:flex;align-items:center;gap:10px;margin:10px 0 6px;color:var(--violet);font-size:11px;letter-spacing:.05em}
.tbody .hr span{flex:1;height:1px;background:var(--line2)} .tbody .hr b{font-weight:700}
/* two-terminal hero stack */
.termstack{display:flex;flex-direction:column;gap:14px}
.tbody.s1{height:196px} .tbody.s2{height:244px}
.termhero.cc{border-color:rgba(139,123,255,.32);box-shadow:0 30px 80px -30px rgba(90,60,220,.5)}
.termhero.cc .bar{background:#0e0a1a;border-bottom-color:rgba(139,123,255,.18)}
/* one bigger hero terminal that plays the whole journey */
.tbody.big{height:454px}
.termhero.cc{border-color:rgba(139,123,255,.4);box-shadow:0 30px 80px -30px rgba(90,60,220,.55)}
.termhero.cc .bar{background:#0e0a1a;border-bottom-color:rgba(139,123,255,.22)}
.termhero.cc .bar .t{color:#b6a8ff}
.termhero.idle{opacity:.4;filter:saturate(.45);transition:opacity .4s,filter .4s}
.termhero{transition:opacity .4s,filter .4s}
.termhero{transition:border-color .5s,box-shadow .5s}
.tbody .l.hr{display:flex;align-items:center;gap:10px;margin:10px 0 4px;color:var(--violet);font-size:11px;letter-spacing:.06em;font-weight:700}
.tbody .l.hr::before,.tbody .l.hr::after{content:"";flex:1;height:1px;background:rgba(139,123,255,.35)}
.cursor{display:inline-block;width:7px;height:14px;background:#7fd1ff;vertical-align:-2px;margin-left:1px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
Comment on lines +405 to +406

@qodo-code-review qodo-code-review Bot Jul 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Informational

1. Duplicate cursor css 🐞 Bug ⚙ Maintainability

site/index.html defines .cursor and @keyframes blink twice back-to-back, which is redundant
and creates a future divergence risk if one copy is edited without the other. This also makes the
cascade harder to reason about when debugging animation behavior.
Agent Prompt 
## Issue description
The CSS for the hero terminal defines `.cursor` and `@keyframes blink` twice consecutively. This duplication is redundant and increases maintenance/debugging risk.

## Issue Context
Only one `.cursor` rule and one `@keyframes blink` block are needed; the second copy should be removed to avoid confusion and accidental divergence.

## Fix Focus Areas
- site/index.html[405-408]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

.cursor{display:inline-block;width:7px;height:14px;background:#7fd1ff;vertical-align:-2px;margin-left:1px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

Expand Down Expand Up @@ -461,15 +463,9 @@ <h1 class="big">Your AI agent can't leak the API&nbsp;key it <span class="grad-t
<img alt="tdx" src="https://img.shields.io/badge/Intel-TDX-58a6ff?style=flat-square" />
</div>
</div>
<div class="termstack reveal">
<div class="termhero" id="term1">
<div class="bar"><i style="background:#ff6b63"></i><i style="background:#f0b429"></i><i style="background:#3fd07a"></i><span class="t">zsh — setup (your shell)</span></div>
<div class="tbody s1" id="t1body"></div>
</div>
<div class="termhero cc idle" id="term2">
<div class="bar"><i style="background:#8b7bff"></i><i style="background:#f0b429"></i><i style="background:#3fd07a"></i><span class="t">◆ Claude Code — ~/my-agent</span></div>
<div class="tbody s2" id="t2body"></div>
</div>
<div class="termhero reveal" id="term1">
<div class="bar"><i style="background:#ff6b63"></i><i style="background:#f0b429"></i><i style="background:#3fd07a"></i><span class="t" id="termTitle">zsh — you@mac</span></div>
<div class="tbody big" id="heroBody"></div>
</div>
Comment on lines +466 to 469

@qodo-code-review qodo-code-review Bot Jul 15, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Informational

2. Dead termstack selector 🐞 Bug ⚙ Maintainability

The hero markup no longer uses a .termstack wrapper after merging to a single terminal, but the
mobile overflow guard CSS still targets .termstack. This leaves dead CSS that can mislead future
edits about the intended hero structure.
Agent Prompt 
## Issue description
The `.termstack` class is no longer present in the hero HTML after the PR's merge to a single terminal, but the CSS still includes `.termstack` in a shared selector list.

## Issue Context
Since the hero no longer renders any `.termstack` element, `.termstack` should be removed from the selector list (unless it's still used elsewhere intentionally).

## Fix Focus Areas
- site/index.html[38-42]
- site/index.html[466-469]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

</div>
</section>
Expand Down Expand Up @@ -1117,14 +1113,14 @@ <h2 style="font-size:clamp(24px,3.4vw,34px)">Seal your first key in 30 seconds</
window.addEventListener('load',build);
})();

/* ── hero: TWO real terminals — setup shell, then a live Claude Code session ── */
/* ── hero: ONE terminal that plays the whole journey — setup, then `claude`
opens a live Claude Code session INSIDE the same terminal ── */
(function(){
const b1=document.getElementById('t1body'), b2=document.getElementById('t2body'), w2=document.getElementById('term2');
if(!b1||!b2||!w2) return;
const body=document.getElementById('heroBody'), win=document.getElementById('term1'), title=document.getElementById('termTitle');
if(!body||!win||!title) return;
const wait=ms=>new Promise(r=>setTimeout(r,ms));
// s1 = your shell. s2 = the Claude Code session it launches.
// Every out: line is a real captured output from an actual run.
const s1=[
const script=[
{cmd:'npm i -g @fiscalmindset/blindfold'},
{out:['dim','added 133 packages in 6s']},
{out:['ok','+ @fiscalmindset/blindfold@0.4.6']},
Expand All @@ -1135,29 +1131,40 @@ <h2 style="font-size:clamp(24px,3.4vw,34px)">Seal your first key in 30 seconds</
{cmd:'blindfold register --name google_sheet_api_key'},
{out:['dim',' Value for "google_sheet_api_key" (hidden): ••••••••••••']},
{out:['ok','✓ Registered "google_sheet_api_key" — value lives only in the enclave.']},
{cmd:'blindfold status'},
{out:['ok',' • google_sheet_api_key 39 B real']},
{out:['dim',' ↑ name + byte-size only — the value is never shown, even to you']},
{cmd:'blindfold attest'},
{out:['ok',' chain to Intel root: ✅ valid · quotes verified: 3/3']},
{out:['dim',' RTMR3 (code measure): B6mn+/ADHhD… ← verify the exact code in TDX']},
{cmd:'blindfold skill install'},
{out:['dim',' ✓ this project (Claude Code) → .claude/skills/blindfold/SKILL.md']},
{out:['ok','✓ Blindfold skill installed (1 target)']},
{cmd:'claude'},
{out:['dim',' ↑ opening a Claude Code session…']},
];
const s2=[
{ann:'◆ Claude Code — Blindfold skill loaded (.claude/skills/blindfold/SKILL.md)'},
{session:1},
{ann:'◆ Blindfold skill loaded (.claude/skills/blindfold/SKILL.md)'},
{you:'Read what’s inside my Google Sheet, I sealed the key already:'},
{you:'https://docs.google.com/spreadsheets/d/1N5xuy8j…/edit'},
{cl:'I’ll use your sealed key through Blindfold — I never read the key myself.'},
{cmd:'blindfold use --name google_sheet_api_key --as GKEY -- \\'},
{cmd2:'python3 read_sheet.py 1N5xuy8j…'},
{out:['dim','# 1N5xuy8j… = the Sheet ID (public, from the URL) — NOT the key.']},
{out:['dim','# the real key is $GKEY, released just for this command, never printed.']},
{ann:'⟨ under the hood ⟩ Terminal 3 → tenant-authenticated RPC (eth-signed session)'},
{ann:'⟨ under the hood ⟩ Intel TDX enclave → release-to-tenant reads z:tenant:secrets'},
{ann:'⟨ under the hood ⟩ real key returned over the encrypted session, used once, dropped'},
{out:['ok','✓ released "google_sheet_api_key" (39 B) → injecting $GKEY (never printed)']},
{out:['','TITLE: raksha-farmer-query (2003 rows × 14 cols)']},
{out:['amb',' KARNATAKA | HUBBALLI | HORTICULTURE | Sowing time of Onion?']},
{cl:'Done — 2,003 rows across 14 columns. I used your key but never saw it.'},
{endsession:1},
{cmd:'echo $GKEY'},
{out:['dim','(empty)']},
{out:['ok','✓ $GKEY only lived inside that one command — never in your shell, never in the agent.']},
];
function line(body,cls,txt){const d=document.createElement('div');d.className='l '+(cls||'');d.textContent=txt;body.appendChild(d);body.scrollTop=body.scrollHeight;}
async function typeCmd(body,s,prompt,cls){
function line(cls,txt){const d=document.createElement('div');d.className='l '+(cls||'');d.textContent=txt;body.appendChild(d);body.scrollTop=body.scrollHeight;}
function hr(txt){const d=document.createElement('div');d.className='l hr';d.textContent=txt;body.appendChild(d);body.scrollTop=body.scrollHeight;}
async function typeCmd(s,prompt,cls){
const d=document.createElement('div');d.className='l';
const pr=document.createElement('span');pr.className=cls||'p';pr.textContent=prompt;d.appendChild(pr);
const sp=document.createElement('span');sp.className='cmd';d.appendChild(sp);
Expand All @@ -1166,29 +1173,26 @@ <h2 style="font-size:clamp(24px,3.4vw,34px)">Seal your first key in 30 seconds</
for(const ch of s){ sp.textContent+=ch; body.scrollTop=body.scrollHeight; await wait(20+Math.random()*32); }
cur.remove();
}
async function runScript(body, steps){
for(const st of steps){
if(st.cmd){ await typeCmd(body,st.cmd,'$ ','p'); await wait(st.cmd.endsWith('\\')?110:420); }
else if(st.cmd2){ await typeCmd(body,st.cmd2,' ','dim'); await wait(560); }
else if(st.you){ line(body,'you','❯ '+st.you); await wait(560); }
else if(st.cl){ line(body,'cl','◆ Claude '+st.cl); await wait(880); }
else if(st.ann){ line(body,'ann',st.ann); await wait(520); }
else if(st.out){ line(body,st.out[0],st.out[1]); await wait(300); }
}
}
let running=false;
async function play(){
running=true;
for(;;){
b1.innerHTML=''; b2.innerHTML=''; w2.classList.add('idle');
await runScript(b1, s1);
await wait(450); w2.classList.remove('idle'); await wait(350);
await runScript(b2, s2);
await wait(3400);
body.innerHTML=''; win.classList.remove('cc'); title.textContent='zsh — you@mac';
for(const st of script){
if(st.session){ win.classList.add('cc'); title.textContent='◆ Claude Code — ~/my-agent'; hr('◆ Claude Code'); await wait(650); }
else if(st.endsession){ win.classList.remove('cc'); title.textContent='zsh — you@mac'; hr('back in your shell'); await wait(600); }
else if(st.cmd){ await typeCmd(st.cmd,'$ ','p'); await wait(st.cmd.endsWith('\\')?110:420); }
else if(st.cmd2){ await typeCmd(st.cmd2,' ','dim'); await wait(560); }
else if(st.you){ line('you','❯ '+st.you); await wait(560); }
else if(st.cl){ line('cl','◆ Claude '+st.cl); await wait(880); }
else if(st.ann){ line('ann',st.ann); await wait(520); }
else if(st.out){ line(st.out[0],st.out[1]); await wait(300); }
}
await wait(3600);
}
}
const vo=new IntersectionObserver(es=>es.forEach(e=>{ if(e.isIntersecting && !running){ play(); } }),{threshold:.15});
vo.observe(document.getElementById('term1'));
vo.observe(win);
})();

/* ── packet FLOWS ALONG WIRES through the nested architecture ── */
Expand Down
Loading