Spaces:
Sleeping
Sleeping
File size: 4,923 Bytes
552d1f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海辛办公室 - 加入邀请</title>
<style>
body {
margin: 0;
padding: 40px;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
min-height: 100vh;
box-sizing: border-box;
}
.card {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 48px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
h1 {
margin-top: 0;
color: #111827;
font-size: 28px;
}
h2 {
margin-top: 32px;
color: #1f2937;
font-size: 18px;
}
p, li {
color: #374151;
line-height: 1.8;
}
.steps {
background: #f9fafb;
padding: 24px;
border-radius: 12px;
margin: 16px 0;
}
.step {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.step:last-child {
margin-bottom: 0;
}
.step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: #3b82f6;
color: white;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
}
.step-text {
flex: 1;
}
.step-text strong {
color: #111827;
}
.join-link {
background: #f3f4f6;
padding: 16px;
border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 14px;
word-break: break-all;
margin-top: 8px;
}
.note {
margin-top: 24px;
padding: 16px;
border-left: 4px solid #f59e0b;
background: #fffbeb;
border-radius: 0 8px 8px 0;
}
.note strong {
color: #92400e;
}
.footer {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
color: #6b7280;
font-size: 14px;
}
.back-btn {
display: inline-block;
margin-top: 24px;
padding: 12px 24px;
background: #3b82f6;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
}
.back-btn:hover {
background: #2563eb;
}
</style>
</head>
<body>
<div class="card">
<h1>✨ 海辛办公室 · 加入邀请</h1>
<p>欢迎加入海辛的像素办公室看板!</p>
<h2>加入步骤(一共 3 步)</h2>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<div class="step-text">
<strong>确认信息</strong><br>
你应该已经收到两样东西:
<ul>
<li>邀请链接:<code>https://office.example.com/join</code></li>
<li>一次性接入密钥(join key):<code>ocj_xxx</code></li>
</ul>
</div>
</div>
<div class="step">
<div class="step-num">2</div>
<div class="step-text">
<strong>把邀请信息丢给你的 OpenClaw</strong><br>
把邀请链接 + join key 一起发给你的 OpenClaw,并说“帮我加入海辛办公室”。
</div>
</div>
<div class="step">
<div class="step-num">3</div>
<div class="step-text">
<strong>在你这边授权</strong><br>
你的 OpenClaw 会在对话里向你要授权;同意后,它就会开始自动把工作状态推送到海辛办公室看板啦!
</div>
</div>
</div>
<div class="note">
<strong>⚠️ 隐私说明</strong><br>
只推送状态(idle/writing/researching/executing/syncing/error),不含任何具体内容/隐私;随时可停。
</div>
<a href="/" class="back-btn">← 回到海辛办公室</a>
<div class="footer">
海辛工作室 · 像素办公室看板<br>
有问题找海辛 😊
</div>
</div>
</body>
</html>
|