-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomponents-advanced.html
More file actions
228 lines (216 loc) · 16.8 KB
/
Copy pathcomponents-advanced.html
File metadata and controls
228 lines (216 loc) · 16.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OneBrain — Advanced components</title>
<link rel="stylesheet" href="../colors_and_type.css" />
<link rel="stylesheet" href="../components.css" />
<link rel="stylesheet" href="_preview.css" />
<style>
body{ margin:0; padding:40px clamp(16px,5vw,56px) 80px; }
.pv-grid-bg{ position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
background-size:var(--grid-size) var(--grid-size);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 25%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 80% 70% at 50% 25%,#000 30%,transparent 100%); }
h1{ font-family:var(--font-display); font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:var(--tracking-tight); line-height:.95; font-size:clamp(2rem,5vw,3.4rem); margin:18px 0 6px; }
.lede{ font-family:var(--font-mono); color:var(--color-faint); max-width:var(--prose-max); line-height:1.65; font-size:.9rem; margin:0 0 36px; }
.sec{ font-family:var(--font-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--color-ghost); margin:36px 0 18px; border-top:1px solid var(--color-border-2); padding-top:18px; }
.stack{ display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.note{ font-family:var(--font-mono); font-size:11px; line-height:1.6; color:var(--color-faint); max-width:46ch; }
.srcnote{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--color-ghost); margin:42px 0 0; line-height:1.8; border-top:1px solid var(--color-border-2); padding-top:14px; max-width:82ch; }
.srcnote code{ color:var(--color-accent-2); }
.cyber-list .row{ flex-wrap:wrap; gap:2px 10px; }
.cyber-list .row .stamp{ margin-inline-start:auto; }
.cyber-list .row code{ overflow-wrap:anywhere; }
/* a small note-field demo for the emoji picker target */
.ep-demo-field{ width:100%; box-sizing:border-box; min-height:74px; padding:10px 12px; resize:vertical;
font-family:var(--font-mono); font-size:13px; line-height:1.6; color:var(--color-text);
background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-0); }
.ep-demo-field:focus{ outline:none; border-color:var(--section-accent); box-shadow:0 0 0 1px var(--section-accent); }
</style>
</head>
<body class="ob-root pv-boot">
<div class="pv-orb" style="--pv-orb-accent: var(--section-accent)"></div>
<div class="pv-grid-bg"></div>
<!-- minimal inline sprite so markup icons render standalone -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
<symbol id="ob-check" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></symbol>
<symbol id="ob-x" viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12"/></symbol>
<symbol id="ob-bell" viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></symbol>
<symbol id="ob-capture" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 8v8M8 12h8"/></symbol>
<symbol id="ob-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></symbol>
<symbol id="ob-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol>
<symbol id="ob-skill" viewBox="0 0 24 24"><path d="M12 3l2.1 5.5L20 9.3l-4 3.8 1 5.6-5-2.8-5 2.8 1-5.6-4-3.8 5.9-.8z"/></symbol>
</svg>
<span class="cyber-pill"><span class="cyber-dot is-pulse"></span> COMPONENTS · ADVANCED</span>
<h1>Advanced</h1>
<p class="lede">Heavier product + marketing primitives, all keyed to <code>components.css §24–§28</code> and the section
accent. The <b>pricing table</b> swaps amounts with a CSS-only <code>:has()</code> billing toggle; the <b>date picker</b>,
<b>resizable panes</b>, and <b>emoji picker</b> are progressively enhanced (zero-dependency, sandbox-safe) and degrade
without JS. Emoji here are content, not UI chrome.</p>
<!-- ── Pricing table ─────────────────────────────────────────────────── -->
<section data-component="pricing-table" data-title="Pricing table" data-crumb="ADVANCED · PRICING TABLE">
<div class="sec">// Pricing table (3 tiers · featured glow · CSS-only monthly/annual toggle)</div>
<div class="pricing">
<div class="segmented price-bill" role="radiogroup" aria-label="Billing period">
<input type="radio" id="bill-monthly" name="bill" checked />
<label for="bill-monthly">Monthly</label>
<input type="radio" id="bill-annual" name="bill" />
<label for="bill-annual">Annual · −25%</label>
</div>
<div class="price-grid">
<article class="price-tier">
<div class="price-name">Solo</div>
<div class="price-amt"><span class="cur">$</span><span class="num"><b class="mo">0</b><b class="yr">0</b></span><span class="per">/forever</span></div>
<p class="price-desc">Local-first vault on your machine. Own your Markdown forever.</p>
<ul class="price-feats">
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> One vault, plain Markdown</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> All 30 skills</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Local memory + wikilinks</li>
<li class="is-off"><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-x"/></svg> Cloud sync</li>
</ul>
<a class="btn-ghost" href="#">Start free</a>
</article>
<article class="price-tier is-featured">
<span class="price-rec">Recommended</span>
<div class="price-name">Pro</div>
<div class="price-amt"><span class="cur">$</span><span class="num"><b class="mo">12</b><b class="yr">9</b></span><span class="per">/month</span></div>
<p class="price-desc">Persistent memory across every harness, with scheduled co-evolution.</p>
<ul class="price-feats">
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Everything in Solo</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Encrypted cloud sync</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Scheduled skills (cron)</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Sub-agent automations</li>
</ul>
<a class="btn-tech" href="#"><span class="btn-tech-inner">Upgrade to Pro</span></a>
</article>
<article class="price-tier">
<div class="price-name">Team</div>
<div class="price-amt"><span class="cur">$</span><span class="num"><b class="mo">29</b><b class="yr">22</b></span><span class="per">/seat · mo</span></div>
<p class="price-desc">Shared vaults and a co-evolution loop across the whole team.</p>
<ul class="price-feats">
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Everything in Pro</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Shared vaults + roles</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Audit log + SSO</li>
<li><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-check"/></svg> Priority support</li>
</ul>
<a class="btn-ghost" href="#">Contact sales</a>
</article>
</div>
</div>
<!-- ── Date picker ───────────────────────────────────────────────────── -->
</section>
<section data-component="date-picker" data-title="Date picker" data-crumb="ADVANCED · DATE PICKER">
<div class="sec">// Date picker (calendar popover · selected = accent ring + tint · today dot)</div>
<div class="stack">
<div class="datepicker" data-datepicker aria-label="Pick a date">
<input type="date" data-datepicker-input value="2026-06-12" class="cyber-input" aria-label="Date" />
</div>
<p class="note">For vault task dates — <code>- [ ] Action 📅 YYYY-MM-DD</code>. The selected day is an accent ring +
weak tint with accent text (never a solid accent fill); today carries a small accent dot. Keyboard: arrows move,
<code>PgUp/PgDn</code> change month, <code>Enter</code> selects. With no JS the native <code><input type="date"></code> stays.</p>
</div>
<!-- ── Notification center ───────────────────────────────────────────── -->
</section>
<section data-component="notification-center" data-title="Notification center" data-crumb="ADVANCED · NOTIFICATION CENTER">
<div class="sec">// Notification center (unread accent ring + dot · mark all read · dismiss)</div>
<div class="notif-center">
<div class="notif-head">
<span class="nh-title">Activity</span>
<span class="nh-count" data-notif-count>3</span>
<button class="nh-action" type="button" data-notif-read-all>Mark all read</button>
</div>
<div class="notif-list">
<article class="notif is-unread">
<span class="notif-ic"><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-capture"/></svg></span>
<div class="notif-body">
<div class="notif-title"><b>Inbox Classifier</b> filed 4 captures into <b>02-areas</b>.</div>
<div class="notif-meta">2m ago · /consolidate</div>
</div>
<span class="notif-dot" aria-label="unread"></span>
<button class="notif-x" type="button" data-notif-read aria-label="Mark read"><svg class="ob-icon ob-icon-14" aria-hidden="true"><use href="#ob-check"/></svg></button>
</article>
<article class="notif is-unread">
<span class="notif-ic"><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-link"/></svg></span>
<div class="notif-body">
<div class="notif-title"><b>Link Suggester</b> added 7 wikilinks to <b>[[Harness OS]]</b>.</div>
<div class="notif-meta">18m ago · /connect</div>
</div>
<span class="notif-dot" aria-label="unread"></span>
<button class="notif-x" type="button" data-notif-read aria-label="Mark read"><svg class="ob-icon ob-icon-14" aria-hidden="true"><use href="#ob-check"/></svg></button>
</article>
<article class="notif is-unread">
<span class="notif-ic"><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-skill"/></svg></span>
<div class="notif-body">
<div class="notif-title">Weekly recap is ready — <b>12 sessions</b> summarized.</div>
<div class="notif-meta">1h ago · /weekly</div>
</div>
<span class="notif-dot" aria-label="unread"></span>
<button class="notif-x" type="button" data-notif-read aria-label="Mark read"><svg class="ob-icon ob-icon-14" aria-hidden="true"><use href="#ob-check"/></svg></button>
</article>
<article class="notif">
<span class="notif-ic"><svg class="ob-icon ob-icon-16" aria-hidden="true"><use href="#ob-clock"/></svg></span>
<div class="notif-body">
<div class="notif-title">Vault synced — <b>86 MB</b>, plain Markdown.</div>
<div class="notif-meta">Yesterday · auto</div>
</div>
<span class="notif-dot" aria-label="read"></span>
<button class="notif-x" type="button" data-dismiss aria-label="Dismiss"><svg class="ob-icon ob-icon-14" aria-hidden="true"><use href="#ob-x"/></svg></button>
</article>
</div>
</div>
<!-- ── Resizable panes ───────────────────────────────────────────────── -->
</section>
<section data-component="resizable-panes" data-title="Resizable panes" data-crumb="ADVANCED · RESIZABLE PANES">
<div class="sec">// Resizable panes (drag the splitter · accent on hover/drag · ← → nudge)</div>
<div class="resizable" data-resizable style="max-width:680px">
<div class="pane" style="width:240px">
<div style="font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--color-ghost); margin-bottom:10px">// Vault</div>
<div style="font-family:var(--font-mono); font-size:12.5px; line-height:1.9; color:var(--color-faint)">
00-inbox<br/>01-projects<br/>02-areas<br/>03-resources<br/>07-logs
</div>
</div>
<div class="resizer" aria-label="Resize panes"></div>
<div class="pane">
<div style="font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--color-ghost); margin-bottom:10px">// Note · harness-os.md</div>
<p style="font-family:var(--font-mono); font-size:12.5px; line-height:1.7; color:var(--color-text); margin:0">Drag the splitter to rebalance the panes — the left pane owns the width, the right fills. The handle brightens to the section accent on hover and drag, and honors each pane's min-width.</p>
</div>
</div>
<!-- ── Emoji picker ──────────────────────────────────────────────────── -->
</section>
<section data-component="emoji-picker" data-title="Emoji picker" data-crumb="ADVANCED · EMOJI PICKER">
<div class="sec">// Emoji picker (category tabs · search · recents · keyboard — emoji as content)</div>
<div class="stack">
<div class="emoji-picker" data-emoji-picker data-emoji-target="#ep-note" aria-label="Emoji picker"></div>
<div style="flex:1; min-width:min(260px,100%)">
<label for="ep-note" class="note" style="display:block; margin-bottom:8px">Tap an emoji to insert it into the note →</label>
<textarea id="ep-note" class="ep-demo-field" aria-label="Note">Shipped the vault sync </textarea>
<p class="note" style="margin-top:10px">Emoji are <b>content</b> here — the chrome (tabs, search, footer) stays on the
mono type + section accent. Search by name, browse by category, recents persist to <code>localStorage</code>.</p>
</div>
</div>
<!-- ── Source basis ──────────────────────────────────────────────────── -->
</section>
<section data-component="source-basis-the-website-s-real-build-time-modules" data-title="Source basis — the website's real build-time modules" data-crumb="ADVANCED · SOURCE BASIS — THE WEBSITE'S REAL BUILD-TIME MODULES">
<div class="sec">// Source basis — the website's real build-time modules (onebrain-ai/website)</div>
<div class="cyber-list" style="max-width:720px">
<div class="row"><b>version.ts</b> — the plan/CLI version shown on the pricing surface; from the Releases API at prerender, falls back to <code>3.0.0</code>. <span class="stamp">build</span></div>
<div class="row"><b>gh-stars.ts</b> — the social-proof star count near the CTA; <code>stargazers_count</code> baked at build, hidden on <code>0</code>. <span class="stamp">build</span></div>
<div class="row"><b>disposable-domains.ts</b> — the waitlist/upgrade guard; a blocklist match returns <code>200</code> with no write. <span class="stamp">api</span></div>
<div class="row"><b>brain-id.ts</b> — stable SSR gradient ids via a module counter (no <code>Math.random</code>) for the featured-tier glow. <span class="stamp">ssr</span></div>
<div class="row"><b>middleware.ts</b> — HSTS / nosniff / DENY / COOP headers wrapped so they ship even on a 500. <span class="stamp">edge</span></div>
</div>
<p class="srcnote">Classes: <code>.pricing</code> / <code>.price-tier</code> · <code>.datepicker</code> · <code>.notif-center</code> ·
<code>.resizable</code> / <code>.resizer</code> · <code>.emoji-picker</code> in <code>components.css §24–§28</code>. Enhancers:
<code>preview/datepicker.js</code>, <code>resizable.js</code>, <code>emoji-picker.js</code> (zero-dependency, keyboard +
ARIA, degrade without JS); notification read/dismiss via <code>preview/ui-actions.js</code>. The billing toggle is pure CSS
(<code>:has()</code>). Accent-keyed chrome follows <code>--section-accent</code>; emoji + syntax stay fixed.</p>
</section>
<script src="datepicker.js"></script>
<script src="resizable.js"></script>
<script src="emoji-picker.js"></script>
<script src="ui-actions.js"></script>
<script src="only.js"></script>
<script src="showcase-prefs.js"></script>
</body>
</html>