echo8/roadmap.html at main · 0xueping/echo8 · 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
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路线图 - 虫洞8°</title>
    <meta name="description" content="虫洞8°的产品路线图:当前版本、未来规划、我们不做什么。">
    <link rel="stylesheet" href="styles/matrix.css">
    <style>
        .page-header {
            text-align: center;
            padding: 100px 20px 60px;
            border-bottom: 1px solid rgba(0, 255, 136, 0.2);
            margin-bottom: 60px;
        }

        .page-badge {
            display: inline-block;
            background: rgba(0, 255, 136, 0.1);
            border: 1px solid rgba(0, 255, 136, 0.3);
            color: #00ff88;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 52px;
            color: #fff;
            margin-bottom: 20px;
            text-shadow: 0 0 40px rgba(0, 255, 136, 0.8);
        }

        .page-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.7);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .roadmap-section {
            margin-bottom: 100px;
        }

        .section-title {
            font-size: 36px;
            color: #fff;
            margin-bottom: 50px;
            text-align: center;
        }

        .timeline {
            position: relative;
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, rgba(0, 255, 136, 0.5), transparent);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 60px;
            display: flex;
            align-items: center;
        }

        .timeline-item:nth-child(odd) {
            flex-direction: row-reverse;
        }

        .timeline-marker {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background: #00ff88;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.8);
            z-index: 2;
        }

        .timeline-content {
            width: calc(50% - 40px);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 255, 136, 0.15);
            border-radius: 16px;
            padding: 30px;
            transition: all 0.3s;
        }

        .timeline-content:hover {
            border-color: rgba(0, 255, 136, 0.4);
            background: rgba(0, 255, 136, 0.05);
            box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
        }

        .timeline-date {
            color: #00ff88;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .timeline-title {
            color: #fff;
            font-size: 22px;
            margin-bottom: 15px;
        }

        .timeline-desc {
            color: rgba(255, 255, 255, 0.75);
            font-size: 15px;
            line-height: 1.7;
        }

        .timeline-features {
            list-style: none;
            padding: 0;
            margin-top: 15px;
        }

        .timeline-features li {
            color: rgba(0, 255, 136, 0.9);
            font-size: 14px;
            padding: 8px 0;
            padding-left: 20px;
            position: relative;
        }

        .timeline-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #00ff88;
        }

        .phase-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 255, 136, 0.15);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
            transition: all 0.3s;
        }

        .phase-card:hover {
            border-color: rgba(0, 255, 136, 0.3);
            background: rgba(0, 255, 136, 0.05);
        }

        .phase-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
        }

        .phase-badge {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
        }

        .phase-badge.current {
            background: rgba(0, 255, 136, 0.3);
            border: 1px solid #00ff88;
        }

        .phase-badge.done {
            background: rgba(0, 255, 136, 0.15);
            opacity: 0.7;
        }

        .phase-title {
            font-size: 28px;
            color: #fff;
        }

        .phase-content {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.8;
            margin-bottom: 20px;
        }

        .phase-features {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 25px;
        }

        .phase-feature {
            background: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 12px;
        }

        .phase-feature-title {
            color: #00ff88;
            font-size: 16px;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .phase-feature-desc {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            line-height: 1.6;
        }

        .wont-do {
            background: rgba(255, 100, 100, 0.05);
            border: 2px solid rgba(255, 100, 100, 0.3);
            border-radius: 20px;
            padding: 50px;
            margin: 80px 0;
        }

        .wont-do-title {
            font-size: 36px;
            color: rgba(255, 100, 100, 0.8);
            margin-bottom: 40px;
            text-align: center;
        }

        .wont-do-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .wont-do-item {
            background: rgba(0, 0, 0, 0.3);
            padding: 30px;
            border-radius: 12px;
        }

        .wont-do-item-title {
            color: rgba(255, 100, 100, 0.8);
            font-size: 20px;
            margin-bottom: 15px;
        }

        .wont-do-item-content {
            color: rgba(255, 255, 255, 0.75);
            font-size: 14px;
            line-height: 1.7;
        }

        .wont-do-item-content strong {
            color: rgba(255, 100, 100, 0.6);
        }

        @media (max-width: 1024px) {
            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                flex-direction: column !important;
                padding-left: 50px;
            }

            .timeline-marker {
                left: 20px;
            }

            .timeline-content {
                width: 100%;
            }

            .phase-features {
                grid-template-columns: 1fr;
            }

            .wont-do-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .page-title {
                font-size: 38px;
            }

            .phase-card {
                padding: 30px 20px;
            }

            .wont-do {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <canvas id="matrix-rain"></canvas>

    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="container">
        <nav class="navbar">
            <a href="index.html" class="logo">
                <span class="logo-emoji">🌀</span>
                <span>虫洞8°</span>
            </a>
            <div class="nav-links">
                <a href="index.html" class="nav-link">首页</a>
                <a href="philosophy.html" class="nav-link">设计哲学</a>
                <a href="how-it-works.html" class="nav-link">工作原理</a>
                <a href="use-cases.html" class="nav-link">使用场景</a>
                <a href="download.html" class="nav-link">下载</a>
                <a href="docs.html" class="nav-link">文档</a>
            </div>
        </nav>

        <section class="page-header">
            <div class="page-badge">Product Roadmap</div>
            <h1 class="page-title">产品路线图</h1>
            <p class="page-subtitle">
                了解虫洞8°的过去、现在和未来规划
            </p>
        </section>

        <!-- 版本规划 -->
        <section class="roadmap-section">
            <h2 class="section-title">📅 版本演进路线</h2>

            <div style="max-width: 900px; margin: 0 auto;">
                <!-- v1.0 -->
                <div class="phase-card">
                    <div class="phase-header">
                        <span class="phase-badge done">✓ 已发布</span>
                        <h3 class="phase-title">v1.0 - 建立信任</h3>
                    </div>
                    <p class="phase-content">
                        2026 Q1-Q2. 让用户相信"History是可靠的",建立基础的多AI协作能力。
                    </p>
                    <div class="phase-features">
                        <div class="phase-feature">
                            <div class="phase-feature-title">✨ 核心功能</div>
                            <div class="phase-feature-desc">
                                8个AI并行调用、虫洞确认机制、基础Topic Card存储
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">🔒 数据安全</div>
                            <div class="phase-feature-desc">
                                100%本地存储、无需注册、数据可导出
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">🎯 用户体验</div>
                            <div class="phase-feature-desc">
                                Chrome扩展、侧边栏界面、基础历史记录查看
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📊 质量指标</div>
                            <div class="phase-feature-desc">
                                History零丢失、响应时间&lt;1秒、50%用户首周查看历史
                            </div>
                        </div>
                    </div>
                </div>

                <!-- v1.5 -->
                <div class="phase-card">
                    <div class="phase-header">
                        <span class="phase-badge current">🚧 开发中</span>
                        <h3 class="phase-title">v1.5 - 提升价值</h3>
                    </div>
                    <p class="phase-content">
                        2026 Q3. 让用户感受到"History有用",从简单的存储到智能的价值发现。
                    </p>
                    <div class="phase-features">
                        <div class="phase-feature">
                            <div class="phase-feature-title">🔍 智能发现</div>
                            <div class="phase-feature-desc">
                                相似话题推荐、智能标签、自动分类
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📊 对比分析</div>
                            <div class="phase-feature-desc">
                                共识/差异高亮、简单的对比视图
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📤 导出功能</div>
                            <div class="phase-feature-desc">
                                JSON格式导出、Markdown导出、PDF导出
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📈 质量指标</div>
                            <div class="phase-feature-desc">
                                30%用户有过复盘、20%用户基于历史再次群发
                            </div>
                        </div>
                    </div>
                </div>

                <!-- v2.0 -->
                <div class="phase-card">
                    <div class="phase-header">
                        <span class="phase-badge">📋 计划中</span>
                        <h3 class="phase-title">v2.0 - 智能分析</h3>
                    </div>
                    <p class="phase-content">
                        2026 Q4. 让用户依赖"智能加工",从存储到分析的质变。
                    </p>
                    <div class="phase-features">
                        <div class="phase-feature">
                            <div class="phase-feature-title">🧠 共识检测</div>
                            <div class="phase-feature-desc">
                                自动识别8个AI的共识点和分歧点
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">🔄 智能融合</div>
                            <div class="phase-feature-desc">
                                基于多AI回复生成综合分析报告
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">🔗 知识图谱</div>
                            <div class="phase-feature-desc">
                                Topic之间的关联可视化、知识网络
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📊 质量指标</div>
                            <div class="phase-feature-desc">
                                40%用户使用过共识分析、10%用户使用过融合
                            </div>
                        </div>
                    </div>
                </div>

                <!-- v3.0 -->
                <div class="phase-card">
                    <div class="phase-header">
                        <span class="phase-badge">🔮 未来</span>
                        <h3 class="phase-title">v3.0 - 认知增强</h3>
                    </div>
                    <p class="phase-content">
                        2027 Q2. 让用户觉得"Echo8让我更聪明",个人决策模式的深度洞察。
                    </p>
                    <div class="phase-features">
                        <div class="phase-feature">
                            <div class="phase-feature-title">👤 个人画像</div>
                            <div class="phase-feature-desc">
                                分析你的决策偏好、思考模式、盲区
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">⚠️ 盲区预警</div>
                            <div class="phase-feature-desc">
                                提醒你可能忽略的风险和角度
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📈 演进追踪</div>
                            <div class="phase-feature-desc">
                                展示你的思考方式如何随时间演变
                            </div>
                        </div>
                        <div class="phase-feature">
                            <div class="phase-feature-title">📊 质量指标</div>
                            <div class="phase-feature-desc">
                                用户月度复盘率&gt;60%、续费率&gt;80%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 永远不做 -->
        <section class="roadmap-section">
            <div class="wont-do">
                <h2 class="wont-do-title">🚫 永远不做的清单</h2>
                <p style="text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 18px; margin-bottom: 50px; line-height: 1.7;">
                    这些是我们明确不做的事情,以保持产品的核心定位
                </p>

                <div class="wont-do-grid">
                    <div class="wont-do-item">
                        <div class="wont-do-item-title">❌ 模型评分</div>
                        <div class="wont-do-item-content">
                            <p><strong>诱惑:</strong> 用户总想知道哪个AI更好</p>
                            <p><strong>陷阱:</strong> 一旦做了,就变成"模型排行榜"</p>
                            <p><strong>坚守:</strong> 我们的价值在"展现差异"而非"判定优劣"</p>
                        </div>
                    </div>

                    <div class="wont-do-item">
                        <div class="wont-do-item-title">❌ 云端强制</div>
                        <div class="wont-do-item-content">
                            <p><strong>诱惑:</strong> 云同步很方便,可以增加粘性</p>
                            <p><strong>陷阱:</strong> 违背"个人数字资产"的定位</p>
                            <p><strong>坚守:</strong> 本地优先,云端可选</p>
                        </div>
                    </div>

                    <div class="wont-do-item">
                        <div class="wont-do-item-title">❌ 社交化</div>
                        <div class="wont-do-item-content">
                            <p><strong>诱惑:</strong> 让用户分享历史,形成社区</p>
                            <p><strong>陷阱:</strong> 决策过程是私密的,强行社交会引起反感</p>
                            <p><strong>坚守:</strong> 个人工具,不做社交</p>
                        </div>
                    </div>

                    <div class="wont-do-item">
                        <div class="wont-do-item-title">❌ 全自动决策</div>
                        <div class="wont-do-item-content">
                            <p><strong>诱惑:</strong> AI自动做决策,用户不用思考</p>
                            <p><strong>陷阱:</strong> 变成"AI替你决定",失去核心价值</p>
                            <p><strong>坚守:</strong> 人类永远是决策者,AI只是顾问</p>
                        </div>
                    </div>

                    <div class="wont-do-item">
                        <div class="wont-do-item-title">❌ 强制登录</div>
                        <div class="wont-do-item-content">
                            <p><strong>诱惑:</strong> 可以收集数据,增加用户粘性</p>
                            <p><strong>陷阱:</strong> 违背本地优先原则</p>
                            <p><strong>坚守:</strong> 无需注册,完全匿名</p>
                        </div>
                    </div>

                    <div class="wont-do-item">
                        <div class="wont-do-item-title">❌ 历史审查</div>
                        <div class="wont-do-item-content">
                            <p><strong>压力:</strong> 可能会有合规压力</p>
                            <p><strong>拒绝:</strong> 个人资产不应被审查</p>
                            <p><strong>坚守:</strong> 本地存储,我们无权访问</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 核心原则 -->
        <section style="text-align: center; margin: 80px 0 40px; padding: 60px; background: rgba(0, 255, 136, 0.05); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 20px;">
            <h2 style="font-size: 32px; color: #fff; margin-bottom: 20px;">⚡ 坚守核心原则</h2>
            <p style="color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1.8; max-width: 700px; margin: 0 auto 30px;">
                无论未来如何发展,虫洞8°将永远坚守以下核心原则:
            </p>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 800px; margin: 0 auto; text-align: left;">
                <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 12px;">
                    <div style="color: #00ff88; font-size: 20px; margin-bottom: 10px;">🔍 多视角 > 单一答案</div>
                    <div style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">价值在对比,不在结论</div>
                </div>
                <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 12px;">
                    <div style="color: #00ff88; font-size: 20px; margin-bottom: 10px;">🎯 决策支持 > 信息获取</div>
                    <div style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">帮助判断,不替代判断</div>
                </div>
                <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 12px;">
                    <div style="color: #00ff88; font-size: 20px; margin-bottom: 10px;">💎 长期资产 > 临时对话</div>
                    <div style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">积累价值,不是消费信息</div>
                </div>
                <div style="background: rgba(0, 0, 0, 0.3); padding: 25px; border-radius: 12px;">
                    <div style="color: #00ff88; font-size: 20px; margin-bottom: 10px;">🔐 本地优先 > 云端便利</div>
                    <div style="color: rgba(255, 255, 255, 0.7); font-size: 14px;">所有权感,建立信任</div>
                </div>
            </div>
        </section>
    </div>

    <footer class="footer">
        <div class="container">
            <div class="footer-links">
                <a href="index.html" class="footer-link">首页</a>
                <a href="philosophy.html" class="footer-link">设计哲学</a>
                <a href="how-it-works.html" class="footer-link">工作原理</a>
                <a href="use-cases.html" class="footer-link">使用场景</a>
                <a href="roadmap.html" class="footer-link">路线图</a>
                <a href="privacy.html" class="footer-link">隐私政策</a>
                <a href="faq.html" class="footer-link">常见问题</a>
                <a href="about.html" class="footer-link">关于</a>
            </div>
            <p class="copyright">
                &copy; 2026 虫洞8° · 数据主权 · 本地优先 · 隐私至上
            </p>
        </div>
    </footer>

    <script src="js/matrix-rain.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            MatrixRain('matrix-rain', 0.05);

            const currentPage = window.location.pathname.split('/').pop();
            document.querySelectorAll('.nav-link').forEach(link => {
                if (link.getAttribute('href') === currentPage) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.phase-card, .wont-do-item').forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                observer.observe(card);
            });
        });
    </script>
</body>
</html>