iftrace: dark homepage v2
This commit is contained in:
root
parent
14e5a6aa21
commit
f40d738669
4 changed files with 504 additions and 34 deletions
75
ifttt/home.js
Normal file
75
ifttt/home.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
(() => {
|
||||
const prefersReducedMotion =
|
||||
typeof window !== "undefined" &&
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
const stepEl = document.getElementById("howStep");
|
||||
const detailEl = document.getElementById("howDetail");
|
||||
if (!stepEl || !detailEl) return;
|
||||
|
||||
const steps = [
|
||||
{
|
||||
step: "1) You write the confidential document.",
|
||||
detail: "Keep the source private. Don’t publish it to “prove” it exists.",
|
||||
},
|
||||
{
|
||||
step: "2) Your system produces an output.",
|
||||
detail: "A summary, decision, report, message, or answer.",
|
||||
},
|
||||
{
|
||||
step: "3) IF.Trace binds source → output.",
|
||||
detail: "Hashes + trace id + proof links (so evidence can be checked later).",
|
||||
},
|
||||
{
|
||||
step: "4) You share proof, not your raw data.",
|
||||
detail: "Third parties verify without needing your accounts or logins.",
|
||||
},
|
||||
{
|
||||
step: "5) If there’s no trace, it’s not trustworthy.",
|
||||
detail: "A simple rule that survives vendors, contractors, and audits.",
|
||||
},
|
||||
];
|
||||
|
||||
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
async function typeInto(el, text, opts = {}) {
|
||||
const minDelayMs = opts.minDelayMs ?? 12;
|
||||
const maxDelayMs = opts.maxDelayMs ?? 26;
|
||||
|
||||
el.textContent = "";
|
||||
for (let idx = 0; idx < text.length; idx += 1) {
|
||||
el.textContent += text[idx];
|
||||
const jitter = Math.floor(Math.random() * (maxDelayMs - minDelayMs + 1));
|
||||
await sleep(minDelayMs + jitter);
|
||||
}
|
||||
}
|
||||
|
||||
async function run() {
|
||||
if (prefersReducedMotion) {
|
||||
const first = steps[0];
|
||||
stepEl.textContent = first.step;
|
||||
detailEl.textContent = first.detail;
|
||||
return;
|
||||
}
|
||||
|
||||
let idx = 0;
|
||||
// eslint-disable-next-line no-constant-condition
|
||||
while (true) {
|
||||
const current = steps[idx % steps.length];
|
||||
await typeInto(stepEl, current.step);
|
||||
await sleep(120);
|
||||
await typeInto(detailEl, current.detail, { minDelayMs: 8, maxDelayMs: 18 });
|
||||
await sleep(2200);
|
||||
|
||||
stepEl.textContent = "";
|
||||
detailEl.textContent = "";
|
||||
await sleep(240);
|
||||
|
||||
idx += 1;
|
||||
}
|
||||
}
|
||||
|
||||
void run();
|
||||
})();
|
||||
|
||||
|
|
@ -3,15 +3,15 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>IF.Trace — Open Verification for AI Governance</title>
|
||||
<title>IF.Trace — Open Verification</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="IF.Trace (Traceable, Transparent, Trustworthy) is a receipt-first governance layer: bind a source artifact to an output with a verifiable trace, no-login proof links, and optional offline bundles."
|
||||
content="IF.Trace creates open verification for confidential work: third‑party, unfalsifiable audit trails without publishing the source."
|
||||
/>
|
||||
<meta property="og:title" content="IF.Trace — Open Verification for AI Governance" />
|
||||
<meta property="og:title" content="IF.Trace — Open Verification" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Receipts, not vibes. IF.Trace binds a source artifact to an output with verifiable traces, no-login proof links, and optional offline bundles."
|
||||
content="Confidential documents → open verification. Third‑party, unfalsifiable audit trails."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://infrafabric.io/static/hosted/ifttt/assets/red-team-doc-1024-559.jpg" />
|
||||
|
|
@ -21,39 +21,49 @@
|
|||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body class="home home--minimal">
|
||||
<main id="top" class="homeMain" aria-label="IF.Trace">
|
||||
<div class="wrap homeMain__inner">
|
||||
<div class="homeCenter">
|
||||
<h1 class="homeWords" aria-label="Traceable, Transparent, Trustworthy">
|
||||
<span>Traceable</span>
|
||||
<span>Transparent</span>
|
||||
<span>Trustworthy</span>
|
||||
</h1>
|
||||
<body class="home home--sig">
|
||||
<header class="sigNav" aria-label="Top navigation">
|
||||
<div class="wrap sigNav__inner">
|
||||
<a class="sigBrand" href="./" aria-label="IF.Trace home">IF.Trace</a>
|
||||
<nav class="sigLinks" aria-label="Site">
|
||||
<a href="./verticals/">Sector</a>
|
||||
<span class="sigLinks__sep" aria-hidden="true">|</span>
|
||||
<a href="./pricing/">Pricing</a>
|
||||
<span class="sigLinks__sep" aria-hidden="true">|</span>
|
||||
<a href="./api/">API</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="sigMain" aria-label="IF.Trace homepage">
|
||||
<div class="wrap sigMain__inner">
|
||||
<div class="sigHero">
|
||||
<div class="sigCycle" aria-label="IF.Transparent, IF.Traceable, IF.Trustworthy">
|
||||
<span class="sigCycle__item sigCycle__item--1">IF.Transparent</span>
|
||||
<span class="sigCycle__sep" aria-hidden="true">></span>
|
||||
<span class="sigCycle__item sigCycle__item--2">IF.Traceable</span>
|
||||
<span class="sigCycle__sep" aria-hidden="true">></span>
|
||||
<span class="sigCycle__item sigCycle__item--3">IF.Trustworthy</span>
|
||||
</div>
|
||||
|
||||
<h1 class="sigTitle">IF.Trace</h1>
|
||||
<p class="sigTag">Confidential documents > open verification</p>
|
||||
<p class="sigSub">3rd party unfalsifiable audit trails.</p>
|
||||
|
||||
<section class="sigHow" aria-label="How it works">
|
||||
<div class="sigHow__kicker">How it works</div>
|
||||
<div class="sigHow__panel">
|
||||
<div class="sigHow__line sigHow__line--step" id="howStep" aria-live="polite"></div>
|
||||
<div class="sigHow__line sigHow__line--detail" id="howDetail" aria-live="polite"></div>
|
||||
<div class="sigHow__caret" aria-hidden="true"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="bottombar" aria-label="Quick links">
|
||||
<div class="wrap bottombar__inner">
|
||||
<div class="bottombar__left">
|
||||
<span class="bottombar__brand">IF.Trace</span>
|
||||
<span class="bottombar__sep">·</span>
|
||||
<span class="bottombar__label">Verticals</span>
|
||||
<a href="./verticals/public-sector/">Public Sector</a>
|
||||
<a href="./verticals/enterprise/">Enterprise</a>
|
||||
<a href="./verticals/research/">Research</a>
|
||||
<a href="./verticals/professional-services/">Professional</a>
|
||||
<a href="./verticals/healthcare/">Healthcare</a>
|
||||
<a href="./verticals/finance/">Financial</a>
|
||||
<a href="./verticals/legal/">Legal</a>
|
||||
</div>
|
||||
<div class="bottombar__right">
|
||||
<a href="./api/">Developer</a>
|
||||
<span class="bottombar__sep">|</span>
|
||||
<a href="./api/">API</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="sigContact" href="mailto:ds@infrafabric.io?subject=IF.Trace%20contact">contact</a>
|
||||
|
||||
<script src="./home.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
65
ifttt/pricing/index.html
Normal file
65
ifttt/pricing/index.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>IF.Trace — Pricing</title>
|
||||
<meta name="description" content="Simple pricing for IF.Trace (early access)." />
|
||||
<meta name="theme-color" content="#111827" />
|
||||
<link rel="icon" href="../assets/if-logo-simple.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
</head>
|
||||
|
||||
<body class="home home--sig">
|
||||
<header class="sigNav" aria-label="Top navigation">
|
||||
<div class="wrap sigNav__inner">
|
||||
<a class="sigBrand" href="../" aria-label="IF.Trace home">IF.Trace</a>
|
||||
<nav class="sigLinks" aria-label="Site">
|
||||
<a href="../verticals/">Sector</a>
|
||||
<span class="sigLinks__sep" aria-hidden="true">|</span>
|
||||
<a href="./">Pricing</a>
|
||||
<span class="sigLinks__sep" aria-hidden="true">|</span>
|
||||
<a href="../api/">API</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="sigMain" aria-label="Pricing">
|
||||
<div class="wrap sigMain__inner">
|
||||
<div class="sigHero">
|
||||
<div class="sigCycle" aria-label="IF.Transparent, IF.Traceable, IF.Trustworthy">
|
||||
<span class="sigCycle__item sigCycle__item--1">IF.Transparent</span>
|
||||
<span class="sigCycle__sep" aria-hidden="true">></span>
|
||||
<span class="sigCycle__item sigCycle__item--2">IF.Traceable</span>
|
||||
<span class="sigCycle__sep" aria-hidden="true">></span>
|
||||
<span class="sigCycle__item sigCycle__item--3">IF.Trustworthy</span>
|
||||
</div>
|
||||
|
||||
<h1 class="sigTitle sigTitle--sub">Pricing</h1>
|
||||
<p class="sigTag">A simple model, on purpose.</p>
|
||||
<p class="sigSub">If you need audit‑ready verification, we price by risk and responsibility.</p>
|
||||
|
||||
<section class="sigHow" aria-label="Pricing notes">
|
||||
<div class="sigHow__kicker">Early access</div>
|
||||
<div class="sigHow__panel">
|
||||
<div class="sigHow__line sigHow__line--step">What we charge for</div>
|
||||
<div class="sigHow__line sigHow__line--detail">
|
||||
Setup + governance configuration, integration support, and proof‑surface hardening.
|
||||
</div>
|
||||
<div class="sigHow__line sigHow__line--step" style="margin-top: 14px">What we do not charge for</div>
|
||||
<div class="sigHow__line sigHow__line--detail">
|
||||
“Per‑click” pricing for verification. Third‑party checking should stay cheap.
|
||||
</div>
|
||||
<div class="sigHow__line sigHow__line--detail" style="margin-top: 14px">
|
||||
To discuss scope, email
|
||||
<a href="mailto:ds@infrafabric.io?subject=IF.Trace%20pricing">ds@infrafabric.io</a>.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<a class="sigContact" href="mailto:ds@infrafabric.io?subject=IF.Trace%20contact">contact</a>
|
||||
</body>
|
||||
</html>
|
||||
320
ifttt/style.css
320
ifttt/style.css
|
|
@ -1071,3 +1071,323 @@ body.home--minimal .homeMain {
|
|||
font-size: clamp(38px, 10vw, 54px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Homepage (Sigstore-ish, dark mode) */
|
||||
body.home--sig {
|
||||
padding-bottom: 0;
|
||||
color: #e5e7eb;
|
||||
background:
|
||||
radial-gradient(900px 520px at 18% 10%, rgba(56, 189, 248, 0.16), transparent 62%),
|
||||
radial-gradient(900px 520px at 82% 16%, rgba(34, 197, 94, 0.12), transparent 62%),
|
||||
radial-gradient(1100px 620px at 50% 86%, rgba(245, 158, 11, 0.10), transparent 62%),
|
||||
linear-gradient(180deg, #050812 0%, #0b1220 55%, #050812 100%);
|
||||
}
|
||||
|
||||
body.home--sig a {
|
||||
color: rgba(226, 232, 240, 0.92);
|
||||
}
|
||||
|
||||
body.home--sig a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sigNav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 18px;
|
||||
z-index: 60;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sigNav__inner {
|
||||
pointer-events: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(11, 18, 32, 0.55);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
0 26px 80px rgba(0, 0, 0, 0.55);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* “Traffic” background (subtle R/A/G glow) behind the frosted nav only */
|
||||
.sigNav__inner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -70%;
|
||||
z-index: 0;
|
||||
opacity: 0.95;
|
||||
background:
|
||||
radial-gradient(circle at 16% 52%, rgba(239, 68, 68, 0.26) 0, transparent 44%),
|
||||
radial-gradient(circle at 50% 48%, rgba(245, 158, 11, 0.22) 0, transparent 46%),
|
||||
radial-gradient(circle at 84% 50%, rgba(34, 197, 94, 0.20) 0, transparent 46%),
|
||||
radial-gradient(circle at 34% 38%, rgba(59, 130, 246, 0.12) 0, transparent 46%),
|
||||
radial-gradient(circle at 68% 62%, rgba(147, 197, 253, 0.10) 0, transparent 46%),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0.00) 0%,
|
||||
rgba(255, 255, 255, 0.06) 45%,
|
||||
rgba(255, 255, 255, 0.00) 70%
|
||||
);
|
||||
filter: blur(12px);
|
||||
transform: translateX(-8%);
|
||||
animation: sigTraffic 12s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes sigTraffic {
|
||||
0% {
|
||||
transform: translateX(-10%) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(10%) translateY(-2%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-10%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sigNav__inner > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.sigBrand {
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.01em;
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
padding: 8px 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.sigBrand:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sigLinks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.01em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.sigLinks a {
|
||||
color: rgba(226, 232, 240, 0.88);
|
||||
padding: 8px 10px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.sigLinks a:hover {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sigLinks__sep {
|
||||
color: rgba(226, 232, 240, 0.42);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sigMain {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 120px 0 80px;
|
||||
}
|
||||
|
||||
.sigMain__inner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sigHero {
|
||||
text-align: center;
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.sigCycle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
color: rgba(226, 232, 240, 0.70);
|
||||
letter-spacing: 0.01em;
|
||||
margin: 0 0 18px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sigCycle__sep {
|
||||
color: rgba(226, 232, 240, 0.35);
|
||||
}
|
||||
|
||||
.sigCycle__item {
|
||||
opacity: 0.45;
|
||||
transition:
|
||||
opacity 220ms ease,
|
||||
color 220ms ease;
|
||||
animation: sigCycleFocus 9s infinite;
|
||||
}
|
||||
|
||||
.sigCycle__item--1 {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.sigCycle__item--2 {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.sigCycle__item--3 {
|
||||
animation-delay: 6s;
|
||||
}
|
||||
|
||||
@keyframes sigCycleFocus {
|
||||
0%,
|
||||
22% {
|
||||
opacity: 1;
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
text-shadow: 0 0 22px rgba(56, 189, 248, 0.22);
|
||||
}
|
||||
33%,
|
||||
100% {
|
||||
opacity: 0.38;
|
||||
color: rgba(226, 232, 240, 0.62);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sigTitle {
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(54px, 7.2vw, 92px);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.03em;
|
||||
font-weight: 920;
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
|
||||
.sigTitle--sub {
|
||||
font-size: clamp(40px, 5.6vw, 64px);
|
||||
}
|
||||
|
||||
.sigTag {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
color: rgba(226, 232, 240, 0.80);
|
||||
}
|
||||
|
||||
.sigSub {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: rgba(226, 232, 240, 0.62);
|
||||
}
|
||||
|
||||
.sigHow {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.sigHow__kicker {
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(226, 232, 240, 0.55);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.sigHow__panel {
|
||||
max-width: 920px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
padding: 16px 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(15, 23, 42, 0.38);
|
||||
backdrop-filter: blur(10px) saturate(140%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.05),
|
||||
0 22px 70px rgba(0, 0, 0, 0.50);
|
||||
}
|
||||
|
||||
.sigHow__line {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.sigHow__line--step {
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.sigHow__line--detail {
|
||||
color: rgba(226, 232, 240, 0.70);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.sigHow__caret {
|
||||
width: 10px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
background: rgba(226, 232, 240, 0.72);
|
||||
margin-top: 12px;
|
||||
animation: caretblink 1s steps(1, end) infinite;
|
||||
}
|
||||
|
||||
.sigContact {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
z-index: 65;
|
||||
padding: 10px 12px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(11, 18, 32, 0.55);
|
||||
backdrop-filter: blur(14px) saturate(140%);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255, 255, 255, 0.06),
|
||||
0 22px 70px rgba(0, 0, 0, 0.55);
|
||||
color: rgba(226, 232, 240, 0.90);
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.sigContact:hover {
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
background: rgba(11, 18, 32, 0.66);
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.sigNav {
|
||||
top: 12px;
|
||||
}
|
||||
.sigNav__inner {
|
||||
border-radius: 16px;
|
||||
}
|
||||
.sigMain {
|
||||
padding-top: 108px;
|
||||
}
|
||||
.sigTag {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sigNav__inner::before {
|
||||
animation: none;
|
||||
}
|
||||
.sigCycle__item {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
color: rgba(226, 232, 240, 0.86);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue