Skip to content

Commit 24673d0

Browse files
HiCodeHCHiCodeHC
committed
Add index.html
1 parent 5170c20 commit 24673d0

1 file changed

Lines changed: 276 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,276 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="description" content="HiCode (HC) —— 前后端一体化、多端可开发的解释型编程语言，让小白也能轻松上手。" />
7+
<title>HiCode · 人人都能开发的编程语言</title>
8+
<style>
9+
:root {
10+
--bg: #0b1026;
11+
--bg-soft: #111737;
12+
--card: #161d42;
13+
--line: #2a3366;
14+
--accent: #5b8cff;
15+
--accent-2: #7c5bff;
16+
--accent-grad: linear-gradient(135deg, #5b8cff 0%, #7c5bff 100%);
17+
--text: #e7ecff;
18+
--muted: #9aa5d0;
19+
--radius: 16px;
20+
}
21+
* { margin: 0; padding: 0; box-sizing: border-box; }
22+
html { scroll-behavior: smooth; }
23+
body {
24+
background: var(--bg);
25+
color: var(--text);
26+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, Helvetica, Arial, sans-serif;
27+
line-height: 1.7;
28+
overflow-x: hidden;
29+
}
30+
a { color: inherit; text-decoration: none; }
31+
32+
/* ---- background decoration ---- */
33+
.bg-wrap { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
34+
.bg-wrap .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .45; }
35+
.bg-wrap .orb.a { width: 480px; height: 480px; background: #2d4bd6; top: -160px; left: -120px; }
36+
.bg-wrap .orb.b { width: 420px; height: 420px; background: #6a3fd6; bottom: -140px; right: -100px; }
37+
38+
.container { width: min(1120px, 92%); margin: 0 auto; }
39+
40+
/* ---- header ---- */
41+
header { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); background: rgba(11,16,38,.72); border-bottom: 1px solid var(--line); }
42+
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
43+
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: .5px; }
44+
.brand .logo {
45+
width: 34px; height: 34px; border-radius: 10px; background: var(--accent-grad);
46+
display: grid; place-items: center; color: #fff; font-family: ui-monospace, Consolas, monospace; font-weight: 900;
47+
box-shadow: 0 4px 18px rgba(91,140,255,.45);
48+
}
49+
.nav-links { display: flex; gap: 26px; color: var(--muted); font-size: 15px; }
50+
.nav-links a { transition: color .2s; }
51+
.nav-links a:hover { color: var(--text); }
52+
.nav-cta { background: var(--accent-grad); padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #fff; box-shadow: 0 6px 20px rgba(91,140,255,.35); transition: transform .2s; }
53+
.nav-cta:hover { transform: translateY(-2px); }
54+
55+
/* ---- hero ---- */
56+
.hero { text-align: center; padding: 90px 0 70px; position: relative; }
57+
.hero .badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(91,140,255,.14); border: 1px solid rgba(91,140,255,.4); color: #9fbeff; padding: 6px 16px; border-radius: 999px; font-size: 13px; margin-bottom: 26px; }
58+
.hero .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #5bffb0; box-shadow: 0 0 10px #5bffb0; }
59+
.hero h1 { font-size: clamp(44px, 8vw, 84px); line-height: 1.05; font-weight: 900; letter-spacing: 1px; }
60+
.hero h1 .grad { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
61+
.hero .sub { margin: 22px auto 0; max-width: 660px; color: var(--muted); font-size: 18px; }
62+
.hero .ctas { margin-top: 38px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
63+
.btn { padding: 14px 34px; border-radius: 999px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: transform .2s, box-shadow .2s; }
64+
.btn.primary { background: var(--accent-grad); color: #fff; box-shadow: 0 10px 30px rgba(91,140,255,.4); }
65+
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
66+
.btn:hover { transform: translateY(-3px); }
67+
.hero .hint { margin-top: 26px; font-size: 13px; color: #6773a5; }
68+
.hero .hint a { color: #8fa3ff; border-bottom: 1px dashed currentColor; }
69+
70+
/* ---- sections ---- */
71+
section { padding: 78px 0; }
72+
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
73+
.sec-head .eyebrow { color: var(--accent); letter-spacing: 3px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
74+
.sec-head h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin: 10px 0 14px; }
75+
.sec-head p { color: var(--muted); font-size: 16px; }
76+
77+
/* features (一级) */
78+
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
79+
.feat { background: linear-gradient(180deg, var(--card), var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; transition: transform .25s, border-color .25s; }
80+
.feat:hover { transform: translateY(-6px); border-color: var(--accent); }
81+
.feat .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-grad); display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; box-shadow: 0 8px 22px rgba(91,140,255,.35); }
82+
.feat h3 { font-size: 20px; margin-bottom: 10px; }
83+
.feat p { color: var(--muted); font-size: 15px; }
84+
85+
/* advantages (二级) */
86+
.adv { text-align: center; }
87+
.adv-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
88+
.adv-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; }
89+
.adv-item .num { font-family: ui-monospace, Consolas, monospace; font-size: 30px; font-weight: 900; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
90+
.adv-item h3 { font-size: 20px; margin: 8px 0 10px; }
91+
.adv-item p { color: var(--muted); font-size: 15px; }
92+
93+
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 40px; }
94+
.trio-el { background: rgba(22,29,66,.6); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; gap: 14px; align-items: flex-start; text-align: left; }
95+
.trio-el .tick { color: #5bffb0; font-size: 22px; line-height: 1; }
96+
.trio-el .t-title { font-weight: 700; }
97+
.trio-el .t-desc { color: var(--muted); font-size: 13px; }
98+
99+
/* ---- footer (三级) ---- */
100+
footer { border-top: 1px solid var(--line); background: rgba(11,16,38,.6); padding: 52px 0 40px; }
101+
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
102+
.foot h4 { font-size: 15px; color: var(--text); margin-bottom: 14px; }
103+
.foot ul { list-style: none; }
104+
.foot li, .foot p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
105+
.foot a:hover { color: #8fa3ff; }
106+
.foot .email { color: #9fbeff; }
107+
.foot small { color: #6773a5; }
108+
109+
.disclaim { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); color: #6773a5; font-size: 12.5px; line-height: 1.8; }
110+
.disclaim b { color: #9aa5d0; }
111+
112+
@media (max-width: 640px) {
113+
.nav-links { display: none; }
114+
.hero { padding: 60px 0 48px; }
115+
section { padding: 56px 0; }
116+
}
117+
</style>
118+
</head>
119+
<body>
120+
<div class="bg-wrap"><div class="orb a"></div><div class="orb b"></div></div>
121+
122+
<header>
123+
<div class="container nav">
124+
<div class="brand"><span class="logo">&lt;/&gt;</span> HiCode</div>
125+
<nav class="nav-links">
126+
<a href="#features">产品特点</a>
127+
<a href="#mission">项目初心</a>
128+
<a href="#advantages">产品优点</a>
129+
<a href="#learn">学习中心</a>
130+
<a href="#footer">联系我们</a>
131+
</nav>
132+
<a class="nav-cta" href="#download">立即下载</a>
133+
</div>
134+
</header>
135+
136+
<main>
137+
<!-- 一级：标题、初心 -->
138+
<section class="hero" id="mission">
139+
<div class="container">
140+
<div class="badge"><span class="dot"></span> HiCode · 前后端一体化编程语言</div>
141+
<h1>打造属于每个人的<br /><span class="grad">一站式编程语言</span></h1>
142+
<p class="sub">
143+
HiCode（简称 HC）让前端与后端在同一套语言中协同开发，用图形界面搭建前端、用接近自然的简易代码编写后端。
144+
告别复杂的工程配置，小白也能轻松上手，把想法变成真正的应用。
145+
</p>
146+
<div class="ctas">
147+
<a class="btn primary" href="#" id="download">↓ 下载 HiCode</a>
148+
<a class="btn ghost" href="#">网页端体验</a>
149+
<a class="btn ghost" href="#" id="learn">学习中心</a>
150+
</div>
151+
<div class="hint">下载、网页端与学习中心即将上线，敬请期待 · 项目开源可用</div>
152+
</div>
153+
</section>
154+
155+
<!-- 一级：产品特点 -->
156+
<section id="features">
157+
<div class="container">
158+
<div class="sec-head">
159+
<div class="eyebrow">Core Features</div>
160+
<h2>产品特点</h2>
161+
<p>让编程回归简单 —— 前后端一起写，跨端一起跑。</p>
162+
</div>
163+
<div class="features">
164+
<div class="feat">
165+
<div class="ico">🧩</div>
166+
<h3>前后端同时开发</h3>
167+
<p>一套语言打通前后端，数据交换与逻辑复用不再繁琐，开发节奏大幅提速。</p>
168+
</div>
169+
<div class="feat">
170+
<div class="ico">🎨</div>
171+
<h3>图形化界面建前端</h3>
172+
<p>拖拽、点选即可搭建前端界面，所见即所得，摆脱手写样式的门槛。</p>
173+
</div>
174+
<div class="feat">
175+
<div class="ico">💬</div>
176+
<h3>简易语言写后端</h3>
177+
<p>使用接近自然语言的简易代码描述业务逻辑，小白也能读懂并写出后端。</p>
178+
</div>
179+
<div class="feat">
180+
<div class="ico">📱</div>
181+
<h3>多平台可开发</h3>
182+
<p>支持网页、安卓与 Windows 平台，一次编写，多端运行。</p>
183+
</div>
184+
<div class="feat">
185+
<div class="ico">🧭</div>
186+
<h3>零基础易上手</h3>
187+
<p>为新手量身设计，无需复杂环境配置，从第一行代码到第一个应用快速起步。</p>
188+
</div>
189+
<div class="feat">
190+
<div class="ico">🚀</div>
191+
<h3>解释型语言</h3>
192+
<p>即时运行、即时反馈，让学习与调试真正变得轻松而顺畅。</p>
193+
</div>
194+
</div>
195+
</div>
196+
</section>
197+
198+
<!-- 二级：产品优点 / 开源 / 多端 -->
199+
<section class="adv" id="advantages">
200+
<div class="container">
201+
<div class="sec-head">
202+
<div class="eyebrow">Why HiCode</div>
203+
<h2>产品优点</h2>
204+
<p>开放、自由、简单 —— 一个面向所有人的开发方式。</p>
205+
</div>
206+
<div class="adv-list">
207+
<div class="adv-item">
208+
<div class="num">01</div>
209+
<h3>完整（Front & Back Together）</h3>
210+
<p>前端与后端统一于一个语言生态，减少上下文切换，协作更高效。</p>
211+
</div>
212+
<div class="adv-item">
213+
<div class="num">02</div>
214+
<h3>简单（Designed for Everyone）</h3>
215+
<p>图形界面与简易代码双管齐下，让编程小白也能独立完成自己的项目。</p>
216+
</div>
217+
<div class="adv-item">
218+
<div class="num">03</div>
219+
<h3>跨界（One Code, Many Platforms）</h3>
220+
<p>面向多端开放，网页、安卓、Windows 自由覆盖，想象力无可阻挡。</p>
221+
</div>
222+
</div>
223+
<div class="trio">
224+
<div class="trio-el"><span class="tick">✔</span><div><div class="t-title">开源可用</div><div class="t-desc">完全开放源代码，遵循开源许可，自由使用与二次开发。</div></div></div>
225+
<div class="trio-el"><span class="tick">✔</span><div><div class="t-title">多端开放</div><div class="t-desc">网页、安卓、Windows 三大平台同时支持开发与运行。</div></div></div>
226+
<div class="trio-el"><span class="tick">✔</span><div><div class="t-title">社区共建</div><div class="t-desc">开放共建，共同让 HiCode 变得更好、更容易上手。</div></div></div>
227+
</div>
228+
</div>
229+
</section>
230+
</main>
231+
232+
<!-- 三级：联系 / 免责 / 许可 -->
233+
<footer id="footer">
234+
<div class="container">
235+
<div class="foot">
236+
<div>
237+
<div class="brand" style="margin-bottom:14px;"><span class="logo">&lt;/&gt;</span> HiCode</div>
238+
<p>前后端一体化、多端可开发的编程语言。<br/>让编程回归简单。</p>
239+
</div>
240+
<div>
241+
<h4>资源</h4>
242+
<ul>
243+
<li><a href="#">下载 HiCode</a></li>
244+
<li><a href="#">网页端体验</a></li>
245+
<li><a href="#">学习中心</a></li>
246+
<li><a href="#">官方文档</a></li>
247+
</ul>
248+
</div>
249+
<div>
250+
<h4>项目</h4>
251+
<ul>
252+
<li><a href="#">GitHub 仓库</a></li>
253+
<li><a href="#">开源许可证</a></li>
254+
<li><a href="#">版本更新</a></li>
255+
<li><a href="#">参与共建</a></li>
256+
</ul>
257+
</div>
258+
<div>
259+
<h4>联系我们</h4>
260+
<ul>
261+
<li>产品建议邮箱：<br/><a class="email" href="mailto:hicodehc@outlook.com">hicodehc@outlook.com</a></li>
262+
</ul>
263+
</div>
264+
</div>
265+
266+
<div class="disclaim">
267+
<b>免责声明：</b> HiCode 目前仍处于持续开发与完善阶段。本站所展示的功能、特性、下载入口及文档链接中，尚未上线的内容仅用于产品愿景展示，不代表最终形态。HiCode 按“现状”提供，本项目及其贡献者不对因使用本站或相关软件所造成的任何直接或间接损失承担责任。<br/>
268+
<b>开源许可：</b> HiCode 项目以开源方式发布，遵循相应的开源许可协议（具体以仓库内 LICENSE 文件为准）。<br/>
269+
<b>版权信息：</b> © <span id="year"></span> HiCode（HC）项目团队 · 保留相关权利。
270+
</div>
271+
</div>
272+
</footer>
273+
274+
<script>document.getElementById("year").textContent = new Date().getFullYear();</script>
275+
</body>
276+
</html>

0 commit comments

Comments
 (0)