ifttt: minimal homepage + stepper
This commit is contained in:
root
parent
024d6890ed
commit
ccac893c55
4 changed files with 315 additions and 443 deletions
26
ifttt/app.js
26
ifttt/app.js
|
|
@ -1,6 +1,10 @@
|
|||
(() => {
|
||||
const typewordEl = document.getElementById("typeword");
|
||||
if (typewordEl) startTypewriter(typewordEl);
|
||||
const stepperEl = document.getElementById("stepper");
|
||||
const revealStepper = createStepperRevealer(stepperEl);
|
||||
if (stepperEl) window.setTimeout(revealStepper, 5200);
|
||||
|
||||
if (typewordEl) startTypewriter(typewordEl, { onFirstCycleDone: revealStepper });
|
||||
|
||||
const quoteTextEl = document.getElementById("quoteText");
|
||||
const quoteMetaEl = document.getElementById("quoteMeta");
|
||||
|
|
@ -8,17 +12,29 @@
|
|||
if (quoteTextEl && quoteMetaEl && quoteWrapEl) startQuoteTicker({ quoteWrapEl, quoteTextEl, quoteMetaEl });
|
||||
})();
|
||||
|
||||
function startTypewriter(typewordEl) {
|
||||
const words = ["Transparent", "Traceable", "Trustworthy", "TTT"];
|
||||
function createStepperRevealer(stepperEl) {
|
||||
let shown = false;
|
||||
return () => {
|
||||
if (shown || !stepperEl) return;
|
||||
shown = true;
|
||||
stepperEl.hidden = false;
|
||||
window.requestAnimationFrame(() => stepperEl.classList.add("homeStepper--show"));
|
||||
};
|
||||
}
|
||||
|
||||
function startTypewriter(typewordEl, opts = {}) {
|
||||
const words = ["Transparent", "Traceable", "Trust", "TTT"];
|
||||
const typeMs = 42;
|
||||
const deleteMs = 26;
|
||||
const holdMs = 780;
|
||||
const finalHoldMs = 1100;
|
||||
const betweenMs = 180;
|
||||
const onFirstCycleDone = typeof opts.onFirstCycleDone === "function" ? opts.onFirstCycleDone : null;
|
||||
|
||||
let wordIndex = 0;
|
||||
let charIndex = 0;
|
||||
let isDeleting = false;
|
||||
let cycleCount = 0;
|
||||
|
||||
const tick = () => {
|
||||
const word = words[wordIndex] || "";
|
||||
|
|
@ -43,6 +59,10 @@ function startTypewriter(typewordEl) {
|
|||
if (atStart) {
|
||||
isDeleting = false;
|
||||
wordIndex = (wordIndex + 1) % words.length;
|
||||
if (wordIndex === 0) {
|
||||
cycleCount += 1;
|
||||
if (cycleCount === 1 && onFirstCycleDone) onFirstCycleDone();
|
||||
}
|
||||
window.setTimeout(tick, betweenMs);
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,21 @@
|
|||
"source": "IF.TTT paper (v2.3)",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "We don’t claim trust. We publish receipts.",
|
||||
"source": "IF.TTT stance",
|
||||
"href": "https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
},
|
||||
{
|
||||
"text": "Your auditor shouldn’t need your credentials.",
|
||||
"source": "IF.TTT public receipts",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/"
|
||||
},
|
||||
{
|
||||
"text": "Third parties verify. We just publish the math.",
|
||||
"source": "IF.TTT posture",
|
||||
"href": "https://infrafabric.io/static/hosted/ifttt/"
|
||||
},
|
||||
{
|
||||
"text": "Receipts must be readable and verifiable without credentials.",
|
||||
"source": "IF.TTT public receipt surface",
|
||||
|
|
|
|||
533
ifttt/index.html
533
ifttt/index.html
|
|
@ -22,10 +22,10 @@
|
|||
<script src="./app.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="top">
|
||||
<body class="home">
|
||||
<header class="top top--home">
|
||||
<div class="wrap top__inner">
|
||||
<a class="brand" href="#top" aria-label="IF.TTT home">
|
||||
<a class="brand" href="./" aria-label="IF.TTT home">
|
||||
<img class="brand__logo" src="./assets/if-logo-simple.svg" alt="" aria-hidden="true" />
|
||||
<span class="brand__text">
|
||||
<span class="brand__title">IF.TTT</span>
|
||||
|
|
@ -33,461 +33,114 @@
|
|||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav" aria-label="Primary">
|
||||
<a href="#how">How It Works</a>
|
||||
<a href="#trust">Third‑Party Trust</a>
|
||||
<a href="#verify">Verify</a>
|
||||
<a href="#verticals">Verticals</a>
|
||||
<nav class="homeNav" aria-label="Top links">
|
||||
<a href="./governance/">Governance</a>
|
||||
<a href="./whitepaper/">Whitepaper</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="./api/">Developers</a>
|
||||
<a href="./about/">About</a>
|
||||
<a class="lang" href="./fr/" aria-label="French">FR</a>
|
||||
<span class="homeNav__sep">·</span>
|
||||
<a class="homeNav__contact" href="mailto:ds@infrafabric.io">ds@infrafabric.io</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<section class="hero">
|
||||
<div class="wrap hero__grid">
|
||||
<div class="hero__copy">
|
||||
<p class="kicker">Open governance, readable by outsiders</p>
|
||||
<h1>Receipts, not vibes.</h1>
|
||||
<div class="type" aria-label="Typing animation">
|
||||
<span class="type__prefix">if.</span><span id="typeword"></span><span class="type__suffix">></span
|
||||
><span class="type__caret" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="quote" aria-live="polite" aria-label="Rotating quote">
|
||||
<div class="quote__text" id="quoteText"></div>
|
||||
<div class="quote__meta" id="quoteMeta"></div>
|
||||
</div>
|
||||
<p class="lede">
|
||||
IF.TTT is a receipt‑first governance layer. It binds a <strong>source artifact</strong> to an <strong>output</strong> with a
|
||||
<strong>trace page</strong>, stable <strong>no‑login links</strong>, and optional <strong>offline bundles</strong> anyone can verify.
|
||||
</p>
|
||||
<main id="top" class="homeMain" aria-label="IF.TTT overview">
|
||||
<div class="wrap homeMain__inner">
|
||||
<div class="homeCenter">
|
||||
<div class="homeBadges" aria-label="Status badges">
|
||||
<a
|
||||
class="badge badge--ok badge--big"
|
||||
href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>VERIFIED</a
|
||||
>
|
||||
<a class="badge badge--big" href="./api/#quantum">QUANTUM READY</a>
|
||||
</div>
|
||||
|
||||
<div class="pillrow" role="list" aria-label="Key properties">
|
||||
<div class="pill" role="listitem">
|
||||
<span class="pill__k">No‑login</span>
|
||||
<span class="pill__v">Public proof surface</span>
|
||||
</div>
|
||||
<div class="pill" role="listitem">
|
||||
<span class="pill__k">Offline</span>
|
||||
<span class="pill__v">Triage bundles</span>
|
||||
</div>
|
||||
<div class="pill" role="listitem">
|
||||
<span class="pill__k">Black/white</span>
|
||||
<span class="pill__v">What’s verified vs what isn’t</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type type--home" aria-label="Typing animation">
|
||||
<span class="type__prefix">if.</span><span id="typeword"></span><span class="type__suffix">></span
|
||||
><span class="type__caret" aria-hidden="true"></span>
|
||||
</div>
|
||||
|
||||
<div class="cta">
|
||||
<a class="btn btn--primary" href="#verify">Try a live trace</a>
|
||||
<a class="btn" href="#verticals">See vertical fit</a>
|
||||
<div class="quote quote--home" aria-live="polite" aria-label="Rotating quote">
|
||||
<div class="quote__text" id="quoteText"></div>
|
||||
<div class="quote__meta" id="quoteMeta"></div>
|
||||
</div>
|
||||
|
||||
<p class="homeLede">
|
||||
Open verification for governance: third parties can verify receipts without your credentials.
|
||||
<span class="muted">Artifacts > adjectives.</span>
|
||||
</p>
|
||||
|
||||
<section id="stepper" class="homeStepper" hidden>
|
||||
<h2>How verification works</h2>
|
||||
<p class="sub2">Black/white: what the receipt proves vs what it doesn’t.</p>
|
||||
|
||||
<ol class="steps">
|
||||
<li class="step">
|
||||
<div class="step__n">1</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Bind source ↔ output</div>
|
||||
<div class="step__d">Hash the exact source bytes and the exact output bytes.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">2</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Publish a trace receipt</div>
|
||||
<div class="step__d">A public page that links the hashes, time, and versioning.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">3</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">No‑login share surface</div>
|
||||
<div class="step__d">Stable URLs keyed by a single <code>shareId</code> (trace, dossier, pack, source).</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">4</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Optional: offline triage bundles</div>
|
||||
<div class="step__d">Lightweight/standard/full bundles for constrained environments.</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div class="homeLinks" aria-label="Live demo links">
|
||||
<a class="homeLink" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer"
|
||||
>Open a live trace receipt</a
|
||||
>
|
||||
<a class="homeLink" href="https://infrafabric.io/static/pack/6qRgcR01kw_qNo63Dbs_ob9n.md" target="_blank" rel="noreferrer"
|
||||
>Open the corresponding pack</a
|
||||
>
|
||||
<a class="homeLink" href="https://infrafabric.io/static/hosted/review/trace-bundles/b6547c03/index.md" target="_blank" rel="noreferrer"
|
||||
>Triage bundle selector (offline)</a
|
||||
>
|
||||
<a class="homeLink" href="https://infrafabric.io/static/hosted/iftrace.py" target="_blank" rel="noreferrer">Download `iftrace.py`</a>
|
||||
<a
|
||||
class="homeLink"
|
||||
href="https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>IF.TTT paper (review pack)</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<p class="note">
|
||||
We don’t claim “compliance”. We support audits by producing <em>verifiable receipts</em> that third parties can check without your
|
||||
credentials.
|
||||
If it’s not verifiable, label it as a gap. Don’t endorse it.
|
||||
<span class="muted">This is how you keep governance legible to outsiders.</span>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="homeMeta" aria-label="Contact">
|
||||
Danny Stocker <span class="bottombar__sep">·</span> <a href="mailto:ds@infrafabric.io">ds@infrafabric.io</a>
|
||||
</div>
|
||||
|
||||
<aside class="hero__card" aria-label="What a trace page shows">
|
||||
<div class="card">
|
||||
<div class="card__media">
|
||||
<img
|
||||
src="./assets/red-team-doc-1024-559.jpg"
|
||||
alt="InfraFabric Red Team dossier cover with “EYES ONLY // DAVE” stamp"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="card__hdr">
|
||||
<div class="badge badge--ok">VERIFIED</div>
|
||||
<div class="badge">QUANTUM READY (optional)</div>
|
||||
</div>
|
||||
<div class="card__body">
|
||||
<div class="kv">
|
||||
<div class="kv__k">Source</div>
|
||||
<div class="kv__v"><code>sha256:…</code></div>
|
||||
<div class="kv__k">Output</div>
|
||||
<div class="kv__v"><code>sha256:…</code></div>
|
||||
<div class="kv__k">Trace</div>
|
||||
<div class="kv__v"><code>trace_id: …</code></div>
|
||||
<div class="kv__k">Share</div>
|
||||
<div class="kv__v"><code>shareId: …</code></div>
|
||||
</div>
|
||||
<div class="mini">
|
||||
<div class="mini__k">What’s the promise?</div>
|
||||
<div class="mini__v">“Download the output. Hash it. Compare. Optionally verify offline.”</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="how" class="section">
|
||||
<div class="wrap">
|
||||
<h2>How It Works (receipt‑first)</h2>
|
||||
<p class="sub">
|
||||
This is the sequence third‑party reviewers actually care about. Every step either produces a receipt, or it doesn’t ship.
|
||||
</p>
|
||||
|
||||
<ol class="steps">
|
||||
<li class="step">
|
||||
<div class="step__n">1</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Capture the source bytes</div>
|
||||
<div class="step__d">We hash the exact artifact (PDF/MD/etc) to produce <code>source_sha256</code>.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">2</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Produce the output bytes</div>
|
||||
<div class="step__d">We hash the final output to produce <code>output_sha256</code> (what the reader sees).</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">3</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Bind source ↔ output in a trace</div>
|
||||
<div class="step__d">We create <code>trace_id</code> and publish a trace receipt that links hashes, time, and versioning.</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">4</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Publish a no‑login proof surface</div>
|
||||
<div class="step__d">Stable URLs keyed by an unguessable <code>shareId</code> (trace, dossier, pack, source).</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step">
|
||||
<div class="step__n">5</div>
|
||||
<div class="step__b">
|
||||
<div class="step__t">Optional: publish offline bundles</div>
|
||||
<div class="step__d">
|
||||
For constrained environments, export <strong>triage bundles</strong> (lightweight/standard/full) verifiable without network access.
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="trust" class="section section--alt">
|
||||
<div class="wrap">
|
||||
<h2>Third‑Party Trust Requirements (what outsiders demand)</h2>
|
||||
<p class="sub">This is the “procurement/audit” checklist, stated plainly.</p>
|
||||
|
||||
<div class="grid2">
|
||||
<div class="panel">
|
||||
<h3>Typical third‑party questions</h3>
|
||||
<ul class="list">
|
||||
<li>“Can I verify the output came from this source?”</li>
|
||||
<li>“Can I verify without your login, VPN, or internal tools?”</li>
|
||||
<li>“Can I verify later, offline, after a dispute?”</li>
|
||||
<li>“What does the receipt prove, and what does it not prove?”</li>
|
||||
<li>“If the evidence is missing, is that visible?”</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3>IF.TTT answers (black/white)</h3>
|
||||
<div class="bw">
|
||||
<div class="bw__row">
|
||||
<div class="bw__k">Proves</div>
|
||||
<div class="bw__v">Integrity binding (hashes), publication receipts, optional signatures, offline verification artifacts.</div>
|
||||
</div>
|
||||
<div class="bw__row">
|
||||
<div class="bw__k">Does not prove</div>
|
||||
<div class="bw__v">
|
||||
Intent, interpretation, or “compliance”. It gives evidence; your process decides what that evidence means.
|
||||
</div>
|
||||
</div>
|
||||
<div class="bw__row">
|
||||
<div class="bw__k">Default stance</div>
|
||||
<div class="bw__v">If it’s not verifiable, label it as a gap (do not endorse it).</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="verify" class="section">
|
||||
<div class="wrap">
|
||||
<h2>Open Verification (try it yourself)</h2>
|
||||
<p class="sub">Use the same path your auditors and external reviewers will use.</p>
|
||||
|
||||
<div class="verify">
|
||||
<div class="panel">
|
||||
<h3>Live example (trace + bundles)</h3>
|
||||
<div class="links">
|
||||
<a class="linkrow" href="https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n" target="_blank" rel="noreferrer">
|
||||
<span class="linkrow__t">Example trace page</span>
|
||||
<span class="linkrow__u">https://infrafabric.io/static/trace/6qRgcR01kw_qNo63Dbs_ob9n</span>
|
||||
</a>
|
||||
<a
|
||||
class="linkrow"
|
||||
href="https://infrafabric.io/static/hosted/review/trace-bundles/d70ed99a/index.html"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span class="linkrow__t">Triage bundle selector (lightweight/standard/full)</span>
|
||||
<span class="linkrow__u">https://infrafabric.io/static/hosted/review/trace-bundles/d70ed99a/index.html</span>
|
||||
</a>
|
||||
<a class="linkrow" href="https://infrafabric.io/static/hosted/iftrace.html" target="_blank" rel="noreferrer">
|
||||
<span class="linkrow__t">Offline verifier (HTML view)</span>
|
||||
<span class="linkrow__u">https://infrafabric.io/static/hosted/iftrace.html</span>
|
||||
</a>
|
||||
<a class="linkrow" href="https://infrafabric.io/static/hosted/iftrace.py" target="_blank" rel="noreferrer">
|
||||
<span class="linkrow__t">Offline verifier (download)</span>
|
||||
<span class="linkrow__u">https://infrafabric.io/static/hosted/iftrace.py</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<details class="details">
|
||||
<summary>Public receipt URLs (no-login)</summary>
|
||||
<p class="fine" style="margin-top: 10px">
|
||||
Every published output gets a stable share surface keyed by a single <code>shareId</code>.
|
||||
</p>
|
||||
<pre class="code"><code>https://infrafabric.io/static/trace/<shareId>
|
||||
https://infrafabric.io/static/dossier/<shareId>
|
||||
https://infrafabric.io/static/dossier/<shareId>/download
|
||||
https://infrafabric.io/static/pack/<shareId>.md
|
||||
https://infrafabric.io/static/review/<shareId>.md
|
||||
https://infrafabric.io/static/marketing/<shareId>.md
|
||||
https://infrafabric.io/static/source/<source_sha256>.pdf</code></pre>
|
||||
<p class="fine">
|
||||
HTML views exist for sandboxes that load <code>text/html</code> but reject downloads:
|
||||
<code>/static/pack/<shareId></code>, <code>/static/review/<shareId></code>, <code>/static/marketing/<shareId></code>.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<p class="fine">
|
||||
Note: some constrained “web fetchers” reject downloadable binaries (e.g., <code>.tar.gz</code>) while still loading HTML. That’s why
|
||||
HTML views exist for packs and indexes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h3>CLI verification (2 minutes)</h3>
|
||||
<p class="sub2">Download a bundle from the selector, then:</p>
|
||||
<pre class="code"><code>curl -fsSL -o iftrace.py 'https://infrafabric.io/static/hosted/iftrace.py'
|
||||
python3 iftrace.py verify trace_bundle_<id>_standard.tar.gz --expected-sha256 <sha256></code></pre>
|
||||
<p class="fine">
|
||||
<strong>VERIFIED</strong> means the hashes match what the receipt declares. <strong>QUANTUM READY</strong> may be shown when a
|
||||
post‑quantum signature receipt exists (PQ verification is additive; hash verification still stands).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="verticals" class="section section--alt">
|
||||
<div class="wrap">
|
||||
<h2>Vertical Fit (what each buyer is actually looking for)</h2>
|
||||
<p class="sub">Same mechanism, different third‑party pressure.</p>
|
||||
|
||||
<div class="cards">
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M5 12.5 12 6l7 6.5V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7.5Z" />
|
||||
<path d="M9 22v-7h6v7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>B2B SaaS (SOC 2 / ISO)</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Auditors + enterprise procurement</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">Evidence that controls existed at the right time, in the right scope, with receipts.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Publishing no‑login receipts and offline bundles for disputes and audits.</p>
|
||||
<a class="vcard__more" href="./verticals/saas/">B2B SaaS →</a>
|
||||
</article>
|
||||
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M4 10h16v10H4z" />
|
||||
<path d="M6 10V7a6 6 0 0 1 12 0v3" />
|
||||
<path d="M12 14v4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Fintech / Regulated Finance</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Regulators + model risk + internal audit</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">Non‑repudiation, dispute workflows, and “show your work” provenance.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Binding outputs to sources and creating a defensible, replayable receipt trail.</p>
|
||||
<a class="vcard__more" href="./verticals/finance/">Finance →</a>
|
||||
</article>
|
||||
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M12 3v18" />
|
||||
<path d="M3 12h18" />
|
||||
<path d="M7 7h10v10H7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Healthcare</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Compliance + vendors + incident reviewers</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">Clear boundaries: what’s verified, what’s inferred, and what must be reviewed by humans.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Making evidence legible to outsiders while preserving strict, machine‑verifiable receipts.</p>
|
||||
<a class="vcard__more" href="./verticals/healthcare/">Healthcare →</a>
|
||||
</article>
|
||||
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M12 2 20 6v6c0 5-3.4 9.4-8 10-4.6-.6-8-5-8-10V6l8-4Z" />
|
||||
<path d="M9 12l2 2 4-5" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Gov / Defense Contractors</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Assessors + customers + supply‑chain review</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">Offline‑verifiable bundles and unambiguous chain‑of‑custody.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Providing triage bundles that can be verified without trusted network access.</p>
|
||||
<a class="vcard__more" href="./verticals/government/">Government →</a>
|
||||
</article>
|
||||
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M8 2h8v4H8z" />
|
||||
<path d="M6 6h12v10a6 6 0 0 1-6 6 6 6 0 0 1-6-6V6Z" />
|
||||
<path d="M9 12h6" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>AI Product Companies</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Enterprise buyers + incident responders</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">Provable provenance for outputs (“why did it say that?”) without internal access.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Making trace receipts shareable, replayable, and dispute‑friendly.</p>
|
||||
<a class="vcard__more" href="./verticals/ai/">AI products →</a>
|
||||
</article>
|
||||
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M10 18a8 8 0 1 1 5.3-14" />
|
||||
<path d="M21 21l-6-6" />
|
||||
<path d="M10 12h6" />
|
||||
<path d="M10 15h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>SecOps / SOC</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Executives + auditors after an incident</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">To verify AI summaries against raw evidence and keep chain‑of‑custody intact.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Binding “what the system said” to “what the system saw” via receipts and bundles.</p>
|
||||
<a class="vcard__more" href="./verticals/secops/">SecOps →</a>
|
||||
</article>
|
||||
|
||||
<article class="vcard">
|
||||
<div class="vcard__icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="M4 20V9l8-5 8 5v11" />
|
||||
<path d="M9 20v-6h6v6" />
|
||||
<path d="M6 12h12" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Industrial / Supply Chain</h3>
|
||||
<p class="vcard__k">Third party</p>
|
||||
<p class="vcard__v">Customers + auditors + insurers</p>
|
||||
<p class="vcard__k">They want</p>
|
||||
<p class="vcard__v">Proof of change control and traceability that survives contractor handoffs.</p>
|
||||
<p class="vcard__k">IF.TTT helps by</p>
|
||||
<p class="vcard__v">Standardizing receipts so handoffs remain verifiable across organizational boundaries.</p>
|
||||
<a class="vcard__more" href="./verticals/supply-chain/">Supply chain →</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="section">
|
||||
<div class="wrap">
|
||||
<h2>FAQ</h2>
|
||||
|
||||
<div class="faq">
|
||||
<details>
|
||||
<summary>What is “VERIFIED”?</summary>
|
||||
<p>
|
||||
“VERIFIED” means the hashes on the trace page match the output/source that can be downloaded and hashed independently. It is an
|
||||
integrity receipt: the bytes match what the trace declares.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>What is “QUANTUM READY”?</summary>
|
||||
<p>
|
||||
“QUANTUM READY” is shown when a post‑quantum signature receipt exists for the trace. It means PQ receipts are present now (for future
|
||||
audit requirements). PQ verification is additive; the hash receipt remains valid either way.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Do you guarantee compliance?</summary>
|
||||
<p>
|
||||
No. IF.TTT produces verifiable artifacts that can support audits and disputes. Compliance is a broader program: scope, policy, human
|
||||
review, and governance decisions are still required.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>What’s the difference between shareId and trace_id?</summary>
|
||||
<p>
|
||||
<code>shareId</code> is the public handle used in URLs. <code>trace_id</code> is the chain‑of‑custody UUID recorded in receipts and
|
||||
bundles.
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="foot__row">
|
||||
<div class="foot__k">Docs</div>
|
||||
<div class="foot__v">
|
||||
<a href="https://infrafabric.io/static/hosted/review/ifttt-paper-update/2025-12-28/review-pack.html" target="_blank" rel="noreferrer"
|
||||
>IF.TTT paper update (review pack)</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot__row">
|
||||
<div class="foot__k">Contact</div>
|
||||
<div class="foot__v">
|
||||
<a href="mailto:ds@infrafabric.io">ds@infrafabric.io</a> <span class="bottombar__sep">·</span> Danny Stocker
|
||||
<span class="bottombar__sep">·</span> <a href="mailto:trace@infrafabric.io">trace@infrafabric.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="wrap footer__inner">
|
||||
<div class="muted">InfraFabric • IF.TTT receipts are designed to be legible to the governed.</div>
|
||||
<div class="muted">
|
||||
<a href="./governance/">Governance</a> · <a href="./api/">Developers</a> · <a href="./about/">About</a> ·
|
||||
<a href="mailto:ds@infrafabric.io">ds@infrafabric.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<div class="bottombar" aria-label="Quick links">
|
||||
<div class="wrap bottombar__inner">
|
||||
|
|
|
|||
184
ifttt/style.css
184
ifttt/style.css
|
|
@ -853,3 +853,187 @@ details p {
|
|||
padding-bottom: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Home (minimal landing; “OK Computer” empty-space bias) */
|
||||
body.home {
|
||||
background:
|
||||
radial-gradient(900px 420px at 15% 0%, rgba(29, 78, 216, 0.06), transparent 60%),
|
||||
radial-gradient(900px 420px at 85% 15%, rgba(139, 0, 0, 0.06), transparent 60%),
|
||||
linear-gradient(#fffdf7, #ffffff);
|
||||
}
|
||||
|
||||
body.home .top {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
border-bottom: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
body.home .top__inner {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.homeNav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.homeNav a {
|
||||
color: var(--muted);
|
||||
padding: 6px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.homeNav a:hover {
|
||||
color: var(--text);
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--border);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.homeNav__sep {
|
||||
color: rgba(107, 114, 128, 0.7);
|
||||
}
|
||||
|
||||
.homeMain {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 120px 0 90px;
|
||||
}
|
||||
|
||||
.homeMain__inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.homeCenter {
|
||||
text-align: center;
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.homeBadges {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.badge--big {
|
||||
font-size: 12px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.type--home {
|
||||
font-size: clamp(44px, 7vw, 74px);
|
||||
line-height: 1.05;
|
||||
margin: 0 0 14px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.type--home .type__prefix,
|
||||
.type--home .type__suffix {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.type--home .type__caret {
|
||||
width: 0.18em;
|
||||
height: 1.05em;
|
||||
margin-left: 0.12em;
|
||||
border-radius: 0.14em;
|
||||
background: rgba(17, 24, 39, 0.65);
|
||||
}
|
||||
|
||||
.quote--home {
|
||||
margin: 0 auto 14px;
|
||||
}
|
||||
|
||||
.quote--home .quote__text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.homeLede {
|
||||
margin: 0 auto 0;
|
||||
max-width: 78ch;
|
||||
color: #374151;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.homeStepper {
|
||||
margin: 18px auto 0;
|
||||
max-width: 920px;
|
||||
text-align: left;
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition:
|
||||
opacity 420ms ease,
|
||||
transform 420ms ease;
|
||||
}
|
||||
|
||||
.homeStepper.homeStepper--show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.homeLinks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
|
||||
.homeLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--border);
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
font-weight: 650;
|
||||
font-size: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.homeLink:hover {
|
||||
text-decoration: none;
|
||||
border-color: rgba(29, 78, 216, 0.35);
|
||||
box-shadow:
|
||||
var(--shadow),
|
||||
0 0 0 4px rgba(29, 78, 216, 0.10);
|
||||
}
|
||||
|
||||
.homeMeta {
|
||||
margin-top: 14px;
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
body.home .top {
|
||||
position: sticky;
|
||||
background: rgba(255, 253, 247, 0.92);
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.homeMain {
|
||||
padding-top: 86px;
|
||||
}
|
||||
|
||||
.type--home {
|
||||
font-size: clamp(38px, 10vw, 54px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue