@agent-link/server 0.1.196 → 0.1.198

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.
@@ -3,1437 +3,9 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AgenticWorker — Claude Code 开源版远程控制</title>
7
- <meta name="description" content="Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式,手机或任何浏览器即可操控,端到端加密,无需注册。">
8
- <meta name="keywords" content="Claude Code, Claude Code开源版远程控制, 远程控制, 浏览器 IDE, AI 编程助手, AgenticWorker, 端到端加密, 自建部署, 移动编程, 多Agent协作, 定时任务">
9
- <link rel="canonical" href="https://msclaude.ai/zh">
10
- <link rel="alternate" hreflang="en" href="https://msclaude.ai/">
11
- <link rel="alternate" hreflang="zh" href="https://msclaude.ai/zh">
12
- <link rel="alternate" hreflang="x-default" href="https://msclaude.ai/">
13
- <!-- Open Graph -->
14
- <meta property="og:type" content="website">
15
- <meta property="og:title" content="AgenticWorker — Claude Code 开源版远程控制">
16
- <meta property="og:description" content="Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式,手机或任何浏览器即可操控,端到端加密,无需注册。">
17
- <meta property="og:url" content="https://msclaude.ai/zh">
18
- <meta property="og:image" content="https://msclaude.ai/iPad.png">
19
- <meta property="og:site_name" content="AgenticWorker">
20
- <meta property="og:locale" content="zh_CN">
21
- <meta property="og:locale:alternate" content="en_US">
22
- <!-- Twitter Card -->
23
- <meta name="twitter:card" content="summary_large_image">
24
- <meta name="twitter:title" content="AgenticWorker — Claude Code 开源版远程控制">
25
- <meta name="twitter:description" content="Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式,手机或任何浏览器即可操控,端到端加密,无需注册。">
26
- <meta name="twitter:image" content="https://msclaude.ai/iPad.png">
27
- <link rel="icon" type="image/svg+xml" href="/favicon.svg">
28
- <script type="application/ld+json">
29
- {
30
- "@context": "https://schema.org",
31
- "@type": "SoftwareApplication",
32
- "name": "AgenticWorker",
33
- "description": "Claude Code 开源版远程控制。对话、多 Agent 协作、定时任务三大模式,手机或任何浏览器即可操控,端到端加密,无需注册。",
34
- "url": "https://msclaude.ai/zh",
35
- "applicationCategory": "DeveloperApplication",
36
- "operatingSystem": "Windows, macOS, Linux",
37
- "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
38
- "screenshot": "https://msclaude.ai/iPad.png"
39
- }
40
- </script>
41
- <style>
42
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
43
-
44
- * { margin: 0; padding: 0; box-sizing: border-box; }
45
-
46
- :root {
47
- --bg: #06080f;
48
- --surface: rgba(255,255,255,0.03);
49
- --surface-hover: rgba(255,255,255,0.06);
50
- --border: rgba(255,255,255,0.06);
51
- --border-hover: rgba(255,255,255,0.12);
52
- --text: #eaeaea;
53
- --text-dim: rgba(255,255,255,0.45);
54
- --text-mid: rgba(255,255,255,0.65);
55
- --accent: #3b82f6;
56
- --accent-soft: rgba(59,130,246,0.15);
57
- --accent-glow: rgba(59,130,246,0.4);
58
- --rose: #f43f5e;
59
- --amber: #f59e0b;
60
- --cyan: #22d3ee;
61
- --green: #34d399;
62
- --blue: #60a5fa;
63
- }
64
-
65
- body {
66
- font-family: 'Noto Sans SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
67
- background: var(--bg);
68
- color: var(--text);
69
- line-height: 1.6;
70
- min-height: 100vh;
71
- overflow-x: hidden;
72
- }
73
-
74
- /* ── Ambient Background ── */
75
- .ambient {
76
- position: fixed;
77
- top: 0;
78
- left: 0;
79
- width: 100%;
80
- height: 100%;
81
- pointer-events: none;
82
- z-index: 0;
83
- overflow: hidden;
84
- }
85
-
86
- .ambient-orb {
87
- position: absolute;
88
- border-radius: 50%;
89
- filter: blur(120px);
90
- opacity: 0.35;
91
- animation: float 20s ease-in-out infinite;
92
- }
93
-
94
- .ambient-orb:nth-child(1) {
95
- width: 600px; height: 600px;
96
- background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
97
- top: -10%; left: -5%;
98
- animation-delay: 0s;
99
- animation-duration: 25s;
100
- }
101
-
102
- .ambient-orb:nth-child(2) {
103
- width: 500px; height: 500px;
104
- background: radial-gradient(circle, var(--rose) 0%, transparent 70%);
105
- top: 20%; right: -10%;
106
- animation-delay: -8s;
107
- animation-duration: 22s;
108
- }
109
-
110
- .ambient-orb:nth-child(3) {
111
- width: 400px; height: 400px;
112
- background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
113
- bottom: 10%; left: 20%;
114
- animation-delay: -15s;
115
- animation-duration: 28s;
116
- }
117
-
118
- @keyframes float {
119
- 0%, 100% { transform: translate(0, 0) scale(1); }
120
- 25% { transform: translate(30px, -40px) scale(1.05); }
121
- 50% { transform: translate(-20px, 20px) scale(0.95); }
122
- 75% { transform: translate(40px, 10px) scale(1.02); }
123
- }
124
-
125
- /* ── Grain overlay ── */
126
- .grain {
127
- position: fixed;
128
- top: 0; left: 0;
129
- width: 100%; height: 100%;
130
- pointer-events: none;
131
- z-index: 1;
132
- opacity: 0.025;
133
- 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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
134
- background-repeat: repeat;
135
- background-size: 256px 256px;
136
- }
137
-
138
- /* ── Content wrapper ── */
139
- .content {
140
- position: relative;
141
- z-index: 2;
142
- }
143
-
144
- /* ── Nav ── */
145
- nav {
146
- display: flex;
147
- align-items: center;
148
- justify-content: space-between;
149
- padding: 1.5rem 2.5rem;
150
- max-width: 1200px;
151
- margin: 0 auto;
152
- }
153
-
154
- .logo {
155
- font-size: 1.2rem;
156
- font-weight: 700;
157
- letter-spacing: -0.03em;
158
- display: flex;
159
- align-items: center;
160
- gap: 0.5rem;
161
- }
162
-
163
- .logo-mark {
164
- width: 28px; height: 28px;
165
- border-radius: 8px;
166
- background: linear-gradient(135deg, var(--accent), var(--rose));
167
- display: flex;
168
- align-items: center;
169
- justify-content: center;
170
- font-size: 0.75rem;
171
- font-weight: 800;
172
- color: #fff;
173
- box-shadow: 0 0 20px var(--accent-glow);
174
- }
175
-
176
- .logo-text span {
177
- background: linear-gradient(135deg, var(--accent), var(--rose));
178
- -webkit-background-clip: text;
179
- -webkit-text-fill-color: transparent;
180
- background-clip: text;
181
- }
182
-
183
- .nav-links {
184
- display: flex;
185
- align-items: center;
186
- gap: 2rem;
187
- }
188
-
189
- .nav-links a {
190
- color: var(--text-dim);
191
- text-decoration: none;
192
- font-size: 0.85rem;
193
- font-weight: 500;
194
- transition: color 0.3s;
195
- letter-spacing: 0.02em;
196
- }
197
-
198
- .nav-links a:hover { color: var(--text); }
199
-
200
- .nav-gh {
201
- display: flex;
202
- align-items: center;
203
- gap: 0.4rem;
204
- background: var(--surface);
205
- border: 1px solid var(--border);
206
- border-radius: 8px;
207
- padding: 0.45rem 0.85rem;
208
- transition: all 0.3s;
209
- }
210
-
211
- .nav-gh:hover {
212
- background: var(--surface-hover);
213
- border-color: var(--border-hover);
214
- }
215
-
216
- .nav-gh svg { width: 16px; height: 16px; fill: currentColor; }
217
-
218
- .nav-lang {
219
- font-size: 0.8rem;
220
- color: var(--text-dim);
221
- padding: 0.35rem 0.7rem;
222
- border: 1px solid var(--border);
223
- border-radius: 6px;
224
- transition: all 0.3s;
225
- }
226
-
227
- .nav-lang:hover {
228
- color: var(--text);
229
- border-color: var(--border-hover);
230
- }
231
-
232
- /* ── Hero ── */
233
- .hero {
234
- text-align: center;
235
- padding: 5rem 2rem 4rem;
236
- max-width: 900px;
237
- margin: 0 auto;
238
- position: relative;
239
- }
240
-
241
- .hero-badge {
242
- display: inline-flex;
243
- align-items: center;
244
- gap: 0.5rem;
245
- background: var(--accent-soft);
246
- border: 1px solid rgba(59,130,246,0.2);
247
- border-radius: 100px;
248
- padding: 0.4rem 1rem 0.4rem 0.5rem;
249
- font-size: 0.8rem;
250
- color: var(--accent);
251
- font-weight: 500;
252
- margin-bottom: 2.5rem;
253
- letter-spacing: 0.01em;
254
- animation: fadeInUp 0.8s ease-out;
255
- }
256
-
257
- .hero-badge-dot {
258
- width: 8px; height: 8px;
259
- border-radius: 50%;
260
- background: var(--green);
261
- box-shadow: 0 0 8px var(--green);
262
- animation: pulse 2s ease-in-out infinite;
263
- }
264
-
265
- @keyframes pulse {
266
- 0%, 100% { opacity: 1; transform: scale(1); }
267
- 50% { opacity: 0.6; transform: scale(0.85); }
268
- }
269
-
270
- .hero h1 {
271
- font-size: clamp(2.8rem, 6vw, 4.5rem);
272
- font-weight: 800;
273
- letter-spacing: -0.04em;
274
- line-height: 1.2;
275
- margin-bottom: 1.75rem;
276
- animation: fadeInUp 0.8s ease-out 0.1s both;
277
- }
278
-
279
- .hero h1 .line {
280
- display: block;
281
- }
282
-
283
- .hero h1 em {
284
- font-style: normal;
285
- position: relative;
286
- background: linear-gradient(135deg, var(--accent), #60a5fa, var(--rose));
287
- background-size: 200% 200%;
288
- -webkit-background-clip: text;
289
- -webkit-text-fill-color: transparent;
290
- background-clip: text;
291
- animation: shimmer 6s ease-in-out infinite;
292
- }
293
-
294
- @keyframes shimmer {
295
- 0%, 100% { background-position: 0% 50%; }
296
- 50% { background-position: 100% 50%; }
297
- }
298
-
299
- .hero-sub {
300
- font-size: 1.2rem;
301
- color: var(--text-mid);
302
- max-width: 600px;
303
- margin: 0 auto 3rem;
304
- font-weight: 400;
305
- line-height: 1.8;
306
- animation: fadeInUp 0.8s ease-out 0.2s both;
307
- }
308
-
309
- .hero-sub strong {
310
- color: var(--text);
311
- font-weight: 500;
312
- }
313
-
314
- @keyframes fadeInUp {
315
- from { opacity: 0; transform: translateY(20px); }
316
- to { opacity: 1; transform: translateY(0); }
317
- }
318
-
319
- /* ── CTA Group ── */
320
- .cta-group {
321
- display: flex;
322
- align-items: center;
323
- justify-content: center;
324
- gap: 1rem;
325
- margin-bottom: 1.5rem;
326
- animation: fadeInUp 0.8s ease-out 0.3s both;
327
- }
328
-
329
- .cta-primary {
330
- display: inline-flex;
331
- align-items: center;
332
- gap: 0.5rem;
333
- background: linear-gradient(135deg, var(--accent), #60a5fa);
334
- color: #fff;
335
- font-weight: 600;
336
- font-size: 0.95rem;
337
- padding: 0.8rem 1.75rem;
338
- border-radius: 12px;
339
- text-decoration: none;
340
- transition: all 0.3s;
341
- box-shadow: 0 0 30px rgba(59,130,246,0.3), 0 4px 15px rgba(0,0,0,0.3);
342
- border: none;
343
- cursor: pointer;
344
- font-family: inherit;
345
- }
346
-
347
- .cta-primary:hover {
348
- transform: translateY(-2px);
349
- box-shadow: 0 0 40px rgba(59,130,246,0.45), 0 8px 25px rgba(0,0,0,0.4);
350
- }
351
-
352
- .cta-secondary {
353
- display: inline-flex;
354
- align-items: center;
355
- gap: 0.5rem;
356
- background: var(--surface);
357
- border: 1px solid var(--border);
358
- color: var(--text);
359
- font-weight: 500;
360
- font-size: 0.95rem;
361
- padding: 0.8rem 1.75rem;
362
- border-radius: 12px;
363
- text-decoration: none;
364
- transition: all 0.3s;
365
- cursor: pointer;
366
- font-family: inherit;
367
- }
368
-
369
- .cta-secondary:hover {
370
- background: var(--surface-hover);
371
- border-color: var(--border-hover);
372
- transform: translateY(-2px);
373
- }
374
-
375
- .cta-secondary svg { width: 18px; height: 18px; fill: currentColor; }
376
-
377
- /* ── Terminal Install ── */
378
- .terminal {
379
- max-width: 520px;
380
- margin: 0 auto;
381
- background: rgba(10,10,20,0.7);
382
- backdrop-filter: blur(20px);
383
- -webkit-backdrop-filter: blur(20px);
384
- border: 1px solid var(--border);
385
- border-radius: 14px;
386
- overflow: hidden;
387
- animation: fadeInUp 0.8s ease-out 0.4s both;
388
- box-shadow: 0 20px 60px rgba(0,0,0,0.4);
389
- }
390
-
391
- .terminal-bar {
392
- display: flex;
393
- align-items: center;
394
- gap: 6px;
395
- padding: 0.75rem 1rem;
396
- background: rgba(255,255,255,0.03);
397
- border-bottom: 1px solid var(--border);
398
- }
399
-
400
- .terminal-dot {
401
- width: 10px; height: 10px;
402
- border-radius: 50%;
403
- }
404
-
405
- .terminal-dot:nth-child(1) { background: #ff5f57; }
406
- .terminal-dot:nth-child(2) { background: #ffbd2e; }
407
- .terminal-dot:nth-child(3) { background: #28c840; }
408
-
409
- .terminal-title {
410
- flex: 1;
411
- text-align: center;
412
- font-size: 0.72rem;
413
- color: var(--text-dim);
414
- font-weight: 500;
415
- letter-spacing: 0.03em;
416
- }
417
-
418
- .terminal-body {
419
- padding: 1.25rem 1.5rem;
420
- font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
421
- font-size: 0.85rem;
422
- line-height: 1.8;
423
- }
424
-
425
- .terminal-line {
426
- display: flex;
427
- align-items: center;
428
- gap: 0.5rem;
429
- cursor: pointer;
430
- padding: 0.15rem 0.35rem;
431
- margin: 0 -0.35rem;
432
- border-radius: 6px;
433
- transition: background 0.2s;
434
- }
435
-
436
- .terminal-line:hover { background: rgba(255,255,255,0.04); }
437
-
438
- .terminal-prompt { color: var(--accent); user-select: none; }
439
- .terminal-cmd { color: var(--green); }
440
-
441
- .terminal-output {
442
- color: var(--text-dim);
443
- font-size: 0.8rem;
444
- padding-left: 1.1rem;
445
- margin-top: 0.15rem;
446
- }
447
-
448
- .terminal-output a {
449
- color: var(--cyan);
450
- text-decoration: none;
451
- }
452
-
453
- .terminal-copy-toast {
454
- position: fixed;
455
- bottom: 2rem;
456
- left: 50%;
457
- transform: translateX(-50%) translateY(20px);
458
- background: var(--accent);
459
- color: #fff;
460
- padding: 0.5rem 1.25rem;
461
- border-radius: 8px;
462
- font-size: 0.8rem;
463
- font-weight: 500;
464
- opacity: 0;
465
- transition: all 0.3s;
466
- pointer-events: none;
467
- z-index: 100;
468
- font-family: 'Noto Sans SC', 'Inter', sans-serif;
469
- }
470
-
471
- .terminal-copy-toast.show {
472
- opacity: 1;
473
- transform: translateX(-50%) translateY(0);
474
- }
475
-
476
- /* ── Showcase ── */
477
- .showcase {
478
- max-width: 1000px;
479
- margin: 6rem auto 0;
480
- padding: 0 2rem;
481
- position: relative;
482
- display: grid;
483
- grid-template-columns: 5fr 2fr;
484
- align-items: end;
485
- gap: 2rem;
486
- animation: fadeInUp 1s ease-out 0.6s both;
487
- }
488
-
489
- .showcase::before {
490
- content: '';
491
- position: absolute;
492
- top: 50%;
493
- left: 50%;
494
- transform: translate(-50%, -50%);
495
- width: 120%;
496
- height: 120%;
497
- background:
498
- radial-gradient(ellipse at 35% 50%, rgba(59,130,246,0.12) 0%, transparent 55%),
499
- radial-gradient(ellipse at 65% 50%, rgba(245,158,11,0.08) 0%, transparent 55%);
500
- pointer-events: none;
501
- z-index: 0;
502
- filter: blur(60px);
503
- }
504
-
505
- .showcase::after {
506
- content: '';
507
- position: absolute;
508
- top: 50%;
509
- left: 50%;
510
- transform: translate(-50%, -50%);
511
- width: 1px;
512
- height: 35%;
513
- background: linear-gradient(180deg, transparent, rgba(59,130,246,0.2), rgba(245,158,11,0.2), transparent);
514
- pointer-events: none;
515
- z-index: 0;
516
- }
517
-
518
- .device {
519
- position: relative;
520
- transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
521
- }
522
-
523
- .device:hover {
524
- transform: translateY(-8px);
525
- }
526
-
527
- .device img, .device picture { display: block; width: 100%; height: auto; }
528
-
529
- .device-ipad {
530
- width: 100%;
531
- z-index: 1;
532
- transform: rotate(-1deg);
533
- }
534
-
535
- .device-ipad:hover {
536
- transform: rotate(-1deg) translateY(-8px);
537
- }
538
-
539
- .device-ipad img {
540
- border-radius: 0;
541
- box-shadow: none;
542
- }
543
-
544
- .device-iphone {
545
- width: 90%;
546
- z-index: 2;
547
- justify-self: center;
548
- align-self: center;
549
- transform: rotate(2deg);
550
- }
551
-
552
- .device-iphone:hover {
553
- transform: rotate(2deg) translateY(-8px);
554
- }
555
-
556
- .device-iphone img {
557
- border-radius: 12%;
558
- box-shadow:
559
- 0 45px 100px rgba(0,0,0,0.55),
560
- 0 15px 50px rgba(0,0,0,0.35),
561
- 0 0 80px rgba(245,158,11,0.08);
562
- }
563
-
564
- /* ── iPad Carousel ── */
565
- .ipad-carousel {
566
- position: relative;
567
- width: 100%;
568
- overflow: hidden;
569
- border-radius: 4.2%;
570
- box-shadow:
571
- 0 40px 100px rgba(0,0,0,0.5),
572
- 0 15px 50px rgba(0,0,0,0.3),
573
- 0 0 80px rgba(59,130,246,0.08);
574
- }
575
-
576
- .carousel-track {
577
- position: relative;
578
- width: 100%;
579
- }
580
-
581
- .carousel-slide {
582
- position: absolute;
583
- top: 0;
584
- left: 0;
585
- width: 100%;
586
- opacity: 0;
587
- transition: opacity 0.6s ease;
588
- pointer-events: none;
589
- }
590
-
591
- .carousel-slide.active {
592
- position: relative;
593
- opacity: 1;
594
- pointer-events: auto;
595
- }
596
-
597
- .carousel-slide img {
598
- display: block;
599
- width: 100%;
600
- height: auto;
601
- border-radius: 0;
602
- box-shadow: none;
603
- }
604
-
605
- .carousel-dots {
606
- position: absolute;
607
- bottom: 12px;
608
- left: 50%;
609
- transform: translateX(-50%);
610
- display: flex;
611
- gap: 8px;
612
- z-index: 5;
613
- }
614
-
615
- .carousel-dot {
616
- width: 8px;
617
- height: 8px;
618
- border-radius: 50%;
619
- border: none;
620
- background: rgba(255,255,255,0.4);
621
- cursor: pointer;
622
- padding: 0;
623
- transition: background 0.3s ease, transform 0.3s ease;
624
- }
625
-
626
- .carousel-dot.active {
627
- background: rgba(255,255,255,0.9);
628
- transform: scale(1.2);
629
- }
630
-
631
- .carousel-dot:hover {
632
- background: rgba(255,255,255,0.7);
633
- }
634
-
635
- .carousel-label {
636
- position: absolute;
637
- top: 16px;
638
- left: 16px;
639
- display: flex;
640
- flex-direction: column;
641
- gap: 2px;
642
- background: rgba(0,0,0,0.55);
643
- backdrop-filter: blur(12px);
644
- -webkit-backdrop-filter: blur(12px);
645
- padding: 8px 14px;
646
- border-radius: 10px;
647
- z-index: 4;
648
- pointer-events: none;
649
- }
650
-
651
- .carousel-label-title {
652
- font-size: 0.95rem;
653
- font-weight: 700;
654
- color: #fff;
655
- letter-spacing: 0.02em;
656
- }
657
-
658
- .carousel-label-desc {
659
- font-size: 0.72rem;
660
- color: rgba(255,255,255,0.75);
661
- font-weight: 400;
662
- }
663
-
664
- /* ── Divider ── */
665
- .section-divider {
666
- max-width: 200px;
667
- margin: 6rem auto;
668
- height: 1px;
669
- background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
670
- }
671
-
672
- /* ── Bento Grid ── */
673
- .bento {
674
- max-width: 1000px;
675
- margin: 6rem auto;
676
- padding: 0 2rem;
677
- display: grid;
678
- grid-template-columns: repeat(3, 1fr);
679
- grid-auto-rows: minmax(200px, auto);
680
- gap: 1rem;
681
- }
682
-
683
- .bento-card {
684
- background: var(--surface);
685
- border: 1px solid var(--border);
686
- border-radius: 20px;
687
- padding: 2rem;
688
- position: relative;
689
- overflow: hidden;
690
- transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
691
- display: flex;
692
- flex-direction: column;
693
- justify-content: flex-end;
694
- }
695
-
696
- .bento-card:hover {
697
- border-color: var(--border-hover);
698
- background: var(--surface-hover);
699
- transform: translateY(-4px);
700
- box-shadow: 0 20px 60px rgba(0,0,0,0.3);
701
- }
702
-
703
- .bento-card.wide { grid-column: span 2; }
704
- .bento-card.tall { grid-row: span 2; }
705
-
706
- .bento-visual {
707
- flex: 1;
708
- display: flex;
709
- align-items: center;
710
- justify-content: center;
711
- margin-bottom: 1.5rem;
712
- position: relative;
713
- }
714
-
715
- .bento-icon {
716
- width: 56px; height: 56px;
717
- border-radius: 16px;
718
- display: flex;
719
- align-items: center;
720
- justify-content: center;
721
- font-size: 1.5rem;
722
- }
723
-
724
- .bento-icon.purple { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)); color: var(--accent); }
725
- .bento-icon.rose { background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.05)); color: var(--rose); }
726
- .bento-icon.cyan { background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.05)); color: var(--cyan); }
727
- .bento-icon.green { background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05)); color: var(--green); }
728
- .bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
729
- .bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
730
-
731
- /* Mode toggle visual */
732
- .mode-toggle {
733
- display: flex;
734
- gap: 0;
735
- background: rgba(255,255,255,0.04);
736
- border: 1px solid var(--border);
737
- border-radius: 12px;
738
- overflow: hidden;
739
- }
740
-
741
- .mode-toggle-item {
742
- flex: 1;
743
- text-align: center;
744
- padding: 0.7rem 1rem;
745
- position: relative;
746
- transition: all 0.3s;
747
- }
748
-
749
- .mode-toggle-item:not(:last-child) {
750
- border-right: 1px solid var(--border);
751
- }
752
-
753
- .mode-toggle-item.active {
754
- background: rgba(59,130,246,0.12);
755
- }
756
-
757
- .mode-toggle-item .mode-icon {
758
- width: 32px; height: 32px;
759
- margin: 0 auto 0.4rem;
760
- border-radius: 8px;
761
- display: flex;
762
- align-items: center;
763
- justify-content: center;
764
- }
765
-
766
- .mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
767
-
768
- .mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
769
- .mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
770
- .mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
771
-
772
- .mode-toggle-item .mode-name {
773
- font-size: 0.8rem;
774
- font-weight: 600;
775
- margin-bottom: 0.2rem;
776
- color: var(--text);
777
- }
778
-
779
- .mode-toggle-item .mode-desc {
780
- font-size: 0.68rem;
781
- color: var(--text-dim);
782
- line-height: 1.4;
783
- }
784
-
785
- /* Encryption visual */
786
- .encrypt-visual {
787
- display: flex;
788
- align-items: center;
789
- gap: 0.75rem;
790
- font-family: 'JetBrains Mono', monospace;
791
- font-size: 0.72rem;
792
- color: var(--text-dim);
793
- }
794
-
795
- .encrypt-block {
796
- padding: 0.4rem 0.7rem;
797
- border-radius: 8px;
798
- background: rgba(255,255,255,0.04);
799
- border: 1px solid var(--border);
800
- white-space: nowrap;
801
- }
802
-
803
- .encrypt-arrow { color: var(--accent); font-size: 1rem; }
804
-
805
- .encrypt-block.locked {
806
- color: var(--green);
807
- border-color: rgba(52,211,153,0.2);
808
- background: rgba(52,211,153,0.05);
809
- }
810
-
811
- /* Device flow visual */
812
- .device-flow {
813
- display: flex;
814
- align-items: center;
815
- gap: 1rem;
816
- }
817
-
818
- .device-pill {
819
- display: flex;
820
- align-items: center;
821
- gap: 0.4rem;
822
- padding: 0.5rem 0.8rem;
823
- border-radius: 10px;
824
- background: rgba(255,255,255,0.04);
825
- border: 1px solid var(--border);
826
- font-size: 0.75rem;
827
- color: var(--text-mid);
828
- }
829
-
830
- .device-pill svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.6; }
831
-
832
- .flow-line {
833
- flex: 1;
834
- height: 1px;
835
- background: linear-gradient(90deg, var(--border-hover), transparent);
836
- position: relative;
837
- }
838
-
839
- .flow-line::after {
840
- content: '';
841
- position: absolute;
842
- right: 0; top: -2px;
843
- width: 5px; height: 5px;
844
- border-radius: 50%;
845
- background: var(--accent);
846
- box-shadow: 0 0 8px var(--accent-glow);
847
- animation: flowPulse 2s ease-in-out infinite;
848
- }
849
-
850
- @keyframes flowPulse {
851
- 0%, 100% { opacity: 0.4; }
852
- 50% { opacity: 1; }
853
- }
854
-
855
- .bento-card h3 {
856
- font-size: 1.05rem;
857
- font-weight: 600;
858
- margin-bottom: 0.4rem;
859
- letter-spacing: -0.01em;
860
- }
861
-
862
- .bento-card p {
863
- font-size: 0.85rem;
864
- color: var(--text-dim);
865
- line-height: 1.65;
866
- }
867
-
868
- /* ── How It Works ── */
869
- .workflow {
870
- max-width: 700px;
871
- margin: 0 auto 6rem;
872
- padding: 0 2rem;
873
- }
874
-
875
- .workflow-label {
876
- font-size: 0.7rem;
877
- font-weight: 600;
878
- letter-spacing: 0.15em;
879
- text-transform: uppercase;
880
- color: var(--accent);
881
- text-align: center;
882
- margin-bottom: 1.5rem;
883
- }
884
-
885
- .workflow h2 {
886
- font-size: clamp(1.6rem, 3.5vw, 2.2rem);
887
- font-weight: 700;
888
- text-align: center;
889
- letter-spacing: -0.03em;
890
- margin-bottom: 3rem;
891
- }
892
-
893
- .workflow-steps {
894
- position: relative;
895
- display: flex;
896
- flex-direction: column;
897
- gap: 0;
898
- }
899
-
900
- .workflow-steps::before {
901
- content: '';
902
- position: absolute;
903
- left: 23px;
904
- top: 48px;
905
- bottom: 48px;
906
- width: 1px;
907
- background: linear-gradient(180deg, var(--accent), var(--cyan), var(--green));
908
- opacity: 0.3;
909
- }
910
-
911
- .workflow-step {
912
- display: flex;
913
- align-items: flex-start;
914
- gap: 1.5rem;
915
- padding: 1.5rem 0;
916
- position: relative;
917
- }
918
-
919
- .step-marker {
920
- width: 48px; height: 48px;
921
- border-radius: 14px;
922
- display: flex;
923
- align-items: center;
924
- justify-content: center;
925
- flex-shrink: 0;
926
- font-size: 1.1rem;
927
- background: var(--surface);
928
- border: 1px solid var(--border);
929
- position: relative;
930
- z-index: 1;
931
- }
932
-
933
- .workflow-step:nth-child(1) .step-marker { border-color: rgba(59,130,246,0.3); }
934
- .workflow-step:nth-child(2) .step-marker { border-color: rgba(34,211,238,0.3); }
935
- .workflow-step:nth-child(3) .step-marker { border-color: rgba(52,211,153,0.3); }
936
-
937
- .step-content h3 {
938
- font-size: 1rem;
939
- font-weight: 600;
940
- margin-bottom: 0.35rem;
941
- letter-spacing: -0.01em;
942
- }
943
-
944
- .step-content p {
945
- font-size: 0.88rem;
946
- color: var(--text-dim);
947
- line-height: 1.7;
948
- }
949
-
950
- .step-content code {
951
- font-family: 'JetBrains Mono', monospace;
952
- font-size: 0.8rem;
953
- color: var(--green);
954
- background: rgba(52,211,153,0.08);
955
- padding: 0.15rem 0.45rem;
956
- border-radius: 5px;
957
- border: 1px solid rgba(52,211,153,0.12);
958
- }
959
-
960
- /* ── Footer ── */
961
- footer {
962
- text-align: center;
963
- padding: 3rem 2rem;
964
- color: var(--text-dim);
965
- font-size: 0.8rem;
966
- position: relative;
967
- }
968
-
969
- footer::before {
970
- content: '';
971
- display: block;
972
- max-width: 200px;
973
- margin: 0 auto 2rem;
974
- height: 1px;
975
- background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
976
- }
977
-
978
- footer a {
979
- color: var(--text-mid);
980
- text-decoration: none;
981
- transition: color 0.3s;
982
- }
983
-
984
- footer a:hover { color: var(--text); }
985
-
986
- .footer-links {
987
- display: flex;
988
- align-items: center;
989
- justify-content: center;
990
- gap: 1.5rem;
991
- margin-bottom: 1rem;
992
- }
993
-
994
- .footer-brand {
995
- font-weight: 600;
996
- letter-spacing: -0.02em;
997
- }
998
-
999
- /* ── Responsive ── */
1000
- @media (max-width: 768px) {
1001
- .bento {
1002
- grid-template-columns: 1fr;
1003
- }
1004
- .bento-card.wide { grid-column: span 1; }
1005
- .bento-card.tall { grid-row: span 1; }
1006
- .hero { padding: 5rem 1.5rem 3rem; }
1007
- .cta-group { flex-direction: column; }
1008
- .nav-links { gap: 1rem; }
1009
- .nav-links a:not(.nav-gh):not(.nav-lang) { display: none; }
1010
- .encrypt-visual { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
1011
- .encrypt-visual .encrypt-arrow { display: none; }
1012
- .encrypt-block { font-size: 0.65rem; }
1013
- .device-flow { flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
1014
- .device-flow .flow-line { display: none; }
1015
- .device-pill { font-size: 0.7rem; }
1016
- }
1017
-
1018
- @media (max-width: 640px) {
1019
- nav { padding: 1rem 1.25rem; }
1020
- .showcase {
1021
- margin-top: 3rem;
1022
- display: flex;
1023
- justify-content: center;
1024
- align-items: flex-end;
1025
- gap: 0;
1026
- }
1027
- .showcase::after { display: none; }
1028
- .device-ipad {
1029
- width: 78%;
1030
- transform: rotate(0deg);
1031
- flex-shrink: 0;
1032
- }
1033
- .device-ipad:hover { transform: translateY(-8px); }
1034
- .device-iphone {
1035
- width: 28%;
1036
- transform: rotate(0deg) translateY(5%);
1037
- margin-left: -12%;
1038
- flex-shrink: 0;
1039
- justify-self: auto;
1040
- align-self: auto;
1041
- }
1042
- .device-iphone:hover { transform: translateY(-3%); }
1043
- .carousel-dots { bottom: 8px; gap: 6px; }
1044
- .carousel-dot { width: 6px; height: 6px; }
1045
- .carousel-label { top: 8px; left: 8px; padding: 5px 10px; border-radius: 8px; }
1046
- .carousel-label-title { font-size: 0.8rem; }
1047
- .carousel-label-desc { font-size: 0.62rem; }
1048
- .terminal { margin: 0 1rem; max-width: calc(100vw - 2rem); }
1049
- .terminal-body { padding: 1rem; font-size: 0.75rem; overflow-x: auto; }
1050
- .terminal-line { gap: 0.4rem; white-space: nowrap; }
1051
- .terminal-output { font-size: 0.7rem; padding-left: 0.9rem; }
1052
- .section-divider { margin: 4rem auto; }
1053
- .bento { padding: 0 1rem; margin: 4rem auto; }
1054
- .bento-card { padding: 1.5rem; border-radius: 16px; overflow: visible; }
1055
- .encrypt-visual { gap: 0.4rem; }
1056
- .encrypt-block { padding: 0.3rem 0.5rem; font-size: 0.6rem; }
1057
- .device-flow { gap: 0.5rem; }
1058
- .device-pill { padding: 0.4rem 0.6rem; font-size: 0.65rem; }
1059
- .workflow-step { gap: 1rem; }
1060
- .step-marker { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
1061
- .workflow-steps::before { left: 19px; }
1062
- }
1063
-
1064
- .sr-only {
1065
- position: absolute;
1066
- width: 1px; height: 1px;
1067
- padding: 0; margin: -1px;
1068
- overflow: hidden;
1069
- clip: rect(0,0,0,0);
1070
- white-space: nowrap;
1071
- border: 0;
1072
- }
1073
- </style>
6
+ <title>Hello World</title>
1074
7
  </head>
1075
8
  <body>
1076
-
1077
- <!-- Ambient background -->
1078
- <div class="ambient" aria-hidden="true">
1079
- <div class="ambient-orb"></div>
1080
- <div class="ambient-orb"></div>
1081
- <div class="ambient-orb"></div>
1082
- </div>
1083
- <div class="grain" aria-hidden="true"></div>
1084
-
1085
- <div class="content">
1086
-
1087
- <!-- Nav -->
1088
- <header>
1089
- <nav>
1090
- <div class="logo">
1091
- <div class="logo-mark">A</div>
1092
- <div class="logo-text">Agent<span>Link</span></div>
1093
- </div>
1094
- <div class="nav-links">
1095
- <a href="#features">功能</a>
1096
- <a href="#how-it-works">使用方式</a>
1097
- <a href="/" class="nav-lang">EN</a>
1098
- <a href="https://github.com/yilee/agentlink" target="_blank" rel="noopener" class="nav-gh">
1099
- <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
1100
- GitHub
1101
- </a>
1102
- </div>
1103
- </nav>
1104
- </header>
1105
-
1106
- <main>
1107
-
1108
- <!-- Hero -->
1109
- <section class="hero">
1110
- <div class="hero-badge">
1111
- <div class="hero-badge-dot"></div>
1112
- 开源免费 &middot; 端到端加密
1113
- </div>
1114
- <h1>
1115
- <span class="line">Claude Code</span>
1116
- <span class="line"><em>开源版远程控制。</em></span>
1117
- </h1>
1118
- <p class="hero-sub">
1119
- 在开发机器上启动 Agent,出门遛弯期间用<strong>手机对话、组建 Agent 团队、或跑定时任务</strong> &mdash;
1120
- 不用装 App,不用注册账号,打开浏览器就能用。
1121
- </p>
1122
- <div class="cta-group">
1123
- <button class="cta-primary" onclick="copyInstall()">
1124
- <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
1125
- 一键安装
1126
- </button>
1127
- <a href="https://github.com/yilee/agentlink" target="_blank" rel="noopener" class="cta-secondary">
1128
- <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
1129
- 查看源码
1130
- </a>
1131
- </div>
1132
-
1133
- <!-- Terminal -->
1134
- <div class="terminal">
1135
- <div class="terminal-bar">
1136
- <div class="terminal-dot"></div>
1137
- <div class="terminal-dot"></div>
1138
- <div class="terminal-dot"></div>
1139
- <div class="terminal-title">终端</div>
1140
- </div>
1141
- <div class="terminal-body">
1142
- <div class="terminal-line" onclick="copyCmd('npm install -g @agent-link/agent')">
1143
- <span class="terminal-prompt">$</span>
1144
- <span class="terminal-cmd">npm install -g @agent-link/agent</span>
1145
- </div>
1146
- <div class="terminal-line" onclick="copyCmd('agentlink-client start -D')">
1147
- <span class="terminal-prompt">$</span>
1148
- <span class="terminal-cmd">agentlink-client start -D</span>
1149
- </div>
1150
- <div class="terminal-output">
1151
- 会话就绪 &rarr; <a>https://msclaude.ai/s/abc123</a>
1152
- </div>
1153
- </div>
1154
- </div>
1155
- </section>
1156
-
1157
- <!-- Device Showcase -->
1158
- <section class="showcase">
1159
- <div class="device device-ipad">
1160
- <div class="ipad-carousel">
1161
- <div class="carousel-track">
1162
- <div class="carousel-slide active">
1163
- <img src="/images/chat-iPad.webp" alt="AgenticWorker 聊天模式 iPad 界面" loading="eager">
1164
- <div class="carousel-label">
1165
- <span class="carousel-label-title">Chat</span>
1166
- <span class="carousel-label-desc">远程与 Claude Code 结对编程</span>
1167
- </div>
1168
- </div>
1169
- <div class="carousel-slide">
1170
- <img src="/images/team-iPad.webp" alt="AgenticWorker 团队模式 iPad 界面" loading="eager">
1171
- <div class="carousel-label">
1172
- <span class="carousel-label-title">Teams</span>
1173
- <span class="carousel-label-desc">并行编排多个 Agent 协同工作</span>
1174
- </div>
1175
- </div>
1176
- <div class="carousel-slide">
1177
- <img src="/images/loop-iPad.webp" alt="AgenticWorker 循环模式 iPad 界面" loading="eager">
1178
- <div class="carousel-label">
1179
- <span class="carousel-label-title">Loop</span>
1180
- <span class="carousel-label-desc">通过 Cron 定时调度自动化任务</span>
1181
- </div>
1182
- </div>
1183
- </div>
1184
- <div class="carousel-dots">
1185
- <button class="carousel-dot active" data-index="0" aria-label="聊天模式"></button>
1186
- <button class="carousel-dot" data-index="1" aria-label="团队模式"></button>
1187
- <button class="carousel-dot" data-index="2" aria-label="循环模式"></button>
1188
- </div>
1189
- </div>
1190
- </div>
1191
- <div class="device device-iphone">
1192
- <img src="/images/chat-iPhone.webp" alt="AgenticWorker 手机端界面" loading="eager">
1193
- </div>
1194
- </section>
1195
-
1196
- <div class="section-divider"></div>
1197
-
1198
- <!-- Bento Features -->
1199
- <section class="bento" id="features">
1200
- <h2 class="sr-only">功能</h2>
1201
-
1202
- <!-- Row 1: Chat | Team | Loop (wide) + Any Device -->
1203
- <div class="bento-card wide">
1204
- <div class="bento-visual">
1205
- <div class="mode-toggle">
1206
- <div class="mode-toggle-item active">
1207
- <div class="mode-icon chat-icon">
1208
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
1209
- </div>
1210
- <div class="mode-name">Chat</div>
1211
- <div class="mode-desc">交互式编程对话</div>
1212
- </div>
1213
- <div class="mode-toggle-item">
1214
- <div class="mode-icon team-icon">
1215
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
1216
- </div>
1217
- <div class="mode-name">Team</div>
1218
- <div class="mode-desc">并行子 Agent 协作</div>
1219
- </div>
1220
- <div class="mode-toggle-item">
1221
- <div class="mode-icon loop-icon">
1222
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
1223
- </div>
1224
- <div class="mode-name">Loop</div>
1225
- <div class="mode-desc">定时 Cron 任务</div>
1226
- </div>
1227
- </div>
1228
- </div>
1229
- <h3>三大模式,一个界面</h3>
1230
- <p>和 Claude 交互对话、启动 Agent 团队处理复杂任务、或用 Cron 调度定时 Loop 任务 &mdash; 全在同一个浏览器标签页里。</p>
1231
- </div>
1232
-
1233
- <div class="bento-card">
1234
- <div class="bento-visual">
1235
- <div class="bento-icon cyan">
1236
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
1237
- </div>
1238
- </div>
1239
- <h3>任何设备</h3>
1240
- <p>手机、平板、笔记本 &mdash; 有浏览器就行,随时切到你的 Claude。</p>
1241
- </div>
1242
-
1243
- <!-- Row 2: E2E Encryption (wide) + Self-Hostable -->
1244
- <div class="bento-card wide">
1245
- <div class="bento-visual">
1246
- <div class="encrypt-visual">
1247
- <div class="encrypt-block">你的代码</div>
1248
- <div class="encrypt-arrow">&rarr;</div>
1249
- <div class="encrypt-block locked">x9f#k2$mQ...</div>
1250
- <div class="encrypt-arrow">&rarr;</div>
1251
- <div class="encrypt-block">你的代码</div>
1252
- </div>
1253
- </div>
1254
- <h3>端到端加密</h3>
1255
- <p>XSalsa20-Poly1305 加密。中继服务器只是个盲转发器 &mdash; 看不到你的代码、提示词或任何数据。</p>
1256
- </div>
1257
-
1258
- <div class="bento-card">
1259
- <div class="bento-visual">
1260
- <div class="bento-icon green">
1261
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
1262
- </div>
1263
- </div>
1264
- <h3>可自建部署</h3>
1265
- <p>一条命令启动你自己的中继服务器。你的基础设施,你的规则。</p>
1266
- </div>
1267
-
1268
- <!-- Row 3: Multi-Agent Teams + Multi Session + Zero Config -->
1269
- <div class="bento-card">
1270
- <div class="bento-visual">
1271
- <div class="bento-icon blue">
1272
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
1273
- </div>
1274
- </div>
1275
- <h3>多 Agent 协作</h3>
1276
- <p>启动多个 Claude 子 Agent 并行处理复杂任务,实时看板面板、活动动态、团队历史记录。</p>
1277
- </div>
1278
-
1279
- <div class="bento-card">
1280
- <div class="bento-visual">
1281
- <div class="bento-icon blue">
1282
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="8" height="8" rx="1.5"></rect><rect x="14" y="3" width="8" height="8" rx="1.5"></rect><rect x="2" y="13" width="8" height="8" rx="1.5"></rect><rect x="14" y="13" width="8" height="8" rx="1.5"></rect></svg>
1283
- </div>
1284
- </div>
1285
- <h3>多会话并行</h3>
1286
- <p>同时跑多个对话,自由切换,互不干扰。</p>
1287
- </div>
1288
-
1289
- <div class="bento-card">
1290
- <div class="bento-visual">
1291
- <div class="bento-icon purple">
1292
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
1293
- </div>
1294
- </div>
1295
- <h3>开箱即用</h3>
1296
- <p>不用注册账号,不用配置环境。安装、启动、打开链接,三步搞定。</p>
1297
- </div>
1298
- </section>
1299
-
1300
- <div class="section-divider"></div>
1301
-
1302
- <!-- How It Works -->
1303
- <section class="workflow" id="how-it-works">
1304
- <div class="workflow-label">使用方式</div>
1305
- <h2>三步,就这么简单。</h2>
1306
- <div class="workflow-steps">
1307
- <div class="workflow-step">
1308
- <div class="step-marker">01</div>
1309
- <div class="step-content">
1310
- <h3>启动 Agent</h3>
1311
- <p>在项目目录下运行 <code>agentlink-client start -D</code>,终端会打印一个会话链接。</p>
1312
- </div>
1313
- </div>
1314
- <div class="workflow-step">
1315
- <div class="step-marker">02</div>
1316
- <div class="step-content">
1317
- <h3>在任意设备打开链接</h3>
1318
- <p>手机、平板、别人的电脑 &mdash; 只要有浏览器就行。所有通信自动端到端加密,中继服务器看不到任何内容。</p>
1319
- </div>
1320
- </div>
1321
- <div class="workflow-step">
1322
- <div class="step-marker">03</div>
1323
- <div class="step-content">
1324
- <h3>对话、协作、自动化</h3>
1325
- <p>交互式编程、启动 Agent 团队处理复杂任务、或设置定时 Loop 任务 &mdash; 同一个链接,完整历史随时恢复。</p>
1326
- </div>
1327
- </div>
1328
- </div>
1329
- </section>
1330
-
1331
- </main>
1332
-
1333
- <footer>
1334
- <div class="footer-links">
1335
- <span class="footer-brand">AgenticWorker</span>
1336
- <a href="https://github.com/yilee/agentlink" rel="noopener">GitHub</a>
1337
- </div>
1338
- <p>开源免费,永远免费。为随时随地写代码的开发者而生。</p>
1339
- </footer>
1340
-
1341
- </div>
1342
-
1343
- <!-- Toast for copy -->
1344
- <div class="terminal-copy-toast" id="copyToast">已复制到剪贴板</div>
1345
-
1346
- <script>
1347
- function copyCmd(text) {
1348
- navigator.clipboard.writeText(text);
1349
- showToast();
1350
- }
1351
-
1352
- function copyInstall() {
1353
- navigator.clipboard.writeText('npm install -g @agent-link/agent && agentlink-client start -D');
1354
- showToast();
1355
- }
1356
-
1357
- function showToast() {
1358
- const toast = document.getElementById('copyToast');
1359
- toast.classList.add('show');
1360
- setTimeout(() => toast.classList.remove('show'), 1800);
1361
- }
1362
-
1363
- // iPad carousel
1364
- (function() {
1365
- const slides = document.querySelectorAll('.carousel-slide');
1366
- const dots = document.querySelectorAll('.carousel-dot');
1367
- if (!slides.length) return;
1368
- let current = 0;
1369
- let interval;
1370
-
1371
- function goTo(i) {
1372
- slides[current].classList.remove('active');
1373
- dots[current].classList.remove('active');
1374
- current = (i + slides.length) % slides.length;
1375
- slides[current].classList.add('active');
1376
- dots[current].classList.add('active');
1377
- }
1378
-
1379
- function startAuto() {
1380
- interval = setInterval(() => goTo(current + 1), 4000);
1381
- }
1382
-
1383
- function resetAuto() {
1384
- clearInterval(interval);
1385
- startAuto();
1386
- }
1387
-
1388
- dots.forEach(dot => {
1389
- dot.addEventListener('click', () => {
1390
- goTo(Number(dot.dataset.index));
1391
- resetAuto();
1392
- });
1393
- });
1394
-
1395
- // Touch/swipe support
1396
- const track = document.querySelector('.ipad-carousel');
1397
- let startX = 0, startY = 0, dragging = false;
1398
-
1399
- track.addEventListener('touchstart', e => {
1400
- startX = e.touches[0].clientX;
1401
- startY = e.touches[0].clientY;
1402
- dragging = true;
1403
- }, { passive: true });
1404
-
1405
- track.addEventListener('touchend', e => {
1406
- if (!dragging) return;
1407
- dragging = false;
1408
- const dx = e.changedTouches[0].clientX - startX;
1409
- const dy = e.changedTouches[0].clientY - startY;
1410
- if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
1411
- goTo(dx < 0 ? current + 1 : current - 1);
1412
- resetAuto();
1413
- }
1414
- }, { passive: true });
1415
-
1416
- // Mouse drag support for desktop
1417
- track.addEventListener('mousedown', e => {
1418
- startX = e.clientX;
1419
- dragging = true;
1420
- track.style.cursor = 'grabbing';
1421
- });
1422
-
1423
- document.addEventListener('mouseup', e => {
1424
- if (!dragging) return;
1425
- dragging = false;
1426
- track.style.cursor = '';
1427
- const dx = e.clientX - startX;
1428
- if (Math.abs(dx) > 50) {
1429
- goTo(dx < 0 ? current + 1 : current - 1);
1430
- resetAuto();
1431
- }
1432
- });
1433
-
1434
- startAuto();
1435
- })();
1436
- </script>
1437
-
9
+ <h1>Hello World</h1>
1438
10
  </body>
1439
11
  </html>