-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
261 lines (246 loc) · 11.4 KB
/
Copy pathindex.html
File metadata and controls
261 lines (246 loc) · 11.4 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
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
<!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="F0RCE 是一个创意软件开发团队，专注网页工具、AI 模型网关、桌游产品和可持续维护的开源项目。"
/>
<title>TEAM F0RCE</title>
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="./assets/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png" />
<link rel="preload" href="./assets/f0rce-mark-badge.png" as="image" />
<link rel="stylesheet" href="./styles.css?v=f0rce-20260601" />
</head>
<body>
<a class="skip-link" href="#projects">跳到项目列表</a>
<header class="site-header" aria-label="F0RCE 网站页头">
<a class="brand-lockup" href="#top" aria-label="F0RCE 首页">
<span class="brand-token" aria-hidden="true">
<img src="./assets/f0rce-mark-badge.png" alt="" class="brand-mark" />
</span>
<span>F0RCE</span>
</a>
<nav class="primary-nav" aria-label="主导航">
<a href="#projects">项目</a>
<a href="#stack">能力</a>
<a href="#opensource">开源</a>
<a href="#contact">联系</a>
</nav>
</header>
<main>
<section class="hero section-dark" id="top" aria-labelledby="hero-title">
<div class="hero-grid">
<div class="hero-copy">
<p class="eyebrow">TEAM / F0.NZ / Web、AI、开源</p>
<h1 id="hero-title">TEAM F0RCE</h1>
<p class="hero-lede">
我们把小而锋利的想法做成可访问、可维护、可继续扩展的网页项目和 AI 工具。
</p>
<div class="hero-actions" aria-label="主要操作">
<a class="button button-primary" href="#projects">
<span>查看项目</span>
<span aria-hidden="true">↗</span>
</a>
<a class="button button-quiet" href="#opensource">
<span>开源作品</span>
<span aria-hidden="true">⌁</span>
</a>
</div>
</div>
<div class="hero-emblem" aria-label="F0RCE 标志视觉">
<img src="./assets/f0rce-logo-dark.png" alt="" />
<div class="emblem-caption">
<span>F0</span>
<strong>把 f0.nz 的零写进名字里，从入口开始交付作品。</strong>
</div>
</div>
</div>
<div class="signal-strip" aria-label="F0RCE 关注方向">
<span>本地优先工具</span>
<span>AI 模型网关</span>
<span>浏览器游戏</span>
<span>开源仓库</span>
<span>长期维护</span>
</div>
</section>
<section class="projects section-light" id="projects" aria-labelledby="projects-title">
<div class="section-heading">
<p class="eyebrow">项目展示</p>
<h2 id="projects-title">已经推出的项目，先放到台前。</h2>
<p>
这里集中展示 F0RCE 已经上线的网页工具、AI 网关和浏览器游戏。每个项目都保留真实入口和代码来源。
</p>
</div>
<div class="project-tabs" role="tablist" aria-label="项目分类">
<button class="tab-button is-active" type="button" data-filter="all" aria-pressed="true">全部</button>
<button class="tab-button" type="button" data-filter="web" aria-pressed="false">网页应用</button>
<button class="tab-button" type="button" data-filter="ai" aria-pressed="false">AI</button>
<button class="tab-button" type="button" data-filter="oss" aria-pressed="false">开源</button>
</div>
<div class="project-grid">
<article class="project-card" data-type="web">
<div class="project-preview project-preview-image">
<img src="./assets/projects/webtools-cover.svg?v=f0rce-20260601" alt="WebTools 多工具工作台生成封面" />
</div>
<div class="project-content">
<div class="project-meta">
<span>网页应用</span>
<span>本地工具</span>
</div>
<h3>WebTools</h3>
<p>
浏览器本地运行的多工具工作台，集成图片隐写、智能抠图、短链、域名检测和 Bytebeat 声音实验。
</p>
<div class="tech-tags" aria-label="技术栈">
<span>Canvas</span>
<span>Node.js</span>
<span>Local-first</span>
</div>
<div class="project-links">
<a href="https://tool.f0.nz/" target="_blank" rel="noreferrer" aria-label="访问 WebTools">访问</a>
</div>
</div>
</article>
<article class="project-card" data-type="web">
<div class="project-preview project-preview-image">
<img src="./assets/projects/hexagon-cover.svg?v=f0rce-20260601" alt="Hexagon 桌游对战中心生成封面" />
</div>
<div class="project-content">
<div class="project-meta">
<span>网页应用</span>
<span>桌游对战</span>
</div>
<h3>Hexagon</h3>
<p>
Web-first 的网络桌游对战中心，围绕房间、入座和事件流，把桌面游戏搬进浏览器。
</p>
<div class="tech-tags" aria-label="技术栈">
<span>JavaScript</span>
<span>Board Game</span>
<span>Realtime UI</span>
</div>
<div class="project-links">
<a href="https://hex.f0.nz/" target="_blank" rel="noreferrer" aria-label="访问 Hexagon">访问</a>
</div>
</div>
</article>
<article class="project-card" data-type="ai oss">
<div class="project-preview project-preview-image">
<img src="./assets/projects/huggingai-cover.svg?v=f0rce-20260601" alt="HuggingAI 统一 LLM API 网关生成封面" />
</div>
<div class="project-content">
<div class="project-meta">
<span>AI 网关</span>
<span>模型聚合</span>
</div>
<h3>HuggingAI</h3>
<p>
统一的 LLM API 网关，把多家模型服务整理成 OpenAI、Claude、Gemini 兼容接口。
</p>
<div class="tech-tags" aria-label="技术栈">
<span>Go</span>
<span>React</span>
<span>LLM API</span>
</div>
<div class="project-links">
<a href="https://api.f0.nz/" target="_blank" rel="noreferrer" aria-label="访问 HuggingAI">访问</a>
<a href="https://api.f0.nz/docs" target="_blank" rel="noreferrer" aria-label="查看 HuggingAI 文档">文档</a>
<a href="https://github.com/JTropy/HuggingAI" target="_blank" rel="noreferrer" aria-label="打开 HuggingAI GitHub 仓库">GitHub</a>
</div>
</div>
</article>
<article class="project-card" data-type="ai">
<div class="project-preview project-preview-image">
<img src="./assets/projects/imago-cover.svg?v=f0rce-20260601" alt="Imago AI 生图站生成封面" />
</div>
<div class="project-content">
<div class="project-meta">
<span>AI 生图</span>
<span>创意工具</span>
</div>
<h3>Imago</h3>
<p>
在线 AI 生图站，输入提示词即可生成图像，面向创意构思与素材产出。
</p>
<div class="tech-tags" aria-label="技术栈">
<span>Image Gen</span>
<span>Prompt</span>
<span>Web</span>
</div>
<div class="project-links">
<a href="https://imago.f0.nz/" target="_blank" rel="noreferrer" aria-label="访问 Imago">访问</a>
</div>
</div>
</article>
</div>
</section>
<section class="capabilities section-ink" id="stack" aria-labelledby="stack-title">
<div class="capability-intro">
<p class="eyebrow">我们怎么做</p>
<h2 id="stack-title">速度要够快，结构也要留得住。</h2>
</div>
<div class="capability-list">
<article>
<span>01</span>
<h3>真实入口</h3>
<p>项目先能打开、能完成核心动作，再继续打磨界面、性能和维护方式。</p>
</article>
<article>
<span>02</span>
<h3>AI 接入</h3>
<p>模型、接口和自动化能力要被整理成稳定入口，而不是停留在一次性 Demo。</p>
</article>
<article>
<span>03</span>
<h3>可替换内容</h3>
<p>作品集、截图、链接和说明保持低成本维护，方便后续持续替换真实项目。</p>
</article>
</div>
</section>
<section class="opensource section-light" id="opensource" aria-labelledby="opensource-title">
<div class="open-panel">
<div>
<p class="eyebrow">开源项目</p>
<h2 id="opensource-title">公开代码，是项目继续长大的接口。</h2>
</div>
<p>
F0RCE 的项目优先保留公开仓库、部署入口和可读说明。能复用的部分放到台前，方便继续协作和验证。
</p>
<a class="button button-outline" href="https://github.com/JTropy" target="_blank" rel="noreferrer">
<span>GitHub 主页</span>
<span aria-hidden="true">↗</span>
</a>
</div>
</section>
<section class="contact section-dark" id="contact" aria-labelledby="contact-title">
<div class="contact-grid">
<div>
<p class="eyebrow">开始聊聊</p>
<h2 id="contact-title">有新的工具想法，或者想一起把现有项目继续做实？</h2>
</div>
<div class="contact-card">
<p>把项目线索、仓库链接或上线目标发过来。F0RCE 更适合从一个可运行的入口开始，把它磨成可以长期展示的作品。</p>
<a class="button button-primary" href="https://github.com/JTropy" target="_blank" rel="noreferrer">
<span>GitHub / JTropy</span>
<span aria-hidden="true">↗</span>
</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<a class="brand-lockup" href="#top" aria-label="F0RCE 首页">
<span class="brand-token" aria-hidden="true">
<img src="./assets/f0rce-mark-badge.png" alt="" class="brand-mark" />
</span>
<span>F0RCE</span>
</a>
<p>创意软件开发团队。网页工具、AI 网关、浏览器游戏和开源项目。</p>
</footer>
<script src="./script.js?v=f0rce-20260601"></script>
</body>
</html>