snip-manager 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ANALYSIS.md +113 -0
- package/CHANGELOG.md +16 -0
- package/LICENSE +21 -0
- package/NPM_PUBLISH_GUIDE.md +75 -0
- package/README.md +76 -0
- package/STRATEGY.md +370 -0
- package/bin/snip +2 -0
- package/color_scheme.md +24 -0
- package/example_snippet.md +26 -0
- package/jest.config.js +5 -0
- package/jest.setup.js +17 -0
- package/landing.html +833 -0
- package/lib/cli.js +114 -0
- package/lib/clipboard.js +37 -0
- package/lib/commands/add.js +36 -0
- package/lib/commands/config.js +19 -0
- package/lib/commands/edit.js +26 -0
- package/lib/commands/export.js +23 -0
- package/lib/commands/import.js +18 -0
- package/lib/commands/list.js +81 -0
- package/lib/commands/rm.js +10 -0
- package/lib/commands/run.js +34 -0
- package/lib/commands/search.js +13 -0
- package/lib/commands/show.js +29 -0
- package/lib/commands/sync.js +27 -0
- package/lib/commands/ui.js +1137 -0
- package/lib/config.js +56 -0
- package/lib/exec.js +73 -0
- package/lib/migrate_to_sqlite.js +42 -0
- package/lib/safety.js +26 -0
- package/lib/search.js +21 -0
- package/lib/storage.js +372 -0
- package/lib/sync/gist.js +67 -0
- package/mvp.md +69 -0
- package/npm_publish_workflow.md +19 -0
- package/package.json +50 -0
- package/plan.md +99 -0
- package/prd.md +70 -0
- package/scripts/seed-examples.js +113 -0
- package/scripts/sqljs-smoke.js +48 -0
- package/tech_architecture.md +47 -0
- package/temp-sqljs.db +0 -0
- package/ui_ux.md +46 -0
- package/user_journey.md +29 -0
- package/value_prop.md +21 -0
package/landing.html
ADDED
|
@@ -0,0 +1,833 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>snip — Your Terminal Memory</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--ink: #0c0c0c;
|
|
13
|
+
--paper: #faf9f7;
|
|
14
|
+
--paper-dark: #e8e6e3;
|
|
15
|
+
--accent: #ff4d00;
|
|
16
|
+
--accent-light: #ff7a33;
|
|
17
|
+
--accent-glow: rgba(255, 77, 0, 0.15);
|
|
18
|
+
--muted: #6b6b6b;
|
|
19
|
+
--subtle: #a3a3a3;
|
|
20
|
+
--border: #d4d4d4;
|
|
21
|
+
--success: #16a34a;
|
|
22
|
+
--warning: #ca8a04;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
* {
|
|
26
|
+
margin: 0;
|
|
27
|
+
padding: 0;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
html {
|
|
32
|
+
scroll-behavior: smooth;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
body {
|
|
36
|
+
font-family: 'DM Sans', sans-serif;
|
|
37
|
+
background: var(--paper);
|
|
38
|
+
color: var(--ink);
|
|
39
|
+
line-height: 1.5;
|
|
40
|
+
overflow-x: hidden;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Subtle grain texture */
|
|
44
|
+
body::before {
|
|
45
|
+
content: '';
|
|
46
|
+
position: fixed;
|
|
47
|
+
inset: 0;
|
|
48
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
49
|
+
opacity: 0.03;
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
z-index: 1000;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Navigation */
|
|
55
|
+
nav {
|
|
56
|
+
position: fixed;
|
|
57
|
+
top: 0;
|
|
58
|
+
left: 0;
|
|
59
|
+
right: 0;
|
|
60
|
+
z-index: 100;
|
|
61
|
+
padding: 1.5rem 3rem;
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: space-between;
|
|
64
|
+
align-items: center;
|
|
65
|
+
background: rgba(250, 249, 247, 0.85);
|
|
66
|
+
backdrop-filter: blur(12px);
|
|
67
|
+
border-bottom: 1px solid var(--border);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.logo {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: 0.6rem;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
font-size: 1.4rem;
|
|
76
|
+
letter-spacing: -0.02em;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.logo-icon {
|
|
80
|
+
width: 32px;
|
|
81
|
+
height: 32px;
|
|
82
|
+
background: var(--ink);
|
|
83
|
+
border-radius: 6px;
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: center;
|
|
87
|
+
font-family: 'JetBrains Mono', monospace;
|
|
88
|
+
font-size: 0.9rem;
|
|
89
|
+
font-weight: 600;
|
|
90
|
+
color: var(--paper);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nav-links {
|
|
94
|
+
display: flex;
|
|
95
|
+
gap: 2.5rem;
|
|
96
|
+
align-items: center;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.nav-links a {
|
|
100
|
+
color: var(--muted);
|
|
101
|
+
text-decoration: none;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
font-size: 0.9rem;
|
|
104
|
+
transition: color 0.2s;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nav-links a:hover {
|
|
108
|
+
color: var(--ink);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.nav-cta {
|
|
112
|
+
background: var(--ink);
|
|
113
|
+
color: var(--paper);
|
|
114
|
+
padding: 0.65rem 1.4rem;
|
|
115
|
+
border-radius: 6px;
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
font-size: 0.875rem;
|
|
119
|
+
transition: all 0.2s;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.nav-cta:hover {
|
|
123
|
+
background: var(--accent);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* Hero */
|
|
127
|
+
.hero {
|
|
128
|
+
min-height: 100vh;
|
|
129
|
+
display: grid;
|
|
130
|
+
grid-template-columns: 1fr 1fr;
|
|
131
|
+
align-items: center;
|
|
132
|
+
padding: 8rem 3rem 4rem;
|
|
133
|
+
gap: 4rem;
|
|
134
|
+
max-width: 1400px;
|
|
135
|
+
margin: 0 auto;
|
|
136
|
+
position: relative;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.hero-content {
|
|
140
|
+
position: relative;
|
|
141
|
+
z-index: 2;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.hero-badge {
|
|
145
|
+
display: inline-flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
gap: 0.5rem;
|
|
148
|
+
background: var(--accent-glow);
|
|
149
|
+
border: 1px solid var(--accent);
|
|
150
|
+
padding: 0.4rem 0.9rem;
|
|
151
|
+
border-radius: 100px;
|
|
152
|
+
font-size: 0.75rem;
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
color: var(--accent);
|
|
155
|
+
text-transform: uppercase;
|
|
156
|
+
letter-spacing: 0.05em;
|
|
157
|
+
margin-bottom: 1.75rem;
|
|
158
|
+
animation: fadeSlideUp 0.7s ease-out;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.hero h1 {
|
|
162
|
+
font-family: 'Instrument Serif', serif;
|
|
163
|
+
font-size: clamp(3.2rem, 6vw, 5rem);
|
|
164
|
+
font-weight: 400;
|
|
165
|
+
letter-spacing: -0.02em;
|
|
166
|
+
line-height: 1.05;
|
|
167
|
+
margin-bottom: 1.5rem;
|
|
168
|
+
animation: fadeSlideUp 0.7s ease-out 0.1s both;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.hero h1 em {
|
|
172
|
+
font-style: italic;
|
|
173
|
+
color: var(--accent);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.hero-subtitle {
|
|
177
|
+
font-size: 1.15rem;
|
|
178
|
+
color: var(--muted);
|
|
179
|
+
max-width: 440px;
|
|
180
|
+
margin-bottom: 2.25rem;
|
|
181
|
+
font-weight: 400;
|
|
182
|
+
line-height: 1.7;
|
|
183
|
+
animation: fadeSlideUp 0.7s ease-out 0.2s both;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.hero-cta {
|
|
187
|
+
display: flex;
|
|
188
|
+
gap: 1rem;
|
|
189
|
+
flex-wrap: wrap;
|
|
190
|
+
animation: fadeSlideUp 0.7s ease-out 0.3s both;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.btn {
|
|
194
|
+
display: inline-flex;
|
|
195
|
+
align-items: center;
|
|
196
|
+
gap: 0.5rem;
|
|
197
|
+
padding: 0.9rem 1.75rem;
|
|
198
|
+
border-radius: 6px;
|
|
199
|
+
font-weight: 600;
|
|
200
|
+
font-size: 0.95rem;
|
|
201
|
+
text-decoration: none;
|
|
202
|
+
transition: all 0.25s;
|
|
203
|
+
cursor: pointer;
|
|
204
|
+
border: none;
|
|
205
|
+
font-family: inherit;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.btn-primary {
|
|
209
|
+
background: var(--accent);
|
|
210
|
+
color: white;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.btn-primary:hover {
|
|
214
|
+
background: var(--accent-light);
|
|
215
|
+
transform: translateY(-2px);
|
|
216
|
+
box-shadow: 0 8px 24px rgba(255, 77, 0, 0.25);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.btn-secondary {
|
|
220
|
+
background: transparent;
|
|
221
|
+
color: var(--ink);
|
|
222
|
+
border: 1px solid var(--border);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.btn-secondary:hover {
|
|
226
|
+
border-color: var(--ink);
|
|
227
|
+
background: var(--paper-dark);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
@keyframes fadeSlideUp {
|
|
231
|
+
from {
|
|
232
|
+
opacity: 0;
|
|
233
|
+
transform: translateY(24px);
|
|
234
|
+
}
|
|
235
|
+
to {
|
|
236
|
+
opacity: 1;
|
|
237
|
+
transform: translateY(0);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* Terminal - Hero Visual */
|
|
242
|
+
.hero-visual {
|
|
243
|
+
position: relative;
|
|
244
|
+
animation: fadeSlideUp 0.7s ease-out 0.15s both;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.terminal-large {
|
|
248
|
+
background: var(--ink);
|
|
249
|
+
border-radius: 16px;
|
|
250
|
+
overflow: hidden;
|
|
251
|
+
box-shadow:
|
|
252
|
+
0 40px 80px rgba(0, 0, 0, 0.25),
|
|
253
|
+
0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
254
|
+
transform: rotate(-2deg);
|
|
255
|
+
transition: transform 0.4s ease;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.terminal-large:hover {
|
|
259
|
+
transform: rotate(0deg) scale(1.02);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.terminal-header {
|
|
263
|
+
display: flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
gap: 0.5rem;
|
|
266
|
+
padding: 1rem 1.25rem;
|
|
267
|
+
background: #1a1a1a;
|
|
268
|
+
border-bottom: 1px solid #2a2a2a;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.terminal-btn {
|
|
272
|
+
width: 11px;
|
|
273
|
+
height: 11px;
|
|
274
|
+
border-radius: 50%;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.terminal-btn.red { background: #ff5f56; }
|
|
278
|
+
.terminal-btn.yellow { background: #ffbd2e; }
|
|
279
|
+
.terminal-btn.green { background: #27c93f; }
|
|
280
|
+
|
|
281
|
+
.terminal-title {
|
|
282
|
+
margin-left: 1rem;
|
|
283
|
+
font-family: 'JetBrains Mono', monospace;
|
|
284
|
+
font-size: 0.7rem;
|
|
285
|
+
color: var(--subtle);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.terminal-body {
|
|
289
|
+
padding: 1.75rem;
|
|
290
|
+
font-family: 'JetBrains Mono', monospace;
|
|
291
|
+
font-size: 0.8rem;
|
|
292
|
+
line-height: 2;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.terminal-line {
|
|
296
|
+
display: flex;
|
|
297
|
+
gap: 0.75rem;
|
|
298
|
+
margin-bottom: 0.25rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.prompt { color: var(--accent); }
|
|
302
|
+
.cmd { color: #f5f5f5; }
|
|
303
|
+
.comment { color: var(--subtle); }
|
|
304
|
+
.tag {
|
|
305
|
+
color: var(--ink);
|
|
306
|
+
background: var(--paper-dark);
|
|
307
|
+
padding: 0.1rem 0.35rem;
|
|
308
|
+
border-radius: 3px;
|
|
309
|
+
font-size: 0.65rem;
|
|
310
|
+
margin-left: 0.25rem;
|
|
311
|
+
}
|
|
312
|
+
.success { color: var(--success); }
|
|
313
|
+
.warning { color: var(--warning); }
|
|
314
|
+
|
|
315
|
+
/* Decorative elements */
|
|
316
|
+
.deco-blob {
|
|
317
|
+
position: absolute;
|
|
318
|
+
width: 400px;
|
|
319
|
+
height: 400px;
|
|
320
|
+
background: var(--accent-glow);
|
|
321
|
+
border-radius: 50%;
|
|
322
|
+
filter: blur(80px);
|
|
323
|
+
z-index: -1;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.deco-blob-1 {
|
|
327
|
+
top: -100px;
|
|
328
|
+
right: -100px;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.deco-blob-2 {
|
|
332
|
+
bottom: -150px;
|
|
333
|
+
left: -100px;
|
|
334
|
+
width: 300px;
|
|
335
|
+
height: 300px;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
/* Features */
|
|
339
|
+
.features {
|
|
340
|
+
padding: 8rem 3rem;
|
|
341
|
+
max-width: 1200px;
|
|
342
|
+
margin: 0 auto;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.section-header {
|
|
346
|
+
margin-bottom: 5rem;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
.section-label {
|
|
350
|
+
font-size: 0.75rem;
|
|
351
|
+
font-weight: 600;
|
|
352
|
+
text-transform: uppercase;
|
|
353
|
+
letter-spacing: 0.1em;
|
|
354
|
+
color: var(--accent);
|
|
355
|
+
margin-bottom: 1rem;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.section-header h2 {
|
|
359
|
+
font-family: 'Instrument Serif', serif;
|
|
360
|
+
font-size: clamp(2.5rem, 4vw, 3.5rem);
|
|
361
|
+
font-weight: 400;
|
|
362
|
+
letter-spacing: -0.02em;
|
|
363
|
+
max-width: 600px;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.features-grid {
|
|
367
|
+
display: grid;
|
|
368
|
+
grid-template-columns: repeat(3, 1fr);
|
|
369
|
+
gap: 2rem;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.feature-card {
|
|
373
|
+
background: white;
|
|
374
|
+
border: 1px solid var(--border);
|
|
375
|
+
border-radius: 12px;
|
|
376
|
+
padding: 2rem;
|
|
377
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
378
|
+
position: relative;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.feature-card:hover {
|
|
382
|
+
border-color: var(--ink);
|
|
383
|
+
transform: translateY(-6px);
|
|
384
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.feature-num {
|
|
388
|
+
font-family: 'JetBrains Mono', monospace;
|
|
389
|
+
font-size: 0.7rem;
|
|
390
|
+
color: var(--subtle);
|
|
391
|
+
margin-bottom: 1rem;
|
|
392
|
+
display: block;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.feature-card h3 {
|
|
396
|
+
font-size: 1.25rem;
|
|
397
|
+
font-weight: 600;
|
|
398
|
+
margin-bottom: 0.6rem;
|
|
399
|
+
letter-spacing: -0.01em;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.feature-card p {
|
|
403
|
+
color: var(--muted);
|
|
404
|
+
font-size: 0.95rem;
|
|
405
|
+
line-height: 1.6;
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/* How it works */
|
|
409
|
+
.how-it-works {
|
|
410
|
+
padding: 8rem 3rem;
|
|
411
|
+
background: var(--ink);
|
|
412
|
+
color: var(--paper);
|
|
413
|
+
position: relative;
|
|
414
|
+
overflow: hidden;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.how-it-works::before {
|
|
418
|
+
content: '';
|
|
419
|
+
position: absolute;
|
|
420
|
+
top: 0;
|
|
421
|
+
right: 0;
|
|
422
|
+
width: 50%;
|
|
423
|
+
height: 100%;
|
|
424
|
+
background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%);
|
|
425
|
+
opacity: 0.5;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.hiw-content {
|
|
429
|
+
max-width: 1200px;
|
|
430
|
+
margin: 0 auto;
|
|
431
|
+
display: grid;
|
|
432
|
+
grid-template-columns: 1fr 1fr;
|
|
433
|
+
gap: 6rem;
|
|
434
|
+
align-items: center;
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.hiw-left h2 {
|
|
438
|
+
font-family: 'Instrument Serif', serif;
|
|
439
|
+
font-size: clamp(2.5rem, 4vw, 3.5rem);
|
|
440
|
+
font-weight: 400;
|
|
441
|
+
margin-bottom: 1.5rem;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.hiw-left h2 em {
|
|
445
|
+
font-style: italic;
|
|
446
|
+
color: var(--accent);
|
|
447
|
+
}
|
|
448
|
+
|
|
449
|
+
.hiw-left p {
|
|
450
|
+
color: var(--subtle);
|
|
451
|
+
font-size: 1.1rem;
|
|
452
|
+
max-width: 400px;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.steps {
|
|
456
|
+
display: flex;
|
|
457
|
+
flex-direction: column;
|
|
458
|
+
gap: 2rem;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.step {
|
|
462
|
+
display: flex;
|
|
463
|
+
gap: 1.5rem;
|
|
464
|
+
align-items: flex-start;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
.step-num {
|
|
468
|
+
width: 48px;
|
|
469
|
+
height: 48px;
|
|
470
|
+
background: var(--accent);
|
|
471
|
+
border-radius: 50%;
|
|
472
|
+
display: flex;
|
|
473
|
+
align-items: center;
|
|
474
|
+
justify-content: center;
|
|
475
|
+
font-family: 'JetBrains Mono', monospace;
|
|
476
|
+
font-weight: 600;
|
|
477
|
+
font-size: 1.1rem;
|
|
478
|
+
color: white;
|
|
479
|
+
flex-shrink: 0;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.step-content h3 {
|
|
483
|
+
font-size: 1.15rem;
|
|
484
|
+
font-weight: 600;
|
|
485
|
+
margin-bottom: 0.4rem;
|
|
486
|
+
}
|
|
487
|
+
|
|
488
|
+
.step-content p {
|
|
489
|
+
color: var(--subtle);
|
|
490
|
+
font-size: 0.95rem;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.step-cmd {
|
|
494
|
+
margin-top: 0.6rem;
|
|
495
|
+
background: rgba(255, 255, 255, 0.08);
|
|
496
|
+
padding: 0.5rem 0.85rem;
|
|
497
|
+
border-radius: 4px;
|
|
498
|
+
font-family: 'JetBrains Mono', monospace;
|
|
499
|
+
font-size: 0.75rem;
|
|
500
|
+
color: var(--accent-light);
|
|
501
|
+
display: inline-block;
|
|
502
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
/* CTA */
|
|
506
|
+
.cta-section {
|
|
507
|
+
padding: 10rem 3rem;
|
|
508
|
+
text-align: center;
|
|
509
|
+
background: var(--paper);
|
|
510
|
+
position: relative;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.cta-section::before {
|
|
514
|
+
content: '';
|
|
515
|
+
position: absolute;
|
|
516
|
+
top: 50%;
|
|
517
|
+
left: 50%;
|
|
518
|
+
transform: translate(-50%, -50%);
|
|
519
|
+
width: 500px;
|
|
520
|
+
height: 500px;
|
|
521
|
+
background: var(--accent-glow);
|
|
522
|
+
border-radius: 50%;
|
|
523
|
+
filter: blur(100px);
|
|
524
|
+
opacity: 0.5;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.cta-section h2 {
|
|
528
|
+
font-family: 'Instrument Serif', serif;
|
|
529
|
+
font-size: clamp(2.5rem, 5vw, 4rem);
|
|
530
|
+
font-weight: 400;
|
|
531
|
+
margin-bottom: 1rem;
|
|
532
|
+
position: relative;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.cta-section h2 em {
|
|
536
|
+
font-style: italic;
|
|
537
|
+
color: var(--accent);
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.cta-section p {
|
|
541
|
+
color: var(--muted);
|
|
542
|
+
font-size: 1.15rem;
|
|
543
|
+
margin-bottom: 2.5rem;
|
|
544
|
+
position: relative;
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
.install-box {
|
|
548
|
+
display: inline-flex;
|
|
549
|
+
align-items: center;
|
|
550
|
+
gap: 0;
|
|
551
|
+
background: var(--ink);
|
|
552
|
+
border-radius: 8px;
|
|
553
|
+
overflow: hidden;
|
|
554
|
+
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
|
|
555
|
+
position: relative;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.install-box .dollar {
|
|
559
|
+
padding: 1rem 1rem 1rem 1.25rem;
|
|
560
|
+
font-family: 'JetBrains Mono', monospace;
|
|
561
|
+
font-size: 1rem;
|
|
562
|
+
color: var(--success);
|
|
563
|
+
background: rgba(255, 255, 255, 0.05);
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.install-box .cmd {
|
|
567
|
+
padding: 1rem 1.25rem 1rem 0.75rem;
|
|
568
|
+
font-family: 'JetBrains Mono', monospace;
|
|
569
|
+
font-size: 1rem;
|
|
570
|
+
color: var(--paper);
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
/* Footer */
|
|
574
|
+
footer {
|
|
575
|
+
padding: 3rem;
|
|
576
|
+
border-top: 1px solid var(--border);
|
|
577
|
+
text-align: center;
|
|
578
|
+
color: var(--muted);
|
|
579
|
+
font-size: 0.875rem;
|
|
580
|
+
background: var(--paper);
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
footer a {
|
|
584
|
+
color: var(--ink);
|
|
585
|
+
text-decoration: none;
|
|
586
|
+
font-weight: 500;
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
footer a:hover {
|
|
590
|
+
color: var(--accent);
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
/* Responsive */
|
|
594
|
+
@media (max-width: 1024px) {
|
|
595
|
+
.hero {
|
|
596
|
+
grid-template-columns: 1fr;
|
|
597
|
+
text-align: center;
|
|
598
|
+
padding: 7rem 1.5rem 4rem;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.hero-subtitle {
|
|
602
|
+
margin-left: auto;
|
|
603
|
+
margin-right: auto;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
.hero-cta {
|
|
607
|
+
justify-content: center;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.hero-visual {
|
|
611
|
+
max-width: 500px;
|
|
612
|
+
margin: 3rem auto 0;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.features-grid {
|
|
616
|
+
grid-template-columns: repeat(2, 1fr);
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.hiw-content {
|
|
620
|
+
grid-template-columns: 1fr;
|
|
621
|
+
gap: 3rem;
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
@media (max-width: 640px) {
|
|
626
|
+
nav {
|
|
627
|
+
padding: 1rem 1.5rem;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.nav-links {
|
|
631
|
+
display: none;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.features-grid {
|
|
635
|
+
grid-template-columns: 1fr;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.hero h1 {
|
|
639
|
+
font-size: 2.75rem;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.terminal-body {
|
|
643
|
+
font-size: 0.7rem;
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
/* Animations on scroll */
|
|
648
|
+
.reveal {
|
|
649
|
+
opacity: 0;
|
|
650
|
+
transform: translateY(40px);
|
|
651
|
+
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.reveal.visible {
|
|
655
|
+
opacity: 1;
|
|
656
|
+
transform: translateY(0);
|
|
657
|
+
}
|
|
658
|
+
</style>
|
|
659
|
+
</head>
|
|
660
|
+
<body>
|
|
661
|
+
<div class="deco-blob deco-blob-1"></div>
|
|
662
|
+
<div class="deco-blob deco-blob-2"></div>
|
|
663
|
+
|
|
664
|
+
<nav>
|
|
665
|
+
<div class="logo">
|
|
666
|
+
<div class="logo-icon">$</div>
|
|
667
|
+
<span>snip</span>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="nav-links">
|
|
670
|
+
<a href="#features">Features</a>
|
|
671
|
+
<a href="#how-it-works">How it Works</a>
|
|
672
|
+
<a href="#install">Install</a>
|
|
673
|
+
<a href="#" class="nav-cta">Get Started</a>
|
|
674
|
+
</div>
|
|
675
|
+
</nav>
|
|
676
|
+
|
|
677
|
+
<section class="hero">
|
|
678
|
+
<div class="hero-content">
|
|
679
|
+
<div class="hero-badge">CLI Snippet Manager</div>
|
|
680
|
+
<h1>Your terminal's<br><em>memory</em></h1>
|
|
681
|
+
<p class="hero-subtitle">
|
|
682
|
+
Save, search, and run code snippets in milliseconds.
|
|
683
|
+
No context switching. No digging through history.
|
|
684
|
+
Just code, instantly.
|
|
685
|
+
</p>
|
|
686
|
+
<div class="hero-cta">
|
|
687
|
+
<a href="#install" class="btn btn-primary">Install Now</a>
|
|
688
|
+
<a href="#how-it-works" class="btn btn-secondary">See How It Works</a>
|
|
689
|
+
</div>
|
|
690
|
+
</div>
|
|
691
|
+
<div class="hero-visual">
|
|
692
|
+
<div class="terminal-large">
|
|
693
|
+
<div class="terminal-header">
|
|
694
|
+
<div class="terminal-btn red"></div>
|
|
695
|
+
<div class="terminal-btn yellow"></div>
|
|
696
|
+
<div class="terminal-btn green"></div>
|
|
697
|
+
<span class="terminal-title">snip — Terminal</span>
|
|
698
|
+
</div>
|
|
699
|
+
<div class="terminal-body">
|
|
700
|
+
<div class="terminal-line">
|
|
701
|
+
<span class="prompt">$</span>
|
|
702
|
+
<span class="cmd">snip add docker-run</span>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="terminal-line">
|
|
705
|
+
<span class="comment"># Opens editor, saves your snippet</span>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="terminal-line" style="margin-top: 1rem;">
|
|
708
|
+
<span class="prompt">$</span>
|
|
709
|
+
<span class="cmd">snip search docker</span>
|
|
710
|
+
</div>
|
|
711
|
+
<div class="terminal-line">
|
|
712
|
+
<span class="cmd">docker-run</span><span class="tag">docker</span><span class="tag">run</span>
|
|
713
|
+
</div>
|
|
714
|
+
<div class="terminal-line">
|
|
715
|
+
<span class="cmd">docker-build</span><span class="tag">docker</span><span class="tag">build</span>
|
|
716
|
+
</div>
|
|
717
|
+
<div class="terminal-line" style="margin-top: 1rem;">
|
|
718
|
+
<span class="prompt">$</span>
|
|
719
|
+
<span class="cmd">snip run docker-run</span>
|
|
720
|
+
</div>
|
|
721
|
+
<div class="terminal-line">
|
|
722
|
+
<span class="warning">⚠ Preview:</span> <span class="cmd">docker run --rm -it -v "$PWD":/work ...</span>
|
|
723
|
+
</div>
|
|
724
|
+
<div class="terminal-line">
|
|
725
|
+
<span class="success">✓ Running safely...</span>
|
|
726
|
+
</div>
|
|
727
|
+
</div>
|
|
728
|
+
</div>
|
|
729
|
+
</div>
|
|
730
|
+
</section>
|
|
731
|
+
|
|
732
|
+
<section class="features" id="features">
|
|
733
|
+
<div class="section-header">
|
|
734
|
+
<div class="section-label">Features</div>
|
|
735
|
+
<h2>Everything you need to manage snippets</h2>
|
|
736
|
+
</div>
|
|
737
|
+
<div class="features-grid">
|
|
738
|
+
<div class="feature-card reveal">
|
|
739
|
+
<span class="feature-num">01</span>
|
|
740
|
+
<h3>Lightning Fast</h3>
|
|
741
|
+
<p>Add, search, and run snippets in milliseconds. Instant access—no waiting, no lag.</p>
|
|
742
|
+
</div>
|
|
743
|
+
<div class="feature-card reveal">
|
|
744
|
+
<span class="feature-num">02</span>
|
|
745
|
+
<h3>Fuzzy Search</h3>
|
|
746
|
+
<p>Find anything instantly. Searches names, tags, and content with smart ranking.</p>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="feature-card reveal">
|
|
749
|
+
<span class="feature-num">03</span>
|
|
750
|
+
<h3>Safety First</h3>
|
|
751
|
+
<p>Preview before execution. Automatic dangerous command detection keeps you safe.</p>
|
|
752
|
+
</div>
|
|
753
|
+
<div class="feature-card reveal">
|
|
754
|
+
<span class="feature-num">04</span>
|
|
755
|
+
<h3>Interactive TUI</h3>
|
|
756
|
+
<p>Keyboard-first terminal UI. Browse, filter, and run without leaving your terminal.</p>
|
|
757
|
+
</div>
|
|
758
|
+
<div class="feature-card reveal">
|
|
759
|
+
<span class="feature-num">05</span>
|
|
760
|
+
<h3>Flexible Storage</h3>
|
|
761
|
+
<p>JSON for simplicity, SQLite for scale. Your snippets, your storage choice.</p>
|
|
762
|
+
</div>
|
|
763
|
+
<div class="feature-card reveal">
|
|
764
|
+
<span class="feature-num">06</span>
|
|
765
|
+
<h3>Gist Sync</h3>
|
|
766
|
+
<p>Backup and share via GitHub Gists. Access your library anywhere, anytime.</p>
|
|
767
|
+
</div>
|
|
768
|
+
</div>
|
|
769
|
+
</section>
|
|
770
|
+
|
|
771
|
+
<section class="how-it-works" id="how-it-works">
|
|
772
|
+
<div class="hiw-content">
|
|
773
|
+
<div class="hiw-left">
|
|
774
|
+
<h2>From zero to<br><em>muscle memory</em></h2>
|
|
775
|
+
<p>Three steps to building your personal snippet library that lives in your terminal.</p>
|
|
776
|
+
</div>
|
|
777
|
+
<div class="steps">
|
|
778
|
+
<div class="step reveal">
|
|
779
|
+
<div class="step-num">1</div>
|
|
780
|
+
<div class="step-content">
|
|
781
|
+
<h3>Capture</h3>
|
|
782
|
+
<p>Save snippets from stdin or your editor. Add tags and language metadata.</p>
|
|
783
|
+
<div class="step-cmd">echo 'npm run dev' | snip add dev</div>
|
|
784
|
+
</div>
|
|
785
|
+
</div>
|
|
786
|
+
<div class="step reveal">
|
|
787
|
+
<div class="step-num">2</div>
|
|
788
|
+
<div class="step-content">
|
|
789
|
+
<h3>Find</h3>
|
|
790
|
+
<p>Fuzzy search across all snippets. Or use the TUI with keyboard shortcuts.</p>
|
|
791
|
+
<div class="step-cmd">snip search deploy</div>
|
|
792
|
+
</div>
|
|
793
|
+
</div>
|
|
794
|
+
<div class="step reveal">
|
|
795
|
+
<div class="step-num">3</div>
|
|
796
|
+
<div class="step-content">
|
|
797
|
+
<h3>Run</h3>
|
|
798
|
+
<p>Execute any snippet safely. Preview first, confirm, then run.</p>
|
|
799
|
+
<div class="step-cmd">snip run deploy-prod</div>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
803
|
+
</div>
|
|
804
|
+
</section>
|
|
805
|
+
|
|
806
|
+
<section class="cta-section" id="install">
|
|
807
|
+
<h2>Ready to <em>snip?</em></h2>
|
|
808
|
+
<p>Install globally via npm and start building your library in seconds.</p>
|
|
809
|
+
<div class="install-box">
|
|
810
|
+
<span class="dollar">$</span>
|
|
811
|
+
<span class="cmd">npm install -g snip-cli-manager</span>
|
|
812
|
+
</div>
|
|
813
|
+
</section>
|
|
814
|
+
|
|
815
|
+
<footer>
|
|
816
|
+
<p>Built for developers who live in the terminal.</p>
|
|
817
|
+
<p style="margin-top: 0.5rem;">MIT License • <a href="#">Documentation</a> • <a href="#">GitHub</a></p>
|
|
818
|
+
</footer>
|
|
819
|
+
|
|
820
|
+
<script>
|
|
821
|
+
// Scroll reveal animations
|
|
822
|
+
const observer = new IntersectionObserver((entries) => {
|
|
823
|
+
entries.forEach(entry => {
|
|
824
|
+
if (entry.isIntersecting) {
|
|
825
|
+
entry.target.classList.add('visible');
|
|
826
|
+
}
|
|
827
|
+
});
|
|
828
|
+
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
829
|
+
|
|
830
|
+
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
831
|
+
</script>
|
|
832
|
+
</body>
|
|
833
|
+
</html>
|