Skip to content

Commit e8cd910

Browse files
HiCodeHCHiCodeHC
committed
Reinforce liquid glass (inner glow, gloss line) and soft staggered reveal animation
1 parent 8f1fc97 commit e8cd910

1 file changed

Lines changed: 59 additions & 32 deletions

File tree

‎index.html‎

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88
<link rel="icon" href="assets/hicode-logo.jpg" type="image/jpeg" />
99
<style>
1010
:root {
11-
--bg: #16120d;
12-
--card: rgba(255, 246, 230, 0.045);
13-
--line: rgba(255, 230, 190, 0.12);
11+
--bg: #171310;
12+
--card: rgba(255, 248, 235, 0.06);
13+
--line: rgba(255, 230, 190, 0.16);
1414
--accent: #d9ae6b;
15+
--accent-soft: rgba(217, 174, 107, .16);
1516
--text: #f5ecdd;
1617
--muted: #b4a488;
1718
--dim: #86775d;
@@ -21,7 +22,10 @@
2122
html { scroll-behavior: smooth; }
2223
body {
2324
background: var(--bg);
24-
background-image: radial-gradient(120% 80% at 50% 0%, #241a0d 0%, var(--bg) 60%);
25+
background-image:
26+
radial-gradient(72% 54% at 16% 12%, rgba(217, 174, 107, .20), transparent 62%),
27+
radial-gradient(62% 48% at 86% 72%, rgba(201, 139, 111, .15), transparent 60%),
28+
radial-gradient(120% 80% at 50% 0%, #251a0c 0%, transparent 62%);
2529
color: var(--text);
2630
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
2731
line-height: 1.8;
@@ -34,11 +38,18 @@
3438
.container { width: min(980px, 90%); margin: 0 auto; }
3539

3640
.glass {
37-
background: var(--card);
41+
position: relative;
42+
background: linear-gradient(140deg, rgba(255, 248, 235, .10), rgba(255, 248, 235, .035));
3843
border: 1px solid var(--line);
3944
border-radius: var(--radius);
40-
-webkit-backdrop-filter: blur(14px) saturate(120%);
41-
backdrop-filter: blur(14px) saturate(120%);
45+
-webkit-backdrop-filter: blur(18px) saturate(170%);
46+
backdrop-filter: blur(18px) saturate(170%);
47+
box-shadow: 0 12px 44px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -16px 30px rgba(255, 255, 255, .03);
48+
}
49+
.glass::before {
50+
content: "";
51+
position: absolute; left: 14%; right: 14%; top: 0; height: 1px;
52+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
4253
}
4354

4455
/* ===== 导航 ===== */
@@ -142,9 +153,11 @@
142153
color: var(--dim); font-size: 12.5px; line-height: 2; }
143154
.disclaim b { color: var(--muted); }
144155

145-
/* ===== 淡入 ===== */
146-
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
156+
/* ===== 渐显 ===== */
157+
[data-reveal] { opacity: 0; transform: translateY(26px) scale(.995); transition: opacity 1.1s cubic-bezier(.22,.68,.28,1), transform 1.1s cubic-bezier(.22,.68,.28,1); }
147158
[data-reveal].is-visible { opacity: 1; transform: none; }
159+
.stagger-box > * { opacity: 0; transform: translateY(30px); transition: opacity .95s cubic-bezier(.22,.68,.28,1), transform .95s cubic-bezier(.22,.68,.28,1); }
160+
.stagger-box > *.is-visible { opacity: 1; transform: none; }
148161

149162
@media (max-width: 820px) {
150163
.nav-links { display: none; }
@@ -196,13 +209,13 @@ <h1 data-reveal>打造属于每个人的<br /><span class="accent">一站式编
196209
<h2>产品特点</h2>
197210
<p>让编程回归简单 —— 前后端一起写，跨端一起跑。</p>
198211
</div>
199-
<div class="features">
200-
<div class="feat glass" data-reveal><div class="ico">🧩</div><h3>前后端同时开发</h3><p>一套语言打通前后端，数据交换与逻辑复用不再繁琐，开发节奏大幅提速。</p></div>
201-
<div class="feat glass" data-reveal><div class="ico">🎨</div><h3>图形化界面建前端</h3><p>拖拽、点选即可搭建前端界面，所见即所得，摆脱手写样式的门槛。</p></div>
202-
<div class="feat glass" data-reveal><div class="ico">💬</div><h3>简易语言写后端</h3><p>使用接近自然语言的简易代码描述业务逻辑，小白也能读懂并写出后端。</p></div>
203-
<div class="feat glass" data-reveal><div class="ico">📱</div><h3>多平台可开发</h3><p>支持网页、安卓与 Windows 平台，一次编写，多端运行。</p></div>
204-
<div class="feat glass" data-reveal><div class="ico">🧭</div><h3>零基础易上手</h3><p>为新手量身设计，无需复杂环境配置，从第一行代码到第一个应用快速起步。</p></div>
205-
<div class="feat glass" data-reveal><div class="ico">🚀</div><h3>解释型语言</h3><p>即时运行、即时反馈，让学习与调试真正变得轻松而顺畅。</p></div>
212+
<div class="features stagger-box">
213+
<div class="feat glass"><div class="ico">🧩</div><h3>前后端同时开发</h3><p>一套语言打通前后端，数据交换与逻辑复用不再繁琐，开发节奏大幅提速。</p></div>
214+
<div class="feat glass"><div class="ico">🎨</div><h3>图形化界面建前端</h3><p>拖拽、点选即可搭建前端界面，所见即所得，摆脱手写样式的门槛。</p></div>
215+
<div class="feat glass"><div class="ico">💬</div><h3>简易语言写后端</h3><p>使用接近自然语言的简易代码描述业务逻辑，小白也能读懂并写出后端。</p></div>
216+
<div class="feat glass"><div class="ico">📱</div><h3>多平台可开发</h3><p>支持网页、安卓与 Windows 平台，一次编写，多端运行。</p></div>
217+
<div class="feat glass"><div class="ico">🧭</div><h3>零基础易上手</h3><p>为新手量身设计，无需复杂环境配置，从第一行代码到第一个应用快速起步。</p></div>
218+
<div class="feat glass"><div class="ico">🚀</div><h3>解释型语言</h3><p>即时运行、即时反馈，让学习与调试真正变得轻松而顺畅。</p></div>
206219
</div>
207220
</div>
208221
</section>
@@ -215,11 +228,11 @@ <h2>产品特点</h2>
215228
<h2>HiCode 适合谁</h2>
216229
<p>无论你是编程新人，还是资深开发者，都能从 HiCode 中受益。</p>
217230
</div>
218-
<div class="people">
219-
<div class="person glass" data-reveal><div class="em">🎓</div><h3>编程小白 / 学生</h3><p>零基础也能靠图形界面 + 简易代码起步，把课堂所学落到真实项目。</p></div>
220-
<div class="person glass" data-reveal><div class="em">💼</div><h3>职场人 / 业务人员</h3><p>不懂技术也想提效？用 HiCode 快速搭建内部工具与原型，解决手头难题。</p></div>
221-
<div class="person glass" data-reveal><div class="em">👥</div><h3>小团队 / 独立开发者</h3><p>前端后端一人搞定，降低协作成本，更快验证想法、迭代产品。</p></div>
222-
<div class="person glass" data-reveal><div class="em">🧑‍💻</div><h3>资深开发者</h3><p>了解、参与一款新语言的建造成长，贡献开源，共建新一代开发方式。</p></div>
231+
<div class="people stagger-box">
232+
<div class="person glass"><div class="em">🎓</div><h3>编程小白 / 学生</h3><p>零基础也能靠图形界面 + 简易代码起步，把课堂所学落到真实项目。</p></div>
233+
<div class="person glass"><div class="em">💼</div><h3>职场人 / 业务人员</h3><p>不懂技术也想提效？用 HiCode 快速搭建内部工具与原型，解决手头难题。</p></div>
234+
<div class="person glass"><div class="em">👥</div><h3>小团队 / 独立开发者</h3><p>前端后端一人搞定，降低协作成本，更快验证想法、迭代产品。</p></div>
235+
<div class="person glass"><div class="em">🧑‍💻</div><h3>资深开发者</h3><p>了解、参与一款新语言的建造成长，贡献开源，共建新一代开发方式。</p></div>
223236
</div>
224237
<div class="quote" data-reveal>
225238
<p>“让创造应用的能力，不再只属于少数掌握复杂技术的人。”</p>
@@ -236,11 +249,11 @@ <h2>HiCode 适合谁</h2>
236249
<h2>技术预览（规划中）</h2>
237250
<p>以下是 HiCode 正在规划的核心技术方向，具体以最终发布为准。</p>
238251
</div>
239-
<div class="tech">
240-
<div class="tech-item glass" data-reveal><span class="tag">规划中</span><div class="ico">🖱️</div><h3>图形化前端设计器</h3><p>拖拽组件、点选配置生成前端界面与布局，所见即所得。</p></div>
241-
<div class="tech-item glass" data-reveal><span class="tag">规划中</span><div class="ico">⚙️</div><h3>解释型后端运行时</h3><p>面向业务逻辑的简易语法，即时解释执行，快速反馈与迭代。</p></div>
242-
<div class="tech-item glass" data-reveal><span class="tag">规划中</span><div class="ico">🔩</div><h3>统一前后端数据桥</h3><p>用同一套语言与数据模型连接界面与逻辑，数据交换更顺畅。</p></div>
243-
<div class="tech-item glass" data-reveal><span class="tag">规划中</span><div class="ico">🧱</div><h3>多端运行时</h3><p>面向网页、安卓（WebView）与 Windows 的运行与打包方案。</p></div>
252+
<div class="tech stagger-box">
253+
<div class="tech-item glass"><span class="tag">规划中</span><div class="ico">🖱️</div><h3>图形化前端设计器</h3><p>拖拽组件、点选配置生成前端界面与布局，所见即所得。</p></div>
254+
<div class="tech-item glass"><span class="tag">规划中</span><div class="ico">⚙️</div><h3>解释型后端运行时</h3><p>面向业务逻辑的简易语法，即时解释执行，快速反馈与迭代。</p></div>
255+
<div class="tech-item glass"><span class="tag">规划中</span><div class="ico">🔩</div><h3>统一前后端数据桥</h3><p>用同一套语言与数据模型连接界面与逻辑，数据交换更顺畅。</p></div>
256+
<div class="tech-item glass"><span class="tag">规划中</span><div class="ico">🧱</div><h3>多端运行时</h3><p>面向网页、安卓（WebView）与 Windows 的运行与打包方案。</p></div>
244257
</div>
245258
</div>
246259
</section>
@@ -270,12 +283,12 @@ <h2>开发路线图</h2>
270283
<h2>常见问题</h2>
271284
<p>关于 HiCode 你可能有这些疑问。</p>
272285
</div>
273-
<div class="faq-list">
274-
<details class="faq glass" data-reveal><summary>HiCode 现在可以下载使用吗？<span class="pl">+</span></summary><div class="a">HiCode 目前仍处于设计与规划阶段，下载渠道与网页端尚未开放。你可以在本页了解产品愿景与路线图，后续正式版本发布后我们会第一时间公布。</div></details>
275-
<details class="faq glass" data-reveal><summary>完全没有编程基础，真的能上手吗？<span class="pl">+</span></summary><div class="a">这正是 HiCode 的设计目标：用图形化界面创建前端、用接近自然的简易代码编写后端，尽量降低技术门槛，让小白也能迈出第一步。</div></details>
276-
<details class="faq glass" data-reveal><summary>HiCode 是免费使用的吗？是否开源？<span class="pl">+</span></summary><div class="a">是的，HiCode 以开源方式发布，遵循相应的开源许可协议。我们会坚持开放、可自由使用与二次开发的原则。</div></details>
277-
<details class="faq glass" data-reveal><summary>支持哪些开发平台？<span class="pl">+</span></summary><div class="a">我们规划支持网页、安卓（WebView）与 Windows 三大平台，一次编写、多端运行。具体支持程度以最终发布为准。</div></details>
278-
<details class="faq glass" data-reveal><summary>我可以如何参与 HiCode 的成长？<span class="pl">+</span></summary><div class="a">欢迎通过产品建议邮箱 hicodehc@outlook.com 提出想法与建议，后续开源后也可通过社区贡献代码、文档与案例。</div></details>
286+
<div class="faq-list stagger-box">
287+
<details class="faq glass"><summary>HiCode 现在可以下载使用吗？<span class="pl">+</span></summary><div class="a">HiCode 目前仍处于设计与规划阶段，下载渠道与网页端尚未开放。你可以在本页了解产品愿景与路线图，后续正式版本发布后我们会第一时间公布。</div></details>
288+
<details class="faq glass"><summary>完全没有编程基础，真的能上手吗？<span class="pl">+</span></summary><div class="a">这正是 HiCode 的设计目标：用图形化界面创建前端、用接近自然的简易代码编写后端，尽量降低技术门槛，让小白也能迈出第一步。</div></details>
289+
<details class="faq glass"><summary>HiCode 是免费使用的吗？是否开源？<span class="pl">+</span></summary><div class="a">是的，HiCode 以开源方式发布，遵循相应的开源许可协议。我们会坚持开放、可自由使用与二次开发的原则。</div></details>
290+
<details class="faq glass"><summary>支持哪些开发平台？<span class="pl">+</span></summary><div class="a">我们规划支持网页、安卓（WebView）与 Windows 三大平台，一次编写、多端运行。具体支持程度以最终发布为准。</div></details>
291+
<details class="faq glass"><summary>我可以如何参与 HiCode 的成长？<span class="pl">+</span></summary><div class="a">欢迎通过产品建议邮箱 hicodehc@outlook.com 提出想法与建议，后续开源后也可通过社区贡献代码、文档与案例。</div></details>
279292
</div>
280293
</div>
281294
</section>
@@ -331,6 +344,20 @@ <h4>联系我们</h4>
331344
});
332345
}, { threshold: 0.1 });
333346
document.querySelectorAll("[data-reveal]").forEach(el => io.observe(el));
347+
348+
/* 卡片组错峰渐显（液态玻璃质感进入） */
349+
document.querySelectorAll(".stagger-box").forEach(box => {
350+
const kids = Array.prototype.slice.call(box.children);
351+
const ob = new IntersectionObserver((entries, self) => {
352+
entries.forEach(en => {
353+
if (en.isIntersecting) {
354+
kids.forEach((k, i) => { k.style.transitionDelay = (i * 70) + "ms"; k.classList.add("is-visible"); });
355+
self.disconnect();
356+
}
357+
});
358+
}, { threshold: 0.12 });
359+
ob.observe(box);
360+
});
334361
</script>
335362
</body>
336363
</html>

0 commit comments

Comments
 (0)