@agent-link/server 0.1.204 → 0.1.206
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/web/dist/assets/{index-sKTOJZUz.js → index-D7mATZ3z.js} +17 -17
- package/web/dist/assets/index-D7mATZ3z.js.map +1 -0
- package/web/dist/index.html +1 -1
- package/web/dist/landing.html +1430 -2
- package/web/dist/landing.zh.html +1430 -2
- package/web/dist/assets/index-sKTOJZUz.js.map +0 -1
package/web/dist/landing.html
CHANGED
|
@@ -3,9 +3,1437 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>
|
|
6
|
+
<title>AgenticWorker — Remote Control for Claude Code</title>
|
|
7
|
+
<meta name="description" content="Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.">
|
|
8
|
+
<meta name="keywords" content="Claude Code, remote control, browser IDE, AI coding assistant, AgenticWorker, end-to-end encrypted, self-hosted, mobile coding, multi-agent, scheduled tasks, cron">
|
|
9
|
+
<link rel="canonical" href="https://msclaude.ai/">
|
|
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 — Remote Control for Claude Code">
|
|
16
|
+
<meta property="og:description" content="Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.">
|
|
17
|
+
<meta property="og:url" content="https://msclaude.ai/">
|
|
18
|
+
<meta property="og:image" content="https://msclaude.ai/iPad.png">
|
|
19
|
+
<meta property="og:site_name" content="AgenticWorker">
|
|
20
|
+
<!-- Twitter Card -->
|
|
21
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
22
|
+
<meta name="twitter:title" content="AgenticWorker — Remote Control for Claude Code">
|
|
23
|
+
<meta name="twitter:description" content="Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.">
|
|
24
|
+
<meta name="twitter:image" content="https://msclaude.ai/iPad.png">
|
|
25
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
26
|
+
<script type="application/ld+json">
|
|
27
|
+
{
|
|
28
|
+
"@context": "https://schema.org",
|
|
29
|
+
"@type": "SoftwareApplication",
|
|
30
|
+
"name": "AgenticWorker",
|
|
31
|
+
"description": "Remote control for Claude Code. Chat, spawn agent teams, or schedule recurring tasks — from your phone or any browser. Multi-session, end-to-end encrypted.",
|
|
32
|
+
"url": "https://msclaude.ai/",
|
|
33
|
+
"applicationCategory": "DeveloperApplication",
|
|
34
|
+
"operatingSystem": "Windows, macOS, Linux",
|
|
35
|
+
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
|
|
36
|
+
"screenshot": "https://msclaude.ai/iPad.png"
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
<style>
|
|
40
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');
|
|
41
|
+
|
|
42
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
43
|
+
|
|
44
|
+
:root {
|
|
45
|
+
--bg: #06080f;
|
|
46
|
+
--surface: rgba(255,255,255,0.03);
|
|
47
|
+
--surface-hover: rgba(255,255,255,0.06);
|
|
48
|
+
--border: rgba(255,255,255,0.06);
|
|
49
|
+
--border-hover: rgba(255,255,255,0.12);
|
|
50
|
+
--text: #eaeaea;
|
|
51
|
+
--text-dim: rgba(255,255,255,0.45);
|
|
52
|
+
--text-mid: rgba(255,255,255,0.65);
|
|
53
|
+
--accent: #3b82f6;
|
|
54
|
+
--accent-soft: rgba(59,130,246,0.15);
|
|
55
|
+
--accent-glow: rgba(59,130,246,0.4);
|
|
56
|
+
--rose: #f43f5e;
|
|
57
|
+
--amber: #f59e0b;
|
|
58
|
+
--cyan: #22d3ee;
|
|
59
|
+
--green: #34d399;
|
|
60
|
+
--blue: #60a5fa;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
body {
|
|
64
|
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
65
|
+
background: var(--bg);
|
|
66
|
+
color: var(--text);
|
|
67
|
+
line-height: 1.6;
|
|
68
|
+
min-height: 100vh;
|
|
69
|
+
overflow-x: hidden;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* ── Ambient Background ── */
|
|
73
|
+
.ambient {
|
|
74
|
+
position: fixed;
|
|
75
|
+
top: 0;
|
|
76
|
+
left: 0;
|
|
77
|
+
width: 100%;
|
|
78
|
+
height: 100%;
|
|
79
|
+
pointer-events: none;
|
|
80
|
+
z-index: 0;
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.ambient-orb {
|
|
85
|
+
position: absolute;
|
|
86
|
+
border-radius: 50%;
|
|
87
|
+
filter: blur(120px);
|
|
88
|
+
opacity: 0.35;
|
|
89
|
+
animation: float 20s ease-in-out infinite;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.ambient-orb:nth-child(1) {
|
|
93
|
+
width: 600px; height: 600px;
|
|
94
|
+
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
|
|
95
|
+
top: -10%; left: -5%;
|
|
96
|
+
animation-delay: 0s;
|
|
97
|
+
animation-duration: 25s;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.ambient-orb:nth-child(2) {
|
|
101
|
+
width: 500px; height: 500px;
|
|
102
|
+
background: radial-gradient(circle, var(--rose) 0%, transparent 70%);
|
|
103
|
+
top: 20%; right: -10%;
|
|
104
|
+
animation-delay: -8s;
|
|
105
|
+
animation-duration: 22s;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.ambient-orb:nth-child(3) {
|
|
109
|
+
width: 400px; height: 400px;
|
|
110
|
+
background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
|
|
111
|
+
bottom: 10%; left: 20%;
|
|
112
|
+
animation-delay: -15s;
|
|
113
|
+
animation-duration: 28s;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@keyframes float {
|
|
117
|
+
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
118
|
+
25% { transform: translate(30px, -40px) scale(1.05); }
|
|
119
|
+
50% { transform: translate(-20px, 20px) scale(0.95); }
|
|
120
|
+
75% { transform: translate(40px, 10px) scale(1.02); }
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ── Grain overlay ── */
|
|
124
|
+
.grain {
|
|
125
|
+
position: fixed;
|
|
126
|
+
top: 0; left: 0;
|
|
127
|
+
width: 100%; height: 100%;
|
|
128
|
+
pointer-events: none;
|
|
129
|
+
z-index: 1;
|
|
130
|
+
opacity: 0.025;
|
|
131
|
+
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");
|
|
132
|
+
background-repeat: repeat;
|
|
133
|
+
background-size: 256px 256px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* ── Content wrapper ── */
|
|
137
|
+
.content {
|
|
138
|
+
position: relative;
|
|
139
|
+
z-index: 2;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ── Nav ── */
|
|
143
|
+
nav {
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
justify-content: space-between;
|
|
147
|
+
padding: 1.5rem 2.5rem;
|
|
148
|
+
max-width: 1200px;
|
|
149
|
+
margin: 0 auto;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.logo {
|
|
153
|
+
font-size: 1.2rem;
|
|
154
|
+
font-weight: 700;
|
|
155
|
+
letter-spacing: -0.03em;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
gap: 0.5rem;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.logo-mark {
|
|
162
|
+
width: 28px; height: 28px;
|
|
163
|
+
border-radius: 8px;
|
|
164
|
+
background: linear-gradient(135deg, var(--accent), var(--rose));
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
justify-content: center;
|
|
168
|
+
font-size: 0.75rem;
|
|
169
|
+
font-weight: 800;
|
|
170
|
+
color: #fff;
|
|
171
|
+
box-shadow: 0 0 20px var(--accent-glow);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.logo-text span {
|
|
175
|
+
background: linear-gradient(135deg, var(--accent), var(--rose));
|
|
176
|
+
-webkit-background-clip: text;
|
|
177
|
+
-webkit-text-fill-color: transparent;
|
|
178
|
+
background-clip: text;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.nav-links {
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
gap: 2rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.nav-links a {
|
|
188
|
+
color: var(--text-dim);
|
|
189
|
+
text-decoration: none;
|
|
190
|
+
font-size: 0.85rem;
|
|
191
|
+
font-weight: 500;
|
|
192
|
+
transition: color 0.3s;
|
|
193
|
+
letter-spacing: 0.02em;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.nav-links a:hover { color: var(--text); }
|
|
197
|
+
|
|
198
|
+
.nav-gh {
|
|
199
|
+
display: flex;
|
|
200
|
+
align-items: center;
|
|
201
|
+
gap: 0.4rem;
|
|
202
|
+
background: var(--surface);
|
|
203
|
+
border: 1px solid var(--border);
|
|
204
|
+
border-radius: 8px;
|
|
205
|
+
padding: 0.45rem 0.85rem;
|
|
206
|
+
transition: all 0.3s;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.nav-gh:hover {
|
|
210
|
+
background: var(--surface-hover);
|
|
211
|
+
border-color: var(--border-hover);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.nav-gh svg { width: 16px; height: 16px; fill: currentColor; }
|
|
215
|
+
|
|
216
|
+
.nav-lang {
|
|
217
|
+
font-size: 0.8rem;
|
|
218
|
+
color: var(--text-dim);
|
|
219
|
+
padding: 0.35rem 0.7rem;
|
|
220
|
+
border: 1px solid var(--border);
|
|
221
|
+
border-radius: 6px;
|
|
222
|
+
transition: all 0.3s;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.nav-lang:hover {
|
|
226
|
+
color: var(--text);
|
|
227
|
+
border-color: var(--border-hover);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* ── Hero ── */
|
|
231
|
+
.hero {
|
|
232
|
+
text-align: center;
|
|
233
|
+
padding: 5rem 2rem 4rem;
|
|
234
|
+
max-width: 900px;
|
|
235
|
+
margin: 0 auto;
|
|
236
|
+
position: relative;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.hero-badge {
|
|
240
|
+
display: inline-flex;
|
|
241
|
+
align-items: center;
|
|
242
|
+
gap: 0.5rem;
|
|
243
|
+
background: var(--accent-soft);
|
|
244
|
+
border: 1px solid rgba(59,130,246,0.2);
|
|
245
|
+
border-radius: 100px;
|
|
246
|
+
padding: 0.4rem 1rem 0.4rem 0.5rem;
|
|
247
|
+
font-size: 0.8rem;
|
|
248
|
+
color: var(--accent);
|
|
249
|
+
font-weight: 500;
|
|
250
|
+
margin-bottom: 2.5rem;
|
|
251
|
+
letter-spacing: 0.01em;
|
|
252
|
+
animation: fadeInUp 0.8s ease-out;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.hero-badge-dot {
|
|
256
|
+
width: 8px; height: 8px;
|
|
257
|
+
border-radius: 50%;
|
|
258
|
+
background: var(--green);
|
|
259
|
+
box-shadow: 0 0 8px var(--green);
|
|
260
|
+
animation: pulse 2s ease-in-out infinite;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
@keyframes pulse {
|
|
264
|
+
0%, 100% { opacity: 1; transform: scale(1); }
|
|
265
|
+
50% { opacity: 0.6; transform: scale(0.85); }
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.hero h1 {
|
|
269
|
+
font-size: clamp(2.8rem, 6vw, 4.5rem);
|
|
270
|
+
font-weight: 800;
|
|
271
|
+
letter-spacing: -0.04em;
|
|
272
|
+
line-height: 1.08;
|
|
273
|
+
margin-bottom: 1.75rem;
|
|
274
|
+
animation: fadeInUp 0.8s ease-out 0.1s both;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.hero h1 .line {
|
|
278
|
+
display: block;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.hero h1 em {
|
|
282
|
+
font-style: normal;
|
|
283
|
+
position: relative;
|
|
284
|
+
background: linear-gradient(135deg, var(--accent), #60a5fa, var(--rose));
|
|
285
|
+
background-size: 200% 200%;
|
|
286
|
+
-webkit-background-clip: text;
|
|
287
|
+
-webkit-text-fill-color: transparent;
|
|
288
|
+
background-clip: text;
|
|
289
|
+
animation: shimmer 6s ease-in-out infinite;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
@keyframes shimmer {
|
|
293
|
+
0%, 100% { background-position: 0% 50%; }
|
|
294
|
+
50% { background-position: 100% 50%; }
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.hero-sub {
|
|
298
|
+
font-size: 1.2rem;
|
|
299
|
+
color: var(--text-mid);
|
|
300
|
+
max-width: 600px;
|
|
301
|
+
margin: 0 auto 3rem;
|
|
302
|
+
font-weight: 400;
|
|
303
|
+
line-height: 1.7;
|
|
304
|
+
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.hero-sub strong {
|
|
308
|
+
color: var(--text);
|
|
309
|
+
font-weight: 500;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
@keyframes fadeInUp {
|
|
313
|
+
from { opacity: 0; transform: translateY(20px); }
|
|
314
|
+
to { opacity: 1; transform: translateY(0); }
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* ── CTA Group ── */
|
|
318
|
+
.cta-group {
|
|
319
|
+
display: flex;
|
|
320
|
+
align-items: center;
|
|
321
|
+
justify-content: center;
|
|
322
|
+
gap: 1rem;
|
|
323
|
+
margin-bottom: 1.5rem;
|
|
324
|
+
animation: fadeInUp 0.8s ease-out 0.3s both;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.cta-primary {
|
|
328
|
+
display: inline-flex;
|
|
329
|
+
align-items: center;
|
|
330
|
+
gap: 0.5rem;
|
|
331
|
+
background: linear-gradient(135deg, var(--accent), #60a5fa);
|
|
332
|
+
color: #fff;
|
|
333
|
+
font-weight: 600;
|
|
334
|
+
font-size: 0.95rem;
|
|
335
|
+
padding: 0.8rem 1.75rem;
|
|
336
|
+
border-radius: 12px;
|
|
337
|
+
text-decoration: none;
|
|
338
|
+
transition: all 0.3s;
|
|
339
|
+
box-shadow: 0 0 30px rgba(59,130,246,0.3), 0 4px 15px rgba(0,0,0,0.3);
|
|
340
|
+
border: none;
|
|
341
|
+
cursor: pointer;
|
|
342
|
+
font-family: inherit;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.cta-primary:hover {
|
|
346
|
+
transform: translateY(-2px);
|
|
347
|
+
box-shadow: 0 0 40px rgba(59,130,246,0.45), 0 8px 25px rgba(0,0,0,0.4);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.cta-secondary {
|
|
351
|
+
display: inline-flex;
|
|
352
|
+
align-items: center;
|
|
353
|
+
gap: 0.5rem;
|
|
354
|
+
background: var(--surface);
|
|
355
|
+
border: 1px solid var(--border);
|
|
356
|
+
color: var(--text);
|
|
357
|
+
font-weight: 500;
|
|
358
|
+
font-size: 0.95rem;
|
|
359
|
+
padding: 0.8rem 1.75rem;
|
|
360
|
+
border-radius: 12px;
|
|
361
|
+
text-decoration: none;
|
|
362
|
+
transition: all 0.3s;
|
|
363
|
+
cursor: pointer;
|
|
364
|
+
font-family: inherit;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.cta-secondary:hover {
|
|
368
|
+
background: var(--surface-hover);
|
|
369
|
+
border-color: var(--border-hover);
|
|
370
|
+
transform: translateY(-2px);
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.cta-secondary svg { width: 18px; height: 18px; fill: currentColor; }
|
|
374
|
+
|
|
375
|
+
/* ── Terminal Install ── */
|
|
376
|
+
.terminal {
|
|
377
|
+
max-width: 520px;
|
|
378
|
+
margin: 0 auto;
|
|
379
|
+
background: rgba(10,10,20,0.7);
|
|
380
|
+
backdrop-filter: blur(20px);
|
|
381
|
+
-webkit-backdrop-filter: blur(20px);
|
|
382
|
+
border: 1px solid var(--border);
|
|
383
|
+
border-radius: 14px;
|
|
384
|
+
overflow: hidden;
|
|
385
|
+
animation: fadeInUp 0.8s ease-out 0.4s both;
|
|
386
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.terminal-bar {
|
|
390
|
+
display: flex;
|
|
391
|
+
align-items: center;
|
|
392
|
+
gap: 6px;
|
|
393
|
+
padding: 0.75rem 1rem;
|
|
394
|
+
background: rgba(255,255,255,0.03);
|
|
395
|
+
border-bottom: 1px solid var(--border);
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.terminal-dot {
|
|
399
|
+
width: 10px; height: 10px;
|
|
400
|
+
border-radius: 50%;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.terminal-dot:nth-child(1) { background: #ff5f57; }
|
|
404
|
+
.terminal-dot:nth-child(2) { background: #ffbd2e; }
|
|
405
|
+
.terminal-dot:nth-child(3) { background: #28c840; }
|
|
406
|
+
|
|
407
|
+
.terminal-title {
|
|
408
|
+
flex: 1;
|
|
409
|
+
text-align: center;
|
|
410
|
+
font-size: 0.72rem;
|
|
411
|
+
color: var(--text-dim);
|
|
412
|
+
font-weight: 500;
|
|
413
|
+
letter-spacing: 0.03em;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.terminal-body {
|
|
417
|
+
padding: 1.25rem 1.5rem;
|
|
418
|
+
font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
|
|
419
|
+
font-size: 0.85rem;
|
|
420
|
+
line-height: 1.8;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.terminal-line {
|
|
424
|
+
display: flex;
|
|
425
|
+
align-items: center;
|
|
426
|
+
gap: 0.5rem;
|
|
427
|
+
cursor: pointer;
|
|
428
|
+
padding: 0.15rem 0.35rem;
|
|
429
|
+
margin: 0 -0.35rem;
|
|
430
|
+
border-radius: 6px;
|
|
431
|
+
transition: background 0.2s;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
.terminal-line:hover { background: rgba(255,255,255,0.04); }
|
|
435
|
+
|
|
436
|
+
.terminal-prompt { color: var(--accent); user-select: none; }
|
|
437
|
+
.terminal-cmd { color: var(--green); }
|
|
438
|
+
|
|
439
|
+
.terminal-output {
|
|
440
|
+
color: var(--text-dim);
|
|
441
|
+
font-size: 0.8rem;
|
|
442
|
+
padding-left: 1.1rem;
|
|
443
|
+
margin-top: 0.15rem;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.terminal-output a {
|
|
447
|
+
color: var(--cyan);
|
|
448
|
+
text-decoration: none;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.terminal-copy-toast {
|
|
452
|
+
position: fixed;
|
|
453
|
+
bottom: 2rem;
|
|
454
|
+
left: 50%;
|
|
455
|
+
transform: translateX(-50%) translateY(20px);
|
|
456
|
+
background: var(--accent);
|
|
457
|
+
color: #fff;
|
|
458
|
+
padding: 0.5rem 1.25rem;
|
|
459
|
+
border-radius: 8px;
|
|
460
|
+
font-size: 0.8rem;
|
|
461
|
+
font-weight: 500;
|
|
462
|
+
opacity: 0;
|
|
463
|
+
transition: all 0.3s;
|
|
464
|
+
pointer-events: none;
|
|
465
|
+
z-index: 100;
|
|
466
|
+
font-family: 'Inter', sans-serif;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.terminal-copy-toast.show {
|
|
470
|
+
opacity: 1;
|
|
471
|
+
transform: translateX(-50%) translateY(0);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
/* ── Showcase ── */
|
|
475
|
+
.showcase {
|
|
476
|
+
max-width: 1000px;
|
|
477
|
+
margin: 6rem auto 0;
|
|
478
|
+
padding: 0 2rem;
|
|
479
|
+
position: relative;
|
|
480
|
+
display: grid;
|
|
481
|
+
grid-template-columns: 5fr 2fr;
|
|
482
|
+
align-items: end;
|
|
483
|
+
gap: 2rem;
|
|
484
|
+
animation: fadeInUp 1s ease-out 0.6s both;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.showcase::before {
|
|
488
|
+
content: '';
|
|
489
|
+
position: absolute;
|
|
490
|
+
top: 50%;
|
|
491
|
+
left: 50%;
|
|
492
|
+
transform: translate(-50%, -50%);
|
|
493
|
+
width: 120%;
|
|
494
|
+
height: 120%;
|
|
495
|
+
background:
|
|
496
|
+
radial-gradient(ellipse at 35% 50%, rgba(59,130,246,0.12) 0%, transparent 55%),
|
|
497
|
+
radial-gradient(ellipse at 65% 50%, rgba(245,158,11,0.08) 0%, transparent 55%);
|
|
498
|
+
pointer-events: none;
|
|
499
|
+
z-index: 0;
|
|
500
|
+
filter: blur(60px);
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
/* Subtle connecting line between devices */
|
|
504
|
+
.showcase::after {
|
|
505
|
+
content: '';
|
|
506
|
+
position: absolute;
|
|
507
|
+
top: 50%;
|
|
508
|
+
left: 50%;
|
|
509
|
+
transform: translate(-50%, -50%);
|
|
510
|
+
width: 1px;
|
|
511
|
+
height: 35%;
|
|
512
|
+
background: linear-gradient(180deg, transparent, rgba(59,130,246,0.2), rgba(245,158,11,0.2), transparent);
|
|
513
|
+
pointer-events: none;
|
|
514
|
+
z-index: 0;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.device {
|
|
518
|
+
position: relative;
|
|
519
|
+
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.device:hover {
|
|
523
|
+
transform: translateY(-8px);
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.device img, .device picture { display: block; width: 100%; height: auto; }
|
|
527
|
+
|
|
528
|
+
.device-ipad {
|
|
529
|
+
width: 100%;
|
|
530
|
+
z-index: 1;
|
|
531
|
+
transform: rotate(-1deg);
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.device-ipad:hover {
|
|
535
|
+
transform: rotate(-1deg) translateY(-8px);
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.device-ipad img {
|
|
539
|
+
border-radius: 0;
|
|
540
|
+
box-shadow: none;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.device-iphone {
|
|
544
|
+
width: 90%;
|
|
545
|
+
z-index: 2;
|
|
546
|
+
justify-self: center;
|
|
547
|
+
align-self: center;
|
|
548
|
+
transform: rotate(2deg);
|
|
549
|
+
}
|
|
550
|
+
|
|
551
|
+
.device-iphone:hover {
|
|
552
|
+
transform: rotate(2deg) translateY(-8px);
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.device-iphone img {
|
|
556
|
+
border-radius: 12%;
|
|
557
|
+
box-shadow:
|
|
558
|
+
0 45px 100px rgba(0,0,0,0.55),
|
|
559
|
+
0 15px 50px rgba(0,0,0,0.35),
|
|
560
|
+
0 0 80px rgba(245,158,11,0.08);
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
/* ── iPad Carousel ── */
|
|
564
|
+
.ipad-carousel {
|
|
565
|
+
position: relative;
|
|
566
|
+
width: 100%;
|
|
567
|
+
overflow: hidden;
|
|
568
|
+
border-radius: 4.2%;
|
|
569
|
+
box-shadow:
|
|
570
|
+
0 40px 100px rgba(0,0,0,0.5),
|
|
571
|
+
0 15px 50px rgba(0,0,0,0.3),
|
|
572
|
+
0 0 80px rgba(59,130,246,0.08);
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
.carousel-track {
|
|
576
|
+
position: relative;
|
|
577
|
+
width: 100%;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.carousel-slide {
|
|
581
|
+
position: absolute;
|
|
582
|
+
top: 0;
|
|
583
|
+
left: 0;
|
|
584
|
+
width: 100%;
|
|
585
|
+
opacity: 0;
|
|
586
|
+
transition: opacity 0.6s ease;
|
|
587
|
+
pointer-events: none;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.carousel-slide.active {
|
|
591
|
+
position: relative;
|
|
592
|
+
opacity: 1;
|
|
593
|
+
pointer-events: auto;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.carousel-slide img {
|
|
597
|
+
display: block;
|
|
598
|
+
width: 100%;
|
|
599
|
+
height: auto;
|
|
600
|
+
border-radius: 0;
|
|
601
|
+
box-shadow: none;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.carousel-dots {
|
|
605
|
+
position: absolute;
|
|
606
|
+
bottom: 12px;
|
|
607
|
+
left: 50%;
|
|
608
|
+
transform: translateX(-50%);
|
|
609
|
+
display: flex;
|
|
610
|
+
gap: 8px;
|
|
611
|
+
z-index: 5;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.carousel-dot {
|
|
615
|
+
width: 8px;
|
|
616
|
+
height: 8px;
|
|
617
|
+
border-radius: 50%;
|
|
618
|
+
border: none;
|
|
619
|
+
background: rgba(255,255,255,0.4);
|
|
620
|
+
cursor: pointer;
|
|
621
|
+
padding: 0;
|
|
622
|
+
transition: background 0.3s ease, transform 0.3s ease;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.carousel-dot.active {
|
|
626
|
+
background: rgba(255,255,255,0.9);
|
|
627
|
+
transform: scale(1.2);
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.carousel-dot:hover {
|
|
631
|
+
background: rgba(255,255,255,0.7);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.carousel-label {
|
|
635
|
+
position: absolute;
|
|
636
|
+
top: 16px;
|
|
637
|
+
left: 16px;
|
|
638
|
+
display: flex;
|
|
639
|
+
flex-direction: column;
|
|
640
|
+
gap: 2px;
|
|
641
|
+
background: rgba(0,0,0,0.55);
|
|
642
|
+
backdrop-filter: blur(12px);
|
|
643
|
+
-webkit-backdrop-filter: blur(12px);
|
|
644
|
+
padding: 8px 14px;
|
|
645
|
+
border-radius: 10px;
|
|
646
|
+
z-index: 4;
|
|
647
|
+
pointer-events: none;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.carousel-label-title {
|
|
651
|
+
font-size: 0.95rem;
|
|
652
|
+
font-weight: 700;
|
|
653
|
+
color: #fff;
|
|
654
|
+
letter-spacing: 0.02em;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.carousel-label-desc {
|
|
658
|
+
font-size: 0.72rem;
|
|
659
|
+
color: rgba(255,255,255,0.75);
|
|
660
|
+
font-weight: 400;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
/* ── Divider ── */
|
|
664
|
+
.section-divider {
|
|
665
|
+
max-width: 200px;
|
|
666
|
+
margin: 6rem auto;
|
|
667
|
+
height: 1px;
|
|
668
|
+
background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
/* ── Bento Grid ── */
|
|
672
|
+
.bento {
|
|
673
|
+
max-width: 1000px;
|
|
674
|
+
margin: 6rem auto;
|
|
675
|
+
padding: 0 2rem;
|
|
676
|
+
display: grid;
|
|
677
|
+
grid-template-columns: repeat(3, 1fr);
|
|
678
|
+
grid-auto-rows: minmax(200px, auto);
|
|
679
|
+
gap: 1rem;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.bento-card {
|
|
683
|
+
background: var(--surface);
|
|
684
|
+
border: 1px solid var(--border);
|
|
685
|
+
border-radius: 20px;
|
|
686
|
+
padding: 2rem;
|
|
687
|
+
position: relative;
|
|
688
|
+
overflow: hidden;
|
|
689
|
+
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
690
|
+
display: flex;
|
|
691
|
+
flex-direction: column;
|
|
692
|
+
justify-content: flex-end;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.bento-card:hover {
|
|
696
|
+
border-color: var(--border-hover);
|
|
697
|
+
background: var(--surface-hover);
|
|
698
|
+
transform: translateY(-4px);
|
|
699
|
+
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.bento-card.wide { grid-column: span 2; }
|
|
703
|
+
.bento-card.tall { grid-row: span 2; }
|
|
704
|
+
|
|
705
|
+
.bento-visual {
|
|
706
|
+
flex: 1;
|
|
707
|
+
display: flex;
|
|
708
|
+
align-items: center;
|
|
709
|
+
justify-content: center;
|
|
710
|
+
margin-bottom: 1.5rem;
|
|
711
|
+
position: relative;
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
.bento-icon {
|
|
715
|
+
width: 56px; height: 56px;
|
|
716
|
+
border-radius: 16px;
|
|
717
|
+
display: flex;
|
|
718
|
+
align-items: center;
|
|
719
|
+
justify-content: center;
|
|
720
|
+
font-size: 1.5rem;
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.bento-icon.purple { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(59,130,246,0.05)); color: var(--accent); }
|
|
724
|
+
.bento-icon.rose { background: linear-gradient(135deg, rgba(244,63,94,0.2), rgba(244,63,94,0.05)); color: var(--rose); }
|
|
725
|
+
.bento-icon.cyan { background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(34,211,238,0.05)); color: var(--cyan); }
|
|
726
|
+
.bento-icon.green { background: linear-gradient(135deg, rgba(52,211,153,0.2), rgba(52,211,153,0.05)); color: var(--green); }
|
|
727
|
+
.bento-icon.amber { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.05)); color: var(--amber); }
|
|
728
|
+
.bento-icon.blue { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(96,165,250,0.05)); color: var(--blue); }
|
|
729
|
+
|
|
730
|
+
/* Mode toggle visual */
|
|
731
|
+
.mode-toggle {
|
|
732
|
+
display: flex;
|
|
733
|
+
gap: 0;
|
|
734
|
+
background: rgba(255,255,255,0.04);
|
|
735
|
+
border: 1px solid var(--border);
|
|
736
|
+
border-radius: 12px;
|
|
737
|
+
overflow: hidden;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
.mode-toggle-item {
|
|
741
|
+
flex: 1;
|
|
742
|
+
text-align: center;
|
|
743
|
+
padding: 0.7rem 1rem;
|
|
744
|
+
position: relative;
|
|
745
|
+
transition: all 0.3s;
|
|
746
|
+
}
|
|
747
|
+
|
|
748
|
+
.mode-toggle-item:not(:last-child) {
|
|
749
|
+
border-right: 1px solid var(--border);
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
.mode-toggle-item.active {
|
|
753
|
+
background: rgba(59,130,246,0.12);
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.mode-toggle-item .mode-icon {
|
|
757
|
+
width: 32px; height: 32px;
|
|
758
|
+
margin: 0 auto 0.4rem;
|
|
759
|
+
border-radius: 8px;
|
|
760
|
+
display: flex;
|
|
761
|
+
align-items: center;
|
|
762
|
+
justify-content: center;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.mode-toggle-item .mode-icon svg { width: 18px; height: 18px; }
|
|
766
|
+
|
|
767
|
+
.mode-toggle-item .mode-icon.chat-icon { background: rgba(59,130,246,0.15); color: var(--accent); }
|
|
768
|
+
.mode-toggle-item .mode-icon.team-icon { background: rgba(96,165,250,0.15); color: var(--blue); }
|
|
769
|
+
.mode-toggle-item .mode-icon.loop-icon { background: rgba(52,211,153,0.15); color: var(--green); }
|
|
770
|
+
|
|
771
|
+
.mode-toggle-item .mode-name {
|
|
772
|
+
font-size: 0.8rem;
|
|
773
|
+
font-weight: 600;
|
|
774
|
+
margin-bottom: 0.2rem;
|
|
775
|
+
color: var(--text);
|
|
776
|
+
}
|
|
777
|
+
|
|
778
|
+
.mode-toggle-item .mode-desc {
|
|
779
|
+
font-size: 0.68rem;
|
|
780
|
+
color: var(--text-dim);
|
|
781
|
+
line-height: 1.4;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
/* Encryption visual */
|
|
785
|
+
.encrypt-visual {
|
|
786
|
+
display: flex;
|
|
787
|
+
align-items: center;
|
|
788
|
+
gap: 0.75rem;
|
|
789
|
+
font-family: 'JetBrains Mono', monospace;
|
|
790
|
+
font-size: 0.72rem;
|
|
791
|
+
color: var(--text-dim);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.encrypt-block {
|
|
795
|
+
padding: 0.4rem 0.7rem;
|
|
796
|
+
border-radius: 8px;
|
|
797
|
+
background: rgba(255,255,255,0.04);
|
|
798
|
+
border: 1px solid var(--border);
|
|
799
|
+
white-space: nowrap;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.encrypt-arrow { color: var(--accent); font-size: 1rem; }
|
|
803
|
+
|
|
804
|
+
.encrypt-block.locked {
|
|
805
|
+
color: var(--green);
|
|
806
|
+
border-color: rgba(52,211,153,0.2);
|
|
807
|
+
background: rgba(52,211,153,0.05);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
/* Device flow visual */
|
|
811
|
+
.device-flow {
|
|
812
|
+
display: flex;
|
|
813
|
+
align-items: center;
|
|
814
|
+
gap: 1rem;
|
|
815
|
+
}
|
|
816
|
+
|
|
817
|
+
.device-pill {
|
|
818
|
+
display: flex;
|
|
819
|
+
align-items: center;
|
|
820
|
+
gap: 0.4rem;
|
|
821
|
+
padding: 0.5rem 0.8rem;
|
|
822
|
+
border-radius: 10px;
|
|
823
|
+
background: rgba(255,255,255,0.04);
|
|
824
|
+
border: 1px solid var(--border);
|
|
825
|
+
font-size: 0.75rem;
|
|
826
|
+
color: var(--text-mid);
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
.device-pill svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.6; }
|
|
830
|
+
|
|
831
|
+
.flow-line {
|
|
832
|
+
flex: 1;
|
|
833
|
+
height: 1px;
|
|
834
|
+
background: linear-gradient(90deg, var(--border-hover), transparent);
|
|
835
|
+
position: relative;
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
.flow-line::after {
|
|
839
|
+
content: '';
|
|
840
|
+
position: absolute;
|
|
841
|
+
right: 0; top: -2px;
|
|
842
|
+
width: 5px; height: 5px;
|
|
843
|
+
border-radius: 50%;
|
|
844
|
+
background: var(--accent);
|
|
845
|
+
box-shadow: 0 0 8px var(--accent-glow);
|
|
846
|
+
animation: flowPulse 2s ease-in-out infinite;
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
@keyframes flowPulse {
|
|
850
|
+
0%, 100% { opacity: 0.4; }
|
|
851
|
+
50% { opacity: 1; }
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
.bento-card h3 {
|
|
855
|
+
font-size: 1.05rem;
|
|
856
|
+
font-weight: 600;
|
|
857
|
+
margin-bottom: 0.4rem;
|
|
858
|
+
letter-spacing: -0.01em;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
.bento-card p {
|
|
862
|
+
font-size: 0.85rem;
|
|
863
|
+
color: var(--text-dim);
|
|
864
|
+
line-height: 1.55;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
/* ── How It Works ── */
|
|
868
|
+
.workflow {
|
|
869
|
+
max-width: 700px;
|
|
870
|
+
margin: 0 auto 6rem;
|
|
871
|
+
padding: 0 2rem;
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
.workflow-label {
|
|
875
|
+
font-size: 0.7rem;
|
|
876
|
+
font-weight: 600;
|
|
877
|
+
letter-spacing: 0.15em;
|
|
878
|
+
text-transform: uppercase;
|
|
879
|
+
color: var(--accent);
|
|
880
|
+
text-align: center;
|
|
881
|
+
margin-bottom: 1.5rem;
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
.workflow h2 {
|
|
885
|
+
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
|
|
886
|
+
font-weight: 700;
|
|
887
|
+
text-align: center;
|
|
888
|
+
letter-spacing: -0.03em;
|
|
889
|
+
margin-bottom: 3rem;
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
.workflow-steps {
|
|
893
|
+
position: relative;
|
|
894
|
+
display: flex;
|
|
895
|
+
flex-direction: column;
|
|
896
|
+
gap: 0;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.workflow-steps::before {
|
|
900
|
+
content: '';
|
|
901
|
+
position: absolute;
|
|
902
|
+
left: 23px;
|
|
903
|
+
top: 48px;
|
|
904
|
+
bottom: 48px;
|
|
905
|
+
width: 1px;
|
|
906
|
+
background: linear-gradient(180deg, var(--accent), var(--cyan), var(--green));
|
|
907
|
+
opacity: 0.3;
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
.workflow-step {
|
|
911
|
+
display: flex;
|
|
912
|
+
align-items: flex-start;
|
|
913
|
+
gap: 1.5rem;
|
|
914
|
+
padding: 1.5rem 0;
|
|
915
|
+
position: relative;
|
|
916
|
+
}
|
|
917
|
+
|
|
918
|
+
.step-marker {
|
|
919
|
+
width: 48px; height: 48px;
|
|
920
|
+
border-radius: 14px;
|
|
921
|
+
display: flex;
|
|
922
|
+
align-items: center;
|
|
923
|
+
justify-content: center;
|
|
924
|
+
flex-shrink: 0;
|
|
925
|
+
font-size: 1.1rem;
|
|
926
|
+
background: var(--surface);
|
|
927
|
+
border: 1px solid var(--border);
|
|
928
|
+
position: relative;
|
|
929
|
+
z-index: 1;
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
.workflow-step:nth-child(1) .step-marker { border-color: rgba(59,130,246,0.3); }
|
|
933
|
+
.workflow-step:nth-child(2) .step-marker { border-color: rgba(34,211,238,0.3); }
|
|
934
|
+
.workflow-step:nth-child(3) .step-marker { border-color: rgba(52,211,153,0.3); }
|
|
935
|
+
|
|
936
|
+
.step-content h3 {
|
|
937
|
+
font-size: 1rem;
|
|
938
|
+
font-weight: 600;
|
|
939
|
+
margin-bottom: 0.35rem;
|
|
940
|
+
letter-spacing: -0.01em;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
.step-content p {
|
|
944
|
+
font-size: 0.88rem;
|
|
945
|
+
color: var(--text-dim);
|
|
946
|
+
line-height: 1.6;
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.step-content code {
|
|
950
|
+
font-family: 'JetBrains Mono', monospace;
|
|
951
|
+
font-size: 0.8rem;
|
|
952
|
+
color: var(--green);
|
|
953
|
+
background: rgba(52,211,153,0.08);
|
|
954
|
+
padding: 0.15rem 0.45rem;
|
|
955
|
+
border-radius: 5px;
|
|
956
|
+
border: 1px solid rgba(52,211,153,0.12);
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
/* ── Footer ── */
|
|
960
|
+
footer {
|
|
961
|
+
text-align: center;
|
|
962
|
+
padding: 3rem 2rem;
|
|
963
|
+
color: var(--text-dim);
|
|
964
|
+
font-size: 0.8rem;
|
|
965
|
+
position: relative;
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
footer::before {
|
|
969
|
+
content: '';
|
|
970
|
+
display: block;
|
|
971
|
+
max-width: 200px;
|
|
972
|
+
margin: 0 auto 2rem;
|
|
973
|
+
height: 1px;
|
|
974
|
+
background: linear-gradient(90deg, transparent, var(--border-hover), transparent);
|
|
975
|
+
}
|
|
976
|
+
|
|
977
|
+
footer a {
|
|
978
|
+
color: var(--text-mid);
|
|
979
|
+
text-decoration: none;
|
|
980
|
+
transition: color 0.3s;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
footer a:hover { color: var(--text); }
|
|
984
|
+
|
|
985
|
+
.footer-links {
|
|
986
|
+
display: flex;
|
|
987
|
+
align-items: center;
|
|
988
|
+
justify-content: center;
|
|
989
|
+
gap: 1.5rem;
|
|
990
|
+
margin-bottom: 1rem;
|
|
991
|
+
}
|
|
992
|
+
|
|
993
|
+
.footer-brand {
|
|
994
|
+
font-weight: 600;
|
|
995
|
+
letter-spacing: -0.02em;
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
/* ── Responsive ── */
|
|
999
|
+
@media (max-width: 768px) {
|
|
1000
|
+
.bento {
|
|
1001
|
+
grid-template-columns: 1fr;
|
|
1002
|
+
}
|
|
1003
|
+
.bento-card.wide { grid-column: span 1; }
|
|
1004
|
+
.bento-card.tall { grid-row: span 1; }
|
|
1005
|
+
.hero { padding: 5rem 1.5rem 3rem; }
|
|
1006
|
+
.cta-group { flex-direction: column; }
|
|
1007
|
+
.nav-links { gap: 1rem; }
|
|
1008
|
+
.nav-links a:not(.nav-gh):not(.nav-lang) { display: none; }
|
|
1009
|
+
.encrypt-visual { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
|
|
1010
|
+
.encrypt-visual .encrypt-arrow { display: none; }
|
|
1011
|
+
.encrypt-block { font-size: 0.65rem; }
|
|
1012
|
+
.device-flow { flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
|
|
1013
|
+
.device-flow .flow-line { display: none; }
|
|
1014
|
+
.device-pill { font-size: 0.7rem; }
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
@media (max-width: 640px) {
|
|
1018
|
+
nav { padding: 1rem 1.25rem; }
|
|
1019
|
+
.showcase {
|
|
1020
|
+
margin-top: 3rem;
|
|
1021
|
+
display: flex;
|
|
1022
|
+
justify-content: center;
|
|
1023
|
+
align-items: flex-end;
|
|
1024
|
+
gap: 0;
|
|
1025
|
+
}
|
|
1026
|
+
.showcase::after { display: none; }
|
|
1027
|
+
.device-ipad {
|
|
1028
|
+
width: 78%;
|
|
1029
|
+
transform: rotate(0deg);
|
|
1030
|
+
flex-shrink: 0;
|
|
1031
|
+
}
|
|
1032
|
+
.device-ipad:hover { transform: translateY(-8px); }
|
|
1033
|
+
.device-iphone {
|
|
1034
|
+
width: 28%;
|
|
1035
|
+
transform: rotate(0deg) translateY(5%);
|
|
1036
|
+
margin-left: -12%;
|
|
1037
|
+
flex-shrink: 0;
|
|
1038
|
+
justify-self: auto;
|
|
1039
|
+
align-self: auto;
|
|
1040
|
+
}
|
|
1041
|
+
.device-iphone:hover { transform: translateY(-3%); }
|
|
1042
|
+
.carousel-dots { bottom: 8px; gap: 6px; }
|
|
1043
|
+
.carousel-dot { width: 6px; height: 6px; }
|
|
1044
|
+
.carousel-label { top: 8px; left: 8px; padding: 5px 10px; border-radius: 8px; }
|
|
1045
|
+
.carousel-label-title { font-size: 0.8rem; }
|
|
1046
|
+
.carousel-label-desc { font-size: 0.62rem; }
|
|
1047
|
+
.terminal { margin: 0 1rem; max-width: calc(100vw - 2rem); }
|
|
1048
|
+
.terminal-body { padding: 1rem; font-size: 0.75rem; overflow-x: auto; }
|
|
1049
|
+
.terminal-line { gap: 0.4rem; white-space: nowrap; }
|
|
1050
|
+
.terminal-output { font-size: 0.7rem; padding-left: 0.9rem; }
|
|
1051
|
+
.section-divider { margin: 4rem auto; }
|
|
1052
|
+
.bento { padding: 0 1rem; margin: 4rem auto; }
|
|
1053
|
+
.bento-card { padding: 1.5rem; border-radius: 16px; overflow: visible; }
|
|
1054
|
+
.encrypt-visual { gap: 0.4rem; }
|
|
1055
|
+
.encrypt-block { padding: 0.3rem 0.5rem; font-size: 0.6rem; }
|
|
1056
|
+
.device-flow { gap: 0.5rem; }
|
|
1057
|
+
.device-pill { padding: 0.4rem 0.6rem; font-size: 0.65rem; }
|
|
1058
|
+
.workflow-step { gap: 1rem; }
|
|
1059
|
+
.step-marker { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
|
|
1060
|
+
.workflow-steps::before { left: 19px; }
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
.sr-only {
|
|
1064
|
+
position: absolute;
|
|
1065
|
+
width: 1px; height: 1px;
|
|
1066
|
+
padding: 0; margin: -1px;
|
|
1067
|
+
overflow: hidden;
|
|
1068
|
+
clip: rect(0,0,0,0);
|
|
1069
|
+
white-space: nowrap;
|
|
1070
|
+
border: 0;
|
|
1071
|
+
}
|
|
1072
|
+
</style>
|
|
7
1073
|
</head>
|
|
8
1074
|
<body>
|
|
9
|
-
|
|
1075
|
+
|
|
1076
|
+
<!-- Ambient background -->
|
|
1077
|
+
<div class="ambient" aria-hidden="true">
|
|
1078
|
+
<div class="ambient-orb"></div>
|
|
1079
|
+
<div class="ambient-orb"></div>
|
|
1080
|
+
<div class="ambient-orb"></div>
|
|
1081
|
+
</div>
|
|
1082
|
+
<div class="grain" aria-hidden="true"></div>
|
|
1083
|
+
|
|
1084
|
+
<div class="content">
|
|
1085
|
+
|
|
1086
|
+
<!-- Nav -->
|
|
1087
|
+
<header>
|
|
1088
|
+
<nav>
|
|
1089
|
+
<div class="logo">
|
|
1090
|
+
<div class="logo-mark">A</div>
|
|
1091
|
+
<div class="logo-text">Agent<span>Link</span></div>
|
|
1092
|
+
</div>
|
|
1093
|
+
<div class="nav-links">
|
|
1094
|
+
<a href="#features">Features</a>
|
|
1095
|
+
<a href="#how-it-works">How It Works</a>
|
|
1096
|
+
<a href="/zh" class="nav-lang">中文</a>
|
|
1097
|
+
<a href="https://github.com/yilee/agentlink" target="_blank" rel="noopener" class="nav-gh">
|
|
1098
|
+
<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>
|
|
1099
|
+
GitHub
|
|
1100
|
+
</a>
|
|
1101
|
+
</div>
|
|
1102
|
+
</nav>
|
|
1103
|
+
</header>
|
|
1104
|
+
|
|
1105
|
+
<main>
|
|
1106
|
+
|
|
1107
|
+
<!-- Hero -->
|
|
1108
|
+
<section class="hero">
|
|
1109
|
+
<div class="hero-badge">
|
|
1110
|
+
<div class="hero-badge-dot"></div>
|
|
1111
|
+
Open Source · End-to-End Encrypted
|
|
1112
|
+
</div>
|
|
1113
|
+
<h1>
|
|
1114
|
+
<span class="line">Control Claude Code.</span>
|
|
1115
|
+
<span class="line"><em>From anywhere.</em></span>
|
|
1116
|
+
</h1>
|
|
1117
|
+
<p class="hero-sub">
|
|
1118
|
+
Start Claude Code on your machine. Walk away.
|
|
1119
|
+
<strong>Chat, launch agent teams, or schedule tasks</strong> —
|
|
1120
|
+
from your phone, tablet, or any browser. End-to-end encrypted, zero config.
|
|
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
|
+
Quick Install
|
|
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
|
+
View on GitHub
|
|
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">Terminal</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
|
+
Session ready → <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 Chat mode on iPad" loading="eager">
|
|
1164
|
+
<div class="carousel-label">
|
|
1165
|
+
<span class="carousel-label-title">Chat</span>
|
|
1166
|
+
<span class="carousel-label-desc">Remote pair-programming with Claude Code</span>
|
|
1167
|
+
</div>
|
|
1168
|
+
</div>
|
|
1169
|
+
<div class="carousel-slide">
|
|
1170
|
+
<img src="/images/team-iPad.webp" alt="AgenticWorker Team mode on iPad" loading="eager">
|
|
1171
|
+
<div class="carousel-label">
|
|
1172
|
+
<span class="carousel-label-title">Teams</span>
|
|
1173
|
+
<span class="carousel-label-desc">Orchestrate multiple agents in parallel</span>
|
|
1174
|
+
</div>
|
|
1175
|
+
</div>
|
|
1176
|
+
<div class="carousel-slide">
|
|
1177
|
+
<img src="/images/loop-iPad.webp" alt="AgenticWorker Loop mode on iPad" loading="eager">
|
|
1178
|
+
<div class="carousel-label">
|
|
1179
|
+
<span class="carousel-label-title">Loop</span>
|
|
1180
|
+
<span class="carousel-label-desc">Scheduled tasks with cron automation</span>
|
|
1181
|
+
</div>
|
|
1182
|
+
</div>
|
|
1183
|
+
</div>
|
|
1184
|
+
<div class="carousel-dots">
|
|
1185
|
+
<button class="carousel-dot active" data-index="0" aria-label="Chat mode"></button>
|
|
1186
|
+
<button class="carousel-dot" data-index="1" aria-label="Team mode"></button>
|
|
1187
|
+
<button class="carousel-dot" data-index="2" aria-label="Loop mode"></button>
|
|
1188
|
+
</div>
|
|
1189
|
+
</div>
|
|
1190
|
+
</div>
|
|
1191
|
+
<div class="device device-iphone">
|
|
1192
|
+
<img src="/images/chat-iPhone.webp" alt="AgenticWorker mobile interface on iPhone" 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">Features</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">Interactive coding sessions</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">Parallel sub-agents</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">Scheduled cron tasks</div>
|
|
1226
|
+
</div>
|
|
1227
|
+
</div>
|
|
1228
|
+
</div>
|
|
1229
|
+
<h3>Three Modes, One Interface</h3>
|
|
1230
|
+
<p>Chat with Claude interactively, spawn agent teams for complex tasks, or schedule recurring Loop jobs with cron — all from the same browser tab.</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>Any Device</h3>
|
|
1240
|
+
<p>Phone, tablet, laptop — any browser becomes your Claude Code terminal.</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">hello world</div>
|
|
1248
|
+
<div class="encrypt-arrow">→</div>
|
|
1249
|
+
<div class="encrypt-block locked">x9f#k2$mQ...</div>
|
|
1250
|
+
<div class="encrypt-arrow">→</div>
|
|
1251
|
+
<div class="encrypt-block">hello world</div>
|
|
1252
|
+
</div>
|
|
1253
|
+
</div>
|
|
1254
|
+
<h3>End-to-End Encrypted</h3>
|
|
1255
|
+
<p>XSalsa20-Poly1305 encryption. The relay server is a blind forwarder — it never sees your code, your prompts, or your data.</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>Self-Hostable</h3>
|
|
1265
|
+
<p>Run your own relay server. Your infrastructure, your rules, your data.</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>Multi-Agent Teams</h3>
|
|
1276
|
+
<p>Spawn parallel Claude subagents to tackle complex tasks. Live kanban board, activity feed, and team history.</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>Multi Session</h3>
|
|
1286
|
+
<p>Run multiple conversations in parallel. Switch between tasks without losing context.</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>Zero Config</h3>
|
|
1296
|
+
<p>No accounts. No registration. Install, start, open — done.</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">How It Works</div>
|
|
1305
|
+
<h2>Three steps. That's it.</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>Start the agent</h3>
|
|
1311
|
+
<p>Run <code>agentlink-client start -D</code> in your project directory. It prints a unique session URL.</p>
|
|
1312
|
+
</div>
|
|
1313
|
+
</div>
|
|
1314
|
+
<div class="workflow-step">
|
|
1315
|
+
<div class="step-marker">02</div>
|
|
1316
|
+
<div class="step-content">
|
|
1317
|
+
<h3>Open the URL, anywhere</h3>
|
|
1318
|
+
<p>Phone, tablet, a friend's laptop — any browser works. Traffic is end-to-end encrypted automatically; the relay never sees your data.</p>
|
|
1319
|
+
</div>
|
|
1320
|
+
</div>
|
|
1321
|
+
<div class="workflow-step">
|
|
1322
|
+
<div class="step-marker">03</div>
|
|
1323
|
+
<div class="step-content">
|
|
1324
|
+
<h3>Chat, collaborate, automate</h3>
|
|
1325
|
+
<p>Run interactive sessions, spawn agent teams for complex tasks, or set up scheduled Loop jobs — all from the same URL, with full history preserved.</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>Open source. Free forever. Built for developers who ship from anywhere.</p>
|
|
1339
|
+
</footer>
|
|
1340
|
+
|
|
1341
|
+
</div>
|
|
1342
|
+
|
|
1343
|
+
<!-- Toast for copy -->
|
|
1344
|
+
<div class="terminal-copy-toast" id="copyToast">Copied to clipboard</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
|
+
|
|
10
1438
|
</body>
|
|
11
1439
|
</html>
|