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