External/beardrive
1
0
Fork 0
mirror of https://github.com/runbear-io/beardrive.git synced 2026-08-25 08:08:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): beardrive.ai landing page — "Google Drive for AI agents"

Browse Source 
Self-contained static page (website/index.html, no build step, no
dependencies): Supabase-style structure — centered hero with announcement
pill and gradient payoff line, animated terminal demo, storage strip,
bento feature cards, closing CTA — on a honey-amber (#f5a623) accent over
near-black. Copy is built around the two value props: share files with
people (public URLs) and share context across AI agents ("your agent
knows what their agent knows"), with a Claude Code demo acting out both.
Cloud is waitlist-only (mailto; no backend yet), no pricing shown.
themes-preview.html keeps the accent-color comparison used to pick honey.
README headline and intro updated to the same positioning; GitHub repo
description updated to match.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01R7Q9ZKSZRTdvrSJkYLUmYs
This commit is contained in:
Snow Lee
2026-07-08 21:07:40 -07:00
co-authored by Claude Fable 5
parent 4137fca0ef
commit 953db0260b
3 changed files with 747 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+7 -5
View File
@@ -1,14 +1,16 @@
# BearDrive — a synced file system for AI agents
# BearDrive — Google Drive for AI agents
**BearDrive** mounts any folder as a synced volume: its contents stay
synchronized across all your devices through cloud object storage, every
change is tracked (who, when, on which device), and everything keeps
working offline. The CLI is `bdrive`.
It is built for AI agent workflows — give your agents on every machine the
same `~/agent-workspace`, and notes, plans, memory files, and artifacts
follow them everywhere, with a full audit trail of which agent or human
changed what.
Two things it's for: **sharing files with people** — any synced file
becomes a public URL that renders as a page — and **sharing context across
AI agents**: give every agent on the team the same folder as memory, and
your agent knows what their agent knows. Notes, plans, findings, and
artifacts follow the team everywhere, with a full audit trail of which
agent or human changed what.
```console
$ bdrive login # once per device (browser sign-in)
website/index.html
+581
View File
@@ -0,0 +1,581 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BearDrive — Google Drive for AI agents</title>
<meta name="description" content="Google Drive for AI agents: one synced folder for your whole team. Share any file with people as a public URL; share context across agents, so your agent knows what their agent knows. Open source, no server required.">
<meta property="og:title" content="BearDrive — Google Drive for AI agents">
<meta property="og:description" content="One synced folder for humans and agents: files become public URLs for people, and shared memory for every teammate's agent. Open source, no server required.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://beardrive.ai">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#128059;</text></svg>">
<style>
:root {
--bg: #121212;
--panel: #171717;
--card: #1c1c1c;
--border: #2e2e2e;
--border-strong: #404040;
--text: #fafafa;
--text-dim: #a0a0a0;
--text-faint: #707070;
--brand: #f5a623;
--brand-deep: #6b4a00;
--brand-dark: #c9871a;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 15.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* ---- buttons ---- */
.btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 16px; border-radius: 6px;
background: var(--brand); color: #1a1200 !important;
font-weight: 600; font-size: 14px; line-height: 1.4;
border: 1px solid transparent; cursor: pointer; font-family: inherit;
transition: background .15s;
}
.btn:hover { background: #ffb955; }
.btn.ghost {
background: var(--card); color: var(--text) !important;
border: 1px solid var(--border-strong);
}
.btn.ghost:hover { background: #242424; border-color: #555; }
/* ---- nav ---- */
nav {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
nav .wrap { display: flex; align-items: center; gap: 30px; height: 60px; }
.logo { font-weight: 700; font-size: 16px; color: var(--text); display: flex; align-items: center; gap: 8px; }
nav .links { display: flex; gap: 24px; margin-left: auto; align-items: center; font-size: 14px; }
nav .links > a { color: var(--text-dim); }
nav .links > a:hover { color: var(--text); }
/* ---- hero ---- */
.hero { padding: 96px 0 40px; text-align: center; position: relative; overflow: hidden; }
.hero::before { /* faint green glow behind the hero, supabase-style */
content: ""; position: absolute; inset: auto 0 0 0; height: 480px; top: 0;
background: radial-gradient(600px 280px at 50% 0%, rgba(245,166,35,.10), transparent 70%);
pointer-events: none;
}
.pill {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-dim);
border: 1px solid var(--border); border-radius: 99px;
padding: 5px 14px 5px 8px; margin-bottom: 28px;
background: var(--panel);
}
.pill .dot {
background: rgba(245,166,35,.15); color: var(--brand);
font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 99px;
}
h1 {
font-size: clamp(38px, 5.6vw, 64px);
line-height: 1.06; letter-spacing: -.025em;
margin: 0 0 24px; font-weight: 700;
}
h1 .green {
display: block;
background: linear-gradient(90deg, #f5a623 30%, #ffd27d);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub {
font-size: 17.5px; color: var(--text-dim);
max-width: 40em; margin: 0 auto 34px;
}
.hero .sub b { color: var(--text); font-weight: 550; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.install {
display: flex; align-items: center; gap: 10px;
font: 13px/1 var(--mono);
background: var(--panel); border: 1px solid var(--border);
border-radius: 6px; padding: 10px 14px; color: var(--text-dim);
cursor: pointer; margin-top: 0;
}
.install:hover { border-color: var(--border-strong); color: var(--text); }
.install .dollar { color: var(--brand); user-select: none; }
.install .copied { color: var(--brand); }
/* ---- terminal ---- */
.term-wrap { padding: 44px 0 26px; position: relative; }
.term {
max-width: 780px; margin: 0 auto;
background: #101010; border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 0 0 1px rgba(245,166,35,.05), 0 30px 80px rgba(0,0,0,.6);
overflow: hidden; text-align: left;
}
.term-bar {
display: flex; align-items: center; gap: 7px; padding: 11px 14px;
border-bottom: 1px solid #222;
}
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #323232; }
.term-bar span { margin-left: 10px; font: 11.5px var(--mono); color: var(--text-faint); }
.term pre {
margin: 0; padding: 20px 22px 24px;
font: 13px/1.8 var(--mono);
color: #d0d0d0; white-space: pre-wrap; word-break: break-all;
min-height: 296px;
}
.term .p { color: var(--brand); }
.term .ok { color: var(--brand); }
.term .dim { color: var(--text-faint); }
.term .url { color: #6fbfff; text-decoration: underline; }
.term .cursor { display: inline-block; width: 8px; height: 15px; background: #d0d0d0; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* ---- storage strip ---- */
.strip { padding: 34px 0 64px; text-align: center; }
.strip p { font-size: 13px; color: var(--text-faint); margin: 0 0 18px; }
.strip .names {
display: flex; gap: 14px 34px; justify-content: center; flex-wrap: wrap;
font: 14px var(--mono); color: var(--text-dim);
}
.strip .names span { opacity: .85; }
/* ---- sections ---- */
section { padding: 84px 0; border-top: 1px solid var(--border); }
.kicker {
font: 600 12.5px var(--mono); letter-spacing: .06em;
color: var(--brand); margin: 0 0 14px;
}
h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 12px; letter-spacing: -.02em; line-height: 1.2; font-weight: 650; }
.lede { font-size: 16.5px; color: var(--text-dim); max-width: 44em; margin: 0 0 44px; }
.lede b { color: var(--text); font-weight: 550; }
/* bento cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
padding: 22px 22px 20px;
transition: border-color .15s, background .15s;
}
.card:hover { border-color: #3a3a3a; background: #191919; }
.card .ico {
width: 38px; height: 38px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: var(--card); border: 1px solid var(--border);
font-size: 17px; margin-bottom: 16px;
}
.card p { margin: 0; font-size: 14px; color: var(--text-dim); }
.card p b { color: var(--text); font-weight: 600; }
.card p code, .arch-note code, .oss-card li code {
font: 12px var(--mono); background: var(--card);
border: 1px solid var(--border); border-radius: 4px; padding: 1.5px 5px;
color: var(--text-dim);
}
.card.wide { grid-column: 1 / -1; }
/* steps row */
.stepnum {
font: 600 12px var(--mono); color: var(--brand);
margin-bottom: 12px; display: block;
}
/* architecture strip */
.arch {
margin-top: 16px; padding: 24px 26px 20px;
background: #101010; border: 1px solid var(--border); border-radius: 10px;
font: 12.5px/1.9 var(--mono); color: var(--text-dim);
overflow-x: auto; white-space: pre;
}
.arch b { color: var(--text); font-weight: 600; }
.arch .a { color: var(--brand); }
/* claude section */
.claude { display: flex; gap: 52px; align-items: flex-start; flex-wrap: wrap; }
.claude .copy { flex: 1 1 380px; }
.claude .demo { flex: 1 1 400px; min-width: 0; }
.chat {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
padding: 22px; font-size: 14px;
}
.chat .msg { margin-bottom: 16px; }
.chat .msg:last-child { margin-bottom: 0; }
.chat .who { font: 600 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 5px; }
.chat .msg.claude .who { color: var(--brand); }
.chat .bubble { color: var(--text-dim); }
.chat .bubble code { font: 12px var(--mono); background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 1.5px 5px; }
.chat .bubble .url { color: #6fbfff; }
.claude ul { padding-left: 0; list-style: none; color: var(--text-dim); font-size: 14.5px; margin: 22px 0 26px; }
.claude ul li { margin-bottom: 14px; padding-left: 24px; position: relative; }
.claude ul li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 600; }
.claude ul b { color: var(--text); font-weight: 600; }
/* open source / cloud */
.oss { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.oss-card {
background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
padding: 28px 26px;
}
.oss-card.cloud {
border-color: var(--brand-deep);
background: linear-gradient(180deg, rgba(245,166,35,.07), var(--panel) 60%);
}
.oss-card h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.01em; }
.oss-card .tag { font: 12px var(--mono); color: var(--text-faint); margin-bottom: 20px; }
.oss-card ul { list-style: none; padding: 0; margin: 0 0 26px; }
.oss-card li { padding: 6px 0 6px 24px; font-size: 14px; color: var(--text-dim); position: relative; }
.oss-card li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 600; }
.waitlist { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist input {
flex: 1 1 190px; padding: 8px 13px; border-radius: 6px;
border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
font: 14px/1.4 inherit; outline: none;
}
.waitlist input:focus { border-color: var(--brand-dark); }
/* closing CTA */
.closer { text-align: center; padding: 96px 0; }
.closer h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 10px; }
.closer h2 .green {
background: linear-gradient(90deg, #f5a623 30%, #ffd27d);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.closer p { color: var(--text-dim); margin: 0 0 30px; }
/* footer */
footer { border-top: 1px solid var(--border); padding: 36px 0 52px; font-size: 13.5px; color: var(--text-faint); }
footer .wrap { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
footer .links { margin-left: auto; display: flex; gap: 22px; }
footer a { color: var(--text-dim); }
footer a:hover { color: var(--text); }
@media (max-width: 720px) {
.hero { padding: 60px 0 24px; }
section { padding: 60px 0; }
nav .links > a:not(.btn) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.term .cursor { animation: none; }
}
</style>
</head>
<body>
<nav>
<div class="wrap">
<a class="logo" href="#">🐻 BearDrive</a>
<div class="links">
<a href="#how">How it works</a>
<a href="#features">Features</a>
<a href="#claude">Claude Code</a>
<a href="#get">Open source</a>
<a href="https://github.com/runbear-io/beardrive" title="GitHub">GitHub</a>
<a class="btn" href="#get">Start syncing</a>
</div>
</div>
</nav>
<header class="hero">
<div class="wrap">
<div class="pill"><span class="dot">Open source</span> AGPL-3.0 · single Go binary · on Homebrew</div>
<h1>Google Drive for AI agents.<span class="green">Your agent knows what their agent knows.</span></h1>
<p class="sub">One synced folder for your whole team — humans and agents.
<b>Share any file with people</b> as a public URL; <b>give every agent the same
memory</b>, synced across machines in seconds. Real files. No server required.</p>
<div class="cta-row">
<a class="btn" href="#get">Start syncing</a>
<button class="install" id="install" title="Copy">
<span class="dollar">$</span>
<span id="install-cmd">brew install runbear-io/tap/beardrive</span>
</button>
</div>
</div>
<div class="term-wrap wrap">
<div class="term" aria-label="Terminal demo">
<div class="term-bar"><i></i><i></i><i></i><span>~/acme-wiki</span></div>
<pre id="term-body"></pre>
</div>
</div>
<div class="strip">
<p>Works with the storage you already have</p>
<div class="names">
<span>Amazon S3</span><span>Google Cloud Storage</span><span>Cloudflare R2</span>
<span>MinIO</span><span>any folder</span><span>— or a BearDrive hub</span>
</div>
</div>
</header>
<section id="how">
<div class="wrap">
<p class="kicker">HOW IT WORKS</p>
<h2>One command per project. That's the integration.</h2>
<p class="lede">BearDrive mounts any folder as a synced volume. Your agents just
write files — every editor, every tool, every agent already knows how to do that.</p>
<div class="grid">
<div class="card"><span class="stepnum">01</span>
<p><b>Init the folder.</b> <code>bdrive init</code> connects the project and
starts a background daemon. Teammates run the same command and converge on
the same files within seconds.</p>
</div>
<div class="card"><span class="stepnum">02</span>
<p><b>Agents write, everyone sees — including their agents.</b> Claude writes
<code>wiki/report.md</code> on your machine; moments later it's in every
teammate's folder, where their own agent reads it — attributed, versioned,
kept forever.</p>
</div>
<div class="card"><span class="stepnum">03</span>
<p><b>Share by URL.</b> <code>bdrive share wiki/report.md</code> prints a
public link that renders the file as a page — always the latest synced
version, no account needed, revocable any time.</p>
</div>
<div class="card wide">
<div class="arch"><b>your folder</b> ←scan/materialize→ <b>local volume</b> ←push/pull→ <span class="a">object storage or a BearDrive hub</span>
<span class="dim">real files per-device journals, devices converge through dumb storage:
every tool works content-addressed blobs append-only, no locks, offline-safe</span></div>
</div>
</div>
</div>
</section>
<section id="why">
<div class="wrap">
<p class="kicker">WHY BEARDRIVE</p>
<h2>Two superpowers, one folder.</h2>
<div class="grid" style="grid-template-columns:repeat(auto-fit,minmax(340px,1fr))">
<div class="card"><div class="ico">🧑‍🤝‍🧑</div>
<p style="font-size:15px"><b>Share files with people.</b> Anything in the folder is a
<code>bdrive share</code> away from being a public URL that renders as a page —
markdown, HTML, PDFs. No accounts for viewers, no "can you re-send that?",
always the latest version, revocable any time. Dropbox-link simplicity for
everything your team produces.</p>
</div>
<div class="card"><div class="ico">🧠</div>
<p style="font-size:15px"><b>Share context across agents.</b> The folder is shared
memory. What your agent learns today — findings, plans, decisions, notes —
is on your teammate's disk in seconds, so <b>their agent starts tomorrow's
session already knowing it</b>. Context stops being siloed per laptop;
every agent on the team reads from, and writes to, the same brain.</p>
</div>
</div>
</div>
</section>
<section id="features">
<div class="wrap">
<p class="kicker">FEATURES</p>
<h2>Built for teams where half the "members" are agents.</h2>
<p class="lede">Sync is table stakes. What agent teams actually need is
<b>provenance</b>, <b>shareability</b>, and a security model that assumes files
are written by software.</p>
<div class="grid">
<div class="card"><div class="ico">📁</div>
<p><b>Real files, zero lock-in.</b> Not a virtual filesystem, not an API. A
normal folder on disk — grep it, open it in your editor, point any agent at
it. Stop syncing any time; the files stay.</p>
</div>
<div class="card"><div class="ico">🕘</div>
<p><b>Every change tracked, forever.</b> Who changed each file, when, from
which device — every past version viewable and downloadable. An agent
overwriting your doc is an annoyance, not a loss.</p>
</div>
<div class="card"><div class="ico">🔗</div>
<p><b>Public share links.</b> Any synced file becomes a rendered page at an
unguessable URL: HTML as a page, markdown Obsidian-style, PDFs inline.
Sandboxed, rate-limited, living until you revoke it.</p>
</div>
<div class="card"><div class="ico">👥</div>
<p><b>Teams &amp; organizations.</b> Projects belong to your org; only
members see or sync them. Invite a teammate with one expiring link.
Accounts, device registry, and history come built in.</p>
</div>
<div class="card"><div class="ico">📴</div>
<p><b>Offline-first, conflict-safe.</b> Append-only journals and
deterministic replay: devices converge without a coordination server, and
concurrent edits keep both versions as conflict copies.</p>
</div>
<div class="card"><div class="ico">🪣</div>
<p><b>Bring your own storage.</b> S3, GCS, R2, MinIO, or a plain shared
directory — BearDrive needs nothing but dumb object storage. Or sync
through a hub and devices never hold cloud credentials at all.</p>
</div>
</div>
</div>
</section>
<section id="claude">
<div class="wrap claude">
<div class="copy">
<p class="kicker">CLAUDE CODE</p>
<h2>Your agents become fluent in it.</h2>
<ul>
<li><b>/beardrive:install</b> sets a whole team project up
conversationally: CLI, sign-in, project, and sync hooks.</li>
<li><b>Hooks keep everything fresh</b> — a pull when you submit a prompt
(Claude reads the team's latest files) and an async push after every edit
(artifacts hit the server seconds after Claude writes them). Works for
every teammate, plugin or not.</li>
<li><b>The skill teaches Claude the CLI</b>, so "share this report with
the team" just works.</li>
</ul>
<a class="btn ghost" href="https://github.com/runbear-io/beardrive/tree/main/plugin">Explore the plugin →</a>
</div>
<div class="demo chat">
<div class="msg"><div class="who">You, to your Claude</div>
<div class="bubble">Write up the Q3 findings and share them with the team.</div>
</div>
<div class="msg claude"><div class="who">Your Claude</div>
<div class="bubble">Done — I saved the report to <code>wiki/q3-findings.md</code>
(synced to the team) and here's a public link for anyone outside it:<br><br>
<span class="url">https://beardrive.ai/s/1aad3327224e408d…</span></div>
</div>
<div class="msg"><div class="who">Your teammate, to their Claude</div>
<div class="bubble">What did we learn from the Q3 numbers?</div>
</div>
<div class="msg claude"><div class="who">Their Claude</div>
<div class="bubble">Per <code>wiki/q3-findings.md</code> — synced to this machine
four minutes ago — churn concentrated in self-serve accounts, and…</div>
</div>
</div>
</div>
</section>
<section id="get">
<div class="wrap">
<p class="kicker">GET BEARDRIVE</p>
<h2>Self-host everything. Or let us run it.</h2>
<p class="lede">The entire product is open source under AGPL-3.0 — server, teams,
history, share links, <b>nothing held back</b>. The cloud exists for teams who'd
rather never think about buckets.</p>
<div class="oss">
<div class="oss-card">
<h3>Open source</h3>
<div class="tag">AGPL-3.0 · free forever · your infrastructure</div>
<ul>
<li>The complete server — teams included</li>
<li>One binary: <code>bdrive web</code> is the viewer, uploads, and sync hub</li>
<li>Any storage: S3 / GCS / R2 / MinIO / a folder</li>
<li>File-backed registries — no database to run</li>
</ul>
<div class="cta-row" style="justify-content:flex-start">
<a class="btn" href="https://github.com/runbear-io/beardrive">View on GitHub</a>
<a class="btn ghost" href="https://github.com/runbear-io/beardrive#the-sync-hub-and-bdrive-init">Self-hosting guide</a>
</div>
</div>
<div class="oss-card cloud">
<h3>BearDrive Cloud</h3>
<div class="tag">beardrive.ai · managed hosting · coming soon</div>
<ul>
<li>Zero setup — <code>bdrive login</code> and go</li>
<li>SSO, backups, and support handled for you</li>
<li>Funds the open source project</li>
</ul>
<form class="waitlist" id="waitlist">
<input type="email" id="waitlist-email" placeholder="you@company.com" aria-label="Email" required>
<button class="btn" type="submit">Join the waitlist</button>
</form>
</div>
</div>
</div>
</section>
<section class="closer">
<div class="wrap">
<h2>Share files. Share context.<br><span class="green">Set up in under a minute.</span></h2>
<p>brew install, bdrive init, done. Files travel to people as URLs; context travels to every agent on the team.</p>
<div class="cta-row">
<a class="btn" href="https://github.com/runbear-io/beardrive">Start on GitHub</a>
<button class="install" id="install2" title="Copy">
<span class="dollar">$</span>
<span id="install-cmd2">brew install runbear-io/tap/beardrive</span>
</button>
</div>
</div>
</section>
<footer>
<div class="wrap">
<span>🐻 BearDrive — © 2026 <a href="https://runbear.io">Runbear, Inc.</a> · AGPL-3.0</span>
<div class="links">
<a href="https://github.com/runbear-io/beardrive">GitHub</a>
<a href="https://github.com/runbear-io/beardrive#readme">Docs</a>
<a href="https://github.com/runbear-io/beardrive/blob/main/LICENSE">License</a>
</div>
</div>
</footer>
<script>
/* waitlist: no backend yet, so hand off to email */
document.getElementById("waitlist").addEventListener("submit", (e) => {
e.preventDefault();
const email = document.getElementById("waitlist-email").value;
location.href = "mailto:hello@runbear.io" +
"?subject=" + encodeURIComponent("BearDrive Cloud waitlist") +
"&body=" + encodeURIComponent("Please add " + email + " to the BearDrive Cloud waitlist.");
});
/* copy-to-clipboard on both install commands */
for (const [btn, cmd] of [["install", "install-cmd"], ["install2", "install-cmd2"]]) {
document.getElementById(btn).addEventListener("click", async () => {
const el = document.getElementById(cmd);
try {
await navigator.clipboard.writeText(el.textContent);
const old = el.textContent;
el.textContent = "copied!";
el.classList.add("copied");
setTimeout(() => { el.textContent = old; el.classList.remove("copied"); }, 1200);
} catch { /* clipboard unavailable */ }
});
}
/* typed terminal demo */
const LINES = [
{ t: "$ ", cls: "p" }, { t: "bdrive init\n", type: true },
{ t: "✓", cls: "ok" }, { t: " project ", cls: "dim" }, { t: "acme-wiki" },
{ t: " syncing → beardrive.ai\n\n", cls: "dim" },
{ t: " (your agent writes wiki/q3-report.md…)\n\n", cls: "dim", pause: 900 },
{ t: "$ ", cls: "p" }, { t: "bdrive status\n", type: true },
{ t: " daemon: running\n files: 142 (3.4 MiB)\n pending: 0 — everything synced\n\n", cls: "dim" },
{ t: "$ ", cls: "p" }, { t: "bdrive share wiki/q3-report.md\n", type: true },
{ t: "https://beardrive.ai/s/1aad3327224e408d\n", cls: "url" },
{ t: " anyone can open it — no account needed\n", cls: "dim" },
];
const body = document.getElementById("term-body");
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
const cursor = document.createElement("span");
cursor.className = "cursor";
async function play() {
if (reduced) {
for (const l of LINES) append(l.t, l.cls);
return;
}
body.appendChild(cursor);
for (const l of LINES) {
if (l.pause) await sleep(l.pause);
if (l.type) {
for (const ch of l.t) { append(ch, l.cls); await sleep(34); }
await sleep(250);
} else {
append(l.t, l.cls);
await sleep(120);
}
}
cursor.remove();
}
function append(text, cls) {
const s = document.createElement("span");
if (cls) s.className = cls;
s.textContent = text;
body.insertBefore(s, reduced ? null : cursor);
}
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
play();
</script>
</body>
</html>
website/themes-preview.html
+159
View File
@@ -0,0 +1,159 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BearDrive — accent theme candidates</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0; background: #0c0c0c; color: #fafafa;
font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
padding: 40px 24px 80px;
}
h1 { text-align: center; font-size: 22px; margin: 0 0 6px; }
.note { text-align: center; color: #909090; font-size: 13.5px; margin: 0 0 36px; }
.themes { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 22px; }
.theme {
--bg: #121212; --panel: #171717; --card: #1c1c1c; --border: #2e2e2e;
--dim: #a0a0a0; --faint: #707070;
background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
overflow: hidden; position: relative;
}
.theme .glow {
position: absolute; inset: 0 0 auto 0; height: 220px;
background: radial-gradient(420px 200px at 50% 0%, var(--glow), transparent 70%);
pointer-events: none;
}
.head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 10px; }
.head b { font-size: 15px; }
.head span { font-size: 12px; color: var(--faint); }
.head .hex { margin-left: auto; font: 11.5px ui-monospace, Menlo, monospace; color: var(--dim); }
.mini { padding: 30px 26px 26px; text-align: center; position: relative; }
.pill {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; color: var(--dim);
border: 1px solid var(--border); border-radius: 99px;
padding: 4px 12px 4px 6px; margin-bottom: 18px; background: var(--panel);
}
.pill .dot { background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 650; padding: 2px 8px; border-radius: 99px; }
.mini h2 { font-size: 25px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 700; }
.mini h2 .g {
display: block;
background: linear-gradient(90deg, var(--accent) 30%, var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mini p { font-size: 13px; color: var(--dim); margin: 0 0 18px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.btn {
padding: 7px 14px; border-radius: 6px; background: var(--accent);
color: var(--btn-text); font-weight: 600; font-size: 12.5px; border: none;
}
.btn.ghost { background: var(--card); color: #fafafa; border: 1px solid #404040; }
.term {
text-align: left; background: #101010; border: 1px solid var(--border); border-radius: 8px;
padding: 13px 15px; font: 11.5px/1.75 ui-monospace, Menlo, monospace; color: #d0d0d0;
}
.term .p { color: var(--accent); }
.term .dim { color: var(--faint); }
.term .url { color: #6fbfff; text-decoration: underline; }
.verdict { padding: 14px 20px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--dim); }
.verdict b { color: #fafafa; }
</style>
</head>
<body>
<h1>BearDrive accent themes</h1>
<p class="note">Same layout, one variable changed. Scroll — the verdict under each card is the honest trade-off.</p>
<div class="themes">
<div class="theme" style="--accent:#f5a623; --accent-2:#ffd27d; --accent-soft:rgba(245,166,35,.15); --glow:rgba(245,166,35,.10); --btn-text:#1a1200">
<div class="glow"></div>
<div class="head"><b>🍯 Honey</b><span>warm amber</span><span class="hex">#f5a623</span></div>
<div class="mini">
<div class="pill"><span class="dot">Open source</span> AGPL-3.0 · on Homebrew</div>
<h2>A shared drive for your AI agents.<span class="g">Synced in seconds. Tracked forever.</span></h2>
<p>Real files. No server required.</p>
<div class="row"><button class="btn">Start syncing</button><button class="btn ghost">GitHub</button></div>
<div class="term"><span class="p">$</span> bdrive share wiki/q3-report.html
<span class="url">https://beardrive.ai/s/1aad3327…</span>
<span class="dim"> anyone can open it — no account needed</span></div>
</div>
<div class="verdict"><b>The bear-brand pick.</b> Honey is literally on-brand, warm and
optimistic, and almost untouched in dev tools — instantly distinguishable from
Supabase/Linear/Vercel. Risk: amber reads "warning" in some UI contexts.</div>
</div>
<div class="theme" style="--accent:#fa8072; --accent-2:#ffb4a8; --accent-soft:rgba(250,128,114,.15); --glow:rgba(250,128,114,.10); --btn-text:#2a0c08">
<div class="glow"></div>
<div class="head"><b>🐟 Salmon</b><span>warm coral</span><span class="hex">#fa8072</span></div>
<div class="mini">
<div class="pill"><span class="dot">Open source</span> AGPL-3.0 · on Homebrew</div>
<h2>A shared drive for your AI agents.<span class="g">Synced in seconds. Tracked forever.</span></h2>
<p>Real files. No server required.</p>
<div class="row"><button class="btn">Start syncing</button><button class="btn ghost">GitHub</button></div>
<div class="term"><span class="p">$</span> bdrive share wiki/q3-report.html
<span class="url">https://beardrive.ai/s/1aad3327…</span>
<span class="dim"> anyone can open it — no account needed</span></div>
</div>
<div class="verdict"><b>The playful pick.</b> Bears eat salmon — a wink insiders get.
Friendly and modern (Claude/Anthropic-adjacent warmth). Risk: coral can read
consumer-y rather than infrastructure-y.</div>
</div>
<div class="theme" style="--accent:#7dd3fc; --accent-2:#c5ecff; --accent-soft:rgba(125,211,252,.14); --glow:rgba(125,211,252,.09); --btn-text:#06202e">
<div class="glow"></div>
<div class="head"><b>🧊 Glacier</b><span>polar ice blue</span><span class="hex">#7dd3fc</span></div>
<div class="mini">
<div class="pill"><span class="dot">Open source</span> AGPL-3.0 · on Homebrew</div>
<h2>A shared drive for your AI agents.<span class="g">Synced in seconds. Tracked forever.</span></h2>
<p>Real files. No server required.</p>
<div class="row"><button class="btn">Start syncing</button><button class="btn ghost">GitHub</button></div>
<div class="term"><span class="p">$</span> bdrive share wiki/q3-report.html
<span class="url">https://beardrive.ai/s/1aad3327…</span>
<span class="dim"> anyone can open it — no account needed</span></div>
</div>
<div class="verdict"><b>The calm-infrastructure pick.</b> Polar-bear cool, Tailscale-like
trustworthiness, great contrast on black. Risk: blue is the most crowded color
in dev tools (GitHub, Docker, Stripe) — safe but forgettable.</div>
</div>
<div class="theme" style="--accent:#a882ff; --accent-2:#d3c1ff; --accent-soft:rgba(168,130,255,.15); --glow:rgba(168,130,255,.10); --btn-text:#170d2e">
<div class="glow"></div>
<div class="head"><b>🔮 Violet</b><span>the product's own accent</span><span class="hex">#a882ff</span></div>
<div class="mini">
<div class="pill"><span class="dot">Open source</span> AGPL-3.0 · on Homebrew</div>
<h2>A shared drive for your AI agents.<span class="g">Synced in seconds. Tracked forever.</span></h2>
<p>Real files. No server required.</p>
<div class="row"><button class="btn">Start syncing</button><button class="btn ghost">GitHub</button></div>
<div class="term"><span class="p">$</span> bdrive share wiki/q3-report.html
<span class="url">https://beardrive.ai/s/1aad3327…</span>
<span class="dim"> anyone can open it — no account needed</span></div>
</div>
<div class="verdict"><b>The consistency pick.</b> Your web viewer already uses this violet —
landing page, product, and share pages would feel like one thing. Risk: violet-on-dark
is the Linear/Obsidian look, i.e. the "too general" you flagged.</div>
</div>
<div class="theme" style="--accent:#3ecf8e; --accent-2:#7edfb6; --accent-soft:rgba(62,207,142,.15); --glow:rgba(62,207,142,.10); --btn-text:#0b0b0b">
<div class="glow"></div>
<div class="head"><b>🌲 Current</b><span>Supabase green (as-is)</span><span class="hex">#3ecf8e</span></div>
<div class="mini">
<div class="pill"><span class="dot">Open source</span> AGPL-3.0 · on Homebrew</div>
<h2>A shared drive for your AI agents.<span class="g">Synced in seconds. Tracked forever.</span></h2>
<p>Real files. No server required.</p>
<div class="row"><button class="btn">Start syncing</button><button class="btn ghost">GitHub</button></div>
<div class="term"><span class="p">$</span> bdrive share wiki/q3-report.html
<span class="url">https://beardrive.ai/s/1aad3327…</span>
<span class="dim"> anyone can open it — no account needed</span></div>
</div>
<div class="verdict"><b>The status quo.</b> Proven legibility and OSS-community coding
("green = open source" thanks to Supabase). Risk: it's <i>their</i> green — you'd
forever look like a Supabase product.</div>
</div>
</div>
</body>
</html>