@agent-link/server 0.1.481 → 0.1.482
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/landing.html +386 -517
- package/web/dist/landing.zh.html +380 -520
package/web/dist/landing.html
CHANGED
|
@@ -3,24 +3,22 @@
|
|
|
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 —
|
|
7
|
-
<meta name="description" content="
|
|
8
|
-
<meta name="keywords" content="Claude Code, remote
|
|
6
|
+
<title>AgenticWorker — Run coding agents from anywhere</title>
|
|
7
|
+
<meta name="description" content="AgenticWorker gives Copilot, Claude Code, and other coding agents a clean remote workspace with multi-directory sessions, file preview and editing, remote terminal, and end-to-end encryption.">
|
|
8
|
+
<meta name="keywords" content="AgenticWorker, Copilot, Claude Code, coding agents, remote workspace, browser IDE, end-to-end encrypted, remote terminal, file editor">
|
|
9
9
|
<link rel="canonical" href="https://msclaude.ai/">
|
|
10
10
|
<link rel="alternate" hreflang="en" href="https://msclaude.ai/">
|
|
11
11
|
<link rel="alternate" hreflang="zh" href="https://msclaude.ai/zh">
|
|
12
12
|
<link rel="alternate" hreflang="x-default" href="https://msclaude.ai/">
|
|
13
|
-
<!-- Open Graph -->
|
|
14
13
|
<meta property="og:type" content="website">
|
|
15
|
-
<meta property="og:title" content="AgenticWorker —
|
|
16
|
-
<meta property="og:description" content="
|
|
14
|
+
<meta property="og:title" content="AgenticWorker — Run coding agents from anywhere">
|
|
15
|
+
<meta property="og:description" content="A clean remote workspace for Copilot, Claude Code, and other coding agents. Multi-directory sessions, files, terminal, and end-to-end encryption.">
|
|
17
16
|
<meta property="og:url" content="https://msclaude.ai/">
|
|
18
17
|
<meta property="og:image" content="https://msclaude.ai/iPad.png">
|
|
19
18
|
<meta property="og:site_name" content="AgenticWorker">
|
|
20
|
-
<!-- Twitter Card -->
|
|
21
19
|
<meta name="twitter:card" content="summary_large_image">
|
|
22
|
-
<meta name="twitter:title" content="AgenticWorker —
|
|
23
|
-
<meta name="twitter:description" content="
|
|
20
|
+
<meta name="twitter:title" content="AgenticWorker — Run coding agents from anywhere">
|
|
21
|
+
<meta name="twitter:description" content="A clean remote workspace for Copilot, Claude Code, and other coding agents.">
|
|
24
22
|
<meta name="twitter:image" content="https://msclaude.ai/iPad.png">
|
|
25
23
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
26
24
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
@@ -31,7 +29,7 @@
|
|
|
31
29
|
"@context": "https://schema.org",
|
|
32
30
|
"@type": "SoftwareApplication",
|
|
33
31
|
"name": "AgenticWorker",
|
|
34
|
-
"description": "
|
|
32
|
+
"description": "A clean remote workspace for Copilot, Claude Code, and other coding agents with end-to-end encryption.",
|
|
35
33
|
"url": "https://msclaude.ai/",
|
|
36
34
|
"applicationCategory": "DeveloperApplication",
|
|
37
35
|
"operatingSystem": "Windows, macOS, Linux",
|
|
@@ -48,587 +46,530 @@
|
|
|
48
46
|
src: url('/vendor/SpaceGrotesk-latin.woff2') format('woff2');
|
|
49
47
|
}
|
|
50
48
|
|
|
51
|
-
* {
|
|
49
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
52
50
|
|
|
53
51
|
:root {
|
|
54
|
-
--bg: #
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
--text
|
|
59
|
-
--
|
|
60
|
-
--accent
|
|
61
|
-
--
|
|
52
|
+
--bg: #fbfcff;
|
|
53
|
+
--card: #ffffff;
|
|
54
|
+
--surface: #f3f6fb;
|
|
55
|
+
--border: #e4e9f2;
|
|
56
|
+
--text: #111827;
|
|
57
|
+
--muted: #64748b;
|
|
58
|
+
--accent: #018B8D;
|
|
59
|
+
--accent-soft: #e6f7f7;
|
|
60
|
+
--green: #16a34a;
|
|
61
|
+
--code: #101827;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
body {
|
|
65
|
-
|
|
66
|
-
background:
|
|
65
|
+
min-height: 100vh;
|
|
66
|
+
background:
|
|
67
|
+
radial-gradient(circle at top left, rgba(1, 139, 141, 0.12), transparent 32rem),
|
|
68
|
+
linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
|
|
67
69
|
color: var(--text);
|
|
70
|
+
font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
68
71
|
line-height: 1.6;
|
|
69
72
|
-webkit-font-smoothing: antialiased;
|
|
70
73
|
}
|
|
71
74
|
|
|
72
|
-
|
|
75
|
+
a { color: inherit; text-decoration: none; }
|
|
76
|
+
|
|
77
|
+
nav, main, footer {
|
|
78
|
+
width: min(1120px, calc(100% - 32px));
|
|
79
|
+
margin: 0 auto;
|
|
80
|
+
}
|
|
81
|
+
|
|
73
82
|
nav {
|
|
74
83
|
display: flex;
|
|
75
84
|
align-items: center;
|
|
76
85
|
justify-content: space-between;
|
|
77
|
-
padding:
|
|
78
|
-
max-width: 1080px;
|
|
79
|
-
margin: 0 auto;
|
|
86
|
+
padding: 24px 0;
|
|
80
87
|
}
|
|
81
88
|
|
|
82
89
|
.logo {
|
|
83
|
-
display: flex;
|
|
90
|
+
display: inline-flex;
|
|
84
91
|
align-items: center;
|
|
85
|
-
gap:
|
|
86
|
-
font-size: 1.1rem;
|
|
92
|
+
gap: 10px;
|
|
87
93
|
font-weight: 700;
|
|
88
|
-
|
|
89
|
-
letter-spacing: -0.02em;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.logo img { width: 26px; height: 26px; border-radius: 6px; }
|
|
93
|
-
|
|
94
|
-
.nav-links {
|
|
95
|
-
display: flex;
|
|
96
|
-
align-items: center;
|
|
97
|
-
gap: 1.5rem;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.nav-links a {
|
|
101
|
-
color: var(--text-secondary);
|
|
102
|
-
text-decoration: none;
|
|
103
|
-
font-size: 0.875rem;
|
|
104
|
-
font-weight: 500;
|
|
94
|
+
letter-spacing: -0.03em;
|
|
105
95
|
}
|
|
106
96
|
|
|
107
|
-
.
|
|
97
|
+
.logo img { width: 28px; height: 28px; border-radius: 8px; }
|
|
108
98
|
|
|
109
|
-
.nav-
|
|
110
|
-
display: inline-flex;
|
|
99
|
+
.nav-actions {
|
|
111
100
|
align-items: center;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
border-radius: 8px;
|
|
115
|
-
padding: 0.4rem 0.75rem;
|
|
101
|
+
display: flex;
|
|
102
|
+
gap: 10px;
|
|
116
103
|
}
|
|
117
104
|
|
|
118
|
-
.
|
|
119
|
-
|
|
105
|
+
.repo-link,
|
|
120
106
|
.nav-lang {
|
|
121
107
|
border: 1px solid var(--border);
|
|
122
|
-
border-radius:
|
|
123
|
-
|
|
124
|
-
font-size: 0.
|
|
108
|
+
border-radius: 999px;
|
|
109
|
+
color: var(--muted);
|
|
110
|
+
font-size: 0.86rem;
|
|
111
|
+
font-weight: 600;
|
|
112
|
+
padding: 8px 13px;
|
|
125
113
|
}
|
|
126
114
|
|
|
127
|
-
|
|
115
|
+
.repo-link:hover,
|
|
116
|
+
.nav-lang:hover { color: var(--text); background: #fff; }
|
|
117
|
+
|
|
128
118
|
.hero {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
119
|
+
display: grid;
|
|
120
|
+
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
|
|
121
|
+
gap: 56px;
|
|
122
|
+
align-items: center;
|
|
123
|
+
padding: 70px 0 42px;
|
|
133
124
|
}
|
|
134
125
|
|
|
135
|
-
.
|
|
126
|
+
.eyebrow {
|
|
136
127
|
display: inline-flex;
|
|
137
128
|
align-items: center;
|
|
138
|
-
gap:
|
|
139
|
-
background: var(--accent-
|
|
140
|
-
border: 1px solid #
|
|
141
|
-
border-radius:
|
|
142
|
-
padding: 0.35rem 1rem;
|
|
143
|
-
font-size: 0.8rem;
|
|
129
|
+
gap: 8px;
|
|
130
|
+
background: var(--accent-soft);
|
|
131
|
+
border: 1px solid #c8eeee;
|
|
132
|
+
border-radius: 999px;
|
|
144
133
|
color: var(--accent);
|
|
145
|
-
font-
|
|
146
|
-
margin-bottom: 2rem;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.hero-badge-dot {
|
|
150
|
-
width: 7px; height: 7px;
|
|
151
|
-
border-radius: 50%;
|
|
152
|
-
background: #22c55e;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.hero h1 {
|
|
156
|
-
font-size: clamp(2.4rem, 5vw, 3.5rem);
|
|
134
|
+
font-size: 0.82rem;
|
|
157
135
|
font-weight: 700;
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
margin-bottom: 1.5rem;
|
|
161
|
-
color: var(--text);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.hero h1 em {
|
|
165
|
-
font-style: normal;
|
|
166
|
-
color: var(--accent);
|
|
136
|
+
margin-bottom: 22px;
|
|
137
|
+
padding: 7px 13px;
|
|
167
138
|
}
|
|
168
139
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
140
|
+
.eyebrow::before {
|
|
141
|
+
content: "";
|
|
142
|
+
width: 7px;
|
|
143
|
+
height: 7px;
|
|
144
|
+
background: var(--green);
|
|
145
|
+
border-radius: 999px;
|
|
146
|
+
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
|
|
176
147
|
}
|
|
177
148
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
color: #fff;
|
|
184
|
-
font-weight: 600;
|
|
185
|
-
font-size: 0.9rem;
|
|
186
|
-
padding: 0.7rem 1.5rem;
|
|
187
|
-
border-radius: 10px;
|
|
188
|
-
border: none;
|
|
189
|
-
cursor: pointer;
|
|
190
|
-
font-family: inherit;
|
|
149
|
+
h1 {
|
|
150
|
+
max-width: 720px;
|
|
151
|
+
font-size: clamp(2.75rem, 6vw, 5.6rem);
|
|
152
|
+
letter-spacing: -0.07em;
|
|
153
|
+
line-height: 0.96;
|
|
191
154
|
}
|
|
192
155
|
|
|
193
|
-
|
|
156
|
+
h1 span { color: var(--accent); }
|
|
194
157
|
|
|
195
|
-
.
|
|
196
|
-
display: inline-flex;
|
|
197
|
-
align-items: center;
|
|
198
|
-
gap: 0.4rem;
|
|
199
|
-
background: var(--bg);
|
|
200
|
-
border: 1px solid var(--border);
|
|
158
|
+
h1 .preposition {
|
|
201
159
|
color: var(--text);
|
|
202
|
-
font-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
border-radius: 10px;
|
|
206
|
-
text-decoration: none;
|
|
207
|
-
cursor: pointer;
|
|
208
|
-
font-family: inherit;
|
|
160
|
+
font-size: 0.48em;
|
|
161
|
+
letter-spacing: -0.04em;
|
|
162
|
+
vertical-align: 0.18em;
|
|
209
163
|
}
|
|
210
164
|
|
|
211
|
-
.
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
max-width: 500px;
|
|
217
|
-
margin: 0 auto;
|
|
218
|
-
background: var(--code-bg);
|
|
219
|
-
border-radius: 12px;
|
|
220
|
-
overflow: hidden;
|
|
221
|
-
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
|
165
|
+
.lead {
|
|
166
|
+
max-width: 640px;
|
|
167
|
+
color: var(--muted);
|
|
168
|
+
font-size: clamp(1rem, 2vw, 1.2rem);
|
|
169
|
+
margin: 24px 0 30px;
|
|
222
170
|
}
|
|
223
171
|
|
|
224
|
-
.
|
|
172
|
+
.agent-row {
|
|
225
173
|
display: flex;
|
|
226
|
-
|
|
227
|
-
gap:
|
|
228
|
-
|
|
229
|
-
background: rgba(255,255,255,0.06);
|
|
174
|
+
flex-wrap: wrap;
|
|
175
|
+
gap: 10px;
|
|
176
|
+
margin-bottom: 32px;
|
|
230
177
|
}
|
|
231
178
|
|
|
232
|
-
.
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
font-
|
|
241
|
-
|
|
242
|
-
|
|
179
|
+
.agent-pill {
|
|
180
|
+
align-items: center;
|
|
181
|
+
background: rgba(255, 255, 255, 0.78);
|
|
182
|
+
border: 1px solid var(--border);
|
|
183
|
+
border-radius: 999px;
|
|
184
|
+
color: #334155;
|
|
185
|
+
display: inline-flex;
|
|
186
|
+
font-size: 0.92rem;
|
|
187
|
+
font-weight: 650;
|
|
188
|
+
gap: 8px;
|
|
189
|
+
padding: 9px 14px;
|
|
243
190
|
}
|
|
244
191
|
|
|
245
|
-
.
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
192
|
+
.agent-pill::before {
|
|
193
|
+
content: "";
|
|
194
|
+
width: 8px;
|
|
195
|
+
height: 8px;
|
|
196
|
+
border-radius: 99px;
|
|
197
|
+
background: var(--accent);
|
|
250
198
|
}
|
|
251
199
|
|
|
252
|
-
.
|
|
200
|
+
.cta-row {
|
|
253
201
|
display: flex;
|
|
202
|
+
align-items: flex-start;
|
|
203
|
+
flex-direction: column;
|
|
204
|
+
gap: 14px;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.cta-primary {
|
|
254
208
|
align-items: center;
|
|
255
|
-
|
|
209
|
+
background: var(--text);
|
|
210
|
+
border: 0;
|
|
211
|
+
border-radius: 14px;
|
|
212
|
+
color: #fff;
|
|
256
213
|
cursor: pointer;
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
font: inherit;
|
|
216
|
+
font-size: 0.95rem;
|
|
217
|
+
font-weight: 700;
|
|
218
|
+
gap: 8px;
|
|
219
|
+
padding: 13px 18px;
|
|
260
220
|
}
|
|
261
221
|
|
|
262
|
-
.
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
font-size: 0.
|
|
270
|
-
|
|
271
|
-
|
|
222
|
+
.install-command {
|
|
223
|
+
background: #fff;
|
|
224
|
+
border: 1px solid var(--border);
|
|
225
|
+
border-radius: 14px;
|
|
226
|
+
color: #334155;
|
|
227
|
+
cursor: pointer;
|
|
228
|
+
font-family: Consolas, 'Courier New', monospace;
|
|
229
|
+
font-size: 0.9rem;
|
|
230
|
+
overflow-x: auto;
|
|
231
|
+
padding: 12px 14px;
|
|
232
|
+
width: min(100%, 560px);
|
|
272
233
|
}
|
|
273
234
|
|
|
274
|
-
.
|
|
235
|
+
.install-command span { display: block; white-space: nowrap; }
|
|
275
236
|
|
|
276
|
-
.
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
color: #fff;
|
|
283
|
-
padding: 0.5rem 1.25rem;
|
|
284
|
-
border-radius: 8px;
|
|
285
|
-
font-size: 0.8rem;
|
|
286
|
-
font-weight: 500;
|
|
287
|
-
opacity: 0;
|
|
288
|
-
transition: all 0.3s;
|
|
289
|
-
pointer-events: none;
|
|
290
|
-
z-index: 100;
|
|
291
|
-
font-family: 'Space Grotesk', system-ui, sans-serif;
|
|
237
|
+
.panel {
|
|
238
|
+
background: rgba(255, 255, 255, 0.82);
|
|
239
|
+
border: 1px solid var(--border);
|
|
240
|
+
border-radius: 28px;
|
|
241
|
+
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.10);
|
|
242
|
+
padding: 18px;
|
|
292
243
|
}
|
|
293
244
|
|
|
294
|
-
.
|
|
295
|
-
|
|
296
|
-
|
|
245
|
+
.workspace {
|
|
246
|
+
background: #fff;
|
|
247
|
+
border: 1px solid var(--border);
|
|
248
|
+
border-radius: 22px;
|
|
249
|
+
overflow: hidden;
|
|
297
250
|
}
|
|
298
251
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
display:
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
252
|
+
.workspace-top {
|
|
253
|
+
align-items: center;
|
|
254
|
+
background: var(--surface);
|
|
255
|
+
border-bottom: 1px solid var(--border);
|
|
256
|
+
color: var(--muted);
|
|
257
|
+
display: flex;
|
|
258
|
+
font-size: 0.78rem;
|
|
259
|
+
font-weight: 700;
|
|
260
|
+
justify-content: space-between;
|
|
261
|
+
padding: 13px 16px;
|
|
308
262
|
}
|
|
309
263
|
|
|
310
|
-
.
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
.ipad-carousel {
|
|
315
|
-
position: relative;
|
|
316
|
-
width: 100%;
|
|
317
|
-
overflow: hidden;
|
|
318
|
-
border-radius: 4.2%;
|
|
319
|
-
box-shadow: 0 8px 40px rgba(0,0,0,0.1);
|
|
320
|
-
border: 1px solid var(--border);
|
|
264
|
+
.workspace-body {
|
|
265
|
+
display: grid;
|
|
266
|
+
grid-template-columns: 0.95fr 1.4fr;
|
|
267
|
+
min-height: 330px;
|
|
321
268
|
}
|
|
322
269
|
|
|
323
|
-
.
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
top: 0; left: 0;
|
|
328
|
-
width: 100%;
|
|
329
|
-
opacity: 0;
|
|
330
|
-
transition: opacity 0.5s ease;
|
|
331
|
-
pointer-events: none;
|
|
270
|
+
.sidebar {
|
|
271
|
+
background: #f8fafc;
|
|
272
|
+
border-right: 1px solid var(--border);
|
|
273
|
+
padding: 16px;
|
|
332
274
|
}
|
|
333
275
|
|
|
334
|
-
.
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
276
|
+
.session {
|
|
277
|
+
border: 1px solid transparent;
|
|
278
|
+
border-radius: 14px;
|
|
279
|
+
color: var(--muted);
|
|
280
|
+
font-size: 0.82rem;
|
|
281
|
+
margin-bottom: 10px;
|
|
282
|
+
padding: 10px;
|
|
338
283
|
}
|
|
339
284
|
|
|
340
|
-
.
|
|
285
|
+
.session strong { color: var(--text); display: block; font-size: 0.9rem; }
|
|
286
|
+
.session.active { background: #fff; border-color: var(--border); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
|
|
341
287
|
|
|
342
|
-
.
|
|
343
|
-
position: absolute;
|
|
344
|
-
bottom: 10px;
|
|
345
|
-
left: 50%;
|
|
346
|
-
transform: translateX(-50%);
|
|
347
|
-
display: flex;
|
|
348
|
-
gap: 6px;
|
|
349
|
-
z-index: 5;
|
|
350
|
-
}
|
|
288
|
+
.content { display: flex; flex-direction: column; padding: 16px; gap: 12px; }
|
|
351
289
|
|
|
352
|
-
.
|
|
353
|
-
|
|
354
|
-
border-radius:
|
|
355
|
-
|
|
356
|
-
background: rgba(255,255,255,0.45);
|
|
357
|
-
cursor: pointer;
|
|
358
|
-
padding: 0;
|
|
290
|
+
.chat-card, .file-card, .terminal {
|
|
291
|
+
border: 1px solid var(--border);
|
|
292
|
+
border-radius: 16px;
|
|
293
|
+
padding: 14px;
|
|
359
294
|
}
|
|
360
295
|
|
|
361
|
-
.
|
|
296
|
+
.chat-card { background: linear-gradient(135deg, #eef4ff, #ffffff); }
|
|
297
|
+
.chat-card b, .file-card b { display: block; font-size: 0.86rem; margin-bottom: 4px; }
|
|
298
|
+
.chat-card p, .file-card p { color: var(--muted); font-size: 0.82rem; }
|
|
362
299
|
|
|
363
|
-
.
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
padding: 6px 12px;
|
|
371
|
-
border-radius: 8px;
|
|
372
|
-
z-index: 4;
|
|
373
|
-
pointer-events: none;
|
|
300
|
+
.terminal {
|
|
301
|
+
background: var(--code);
|
|
302
|
+
color: #dbeafe;
|
|
303
|
+
cursor: pointer;
|
|
304
|
+
font-family: Consolas, 'Courier New', monospace;
|
|
305
|
+
font-size: 0.78rem;
|
|
306
|
+
line-height: 1.8;
|
|
374
307
|
}
|
|
375
308
|
|
|
376
|
-
.
|
|
377
|
-
.carousel-label-desc { font-size: 0.65rem; color: rgba(255,255,255,0.7); }
|
|
309
|
+
.terminal span { color: #86efac; }
|
|
378
310
|
|
|
379
|
-
.
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
align-self: center;
|
|
311
|
+
.section-head {
|
|
312
|
+
margin: 72px auto 26px;
|
|
313
|
+
max-width: 680px;
|
|
314
|
+
text-align: center;
|
|
384
315
|
}
|
|
385
316
|
|
|
386
|
-
.
|
|
387
|
-
|
|
388
|
-
|
|
317
|
+
.section-head h2 {
|
|
318
|
+
font-size: clamp(1.8rem, 3.6vw, 3rem);
|
|
319
|
+
letter-spacing: -0.05em;
|
|
320
|
+
line-height: 1.05;
|
|
389
321
|
}
|
|
390
322
|
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
margin: 5rem auto;
|
|
395
|
-
height: 1px;
|
|
396
|
-
background: var(--border);
|
|
323
|
+
.section-head p {
|
|
324
|
+
color: var(--muted);
|
|
325
|
+
margin-top: 12px;
|
|
397
326
|
}
|
|
398
327
|
|
|
399
|
-
/* ── Features ── */
|
|
400
328
|
.features {
|
|
401
|
-
max-width: 960px;
|
|
402
|
-
margin: 0 auto;
|
|
403
|
-
padding: 0 2rem;
|
|
404
329
|
display: grid;
|
|
405
|
-
|
|
406
|
-
|
|
330
|
+
gap: 16px;
|
|
331
|
+
grid-template-columns: repeat(4, 1fr);
|
|
407
332
|
}
|
|
408
333
|
|
|
409
334
|
.feature-card {
|
|
410
|
-
background: var(--
|
|
335
|
+
background: var(--card);
|
|
411
336
|
border: 1px solid var(--border);
|
|
412
|
-
border-radius:
|
|
413
|
-
padding:
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.feature-card.wide { grid-column: span 2; }
|
|
417
|
-
|
|
418
|
-
.feature-icon {
|
|
419
|
-
width: 40px; height: 40px;
|
|
420
|
-
border-radius: 10px;
|
|
421
|
-
display: flex;
|
|
422
|
-
align-items: center;
|
|
423
|
-
justify-content: center;
|
|
424
|
-
margin-bottom: 1rem;
|
|
425
|
-
background: var(--accent-light);
|
|
426
|
-
color: var(--accent);
|
|
337
|
+
border-radius: 22px;
|
|
338
|
+
padding: 22px;
|
|
427
339
|
}
|
|
428
340
|
|
|
429
|
-
.feature-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
|
430
|
-
|
|
431
|
-
.feature-icon.green { background: #f0fdf4; color: #16a34a; }
|
|
432
|
-
.feature-icon.cyan { background: #ecfeff; color: #0891b2; }
|
|
433
|
-
.feature-icon.amber { background: #fffbeb; color: #d97706; }
|
|
434
|
-
|
|
435
341
|
.feature-card h3 {
|
|
436
|
-
font-size:
|
|
437
|
-
|
|
438
|
-
margin
|
|
342
|
+
font-size: 1rem;
|
|
343
|
+
letter-spacing: -0.02em;
|
|
344
|
+
margin: 14px 0 7px;
|
|
439
345
|
}
|
|
440
346
|
|
|
441
347
|
.feature-card p {
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
line-height: 1.55;
|
|
348
|
+
color: var(--muted);
|
|
349
|
+
font-size: 0.9rem;
|
|
445
350
|
}
|
|
446
351
|
|
|
447
|
-
|
|
448
|
-
|
|
352
|
+
.feature-icon {
|
|
353
|
+
align-items: center;
|
|
354
|
+
background: var(--accent-soft);
|
|
355
|
+
border-radius: 14px;
|
|
356
|
+
color: var(--accent);
|
|
449
357
|
display: flex;
|
|
450
|
-
|
|
451
|
-
|
|
358
|
+
height: 42px;
|
|
359
|
+
justify-content: center;
|
|
360
|
+
width: 42px;
|
|
452
361
|
}
|
|
453
362
|
|
|
454
|
-
.
|
|
455
|
-
|
|
363
|
+
.feature-icon svg {
|
|
364
|
+
fill: none;
|
|
365
|
+
height: 21px;
|
|
366
|
+
stroke: currentColor;
|
|
367
|
+
stroke-linecap: round;
|
|
368
|
+
stroke-linejoin: round;
|
|
369
|
+
stroke-width: 2;
|
|
370
|
+
width: 21px;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.security {
|
|
456
374
|
align-items: center;
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
375
|
+
background: #0f172a;
|
|
376
|
+
border-radius: 28px;
|
|
377
|
+
color: #fff;
|
|
378
|
+
display: grid;
|
|
379
|
+
gap: 28px;
|
|
380
|
+
grid-template-columns: 1.1fr 0.9fr;
|
|
381
|
+
margin-top: 18px;
|
|
382
|
+
padding: 30px;
|
|
465
383
|
}
|
|
466
384
|
|
|
467
|
-
.
|
|
468
|
-
.
|
|
385
|
+
.security h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); letter-spacing: -0.05em; line-height: 1.05; }
|
|
386
|
+
.security p { color: #b6c3d7; margin-top: 12px; }
|
|
469
387
|
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
388
|
+
.encrypt-flow {
|
|
389
|
+
background: rgba(255, 255, 255, 0.06);
|
|
390
|
+
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
391
|
+
border-radius: 20px;
|
|
392
|
+
color: #cbd5e1;
|
|
393
|
+
display: grid;
|
|
475
394
|
font-family: Consolas, 'Courier New', monospace;
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
margin-bottom: 1rem;
|
|
395
|
+
gap: 10px;
|
|
396
|
+
padding: 16px;
|
|
479
397
|
}
|
|
480
398
|
|
|
481
|
-
.encrypt-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
399
|
+
.encrypt-flow div {
|
|
400
|
+
align-items: center;
|
|
401
|
+
display: flex;
|
|
402
|
+
justify-content: space-between;
|
|
403
|
+
gap: 14px;
|
|
486
404
|
}
|
|
487
405
|
|
|
488
|
-
.encrypt-
|
|
489
|
-
.encrypt-block.locked { color: #16a34a; border-color: #bbf7d0; background: #f0fdf4; }
|
|
406
|
+
.encrypt-flow span:last-child { color: #86efac; }
|
|
490
407
|
|
|
491
|
-
/* ── Footer ── */
|
|
492
408
|
footer {
|
|
493
|
-
text-align: center;
|
|
494
|
-
padding: 3rem 2rem;
|
|
495
|
-
color: var(--text-secondary);
|
|
496
|
-
font-size: 0.8rem;
|
|
497
409
|
border-top: 1px solid var(--border);
|
|
498
|
-
|
|
410
|
+
color: var(--muted);
|
|
411
|
+
display: flex;
|
|
412
|
+
font-size: 0.86rem;
|
|
413
|
+
justify-content: space-between;
|
|
414
|
+
margin-top: 76px;
|
|
415
|
+
padding: 28px 0;
|
|
499
416
|
}
|
|
500
417
|
|
|
501
|
-
.
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
418
|
+
.toast {
|
|
419
|
+
background: var(--text);
|
|
420
|
+
border-radius: 999px;
|
|
421
|
+
bottom: 24px;
|
|
422
|
+
color: #fff;
|
|
423
|
+
font-size: 0.84rem;
|
|
424
|
+
font-weight: 700;
|
|
425
|
+
left: 50%;
|
|
426
|
+
opacity: 0;
|
|
427
|
+
padding: 10px 18px;
|
|
428
|
+
pointer-events: none;
|
|
429
|
+
position: fixed;
|
|
430
|
+
transform: translate(-50%, 16px);
|
|
431
|
+
transition: opacity 0.22s, transform 0.22s;
|
|
507
432
|
}
|
|
508
433
|
|
|
509
|
-
.
|
|
434
|
+
.toast.show { opacity: 1; transform: translate(-50%, 0); }
|
|
510
435
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
436
|
+
@media (max-width: 900px) {
|
|
437
|
+
.hero, .security { grid-template-columns: 1fr; }
|
|
438
|
+
.hero { padding-top: 44px; }
|
|
439
|
+
.features { grid-template-columns: repeat(2, 1fr); }
|
|
514
440
|
}
|
|
515
441
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
442
|
+
@media (max-width: 620px) {
|
|
443
|
+
nav, main, footer { width: min(100% - 24px, 1120px); }
|
|
444
|
+
h1 { font-size: clamp(2.35rem, 15vw, 4rem); }
|
|
445
|
+
.workspace-body { grid-template-columns: 1fr; }
|
|
446
|
+
.sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
|
|
520
447
|
.features { grid-template-columns: 1fr; }
|
|
521
|
-
.
|
|
522
|
-
|
|
523
|
-
.cta-group { flex-direction: column; }
|
|
524
|
-
.nav-links { gap: 0.75rem; }
|
|
525
|
-
.nav-links a:not(.nav-gh):not(.nav-lang) { display: none; }
|
|
526
|
-
.encrypt-visual { flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem; }
|
|
527
|
-
.encrypt-visual .encrypt-arrow { display: none; }
|
|
528
|
-
.mode-pills { flex-wrap: wrap; }
|
|
529
|
-
}
|
|
530
|
-
|
|
531
|
-
@media (max-width: 640px) {
|
|
532
|
-
nav { padding: 1rem 1.25rem; }
|
|
533
|
-
.showcase {
|
|
534
|
-
display: flex;
|
|
535
|
-
justify-content: center;
|
|
536
|
-
align-items: flex-end;
|
|
537
|
-
gap: 0;
|
|
538
|
-
margin-top: 3rem;
|
|
539
|
-
}
|
|
540
|
-
.device-ipad { width: 78%; flex-shrink: 0; }
|
|
541
|
-
.device-iphone {
|
|
542
|
-
width: 28%;
|
|
543
|
-
transform: translateY(5%);
|
|
544
|
-
margin-left: -12%;
|
|
545
|
-
flex-shrink: 0;
|
|
546
|
-
}
|
|
547
|
-
.carousel-dots { bottom: 6px; gap: 5px; }
|
|
548
|
-
.carousel-dot { width: 6px; height: 6px; }
|
|
549
|
-
.carousel-label { top: 8px; left: 8px; padding: 4px 8px; }
|
|
550
|
-
.carousel-label-title { font-size: 0.75rem; }
|
|
551
|
-
.carousel-label-desc { font-size: 0.58rem; }
|
|
552
|
-
.terminal { margin: 0 1rem; }
|
|
553
|
-
.terminal-body { padding: 0.75rem 1rem; font-size: 0.75rem; overflow-x: auto; }
|
|
554
|
-
.features { padding: 0 1rem; }
|
|
555
|
-
.feature-card { padding: 1.25rem; }
|
|
556
|
-
.divider { margin: 3.5rem auto; }
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
.sr-only {
|
|
560
|
-
position: absolute;
|
|
561
|
-
width: 1px; height: 1px;
|
|
562
|
-
padding: 0; margin: -1px;
|
|
563
|
-
overflow: hidden;
|
|
564
|
-
clip: rect(0,0,0,0);
|
|
565
|
-
white-space: nowrap;
|
|
566
|
-
border: 0;
|
|
448
|
+
.security { padding: 22px; }
|
|
449
|
+
footer { flex-direction: column; gap: 8px; }
|
|
567
450
|
}
|
|
568
451
|
</style>
|
|
569
452
|
</head>
|
|
570
453
|
<body>
|
|
571
|
-
|
|
572
454
|
<header>
|
|
573
|
-
<nav>
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
</
|
|
455
|
+
<nav>
|
|
456
|
+
<a class="logo" href="/">
|
|
457
|
+
<img src="/favicon.svg" alt="AgenticWorker">
|
|
458
|
+
<span>AgenticWorker</span>
|
|
459
|
+
</a>
|
|
460
|
+
<div class="nav-actions">
|
|
461
|
+
<a href="https://github.com/kailunshi_microsoft/AgenticWorker" class="repo-link" rel="noopener">GitHub</a>
|
|
462
|
+
<a href="/zh" class="nav-lang">中文</a>
|
|
463
|
+
</div>
|
|
464
|
+
</nav>
|
|
582
465
|
</header>
|
|
583
466
|
|
|
584
467
|
<main>
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
<
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
</div>
|
|
595
|
-
|
|
596
|
-
<div class="terminal">
|
|
597
|
-
<div class="terminal-bar">
|
|
598
|
-
<div class="terminal-dot"></div>
|
|
599
|
-
<div class="terminal-dot"></div>
|
|
600
|
-
<div class="terminal-dot"></div>
|
|
601
|
-
<div class="terminal-title">Terminal</div>
|
|
602
|
-
</div>
|
|
603
|
-
<div class="terminal-body">
|
|
604
|
-
<div class="terminal-line" onclick="copyCmd('npm install -g @agent-link/agent')">
|
|
605
|
-
<span class="terminal-prompt">$</span>
|
|
606
|
-
<span class="terminal-cmd">npm install -g @agent-link/agent</span>
|
|
468
|
+
<section class="hero">
|
|
469
|
+
<div>
|
|
470
|
+
<div class="eyebrow">Remote workspace for coding agents</div>
|
|
471
|
+
<h1>Remote control <span class="preposition">for</span><br><span>coding agents.</span></h1>
|
|
472
|
+
<p class="lead">AgenticWorker connects your local project to a private web workspace, so you can drive Copilot, Claude Code, and other agents from any device.</p>
|
|
473
|
+
<div class="agent-row" aria-label="Supported agents">
|
|
474
|
+
<span class="agent-pill">GitHub Copilot</span>
|
|
475
|
+
<span class="agent-pill">Claude Code</span>
|
|
476
|
+
<span class="agent-pill">More agent backends</span>
|
|
607
477
|
</div>
|
|
608
|
-
<div class="
|
|
609
|
-
<
|
|
610
|
-
|
|
478
|
+
<div class="cta-row">
|
|
479
|
+
<button class="cta-primary" onclick="copyInstall()">
|
|
480
|
+
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
|
|
481
|
+
Copy install command
|
|
482
|
+
</button>
|
|
483
|
+
<code class="install-command" onclick="copyInstall()">
|
|
484
|
+
<span>npm install -g @agent-link/agent</span>
|
|
485
|
+
<span>agentlink-client start -D --entra</span>
|
|
486
|
+
</code>
|
|
611
487
|
</div>
|
|
612
|
-
|
|
613
|
-
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
<div class="panel" aria-label="AgenticWorker workspace preview">
|
|
491
|
+
<div class="workspace">
|
|
492
|
+
<div class="workspace-top">
|
|
493
|
+
<span>msclaude.ai/s/abc123</span>
|
|
494
|
+
<span>encrypted</span>
|
|
495
|
+
</div>
|
|
496
|
+
<div class="workspace-body">
|
|
497
|
+
<div class="sidebar">
|
|
498
|
+
<div class="session active"><strong>Q:\src\agentlink</strong>Copilot fixing UI copy</div>
|
|
499
|
+
<div class="session"><strong>D:\work\api</strong>Claude Code reviewing diffs</div>
|
|
500
|
+
<div class="session"><strong>C:\repo\mobile</strong>Terminal + file edits</div>
|
|
501
|
+
</div>
|
|
502
|
+
<div class="content">
|
|
503
|
+
<div class="chat-card">
|
|
504
|
+
<b>Agent conversation</b>
|
|
505
|
+
<p>Ask for changes, review plans, and keep sessions tied to each directory.</p>
|
|
506
|
+
</div>
|
|
507
|
+
<div class="file-card">
|
|
508
|
+
<b>Preview and edit files</b>
|
|
509
|
+
<p>Open source files, inspect diffs, and make focused edits without leaving the browser.</p>
|
|
510
|
+
</div>
|
|
511
|
+
<div class="terminal" onclick="copyCmd('agentlink-client start -D --entra')">
|
|
512
|
+
$ <span>agentlink-client start -D --entra</span>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
614
516
|
</div>
|
|
615
517
|
</div>
|
|
616
|
-
</
|
|
617
|
-
</section>
|
|
518
|
+
</section>
|
|
618
519
|
|
|
520
|
+
<section aria-labelledby="features-title">
|
|
521
|
+
<div class="section-head">
|
|
522
|
+
<h2 id="features-title">Everything needed for remote agent work.</h2>
|
|
523
|
+
<p>Small surface area, focused controls, and the tools an agent needs to operate on real projects.</p>
|
|
524
|
+
</div>
|
|
619
525
|
|
|
620
|
-
<div class="
|
|
526
|
+
<div class="features">
|
|
527
|
+
<article class="feature-card">
|
|
528
|
+
<div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"></path></svg></div>
|
|
529
|
+
<h3>Multi-directory sessions</h3>
|
|
530
|
+
<p>Manage separate conversations and agent state across multiple local workspaces.</p>
|
|
531
|
+
</article>
|
|
532
|
+
<article class="feature-card">
|
|
533
|
+
<div class="feature-icon"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg></div>
|
|
534
|
+
<h3>File preview and editing</h3>
|
|
535
|
+
<p>Browse project files, preview content, and apply edits directly from the web UI.</p>
|
|
536
|
+
</article>
|
|
537
|
+
<article class="feature-card">
|
|
538
|
+
<div class="feature-icon"><svg viewBox="0 0 24 24"><path d="m4 17 6-6-6-6"></path><path d="M12 19h8"></path></svg></div>
|
|
539
|
+
<h3>Remote terminal</h3>
|
|
540
|
+
<p>Run project commands, inspect output, and unblock agents without SSH or screen sharing.</p>
|
|
541
|
+
</article>
|
|
542
|
+
<article class="feature-card">
|
|
543
|
+
<div class="feature-icon"><svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="10" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></div>
|
|
544
|
+
<h3>End-to-end encrypted</h3>
|
|
545
|
+
<p>Messages are encrypted between your browser and local agent; the relay only passes ciphertext.</p>
|
|
546
|
+
</article>
|
|
547
|
+
</div>
|
|
548
|
+
</section>
|
|
621
549
|
|
|
550
|
+
<section class="security" aria-label="Security">
|
|
551
|
+
<div>
|
|
552
|
+
<h2>Private by design.</h2>
|
|
553
|
+
<p>Your code stays on your machine. AgenticWorker creates a secure relay path to the browser, while the local agent keeps control of project files, commands, and credentials.</p>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="encrypt-flow">
|
|
556
|
+
<div><span>browser</span><span>sealed message</span></div>
|
|
557
|
+
<div><span>relay</span><span>ciphertext only</span></div>
|
|
558
|
+
<div><span>local agent</span><span>decrypted locally</span></div>
|
|
559
|
+
</div>
|
|
560
|
+
</section>
|
|
622
561
|
</main>
|
|
623
562
|
|
|
624
563
|
<footer>
|
|
625
|
-
<
|
|
626
|
-
|
|
564
|
+
<span><strong>AgenticWorker</strong></span>
|
|
565
|
+
<span>
|
|
566
|
+
<a href="https://github.com/kailunshi_microsoft/AgenticWorker" rel="noopener">GitHub</a>
|
|
567
|
+
·
|
|
627
568
|
<a href="https://www.linkedin.com/in/shikailun/" rel="noopener">LinkedIn</a>
|
|
628
|
-
</
|
|
569
|
+
</span>
|
|
629
570
|
</footer>
|
|
630
571
|
|
|
631
|
-
<div class="
|
|
572
|
+
<div class="toast" id="copyToast">Copied to clipboard</div>
|
|
632
573
|
|
|
633
574
|
<script>
|
|
634
575
|
function copyCmd(text) {
|
|
@@ -637,8 +578,7 @@ function copyCmd(text) {
|
|
|
637
578
|
}
|
|
638
579
|
|
|
639
580
|
function copyInstall() {
|
|
640
|
-
|
|
641
|
-
showToast();
|
|
581
|
+
copyCmd('npm install -g @agent-link/agent && agentlink-client start -D --entra');
|
|
642
582
|
}
|
|
643
583
|
|
|
644
584
|
function showToast() {
|
|
@@ -646,77 +586,6 @@ function showToast() {
|
|
|
646
586
|
toast.classList.add('show');
|
|
647
587
|
setTimeout(() => toast.classList.remove('show'), 1800);
|
|
648
588
|
}
|
|
649
|
-
|
|
650
|
-
// iPad carousel
|
|
651
|
-
(function() {
|
|
652
|
-
const slides = document.querySelectorAll('.carousel-slide');
|
|
653
|
-
const dots = document.querySelectorAll('.carousel-dot');
|
|
654
|
-
if (!slides.length) return;
|
|
655
|
-
let current = 0;
|
|
656
|
-
let interval;
|
|
657
|
-
|
|
658
|
-
function goTo(i) {
|
|
659
|
-
slides[current].classList.remove('active');
|
|
660
|
-
dots[current].classList.remove('active');
|
|
661
|
-
current = (i + slides.length) % slides.length;
|
|
662
|
-
slides[current].classList.add('active');
|
|
663
|
-
dots[current].classList.add('active');
|
|
664
|
-
}
|
|
665
|
-
|
|
666
|
-
function startAuto() {
|
|
667
|
-
interval = setInterval(() => goTo(current + 1), 4000);
|
|
668
|
-
}
|
|
669
|
-
|
|
670
|
-
function resetAuto() {
|
|
671
|
-
clearInterval(interval);
|
|
672
|
-
startAuto();
|
|
673
|
-
}
|
|
674
|
-
|
|
675
|
-
dots.forEach(dot => {
|
|
676
|
-
dot.addEventListener('click', () => {
|
|
677
|
-
goTo(Number(dot.dataset.index));
|
|
678
|
-
resetAuto();
|
|
679
|
-
});
|
|
680
|
-
});
|
|
681
|
-
|
|
682
|
-
const track = document.querySelector('.ipad-carousel');
|
|
683
|
-
let startX = 0, dragging = false;
|
|
684
|
-
|
|
685
|
-
track.addEventListener('touchstart', e => {
|
|
686
|
-
startX = e.touches[0].clientX;
|
|
687
|
-
dragging = true;
|
|
688
|
-
}, { passive: true });
|
|
689
|
-
|
|
690
|
-
track.addEventListener('touchend', e => {
|
|
691
|
-
if (!dragging) return;
|
|
692
|
-
dragging = false;
|
|
693
|
-
const dx = e.changedTouches[0].clientX - startX;
|
|
694
|
-
if (Math.abs(dx) > 50) {
|
|
695
|
-
goTo(dx < 0 ? current + 1 : current - 1);
|
|
696
|
-
resetAuto();
|
|
697
|
-
}
|
|
698
|
-
}, { passive: true });
|
|
699
|
-
|
|
700
|
-
track.addEventListener('mousedown', e => {
|
|
701
|
-
startX = e.clientX;
|
|
702
|
-
dragging = true;
|
|
703
|
-
track.style.cursor = 'grabbing';
|
|
704
|
-
});
|
|
705
|
-
|
|
706
|
-
document.addEventListener('mouseup', e => {
|
|
707
|
-
if (!dragging) return;
|
|
708
|
-
dragging = false;
|
|
709
|
-
track.style.cursor = '';
|
|
710
|
-
const dx = e.clientX - startX;
|
|
711
|
-
if (Math.abs(dx) > 50) {
|
|
712
|
-
goTo(dx < 0 ? current + 1 : current - 1);
|
|
713
|
-
resetAuto();
|
|
714
|
-
}
|
|
715
|
-
});
|
|
716
|
-
|
|
717
|
-
startAuto();
|
|
718
|
-
})();
|
|
719
589
|
</script>
|
|
720
|
-
|
|
721
590
|
</body>
|
|
722
591
|
</html>
|