iftrace: wire homepage script
This commit is contained in:
parent
f40d738669
commit
c366941dd0
3 changed files with 76 additions and 76 deletions
75
ifttt/app.js
75
ifttt/app.js
|
|
@ -1,4 +1,8 @@
|
|||
(() => {
|
||||
const howStepEl = document.getElementById("howStep");
|
||||
const howDetailEl = document.getElementById("howDetail");
|
||||
if (howStepEl && howDetailEl) startHowItWorks(howStepEl, howDetailEl);
|
||||
|
||||
const typewordEl = document.getElementById("typeword");
|
||||
const stepperEl = document.getElementById("stepper");
|
||||
const revealStepper = createStepperRevealer(stepperEl);
|
||||
|
|
@ -12,6 +16,77 @@
|
|||
if (quoteTextEl && quoteMetaEl && quoteWrapEl) startQuoteTicker({ quoteWrapEl, quoteTextEl, quoteMetaEl });
|
||||
})();
|
||||
|
||||
function startHowItWorks(stepEl, detailEl) {
|
||||
const prefersReducedMotion =
|
||||
typeof window !== "undefined" &&
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
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));
|
||||
|
||||
const typeInto = async (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);
|
||||
}
|
||||
};
|
||||
|
||||
const run = async () => {
|
||||
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();
|
||||
}
|
||||
|
||||
function createStepperRevealer(stepperEl) {
|
||||
let shown = false;
|
||||
return () => {
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
(() => {
|
||||
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();
|
||||
})();
|
||||
|
||||
|
|
@ -64,6 +64,6 @@
|
|||
|
||||
<a class="sigContact" href="mailto:ds@infrafabric.io?subject=IF.Trace%20contact">contact</a>
|
||||
|
||||
<script src="./home.js" defer></script>
|
||||
<script src="./app.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue