HiCodeHC.github.io/index.html at main · HiCodeHC/HiCodeHC.github.io · 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
<!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="HiCode (HC) —— 前后端一体化、多端可开发的解释型编程语言，让小白也能轻松上手。" />
<title>HiCode · 人人都能开发的编程语言</title>
<link rel="icon" href="assets/hicode-logo.jpg" type="image/jpeg" />
<style>
  :root {
    --bg: #0a0a0c;
    --surface: rgba(255, 255, 255, .035);
    --surface-strong: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .08);
    --line-strong: rgba(255, 255, 255, .16);
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --dim: #6e6e73;
    --accent: #c7a56b;
    --accent-ink: #171309;
    --radius: 14px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    background-image: radial-gradient(80% 50% at 50% 0%, rgba(255, 255, 255, .05), transparent 60%);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  ::selection { background: rgba(199, 165, 107, .28); }

  .container { width: min(1000px, 90%); margin: 0 auto; }

  .glass {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .28);
    color: var(--text);
    transition: border-color .25s, transform .25s;
  }

  /* ===== 导航 ===== */
  header { position: sticky; top: 0; z-index: 30; padding: 14px 0;
    background: rgba(10, 10, 12, .72);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line); }
  .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 6px 0; }
  .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; letter-spacing: .5px; color: var(--text); }
  .brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
  .nav-links { display: flex; gap: 32px; color: var(--muted); font-size: 14.5px; }
  .nav-links a { transition: color .2s; }
  .nav-links a:hover { color: var(--text); }
  .nav-cta { padding: 9px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
    font-size: 14px; font-weight: 600; transition: opacity .2s, transform .2s; }
  .nav-cta:hover { opacity: .88; }

  /* ===== Hero ===== */
  .hero { padding: 150px 0 170px; }
  .hero .badge { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px;
    padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; }
  .hero .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .hero h1 { margin: 28px 0 0; max-width: 760px; font-size: clamp(40px, 6vw, 76px); line-height: 1.12;
    font-weight: 800; letter-spacing: .5px; }
  .hero h1 .accent { color: var(--accent); }
  .hero .sub { margin-top: 28px; max-width: 580px; color: var(--muted); font-size: 17px; }
  .hero .sub b { color: var(--text); font-weight: 600; }
  .hero .ctas { margin-top: 44px; display: flex; gap: 16px; flex-wrap: wrap; }
  .btn { padding: 14px 34px; border-radius: 999px; font-size: 15px; font-weight: 600; transition: opacity .2s, transform .2s, border-color .2s; }
  .btn.primary { background: var(--accent); color: var(--accent-ink); }
  .btn.primary:hover { opacity: .9; transform: translateY(-1px); }
  .btn.secondary { border: 1px solid var(--line-strong); color: var(--text); }
  .btn.secondary:hover { border-color: rgba(255, 255, 255, .34); }
  .hero .hint { margin-top: 40px; font-size: 13px; color: var(--dim); }
  .hero .hint a { color: var(--muted); border-bottom: 1px dashed currentColor; }
  .hero .hint a:hover { color: var(--text); }

  /* ===== 板块 ===== */
  section { padding: 120px 0; }
  section + section { border-top: 1px solid var(--line); }
  .sec-head { margin-bottom: 64px; max-width: 640px; }
  .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .sec-head .eyebrow { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
  .sec-head h2 { margin: 14px 0 12px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: .5px; }
  .sec-head p { color: var(--muted); font-size: 16px; }

  /* 特点 / 技术 / 人群卡片 */
  .features, .tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
  .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
  .feat, .tech-item, .person { transition: border-color .25s, transform .25s; }
  .feat:hover, .tech-item:hover, .person:hover { border-color: var(--line-strong); transform: translateY(-3px); }
  .feat { padding: 32px 30px; }
  .feat .ico, .tech-item .ico, .person .em { font-size: 26px; margin-bottom: 18px; }
  .feat h3 { font-size: 19px; margin-bottom: 8px; font-weight: 700; }
  .feat p, .person p, .tech-item p { color: var(--muted); font-size: 14.5px; }
  .person { padding: 30px 28px; }
  .person h3 { font-size: 18px; margin: 14px 0 8px; font-weight: 700; }
  .tech-item { padding: 32px 30px; }
  .tech-item h3 { font-size: 18px; margin-bottom: 8px; font-weight: 700; }
  .tech-item .tag { font-size: 12px; color: var(--dim); margin-bottom: 14px; display: block; width: fit-content;
    border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; text-transform: uppercase; letter-spacing: 1px; }

  .quote { max-width: 640px; margin: 90px auto 0; text-align: center; }
  .quote p { font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; line-height: 1.7; color: var(--text); }
  .quote .who { margin-top: 18px; color: var(--dim); font-size: 14px; }

  /* ===== 路线图 ===== */
  .roadmap { max-width: 640px; margin: 0 auto; padding-left: 20px; border-left: 1px solid var(--line); }
  .phase { display: flex; gap: 26px; padding: 8px 0 52px; }
  .phase:last-child { padding-bottom: 0; }
  .phase .node { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; background: var(--accent);
    color: var(--accent-ink); display: grid; place-items: center; font-size: 16px; font-weight: 700; }
  .phase h3 { font-size: 20px; font-weight: 700; margin: 2px 0 6px; }
  .phase .step-tag { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
  .phase p { color: var(--muted); font-size: 15px; }

  /* ===== 常见问题 ===== */
  .faq-list { max-width: 680px; margin: 0 auto; display: grid; gap: 14px; }
  details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
    gap: 16px; padding: 22px 28px; font-size: 16px; font-weight: 600; }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq[open] { border-color: var(--line-strong); }
  details.faq summary .pl { color: var(--accent); font-size: 20px; font-weight: 400; }
  details.faq .a { padding: 0 28px 24px; color: var(--muted); font-size: 15px; }

  /* ===== 页脚 ===== */
  footer { padding: 110px 0 50px; border-top: 1px solid var(--line); }
  .foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
  @media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }
  .foot h4 { font-size: 14px; margin-bottom: 18px; color: var(--text); }
  .foot ul { list-style: none; }
  .foot li, .foot p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
  .foot a:hover { color: var(--text); }
  .foot .email { color: var(--accent); }
  .disclaim { margin-top: 64px; padding: 28px 0 0; border-top: 1px solid var(--line);
    color: var(--dim); font-size: 12.5px; line-height: 2; }
  .disclaim b { color: var(--muted); }

  /* ===== 渐显 ===== */
  [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.22,.68,.28,1), transform 1s cubic-bezier(.22,.68,.28,1); }
  [data-reveal].is-visible { opacity: 1; transform: none; }
  .stagger-box > * { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,.68,.28,1), transform .9s cubic-bezier(.22,.68,.28,1); }
  .stagger-box > *.is-visible { opacity: 1; transform: none; }

  @media (max-width: 820px) {
    .nav-links { display: none; }
    .hero { padding: 90px 0 110px; }
    section { padding: 80px 0; }
  }
</style>
</head>
<body>
<header>
  <div class="container nav">
    <div class="brand"><img src="assets/hicode-logo.jpg" alt="HiCode" /><span>HiCode</span></div>
    <nav class="nav-links">
      <a href="#features">产品特点</a>
      <a href="#people">适用人群</a>
      <a href="#tech">技术预览</a>
      <a href="#roadmap">路线图</a>
      <a href="#faq">常见问题</a>
      <a href="learn/">学习中心</a>
    </nav>
    <a class="nav-cta" href="#download">下载</a>
  </div>
</header>

<main>
  <!-- ===== Hero ===== -->
  <section class="hero">
    <div class="container">
      <div class="badge" data-reveal><span class="dot"></span> HiCode · 前后端一体化编程语言</div>
      <h1 data-reveal>打造属于每个人的<br /><span class="accent">一站式编程语言</span></h1>
      <p class="sub" data-reveal>
        HiCode（简称 HC）让前端与后端在同一套语言中协同开发。用图形界面搭建前端，用接近自然的简易代码编写后端。
        告别复杂的工程配置，<b>小白也能轻松上手</b>，把想法变成真正的应用。
      </p>
      <div class="ctas" data-reveal>
        <a class="btn primary" href="#" id="download">下载 HiCode</a>
        <a class="btn secondary" href="ide/">网页端体验</a>
        <a class="btn secondary" href="learn/">学习中心</a>
      </div>
      <div class="hint" data-reveal>网页端 v0.026 已开放 · 学习中心已同步 · 下载即将上线 · 项目开源可用 · <a href="old/">历史版本</a></div>
    </div>
  </section>

  <!-- ===== 产品特点 ===== -->
  <section id="features">
    <div class="container">
      <div class="sec-head" data-reveal>
        <div class="eyebrow">Core Features</div>
        <h2>产品特点</h2>
        <p>让编程回归简单 —— 前后端一起写，跨端一起跑。</p>
      </div>
      <div class="features stagger-box">
        <div class="feat glass"><div class="ico">🧩</div><h3>前后端同时开发</h3><p>一套语言打通前后端，数据交换与逻辑复用不再繁琐，开发节奏大幅提速。</p></div>
        <div class="feat glass"><div class="ico">🎨</div><h3>图形化界面建前端</h3><p>拖拽、点选即可搭建前端界面，所见即所得，摆脱手写样式的门槛。</p></div>
        <div class="feat glass"><div class="ico">💬</div><h3>简易语言写后端</h3><p>使用接近自然语言的简易代码描述业务逻辑，小白也能读懂并写出后端。</p></div>
        <div class="feat glass"><div class="ico">📱</div><h3>多平台可开发</h3><p>支持网页、安卓与 Windows 平台，一次编写，多端运行。</p></div>
        <div class="feat glass"><div class="ico">🧭</div><h3>零基础易上手</h3><p>为新手量身设计，无需复杂环境配置，从第一行代码到第一个应用快速起步。</p></div>
        <div class="feat glass"><div class="ico">🚀</div><h3>解释型语言</h3><p>即时运行、即时反馈，让学习与调试真正变得轻松而顺畅。</p></div>
      </div>
    </div>
  </section>

  <!-- ===== 适用人群 ===== -->
  <section id="people">
    <div class="container">
      <div class="sec-head center" data-reveal>
        <div class="eyebrow">Who It's For</div>
        <h2>HiCode 适合谁</h2>
        <p>无论你是编程新人，还是资深开发者，都能从 HiCode 中受益。</p>
      </div>
      <div class="people stagger-box">
        <div class="person glass"><div class="em">🎓</div><h3>编程小白 / 学生</h3><p>零基础也能靠图形界面 + 简易代码起步，把课堂所学落到真实项目。</p></div>
        <div class="person glass"><div class="em">💼</div><h3>职场人 / 业务人员</h3><p>不懂技术也想提效？用 HiCode 快速搭建内部工具与原型，解决手头难题。</p></div>
        <div class="person glass"><div class="em">👥</div><h3>小团队 / 独立开发者</h3><p>前端后端一人搞定，降低协作成本，更快验证想法、迭代产品。</p></div>
        <div class="person glass"><div class="em">🧑‍💻</div><h3>资深开发者</h3><p>了解、参与一款新语言的建造成长，贡献开源，共建新一代开发方式。</p></div>
      </div>
      <div class="quote" data-reveal>
        <p>“让创造应用的能力，不再只属于少数掌握复杂技术的人。”</p>
        <div class="who">—— HiCode 团队的初心</div>
      </div>
    </div>
  </section>

  <!-- ===== 技术预览 ===== -->
  <section id="tech">
    <div class="container">
      <div class="sec-head" data-reveal>
        <div class="eyebrow">Technical Preview</div>
        <h2>技术预览（规划中）</h2>
        <p>以下是 HiCode 正在规划的核心技术方向，具体以最终发布为准。</p>
      </div>
      <div class="tech stagger-box">
        <div class="tech-item glass"><span class="tag">规划中</span><div class="ico">🖱️</div><h3>图形化前端设计器</h3><p>拖拽组件、点选配置生成前端界面与布局，所见即所得。</p></div>
        <div class="tech-item glass"><span class="tag">规划中</span><div class="ico">⚙️</div><h3>解释型后端运行时</h3><p>面向业务逻辑的简易语法，即时解释执行，快速反馈与迭代。</p></div>
        <div class="tech-item glass"><span class="tag">规划中</span><div class="ico">🔩</div><h3>统一前后端数据桥</h3><p>用同一套语言与数据模型连接界面与逻辑，数据交换更顺畅。</p></div>
        <div class="tech-item glass"><span class="tag">规划中</span><div class="ico">🧱</div><h3>多端运行时</h3><p>面向网页、安卓（WebView）与 Windows 的运行与打包方案。</p></div>
      </div>
    </div>
  </section>

  <!-- ===== 路线图 ===== -->
  <section id="roadmap">
    <div class="container">
      <div class="sec-head center" data-reveal>
        <div class="eyebrow">Roadmap</div>
        <h2>开发路线图</h2>
        <p>HiCode 将分阶段逐步推进，欢迎关注与参与。</p>
      </div>
      <div class="roadmap">
        <div class="phase" data-reveal><div class="node">01</div><div><div class="step-tag">Phase 1 · Define</div><h3>语言与愿景</h3><p>确立产品理念、语言核心设计思路与图形化开发方向，搭建官网与社区。</p></div></div>
        <div class="phase" data-reveal><div class="node">02</div><div><div class="step-tag">Phase 2 · Prototype</div><h3>核心原型</h3><p>实现图形化前端设计器与后端解释器的早期可运行原型，打通基础开发流程。</p></div></div>
        <div class="phase" data-reveal><div class="node">03</div><div><div class="step-tag">Phase 3 · Multi-end</div><h3>多端适配</h3><p>完善网页端，并逐步支持安卓（WebView）与 Windows 平台。</p></div></div>
        <div class="phase" data-reveal><div class="node">04</div><div><div class="step-tag">Phase 4 · Open Source</div><h3>对外开放与共建</h3><p>正式开放源代码、文档与学习中心，邀请社区共同参与迭代成长。</p></div></div>
      </div>
    </div>
  </section>

  <!-- ===== 常见问题 ===== -->
  <section id="faq">
    <div class="container">
      <div class="sec-head center" data-reveal>
        <div class="eyebrow">FAQ</div>
        <h2>常见问题</h2>
        <p>关于 HiCode 你可能有这些疑问。</p>
      </div>
      <div class="faq-list stagger-box">
        <details class="faq glass"><summary>HiCode 现在可以下载使用吗？<span class="pl">+</span></summary><div class="a">网页端 v0.026 已开放，可直接在线编写 HIC 代码、实时转译为网页并导出；桌面 / 移动端下载渠道仍在规划中，正式发布后我们会第一时间公布。你也可前往 <a href="old/">历史版本</a> 查看此前的预览版。</div></details>
        <details class="faq glass"><summary>完全没有编程基础，真的能上手吗？<span class="pl">+</span></summary><div class="a">这正是 HiCode 的设计目标：用图形化界面创建前端、用接近自然的简易代码编写后端，尽量降低技术门槛，让小白也能迈出第一步。</div></details>
        <details class="faq glass"><summary>HiCode 是免费使用的吗？是否开源？<span class="pl">+</span></summary><div class="a">是的，HiCode 以开源方式发布，遵循相应的开源许可协议。我们会坚持开放、可自由使用与二次开发的原则。</div></details>
        <details class="faq glass"><summary>支持哪些开发平台？<span class="pl">+</span></summary><div class="a">我们规划支持网页、安卓（WebView）与 Windows 三大平台，一次编写、多端运行。具体支持程度以最终发布为准。</div></details>
        <details class="faq glass"><summary>我可以如何参与 HiCode 的成长？<span class="pl">+</span></summary><div class="a">欢迎通过产品建议邮箱 hicodehc@outlook.com 提出想法与建议，后续开源后也可通过社区贡献代码、文档与案例。</div></details>
      </div>
    </div>
  </section>
</main>

<!-- ===== 页脚 ===== -->
<footer id="footer">
  <div class="container">
    <div class="foot">
      <div>
        <div class="brand" style="margin-bottom:14px;"><img src="assets/hicode-logo.jpg" alt="HiCode" /><span>HiCode</span></div>
        <p style="margin-top:4px;">前后端一体化、多端可开发的编程语言。<br/>让编程回归简单。</p>
      </div>
      <div>
        <h4>资源</h4>
        <ul>
          <li><a href="#">下载 HiCode</a></li>
          <li><a href="ide/">网页端体验</a></li>
          <li><a href="learn/">学习中心</a></li>
          <li><a href="#">官方文档</a></li>
        </ul>
      </div>
      <div>
        <h4>项目</h4>
        <ul>
          <li><a href="https://github.com/HiCodeHC/HiCodeHC.github.io" target="_blank" rel="noopener">GitHub 仓库</a></li>
          <li><a href="#">开源许可证</a></li>
          <li><a href="old/">历史版本</a></li>
          <li><a href="#">参与共建</a></li>
        </ul>
      </div>
      <div>
        <h4>联系我们</h4>
        <ul>
          <li>产品建议邮箱：<br/><a class="email" href="mailto:hicodehc@outlook.com">hicodehc@outlook.com</a></li>
        </ul>
      </div>
    </div>

    <div class="disclaim" data-reveal>
      <b>免责声明：</b> HiCode 目前仍处于持续开发与完善阶段。本站所展示的功能、特性、下载入口及文档链接中，尚未上线的内容仅用于产品愿景展示，不代表最终形态。HiCode 按“现状”提供，本项目及其贡献者不对因使用本站或相关软件所造成的任何直接或间接损失承担责任。<br/>
      <b>开源许可：</b> HiCode 项目以开源方式发布，遵循相应的开源许可协议（具体以仓库内 LICENSE 文件为准）。<br/>
      <b>版权信息：</b> © <span id="year"></span> HiCode（HC）项目团队 · 保留相关权利。
    </div>
  </div>
</footer>

<script>
  document.getElementById("year").textContent = new Date().getFullYear();
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) { e.target.classList.add("is-visible"); io.unobserve(e.target); }
    });
  }, { threshold: 0.1 });
  document.querySelectorAll("[data-reveal]").forEach(el => io.observe(el));

  /* 卡片组错峰渐显 */
  document.querySelectorAll(".stagger-box").forEach(box => {
    const kids = Array.prototype.slice.call(box.children);
    const ob = new IntersectionObserver((entries, self) => {
      entries.forEach(en => {
        if (en.isIntersecting) {
          kids.forEach((k, i) => { k.style.transitionDelay = (i * 70) + "ms"; k.classList.add("is-visible"); });
          self.disconnect();
        }
      });
    }, { threshold: 0.12 });
    ob.observe(box);
  });
</script>
</body>
</html>