mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
6f6bf31dd2
* Refactor project name from "Open Claude Design" to "Open Design" - Updated project name in package.json, package-lock.json, and README files. - Changed CLI commands and references from "ocd" to "od". - Adjusted file structure references in documentation and code to reflect new naming conventions. - Enhanced .gitignore to include new runtime data files. - Updated metadata in LICENSE file to match new project name. * Add contributing guidelines in English and Chinese - Introduced CONTRIBUTING.md and CONTRIBUTING.zh-CN.md to provide clear instructions for contributors. - Outlined contribution types, local setup instructions, and merging criteria for skills and design systems. - Enhanced README files to reference the new contributing guidelines.
141 lines
7.3 KiB
HTML
141 lines
7.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Filebase · Investor deck — Q2 2026</title>
|
||
<style>
|
||
:root {
|
||
--bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --accent: #c96442; --surface: #ffffff;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; height: 100%; }
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font: 18px/1.5 -apple-system, system-ui, sans-serif;
|
||
display: flex;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scroll-snap-type: x mandatory;
|
||
scroll-behavior: smooth;
|
||
}
|
||
body::-webkit-scrollbar { display: none; }
|
||
.slide {
|
||
flex: 0 0 100vw;
|
||
height: 100vh;
|
||
scroll-snap-align: start;
|
||
padding: 80px 96px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
.slide.title { background: var(--fg); color: var(--bg); }
|
||
.eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
|
||
.slide h1 { font-size: clamp(48px, 7vw, 96px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 20px; max-width: 16ch; }
|
||
.slide h2 { font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.015em; margin: 0 0 20px; max-width: 20ch; }
|
||
.slide .body { font-size: 22px; color: var(--muted); max-width: 56ch; }
|
||
.slide.title .body { color: rgba(250,250,249,0.7); }
|
||
.slide.big-stat .number { font-size: clamp(120px, 22vw, 280px); line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); margin-bottom: 16px; font-weight: 600; }
|
||
.slide.big-stat .caption { font-size: 24px; color: var(--muted); max-width: 24ch; }
|
||
.quote-mark { font-family: Georgia, serif; font-size: 200px; line-height: 0.7; color: var(--accent); opacity: 0.18; margin-bottom: -40px; }
|
||
.quote-text { font-family: Georgia, serif; font-size: 36px; line-height: 1.3; max-width: 26ch; margin: 0 0 28px; }
|
||
.quote-author { font-size: 14px; color: var(--muted); }
|
||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
|
||
.grid-3 .pt { border-top: 2px solid var(--accent); padding-top: 16px; }
|
||
.grid-3 .pt .h { font-size: 18px; font-weight: 500; margin: 0 0 8px; }
|
||
.grid-3 .pt .p { color: var(--muted); margin: 0; font-size: 16px; }
|
||
.counter { position: fixed; bottom: 24px; right: 32px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); background: var(--surface); padding: 4px 10px; border-radius: 999px; border: 1px solid #e6e4e0; }
|
||
.hint { position: fixed; bottom: 24px; left: 32px; font-size: 11px; color: var(--muted); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="slide title" data-od-id="slide-1">
|
||
<div class="eyebrow" style="color:#c96442;">Filebase · Series B · Q2 2026</div>
|
||
<h1>The bandwidth bill is the bug.</h1>
|
||
<p class="body">A sync engine that ships only what changed. Backed by 3,184 paying teams.</p>
|
||
</section>
|
||
<section class="slide" data-od-id="slide-2">
|
||
<div class="eyebrow">Problem</div>
|
||
<h2>Every other tool re-uploads the whole file.</h2>
|
||
<p class="body">Edit one frame in a 4 GB Final Cut project; today's tools sync all 4 GB. The video, post-production, and design industries are eating multi-thousand-dollar bandwidth bills they shouldn't be.</p>
|
||
</section>
|
||
<section class="slide big-stat" data-od-id="slide-3">
|
||
<div class="number">38×</div>
|
||
<div class="caption">less data moved over the wire vs. naive sync, on real customer workloads.</div>
|
||
</section>
|
||
<section class="slide" data-od-id="slide-4">
|
||
<div class="eyebrow">Why now</div>
|
||
<h2>Three shifts make this market real.</h2>
|
||
<div class="grid-3">
|
||
<div class="pt"><h3 class="h">Remote post-production</h3><p class="p">Editors don't sit in one room any more. Cloud sync went from convenient to load-bearing.</p></div>
|
||
<div class="pt"><h3 class="h">AI workflows</h3><p class="p">Diffusion checkpoints are 7 GB. Engineers iterate on them daily. Existing tools choke.</p></div>
|
||
<div class="pt"><h3 class="h">Bandwidth pricing</h3><p class="p">Egress costs 4× what it did in 2022. Storage is cheap; movement is expensive.</p></div>
|
||
</div>
|
||
</section>
|
||
<section class="slide" data-od-id="slide-5">
|
||
<div class="quote-mark">"</div>
|
||
<p class="quote-text">Filebase pays for itself in the first month. We were going to hire a dedicated DevOps person to babysit our sync — instead we just switched.</p>
|
||
<p class="quote-author">— Mira Hassan, CTO at Northwind Studios</p>
|
||
</section>
|
||
<section class="slide title" data-od-id="slide-6">
|
||
<div class="eyebrow" style="color:#c96442;">Ask</div>
|
||
<h1>$22M to ship the next sync engine.</h1>
|
||
<p class="body">18-month runway, hire 14, expand to enterprise on-prem.</p>
|
||
</section>
|
||
|
||
<div class="counter" id="counter">1 / 6</div>
|
||
<div class="hint">← / → to navigate</div>
|
||
|
||
<script>
|
||
const slides = document.querySelectorAll('.slide');
|
||
const counter = document.getElementById('counter');
|
||
let active = 0;
|
||
|
||
// Detect the real scroller — when body has `display: flex` + `overflow-x: auto`
|
||
// the scroller can be body OR documentElement depending on the host (in
|
||
// particular, the OD srcdoc iframe). Pick whichever actually overflows.
|
||
function scroller() {
|
||
if (document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
||
return document.scrollingElement || document.documentElement;
|
||
}
|
||
|
||
function go(i) {
|
||
const next = Math.max(0, Math.min(slides.length - 1, i));
|
||
active = next;
|
||
counter.textContent = (next + 1) + ' / ' + slides.length;
|
||
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
||
}
|
||
function syncFromScroll() {
|
||
const i = Math.round(scroller().scrollLeft / window.innerWidth);
|
||
if (i !== active && i >= 0 && i < slides.length) {
|
||
active = i;
|
||
counter.textContent = (i + 1) + ' / ' + slides.length;
|
||
}
|
||
}
|
||
function onKey(e) {
|
||
if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
|
||
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(active + 1); }
|
||
else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(active - 1); }
|
||
else if (e.key === 'Home') { e.preventDefault(); go(0); }
|
||
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
|
||
}
|
||
// Listen on both window and document in capture phase so the handler
|
||
// fires regardless of which element holds focus inside the iframe.
|
||
window.addEventListener('keydown', onKey, true);
|
||
document.addEventListener('keydown', onKey, true);
|
||
// And listen for scroll on both surfaces — same reason.
|
||
document.addEventListener('scroll', syncFromScroll, { passive: true, capture: true });
|
||
window.addEventListener('scroll', syncFromScroll, { passive: true });
|
||
|
||
// Auto-focus body so arrow keys work without a click.
|
||
document.body.setAttribute('tabindex', '-1');
|
||
document.body.style.outline = 'none';
|
||
function focusDeck() { try { window.focus(); document.body.focus({ preventScroll: true }); } catch (_) {} }
|
||
document.addEventListener('mousedown', focusDeck);
|
||
window.addEventListener('load', focusDeck);
|
||
focusDeck();
|
||
</script>
|
||
</body>
|
||
</html>
|