ai-context-vault-cn/index.html at main · ethan0xbuilds/ai-context-vault-cn · GitHub

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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="一套 Markdown 档案，让 AI 真正理解你。专为中文用户设计的 AI 个人上下文档案库。">
<title>AI Context Vault CN · 让 AI 真正理解你</title>
<style>
  :root {
    --bg:       #fdf6ee;
    --bg-card:  #fff8f0;
    --border:   #e8d5b7;
    --accent:   #b5522d;
    --text:     #2d1a0e;
    --muted:    #7a5c3a;
    --subtle:   #7a5a3a;
    --dark-bg:  #2d1a0e;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    line-height: 1.6;
  }
  .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ── HERO ── */
  .hero {
    padding: 80px 0 64px;
    text-align: center;
    border-bottom: 1px solid var(--border);
  }
  .hero-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 24px;
  }
  .hero h1 {
    font-size: clamp(32px, 6vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  .hero p {
    font-size: 17px;
    color: var(--muted);
    max-width: 480px;
    margin: 0 auto 36px;
  }
  .btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 14px 32px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  .btn:hover { opacity: 0.88; }
  .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
  .hero-note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--subtle);
  }

  /* ── COMPARE ── */
  .compare {
    padding: 64px 0;
    border-bottom: 1px solid var(--border);
  }
  .compare h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .compare .section-sub {
    font-size: 14px;
    color: var(--subtle);
    margin-bottom: 32px;
  }
  .compare-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }
  @media (max-width: 480px) {
    .compare-pair { grid-template-columns: 1fr; }
  }
  .compare-cell {
    border-radius: 8px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
  .compare-cell.before {
    background: #f0e8de;
    border: 1px solid #ddd0c0;
    color: #a08060;
  }
  .compare-cell.after {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .compare-tag {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .compare-cell.before .compare-tag { color: #b09070; }
  .compare-cell.after .compare-tag  { color: var(--accent); }

  /* ── MODULES ── */
  .modules {
    padding: 64px 0;
    border-bottom: 1px solid var(--border);
  }
  .modules h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .modules .section-sub {
    font-size: 14px;
    color: var(--subtle);
    margin-bottom: 32px;
  }
  .module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 480px) {
    .module-grid { grid-template-columns: 1fr; }
  }
  .module-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
  }
  .module-item.span-2 { grid-column: span 2; }
  @media (max-width: 480px) {
    .module-item.span-2 { grid-column: span 1; }
  }
  .module-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .module-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
  }
  .module-desc {
    font-size: 12px;
    color: var(--subtle);
    line-height: 1.4;
  }
  .cn-mark { color: var(--accent); }

  /* ── CTA ── */
  .cta {
    padding: 80px 0;
    text-align: center;
    background: var(--dark-bg);
  }
  .cta h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--bg);
    margin-bottom: 12px;
  }
  .cta p {
    font-size: 15px;
    color: #a08060;
    margin-bottom: 36px;
    line-height: 1.7;
  }
  .cta .btn { font-size: 16px; padding: 16px 36px; }
  .cta-note {
    display: block;
    margin-top: 18px;
    font-size: 12px;
    color: #8a6a50;
  }

  /* ── FOOTER ── */
  .footer {
    padding: 20px 0;
    background: #1e1008;
    text-align: center;
    font-size: 12px;
    color: #8a6a50;
  }
  .footer a { color: #b08060; text-decoration: none; }
  .footer a:hover { color: #c8a070; }
  .footer a:focus-visible { outline: 2px solid #b08060; outline-offset: 2px; }
</style>
</head>
<body>

<main>
<!-- HERO -->
<section class="hero">
  <div class="container">
    <div class="hero-badge">AI Context Vault CN</div>
    <h1>让 AI 真正理解你</h1>
    <p>像和认识你多年的顾问对话，而不是冷冰冰的客服</p>
    <a class="btn" href="https://github.com/ethan0xbuilds/ai-context-vault-cn"><span aria-hidden="true">⭐</span> 在 GitHub 上 Star</a>
    <p class="hero-note">免费 · 开源 · Markdown 格式</p>
  </div>
</section>

<!-- COMPARE -->
<section class="compare">
  <div class="container">
    <h2>没有上下文 vs 有上下文</h2>
    <p class="section-sub">同一个问题，AI 给出的答案天差地别</p>

    <div class="compare-pair">
      <div class="compare-cell before">
        <span class="compare-tag"><span aria-hidden="true">❌</span> 没有档案</span>
        <p>"你可以考虑学习编程"</p>
      </div>
      <div class="compare-cell after">
        <span class="compare-tag">✓ 有了档案</span>
        <p>"以你的 Go 基础和对分布式系统的兴趣，建议直接看 etcd 源码"</p>
      </div>
    </div>

    <div class="compare-pair">
      <div class="compare-cell before">
        <span class="compare-tag"><span aria-hidden="true">❌</span> 没有档案</span>
        <p>"建议你多运动"</p>
      </div>
      <div class="compare-cell after">
        <span class="compare-tag">✓ 有了档案</span>
        <p>"你说过周末带娃时间有限，可以试试早起 30 分钟做 HIIT"</p>
      </div>
    </div>
  </div>
</section>

<!-- MODULES -->
<section class="modules">
  <div class="container">
    <h2>9 个访谈模块</h2>
    <p class="section-sub">通过 AI 访谈生成，专为中文用户重新设计 <span class="cn-mark">✦ 为中文特色补充模块</span></p>

    <div class="module-grid">
      <div class="module-item">
        <div class="module-num">01</div>
        <div class="module-name">个人宪法</div>
        <div class="module-desc">价值观、信念与处世原则——一切的基础</div>
      </div>
      <div class="module-item">
        <div class="module-num">02</div>
        <div class="module-name">职业生涯</div>
        <div class="module-desc">职业现状、技能、挑战与发展方向</div>
      </div>
      <div class="module-item">
        <div class="module-num">03</div>
        <div class="module-name">创业与事业</div>
        <div class="module-desc">适合创业者、老板、自由职业者</div>
      </div>
      <div class="module-item">
        <div class="module-num">04</div>
        <div class="module-name">个人生活</div>
        <div class="module-desc">日常作息、健康、爱好与精力管理</div>
      </div>
      <div class="module-item">
        <div class="module-num">05</div>
        <div class="module-name">社交关系</div>
        <div class="module-desc">朋友圈、社交模式与人际关系</div>
      </div>
      <div class="module-item">
        <div class="module-num">06</div>
        <div class="module-name">家庭</div>
        <div class="module-desc">亲密关系、养育、原生家庭影响</div>
      </div>
      <div class="module-item">
        <div class="module-num">07</div>
        <div class="module-name">年度目标</div>
        <div class="module-desc">今年的真实目标，而不是许愿清单</div>
      </div>
      <div class="module-item">
        <div class="module-num">08 <span class="cn-mark">✦</span></div>
        <div class="module-name">财务状况</div>
        <div class="module-desc">收支、房贷、理财——中国人绕不开的话题</div>
      </div>
      <div class="module-item span-2">
        <div class="module-num">09 <span class="cn-mark">✦</span></div>
        <div class="module-name">AI 交互偏好</div>
        <div class="module-desc">告诉 AI 你喜欢什么样的沟通方式</div>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="cta">
  <div class="container">
    <h2>一次建档，永久复用</h2>
    <p>复制 prompt → AI 访谈你 → 保存输出<br>下次开启对话时带上档案，立刻进入「懂你模式」</p>
    <a class="btn" href="https://github.com/ethan0xbuilds/ai-context-vault-cn"><span aria-hidden="true">⭐</span> 在 GitHub 上 Star</a>
    <span class="cta-note">MIT 协议 · 数据完全本地 · 不依赖任何服务</span>
  </div>
</section>

</main>

<!-- FOOTER -->
<footer class="footer">
  <div class="container">
    灵感来源：<a href="https://www.alliekmiller.com/ai-context-vault" target="_blank" rel="noopener">Allie K. Miller's AI Context Vault</a>
  </div>
</footer>

</body>
</html>