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>