174 lines
7.6 KiB
HTML
174 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Spectra Lab</title>
|
|
<meta
|
|
name="description"
|
|
content="Spectra Lab — 一个以光谱、玻璃与动效为核心的沉浸式前端概念 Web App。"
|
|
/>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;800&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<canvas class="particle-canvas" id="particleCanvas"></canvas>
|
|
<div class="noise"></div>
|
|
<div class="gradient-orb orb-a"></div>
|
|
<div class="gradient-orb orb-b"></div>
|
|
<div class="gradient-orb orb-c"></div>
|
|
<div class="pointer-glow" id="pointerGlow"></div>
|
|
|
|
<header class="topbar glass-panel">
|
|
<div class="brand">
|
|
<span class="brand-mark"></span>
|
|
<div>
|
|
<p class="brand-eyebrow">Spectra Lab</p>
|
|
<p class="brand-sub">Digital Atmosphere Prototype</p>
|
|
</div>
|
|
</div>
|
|
<nav class="nav-links">
|
|
<a href="#metrics">Metrics</a>
|
|
<a href="#gallery">Gallery</a>
|
|
<a href="#manifesto">Manifesto</a>
|
|
</nav>
|
|
<button id="themeToggle" class="ghost-button" type="button">切换光谱</button>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero section">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow">A cinematic front-end experience</p>
|
|
<h1>
|
|
不只是一个页面，<br />
|
|
而是一座会呼吸的<br />
|
|
光谱展馆。
|
|
</h1>
|
|
<p class="hero-text">
|
|
Spectra Lab 把动态网格、玻璃拟态、彩色流体光效与编辑感排版叠在一起，做成一个可以真实浏览、真实交互、真实惊艳的 Web App 原型。
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a class="primary-button" href="#gallery">进入展馆</a>
|
|
<a class="secondary-button" href="#manifesto">查看设计宣言</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-stage glass-panel">
|
|
<div class="stage-ring"></div>
|
|
<div class="stage-grid"></div>
|
|
<div class="stage-core">
|
|
<p>Signal Cluster</p>
|
|
<h2>07</h2>
|
|
<span>active scenes</span>
|
|
</div>
|
|
<div class="floating-card card-alpha">
|
|
<p>Ambient Index</p>
|
|
<strong data-counter="94">0</strong>
|
|
<span>cinematic density</span>
|
|
</div>
|
|
<div class="floating-card card-beta">
|
|
<p>Pulse Drift</p>
|
|
<strong data-counter="128">0</strong>
|
|
<span>motion vectors</span>
|
|
</div>
|
|
<div class="floating-card card-gamma">
|
|
<p>Interface Bloom</p>
|
|
<strong data-counter="63">0</strong>
|
|
<span>responsive nodes</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="metrics" class="section metrics">
|
|
<div class="section-heading">
|
|
<p class="eyebrow">Live aesthetic telemetry</p>
|
|
<h2>把“设计感”拆成可感知的前端语言</h2>
|
|
</div>
|
|
<div class="metric-grid">
|
|
<article class="metric-card glass-panel">
|
|
<span>Layer Depth</span>
|
|
<strong>9.4</strong>
|
|
<p>通过前景、中景、背景与微粒噪声叠出空间感。</p>
|
|
</article>
|
|
<article class="metric-card glass-panel">
|
|
<span>Motion Quality</span>
|
|
<strong>92%</strong>
|
|
<p>减少廉价跳变，用缓动、漂移与轻量视差维持高级感。</p>
|
|
</article>
|
|
<article class="metric-card glass-panel">
|
|
<span>Visual Contrast</span>
|
|
<strong>4 Layers</strong>
|
|
<p>用霓光、暗底、玻璃边缘和字体重量做视觉层次。</p>
|
|
</article>
|
|
<article class="metric-card glass-panel accent-card">
|
|
<span>Current Mode</span>
|
|
<strong id="themeLabel">Aurora</strong>
|
|
<p>支持切换不同光谱主题，让同一界面拥有不同情绪。</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gallery" class="section gallery">
|
|
<div class="section-heading split">
|
|
<div>
|
|
<p class="eyebrow">Curated scenes</p>
|
|
<h2>每一张卡片，都像展馆里的一个独立空间</h2>
|
|
</div>
|
|
<p class="section-note">Hover 卡片，看看透视、边缘发光和背景响应；点击则切换下方讲解。</p>
|
|
</div>
|
|
|
|
<div class="gallery-grid">
|
|
<article class="scene-card scene-large glass-panel" data-scene-title="Prism Core" data-scene-copy="主舞台由动态网格、发光环和浮动数据组成，强调空间感与叙事中心，是整个页面的视觉引力源。">
|
|
<div class="scene-tag">01 / Prism Core</div>
|
|
<h3>会漂移的主场景</h3>
|
|
<p>主舞台不是静态图，而是由网格、发光环、渐变和数据浮层组成的动态构图。</p>
|
|
</article>
|
|
<article class="scene-card glass-panel" data-scene-title="Quiet Signal" data-scene-copy="把亮点压缩到必要区域，保留大面积暗部和留白，让霓光真正成为视线焦点，而不是噪音。">
|
|
<div class="scene-tag">02 / Quiet Signal</div>
|
|
<h3>深色中的克制亮点</h3>
|
|
<p>控制高亮面积，让视觉中心更明确，而不是整屏乱闪。</p>
|
|
</article>
|
|
<article class="scene-card glass-panel" data-scene-title="Editorial Flow" data-scene-copy="通过标题、说明、标签与节奏化留白，让单页也具备杂志封面和展览海报的张力。">
|
|
<div class="scene-tag">03 / Editorial Flow</div>
|
|
<h3>海报式排版</h3>
|
|
<p>标题、留白、短段文案与组件比例共同决定气质。</p>
|
|
</article>
|
|
<article class="scene-card glass-panel" data-scene-title="Tactile Hover" data-scene-copy="hover 不只是位移，而是材质、光线和透视的共同反馈，让界面更像可触摸物体。">
|
|
<div class="scene-tag">04 / Tactile Hover</div>
|
|
<h3>像摸到玻璃一样</h3>
|
|
<p>卡片 hover 有轻透视、边缘反光、阴影偏移和背景亮度反馈。</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="scene-detail glass-panel" id="sceneDetail">
|
|
<p class="eyebrow">Scene focus</p>
|
|
<h3 id="sceneDetailTitle">Prism Core</h3>
|
|
<p id="sceneDetailCopy">
|
|
主舞台由动态网格、发光环和浮动数据组成，强调空间感与叙事中心，是整个页面的视觉引力源。
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="manifesto" class="section manifesto glass-panel">
|
|
<p class="eyebrow">Manifesto</p>
|
|
<h2>真正惊艳的前端，不是堆特效，而是让特效服务于气质。</h2>
|
|
<p>
|
|
这个原型故意把功能压到第二位，把所有预算投给视觉叙事：版式像海报，交互像展陈，背景像呼吸，按钮像可触摸的材质。主人要的不是“能用就行”的站，而是第一眼就记得住的作品。
|
|
</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<span>Spectra Lab / Front-end concept build</span>
|
|
<span>Designed for visual impact</span>
|
|
</footer>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|