leefer
40dd2fffff
- 首页: Three.js破碎月亮太空之旅(warp入场/碎片悬浮/代码泄漏/腐化标题) - 关于: 地面控制中心 - 产品: 碎片修复舱(加密悬念) - 联系: 通讯链路 - 纯静态: HTML+CSS+原生JS+Three.js本地化
284 lines
16 KiB
HTML
284 lines
16 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>碎片修复舱 [CLASSIFIED] | 晟算科技</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">DIR: /recovery_bay/</div>
|
||
<div class="geo-deco" style="position:absolute;top:100px;right:40px">ACCESS: RESTRICTED</div>
|
||
<div class="page-hero-content">
|
||
<div class="reveal" style="margin-bottom:28px">
|
||
<span class="classified-stamp">CLASSIFIED</span>
|
||
</div>
|
||
<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">R.1</span>
|
||
<span class="chapter-line"></span>
|
||
<span class="chapter-tag">ENCRYPTED_FRAGMENTS</span>
|
||
</div>
|
||
|
||
<!-- FRAGMENT_α 主档案 -->
|
||
<div class="card reveal" style="padding:52px 44px;margin-bottom:32px">
|
||
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;margin-bottom:24px">
|
||
<div style="flex:1;min-width:280px">
|
||
<div class="terminal-deco" style="margin-bottom:16px">
|
||
<span class="log-info">FILE: fragment_alpha.pkg</span>
|
||
<span class="sys-status debug" style="margin-left:16px">DEBUGGING</span>
|
||
</div>
|
||
<h3 style="font-size:32px;font-weight:800;color:var(--text-primary);font-family:var(--font-mono);letter-spacing:2px">
|
||
<span data-scramble-loop data-length="16">████████████████</span>
|
||
</h3>
|
||
<p style="font-size:15px;color:var(--text-muted);line-height:2;margin-top:16px;max-width:560px">
|
||
最大的一块碎片，裂缝最深。问题已锁定，方案已成型，焊接已完成大半。剩下的，是让每一行代码都对得起"修复"这两个字。
|
||
</p>
|
||
</div>
|
||
<div class="geo-deco" style="text-align:right;line-height:2.2">
|
||
MASS: <span class="redacted">████</span><br>
|
||
ORBIT: <span class="redacted">████████</span><br>
|
||
RECOVERY: 85%<br>
|
||
SEALED_UNTIL: <span class="redacted">████</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="encrypted-block" style="margin-bottom:28px">
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="52">████████████████████████████████████████████████████</span></div>
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="44">████████████████████████████████████████████</span></div>
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="36">████████████████████████████████████</span></div>
|
||
</div>
|
||
|
||
<div class="build-progress" style="margin-bottom:0">
|
||
<div class="build-progress-header">
|
||
<span class="bp-label">RECOVERY_PROGRESS</span>
|
||
<span class="bp-value">85%</span>
|
||
</div>
|
||
<div class="build-progress-track">
|
||
<div class="build-progress-fill" data-progress="85"></div>
|
||
</div>
|
||
<div class="build-progress-log">> surface_welding ✓ | > core_calibration ✓ | > final stress tests... | > decryption scheduled</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid-2">
|
||
<!-- FRAGMENT_β -->
|
||
<div class="card reveal" style="padding:44px">
|
||
<div class="terminal-deco" style="margin-bottom:16px">
|
||
<span class="log-info">FILE: fragment_beta.pkg</span>
|
||
<span class="sys-status compile" style="margin-left:16px">COMPILING</span>
|
||
</div>
|
||
<h3 style="font-size:26px;font-weight:800;color:var(--text-primary);font-family:var(--font-mono);letter-spacing:2px;margin-bottom:20px">
|
||
<span data-scramble-loop data-length="14">██████████████</span>
|
||
</h3>
|
||
<div class="encrypted-block" style="margin-bottom:24px">
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="40">████████████████████████████████████████</span></div>
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="32">████████████████████████████████</span></div>
|
||
</div>
|
||
<div class="build-progress" style="margin:0">
|
||
<div class="build-progress-header">
|
||
<span class="bp-label">RECOVERY_PROGRESS</span>
|
||
<span class="bp-value">32%</span>
|
||
</div>
|
||
<div class="build-progress-track">
|
||
<div class="build-progress-fill" data-progress="32" style="background:linear-gradient(90deg,#7c5cd6,#a78bff);box-shadow:0 0 15px rgba(167,139,255,0.4)"></div>
|
||
</div>
|
||
<div class="build-progress-log">> assembling modules... | > training <span class="redacted">████</span>...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- FRAGMENT_γ -->
|
||
<div class="card reveal" style="padding:44px">
|
||
<div class="terminal-deco" style="margin-bottom:16px">
|
||
<span class="log-info">FILE: fragment_gamma.pkg</span>
|
||
<span class="sys-status queue" style="margin-left:16px">QUEUED</span>
|
||
</div>
|
||
<h3 style="font-size:26px;font-weight:800;color:var(--text-primary);font-family:var(--font-mono);letter-spacing:2px;margin-bottom:20px">
|
||
<span data-scramble-loop data-length="14">██████████████</span>
|
||
</h3>
|
||
<div class="encrypted-block" style="margin-bottom:24px">
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="40">████████████████████████████████████████</span></div>
|
||
<div class="encrypted-line"><span data-scramble-loop data-length="32">████████████████████████████████</span></div>
|
||
</div>
|
||
<div class="build-progress" style="margin:0">
|
||
<div class="build-progress-header">
|
||
<span class="bp-label">QUEUE_POSITION</span>
|
||
<span class="bp-value">#3</span>
|
||
</div>
|
||
<div class="build-progress-track">
|
||
<div class="build-progress-fill" data-progress="8" style="background:linear-gradient(90deg,#3a9bc9,#7dd8ff);box-shadow:0 0 15px rgba(125,216,255,0.3)"></div>
|
||
</div>
|
||
<div class="build-progress-log">> crack_analysis ✓ | > solution sketching...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 舱内清单 -->
|
||
<div class="reveal" style="margin-top:48px;background:rgba(2,3,10,0.6);border:1px solid var(--border-subtle);border-radius:12px;padding:28px 32px">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-ok">ground_control:~$</span> ls -la /recovery_bay/ --sort=priority</div>
|
||
<div class="file-list">
|
||
<div class="file-item"><span class="file-icon">▸</span><span class="file-name">fragment_alpha.pkg</span><span class="file-locked">[LOCKED]</span><span class="file-size">85% recovered</span></div>
|
||
<div class="file-item"><span class="file-icon">▸</span><span class="file-name">fragment_beta.pkg</span><span class="file-locked">[LOCKED]</span><span class="file-size">32% recovered</span></div>
|
||
<div class="file-item"><span class="file-icon">▸</span><span class="file-name">fragment_gamma.pkg</span><span class="file-locked">[LOCKED]</span><span class="file-size">queued</span></div>
|
||
<div class="file-item"><span class="file-icon">▸</span><span class="file-name">fragment_<span data-scramble-loop data-length="1">█</span>.pkg</span><span class="file-locked">[?????]</span><span class="file-size">--</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 修复流水线 ===== -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="chapter-marker reveal">
|
||
<span class="chapter-num">R.2</span>
|
||
<span class="chapter-line"></span>
|
||
<span class="chapter-tag">REPAIR_PIPELINE</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-4">
|
||
<div class="feature-card reveal">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-info">STEP_01</span></div>
|
||
<h3 style="font-size:18px">捕获裂缝现场</h3>
|
||
<p>蹲在真实用户旁边看他们工作，记录每一次皱眉、叹气、和砸键盘的冲动</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-info">STEP_02</span></div>
|
||
<h3 style="font-size:18px">定位裂缝根源</h3>
|
||
<p>不停留在"不好用"，追问五层为什么。表面是交互，根源可能是架构错了</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-info">STEP_03</span></div>
|
||
<h3 style="font-size:18px">最小化焊接</h3>
|
||
<p>能用一个功能解决的，绝不用三个。原型先行，一周内做出可交互的东西验证</p>
|
||
</div>
|
||
<div class="feature-card reveal">
|
||
<div class="terminal-deco" style="margin-bottom:16px"><span class="log-info">STEP_04</span></div>
|
||
<h3 style="font-size:18px">真实环境压测</h3>
|
||
<p>交给最挑剔的内测用户折腾。他们骂得越狠，月亮拼回去那天笑得越稳</p>
|
||
</div>
|
||
</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="about.html" class="btn btn-outline btn-lg">认识修复小组</a>
|
||
</div>
|
||
<div class="terminal-deco reveal" style="margin-top:40px;opacity:0.5">
|
||
<span class="log-ok">></span> observer_slots: LIMITED | <span class="log-info">></span> requirement: willing_to_complain
|
||
</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>
|