mirror of
https://github.com/runbear-io/beardrive.git
synced 2026-08-25 08:08:08 +02:00
160 lines
8.8 KiB
HTML
160 lines
8.8 KiB
HTML
|
<!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>
|