{['#ff5f57', '#febc2e', '#28c840'].map(c => (

))}

{title} {badge}

{children}

); // ───── WEB APP — animated burp-style request / response with payload rotation const WebMockup = () => { const payloads = [ { p: `' OR 1=1 --`, r: '200 · users dumped', sev: 'critical' }, { p: `{{7*7}}{{config.items()}}`, r: '200 · SSTI · Jinja env leak', sev: 'critical' }, { p: `

POST /api/v2/users HTTP/1.1

Host: acme.app.io

Cookie: sess=eyJ1aWQiOjE...

Content-Type: application/json

{'{'}

"q": "{cur.p}"

{'}'}

HTTP/1.1 {cur.r.split(' ')[0]}

◉ {cur.r}

); }; const CoverageBar = ({ pct, label }) => (

Coverage{label}

); // ───── MOBILE — Frida hook output rotating between iOS / Android findings const MobileMockup = () => { const hooks = [ { title: '-[KeychainStore writeKey:]', side: 'iOS', out: 'kSecAttrAccessible: AfterFirstUnlock', sev: 'high' }, { title: 'SSLPinningManager.evaluate()', side: 'iOS', out: 'returned YES on attacker cert', sev: 'critical' }, { title: 'RootDetector.isRooted()', side: 'AND', out: 'hook returned false · bypass ok', sev: 'high' }, { title: 'BiometricPrompt.authenticate()',side: 'AND', out: 'callback skipped · auth coerced', sev: 'critical' }, { title: 'WKWebView.loadHTMLString()', side: 'iOS', out: 'untrusted html · ipc → js bridge', sev: 'medium' }, ]; const [i, setI] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setI(x => (x+1) % hooks.length), 1900); return () => clearInterval(t); }, []); const cur = hooks[i]; return (

{['iOS', 'AND'].map(s => ( {s === 'iOS' ? 'iOS 17.3' : 'Android 14'} ))} {i+1}/{hooks.length} hooks

$ frida -U -n acme

→ attached · session 0x{(0xa0 + i*7).toString(16)}

Interceptor.attach({cur.title})

onLeave → {cur.out}

◉ {cur.sev.toUpperCase()} · MASVS-{['STORAGE','AUTH','CRYPTO','NET','CODE'][i % 5]}

); }; // ───── CLOUD — animated IAM trust graph const CloudMockup = () => { const [active, setActive] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setActive(x => (x+1) % 4), 1400); return () => clearInterval(t); }, []); const hops = [ { l: 'arn:aws:iam::123:user/dev', k: 'low-priv user' }, { l: 'arn:aws:iam::123:role/ReadOnlyTfState', k: 'reads terraform state' }, { l: 'arn:aws:iam::123:role/cicd-runner', k: 'discovered in state' }, { l: 'arn:aws:iam::123:role/OrgAdmin', k: '⚠ admin equivalence' }, ]; return (

$ pmapper graph query "preset · privesc"

{hops.map((h, i) => (

{i + 1}

{i < hops.length - 1 && (

)}

{h.l}

= i ? '#e8543a' : '#62666d' }}>{h.k}

{i <= active && ( sts:AssumeRole )}

))}

); }; // ───── RED TEAM — multi-vector kill chain across phish/network/cloud const RedTeamMockup = () => { const [phase, setPhase] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setPhase(p => (p + 1) % 5), 1500); return () => clearInterval(t); }, []); const vectors = [ { c: '#828fff', l: 'Spear-phish · 12 targets · 4 clicks', icon: 'mail' }, { c: '#828fff', l: 'OAuth consent · M365 token harvested', icon: 'lock' }, { c: '#d98326', l: 'Kerberoast · 2 SPNs · cracked offline', icon: 'fingerprint' }, { c: '#d98326', l: 'ADCS ESC1 · forged DA certificate', icon: 'shield' }, { c: '#e8543a', l: 'Payment DB readable · objective met', icon: 'target' }, ]; return (

Operation timeline · day {phase + 8} SOC alerts: 0

{vectors.map((v, i) => { const active = i === phase; const done = i < phase; return (

phase ? 0.35 : 1, transition: 'all 320ms', transform: active ? 'translateX(4px)' : 'translateX(0)', }}> {v.l} {done && } {active &&

}

); })}

); }; // ───── PENETRATION TESTING — findings dashboard const VaptMockup = () => { const findings = [ { sev: 'C', t: 'IDOR · /v2/orgs/{id}/members', age: '2h', col: '#e8543a' }, { sev: 'C', t: 'Jenkins CLI · arbitrary file read', age: '6h', col: '#e8543a' }, { sev: 'H', t: 'Kerberoast · svc-deploy', age: '1d', col: '#d98326' }, { sev: 'H', t: 'S3 bucket · world-readable backups', age: '3d', col: '#d98326' }, { sev: 'M', t: 'CSP missing on /admin', age: '5d', col: '#5e6ad2' }, { sev: 'M', t: 'Stored XSS · moderator notes', age: '6d', col: '#5e6ad2' }, ]; const [pulse, setPulse] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setPulse(p => (p + 1) % findings.length), 1100); return () => clearInterval(t); }, []); return (

{[ { l: 'Critical', v: 3, c: '#e8543a' }, { l: 'High', v: 7, c: '#d98326' }, { l: 'Medium', v:13, c: '#5e6ad2' }, { l: 'Closed', v:48, c: '#27a644' }, ].map(s => (

{s.l}

{s.v}

))}

{findings.map((f, i) => (

{f.sev} {f.t} {f.age}

))}

); }; // ───── CONTINUOUS — surfaces under test on a rolling sprint const PtaasMockup = () => { const [phase, setPhase] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setPhase(p => (p + 1) % 4), 1500); return () => clearInterval(t); }, []); const surfaces = [ { name: 'web · checkout-v3', status: 'testing', pct: 62, sev: 'critical' }, { name: 'api · payments-v2', status: 'queued', pct: 0, sev: '' }, { name: 'mobile · ios-1.8', status: 'fix-pending', pct: 100, sev: 'high' }, { name: 'cloud · prod-aws', status: 'retest', pct: 88, sev: '' }, ]; return (

Surfaces under test · live ● 12 active

{surfaces.map((s, i) => (

{s.name} {s.status}

))}

); }; const SERVICE_MOCKUPS = { web: WebMockup, mobile: MobileMockup, cloud: CloudMockup, redteam: RedTeamMockup, vapt: VaptMockup, ptaas: PtaasMockup, }; Object.assign(window, { WebMockup, MobileMockup, CloudMockup, RedTeamMockup, VaptMockup, PtaasMockup, SERVICE_MOCKUPS });