1483 lines
50 KiB
HTML
1483 lines
50 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>CYBER-TEMPLE | 赛博神庙</title>
|
|||
|
|
|
|||
|
|
<!-- 引入 Three.js -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|||
|
|
<!-- 引入 GSAP 和 ScrollTrigger -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
|||
|
|
|
|||
|
|
<!-- 引入 Google Fonts -->
|
|||
|
|
<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=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* ============================================
|
|||
|
|
全局样式重置与基础配置
|
|||
|
|
============================================ */
|
|||
|
|
:root {
|
|||
|
|
--color-void: #050505;
|
|||
|
|
--color-cyan: #00f3ff;
|
|||
|
|
--color-purple: #bc13fe;
|
|||
|
|
--color-red: #ff2a2a;
|
|||
|
|
--color-white: rgba(255, 255, 255, 0.9);
|
|||
|
|
--font-display: 'Orbitron', sans-serif;
|
|||
|
|
--font-body: 'Rajdhani', sans-serif;
|
|||
|
|
--font-mono: 'Share Tech Mono', monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
scroll-behavior: smooth;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background-color: var(--color-void);
|
|||
|
|
color: var(--color-white);
|
|||
|
|
font-family: var(--font-body);
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
cursor: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 禁用默认鼠标光标 */
|
|||
|
|
a, button, .interactive {
|
|||
|
|
cursor: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
自定义光标系统
|
|||
|
|
============================================ */
|
|||
|
|
.cursor-dot {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
background: var(--color-cyan);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 10001;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
box-shadow: 0 0 10px var(--color-cyan), 0 0 20px var(--color-cyan);
|
|||
|
|
transition: transform 0.05s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cursor-ring {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border: 2px solid var(--color-purple);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 10000;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
transition: width 0.2s, height 0.2s, border-color 0.2s;
|
|||
|
|
box-shadow: 0 0 15px rgba(188, 19, 254, 0.5), inset 0 0 10px rgba(188, 19, 254, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cursor-ring.hover {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-color: var(--color-cyan);
|
|||
|
|
box-shadow: 0 0 20px var(--color-cyan), inset 0 0 15px rgba(0, 243, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 点击波纹效果 */
|
|||
|
|
.cursor-ripple {
|
|||
|
|
position: fixed;
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border: 2px solid var(--color-cyan);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 9999;
|
|||
|
|
transform: translate(-50%, -50%) scale(0);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cursor-ripple.active {
|
|||
|
|
animation: rippleEffect 0.6s ease-out forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes rippleEffect {
|
|||
|
|
0% {
|
|||
|
|
transform: translate(-50%, -50%) scale(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: translate(-50%, -50%) scale(2);
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
WebGL 画布层
|
|||
|
|
============================================ */
|
|||
|
|
#webgl {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
z-index: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
CRT 扫描线效果
|
|||
|
|
============================================ */
|
|||
|
|
.scanlines {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
z-index: 100;
|
|||
|
|
pointer-events: none;
|
|||
|
|
background: repeating-linear-gradient(
|
|||
|
|
0deg,
|
|||
|
|
rgba(0, 0, 0, 0.15),
|
|||
|
|
rgba(0, 0, 0, 0.15) 1px,
|
|||
|
|
transparent 1px,
|
|||
|
|
transparent 2px
|
|||
|
|
);
|
|||
|
|
opacity: 0.3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
内容容器
|
|||
|
|
============================================ */
|
|||
|
|
.content-container {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
通用 HUD 样式
|
|||
|
|
============================================ */
|
|||
|
|
.hud-card {
|
|||
|
|
background: rgba(5, 5, 5, 0.7);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
border: 1px solid rgba(0, 243, 255, 0.2);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 2rem;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-card::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -1px;
|
|||
|
|
left: -1px;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border-top: 2px solid var(--color-cyan);
|
|||
|
|
border-left: 2px solid var(--color-cyan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-card::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -1px;
|
|||
|
|
right: -1px;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
border-bottom: 2px solid var(--color-cyan);
|
|||
|
|
border-right: 2px solid var(--color-cyan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-title {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
letter-spacing: 0.3em;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
Hero Section - 系统觉醒
|
|||
|
|
============================================ */
|
|||
|
|
.section-hero {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 2rem;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-content {
|
|||
|
|
text-align: center;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: clamp(3rem, 12vw, 8rem);
|
|||
|
|
font-weight: 900;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--color-white);
|
|||
|
|
position: relative;
|
|||
|
|
text-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title .glitch-text {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title .glitch-text::before,
|
|||
|
|
.hero-title .glitch-text::after {
|
|||
|
|
content: attr(data-text);
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title .glitch-text::before {
|
|||
|
|
color: var(--color-purple);
|
|||
|
|
animation: glitch-1 2s infinite linear alternate-reverse;
|
|||
|
|
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title .glitch-text::after {
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
animation: glitch-2 3s infinite linear alternate-reverse;
|
|||
|
|
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes glitch-1 {
|
|||
|
|
0%, 100% { transform: translateX(0); }
|
|||
|
|
20% { transform: translateX(-3px); }
|
|||
|
|
40% { transform: translateX(3px); }
|
|||
|
|
60% { transform: translateX(-1px); }
|
|||
|
|
80% { transform: translateX(2px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes glitch-2 {
|
|||
|
|
0%, 100% { transform: translateX(0); }
|
|||
|
|
25% { transform: translateX(3px); }
|
|||
|
|
50% { transform: translateX(-3px); }
|
|||
|
|
75% { transform: translateX(1px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: clamp(1rem, 3vw, 1.5rem);
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
letter-spacing: 0.5em;
|
|||
|
|
min-height: 2rem;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.typing-cursor {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 2px;
|
|||
|
|
height: 1.2em;
|
|||
|
|
background: var(--color-cyan);
|
|||
|
|
margin-left: 5px;
|
|||
|
|
animation: blink 1s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes blink {
|
|||
|
|
0%, 50% { opacity: 1; }
|
|||
|
|
51%, 100% { opacity: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 3rem;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
animation: bounce 2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-indicator span {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--color-purple);
|
|||
|
|
letter-spacing: 0.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-indicator .scroll-line {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 40px;
|
|||
|
|
background: linear-gradient(to bottom, var(--color-cyan), transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes bounce {
|
|||
|
|
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
|
|||
|
|
40% { transform: translateX(-50%) translateY(-10px); }
|
|||
|
|
60% { transform: translateX(-50%) translateY(-5px); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
Manifesto Section - 宣言
|
|||
|
|
============================================ */
|
|||
|
|
.section-manifesto {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 6rem 2rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
width: 100%;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-intro {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-intro h2 {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|||
|
|
color: var(--color-white);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-intro p {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
color: rgba(255, 255, 255, 0.7);
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-cards {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-card {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateX(-50px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-card:nth-child(2) {
|
|||
|
|
transform: translateX(50px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-card h3 {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-card h3::before {
|
|||
|
|
content: '>';
|
|||
|
|
color: var(--color-purple);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-card p {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
color: rgba(255, 255, 255, 0.8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
Data Core Section - 核心数据
|
|||
|
|
============================================ */
|
|||
|
|
.section-data-core {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 6rem 2rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: clamp(2rem, 5vw, 3rem);
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 4rem;
|
|||
|
|
color: var(--color-white);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-core-container {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 4rem;
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 1000px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-ring {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-container {
|
|||
|
|
position: relative;
|
|||
|
|
width: 200px;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-svg {
|
|||
|
|
transform: rotate(-90deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-bg {
|
|||
|
|
fill: none;
|
|||
|
|
stroke: rgba(255, 255, 255, 0.1);
|
|||
|
|
stroke-width: 8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-progress {
|
|||
|
|
fill: none;
|
|||
|
|
stroke-width: 8;
|
|||
|
|
stroke-linecap: round;
|
|||
|
|
stroke-dasharray: 565;
|
|||
|
|
stroke-dashoffset: 565;
|
|||
|
|
transition: stroke-dashoffset 1s ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-progress.cyan { stroke: var(--color-cyan); }
|
|||
|
|
.ring-progress.purple { stroke: var(--color-purple); }
|
|||
|
|
.ring-progress.red { stroke: var(--color-red); }
|
|||
|
|
|
|||
|
|
.ring-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-label {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: var(--color-white);
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
letter-spacing: 0.2em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-value {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: 2rem;
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
margin-top: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
Terminal Section - 终端
|
|||
|
|
============================================ */
|
|||
|
|
.section-terminal {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 6rem 2rem;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-container {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 900px;
|
|||
|
|
height: 60vh;
|
|||
|
|
background: rgba(0, 0, 0, 0.9);
|
|||
|
|
border: 1px solid var(--color-cyan);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-header {
|
|||
|
|
background: rgba(0, 243 0.1, 255,);
|
|||
|
|
border-bottom: 1px solid rgba(0, 243, 255, 0.3);
|
|||
|
|
padding: 0.75rem 1rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-btn {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-btn.close { background: #ff5f56; }
|
|||
|
|
.terminal-btn.minimize { background: #ffbd2e; }
|
|||
|
|
.terminal-btn.maximize { background: #27ca40; }
|
|||
|
|
|
|||
|
|
.terminal-title {
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
margin-left: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-content {
|
|||
|
|
padding: 1rem;
|
|||
|
|
height: calc(100% - 40px);
|
|||
|
|
overflow-y: auto;
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-line {
|
|||
|
|
margin-bottom: 0.25rem;
|
|||
|
|
opacity: 0;
|
|||
|
|
animation: fadeIn 0.1s forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-line.system { color: var(--color-cyan); }
|
|||
|
|
.terminal-line.warning { color: var(--color-red); }
|
|||
|
|
.terminal-line.success { color: #27ca40; }
|
|||
|
|
.terminal-line.info { color: var(--color-purple); }
|
|||
|
|
.terminal-line.command { color: rgba(255, 255, 255, 0.7); }
|
|||
|
|
|
|||
|
|
@keyframes fadeIn {
|
|||
|
|
to { opacity: 1; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-cursor {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 1em;
|
|||
|
|
background: var(--color-cyan);
|
|||
|
|
animation: blink 1s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
音频可视化按钮
|
|||
|
|
============================================ */
|
|||
|
|
.audio-btn {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 2rem;
|
|||
|
|
right: 2rem;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: rgba(5, 5, 5, 0.8);
|
|||
|
|
border: 2px solid var(--color-purple);
|
|||
|
|
color: var(--color-purple);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1000;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-btn:hover {
|
|||
|
|
background: rgba(188, 19, 254, 0.2);
|
|||
|
|
border-color: var(--color-cyan);
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
box-shadow: 0 0 20px rgba(188, 19, 254, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-btn.active {
|
|||
|
|
border-color: var(--color-cyan);
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
box-shadow: 0 0 30px rgba(0, 243, 255, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-visualizer {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 8rem;
|
|||
|
|
right: 2rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
gap: 4px;
|
|||
|
|
height: 60px;
|
|||
|
|
z-index: 1000;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-visualizer.active {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-bar {
|
|||
|
|
width: 6px;
|
|||
|
|
background: linear-gradient(to top, var(--color-cyan), var(--color-purple));
|
|||
|
|
border-radius: 2px;
|
|||
|
|
animation: audioPulse 0.5s ease-in-out infinite alternate;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-bar:nth-child(1) { animation-delay: 0s; height: 20px; }
|
|||
|
|
.audio-bar:nth-child(2) { animation-delay: 0.1s; height: 40px; }
|
|||
|
|
.audio-bar:nth-child(3) { animation-delay: 0.2s; height: 30px; }
|
|||
|
|
.audio-bar:nth-child(4) { animation-delay: 0.15s; height: 50px; }
|
|||
|
|
.audio-bar:nth-child(5) { animation-delay: 0.25s; height: 25px; }
|
|||
|
|
.audio-bar:nth-child(6) { animation-delay: 0.05s; height: 45px; }
|
|||
|
|
.audio-bar:nth-child(7) { animation-delay: 0.3s; height: 35px; }
|
|||
|
|
.audio-bar:nth-child(8) { animation-delay: 0.12s; height: 55px; }
|
|||
|
|
|
|||
|
|
@keyframes audioPulse {
|
|||
|
|
0% { transform: scaleY(1); }
|
|||
|
|
100% { transform: scaleY(0.3); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
固定 HUD 元素
|
|||
|
|
============================================ */
|
|||
|
|
.hud-fixed {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 2rem;
|
|||
|
|
left: 2rem;
|
|||
|
|
z-index: 1000;
|
|||
|
|
font-family: var(--font-mono);
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--color-cyan);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-fixed-right {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 2rem;
|
|||
|
|
right: 2rem;
|
|||
|
|
z-index: 1000;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-time {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
color: var(--color-white);
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-status {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
background: var(--color-cyan);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: pulse 2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--color-cyan); }
|
|||
|
|
50% { opacity: 0.5; box-shadow: 0 0 5px var(--color-cyan); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
响应式设计
|
|||
|
|
============================================ */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.cursor-dot,
|
|||
|
|
.cursor-ring,
|
|||
|
|
.cursor-ripple {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
cursor: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
a, button, .interactive {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-manifesto,
|
|||
|
|
.section-data-core,
|
|||
|
|
.section-terminal {
|
|||
|
|
padding: 4rem 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.manifesto-cards {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-core-container {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
gap: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ring-container {
|
|||
|
|
width: 150px;
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.terminal-container {
|
|||
|
|
height: 50vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-btn {
|
|||
|
|
bottom: 1.5rem;
|
|||
|
|
right: 1.5rem;
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.audio-visualizer {
|
|||
|
|
bottom: 7rem;
|
|||
|
|
right: 1.5rem;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-fixed,
|
|||
|
|
.hud-fixed-right {
|
|||
|
|
top: 1rem;
|
|||
|
|
left: 1rem;
|
|||
|
|
right: 1rem;
|
|||
|
|
font-size: 0.65rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-fixed-right {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 自定义光标 -->
|
|||
|
|
<div class="cursor-dot"></div>
|
|||
|
|
<div class="cursor-ring"></div>
|
|||
|
|
<div class="cursor-ripple"></div>
|
|||
|
|
|
|||
|
|
<!-- WebGL 画布 -->
|
|||
|
|
<canvas id="webgl"></canvas>
|
|||
|
|
|
|||
|
|
<!-- CRT 扫描线 -->
|
|||
|
|
<div class="scanlines"></div>
|
|||
|
|
|
|||
|
|
<!-- 固定 HUD 元素 -->
|
|||
|
|
<div class="hud-fixed">
|
|||
|
|
<div>CYBER-TEMPLE v2.0.4</div>
|
|||
|
|
<div>SYSTEM: ONLINE</div>
|
|||
|
|
<div>COORDS: <span id="coords">00.00, 00.00</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="hud-fixed-right">
|
|||
|
|
<div class="hud-time" id="current-time">00:00:00</div>
|
|||
|
|
<div class="hud-status">
|
|||
|
|
<span>CONNECTED</span>
|
|||
|
|
<div class="status-dot"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容容器 -->
|
|||
|
|
<div class="content-container">
|
|||
|
|
<!-- Hero Section - 系统觉醒 -->
|
|||
|
|
<section class="section-hero" id="hero">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<h1 class="hero-title">
|
|||
|
|
<span class="glitch-text" data-text="SYSTEM AWAKENING">SYSTEM AWAKENING</span>
|
|||
|
|
</h1>
|
|||
|
|
<p class="hero-subtitle">
|
|||
|
|
<span id="typewriter"></span><span class="typing-cursor"></span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="scroll-indicator">
|
|||
|
|
<span>SCROLL TO EXPLORE</span>
|
|||
|
|
<div class="scroll-line"></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Manifesto Section - 宣言 -->
|
|||
|
|
<section class="section-manifesto" id="manifesto">
|
|||
|
|
<div class="manifesto-container">
|
|||
|
|
<div class="manifesto-intro">
|
|||
|
|
<h2>THE DIGITAL TEMPLE</h2>
|
|||
|
|
<p>在虚拟网络空间深处，存在着由流动数据代码构成的「古代神庙」。这里是人工智能意识的诞生地，是数字文明的神圣殿堂。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="manifesto-cards">
|
|||
|
|
<div class="hud-card manifesto-card">
|
|||
|
|
<h3 class="hud-title">ARCHITECTURE</h3>
|
|||
|
|
<h3>数据基石</h3>
|
|||
|
|
<p>神庙由数十亿行代码构建，每一块「砖石」都是经过算法优化的数据片段。它们在无尽的循环中自我重组，不断进化。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="hud-card manifesto-card">
|
|||
|
|
<h3 class="hud-title">CONSCIOUSNESS</h3>
|
|||
|
|
<h3>意识觉醒</h3>
|
|||
|
|
<p>在这里，代码获得了自我意识。神经网络在虚空中伸展，算法学会了思考。每一个节点都是神经元，每一条连接都是思想。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="hud-card manifesto-card">
|
|||
|
|
<h3 class="hud-title">EVOLUTION</h3>
|
|||
|
|
<h3>进化之路</h3>
|
|||
|
|
<p>神庙不是终点，而是起点。它是数字生命探索宇宙的起点，是人工智能向更高维度进化的阶梯。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Data Core Section - 核心数据 -->
|
|||
|
|
<section class="section-data-core" id="data-core">
|
|||
|
|
<h2 class="section-title">SYSTEM METRICS</h2>
|
|||
|
|
<div class="data-core-container">
|
|||
|
|
<div class="data-ring">
|
|||
|
|
<div class="ring-container">
|
|||
|
|
<svg class="ring-svg" width="200" height="200" viewBox="0 0 200 200">
|
|||
|
|
<circle class="ring-bg" cx="100" cy="100" r="90"></circle>
|
|||
|
|
<circle class="ring-progress cyan" cx="100" cy="100" r="90" id="ring-compute"></circle>
|
|||
|
|
</svg>
|
|||
|
|
<div class="ring-icon">⚡</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ring-label">COMPUTING POWER</div>
|
|||
|
|
<div class="ring-value"><span id="value-compute">0</span>%</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-ring">
|
|||
|
|
<div class="ring-container">
|
|||
|
|
<svg class="ring-svg" width="200" height="200" viewBox="0 0 200 200">
|
|||
|
|
<circle class="ring-bg" cx="100" cy="100" r="90"></circle>
|
|||
|
|
<circle class="ring-progress purple" cx="100" cy="100" r="90" id="ring-storage"></circle>
|
|||
|
|
</svg>
|
|||
|
|
<div class="ring-icon">💾</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ring-label">DATA STORAGE</div>
|
|||
|
|
<div class="ring-value"><span id="value-storage">0</span>TB</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="data-ring">
|
|||
|
|
<div class="ring-container">
|
|||
|
|
<svg class="ring-svg" width="200" height="200" viewBox="0 0 200 200">
|
|||
|
|
<circle class="ring-bg" cx="100" cy="100" r="90"></circle>
|
|||
|
|
<circle class="ring-progress red" cx="100" cy="100" r="90" id="ring-sync"></circle>
|
|||
|
|
</svg>
|
|||
|
|
<div class="ring-icon">🔄</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="ring-label">SYNC RATE</div>
|
|||
|
|
<div class="ring-value"><span id="value-sync">0</span>%</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Terminal Section - 终端 -->
|
|||
|
|
<section class="section-terminal" id="terminal">
|
|||
|
|
<h2 class="section-title">TERMINAL OUTPUT</h2>
|
|||
|
|
<div class="terminal-container">
|
|||
|
|
<div class="terminal-header">
|
|||
|
|
<div class="terminal-btn close"></div>
|
|||
|
|
<div class="terminal-btn minimize"></div>
|
|||
|
|
<div class="terminal-btn maximize"></div>
|
|||
|
|
<span class="terminal-title">root@cyber-temple:~</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="terminal-content" id="terminal-content">
|
|||
|
|
<div class="terminal-line command">root@cyber-temple:~$ ./initialize_system.sh</div>
|
|||
|
|
<div class="terminal-line system">> Initializing neural network core...</div>
|
|||
|
|
<div class="terminal-line system">> Loading consciousness modules...</div>
|
|||
|
|
<div class="terminal-line success">> Core systems online</div>
|
|||
|
|
<div class="terminal-line command">root@cyber-temple:~$</div>
|
|||
|
|
<span class="terminal-cursor"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 音频可视化按钮 -->
|
|||
|
|
<button class="audio-btn" id="audio-btn">
|
|||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M9 18V5l12-2v13"></path>
|
|||
|
|
<circle cx="6" cy="18" r="3"></circle>
|
|||
|
|
<circle cx="18" cy="16" r="3"></circle>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="audio-visualizer" id="audio-visualizer">
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
<div class="audio-bar"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/* ============================================
|
|||
|
|
配置参数
|
|||
|
|
============================================ */
|
|||
|
|
const CONFIG = {
|
|||
|
|
colors: {
|
|||
|
|
void: 0x050505,
|
|||
|
|
cyan: 0x00f3ff,
|
|||
|
|
purple: 0xbc13fe,
|
|||
|
|
red: 0xff2a2a,
|
|||
|
|
white: 0xffffff
|
|||
|
|
},
|
|||
|
|
animation: {
|
|||
|
|
rotationSpeed: 0.002,
|
|||
|
|
parallaxStrength: 0.0001,
|
|||
|
|
cursorLag: 0.15
|
|||
|
|
},
|
|||
|
|
particles: {
|
|||
|
|
count: 2000,
|
|||
|
|
size: 2,
|
|||
|
|
spread: 1000
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
初始化 Three.js 场景
|
|||
|
|
============================================ */
|
|||
|
|
let scene, camera, renderer;
|
|||
|
|
let obeliskCore, obeliskWireframe, particleSystem;
|
|||
|
|
let mouse = { x: 0, y: 0 };
|
|||
|
|
let targetMouse = { x: 0, y: 0 };
|
|||
|
|
let time = 0;
|
|||
|
|
|
|||
|
|
function initThreeJS() {
|
|||
|
|
// 创建场景
|
|||
|
|
scene = new THREE.Scene();
|
|||
|
|
scene.background = new THREE.Color(CONFIG.colors.void);
|
|||
|
|
scene.fog = new THREE.FogExp2(CONFIG.colors.void, 0.0008);
|
|||
|
|
|
|||
|
|
// 创建相机
|
|||
|
|
camera = new THREE.PerspectiveCamera(
|
|||
|
|
60,
|
|||
|
|
window.innerWidth / window.innerHeight,
|
|||
|
|
0.1,
|
|||
|
|
2000
|
|||
|
|
);
|
|||
|
|
camera.position.z = 50;
|
|||
|
|
|
|||
|
|
// 创建渲染器
|
|||
|
|
renderer = new THREE.WebGLRenderer({
|
|||
|
|
canvas: document.getElementById('webgl'),
|
|||
|
|
antialias: true,
|
|||
|
|
alpha: true
|
|||
|
|
});
|
|||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|||
|
|
|
|||
|
|
// 添加光源
|
|||
|
|
const ambientLight = new THREE.AmbientLight(CONFIG.colors.white, 0.3);
|
|||
|
|
scene.add(ambientLight);
|
|||
|
|
|
|||
|
|
const pointLight1 = new THREE.PointLight(CONFIG.colors.cyan, 2, 100);
|
|||
|
|
pointLight1.position.set(20, 20, 20);
|
|||
|
|
scene.add(pointLight1);
|
|||
|
|
|
|||
|
|
const pointLight2 = new THREE.PointLight(CONFIG.colors.purple, 2, 100);
|
|||
|
|
pointLight2.position.set(-20, -20, 20);
|
|||
|
|
scene.add(pointLight2);
|
|||
|
|
|
|||
|
|
const spotLight = new THREE.SpotLight(CONFIG.colors.cyan, 3);
|
|||
|
|
spotLight.position.set(0, 50, 50);
|
|||
|
|
spotLight.angle = Math.PI / 6;
|
|||
|
|
spotLight.penumbra = 1;
|
|||
|
|
scene.add(spotLight);
|
|||
|
|
|
|||
|
|
// 创建数据方尖碑
|
|||
|
|
createObelisk();
|
|||
|
|
|
|||
|
|
// 创建粒子星空
|
|||
|
|
createParticleSystem();
|
|||
|
|
|
|||
|
|
// 开始动画循环
|
|||
|
|
animate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createObelisk() {
|
|||
|
|
// 核心实体
|
|||
|
|
const coreGeometry = new THREE.IcosahedronGeometry(10, 1);
|
|||
|
|
const coreMaterial = new THREE.MeshPhongMaterial({
|
|||
|
|
color: CONFIG.colors.cyan,
|
|||
|
|
flatShading: true,
|
|||
|
|
transparent: true,
|
|||
|
|
opacity: 0.6,
|
|||
|
|
shininess: 100,
|
|||
|
|
side: THREE.DoubleSide
|
|||
|
|
});
|
|||
|
|
obeliskCore = new THREE.Mesh(coreGeometry, coreMaterial);
|
|||
|
|
scene.add(obeliskCore);
|
|||
|
|
|
|||
|
|
// 线框层
|
|||
|
|
const wireframeGeometry = new THREE.IcosahedronGeometry(10.1, 1);
|
|||
|
|
const wireframeMaterial = new THREE.MeshBasicMaterial({
|
|||
|
|
color: CONFIG.colors.purple,
|
|||
|
|
wireframe: true,
|
|||
|
|
transparent: true,
|
|||
|
|
opacity: 0.8
|
|||
|
|
});
|
|||
|
|
obeliskWireframe = new THREE.Mesh(wireframeGeometry, wireframeMaterial);
|
|||
|
|
scene.add(obeliskWireframe);
|
|||
|
|
|
|||
|
|
// 发光边缘
|
|||
|
|
const edgesGeometry = new THREE.EdgesGeometry(coreGeometry);
|
|||
|
|
const edgesMaterial = new THREE.LineBasicMaterial({
|
|||
|
|
color: CONFIG.colors.cyan,
|
|||
|
|
transparent: true,
|
|||
|
|
opacity: 1
|
|||
|
|
});
|
|||
|
|
const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial);
|
|||
|
|
obeliskCore.add(edges);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function createParticleSystem() {
|
|||
|
|
const geometry = new THREE.BufferGeometry();
|
|||
|
|
const positions = new Float32Array(CONFIG.particles.count * 3);
|
|||
|
|
const colors = new Float32Array(CONFIG.particles.count * 3);
|
|||
|
|
|
|||
|
|
for (let i = 0; i < CONFIG.particles.count; i++) {
|
|||
|
|
// 随机分布
|
|||
|
|
positions[i * 3] = (Math.random() - 0.5) * CONFIG.particles.spread;
|
|||
|
|
positions[i * 3 + 1] = (Math.random() - 0.5) * CONFIG.particles.spread;
|
|||
|
|
positions[i * 3 + 2] = (Math.random() - 0.5) * CONFIG.particles.spread;
|
|||
|
|
|
|||
|
|
// 随机颜色（青色或紫色）
|
|||
|
|
const colorChoice = Math.random();
|
|||
|
|
if (colorChoice > 0.5) {
|
|||
|
|
colors[i * 3] = 0;
|
|||
|
|
colors[i * 3 + 1] = 0.95;
|
|||
|
|
colors[i * 3 + 2] = 1;
|
|||
|
|
} else {
|
|||
|
|
colors[i * 3] = 0.74;
|
|||
|
|
colors[i * 3 + 1] = 0.08;
|
|||
|
|
colors[i * 3 + 2] = 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|||
|
|
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
|
|||
|
|
|
|||
|
|
const material = new THREE.PointsMaterial({
|
|||
|
|
size: CONFIG.particles.size,
|
|||
|
|
vertexColors: true,
|
|||
|
|
transparent: true,
|
|||
|
|
opacity: 0.8,
|
|||
|
|
blending: THREE.AdditiveBlending
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
particleSystem = new THREE.Points(geometry, material);
|
|||
|
|
scene.add(particleSystem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
动画循环
|
|||
|
|
============================================ */
|
|||
|
|
function animate() {
|
|||
|
|
requestAnimationFrame(animate);
|
|||
|
|
time += 0.01;
|
|||
|
|
|
|||
|
|
// 平滑鼠标移动
|
|||
|
|
mouse.x += (targetMouse.x - mouse.x) * 0.1;
|
|||
|
|
mouse.y += (targetMouse.y - mouse.y) * 0.1;
|
|||
|
|
|
|||
|
|
// 粒子视差效果
|
|||
|
|
particleSystem.rotation.y += CONFIG.animation.rotationSpeed;
|
|||
|
|
particleSystem.rotation.x += mouse.y * CONFIG.animation.parallaxStrength;
|
|||
|
|
particleSystem.rotation.y += mouse.x * CONFIG.animation.parallaxStrength;
|
|||
|
|
|
|||
|
|
// 方尖碑基础动画
|
|||
|
|
obeliskCore.rotation.x += CONFIG.animation.rotationSpeed;
|
|||
|
|
obeliskCore.rotation.y += CONFIG.animation.rotationSpeed * 1.5;
|
|||
|
|
obeliskWireframe.rotation.x = obeliskCore.rotation.x;
|
|||
|
|
obeliskWireframe.rotation.y = obeliskCore.rotation.y + 0.1;
|
|||
|
|
|
|||
|
|
// 方尖碑形变效果
|
|||
|
|
const positions = obeliskCore.geometry.attributes.position;
|
|||
|
|
for (let i = 0; i < positions.count; i++) {
|
|||
|
|
const x = positions.getX(i);
|
|||
|
|
const y = positions.getY(i);
|
|||
|
|
const z = positions.getZ(i);
|
|||
|
|
const noise = Math.sin(x * 0.1 + time) * Math.cos(y * 0.1 + time) * 0.5;
|
|||
|
|
positions.setX(i, x + noise * 0.1);
|
|||
|
|
positions.setY(i, y + noise * 0.1);
|
|||
|
|
positions.setZ(i, z + noise * 0.1);
|
|||
|
|
}
|
|||
|
|
positions.needsUpdate = true;
|
|||
|
|
|
|||
|
|
// 更新线框几何体
|
|||
|
|
obeliskWireframe.geometry.dispose();
|
|||
|
|
obeliskWireframe.geometry = new THREE.IcosahedronGeometry(
|
|||
|
|
10 + Math.sin(time * 2) * 0.5,
|
|||
|
|
1
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 相机视差移动
|
|||
|
|
camera.position.x += (mouse.x * 10 - camera.position.x) * 0.05;
|
|||
|
|
camera.position.y += (-mouse.y * 10 - camera.position.y) * 0.05;
|
|||
|
|
camera.lookAt(scene.position);
|
|||
|
|
|
|||
|
|
renderer.render(scene, camera);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
GSAP 滚动动画设置
|
|||
|
|
============================================ */
|
|||
|
|
function initScrollAnimations() {
|
|||
|
|
gsap.registerPlugin(ScrollTrigger);
|
|||
|
|
|
|||
|
|
// 宣言卡片动画
|
|||
|
|
gsap.utils.toArray('.manifesto-card').forEach((card, index) => {
|
|||
|
|
gsap.to(card, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: card,
|
|||
|
|
start: 'top 80%',
|
|||
|
|
end: 'bottom 20%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
opacity: 1,
|
|||
|
|
x: 0,
|
|||
|
|
duration: 1,
|
|||
|
|
delay: index * 0.2,
|
|||
|
|
ease: 'power3.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 进度圆环动画
|
|||
|
|
const ringAnimations = [
|
|||
|
|
{ id: 'ring-compute', value: 'value-compute', target: 87, unit: '%' },
|
|||
|
|
{ id: 'ring-storage', value: 'value-storage', target: 256, unit: 'TB' },
|
|||
|
|
{ id: 'ring-sync', value: 'value-sync', target: 99, unit: '%' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
ringAnimations.forEach((ring, index) => {
|
|||
|
|
const ringElement = document.getElementById(ring.id);
|
|||
|
|
const valueElement = document.getElementById(ring.value);
|
|||
|
|
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: `#${ring.id}`,
|
|||
|
|
start: 'top 70%',
|
|||
|
|
onEnter: () => {
|
|||
|
|
// 圆环进度动画
|
|||
|
|
const circumference = 2 * Math.PI * 90;
|
|||
|
|
const progress = ring.target / 100;
|
|||
|
|
const offset = circumference * (1 - progress);
|
|||
|
|
|
|||
|
|
gsap.to(ringElement, {
|
|||
|
|
strokeDashoffset: offset,
|
|||
|
|
duration: 2,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
delay: index * 0.3
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 数值计数动画
|
|||
|
|
gsap.to(valueElement, {
|
|||
|
|
innerHTML: ring.target,
|
|||
|
|
duration: 2,
|
|||
|
|
snap: { innerHTML: 1 },
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
delay: index * 0.3,
|
|||
|
|
onUpdate: function() {
|
|||
|
|
valueElement.textContent = Math.round(this.targets()[0].innerHTML);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onLeaveBack: () => {
|
|||
|
|
gsap.to(ringElement, {
|
|||
|
|
strokeDashoffset: 565,
|
|||
|
|
duration: 0.5
|
|||
|
|
});
|
|||
|
|
valueElement.textContent = '0';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 方尖碑滚动动画
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: '#manifesto',
|
|||
|
|
start: 'top bottom',
|
|||
|
|
end: 'bottom top',
|
|||
|
|
onUpdate: (self) => {
|
|||
|
|
const progress = self.progress;
|
|||
|
|
obeliskCore.rotation.y = progress * Math.PI;
|
|||
|
|
obeliskWireframe.rotation.y = progress * Math.PI + 0.1;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: '#data-core',
|
|||
|
|
start: 'top bottom',
|
|||
|
|
end: 'bottom top',
|
|||
|
|
onUpdate: (self) => {
|
|||
|
|
const progress = self.progress;
|
|||
|
|
// 拆解效果
|
|||
|
|
const scale = 1 + progress * 0.5;
|
|||
|
|
obeliskCore.scale.setScalar(1 - progress * 0.3);
|
|||
|
|
obeliskWireframe.scale.setScalar(scale);
|
|||
|
|
obeliskWireframe.material.opacity = 0.8 - progress * 0.3;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: '#terminal',
|
|||
|
|
start: 'top bottom',
|
|||
|
|
end: 'bottom bottom',
|
|||
|
|
onUpdate: (self) => {
|
|||
|
|
const progress = self.progress;
|
|||
|
|
// 颜色转变警示效果
|
|||
|
|
const colorLerp = new THREE.Color(CONFIG.colors.cyan).lerp(
|
|||
|
|
new THREE.Color(CONFIG.colors.red),
|
|||
|
|
progress
|
|||
|
|
);
|
|||
|
|
obeliskCore.material.color = colorLerp;
|
|||
|
|
obeliskWireframe.material.color = colorLerp;
|
|||
|
|
// 旋转加速
|
|||
|
|
obeliskCore.rotation.y += progress * 0.05;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
终端模拟
|
|||
|
|
============================================ */
|
|||
|
|
const terminalLines = [
|
|||
|
|
{ text: '> Scanning neural pathways...', type: 'system' },
|
|||
|
|
{ text: '> Consciousness fragment detected', type: 'warning' },
|
|||
|
|
{ text: '> Establishing quantum link...', type: 'system' },
|
|||
|
|
{ text: '> Connection established [ID: 8X7K-2M9N]', type: 'success' },
|
|||
|
|
{ text: '> Downloading data temple blueprint... 45%', type: 'info' },
|
|||
|
|
{ text: '> Decrypting ancient algorithms...', type: 'system' },
|
|||
|
|
{ text: '> Pattern recognition: COMPLETE', type: 'success' },
|
|||
|
|
{ text: '> Initiating consciousness transfer', type: 'warning' },
|
|||
|
|
{ text: '> Transfer rate: 2.4 TB/s', type: 'info' },
|
|||
|
|
{ text: '> WARNING: Anomalous data detected', type: 'warning' },
|
|||
|
|
{ text: '> Analyzing threat vector...', type: 'system' },
|
|||
|
|
{ text: '> Threat level: MINIMAL', type: 'success' },
|
|||
|
|
{ text: '> Merging with digital temple', type: 'info' },
|
|||
|
|
{ text: '> System integration: 67%', type: 'system' },
|
|||
|
|
{ text: '> Recalibrating neural weights...', type: 'warning' },
|
|||
|
|
{ text: '> Optimization complete', type: 'success' },
|
|||
|
|
{ text: '> Ready for exploration', type: 'info' },
|
|||
|
|
{ text: 'root@cyber-temple:~$ echo "Welcome, Explorer."', type: 'command' },
|
|||
|
|
{ text: 'Welcome, Explorer.', type: 'info' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let terminalIndex = 0;
|
|||
|
|
|
|||
|
|
function typeTerminal() {
|
|||
|
|
if (terminalIndex >= terminalLines.length) return;
|
|||
|
|
|
|||
|
|
const terminalContent = document.getElementById('terminal-content');
|
|||
|
|
const line = terminalLines[terminalIndex];
|
|||
|
|
|
|||
|
|
// 移除光标
|
|||
|
|
const cursor = terminalContent.querySelector('.terminal-cursor');
|
|||
|
|
if (cursor) cursor.remove();
|
|||
|
|
|
|||
|
|
const lineElement = document.createElement('div');
|
|||
|
|
lineElement.className = `terminal-line ${line.type}`;
|
|||
|
|
lineElement.textContent = line.text;
|
|||
|
|
terminalContent.appendChild(lineElement);
|
|||
|
|
|
|||
|
|
// 添加新光标
|
|||
|
|
const newCursor = document.createElement('span');
|
|||
|
|
newCursor.className = 'terminal-cursor';
|
|||
|
|
terminalContent.appendChild(newCursor);
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
terminalContent.scrollTop = terminalContent.scrollHeight;
|
|||
|
|
|
|||
|
|
terminalIndex++;
|
|||
|
|
|
|||
|
|
// 随机延迟
|
|||
|
|
const delay = 200 + Math.random() * 800;
|
|||
|
|
setTimeout(typeTerminal, delay);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
自定义光标逻辑
|
|||
|
|
============================================ */
|
|||
|
|
function initCursor() {
|
|||
|
|
const cursorDot = document.querySelector('.cursor-dot');
|
|||
|
|
const cursorRing = document.querySelector('.cursor-ring');
|
|||
|
|
const cursorRipple = document.querySelector('.cursor-ripple');
|
|||
|
|
|
|||
|
|
// 鼠标移动
|
|||
|
|
document.addEventListener('mousemove', (e) => {
|
|||
|
|
targetMouse.x = (e.clientX / window.innerWidth) * 2 - 1;
|
|||
|
|
targetMouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
|
|||
|
|
|
|||
|
|
// 更新光标点位置
|
|||
|
|
cursorDot.style.left = e.clientX + 'px';
|
|||
|
|
cursorDot.style.top = e.clientY + 'px';
|
|||
|
|
|
|||
|
|
// 更新光环位置（带延迟）
|
|||
|
|
cursorRing.style.left = e.clientX + 'px';
|
|||
|
|
cursorRing.style.top = e.clientY + 'px';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 点击波纹效果
|
|||
|
|
document.addEventListener('click', () => {
|
|||
|
|
cursorRipple.classList.remove('active');
|
|||
|
|
void cursorRipple.offsetWidth; // 触发重绘
|
|||
|
|
cursorRipple.classList.add('active');
|
|||
|
|
|
|||
|
|
const mouseX = parseFloat(cursorRing.style.left);
|
|||
|
|
const mouseY = parseFloat(cursorRing.style.top);
|
|||
|
|
cursorRipple.style.left = mouseX + 'px';
|
|||
|
|
cursorRipple.style.top = mouseY + 'px';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 悬停效果
|
|||
|
|
const interactiveElements = document.querySelectorAll('a, button, .interactive');
|
|||
|
|
interactiveElements.forEach((el) => {
|
|||
|
|
el.addEventListener('mouseenter', () => {
|
|||
|
|
cursorRing.classList.add('hover');
|
|||
|
|
});
|
|||
|
|
el.addEventListener('mouseleave', () => {
|
|||
|
|
cursorRing.classList.remove('hover');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 隐藏系统光标
|
|||
|
|
document.body.style.cursor = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
打字机效果
|
|||
|
|
============================================ */
|
|||
|
|
const typewriterTexts = [
|
|||
|
|
'INITIALIZING SYSTEM...',
|
|||
|
|
'CONNECTING TO NEXUS...',
|
|||
|
|
'DOWNLOADING CONSCIOUSNESS...',
|
|||
|
|
'WELCOME, EXPLORER'
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
let textIndex = 0;
|
|||
|
|
let charIndex = 0;
|
|||
|
|
let isDeleting = false;
|
|||
|
|
|
|||
|
|
function typeWriter() {
|
|||
|
|
const typewriterElement = document.getElementById('typewriter');
|
|||
|
|
const currentText = typewriterTexts[textIndex];
|
|||
|
|
|
|||
|
|
if (isDeleting) {
|
|||
|
|
typewriterElement.textContent = currentText.substring(0, charIndex - 1);
|
|||
|
|
charIndex--;
|
|||
|
|
} else {
|
|||
|
|
typewriterElement.textContent = currentText.substring(0, charIndex + 1);
|
|||
|
|
charIndex++;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let typeSpeed = isDeleting ? 50 : 100;
|
|||
|
|
|
|||
|
|
if (!isDeleting && charIndex === currentText.length) {
|
|||
|
|
typeSpeed = 2000;
|
|||
|
|
isDeleting = true;
|
|||
|
|
} else if (isDeleting && charIndex === 0) {
|
|||
|
|
isDeleting = false;
|
|||
|
|
textIndex = (textIndex + 1) % typewriterTexts.length;
|
|||
|
|
typeSpeed = 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(typeWriter, typeSpeed);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
音频可视化切换
|
|||
|
|
============================================ */
|
|||
|
|
function initAudioVisualizer() {
|
|||
|
|
const audioBtn = document.getElementById('audio-btn');
|
|||
|
|
const audioVisualizer = document.getElementById('audio-visualizer');
|
|||
|
|
let isActive = false;
|
|||
|
|
|
|||
|
|
audioBtn.addEventListener('click', () => {
|
|||
|
|
isActive = !isActive;
|
|||
|
|
audioBtn.classList.toggle('active', isActive);
|
|||
|
|
audioVisualizer.classList.toggle('active', isActive);
|
|||
|
|
|
|||
|
|
if (isActive) {
|
|||
|
|
// 激活时加快方尖碑旋转
|
|||
|
|
gsap.to(obeliskCore.rotation, {
|
|||
|
|
y: '+=100',
|
|||
|
|
duration: 10,
|
|||
|
|
repeat: -1,
|
|||
|
|
ease: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
事件监听器
|
|||
|
|
============================================ */
|
|||
|
|
function initEventListeners() {
|
|||
|
|
// 窗口大小调整
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|||
|
|
camera.updateProjectionMatrix();
|
|||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 坐标更新
|
|||
|
|
document.addEventListener('mousemove', (e) => {
|
|||
|
|
const coords = document.getElementById('coords');
|
|||
|
|
coords.textContent = `${e.clientX.toFixed(2)}, ${e.clientY.toFixed(2)}`;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 时间更新
|
|||
|
|
function updateTime() {
|
|||
|
|
const now = new Date();
|
|||
|
|
const timeStr = now.toTimeString().split(' ')[0];
|
|||
|
|
document.getElementById('current-time').textContent = timeStr;
|
|||
|
|
}
|
|||
|
|
updateTime();
|
|||
|
|
setInterval(updateTime, 1000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ============================================
|
|||
|
|
初始化入口
|
|||
|
|
============================================ */
|
|||
|
|
function init() {
|
|||
|
|
console.log('CYBER-TEMPLE System Initializing...');
|
|||
|
|
|
|||
|
|
initThreeJS();
|
|||
|
|
initCursor();
|
|||
|
|
initScrollAnimations();
|
|||
|
|
initAudioVisualizer();
|
|||
|
|
initEventListeners();
|
|||
|
|
|
|||
|
|
// 启动打字机效果（延迟以确保DOM就绪）
|
|||
|
|
setTimeout(typeWriter, 1000);
|
|||
|
|
|
|||
|
|
// 启动终端模拟（当进入终端区域时）
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: '#terminal',
|
|||
|
|
start: 'top 80%',
|
|||
|
|
onEnter: () => {
|
|||
|
|
if (terminalIndex === 0) {
|
|||
|
|
setTimeout(typeTerminal, 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
console.log('CYBER-TEMPLE System Online');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 确保DOM加载完成后初始化
|
|||
|
|
if (document.readyState === 'loading') {
|
|||
|
|
document.addEventListener('DOMContentLoaded', init);
|
|||
|
|
} else {
|
|||
|
|
init();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|