-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomponents-inputs.html
More file actions
77 lines (73 loc) · 6.77 KB
/
Copy pathcomponents-inputs.html
File metadata and controls
77 lines (73 loc) · 6.77 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OneBrain — Inputs & Composer</title>
<link rel="stylesheet" href="../colors_and_type.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%); }
.eb{ display:inline-flex; align-items:center; gap:10px; padding:8px 14px; font-family:var(--font-mono); font-size:var(--eyebrow-size); letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--section-accent); background:color-mix(in srgb,var(--section-accent) 4%,transparent); border:1px solid color-mix(in srgb,var(--section-accent) 30%,transparent); position:relative; }
.eb::before,.eb::after{content:'';position:absolute;width:7px;height:7px;border:1px solid currentColor;}
.eb::before{top:-2px;left:-2px;border-right:0;border-bottom:0;} .eb::after{bottom:-2px;right:-2px;border-left:0;border-top:0;}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:var(--glow-sm);}
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 40px; }
.sec{ font-family:var(--font-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--color-ghost); margin:36px 0 16px; border-top:1px solid var(--color-border-2); padding-top:18px; }
.field{ max-width:520px; margin-bottom:20px; }
label{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--color-muted); margin-bottom:8px; }
.inp{ width:100%; box-sizing:border-box; background:var(--color-surface); border:1px solid var(--color-border);
color:var(--color-text); font-family:var(--font-mono); font-size:14px; padding:13px 15px; outline:none; transition:border-color .2s,box-shadow .2s; }
.inp::placeholder{ color:var(--color-muted); }
.inp:focus{ border-color:var(--section-accent); box-shadow:0 0 0 1px var(--section-accent),0 0 18px color-mix(in srgb,var(--section-accent) 25%,transparent); }
textarea.inp{ resize:vertical; min-height:96px; line-height:1.6; }
.inp-err{ border-color:var(--color-danger); }
.errmsg{ font-family:var(--font-mono); font-size:11px; color:var(--color-danger); margin-top:7px; letter-spacing:.05em; }
/* command composer — the agent input bar */
.composer{ max-width:640px; display:flex; align-items:stretch; gap:0; border:1px solid var(--color-border); background:var(--color-surface); }
.composer:focus-within{ border-color:var(--section-accent); box-shadow:0 0 22px color-mix(in srgb,var(--section-accent) 20%,transparent); }
.composer .slash{ display:flex; align-items:center; padding:0 14px; font-family:var(--font-mono); color:var(--section-accent); font-size:16px; border-right:1px solid var(--color-border); }
.composer input{ flex:1; background:transparent; border:0; outline:none; color:var(--color-text); font-family:var(--font-mono); font-size:14px; padding:14px 12px; }
.composer input::placeholder{ color:var(--color-muted); }
.composer .send{ clip-path:var(--clip-tech); background:var(--grad-button); padding:1.5px; margin:5px; border:0; cursor:pointer; }
.composer .send span{ display:block; clip-path:var(--clip-tech); background:var(--color-bg); color:#fff; font-family:var(--font-display); font-style:italic; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:8px 18px; font-size:.78rem; transition:.2s; }
.composer .send:hover span{ background:#fff; color:#0a0a12; }
.sugg{ max-width:640px; margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.sugg b{ font-family:var(--font-mono); font-size:11px; color:var(--color-faint); background:rgba(0,243,255,.06); border:1px solid var(--color-border-2); padding:5px 10px; letter-spacing:.05em; font-weight:400; }
.hint{ font-family:var(--font-mono); font-size:10.5px; color:var(--color-muted); margin-top:8px; letter-spacing:.05em; }
/* toggle */
.toggle{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:12px; color:var(--color-muted); }
.sw{ width:42px; height:22px; border:1px solid var(--section-accent); position:relative; background:color-mix(in srgb,var(--section-accent) 12%,transparent); }
.sw::after{ content:''; position:absolute; top:2px; left:22px; width:14px; height:14px; background:var(--color-accent-2); box-shadow:var(--glow-sm); }
</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>
<span class="eb"><span class="dot"></span> COMPONENTS · INPUTS & COMPOSER</span>
<h1>Inputs & Composer</h1>
<p class="lede">Dark surfaces, hairline borders, mono placeholders, and a cyan focus ring
(<code>2px solid #00f3ff, offset 3px</code>). Click into any field to see the focus state.</p>
<div class="sec">// Text fields</div>
<div class="field"><label>Vault path</label><input class="inp" type="text" value="~/OneBrain" /></div>
<div class="field"><label>Note title</label><input class="inp" type="text" placeholder="Search or create a note…" /></div>
<div class="field"><label>Email — waitlist</label><input class="inp inp-err" type="email" value="not-an-email" />
<div class="errmsg">▲ Enter a valid email address.</div></div>
<div class="field"><label>Session summary</label><textarea class="inp" placeholder="What did we accomplish this session?"></textarea></div>
<div class="sec">// Command composer (agent input)</div>
<div class="composer">
<span class="slash">/</span>
<input type="text" placeholder="capture an idea, route the inbox, connect notes…" aria-label="Command composer" />
<button class="send" type="button"><span>Run →</span></button>
</div>
<div class="sugg"><b>/capture</b><b>/consolidate</b><b>/connect</b><b>/distill</b><b>/daily</b><b>/research</b><b>/wrapup</b></div>
<div class="hint">slash affordance · mono field · .btn-tech submit · focus-within glow</div>
<div class="sec">// Toggle</div>
<span class="toggle"><span class="sw"></span> Persistent memory · ON</span>
<script src="showcase-prefs.js"></script>
</body>
</html>