leefer
40dd2fffff
- 首页: Three.js破碎月亮太空之旅(warp入场/碎片悬浮/代码泄漏/腐化标题) - 关于: 地面控制中心 - 产品: 碎片修复舱(加密悬念) - 联系: 通讯链路 - 纯静态: HTML+CSS+原生JS+Three.js本地化
260 lines
15 KiB
HTML
260 lines
15 KiB
HTML
<!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="地面控制中心档案 — 一群受够了糟糕软件的人，决定把碎掉的月亮修回去。">
|
||
<title>地面控制中心 | 晟算科技</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/space.css">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%2300e676'/%3E%3Ctext x='50' y='68' font-size='56' font-weight='bold' fill='%23020309' text-anchor='middle' font-family='sans-serif'%3E晟%3C/text%3E%3C/svg%3E">
|
||
</head>
|
||
<body data-space="orbit">
|
||
|
||
<div id="spaceCanvas"></div>
|
||
<div class="nebula nebula-1"></div>
|
||
<div class="nebula nebula-2"></div>
|
||
<div class="scanlines"></div>
|
||
|
||
<!-- ===== 导航栏 ===== -->
|
||
<header class="header">
|
||
<div class="header-inner">
|
||
<a href="index.html" class="logo">
|
||
<div class="logo-icon">晟</div>
|
||
<div class="logo-text">
|
||
晟算科技
|
||
<small>SHENGSUAN TECH</small>
|
||
</div>
|
||
</a>
|
||
<nav class="nav">
|
||
<a href="index.html" class="nav-link">首页</a>
|
||
<a href="about.html" class="nav-link">关于</a>
|
||
<a href="products.html" class="nav-link">产品</a>
|
||
<a href="contact.html" class="nav-link">聊聊</a>
|
||
<a href="contact.html" class="nav-cta">Say Hi</a>
|
||
</nav>
|
||
<div class="menu-toggle">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== 页面 Hero ===== -->
|
||
<section class="page-hero" style="min-height:auto">
|
||
<div class="geo-deco" style="position:absolute;top:100px;left:40px">FILE: ground_control.log</div>
|
||
<div class="geo-deco" style="position:absolute;top:100px;right:40px">ACCESS: PUBLIC</div>
|
||
<div class="page-hero-content">
|
||
<h1 class="fade-in-up">地面控制中心</h1>
|
||
<p class="fade-in-up delay-1">一群受够了糟糕软件的人，决定把碎掉的月亮修回去</p>
|
||
<div class="breadcrumb fade-in-up delay-2">
|
||
<a href="index.html">首页</a>
|
||
<span>/</span>
|
||
<span class="current">控制中心</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 起源 ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="chapter-marker reveal">
|
||
<span class="chapter-num">01</span>
|
||
<span class="chapter-line"></span>
|
||
<span class="chapter-tag">ORIGIN.log</span>
|
||
</div>
|
||
|
||
<div class="about-story">
|
||
<div class="about-story-text reveal">
|
||
<h2>一切始于第N次崩溃</h2>
|
||
<p>那天下午，一个团队想导出一份数据报表。这个简单的操作花了四十分钟——三次卡顿、两次"意外错误"、一次强制更新，以及一句灵魂拷问："确定要离开吗？您的更改将不会保存。"</p>
|
||
<p>他们看了看彼此。这群人写了十几年代码，给别人修过无数系统，却突然意识到：<strong style="color:var(--text-primary)">整个行业都在制造这种问题，而大家都在假装正常。</strong></p>
|
||
<p>软件本该是工具。但现在的软件，更像是需要被伺候的祖宗——你要学习它、迁就它、忍受它的脾气。月亮就是这么碎的：不是某一天突然崩的，是无数道小裂缝，没人修，越裂越大。</p>
|
||
<p>2026年，郑州。几个人凑在一起，成立了晟算科技。目标简单粗暴：<strong style="color:var(--code-green)">写出本来就懂人的软件，把月亮一块一块拼回去。</strong></p>
|
||
<div class="terminal-deco" style="margin-top:24px;background:rgba(2,3,10,0.6);border:1px solid var(--border-subtle);border-radius:8px;padding:16px 20px">
|
||
<div><span class="log-time">[init]</span> <span class="log-info">></span> ground_control.founded(location="郑州", year=2026)</div>
|
||
<div><span class="log-time">[init]</span> <span class="log-ok">></span> mission: "repair_the_moon" <span class="log-ok">[LOCKED]</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="about-story-visual reveal">
|
||
<div class="about-visual-block">
|
||
<div class="big-quote">
|
||
月亮碎了<br>不是月亮<br><span>的问题</span>
|
||
</div>
|
||
<div class="author">—— 是写代码的人出了问题。我们从人开始修。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 名字 ===== -->
|
||
<section class="section" style="padding-top:0">
|
||
<div class="container">
|
||
<div class="reveal" style="background:var(--bg-card);backdrop-filter:blur(18px);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:56px;text-align:center;position:relative;overflow:hidden">
|
||
<span class="section-label" style="margin-bottom:28px">呼号解码</span>
|
||
<h3 style="font-size:32px;font-weight:800;color:var(--text-primary);margin-bottom:24px;position:relative">晟算 = <span style="color:var(--sun-warm)">光明</span> × <span style="color:var(--code-green)">计算</span></h3>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:640px;margin:0 auto;position:relative;text-align:left">
|
||
<div style="padding:24px;background:rgba(255,243,214,0.04);border:1px solid rgba(255,243,214,0.1);border-radius:12px">
|
||
<div style="font-size:36px;font-weight:900;color:var(--sun-warm);margin-bottom:10px">晟</div>
|
||
<p style="font-size:14px;color:var(--text-muted);line-height:1.9">光明、旺盛。像远处那颗太阳——软件应该照亮工作，而不是制造阴影。每一次修复，都是把光打回裂缝里。</p>
|
||
</div>
|
||
<div style="padding:24px;background:rgba(77,255,166,0.04);border:1px solid rgba(77,255,166,0.1);border-radius:12px">
|
||
<div style="font-size:36px;font-weight:900;color:var(--code-green);margin-bottom:10px">算</div>
|
||
<p style="font-size:14px;color:var(--text-muted);line-height:1.9">计算、算法。月亮由代码组成，修复月亮也得靠代码。用计算的力量，把失控的世界拉回正轨。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 修复守则 ===== -->
|
||
<section class="section" style="padding-top:0">
|
||
<div class="container">
|
||
<div class="chapter-marker reveal">
|
||
<span class="chapter-num">02</span>
|
||
<span class="chapter-line"></span>
|
||
<span class="chapter-tag">THE_RULES</span>
|
||
</div>
|
||
|
||
<div class="section-header reveal" style="margin-bottom:56px">
|
||
<h2 class="section-title" data-scramble>修复守则</h2>
|
||
<p class="section-subtitle">写进任务手册的规矩，没有例外</p>
|
||
</div>
|
||
|
||
<div class="grid-2" style="gap:24px">
|
||
<div class="card reveal" style="padding:36px">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-ok">RULE_01</span> <span class="log-info">// 永远生效</span></div>
|
||
<h3 style="font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:12px">不为功能而功能</h3>
|
||
<p style="font-size:15px;color:var(--text-muted);line-height:1.9">每加一个功能，先回答："谁，在什么场景下，解决什么具体痛苦？"答不上来，就不写。竞对有？那不是理由。</p>
|
||
</div>
|
||
<div class="card reveal" style="padding:36px">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-ok">RULE_02</span> <span class="log-info">// 永远生效</span></div>
|
||
<h3 style="font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:12px">慢发布，快迭代</h3>
|
||
<p style="font-size:15px;color:var(--text-muted);line-height:1.9">没打磨好就不发布，这是底线。但只要用户在手，反馈就是命令——小步快跑，持续修复，每周都有变化。</p>
|
||
</div>
|
||
<div class="card reveal" style="padding:36px">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-ok">RULE_03</span> <span class="log-info">// 永远生效</span></div>
|
||
<h3 style="font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:12px">代码要过得了自己这关</h3>
|
||
<p style="font-size:15px;color:var(--text-muted);line-height:1.9">用户看不见代码，但烂代码会变成用户看得见的卡顿、崩溃和bug。写每一行都当作明天要自己来维护。</p>
|
||
</div>
|
||
<div class="card reveal" style="padding:36px">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-ok">RULE_04</span> <span class="log-info">// 永远生效</span></div>
|
||
<h3 style="font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:12px">说人话</h3>
|
||
<p style="font-size:15px;color:var(--text-muted);line-height:1.9">错误提示不说"Exception 0x80004005"，说"网络好像断了，检查一下？"。更新日志不写"优化了若干体验"，写清楚改了什么、为什么。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 修复小组 ===== -->
|
||
<section class="section" style="padding-top:0">
|
||
<div class="container">
|
||
<div class="chapter-marker reveal">
|
||
<span class="chapter-num">03</span>
|
||
<span class="chapter-line"></span>
|
||
<span class="chapter-tag">THE_SQUAD</span>
|
||
</div>
|
||
|
||
<div class="section-header reveal" style="margin-bottom:56px">
|
||
<h2 class="section-title" data-scramble>修复小组编制</h2>
|
||
<p class="section-subtitle">三个单元，一个目标。人不多，但每个人都顶用</p>
|
||
</div>
|
||
|
||
<div class="structure-block reveal">
|
||
<h3>
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--code-green)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||
地面编制架构
|
||
</h3>
|
||
<div class="structure-grid">
|
||
<div class="structure-item">
|
||
<div class="num">UNIT_A</div>
|
||
<h4>观测与定位</h4>
|
||
<p>潜入真实工作场景，找到那些让人崩溃的瞬间。定义"哪道裂缝最该先修"，而不是"哪个最好修"</p>
|
||
</div>
|
||
<div class="structure-item">
|
||
<div class="num">UNIT_B</div>
|
||
<h4>工程与焊接</h4>
|
||
<p>把修复方案写成可靠的代码。性能优先，架构干净。每一行都要经得起 review 和时间</p>
|
||
</div>
|
||
<div class="structure-item">
|
||
<div class="num">UNIT_C</div>
|
||
<h4>验证与回收</h4>
|
||
<p>把修复件放到真实用户手里接受检验。收集崩溃报告、倾听吐槽，然后回去继续焊</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="terminal-deco reveal" style="margin-top:40px;text-align:center;opacity:0.6">
|
||
<span class="log-info">></span> squad_size: <10 | <span class="log-info">></span> output_per_capita: MAX | <span class="log-ok">></span> hiring: maybe, if you're as obsessed as us
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CTA ===== -->
|
||
<section class="cta-section">
|
||
<div class="cta-content">
|
||
<h2 class="reveal">想跟地面控制中心通话？</h2>
|
||
<p class="reveal">不管你是想吐槽糟糕软件、想参与内测、还是单纯想聊聊，通讯频道一直开着</p>
|
||
<div class="reveal" style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap">
|
||
<a href="contact.html" class="btn btn-primary btn-lg">建立通讯链路</a>
|
||
<a href="products.html" class="btn btn-outline btn-lg">查看碎片修复舱</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 页脚 ===== -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<div class="logo">
|
||
<div class="logo-icon">晟</div>
|
||
<div class="logo-text">
|
||
晟算科技
|
||
<small style="color:var(--text-muted)">SHENGSUAN TECH</small>
|
||
</div>
|
||
</div>
|
||
<p>月亮碎了，我们在修。修复内容保密，修复进度公开。</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>导航</h4>
|
||
<ul>
|
||
<li><a href="index.html">首页</a></li>
|
||
<li><a href="about.html">关于我们</a></li>
|
||
<li><a href="products.html">产品矩阵</a></li>
|
||
<li><a href="contact.html">来聊聊</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>碎片清单</h4>
|
||
<ul>
|
||
<li><a href="products.html">FRAGMENT_α</a></li>
|
||
<li><a href="products.html">FRAGMENT_β</a></li>
|
||
<li><a href="products.html">FRAGMENT_γ</a></li>
|
||
<li><a href="products.html">???</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>信号源</h4>
|
||
<ul class="footer-contact">
|
||
<li><span class="contact-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span><span>河南省 · 郑州市 · 金水区</span></li>
|
||
<li><span class="contact-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></span><span>0371-8888-6666</span></li>
|
||
<li><span class="contact-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></span><span>hello@shengsuan.tech</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 郑州晟算科技有限公司</span>
|
||
<span>ground_control@shengsuan:~$ repairing_moon --progress 85%</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/lib/three.min.js"></script>
|
||
<script src="js/space.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|