mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
79957890d2
Bundle four pending template skills and retag eight related skills to video/hyperframes so the categorization and i18n fallback coverage can be reviewed and merged in one pass. Co-authored-by: Tuola Ge <gexingli@refly.ai> Co-authored-by: Cursor <cursoragent@cursor.com>
44 lines
8.4 KiB
HTML
44 lines
8.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Digits Fintech Swiss Example</title>
|
|
<style>
|
|
:root { --paper:#f2f2ed; --ink:#0a0a0a; --lime:#e2ff41; --line:rgba(10,10,10,.12); }
|
|
* { box-sizing: border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,Arial,sans-serif; min-height:100vh; }
|
|
.deck { width:min(1400px,96vw); min-height:860px; margin:24px auto; border:1px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
|
|
.toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
|
|
.btns { display:flex; gap:8px; } button { border:1px solid var(--line); background:transparent; height:30px; padding:0 12px; border-radius:999px; cursor:pointer; }
|
|
.slides { position:relative; height:760px; } .slide { position:absolute; inset:0; opacity:0; transform:translateX(20px); transition:.35s ease; pointer-events:none; padding:32px; } .slide.active { opacity:1; transform:none; pointer-events:auto; }
|
|
.s1 { display:grid; grid-template-columns:120px 1fr 320px; grid-template-rows:1fr 180px; gap:14px; } .dark { background:radial-gradient(circle at 50% 38%, #202020 0%, #000 65%); position:relative; } .meta { position:absolute; left:14px; bottom:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.75); } .lime { background:var(--lime); } .headline { display:flex; align-items:center; padding:0 30px; background:var(--lime); font-size:56px; font-weight:900; line-height:1.02; letter-spacing:-.03em; text-transform:uppercase; } .copyright { border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px 20px; font-size:12px; letter-spacing:.06em; }
|
|
.s2 { display:grid; grid-template-columns:160px 1fr 1fr; gap:0; height:100%; } .rail { background:var(--lime); padding:24px 18px; display:flex; flex-direction:column; justify-content:space-between; } .rail .big { font-size:56px; font-weight:900; letter-spacing:-.04em; } .rail .lbl { font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1.5; } .main { border-right:1px solid var(--line); padding:28px 34px; } .kicker { font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.65; } .title { font-size:86px; line-height:.92; letter-spacing:-.04em; text-transform:uppercase; margin:16px 0 18px; } .body { font-size:20px; line-height:1.42; max-width:560px; opacity:.85; } .cards { padding:24px 32px 36px 0; display:flex; flex-direction:column; gap:12px; } .row { display:flex; gap:12px; } .card { flex:1; border:1px solid var(--line); background:#fff; min-height:120px; padding:16px 18px; display:flex; flex-direction:column; justify-content:space-between; } .hero { background:var(--lime); min-height:190px; } .num { font-size:42px; font-weight:900; letter-spacing:-.03em; } .hero .num { font-size:72px; } .tag { font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
|
|
.s3 { display:grid; grid-template-columns:1fr 320px; grid-template-rows:1fr 1fr; gap:14px; height:100%; } .next { background:var(--lime); padding:30px 36px; display:flex; flex-direction:column; justify-content:center; gap:10px; } .next .sub { font-size:12px; letter-spacing:.2em; text-transform:uppercase; } .next .mega { font-size:122px; line-height:.9; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; } .art { background:var(--ink); display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(5,1fr); gap:6px; padding:18px; } .art span { background:var(--lime); } .art span.off { background:transparent; } .cols { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .col { border:1px solid var(--line); background:#fafaf7; padding:22px 24px; display:flex; flex-direction:column; gap:12px; } .col.dark { background:var(--ink); color:#fff; border-color:#222; } .col h3 { margin:0; font-size:26px; line-height:1.05; text-transform:uppercase; } .col p { margin:0; font-size:16px; line-height:1.4; opacity:.9; flex:1; }
|
|
.dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:10px; } .dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--ink); background:transparent; } .dot.active { background:var(--ink); transform:scale(1.25); } .hover { transition:transform .2s ease; } .hover:hover { transform:translateY(-2px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="deck">
|
|
<header class="toolbar"><span>Digits / Strategy Deck</span><div class="btns"><button id="prevBtn" type="button">Prev</button><button id="nextBtn" type="button">Next</button></div></header>
|
|
<section class="slides">
|
|
<article class="slide s1 active" data-slide="0"><div class="dark"><div class="meta">Portrait / B&W</div></div><div class="lime"></div><div class="dark"><div class="meta">Portrait / B&W</div></div><div class="headline">The Future of Data-Driven Finance</div><div class="copyright">©2026 DIGITS · All rights reserved.</div></article>
|
|
<article class="slide s2" data-slide="1"><aside class="rail"><div class="big">+98.7%</div><div class="lbl">Market<br />penetration</div></aside><section class="main"><div class="kicker">Operating readout</div><div class="title">Digits in Numbers</div><p class="body">With 10M+ users and 75M analyzed datapoints, the platform reshapes real-time financial decision loops.</p></section><section class="cards"><div class="row"><div class="card hover"><div class="num">12.8M</div><div class="tag">Transactions processed</div></div><div class="card hover"><div class="num">41M</div><div class="tag">Total revenue impacted ($)</div></div></div><div class="row"><div class="card hover"><div class="num">15.4M</div><div class="tag">Users engaged</div></div></div><div class="row"><div class="card hero hover"><div class="tag">Data points analyzed</div><div class="num">85.6M</div></div></div></section></article>
|
|
<article class="slide s3" data-slide="2"><section class="next"><div class="sub">Take three things away</div><div class="mega">Next Steps</div></section><section class="art"><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span><span></span><span class="off"></span></section><section class="cols"><article class="col hover"><div class="tag">01 · Today</div><h3>Pilot one workflow</h3><p>Wire a single weekly decision through the platform and benchmark against baseline.</p><div class="tag">= 2 weeks</div></article><article class="col hover"><div class="tag">02 · Next month</div><h3>Scale the wedge</h3><p>Expand into adjacent workflows and package reusable instrumentation patterns.</p><div class="tag">= 6 weeks</div></article><article class="col dark hover"><div class="tag">03 · This quarter</div><h3>Make it the default</h3><p>Move budget from legacy tooling and adopt this stack as the default operating layer.</p><div class="tag">→</div></article></section></article>
|
|
</section>
|
|
<nav class="dots" aria-label="Slide navigation"><button class="dot active" type="button" data-dot="0"></button><button class="dot" type="button" data-dot="1"></button><button class="dot" type="button" data-dot="2"></button></nav>
|
|
</main>
|
|
<script>
|
|
(function () {
|
|
const slides = Array.from(document.querySelectorAll(".slide"));
|
|
const dots = Array.from(document.querySelectorAll(".dot"));
|
|
let idx = 0;
|
|
const max = slides.length - 1;
|
|
function show(next) { idx = Math.max(0, Math.min(max, next)); slides.forEach((el, i) => el.classList.toggle("active", i === idx)); dots.forEach((el, i) => el.classList.toggle("active", i === idx)); }
|
|
document.getElementById("prevBtn").addEventListener("click", () => show(idx - 1));
|
|
document.getElementById("nextBtn").addEventListener("click", () => show(idx + 1));
|
|
dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
|
|
document.addEventListener("keydown", (event) => { if (event.key === "ArrowLeft") show(idx - 1); if (event.key === "ArrowRight") show(idx + 1); });
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|