leefer/shengsuantech-home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a7a425375b23ca6eda1fb1e005ffc46e47defe9e
shengsuantech-home/index.html
T
leefer d5d4623aa9 feat: 电影级真实感重构 — 真实月面/银河/泛光/撕裂破碎 
按用户参考图(破碎月亮)对齐的整套真实感升级:
- 月球: SSS/NASA 2K真实纹理+运行时亮度转凹凸, 顶点撕裂伤口(不规则锯齿轮廓)+发光裂缝(emissive放射纹+断面代码)+伤口辉光脉动
- 破碎: 2块大碎片(顶点扰动)+220块Instanced碎石量级谱(伤口切线拖带,各自漂移翻滚)+5团青灰尘埃云(烟尘流动)
- 太空: 真实星野天球(SSS银河2K)替换程序点星, 保留近景尘埃视差层
- 太阳: 亮度>1的小烈核心(推过泛光阈值)+克制光晕+变形宽银幕横向光纹
- 渲染: ACES电影色调映射+UnrealBloomPass泛光(three.module+8个后处理文件本地化,importmap加载)
- 移动端降级: 关泛光+减粒子
- 页脚: NASA/SSS纹理CC-BY署名
2026-08-02 13:11:16 +08:00

428 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>晟算科技 | MOON.SYS 已崩溃</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="journey">
<!-- BOOT 加载屏 -->
<div id="spaceBoot">
<div class="boot-scope">
<div class="boot-cross"></div>
<div class="boot-cross v"></div>
</div>
<div class="boot-terminal" id="spaceBootBody"></div>
<div class="boot-progress"><div id="spaceBootBar"></div></div>
<div class="boot-tag">SHENGSUAN // DEEP_SPACE_OBSERVATORY</div>
</div>
<!-- 3D太空画布 -->
<div id="spaceCanvas"></div>
<!-- 星云 -->
<div class="nebula nebula-1"></div>
<div class="nebula nebula-2"></div>
<!-- CRT 扫描线 -->
<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="space-hero">
<div class="space-hero-content">
<div class="fatal-badge">
<span class="fatal-dot"></span>
FATAL_ERROR // MOON.SYS
</div>
<div class="corrupt-wrap">
<h1 class="corrupt-title" data-text="世界已崩溃">世界已崩溃</h1>
</div>
<div class="error-code-line">
<div><span class="ec-key">> error_code:</span> <span class="ec-err">0xM00N_CRACKED</span></div>
<div><span class="ec-key">> detail:</span> 月亮碎裂为3块，代码正从裂缝泄漏</div>
<div><span class="ec-key">> assigned_to:</span> <span class="ec-val">晟算科技 · 修复小组</span></div>
<div><span class="ec-key">> status:</span> <span class="ec-val">PATCHING… 修复进行中</span></div>
</div>
<div class="hero-actions" style="margin-top:44px;justify-content:flex-start">
<a href="#diagnosis" class="btn btn-primary btn-lg">查看崩溃报告</a>
<a href="about.html" class="btn btn-outline btn-lg">谁在修复</a>
</div>
</div>
<div class="scroll-hint">
<span>SCROLL // 接近月球</span>
<div class="scroll-hint-line"></div>
</div>
</section>
<!-- ===== 滚动场景 A: 发现 (接近月亮) ===== -->
<section class="scroll-scene" style="height:340vh">
<div class="scene-sticky">
<div class="bg-giant-text">CRACKED</div>
<div class="scene-frame">
<div class="frame-corner-b"></div>
<div class="frame-corner-c"></div>
</div>
<div class="scene-corner tl">
LOG_01
<span style="display:block;opacity:0.5;margin-top:4px">DISCOVERY</span>
</div>
<div class="scene-corner br">
DISTANCE
<span class="big-pct" data-scene-pct>00%</span>
</div>
<div class="scene-line">
<div class="line-big">这个世界，由代码组成</div>
<div class="line-sub">// this_world_runs_on_code</div>
</div>
<div class="scene-line">
<div class="line-big">而月亮——<span class="danger">碎了</span></div>
<div class="line-sub">// moon.exe_has_stopped_responding</div>
</div>
<div class="scene-line">
<div class="line-big">代码正从裂缝里<span class="accent">漏出来</span></div>
<div class="line-sub">// memory_leak · 持续扩散中</div>
</div>
<div class="scene-line">
<div class="line-big">就像你每天在用的软件<br><span class="danger">一样</span></div>
<div class="line-sub">// sound_familiar?</div>
</div>
</div>
</section>
<!-- ===== 崩溃诊断报告 ===== -->
<section class="section" id="diagnosis">
<div class="container">
<div class="chapter-marker reveal">
<span class="chapter-num">01</span>
<span class="chapter-line"></span>
<span class="chapter-tag">CRASH_REPORT</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="chaos-card reveal">
<div class="chaos-num"><span data-chaos-count="76">0</span><span class="chaos-unit">%</span></div>
<h3>功能从未被使用</h3>
<p>软件越来越臃肿，但你真正需要的功能，淹没在几百个永远不会点的按钮里</p>
</div>
<div class="chaos-card reveal">
<div class="chaos-num"><span data-chaos-count="2.5" data-decimals="1">0</span><span class="chaos-unit">h</span></div>
<h3>每天浪费在界面上</h3>
<p>寻找按钮、等待加载、确认弹窗——本该5分钟完成的事，硬生生拖成半小时</p>
</div>
<div class="chaos-card reveal">
<div class="chaos-num"><span data-chaos-count="17">0</span><span class="chaos-unit">次</span></div>
<h3>完成简单任务的点击数</h3>
<p>导出一份报表：文件→导出→选格式→确认→再确认→选路径→完成→关闭提示……</p>
</div>
<div class="chaos-card reveal">
<div class="chaos-num"><span data-chaos-count="99">0</span><span class="chaos-unit">+</span></div>
<h3>永远读不完的更新日志</h3>
<p>"我们优化了一些体验"——翻译：你自己猜我们改了什么，顺便重新学一遍</p>
</div>
</div>
<div class="terminal-deco reveal" style="margin-top:48px;text-align:center;opacity:0.6">
<span class="log-error">diagnosis:</span> 病因相同——没人把用户当回事
</div>
</div>
</section>
<!-- ===== 滚动场景 B: 修复宣言 ===== -->
<section class="scroll-scene" style="height:300vh">
<div class="scene-sticky">
<div class="bg-giant-text">REPAIR</div>
<div class="scene-frame">
<div class="frame-corner-b"></div>
<div class="frame-corner-c"></div>
</div>
<div class="scene-corner tl">
LOG_02
<span style="display:block;opacity:0.5;margin-top:4px">PROTOCOL</span>
</div>
<div class="scene-corner br">
PROGRESS
<span class="big-pct" data-scene-pct>00%</span>
</div>
<div class="scene-line">
<div class="line-big">总得有人，<span class="accent">把月亮修回去</span></div>
<div class="line-sub">// someone_has_to_fix_the_moon</div>
</div>
<div class="scene-line">
<div class="line-big">我们不写让人<span style="color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:4px">学着用</span>的软件</div>
<div class="line-sub">// no_manuals_required</div>
</div>
<div class="scene-line">
<div class="line-big">我们写<span class="accent">本来就懂人</span>的软件</div>
<div class="line-sub">// software_that_understands_humans</div>
</div>
</div>
</section>
<!-- ===== 修复守则 ===== -->
<section class="section" style="position:relative">
<div class="container">
<div class="chapter-marker reveal">
<span class="chapter-num">02</span>
<span class="chapter-line"></span>
<span class="chapter-tag">REPAIR_PROTOCOL</span>
</div>
<div class="grid-3">
<div class="belief-card reveal">
<div class="belief-number" style="color:var(--code-green)">RULE_01</div>
<h3>砍掉，而不是堆叠</h3>
<p>每个功能存在的唯一理由：有人真的需要它。没有"万一用到"，没有"竞对也有"。砍掉90%的噪音，把10%打磨到上瘾。</p>
</div>
<div class="belief-card reveal">
<div class="belief-number" style="color:var(--cyan)">RULE_02</div>
<h3>快，是一种尊重</h3>
<p>加载每多一秒，就是对用户时间的一次盗窃。我们把性能当成核心功能来写，而不是上线前的补救项。</p>
</div>
<div class="belief-card reveal">
<div class="belief-number" style="color:var(--purple)">RULE_03</div>
<h3>界面应该消失</h3>
<p>最好的界面是你感觉不到它存在的界面。用户要的是完成任务，不是欣赏你的设计系统有多庞大。</p>
</div>
</div>
</div>
</section>
<!-- ===== 碎片修复进度 ===== -->
<section class="section" style="position:relative">
<div class="container">
<div class="chapter-marker reveal">
<span class="chapter-num">03</span>
<span class="chapter-line"></span>
<span class="chapter-tag">FRAGMENT_RECOVERY</span>
</div>
<div class="section-header reveal" style="margin-bottom:40px">
<h2 class="section-title" data-scramble>碎片修复进度</h2>
<p class="section-subtitle">每块碎片里封装着什么？解密时间——当它足够好的时候</p>
</div>
<div class="reveal" style="text-align:center;margin-bottom:48px">
<span class="classified-stamp">CLASSIFIED</span>
</div>
<div class="grid-3">
<div class="card frag-card reveal" style="padding:36px">
<div class="terminal-deco" style="margin-bottom:20px">
<span class="log-info">FRAGMENT_α</span>
<span class="sys-status debug" style="margin-left:12px">DEBUGGING</span>
</div>
<h3 style="font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:18px;font-family:var(--font-mono)">
<span data-scramble-loop data-length="12">████████████</span>
</h3>
<div class="encrypted-block" style="margin-bottom:24px">
<div class="encrypted-line"><span data-scramble-loop data-length="38">██████████████████████████████████████</span></div>
<div class="encrypted-line"><span data-scramble-loop data-length="30">██████████████████████████████</span></div>
</div>
<div class="build-progress" style="margin:0">
<div class="build-progress-header">
<span class="bp-label">RECOVERY</span>
<span class="bp-value">85%</span>
</div>
<div class="build-progress-track">
<div class="build-progress-fill" data-progress="85"></div>
</div>
</div>
<div class="terminal-deco" style="margin-top:16px;opacity:0.6;font-size:11px">
<span class="log-warn">></span> payload: <span class="redacted">██████</span>
</div>
</div>
<div class="card frag-card reveal" style="padding:36px">
<div class="terminal-deco" style="margin-bottom:20px">
<span class="log-info">FRAGMENT_β</span>
<span class="sys-status compile" style="margin-left:12px">COMPILING</span>
</div>
<h3 style="font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:18px;font-family:var(--font-mono)">
<span data-scramble-loop data-length="12">████████████</span>
</h3>
<div class="encrypted-block" style="margin-bottom:24px">
<div class="encrypted-line"><span data-scramble-loop data-length="38">██████████████████████████████████████</span></div>
<div class="encrypted-line"><span data-scramble-loop data-length="30">██████████████████████████████</span></div>
</div>
<div class="build-progress" style="margin:0">
<div class="build-progress-header">
<span class="bp-label">RECOVERY</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>
<div class="terminal-deco" style="margin-top:16px;opacity:0.6;font-size:11px">
<span class="log-warn">></span> payload: <span class="redacted">██████</span>
</div>
</div>
<div class="card frag-card reveal" style="padding:36px">
<div class="terminal-deco" style="margin-bottom:20px">
<span class="log-info">FRAGMENT_γ</span>
<span class="sys-status queue" style="margin-left:12px">QUEUED</span>
</div>
<h3 style="font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:18px;font-family:var(--font-mono)">
<span data-scramble-loop data-length="12">████████████</span>
</h3>
<div class="encrypted-block" style="margin-bottom:24px">
<div class="encrypted-line"><span data-scramble-loop data-length="38">██████████████████████████████████████</span></div>
<div class="encrypted-line"><span data-scramble-loop data-length="30">██████████████████████████████</span></div>
</div>
<div class="build-progress" style="margin:0">
<div class="build-progress-header">
<span class="bp-label">QUEUE</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>
<div class="terminal-deco" style="margin-top:16px;opacity:0.6;font-size:11px">
<span class="log-warn">></span> payload: <span class="redacted">██████</span>
</div>
</div>
</div>
<div class="terminal-deco reveal" style="margin-top:48px;text-align:center;opacity:0.6">
<span class="log-info">></span> 抬头看——碎片正在归位 &nbsp;|&nbsp; <span class="log-warn">></span> 修复上限: 85%（剩下的，等见面那天）
</div>
</div>
</section>
<!-- ===== CTA: 月亮重圆那天 ===== -->
<section class="cta-section">
<div class="cta-content">
<div class="chapter-marker reveal" style="justify-content:center;margin-bottom:32px">
<span class="chapter-num" style="font-size:56px">04</span>
<span class="chapter-tag">GROUND_CONTROL</span>
</div>
<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> uplink_established ... awaiting your signal
</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>&copy; 2026 郑州晟算科技有限公司</span>
<span style="opacity:0.45;font-size:11px">Moon &amp; Stars Imagery: NASA · Solar System Scope (CC BY 4.0)</span>
<span>ground_control@shengsuan:~$ repairing_moon --progress 85%</span>
</div>
</div>
</footer>
<script type="importmap">
{"imports":{"three":"./js/lib/three.module.js","three/addons/":"./js/lib/addons/"}}
</script>
<script>window.SPACE_MODE=document.body.getAttribute("data-space")||"journey";</script>
<script type="module" src="js/space.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink