-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
465 lines (438 loc) · 22.4 KB
/
index.html
File metadata and controls
465 lines (438 loc) · 22.4 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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
<!doctype html>
<html lang="en" data-lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SyncNos · Open source, local-first tools</title>
<meta
name="description"
content="SyncNos builds open source, local-first tools for capturing AI chats, web articles, and video transcripts."
/>
<meta property="og:type" content="website" />
<meta property="og:title" content="SyncNos · Open source, local-first tools" />
<meta
property="og:description"
content="SyncNos builds open source, local-first tools for capturing AI chats, web articles, and video transcripts."
/>
<meta property="og:image" content="https://syncnos.github.io/assets/icon-128.png" />
<meta property="og:url" content="https://syncnos.github.io/" />
<meta name="twitter:card" content="summary" />
<link rel="icon" href="./assets/icon-128.png" />
<link rel="stylesheet" href="./assets/site.css" />
<!--
Design lock (seed=42): do not change the architecture choices in this landing page
unless a new feature is opened. Source of truth: /assets/design-lock.json
-->
</head>
<body>
<header class="sn-nav" role="banner">
<div class="container sn-nav-inner">
<a class="brand" href="./" aria-label="SyncNos home">
<div class="brand-mark" aria-hidden="true">
<img src="./assets/icon-128.png" alt="" />
</div>
<div style="min-width: 0">
<div class="brand-title">SyncNos</div>
<div class="brand-subtitle">
<span class="lang-en">Open source · Local-first</span>
<span class="lang-zh">开源 · 本地优先</span>
</div>
</div>
</a>
<nav class="nav-links" aria-label="Primary">
<a class="nav-link" href="./webclipper/">
<span class="lang-en">WebClipper</span>
<span class="lang-zh">WebClipper</span>
</a>
<a class="nav-link" href="./cli/">
<span class="lang-en">CLI</span>
<span class="lang-zh">CLI</span>
</a>
<a class="nav-link" href="./health/">
<span class="lang-en">Health</span>
<span class="lang-zh">Health</span>
</a>
<a class="nav-link" href="https://github.com/SyncNos" target="_blank" rel="noreferrer">
<span class="lang-en">GitHub</span>
<span class="lang-zh">GitHub</span>
</a>
<div class="lang-pill" role="group" aria-label="Language">
<button type="button" data-set-lang="en" aria-pressed="false">EN</button>
<button type="button" data-set-lang="zh" aria-pressed="false">中文</button>
</div>
</nav>
</div>
</header>
<main class="sn-main">
<section class="sn-section hero sn-attention" id="attention">
<div class="container hero-grid">
<div class="hero-copy">
<h1>
<span class="lang-en"
>Capture what you read<span class="inline-type-image" aria-hidden="true"
><img src="https://picsum.photos/seed/syncnos-inline/320/200" alt="" /></span
>, watch, and chat — locally first.</span
>
<span class="lang-zh"
>把读过的<span class="inline-type-image" aria-hidden="true"
><img src="https://picsum.photos/seed/syncnos-inline/320/200" alt="" /></span
>、看过的、聊过的，都沉淀在本地。</span
>
</h1>
<p class="lede">
<span class="lang-en"
>SyncNos builds open source, local-first tools for capturing AI chats, web articles, and video transcripts—then
syncing or exporting on your terms.</span
>
<span class="lang-zh"
>SyncNos 为“沉淀”而生：开源、本地优先，采集 AI 对话、网页长文与视频字幕，再由你决定同步或导出。</span
>
</p>
<div class="hero-actions">
<a class="sn-btn sn-btn--filled" href="https://github.com/SyncNos" target="_blank" rel="noreferrer">
<span class="lang-en">Explore on GitHub</span>
<span class="lang-zh">去 GitHub 看</span>
</a>
<a class="sn-btn sn-btn--ghost" href="./webclipper/">
<span class="lang-en">Start with WebClipper</span>
<span class="lang-zh">从 WebClipper 开始</span>
</a>
</div>
</div>
<div class="hero-media" aria-label="Hero image">
<div class="hero-media-frame">
<img
class="hero-media-bg"
src="https://picsum.photos/seed/syncnos-editorial/1920/1400"
alt="Atmospheric image"
/>
<div class="hero-media-proof">
<img class="shot" src="./assets/popup-screenshots.png" alt="WebClipper popup screenshot" />
</div>
</div>
</div>
</div>
</section>
<section class="sn-section sn-interest" id="interest" aria-label="Interest">
<div class="container">
<h2 class="section-title">
<span class="lang-en">A small family of tools, built for capture.</span>
<span class="lang-zh">一组小而坚实的工具，只为沉淀。</span>
</h2>
<p class="muted" style="margin: 0 0 18px; max-width: 78ch">
<span class="lang-en"
>WebClipper is the main product today. Others are early previews, aligned to the same local-first workflow.</span
>
<span class="lang-zh">当前以 WebClipper 为主，其它产品先作为预告入口，但坚持同一套本地优先的工作流。</span>
</p>
<div class="sn-bento" aria-label="Key features">
<article class="bento-card bento-a" aria-label="WebClipper">
<div class="bento-media">
<img class="bento-img" src="./assets/popup-screenshots.png" alt="WebClipper popup screenshot" />
</div>
<div class="bento-body">
<div class="bento-title">
<span class="lang-en">WebClipper, as your local fact source.</span>
<span class="lang-zh">WebClipper，作为你的本地事实源。</span>
</div>
<div class="bento-desc muted">
<span class="lang-en">Capture AI chats, long articles, and video transcripts in the background.</span>
<span class="lang-zh">后台采集 AI 对话、网页长文与视频字幕。</span>
</div>
<div class="bento-actions">
<a class="sn-btn sn-btn--filled" href="./webclipper/">
<span class="lang-en">WebClipper</span>
<span class="lang-zh">WebClipper</span>
</a>
<a class="sn-btn" href="https://github.com/SyncNos/SyncNos-Webclipper" target="_blank" rel="noreferrer">
<span class="lang-en">GitHub</span>
<span class="lang-zh">GitHub</span>
</a>
</div>
</div>
</article>
<article class="bento-card bento-b" aria-label="Ownership">
<div class="bento-body">
<div class="bento-title">
<span class="lang-en">Local-first storage.</span>
<span class="lang-zh">先落本地。</span>
</div>
<div class="bento-desc muted">
<span class="lang-en">Your data lands in the browser (IndexedDB) first—before any sync.</span>
<span class="lang-zh">数据先落浏览器（IndexedDB），再谈同步。</span>
</div>
</div>
<div class="bento-media">
<img class="bento-img" src="https://picsum.photos/seed/syncnos-local/1200/800" alt="Abstract image" />
</div>
</article>
<article class="bento-card bento-c" aria-label="Export">
<div class="bento-body">
<div class="bento-title">
<span class="lang-en">Sync or export on your terms.</span>
<span class="lang-zh">按你的方式同步或导出。</span>
</div>
<div class="bento-desc muted">
<span class="lang-en">Notion, Obsidian, Feishu—or Markdown/Zip exports when you need it.</span>
<span class="lang-zh">Notion / Obsidian / 飞书，或随时导出 Markdown / Zip。</span>
</div>
</div>
<div class="bento-media">
<img class="bento-img" src="https://picsum.photos/seed/syncnos-export/1200/800" alt="Abstract image" />
</div>
</article>
<article class="bento-card bento-d" aria-label="Auditable">
<div class="bento-body">
<div class="bento-title">
<span class="lang-en">Open source that feels practical.</span>
<span class="lang-zh">开源，但不空泛。</span>
</div>
<div class="bento-desc muted">
<span class="lang-en">Trust comes from inspectable behavior: clear storage, clear sync, clear exports.</span>
<span class="lang-zh">信任来自可验证：清晰的存储、清晰的同步、清晰的导出。</span>
</div>
<div class="bento-kpis" aria-label="Key claims">
<div class="bento-kpi">
<div class="k">
<span class="lang-en">DATA OWNERSHIP</span>
<span class="lang-zh">数据归属</span>
</div>
<div class="v">
<span class="lang-en">Stored locally first.</span>
<span class="lang-zh">先落本地。</span>
</div>
</div>
<div class="bento-kpi">
<div class="k">
<span class="lang-en">NO LOCK-IN</span>
<span class="lang-zh">不绑架</span>
</div>
<div class="v">
<span class="lang-en">Export-friendly paths.</span>
<span class="lang-zh">导出路径清晰。</span>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="sn-marquee" aria-label="Principles">
<div class="marquee-track" aria-label="Scrolling marquee">
<div class="marquee-group">
<span class="marquee-item">Local-first</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Open source</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Exportable</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Auditable</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Incremental sync</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">No lock-in</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Browser-first</span>
<span class="marquee-dot" aria-hidden="true"></span>
</div>
<div class="marquee-group" aria-hidden="true">
<span class="marquee-item">Local-first</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Open source</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Exportable</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Auditable</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Incremental sync</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">No lock-in</span>
<span class="marquee-dot" aria-hidden="true"></span>
<span class="marquee-item">Browser-first</span>
<span class="marquee-dot" aria-hidden="true"></span>
</div>
</div>
</div>
<div class="sn-accordions" aria-label="Deep dive">
<div class="section-title" style="margin: 26px 0 14px">
<span class="lang-en">Four pieces that make it feel inevitable.</span>
<span class="lang-zh">四个细节，让它更像“必然”。</span>
</div>
<div class="h-accordions" data-active-index="0">
<div class="ha-panel">
<button class="ha-trigger" type="button">
<span class="lang-en">Capture</span>
<span class="lang-zh">采集</span>
</button>
<div class="ha-content">
<div class="ha-text muted">
<span class="lang-en">AI chats, long articles, and transcripts—captured quietly in the background.</span>
<span class="lang-zh">AI 对话、网页长文与字幕，在后台安静地采集。</span>
</div>
<img class="ha-img" src="https://picsum.photos/seed/syncnos-capture/1400/900" alt="Abstract image" />
</div>
</div>
<div class="ha-panel">
<button class="ha-trigger" type="button">
<span class="lang-en">Normalize</span>
<span class="lang-zh">规范化</span>
</button>
<div class="ha-content">
<div class="ha-text muted">
<span class="lang-en">A consistent internal format makes search and export predictable.</span>
<span class="lang-zh">统一的内部结构，让搜索与导出更可预期。</span>
</div>
<img class="ha-img" src="https://picsum.photos/seed/syncnos-normalize/1400/900" alt="Abstract image" />
</div>
</div>
<div class="ha-panel">
<button class="ha-trigger" type="button">
<span class="lang-en">Sync</span>
<span class="lang-zh">同步</span>
</button>
<div class="ha-content">
<div class="ha-text muted">
<span class="lang-en">Incremental sync keeps the flow clean—no duplicates, no missing gaps.</span>
<span class="lang-zh">增量同步保持干净：不重复，也不遗漏。</span>
</div>
<img class="ha-img" src="https://picsum.photos/seed/syncnos-sync/1400/900" alt="Abstract image" />
</div>
</div>
<div class="ha-panel">
<button class="ha-trigger" type="button">
<span class="lang-en">Export</span>
<span class="lang-zh">导出</span>
</button>
<div class="ha-content">
<div class="ha-text muted">
<span class="lang-en">Markdown/Zip exports stay simple, so your archive stays yours.</span>
<span class="lang-zh">Markdown / Zip 保持简单，你的归档也就更像“你的”。</span>
</div>
<img class="ha-img" src="https://picsum.photos/seed/syncnos-archive/1400/900" alt="Abstract image" />
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sn-section sn-desire" id="desire">
<div class="container sn-pin-split" data-motion="pin-split">
<div class="pin-left">
<h2 class="section-title">
<span class="lang-en">Show the workflow, not the claim.</span>
<span class="lang-zh">给你看流程，而不是口号。</span>
</h2>
<p class="muted" style="margin: 0; max-width: 68ch">
<span class="lang-en"
>This section becomes a scroll-driven story: capture, normalize, sync, export—one step at a time.</span
>
<span class="lang-zh">这里会变成一段滚动叙事：采集、规范化、同步、导出，一步一步展开。</span>
</p>
<div class="hero-actions" style="margin-top: 16px">
<a class="sn-btn sn-btn--filled" href="./webclipper/">
<span class="lang-en">See WebClipper</span>
<span class="lang-zh">看看 WebClipper</span>
</a>
</div>
</div>
<div class="pin-right" aria-label="Scroll gallery">
<div class="pin-gallery">
<figure class="gallery-item">
<div class="gallery-media">
<img class="gallery-img" src="./assets/setting-screenshots.png" alt="WebClipper settings screenshot" />
</div>
<figcaption class="gallery-cap muted">
<span class="lang-en">Start with local storage. Decide sync later.</span>
<span class="lang-zh">先落本地，再决定同步。</span>
</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-media">
<img class="gallery-img" src="https://picsum.photos/seed/syncnos-step-1/1600/1000" alt="Abstract image" />
</div>
<figcaption class="gallery-cap muted">
<span class="lang-en">Capture quietly in the background.</span>
<span class="lang-zh">在后台安静采集。</span>
</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-media">
<img class="gallery-img" src="./assets/popup-screenshots.png" alt="WebClipper popup screenshot" />
</div>
<figcaption class="gallery-cap muted">
<span class="lang-en">Stay inspectable. Stay auditable.</span>
<span class="lang-zh">可审计，可验证。</span>
</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-media">
<img class="gallery-img" src="https://picsum.photos/seed/syncnos-step-2/1600/1000" alt="Abstract image" />
</div>
<figcaption class="gallery-cap muted">
<span class="lang-en">Normalize to keep export predictable.</span>
<span class="lang-zh">规范化，让导出更可预期。</span>
</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-media">
<img class="gallery-img" src="https://picsum.photos/seed/syncnos-step-3/1600/1000" alt="Abstract image" />
</div>
<figcaption class="gallery-cap muted">
<span class="lang-en">Sync incrementally—avoid duplicates.</span>
<span class="lang-zh">增量同步，不重复。</span>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="sn-section sn-action" id="action">
<div class="container">
<div class="card" style="padding: 22px; display: grid; gap: 10px; align-items: start">
<div style="font-size: 18px; font-weight: 950; letter-spacing: -0.01em">
<span class="lang-en">Start from the repo. Verify everything.</span>
<span class="lang-zh">从仓库开始，把一切都看清。</span>
</div>
<div class="muted" style="max-width: 76ch">
<span class="lang-en">SyncNos is open source by default. Audit the code, then decide how you want to use it.</span>
<span class="lang-zh">SyncNos 天生开源：你先审计代码，再决定如何使用。</span>
</div>
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px">
<a class="sn-btn sn-btn--filled" href="https://github.com/SyncNos" target="_blank" rel="noreferrer">
<span class="lang-en">Open GitHub</span>
<span class="lang-zh">打开 GitHub</span>
</a>
<a class="sn-btn" href="./webclipper/">
<span class="lang-en">WebClipper</span>
<span class="lang-zh">WebClipper</span>
</a>
</div>
</div>
</div>
<footer class="footer" role="contentinfo">
<div class="container footer-inner">
<div class="brand" aria-label="Brand footer">
<div class="brand-mark" aria-hidden="true" style="width: 24px; height: 24px">
<img src="./assets/icon-128.png" alt="" />
</div>
<div>
<div class="brand-title" style="font-size: 13px">SyncNos</div>
<div class="brand-subtitle">
<span class="lang-en">Open source tools for knowledge capture.</span>
<span class="lang-zh">为知识沉淀而生的开源工具。</span>
</div>
</div>
</div>
<div class="fineprint">
<span class="lang-en">SyncNos is open source. Verify everything on GitHub.</span>
<span class="lang-zh">SyncNos 是开源项目：欢迎在 GitHub 上审计与验证。</span>
</div>
</div>
</footer>
</section>
</main>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
<script defer src="./assets/motion.js"></script>
<script defer src="./assets/site.js"></script>
</body>
</html>