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