leefer
40dd2fffff
- 首页: Three.js破碎月亮太空之旅(warp入场/碎片悬浮/代码泄漏/腐化标题) - 关于: 地面控制中心 - 产品: 碎片修复舱(加密悬念) - 联系: 通讯链路 - 纯静态: HTML+CSS+原生JS+Three.js本地化
253 lines
13 KiB
HTML
253 lines
13 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">CHANNEL: OPEN</div>
|
||
<div class="geo-deco" style="position:absolute;top:100px;right:40px">LATENCY: <24h</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="contact-layout">
|
||
<!-- 左侧: 地面站信息 -->
|
||
<div class="contact-card-dark reveal">
|
||
<h3>地面站</h3>
|
||
<p>频道常开，回复通常不超过24小时。</p>
|
||
|
||
<div class="contact-info-row">
|
||
<div class="contact-info-icon">
|
||
<svg width="20" height="20" 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>
|
||
</div>
|
||
<div class="contact-info-text">
|
||
<div class="ci-label">GROUND_STATION</div>
|
||
<div class="ci-value">河南省 · 郑州市 · 金水区</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-info-row">
|
||
<div class="contact-info-icon">
|
||
<svg width="20" height="20" 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>
|
||
</div>
|
||
<div class="contact-info-text">
|
||
<div class="ci-label">VOICE_CHANNEL</div>
|
||
<div class="ci-value">0371-8888-6666</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-info-row">
|
||
<div class="contact-info-icon">
|
||
<svg width="20" height="20" 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>
|
||
</div>
|
||
<div class="contact-info-text">
|
||
<div class="ci-label">MAIL_PROTOCOL</div>
|
||
<div class="ci-value">hello@shengsuan.tech</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-info-row">
|
||
<div class="contact-info-icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
</div>
|
||
<div class="contact-info-text">
|
||
<div class="ci-label">ONLINE_WINDOW</div>
|
||
<div class="ci-value">工作日 9:00 - 18:00<br>深夜也在观测，但不一定回</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="terminal-deco" style="margin-top:32px;padding-top:24px;border-top:1px solid var(--border-subtle)">
|
||
<div><span class="log-ok">></span> encryption: TLS 1.3</div>
|
||
<div><span class="log-ok">></span> spam_filter: MAXIMUM</div>
|
||
<div><span class="log-info">></span> response_sla: < 24 hours</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧: 传输表单 -->
|
||
<div class="contact-form-dark reveal">
|
||
<h3>发送深空信号</h3>
|
||
<p>不用太正式，就当在通讯终端里敲几行字。</p>
|
||
|
||
<div class="form-success">
|
||
✓ 信号已抵达地面站！通常24小时内会有回音。
|
||
</div>
|
||
|
||
<form id="contactForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label" for="name">呼号 / 姓名 <span class="required">*</span></label>
|
||
<input type="text" id="name" name="name" class="form-input" placeholder="怎么称呼你？" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="phone">回传频道 <span class="required">*</span></label>
|
||
<input type="tel" id="phone" name="phone" class="form-input" placeholder="手机号或微信" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label" for="email">备用频道</label>
|
||
<input type="email" id="email" name="email" class="form-input" placeholder="邮箱（选填）">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="interest">信号类型</label>
|
||
<select id="interest" name="interest" class="form-select">
|
||
<option value="">选择你的来意</option>
|
||
<option value="beta">申请观测权限（内测）</option>
|
||
<option value="chaos">报告裂缝现场（吐槽软件）</option>
|
||
<option value="collab">谈合作</option>
|
||
<option value="join">想加入修复小组</option>
|
||
<option value="chat">纯粹聊聊</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="message">信号内容 <span class="required">*</span></label>
|
||
<textarea id="message" name="message" class="form-textarea" placeholder="说说你想说的。吐槽糟糕软件尤其欢迎，我们会认真记进裂缝档案..." required></textarea>
|
||
</div>
|
||
<button type="submit" class="form-submit">传输信号 →</button>
|
||
</form>
|
||
|
||
<div class="terminal-deco" style="margin-top:24px;text-align:center;opacity:0.5">
|
||
<span class="log-info">></span> your_message will be read by real humans, not bots
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 地面站坐标 ===== -->
|
||
<section class="section map-section">
|
||
<div class="container">
|
||
<div class="chapter-marker reveal">
|
||
<span class="chapter-num">LOC</span>
|
||
<span class="chapter-line"></span>
|
||
<span class="chapter-tag">STATION_COORDINATES</span>
|
||
</div>
|
||
|
||
<div class="map-wrapper reveal" style="height:360px">
|
||
<div style="width:100%;height:100%;background:rgba(2,3,10,0.7);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden">
|
||
<div style="position:absolute;inset:0;background-image:linear-gradient(rgba(160,180,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(160,180,255,0.04) 1px,transparent 1px);background-size:50px 50px"></div>
|
||
<!-- 雷达圈 -->
|
||
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;border:1px solid rgba(77,255,166,0.15);border-radius:50%;animation:dotPulse 3s ease-in-out infinite"></div>
|
||
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:130px;height:130px;border:1px dashed rgba(77,255,166,0.25);border-radius:50%"></div>
|
||
<div style="position:absolute;top:50%;left:50%;width:130px;height:1px;background:linear-gradient(90deg,rgba(77,255,166,0.5),transparent);transform-origin:left center;animation:radarSweep 3s linear infinite"></div>
|
||
<div style="position:relative;z-index:2;text-align:center">
|
||
<div style="margin-bottom:16px;display:flex;justify-content:center">
|
||
<svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="var(--code-green)" stroke-width="1.5" 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>
|
||
</div>
|
||
<h3 style="font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:8px">晟算地面站</h3>
|
||
<p style="font-size:15px;color:var(--text-muted)">河南省 · 郑州市 · 金水区</p>
|
||
<div class="geo-deco" style="margin-top:10px;opacity:0.8">N 34°44.52 · E 113°37.48</div>
|
||
<p style="font-size:13px;color:var(--text-muted);opacity:0.5;margin-top:12px">到访前请先建立通讯预约</p>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<style>
|
||
@keyframes radarSweep { to { transform: rotate(360deg); } }
|
||
</style>
|
||
<script src="js/lib/three.min.js"></script>
|
||
<script src="js/space.js"></script>
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|