-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
189 lines (173 loc) · 8.1 KB
/
docs.html
File metadata and controls
189 lines (173 loc) · 8.1 KB
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
<!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>
<link rel="stylesheet" href="styles/matrix.css">
<style>
/* 页面特定样式 */
.page-header {
text-align: center;
padding: 80px 0 40px;
border-bottom: 1px solid rgba(0, 255, 136, 0.2);
margin-bottom: 60px;
}
.page-title {
font-size: 48px;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 0 30px rgba(0, 255, 136, 0.8);
}
.page-subtitle {
font-size: 20px;
color: rgba(255, 255, 255, 0.7);
max-width: 800px;
margin: 0 auto;
}
.content-section {
margin-bottom: 60px;
}
.section-title {
font-size: 32px;
color: #00ff88;
margin-bottom: 30px;
border-left: 4px solid #00ff88;
padding-left: 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="product.html" class="nav-link">产品</a>
<a href="tools.html" class="nav-link">智能工具</a>
<a href="download.html" class="nav-link">下载</a>
<a href="docs.html" class="nav-link">文档</a>
<a href="about.html" class="nav-link">关于</a>
</div>
</nav> <!-- 页面头部 -->
<section class="page-header">
<h1 class="page-title">文档与帮助</h1>
<p class="page-subtitle">详细的使用文档和技术指南</p>
</section>
<!-- 下载选项 -->
<section class="content-section">
<h2 class="section-title">📥 下载选项</h2>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
<div class="card" style="text-align: center;">
<div style="font-size: 64px; margin-bottom: 20px;">🌐</div>
<h3 style="color: #00ff88; margin-bottom: 15px;">Chrome扩展</h3>
<p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 25px;">直接在Chrome浏览器中使用，侧边栏形式，无需安装独立应用</p>
<a href="#" class="btn btn-primary" style="width: 100%;">下载Chrome扩展</a>
</div>
<div class="card" style="text-align: center;">
<div style="font-size: 64px; margin-bottom: 20px;">💻</div>
<h3 style="color: #00ff88; margin-bottom: 15px;">桌面应用</h3>
<p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 25px;">独立桌面应用程序，功能更完整，性能更稳定</p>
<a href="#" class="btn btn-secondary" style="width: 100%;">下载桌面版 (macOS)</a>
<a href="#" class="btn btn-ghost" style="width: 100%; margin-top: 10px;">下载桌面版 (Windows)</a>
</div>
<div class="card" style="text-align: center;">
<div style="font-size: 64px; margin-bottom: 20px;">📱</div>
<h3 style="color: #00ff88; margin-bottom: 15px;">移动端</h3>
<p style="color: rgba(255, 255, 255, 0.8); margin-bottom: 25px;">iOS和Android版本正在开发中，敬请期待</p>
<button class="btn btn-ghost" style="width: 100%;" disabled>即将推出</button>
</div>
</div>
</section>
<!-- 系统要求 -->
<section class="content-section">
<h2 class="section-title">⚙️ 系统要求</h2>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
<div class="card">
<h4 style="color: #00ff88; margin-bottom: 10px;">Chrome扩展</h4>
<ul style="color: rgba(255, 255, 255, 0.7); padding-left: 20px;">
<li>Chrome 88+ 或 Edge 88+</li>
<li>至少 4GB RAM</li>
<li>100MB 可用磁盘空间</li>
</ul>
</div>
<div class="card">
<h4 style="color: #00ff88; margin-bottom: 10px;">桌面版 (macOS)</h4>
<ul style="color: rgba(255, 255, 255, 0.7); padding-left: 20px;">
<li>macOS 11.0+</li>
<li>至少 8GB RAM</li>
<li>500MB 可用磁盘空间</li>
</ul>
</div>
<div class="card">
<h4 style="color: #00ff88; margin-bottom: 10px;">桌面版 (Windows)</h4>
<ul style="color: rgba(255, 255, 255, 0.7); padding-left: 20px;">
<li>Windows 10+</li>
<li>至少 8GB RAM</li>
<li>500MB 可用磁盘空间</li>
</ul>
</div>
</div>
</section>
<!-- 安装指南 -->
<section class="content-section">
<h2 class="section-title">📋 安装指南</h2>
<div class="card">
<h3 style="color: #00ff88; margin-bottom: 20px;">Chrome扩展安装步骤</h3>
<ol style="color: rgba(255, 255, 255, 0.8); padding-left: 25px; line-height: 1.8;">
<li>下载扩展文件 (.crx 或 .zip)</li>
<li>打开Chrome浏览器，进入扩展管理页面 (chrome://extensions/)</li>
<li>开启"开发者模式"</li>
<li>点击"加载已解压的扩展程序"</li>
<li>选择下载的扩展文件夹</li>
<li>完成安装，开始使用！</li>
</ol>
</div>
</section> </div>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-links">
<a href="product.html" class="footer-link">产品</a>
<a href="tools.html" class="footer-link">智能工具</a>
<a href="download.html" class="footer-link">下载</a>
<a href="docs.html" class="footer-link">文档</a>
<a href="about.html" class="footer-link">关于</a>
<a href="privacy.html" class="footer-link">隐私政策</a>
</div>
<p class="copyright">
© 2026 虫洞8° · 数据主权 · 本地优先 · 隐私至上<br>
<span style="color: rgba(0, 255, 136, 0.5); font-size: 12px; margin-top: 10px; display: block;">
🌀 深海信号 · 并行计算 · 量子纠缠 · 神经网络
</span>
</p>
</div>
</footer>
<!-- 脚本 -->
<script src="../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");
}
});
});
</script>
</body>
</html>