-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathworkspace.html
More file actions
628 lines (590 loc) · 46.4 KB
/
Copy pathworkspace.html
File metadata and controls
628 lines (590 loc) · 46.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
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NODUS Workspace — Your local-first office, in your browser</title>
<meta name="description" content="Documents, spreadsheets, PDFs, web clips and notes — all local, no cloud, no account. Part of the NODUS ecosystem. Now on the Chrome Web Store.">
<link rel="canonical" href="https://nodus-ai.app/workspace" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%230e1117'/%3E%3Ccircle cx='16' cy='16' r='9' fill='%23facc15'/%3E%3Ccircle cx='16' cy='16' r='4' fill='%230e1117'/%3E%3C/svg%3E">
<meta property="og:type" content="website">
<meta property="og:title" content="NODUS Workspace — your local-first office, in your browser">
<meta property="og:description" content="Documents, spreadsheets, PDFs, web clips and notes — all local, no cloud, no account. Now on Chrome.">
<meta property="og:url" content="https://nodus-ai.app/workspace">
<meta property="og:image" content="https://nodus-ai.app/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<style>
:root{
--bg:#0b0e14; --bg-soft:#11151d; --card:#131720;
--text:#e2e8f0; --sub:#94a3b8; --muted:#64748b; --faint:#475569;
--line:#1e2736; --line2:#2d3748;
--accent:#8b5cf6; /* Workspace brand color — distinct from the other products */
--accent-soft:rgba(139,92,246,.14);
--ok:#22c55e;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);
font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.6;
-webkit-font-smoothing:antialiased}
a{color:inherit}
.container{max-width:1080px;margin:0 auto;padding:0 24px}
/* ── nav ── */
nav{position:sticky;top:0;z-index:100;background:rgba(11,14,20,.82);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1080px;margin:0 auto;height:60px;padding:0 24px;display:flex;align-items:center;gap:16px}
.nav-logo{font-weight:900;font-size:20px;text-decoration:none;color:var(--text);letter-spacing:-.5px}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-link{font-size:14px;color:var(--sub);text-decoration:none;transition:color .15s}
.nav-link:hover{color:var(--text)}
.nav-link.highlight{color:#fff;background:var(--accent);padding:7px 18px;border-radius:8px;font-weight:700}
.nav-back{font-size:13px;color:var(--muted);text-decoration:none}
.nav-back:hover{color:var(--text)}
@media(max-width:600px){.nav-links{display:none}}
/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
padding:13px 24px;border-radius:10px;text-decoration:none;transition:transform .15s,filter .2s,border-color .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost{border:1px solid var(--line2);color:var(--sub)}
.btn-ghost:hover{color:var(--text);border-color:var(--accent)}
.btn-soon{position:relative;background:var(--accent-soft);border:1px solid rgba(139,92,246,.45);color:var(--text);cursor:default}
.btn-soon img{display:block}
.btn-soon::after{content:attr(data-soon);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);
background:#0e1117;color:var(--text);border:1px solid var(--line2);font-size:11.5px;font-weight:700;letter-spacing:.3px;
padding:5px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s}
.btn-soon::before{content:'';position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
border:5px solid transparent;border-top-color:var(--line2);opacity:0;transition:opacity .16s}
.btn-soon:hover::after,.btn-soon:hover::before{opacity:1}
/* ── badges ── */
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
padding:6px 13px;border-radius:99px;border:1px solid rgba(139,92,246,.4);
color:var(--accent);background:var(--accent-soft)}
.badge .dot{width:7px;height:7px;border-radius:99px;background:var(--accent)}
/* ── hero ── */
.hero{text-align:center;padding:56px 0 44px}
.hero-top{max-width:820px;margin:0 auto}
.hero-bottom{max-width:640px;margin:20px auto 0}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:900;letter-spacing:-1.3px;line-height:1.07;margin:18px auto 0;max-width:800px}
.hero h1 .accent{color:var(--accent)}
.hero .sub{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--sub);max-width:620px;margin:18px auto 0}
.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
/* ── gif placeholder (replace each with <img src="…gif">) ── */
.gifholder{position:relative;aspect-ratio:16/9;width:100%;border:1.5px dashed var(--line2);
border-radius:14px;background:linear-gradient(180deg,#0e1219,#0b0e14);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--faint)}
.gifholder .play{width:54px;height:54px;border-radius:99px;border:1.5px solid var(--line2);
display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--accent)}
.gifholder .lbl{font-size:13px;font-weight:700;color:var(--sub);font-family:ui-monospace,Menlo,Consolas,monospace}
.gifholder .note{font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
.hero-media{max-width:1000px;margin:30px auto 0}
/* ── sections ── */
.section{padding:54px 0}
.section-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:2px;
text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-title{text-align:center;font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;
letter-spacing:-.5px;max-width:760px;margin:0 auto}
.section-sub{text-align:center;color:var(--sub);max-width:680px;margin:14px auto 0;font-size:15.5px}
/* ── why / problem ── */
.why{max-width:820px;margin:0 auto;text-align:center}
.frag{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0}
.frag span{font-size:13.5px;color:var(--sub);background:var(--bg-soft);border:1px solid var(--line2);border-radius:8px;padding:8px 14px}
.why .punch{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:800;color:var(--text);line-height:1.4;margin-top:6px}
.why .punch b{color:var(--accent)}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:760px;margin:36px auto 0}
.stat{flex:1 1 110px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 10px}
.stat .n{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:900;color:var(--accent);line-height:1.1}
.stat .l{font-size:12px;color:var(--sub);margin-top:4px;text-transform:uppercase;letter-spacing:.6px}
/* ── typical workflow ── */
.flow{max-width:720px;margin:36px auto 0;display:flex;flex-direction:column;gap:8px}
.flow-step{display:flex;align-items:center;gap:16px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.flow-step .n{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.flow-step .t{font-size:15.5px;color:var(--sub);line-height:1.5}
.flow-step .t b{color:var(--text)}
.flow-tail{text-align:center;color:#fb923c;font-weight:700;font-size:16px;margin-top:20px}
/* ── swap table ── */
.swap{max-width:640px;margin:34px auto 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.swap-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.swap-row+.swap-row{border-top:1px solid var(--line)}
.swap-cell{padding:15px 18px;font-size:15px;display:flex;align-items:center}
.swap-cell.old{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.swap-cell.new{color:var(--text);font-weight:700;background:var(--accent-soft);border-left:1px solid var(--line)}
.swap-cell.new::before{content:"\2192 ";color:var(--accent);font-weight:800;margin-right:6px}
/* ── panel mockup diagram ── */
.pmock{max-width:620px;margin:30px auto 0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr 200px;min-height:240px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.pmock .site{background:linear-gradient(180deg,#0e1219,#0b0e14);padding:20px;color:var(--faint);font-size:12px}
.pmock .site .bar{height:8px;width:100%;border-radius:99px;background:var(--line2);margin-bottom:11px}
.pmock .site .bar.s{width:55%}.pmock .site .bar.m{width:82%}
.pmock .ws{background:var(--card);border-left:1px solid var(--accent);padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.pmock .ws .h{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.pmock .ws .it{font-size:13px;color:var(--text);display:flex;align-items:center;gap:8px}
@media(max-width:560px){.pmock{grid-template-columns:1fr}.pmock .ws{border-left:none;border-top:1px solid var(--accent)}}
/* ── manifesto ── */
.manifesto{text-align:center;padding:72px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:24px}
.manifesto h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:900;letter-spacing:-1px;max-width:820px;margin:0 auto;line-height:1.12}
.manifesto h2 .accent{color:var(--accent)}
.manifesto .words{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:22px auto 0;max-width:600px;color:var(--sub);font-size:16px;font-weight:600}
.manifesto p{color:var(--sub);font-size:16px;max-width:600px;margin:20px auto 0;line-height:1.6}
/* ── what it is ── */
.whatis{background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:38px 32px;max-width:820px;margin:0 auto;text-align:center;font-size:clamp(1.05rem,2vw,1.25rem);
color:var(--text);line-height:1.65}
.whatis b{color:var(--accent)}
/* ── features ── */
.features{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px}
@media(max-width:820px){.features{grid-template-columns:1fr}}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;overflow:hidden}
.feature h3{font-size:19px;font-weight:800;margin-bottom:6px}
.feature p{font-size:17px;color:var(--sub);margin-bottom:16px;line-height:1.6}
.feature .gifholder{aspect-ratio:16/10}
/* ── feature demos (videos) ── */
.demo{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0b0e14;margin-top:14px;line-height:0}
.demo video{display:block;width:100%;height:auto}
.hero-media .demo{margin-top:0;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.pillar{margin-top:46px}
.pillar-head{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-weight:800;
letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pillar-sub{text-align:center;color:#fb923c;font-weight:600;font-size:16.5px;max-width:620px;margin:0 auto 26px;line-height:1.6}
.pillar-head .ln{flex:1;height:1px;background:var(--line);max-width:90px}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.feat-grid.one{max-width:860px;margin:0 auto;grid-template-columns:1fr}
.feat-grid:not(.one) > .feature:last-child:nth-child(odd){grid-column:1 / -1;max-width:calc((100% - 22px) / 2);margin-inline:auto}
@media(max-width:760px){.feat-grid{grid-template-columns:1fr}.feat-grid:not(.one) > .feature:last-child:nth-child(odd){max-width:none}}
/* ── panel vs full-screen modes ── */
.modes{display:flex;align-items:stretch;justify-content:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.mode{flex:1;min-width:240px;max-width:340px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}
.mode-ico{font-size:30px;margin-bottom:10px}
.mode-t{font-weight:800;font-size:16px;margin-bottom:6px}
.mode-d{font-size:13px;color:var(--muted)}
.mode-arrow{display:flex;align-items:center;color:var(--accent);font-size:22px;font-weight:800}
@media(max-width:560px){.mode-arrow{transform:rotate(90deg)}}
/* ── how it works (3 steps) ── */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media(max-width:720px){.steps3{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px}
.step-n{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-weight:800;
display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:14px}
.step h3{font-size:16px;font-weight:800;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--muted)}
/* ── pricing ── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px auto 0;max-width:820px}
@media(max-width:720px){.price-grid{grid-template-columns:1fr}}
.price-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 22px;text-align:center}
.price-card.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 18px 50px rgba(139,92,246,.18)}
.price-badge{position:absolute;top:-1px;right:18px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;
padding:4px 10px;border-radius:0 0 7px 7px;letter-spacing:.5px}
.price-name{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.price-amt{font-size:34px;font-weight:900;color:var(--text);line-height:1}
.price-amt span{font-size:14px;font-weight:600;color:var(--muted)}
.price-note{font-size:12px;color:var(--ok);font-weight:600;margin:7px 0 20px}
.price-cta{width:100%;justify-content:center}
.price-trust{text-align:center;font-size:12px;color:var(--faint);margin-top:18px}
/* ── capability chips on feature cards ── */
.caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.cap{font-size:12.5px;color:var(--sub);background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.cap.pro{color:var(--accent);border-color:rgba(139,92,246,.4);font-weight:600}
.feat-note{font-size:13px;color:var(--sub);margin-top:12px;font-style:italic;line-height:1.55}
/* ── who it's for ── */
.who{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:36px}
@media(max-width:680px){.who{grid-template-columns:1fr}}
.who-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px}
.who-card .ico{font-size:24px;margin-bottom:10px}
.who-card h3{font-size:16px;font-weight:800;margin-bottom:5px}
.who-card p{font-size:13.5px;color:var(--muted)}
/* ── faq ── */
.faq{max-width:760px;margin:30px auto 0}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px}
.faq summary{padding:16px 20px;font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:700;flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq details p{padding:0 20px 16px;font-size:14px;color:var(--muted);line-height:1.6}
/* ── privacy ── */
.privacy{background:linear-gradient(180deg,#120e1d,#0b0e14);border:1px solid rgba(139,92,246,.2);
border-radius:18px;padding:46px 32px;text-align:center}
.privacy h2{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:900;letter-spacing:-.5px}
.privacy .lead{color:var(--sub);max-width:560px;margin:12px auto 0}
.priv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:760px){.priv-grid{grid-template-columns:1fr 1fr}}
.priv-item{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:16px 12px}
.priv-item .ico{font-size:22px;margin-bottom:8px}
.priv-item .t{font-size:13px;font-weight:700;color:var(--text);line-height:1.4}
/* ── pro table ── */
.pro-line{text-align:center;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;max-width:680px;margin:0 auto 8px}
.pro-line b{color:var(--accent)}
.cmp{max-width:760px;margin:30px auto 0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cmp-row{display:grid;grid-template-columns:1fr 1fr}
.cmp-head{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.cmp-head .free{color:var(--sub)}
.cmp-head .pro{color:var(--accent)}
.cmp-cell{padding:13px 18px;font-size:14px;color:var(--sub);border-top:1px solid var(--line)}
.cmp-cell.pro{color:var(--text);background:var(--accent-soft)}
.cmp-row:first-child .cmp-cell{border-top:none}
.golden{text-align:center;color:var(--muted);font-size:14px;max-width:640px;margin:22px auto 0;font-style:italic}
.golden b{color:var(--text);font-style:normal}
/* ── final cta ── */
.final{text-align:center;padding:64px 0}
.final h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;letter-spacing:-.5px;margin:18px 0 26px}
/* ── footer ── */
footer{border-top:1px solid var(--line);padding:34px 24px;text-align:center;
font-size:13px;color:var(--muted);margin-top:40px}
footer a{color:var(--sub);margin:0 8px;text-decoration:none}
footer a:hover{color:var(--text)}
</style>
</head>
<body>
<nav>
<div class="nav-inner">
<a href="https://nodus-ai.app" class="nav-logo">NODUS <span>Workspace</span></a>
<div class="nav-links">
<a href="#features" class="nav-link">Features</a>
<a href="#privacy" class="nav-link">Privacy</a>
<a href="#pro" class="nav-link">PRO</a>
<a href="https://chromewebstore.google.com/detail/nodus-workspace/igjpedkogacopanobbjbiobnplpklcim" target="_blank" rel="noopener" class="nav-link highlight">Install</a>
</div>
<a href="https://nodus-ai.app" class="nav-back">← Back to NODUS</a>
</div>
</nav>
<div class="container">
<!-- ── 1. HERO ── -->
<header class="hero">
<div class="hero-top">
<span class="badge"><span class="dot"></span> Now on Chrome & Firefox</span>
<h1>Turn your browser into <span class="accent">your workspace</span>.</h1>
</div>
<div class="hero-media">
<div class="demo">
<video poster="/ws-fullscreen-poster.jpg" data-src="/ws-fullscreen.mp4" muted loop playsinline preload="none" width="1200" height="588" aria-label="A document popped out of the side panel into a full-screen tab, beside the live panel"></video>
</div>
</div>
<div class="hero-bottom">
<p class="sub">Documents, spreadsheets, PDFs, web clips and notes, in your browser's side panel. Everything on your device — no cloud, no account.</p>
<div class="hero-btns">
<a class="btn btn-primary" href="https://chromewebstore.google.com/detail/nodus-workspace/igjpedkogacopanobbjbiobnplpklcim" target="_blank" rel="noopener"><img src="/chrome-icon.svg" width="18" height="18" alt=""> Install on Chrome</a>
<a class="btn btn-ghost" href="https://addons.mozilla.org/firefox/addon/nodus-workspace/" target="_blank" rel="noopener"><img src="/firefox-icon.svg" width="18" height="18" alt=""> Get it on Firefox</a>
<a href="#features" class="btn btn-ghost">See what's inside ↓</a>
</div>
<div style="margin-top:22px;display:flex;justify-content:center;"><a href="https://www.producthunt.com/products/nodus-workspace?embed=true&utm_source=badge-featured&utm_medium=badge&utm_campaign=badge-nodus-workspace" target="_blank" rel="noopener noreferrer"><img alt="NODUS Workspace - Your local-first productivity workspace | Product Hunt" width="250" height="54" loading="lazy" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1181992&theme=light&t=1782833178993"></a></div>
</div>
</header>
<!-- ── WHY ── -->
<section class="section" id="why">
<div class="section-label">Why another workspace?</div>
<h2 class="section-title">Your work is scattered across tabs.</h2>
<div class="why">
<div class="frag">
<span>A tab for writing</span><span>A tab for PDFs</span><span>A tab for notes</span><span>A tab for files</span><span>A tab for web clipping</span>
</div>
<p class="punch">NODUS Workspace brings it all into <b>one local-first sidebar that follows you everywhere</b> — so you stop tab-hopping and <b>stay in context</b>.</p>
</div>
<div class="stats">
<div class="stat"><div class="n">7</div><div class="l">modules</div></div>
<div class="stat"><div class="n">100%</div><div class="l">local</div></div>
<div class="stat"><div class="n">0</div><div class="l">accounts</div></div>
<div class="stat"><div class="n">0</div><div class="l">cloud storage</div></div>
<div class="stat"><div class="n">✓</div><div class="l">works offline</div></div>
</div>
</section>
<!-- ── 2. WHAT IT IS ── -->
<section class="section">
<div class="whatis">
NODUS Workspace turns your browser's <b>side panel</b> into a small, private office that sits right beside whatever you're reading. It's not just storage: you get a real <b>document editor</b> (headings, formatting, tables, images), a <b>spreadsheet</b> with formulas and totals, and a built-in <b>PDF reader</b>, so you can write, calculate and read <b>without leaving the tab you're on</b>. Around them, one place to keep your <b>web clips</b>, your <b>notes</b> and checklists, and all your <b>files</b> in folders. Everything is created and saved <b>on your device</b>: no cloud, no account, and it works offline.
</div>
</section>
<!-- ── 3. FEATURES ── -->
<section class="section" id="features">
<div class="section-label">What's inside</div>
<h2 class="section-title">A real workspace, not just storage.</h2>
<p class="section-sub">Create. Read. Calculate. Clip. Organize. <b style="color:var(--text)">Without changing tabs.</b></p>
<!-- Capture -->
<div class="pillar">
<div class="pillar-head"><span class="ln"></span> Capture <span class="ln"></span></div>
<p class="pillar-sub">Grab anything from the web and keep it, with a link back to where it came from.</p>
<div class="feat-grid one">
<div class="feature">
<h3>Clip the web — text or image</h3>
<p>Select text or an image on any page and send it to Workspace. Each clip keeps the link back to its source, so it's ready to drop into a document or a note later.</p>
<div class="caps"><span class="cap">Text clips</span><span class="cap">Image clips</span><span class="cap">Source link kept</span><span class="cap">Reuse in docs & notes</span></div>
<div class="demo"><video poster="/ws-clips-poster.jpg" data-src="/ws-clips.mp4" muted loop playsinline preload="none" width="1200" height="588" aria-label="Clipping text and images from a page into Workspace"></video></div>
</div>
</div>
</div>
<!-- Organize -->
<div class="pillar">
<div class="pillar-head"><span class="ln"></span> Organize <span class="ln"></span></div>
<p class="pillar-sub">One private place for your notes, files and PDFs, sorted the way you want.</p>
<div class="feat-grid">
<div class="feature">
<h3>Notes that tie it together</h3>
<p>Quick notes with checklists, right beside what you're reading. Pin a note to any item — a doc, sheet, PDF or clip — and grab the current page's link with a right-click.</p>
<div class="caps"><span class="cap">Checklists</span><span class="cap">Pin to any item</span><span class="cap">Right-click page link</span><span class="cap">Reminders (bell)</span><span class="cap pro">PRO · Alarms (instant)</span></div>
<div class="demo"><video poster="/ws-notes-poster.jpg" data-src="/ws-notes.mp4" muted loop playsinline preload="none" width="820" height="802" aria-label="Taking notes with a checklist in the Workspace side panel"></video></div>
</div>
<div class="feature">
<h3>All your files, one place</h3>
<p>Drag PDF, DOCX, XLSX, TXT, Markdown and images straight in — from any screen, not just the home view. Sort into folders, filter by type, and select many at once.</p>
<div class="caps"><span class="cap">Drag-in from anywhere</span><span class="cap">Folders</span><span class="cap">Filter by type</span><span class="cap pro">PRO · Batch select/delete/download</span></div>
<div class="demo"><video poster="/ws-files-poster.jpg" data-src="/ws-files.mp4" muted loop playsinline preload="none" width="820" height="802" aria-label="Organizing files and folders in Workspace"></video></div>
<p class="feat-note">Honest import: DOCX comes in as text and XLSX as values — better to open it without formatting than not at all.</p>
</div>
<div class="feature">
<h3>Read PDFs in the panel</h3>
<p>Open and page through PDFs without leaving your tab, and find anything with Ctrl+F.</p>
<div class="caps"><span class="cap">Read in panel</span><span class="cap">Ctrl+F search</span><span class="cap">Print / download</span><span class="cap pro">PRO · Export page as PNG</span></div>
<div class="demo"><video poster="/ws-pdf-poster.jpg" data-src="/ws-pdf.mp4" muted loop playsinline preload="none" width="820" height="802" aria-label="Reading a PDF inside the Workspace side panel"></video></div>
</div>
</div>
</div>
<!-- Create -->
<div class="pillar">
<div class="pillar-head"><span class="ln"></span> Create <span class="ln"></span></div>
<p class="pillar-sub">Real editors for documents, spreadsheets and drawings, right inside the panel.</p>
<div class="feat-grid">
<div class="feature">
<h3>Real documents</h3>
<p>A full editor inside the panel — headings, <b>bold</b>, <i>italic</i>, underline, lists, colors, tables and images. It autosaves as you type, you can rename inline, and print or Save as PDF.</p>
<div class="caps"><span class="cap">Headings</span><span class="cap">B / I / U</span><span class="cap">Lists</span><span class="cap">Tables</span><span class="cap">Images</span><span class="cap">Autosave</span><span class="cap">Print / Save as PDF</span><span class="cap pro">PRO · Export DOCX</span></div>
<div class="demo"><video poster="/ws-docs-poster.jpg" data-src="/ws-docs.mp4" muted loop playsinline preload="none" width="820" height="802" aria-label="Editing a document in Workspace"></video></div>
</div>
<div class="feature">
<h3>Spreadsheets</h3>
<p>Cells, formulas and totals with autosave — right where you work. Export to XLSX when you need it elsewhere.</p>
<div class="caps"><span class="cap">Formulas</span><span class="cap">Totals</span><span class="cap">Autosave</span><span class="cap pro">PRO · Export XLSX</span></div>
<div class="demo"><video poster="/ws-sheets-poster.jpg" data-src="/ws-sheets.mp4" muted loop playsinline preload="none" width="820" height="802" aria-label="Editing a spreadsheet in Workspace"></video></div>
</div>
<div class="feature">
<h3>Draw & annotate</h3>
<p>Pen, highlighter, arrows, rectangles and text on a canvas, with a selection tool to move or erase objects. Crop, rotate, mirror, and undo/redo — then export or turn it into a PDF.</p>
<div class="caps"><span class="cap">Pen & highlighter</span><span class="cap">Arrows & shapes</span><span class="cap">Text</span><span class="cap">Select / move / erase</span><span class="cap">Crop / rotate / mirror</span><span class="cap">Undo / redo</span><span class="cap pro">PRO · Export PNG/JPG</span><span class="cap">Create PDF</span></div>
<div class="demo"><video poster="/ws-drawing-poster.jpg" data-src="/ws-drawing.mp4" muted loop playsinline preload="none" width="820" height="802" aria-label="Drawing on a canvas in Workspace"></video></div>
</div>
</div>
</div>
</section>
<!-- ── panel vs full-screen ── -->
<!-- ── TYPICAL WORKFLOW ── -->
<section class="section" id="workflow">
<div class="section-label">A typical workflow</div>
<h2 class="section-title">One tab. A whole day of work.</h2>
<p class="section-sub">You never leave the page you're on — the workspace moves with you.</p>
<div class="flow">
<div class="flow-step"><span class="n">1</span><span class="t">Reading an article — <b>clip</b> the parts that matter, with a link back to the source.</span></div>
<div class="flow-step"><span class="n">2</span><span class="t">Open a <b>document</b> in the panel and start writing, right beside the page.</span></div>
<div class="flow-step"><span class="n">3</span><span class="t">Jot <b>notes</b> and a checklist, pinned to what you're working on.</span></div>
<div class="flow-step"><span class="n">4</span><span class="t">Drop in a <b>PDF</b>, read it and search it without opening a new tab.</span></div>
<div class="flow-step"><span class="n">5</span><span class="t">Crunch numbers in a <b>spreadsheet</b> — formulas, totals, done.</span></div>
<div class="flow-step"><span class="n">6</span><span class="t">Sketch an idea on the <b>drawing</b> canvas when words aren't enough.</span></div>
</div>
<p class="flow-tail">Everything stays together — on your device. At the end of the day, everything is already organized.</p>
</section>
<section class="section" id="anywhere">
<div class="section-label">Stay in context</div>
<h2 class="section-title">The workspace never leaves the page you're working on.</h2>
<p class="section-sub">Workspace rides in your browser's side panel, right next to whatever you're reading. Need space? Open any document, sheet, PDF or drawing full-screen in its own tab — then snap it back. Same files, two views, your call.</p>
<div class="pmock" aria-hidden="true">
<div class="site"><div class="bar m"></div><div class="bar s"></div><div class="bar"></div><div class="bar m"></div><div class="bar s"></div><div style="margin-top:16px">The page you're reading</div></div>
<div class="ws"><div class="h">◐ Workspace</div><div class="it">📄 Docs</div><div class="it">📊 Sheets</div><div class="it">📕 PDFs</div><div class="it">📝 Notes</div><div class="it">✂️ Clips</div><div class="it">🎨 Draw</div></div>
</div>
<div class="modes">
<div class="mode"><div class="mode-ico">📑</div><div class="mode-t">Side panel</div><div class="mode-d">Alongside your browsing — capture and edit without leaving the page.</div></div>
<div class="mode-arrow">⟷</div>
<div class="mode"><div class="mode-ico">🖥️</div><div class="mode-t">Full-screen tab</div><div class="mode-d">One click for room to focus — then back to the panel.</div></div>
</div>
</section>
<!-- ── SWAP TABLE ── -->
<section class="section">
<div class="section-label">The trade</div>
<h2 class="section-title">Less juggling. More doing.</h2>
<div class="swap">
<div class="swap-row"><div class="swap-cell old">12 browser tabs</div><div class="swap-cell new">One sidebar</div></div>
<div class="swap-row"><div class="swap-cell old">Cloud office</div><div class="swap-cell new">Local files</div></div>
<div class="swap-row"><div class="swap-cell old">Copy & paste</div><div class="swap-cell new">Web clips</div></div>
<div class="swap-row"><div class="swap-cell old">A different app for everything</div><div class="swap-cell new">One workspace</div></div>
<div class="swap-row"><div class="swap-cell old">Log in everywhere</div><div class="swap-cell new">No account</div></div>
</div>
</section>
<!-- ── how it works ── -->
<section class="section" id="how">
<div class="section-label">How it works</div>
<h2 class="section-title">Three steps. No setup.</h2>
<div class="steps3">
<div class="step"><div class="step-n">1</div><h3>Install & pin the panel</h3><p>Add the extension and pin Workspace to your browser's side panel.</p></div>
<div class="step"><div class="step-n">2</div><h3>Create or bring files in</h3><p>Start a doc, sheet or note — or drag PDFs, DOCX, XLSX and images straight in.</p></div>
<div class="step"><div class="step-n">3</div><h3>It stays on your device</h3><p>Everything saves locally. No account, no cloud, works offline.</p></div>
</div>
</section>
<!-- ── who it's for ── -->
<section class="section" id="who">
<div class="section-label">Who it's for</div>
<h2 class="section-title">A private desk for focused work.</h2>
<div class="who">
<div class="who-card"><div class="ico">🚀</div><h3>Solo founders & micro-businesses</h3><p>Keep notes, docs and files for each client in one private place — instead of juggling five different apps.</p></div>
<div class="who-card"><div class="ico">🎓</div><h3>Students</h3><p>Clip readings, draft assignments, and keep PDFs and notes side by side with whatever you're studying.</p></div>
<div class="who-card"><div class="ico">🔬</div><h3>Researchers</h3><p>Capture sources with their links, annotate PDFs, and organize everything — fully offline.</p></div>
<div class="who-card"><div class="ico">🔒</div><h3>Privacy-minded people</h3><p>A complete office that never touches the cloud: no account, no tracking, nothing leaves your device.</p></div>
<div class="who-card"><div class="ico">🤖</div><h3>AI power users</h3><p>Keep the docs, notes and files you build around your AI chats in one local place — right beside the tools you already use NODUS with.</p></div>
</div>
</section>
<!-- ── 4. PRIVACY / LOCAL-FIRST ── -->
<section class="section" id="privacy">
<div class="privacy">
<h2>Your files stay with you.</h2>
<p class="lead">Local-first by design. Workspace runs entirely on your device — there's no server to trust.</p>
<div class="priv-grid">
<div class="priv-item"><div class="ico">🔒</div><div class="t">100% local — nothing goes to the cloud</div></div>
<div class="priv-item"><div class="ico">🙅</div><div class="t">No account needed</div></div>
<div class="priv-item"><div class="ico">🔑</div><div class="t">Encrypted backup (AES-256)</div></div>
<div class="priv-item"><div class="ico">🧩</div><div class="t">No remote code</div></div>
</div>
<div style="margin-top:26px;"><a href="/workspace-privacy" class="btn btn-ghost">Read the full Privacy Policy →</a></div>
</div>
</section>
<!-- ── 5. ECOSYSTEM + PRO ── -->
<section class="section" id="pro">
<div class="section-label">One subscription</div>
<p class="pro-line">One <b>NODUS PRO</b> subscription, the whole ecosystem — NODUS AI + PH Radar + Workspace.</p>
<p style="text-align:center;color:var(--sub);font-size:14px;max-width:620px;margin:6px auto 0;">PRO is available today — it already unlocks <b style="color:var(--text)">NODUS AI</b> and <b style="color:var(--text)">PH Radar BI</b>, and Workspace joins the moment it launches.</p>
<div class="price-grid">
<div class="price-card">
<div class="price-name">PRO Monthly</div>
<div class="price-amt">$4.50<span>/mo</span></div>
<div class="price-note">Cancel anytime</div>
<a href="checkout.html" class="btn btn-ghost price-cta">Get PRO Monthly</a>
</div>
<div class="price-card feat">
<div class="price-badge">SAVE 44%</div>
<div class="price-name">PRO Annual</div>
<div class="price-amt">$30<span>/yr</span></div>
<div class="price-note">7-day free trial · ≈ $2.50/mo</div>
<a href="checkout.html" class="btn btn-primary price-cta">Get PRO Annual</a>
</div>
<div class="price-card">
<div class="price-name">PRO Lifetime</div>
<div class="price-amt">$79<span> once</span></div>
<div class="price-note">Pay once, yours forever</div>
<a href="checkout.html" class="btn btn-ghost price-cta">Get Lifetime</a>
</div>
</div>
<p class="price-trust">Secure checkout via Paddle · 7-day free trial on the annual plan · cancel anytime.</p>
<div class="cmp">
<div class="cmp-row cmp-head">
<div class="cmp-cell"><span class="free">Free</span></div>
<div class="cmp-cell pro"><span class="pro">NODUS PRO</span></div>
</div>
<div class="cmp-row">
<div class="cmp-cell">Create/edit documents and spreadsheets</div>
<div class="cmp-cell pro">Export DOCX, XLSX and images</div>
</div>
<div class="cmp-row">
<div class="cmp-cell">Read, search, print and download PDFs</div>
<div class="cmp-cell pro">Export a PDF page as PNG</div>
</div>
<div class="cmp-row">
<div class="cmp-cell">Web clips and notes</div>
<div class="cmp-cell pro">Encrypted backup & restore</div>
</div>
<div class="cmp-row">
<div class="cmp-cell">Import files (drag & drop)</div>
<div class="cmp-cell pro">Active alarms (instant notifications)</div>
</div>
<div class="cmp-row">
<div class="cmp-cell">Reminders (bell notice)</div>
<div class="cmp-cell pro">Batch actions</div>
</div>
<div class="cmp-row">
<div class="cmp-cell">16 languages</div>
<div class="cmp-cell pro">—</div>
</div>
</div>
<p class="golden">Golden rule: <b>bringing content in is always free</b> — exporting/converting and automations are PRO.</p>
</section>
<!-- ── FAQ ── -->
<section class="section" id="faq">
<div class="section-label">FAQ</div>
<h2 class="section-title">Questions, answered.</h2>
<div class="faq">
<details><summary>Are my files stored in the cloud?</summary><p>No. Everything you create or import — documents, spreadsheets, PDFs, clips, notes and drawings — is stored locally on your device, in your browser. Nothing is uploaded to us or anyone else.</p></details>
<details><summary>Where exactly is my data kept?</summary><p>In your browser's own local storage, on your device — the same place your browser keeps site data. Nothing is sent to a NODUS server, which makes Workspace a local-first alternative to cloud office tools: your files are always with you and work offline.</p></details>
<details><summary>Do I need an account to use it?</summary><p>No. Workspace works with no sign-up and no login. You only enter an email if you choose to activate NODUS PRO.</p></details>
<details><summary>Does it work offline?</summary><p>Yes. Because it's local-first, you can create, edit and read your files with no internet connection.</p></details>
<details><summary>What happens if I switch computers or reinstall the browser?</summary><p>Your data lives only on that device, so moving it is up to you: use the encrypted Backup & Restore (a PRO feature) to export everything to a file and bring it back on another machine. Without a backup, local data stays on that browser only.</p></details>
<details><summary>Which files can I bring in?</summary><p>Drag and drop PDF, DOCX, XLSX, TXT, images and Markdown straight into the panel. The rule is simple: bringing content in is always free.</p></details>
<details><summary>Can I edit Word and Excel files?</summary><p>You can open them — DOCX comes in as plain text and XLSX as values (formatting and formulas are simplified). Better to open without formatting than not at all. Exporting back to DOCX/XLSX (and images) is a PRO feature.</p></details>
<details><summary>What's free and what's PRO?</summary><p>Free: creating and editing documents and spreadsheets, reading/searching/printing PDFs, web clips, notes, reminders, file import, and 16 languages. PRO adds export (DOCX, XLSX, PNG), PDF-to-image, encrypted backup, active alarms with notifications, and batch actions.</p></details>
<details><summary>How much does PRO cost?</summary><p>$4.50/month, $30/year (≈ $2.50/mo) or $79 one-time (lifetime). Checkout is handled securely by Paddle, with a 7-day free trial on the annual plan and a 14-day money-back guarantee.</p></details>
<details><summary>One subscription for everything?</summary><p>Yes — a single NODUS PRO subscription unlocks PRO across the whole NODUS ecosystem: NODUS AI, PH Radar and Workspace.</p></details>
<details><summary>Can I print or save my work as a PDF?</summary><p>Yes. Documents and spreadsheets can be printed or turned into a PDF — both free — and the PDF opens right in the built-in viewer.</p></details>
<details><summary>Is it secure? What does "no remote code" mean?</summary><p>All of the extension's code ships inside the package — nothing is downloaded and run from a server. Your backups are encrypted with AES-256, and we never read, transmit or analyze the content of your files.</p></details>
<details><summary>Which browsers does it support?</summary><p>Chrome, Firefox and Chromium-based browsers (Edge, Brave and others). It lives in the browser's side panel, alongside whatever you're working on.</p></details>
<details><summary>How do I get help or report a problem?</summary><p>Email us at <!--email_off--><a href="mailto:mmcarvalho.dev@gmail.com" style="color:var(--accent)">mmcarvalho.dev@gmail.com</a><!--/email_off--> — we read every message.</p></details>
<details><summary>Where can I get it?</summary><p>NODUS Workspace is available now on the Chrome Web Store and Firefox Add-ons.</p></details>
</div>
</section>
<!-- ── MANIFESTO ── -->
<section class="manifesto">
<h2>Your browser is where work <span class="accent">already happens</span>.</h2>
<div class="words"><span>Research</span><span>Writing</span><span>Reading</span><span>Planning</span><span>Creating</span></div>
<p>So why keep jumping between applications? Bring everything together. Keep everything local. <b style="color:var(--text)">Own your workspace.</b></p>
</section>
<!-- ── 6. FINAL CTA ── -->
<section class="final">
<span class="badge"><span class="dot"></span> Now on Chrome & Firefox</span>
<h2>Get started in seconds.</h2>
<div class="final-btns" style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px"><a class="btn btn-primary" href="https://chromewebstore.google.com/detail/nodus-workspace/igjpedkogacopanobbjbiobnplpklcim" target="_blank" rel="noopener"><img src="/chrome-icon.svg" width="18" height="18" alt=""> Install on Chrome</a><a class="btn btn-ghost" href="https://addons.mozilla.org/firefox/addon/nodus-workspace/" target="_blank" rel="noopener"><img src="/firefox-icon.svg" width="18" height="18" alt=""> Get it on Firefox</a></div>
</section>
</div>
<footer>
<div>
<a href="https://nodus-ai.app">NODUS Home</a>
<a href="/workspace-privacy">Privacy</a>
<a href="https://nodus-ai.app/terms">Terms</a>
<!--email_off--><a href="mailto:mmcarvalho.dev@gmail.com">Support</a><!--/email_off-->
</div>
<div style="margin-top:10px;">© 2026 NODUS. All rights reserved.</div>
<!-- research:start -->
<div style="margin-top:16px;font-size:12px;line-height:1.6;">
<span style="text-transform:uppercase;letter-spacing:1px;font-weight:700;color:#fb923c;">Research</span>
<span style="display:block;margin-top:5px;"><a href="/intent-ai" style="color:#fb923c;text-decoration:none;font-weight:600;">Intent AI</a><span style="color:#fb923c;opacity:.7;"> — A machine that processes intention, not language</span></span>
<span style="display:block;margin-top:5px;"><a href="https://mmcarvalhodev.github.io/hierarchical-bits/" target="_blank" rel="noopener" style="color:#fb923c;text-decoration:none;font-weight:600;">Hierarchical Bits</a><span style="color:#fb923c;opacity:.7;"> — A file format that's compact and navigable at once</span></span>
</div>
<!-- research:end -->
</footer>
<script>
// ── Product Hunt "Coming Soon" link — paste the URL here and every CTA updates ──
var PH_URL = ''; // TODO: e.g. 'https://www.producthunt.com/products/nodus-workspace'
if (PH_URL) {
document.querySelectorAll('[data-ph-cta]').forEach(function (a) {
a.setAttribute('href', PH_URL);
a.setAttribute('target', '_blank');
a.setAttribute('rel', 'noopener');
});
}
// ── Lazy-load + play-on-visible for the demo videos ──
(function () {
var vids = document.querySelectorAll('video[data-src]');
if (!vids.length) return;
if (!('IntersectionObserver' in window)) {
vids.forEach(function (v) { v.src = v.dataset.src; });
return;
}
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
var v = e.target;
if (e.isIntersecting) {
if (!v.src) v.src = v.dataset.src;
var p = v.play(); if (p && p.catch) p.catch(function () {});
} else if (!v.paused) {
v.pause();
}
});
}, { rootMargin: '250px 0px' });
vids.forEach(function (v) { io.observe(v); });
})();
</script>
<script src="/lang-switcher.js"></script>
<script src="/products-menu.js" defer></script>
<script src="/resources-menu.js" defer></script>
<script src="/about-menu.js" defer></script>
</body>
</html>