Expand homepage: audience, tech preview, roadmap, FAQ

Author: HiCodeHC

index.html

@@ -126,6 +126,53 @@
   .trio-el .t-title { font-weight: 700; }
   .trio-el .t-desc { color: var(--muted); font-size: 13px; }
 
+  /* audience (适用人群) */
+  .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
+  .person { text-align: left; padding: 30px 26px; position: relative; overflow: hidden; }
+  .person .em { font-size: 30px; }
+  .person h3 { font-size: 19px; margin: 14px 0 8px; }
+  .person p { color: var(--muted); font-size: 14.5px; }
+
+  /* motto bar */
+  .quote { max-width: 820px; margin: 0 auto; text-align: center; padding: 44px 40px; }
+  .quote p { font-size: clamp(20px, 3vw, 27px); font-weight: 600; line-height: 1.6; color: var(--text); }
+  .quote .who { margin-top: 18px; color: var(--muted); font-size: 15px; }
+
+  /* tech preview (技术预览) */
+  .tech { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
+  .tech-item { padding: 30px 28px; text-align: left; position: relative; }
+  .tech-item .tag { position: absolute; top: 18px; right: 20px; font-size: 11.5px; letter-spacing: 1px; color: var(--dim);
+    border: 1px solid var(--glass-brd); border-radius: 999px; padding: 3px 10px; background: rgba(0,0,0,.15); }
+  .tech-item .ico { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-grad);
+    display: grid; place-items: center; font-size: 23px; margin-bottom: 18px; }
+  .tech-item h3 { font-size: 19px; margin-bottom: 8px; }
+  .tech-item p { color: var(--muted); font-size: 14.5px; }
+
+  /* roadmap (路线图) */
+  .roadmap { max-width: 720px; margin: 0 auto; }
+  .phase { display: flex; gap: 22px; padding: 6px 0 34px; position: relative; text-align: left; }
+  .phase:last-child { padding-bottom: 6px; }
+  .phase::before { content: ""; position: absolute; left: 27px; top: 62px; bottom: 0; width: 2px;
+    background: linear-gradient(180deg, rgba(217,174,107,.5), rgba(217,174,107,.08)); }
+  .phase:last-child::before { display: none; }
+  .phase .node { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 18px; background: var(--accent-grad);
+    display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #3a2a15;
+    box-shadow: 0 10px 26px rgba(160,110,60,.35); z-index: 1; }
+  .phase .meta { flex: 1; padding-top: 4px; }
+  .phase .step-tag { font-size: 12.5px; letter-spacing: 2px; color: var(--dim); text-transform: uppercase; }
+  .phase h3 { font-size: 20px; margin: 6px 0 6px; }
+  .phase p { color: var(--muted); font-size: 15px; }
+
+  /* FAQ */
+  .faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 16px; text-align: left; }
+  details.faq { padding: 0; }
+  details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
+    padding: 20px 26px; font-size: 16.5px; font-weight: 600; }
+  details.faq summary::-webkit-details-marker { display: none; }
+  details.faq summary .pl { font-size: 22px; color: var(--accent); transition: transform .3s; }
+  details.faq[open] summary .pl { transform: rotate(45deg); }
+  details.faq .a { padding: 0 26px 22px; color: var(--muted); font-size: 15px; }
+
   /* ---- footer (三级) ---- */
   footer { padding: 60px 0 40px; margin-top: 20px; }
   .foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; padding: 40px; }
@@ -169,10 +216,11 @@
     <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="#mission">项目初心</a>
-      <a href="#advantages">产品优点</a>
+      <a href="#people">适用人群</a>
+      <a href="#tech">技术预览</a>
+      <a href="#roadmap">路线图</a>
+      <a href="#faq">常见问题</a>
       <a href="#learn">学习中心</a>
-      <a href="#footer">联系我们</a>
     </nav>
     <a class="nav-cta" href="#download">立即下载</a>
   </div>
@@ -237,6 +285,79 @@ <h2>产品优点</h2>
       </div>
     </div>
   </section>
+
+  <!-- 适用人群 -->
+  <section id="people">
+    <div class="container">
+      <div class="sec-head" data-reveal>
+        <div class="eyebrow">Who It's For</div>
+        <h2>HiCode 适合谁</h2>
+        <p>无论你是编程新人，还是资深开发者，都能从 HiCode 中受益。</p>
+      </div>
+      <div class="people stagger" data-reveal>
+        <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 glass" 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" data-reveal>
+        <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" data-reveal>
+        <div class="eyebrow">Roadmap</div>
+        <h2>开发路线图</h2>
+        <p>HiCode 将分阶段逐步推进，欢迎关注与参与。</p>
+      </div>
+      <div class="roadmap" data-reveal>
+        <div class="phase"><div class="node">01</div><div class="meta"><div class="step-tag">Phase 1 · 定义</div><h3>语言与愿景</h3><p>确立产品理念、语言核心设计思路与图形化开发方向，搭建官网与社区。</p></div></div>
+        <div class="phase"><div class="node">02</div><div class="meta"><div class="step-tag">Phase 2 · 原型</div><h3>核心原型</h3><p>实现图形化前端设计器与后端解释器的早期可运行原型，打通基础开发流程。</p></div></div>
+        <div class="phase"><div class="node">03</div><div class="meta"><div class="step-tag">Phase 3 · 多端</div><h3>多端适配</h3><p>完善网页端，并逐步支持安卓（WebView）与 Windows 平台。</p></div></div>
+        <div class="phase"><div class="node">04</div><div class="meta"><div class="step-tag">Phase 4 · 开源</div><h3>对外开放与共建</h3><p>正式开放源代码、文档与学习中心，邀请社区共同参与迭代成长。</p></div></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 常见问题 -->
+  <section id="faq">
+    <div class="container">
+      <div class="sec-head" data-reveal>
+        <div class="eyebrow">FAQ</div>
+        <h2>常见问题</h2>
+        <p>关于 HiCode 你可能有这些疑问。</p>
+      </div>
+      <div class="faq-list" data-reveal>
+        <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">这正是 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>
 
 <!-- 三级：联系 / 免责 / 许可 -->