From 09a58a8622fbfaa44d66d961d167e282e0ef16dd Mon Sep 17 00:00:00 2001
From: weitzu-com <72116249+weitzu-com@users.noreply.github.com>
Date: Tue, 17 Mar 2026 01:28:47 +0800
Subject: [PATCH] Create minimal responsive CIPPE landing page

---
 index.html | 838 ++++++-----------------------------------------------
 1 file changed, 84 insertions(+), 754 deletions(-)
diff --git a/index.html b/index.html
index 5447999..214da36 100644
--- a/index.html
+++ b/index.html
@@ -1,764 +1,94 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>第一性原理 · 3D 演示</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-
-    body {
-      background: #05070f;
-      color: #e8f0ff;
-      font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
-      overflow: hidden;
-      user-select: none;
-    }
-
-    canvas { display: block; }
-
-    /* ── HUD overlay ── */
-    #hud {
-      position: fixed;
-      inset: 0;
-      pointer-events: none;
-    }
-
-    /* Stage title */
-    #stage-title {
-      position: fixed;
-      top: 36px;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      pointer-events: none;
-    }
-    #stage-title h1 {
-      font-size: 1.9rem;
-      font-weight: 700;
-      letter-spacing: .12em;
-      background: linear-gradient(120deg, #7eb8ff 0%, #c4aaff 50%, #7ee8ff 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      text-shadow: none;
-    }
-    #stage-title p {
-      margin-top: 6px;
-      font-size: .85rem;
-      color: #8ba4d0;
-      letter-spacing: .06em;
-    }
-
-    /* Narrative card */
-    #card {
-      position: fixed;
-      bottom: 120px;
-      left: 50%;
-      transform: translateX(-50%);
-      max-width: 640px;
-      width: 90vw;
-      background: rgba(10, 16, 40, 0.82);
-      border: 1px solid rgba(100, 160, 255, 0.25);
-      border-radius: 14px;
-      padding: 20px 28px;
-      backdrop-filter: blur(18px);
-      transition: opacity .5s;
-    }
-    #card .step-tag {
-      font-size: .7rem;
-      letter-spacing: .15em;
-      color: #6ab4ff;
-      text-transform: uppercase;
-      margin-bottom: 8px;
-    }
-    #card h2 {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 10px;
-      color: #dde8ff;
-    }
-    #card p {
-      font-size: .88rem;
-      line-height: 1.8;
-      color: #9ab2d8;
-    }
-    #card .highlight {
-      color: #7dcfff;
-      font-weight: 600;
-    }
-
-    /* Controls */
-    #controls {
-      position: fixed;
-      bottom: 36px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 14px;
-      pointer-events: all;
-    }
-    .btn {
-      padding: 10px 28px;
-      border-radius: 40px;
-      border: 1px solid rgba(100,180,255,.4);
-      background: rgba(20, 40, 90, 0.6);
-      color: #b8d4ff;
-      font-size: .9rem;
-      letter-spacing: .06em;
-      cursor: pointer;
-      transition: background .25s, border-color .25s, transform .15s;
-      backdrop-filter: blur(8px);
-    }
-    .btn:hover {
-      background: rgba(50, 100, 200, 0.5);
-      border-color: rgba(100,200,255,.7);
-      transform: translateY(-2px);
-    }
-    .btn:active { transform: translateY(0); }
-    .btn.primary {
-      background: linear-gradient(135deg, #1a4fad 0%, #2563d4 100%);
-      border-color: rgba(130,200,255,.5);
-      color: #e0efff;
-    }
-
-    /* Progress dots */
-    #dots {
-      position: fixed;
-      bottom: 88px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 8px;
-      pointer-events: none;
-    }
-    .dot {
-      width: 7px; height: 7px;
-      border-radius: 50%;
-      background: rgba(100,160,255,.25);
-      transition: background .4s, transform .4s;
-    }
-    .dot.active {
-      background: #5ab4ff;
-      transform: scale(1.4);
-    }
-
-    /* Atom legend */
-    #legend {
-      position: fixed;
-      top: 50%;
-      right: 28px;
-      transform: translateY(-50%);
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      opacity: 0;
-      transition: opacity .6s;
-      pointer-events: none;
-    }
-    #legend.visible { opacity: 1; }
-    .legend-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      font-size: .78rem;
-      color: #8baad0;
-    }
-    .legend-dot {
-      width: 12px; height: 12px;
-      border-radius: 50%;
-      flex-shrink: 0;
-    }
-
-    /* Fade veil */
-    #veil {
-      position: fixed;
-      inset: 0;
-      background: #05070f;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity .6s;
-    }
-    #veil.show { opacity: 1; }
-  </style>
-</head>
-<body>
-<div id="veil"></div>
-<canvas id="c"></canvas>
-
-<div id="hud">
-  <div id="stage-title">
-    <h1>第一性原理</h1>
-    <p>First Principles Thinking · 3D Interactive Demo</p>
-  </div>
-
-  <div id="card">
-    <div class="step-tag">Step 1 of 5 · 传统假设</div>
-    <h2>我们通常如何思考？</h2>
-    <p>
-      大多数人依赖<span class="highlight">类比推理</span>——"别人这样做，我也这样做"。
-      这种思维方式快捷，但会被他人的假设和成见所束缚，
-      限制了真正的创新空间。
-    </p>
-  </div>
-
-  <div id="dots">
-    <div class="dot active"></div>
-    <div class="dot"></div>
-    <div class="dot"></div>
-    <div class="dot"></div>
-    <div class="dot"></div>
-  </div>
-
-  <div id="controls">
-    <button class="btn" id="btn-prev">← 上一步</button>
-    <button class="btn primary" id="btn-next">下一步 →</button>
-  </div>
-
-  <div id="legend">
-    <div class="legend-item"><div class="legend-dot" style="background:#4fc3f7"></div>碳原子</div>
-    <div class="legend-item"><div class="legend-dot" style="background:#ff8a65"></div>铁原子</div>
-    <div class="legend-item"><div class="legend-dot" style="background:#aed581"></div>铝原子</div>
-    <div class="legend-item"><div class="legend-dot" style="background:#ce93d8"></div>锂原子</div>
-    <div class="legend-item"><div class="legend-dot" style="background:#fff176"></div>氢原子</div>
-  </div>
-</div>
-
-<!-- Three.js from CDN -->
-<script type="importmap">
-{
-  "imports": {
-    "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
-  }
-}
-</script>
-
-<script type="module">
-import * as THREE from 'three';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-
-/* ══════════════════════════════════════════
-   SCENE SETUP
-══════════════════════════════════════════ */
-const W = window.innerWidth, H = window.innerHeight;
-const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('c'), antialias: true });
-renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
-renderer.setSize(W, H);
-renderer.toneMapping = THREE.ACESFilmicToneMapping;
-renderer.toneMappingExposure = 1.1;
-
-const scene = new THREE.Scene();
-scene.fog = new THREE.FogExp2(0x05070f, 0.018);
-
-const camera = new THREE.PerspectiveCamera(55, W / H, 0.1, 400);
-camera.position.set(0, 4, 28);
-
-const controls = new OrbitControls(camera, renderer.domElement);
-controls.enableDamping = true;
-controls.dampingFactor = 0.08;
-controls.enablePan = false;
-controls.minDistance = 8;
-controls.maxDistance = 60;
-controls.autoRotate = true;
-controls.autoRotateSpeed = 0.4;
-
-/* Bloom post-processing */
-const composer = new EffectComposer(renderer);
-composer.addPass(new RenderPass(scene, camera));
-const bloom = new UnrealBloomPass(new THREE.Vector2(W, H), 1.1, 0.55, 0.6);
-composer.addPass(bloom);
-
-/* Ambient + directional light */
-scene.add(new THREE.AmbientLight(0x1a2a4a, 2));
-const sun = new THREE.DirectionalLight(0x6699ff, 3);
-sun.position.set(10, 20, 10);
-scene.add(sun);
-const fill = new THREE.DirectionalLight(0xff88aa, 1);
-fill.position.set(-15, -10, -10);
-scene.add(fill);
-
-/* Starfield */
-const starGeo = new THREE.BufferGeometry();
-const starCount = 3000;
-const starPos = new Float32Array(starCount * 3);
-for (let i = 0; i < starCount * 3; i++) starPos[i] = (Math.random() - .5) * 300;
-starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
-scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({ color: 0x8090b8, size: 0.18 })));
-
-/* ══════════════════════════════════════════
-   STAGE DATA
-══════════════════════════════════════════ */
-const STAGES = [
-  {
-    tag: 'Step 1 of 5 · 传统假设',
-    title: '我们通常如何思考？',
-    body: '大多数人依赖<span class="highlight">类比推理</span>——"别人这样做，我也这样做"。这种思维方式快捷，但会被他人的假设和成见所束缚，限制了真正的创新空间。',
-    build: buildStage1,
-    cameraPos: [0, 4, 28],
-  },
-  {
-    tag: 'Step 2 of 5 · 打破成见',
-    title: '质疑一切假设',
-    body: '第一性原理要求我们像<span class="highlight">苏格拉底式追问</span>一样，不断问：这个假设真的成立吗？它基于什么事实？将复杂系统分解为最基本的组成部分。',
-    build: buildStage2,
-    cameraPos: [0, 8, 22],
-  },
-  {
-    tag: 'Step 3 of 5 · 基本要素',
-    title: '发现底层真理',
-    body: '以火箭为例，马斯克问：<span class="highlight">"火箭的原材料成本是多少？"</span> 铝、钢、钛、铜——原材料总价不到成品的2%。那98%的成本去哪了？',
-    build: buildStage3,
-    cameraPos: [0, 2, 20],
-  },
-  {
-    tag: 'Step 4 of 5 · 重新建构',
-    title: '从基础向上重建',
-    body: '掌握了基本要素，就能从零开始重新推理解决方案，<span class="highlight">不受既有框架约束</span>。SpaceX 由此将火箭成本降低了约 90%，开创了私人航天时代。',
-    build: buildStage4,
-    cameraPos: [0, 6, 25],
-  },
-  {
-    tag: 'Step 5 of 5 · 应用总结',
-    title: '第一性原理的本质',
-    body: '将任何问题还原到<span class="highlight">不可再分的基本事实</span>，再用逻辑和数学从头推导解决方案。这不只是一种思维工具，而是探索未知、颠覆传统的世界观。',
-    build: buildStage5,
-    cameraPos: [0, 0, 30],
-  },
-];
-
-/* ══════════════════════════════════════════
-   SHARED HELPERS
-══════════════════════════════════════════ */
-const group = new THREE.Group();
-scene.add(group);
-
-function clearGroup() {
-  while (group.children.length) {
-    const c = group.children[0];
-    if (c.geometry) c.geometry.dispose();
-    if (c.material) c.material.dispose();
-    group.remove(c);
-  }
-}
-
-function sphere(r, color, emissive = 0x000000, segments = 24) {
-  return new THREE.Mesh(
-    new THREE.SphereGeometry(r, segments, segments),
-    new THREE.MeshStandardMaterial({ color, emissive, emissiveIntensity: 0.6, roughness: 0.35, metalness: 0.6 })
-  );
-}
-
-function ring(innerR, outerR, color, opacity = 0.25) {
-  const m = new THREE.Mesh(
-    new THREE.TorusGeometry((innerR + outerR) / 2, (outerR - innerR) / 2, 8, 80),
-    new THREE.MeshStandardMaterial({ color, transparent: true, opacity, side: THREE.DoubleSide })
-  );
-  return m;
-}
-
-/* Atom cluster at position */
-function atomCluster(cx, cy, cz, count, color, emissive, spreadR, particleR) {
-  const g = new THREE.Group();
-  g.position.set(cx, cy, cz);
-  for (let i = 0; i < count; i++) {
-    const s = sphere(particleR, color, emissive);
-    const theta = Math.random() * Math.PI * 2;
-    const phi = Math.acos(2 * Math.random() - 1);
-    const r = Math.random() * spreadR;
-    s.position.set(r * Math.sin(phi) * Math.cos(theta), r * Math.sin(phi) * Math.sin(theta), r * Math.cos(phi));
-    s.userData.vel = new THREE.Vector3((Math.random()-.5)*.015, (Math.random()-.5)*.015, (Math.random()-.5)*.015);
-    g.add(s);
-  }
-  return g;
-}
-
-/* Glowing line between two points */
-function glowLine(a, b, color) {
-  const points = [new THREE.Vector3(...a), new THREE.Vector3(...b)];
-  return new THREE.Line(
-    new THREE.BufferGeometry().setFromPoints(points),
-    new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.5 })
-  );
-}
-
-/* ══════════════════════════════════════════
-   STAGE BUILDERS
-══════════════════════════════════════════ */
-
-/* Stage 1: A tangled web of "assumptions" – opaque black-box */
-function buildStage1() {
-  clearGroup();
-
-  // Central mysterious black box
-  const box = new THREE.Mesh(
-    new THREE.BoxGeometry(5, 5, 5),
-    new THREE.MeshStandardMaterial({ color: 0x1a2040, roughness: 0.1, metalness: 0.8, emissive: 0x0a1020, emissiveIntensity: 0.8 })
-  );
-  group.add(box);
-
-  // Question marks / confusion nodes circling
-  const nodeColors = [0xff6b6b, 0xffa06b, 0xffd96b, 0x6bffb8, 0x6b9eff];
-  for (let i = 0; i < 12; i++) {
-    const angle = (i / 12) * Math.PI * 2;
-    const r = 9 + Math.sin(i * 1.3) * 2;
-    const y = Math.sin(i * 0.9) * 3;
-    const s = sphere(0.5 + Math.random() * 0.3, nodeColors[i % nodeColors.length], nodeColors[i % nodeColors.length]);
-    s.position.set(Math.cos(angle) * r, y, Math.sin(angle) * r);
-    s.userData.orbitAngle = angle;
-    s.userData.orbitR = r;
-    s.userData.orbitY = y;
-    s.userData.orbitSpeed = 0.003 + Math.random() * 0.004;
-    group.add(s);
-
-    // Lines from node to box
-    group.add(glowLine([Math.cos(angle) * r, y, Math.sin(angle) * r], [0, 0, 0], nodeColors[i % nodeColors.length]));
-  }
-
-  // Outer haze rings
-  const hr1 = ring(7, 8.5, 0x334488, 0.15); hr1.rotation.x = Math.PI / 2; group.add(hr1);
-  const hr2 = ring(9.5, 10.5, 0x334488, 0.1); hr2.rotation.x = Math.PI / 3; group.add(hr2);
-
-  document.getElementById('legend').classList.remove('visible');
-}
-
-/* Stage 2: Exploding the black box – fragments flying apart */
-function buildStage2() {
-  clearGroup();
-
-  // Fragments of box
-  const fragMat = new THREE.MeshStandardMaterial({ color: 0x1a2040, emissive: 0x0a1228, emissiveIntensity: 0.7, roughness: 0.2, metalness: 0.9 });
-  const fragPositions = [
-    [3,3,3],[-3,3,3],[3,-3,3],[-3,-3,3],
-    [3,3,-3],[-3,3,-3],[3,-3,-3],[-3,-3,-3],
-    [0,4,0],[0,-4,0],[4,0,0],[-4,0,0],
-  ];
-  fragPositions.forEach(([x,y,z]) => {
-    const frag = new THREE.Mesh(
-      new THREE.BoxGeometry(1.8 + Math.random(), 1.8 + Math.random(), 1.8 + Math.random()),
-      fragMat
-    );
-    frag.position.set(x, y, z);
-    frag.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
-    frag.userData.drift = new THREE.Vector3(x, y, z).normalize().multiplyScalar(0.012);
-    frag.userData.rotVel = new THREE.Vector3((Math.random()-.5)*.02, (Math.random()-.5)*.02, (Math.random()-.5)*.02);
-    group.add(frag);
-  });
-
-  // Glowing cracks / energy lines
-  const crackColors = [0x5599ff, 0x88ffdd, 0xffaa55];
-  for (let i = 0; i < 18; i++) {
-    const a = [(Math.random()-.5)*8, (Math.random()-.5)*8, (Math.random()-.5)*8];
-    const b = [(Math.random()-.5)*8, (Math.random()-.5)*8, (Math.random()-.5)*8];
-    group.add(glowLine(a, b, crackColors[i % 3]));
-  }
-
-  // Central bright flash
-  const flash = sphere(1.2, 0xffffff, 0xaaccff);
-  group.add(flash);
-  flash.userData.pulse = true;
-
-  document.getElementById('legend').classList.remove('visible');
-}
-
-/* Stage 3: Atoms revealed – periodic table elements */
-const ATOM_DEFS = [
-  { label:'C',  color: 0x4fc3f7, emissive: 0x0d47a1, count: 40, r: 0.28 },
-  { label:'Fe', color: 0xff8a65, emissive: 0xbf360c, count: 30, r: 0.35 },
-  { label:'Al', color: 0xaed581, emissive: 0x33691e, count: 25, r: 0.30 },
-  { label:'Li', color: 0xce93d8, emissive: 0x6a1b9a, count: 20, r: 0.22 },
-  { label:'H',  color: 0xfff176, emissive: 0xf57f17, count: 50, r: 0.18 },
-];
-
-function buildStage3() {
-  clearGroup();
-
-  // Floating atom clusters arranged in a loose ring
-  ATOM_DEFS.forEach((def, i) => {
-    const angle = (i / ATOM_DEFS.length) * Math.PI * 2;
-    const cx = Math.cos(angle) * 8;
-    const cy = Math.sin(i * 0.8) * 2;
-    const cz = Math.sin(angle) * 8;
-    const clust = atomCluster(cx, cy, cz, def.count, def.color, def.emissive, 2.2, def.r);
-    clust.userData.orbitAngle = angle;
-    clust.userData.orbitR = 8;
-    clust.userData.orbitSpeed = 0.002 + i * 0.0008;
-    group.add(clust);
-
-    // Orbit rings per cluster
-    const or = ring(1.8, 2.0, def.color, 0.3);
-    or.position.set(cx, cy, cz);
-    or.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0);
-    group.add(or);
-  });
-
-  // Connection lines between clusters
-  const clusterCenters = ATOM_DEFS.map((_, i) => {
-    const angle = (i / ATOM_DEFS.length) * Math.PI * 2;
-    return [Math.cos(angle) * 8, Math.sin(i * 0.8) * 2, Math.sin(angle) * 8];
-  });
-  for (let i = 0; i < clusterCenters.length; i++) {
-    const next = clusterCenters[(i + 1) % clusterCenters.length];
-    group.add(glowLine(clusterCenters[i], next, 0x445577));
-  }
-
-  document.getElementById('legend').classList.add('visible');
-}
-
-/* Stage 4: Atoms assembling into rocket shape */
-function buildStage4() {
-  clearGroup();
-
-  // Rocket body (cylinder + cone)
-  const bodyMat = new THREE.MeshStandardMaterial({ color: 0x2255aa, emissive: 0x0a1840, metalness: 0.9, roughness: 0.2 });
-  const body = new THREE.Mesh(new THREE.CylinderGeometry(1.2, 1.5, 8, 32), bodyMat);
-  body.position.y = 1;
-  group.add(body);
-
-  const noseMat = new THREE.MeshStandardMaterial({ color: 0x55aaff, emissive: 0x112244, metalness: 0.8, roughness: 0.2 });
-  const nose = new THREE.Mesh(new THREE.ConeGeometry(1.2, 3.5, 32), noseMat);
-  nose.position.y = 7.25;
-  group.add(nose);
-
-  // Fins
-  const finMat = new THREE.MeshStandardMaterial({ color: 0x3366cc, emissive: 0x0a1830, metalness: 0.7, roughness: 0.3 });
-  [-1, 1].forEach(side => {
-    [0, Math.PI / 2].forEach(rot => {
-      const fin = new THREE.Mesh(new THREE.BoxGeometry(0.2, 3, 2.5), finMat);
-      fin.position.set(side * 1.5 * Math.cos(rot), -2.5, side * 1.5 * Math.sin(rot));
-      fin.rotation.y = rot;
-      group.add(fin);
-    });
-  });
-
-  // Engine glow
-  const glow = sphere(1.0, 0xff6600, 0xff3300);
-  glow.position.y = -5;
-  glow.userData.pulse = true;
-  group.add(glow);
-
-  // Particle exhaust
-  for (let i = 0; i < 80; i++) {
-    const s = sphere(0.07 + Math.random() * 0.1, 0xff8844, 0xff4400);
-    const angle = Math.random() * Math.PI * 2;
-    const r = Math.random() * 1.2;
-    s.position.set(Math.cos(angle) * r, -5 - Math.random() * 8, Math.sin(angle) * r);
-    s.userData.vel = new THREE.Vector3((Math.random()-.5)*.04, -0.04 - Math.random() * 0.06, (Math.random()-.5)*.04);
-    s.userData.life = Math.random();
-    group.add(s);
-  }
-
-  // Orbiting atom particles (raw materials transformed)
-  ATOM_DEFS.forEach((def, i) => {
-    const angle = (i / ATOM_DEFS.length) * Math.PI * 2;
-    for (let j = 0; j < 6; j++) {
-      const s = sphere(0.15, def.color, def.emissive);
-      const r = 4 + j * 0.6;
-      s.position.set(Math.cos(angle + j * 0.4) * r, (j - 3) * 1.2, Math.sin(angle + j * 0.4) * r);
-      s.userData.orbitAngle = angle + j * 0.4;
-      s.userData.orbitR = r;
-      s.userData.orbitY = (j - 3) * 1.2;
-      s.userData.orbitSpeed = 0.004 + i * 0.001;
-      group.add(s);
-    }
-  });
-
-  document.getElementById('legend').classList.remove('visible');
-}
-
-/* Stage 5: Abstract "truth nodes" connected – full principle visualization */
-function buildStage5() {
-  clearGroup();
-
-  // Central truth node
-  const core = sphere(2.0, 0xffffff, 0x88ccff);
-  core.userData.pulse = true;
-  group.add(core);
-
-  // Inner ring of "principles"
-  const princColors = [0x4fc3f7, 0xaed581, 0xff8a65, 0xce93d8, 0xfff176, 0xff7eb3];
-  const princLabels = ['基本事实', '逻辑推导', '数学验证', '实验证明', '系统构建', '迭代优化'];
-  const princR = 7;
-  const innerNodes = princColors.map((color, i) => {
-    const angle = (i / princColors.length) * Math.PI * 2;
-    const n = sphere(0.9, color, color);
-    n.position.set(Math.cos(angle) * princR, Math.sin(i * 0.9) * 1.5, Math.sin(angle) * princR);
-    n.userData.orbitAngle = angle;
-    n.userData.orbitR = princR;
-    n.userData.orbitY = Math.sin(i * 0.9) * 1.5;
-    n.userData.orbitSpeed = 0.005;
-    group.add(n);
-    group.add(glowLine([0,0,0], [n.position.x, n.position.y, n.position.z], color));
-    return n;
-  });
-
-  // Outer ring – applications
-  const appColors = [0x29b6f6, 0x66bb6a, 0xffa726, 0xab47bc, 0xef5350, 0x26c6da];
-  const appR = 14;
-  appColors.forEach((color, i) => {
-    const angle = (i / appColors.length) * Math.PI * 2 + 0.3;
-    const n = sphere(0.55, color, color);
-    n.position.set(Math.cos(angle) * appR, (Math.random()-.5) * 4, Math.sin(angle) * appR);
-    n.userData.orbitAngle = angle;
-    n.userData.orbitR = appR;
-    n.userData.orbitY = n.position.y;
-    n.userData.orbitSpeed = 0.003;
-    group.add(n);
-
-    // Connect to nearest inner node
-    const inner = innerNodes[i % innerNodes.length];
-    group.add(glowLine([n.position.x, n.position.y, n.position.z], [inner.position.x, inner.position.y, inner.position.z], color));
-  });
-
-  // Rings
-  const gr1 = ring(5.5, 6.2, 0x3366aa, 0.2); gr1.rotation.x = Math.PI / 2; group.add(gr1);
-  const gr2 = ring(12, 13, 0x226688, 0.15); gr2.rotation.x = Math.PI / 2.5; group.add(gr2);
-
-  document.getElementById('legend').classList.remove('visible');
-}
-
-/* ══════════════════════════════════════════
-   STAGE MACHINE
-══════════════════════════════════════════ */
-let currentStage = 0;
-const card = document.getElementById('card');
-const dots = document.querySelectorAll('.dot');
-const veil = document.getElementById('veil');
-
-function goToStage(idx) {
-  if (idx < 0 || idx >= STAGES.length) return;
-  veil.classList.add('show');
-
-  setTimeout(() => {
-    currentStage = idx;
-    const s = STAGES[idx];
-    s.build();
-
-    // Update card
-    card.querySelector('.step-tag').textContent = s.tag;
-    card.querySelector('h2').textContent = s.title;
-    card.querySelector('p').innerHTML = s.body;
-
-    // Update dots
-    dots.forEach((d, i) => d.classList.toggle('active', i === idx));
-
-    // Animate camera
-    const target = s.cameraPos;
-    const start = camera.position.clone();
-    let t = 0;
-    function moveCam() {
-      t += 0.03;
-      if (t >= 1) { camera.position.set(...target); return; }
-      camera.position.lerpVectors(start, new THREE.Vector3(...target), easeInOut(t));
-      requestAnimationFrame(moveCam);
-    }
-    moveCam();
-
-    veil.classList.remove('show');
-  }, 400);
-}
-
-function easeInOut(t) { return t < 0.5 ? 2*t*t : -1+(4-2*t)*t; }
-
-document.getElementById('btn-next').addEventListener('click', () => goToStage(currentStage + 1));
-document.getElementById('btn-prev').addEventListener('click', () => goToStage(currentStage - 1));
-
-// Keyboard nav
-document.addEventListener('keydown', e => {
-  if (e.key === 'ArrowRight' || e.key === ' ') goToStage(currentStage + 1);
-  if (e.key === 'ArrowLeft') goToStage(currentStage - 1);
-});
-
-/* ══════════════════════════════════════════
-   ANIMATION LOOP
-══════════════════════════════════════════ */
-const clock = new THREE.Clock();
-
-function animate() {
-  requestAnimationFrame(animate);
-  const t = clock.getElapsedTime();
-
-  // Animate all objects in group
-  group.children.forEach(obj => {
-    // Orbit behaviour (single mesh)
-    if (obj.userData.orbitAngle !== undefined) {
-      obj.userData.orbitAngle += obj.userData.orbitSpeed || 0.003;
-      const angle = obj.userData.orbitAngle;
-      const r = obj.userData.orbitR;
-      const y = obj.userData.orbitY || 0;
-      obj.position.set(Math.cos(angle) * r, y + Math.sin(t * 0.7 + angle) * 0.3, Math.sin(angle) * r);
-    }
-
-    // Pulsing glow
-    if (obj.userData.pulse) {
-      const sc = 1 + Math.sin(t * 3) * 0.15;
-      obj.scale.setScalar(sc);
-    }
-
-    // Floating drift (box fragments stage 2)
-    if (obj.userData.drift) {
-      if (obj.position.length() < 18) {
-        obj.position.add(obj.userData.drift);
-        obj.rotation.x += obj.userData.rotVel.x;
-        obj.rotation.y += obj.userData.rotVel.y;
-      }
-    }
-
-    // Exhaust particles (stage 4)
-    if (obj.userData.vel) {
-      obj.position.add(obj.userData.vel);
-      if (obj.userData.life !== undefined) {
-        obj.userData.life -= 0.01;
-        obj.material.opacity = Math.max(0, obj.userData.life);
-        obj.material.transparent = true;
-        if (obj.userData.life <= 0) {
-          const angle = Math.random() * Math.PI * 2;
-          const r2 = Math.random() * 1.2;
-          obj.position.set(Math.cos(angle) * r2, -5 - Math.random() * 2, Math.sin(angle) * r2);
-          obj.userData.life = 1;
+  <meta name="theme-color" content="#020617" />
+  <title>cippe.ai</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            brand: '#10b981'
+          }
         }
       }
     }
+  </script>
+</head>
+<body class="bg-slate-950 text-slate-100 antialiased">
+  <header class="fixed top-0 z-50 w-full border-b border-slate-800/80 bg-slate-950/90 backdrop-blur">
+    <div class="mx-auto flex h-16 w-full max-w-6xl items-center px-5 sm:px-8">
+      <div class="h-2.5 w-2.5 rounded-full bg-emerald-500"></div>
+      <span class="ml-3 text-sm tracking-[0.22em] text-slate-200">cippe.ai</span>
+    </div>
+  </header>
+
+  <main class="mx-auto w-full max-w-6xl px-5 pb-16 pt-28 sm:px-8 sm:pt-32">
+    <section class="py-20 sm:py-28">
+      <h1 class="max-w-4xl text-4xl font-semibold leading-tight text-white sm:text-6xl">CIPPE Origin AI</h1>
+      <p class="mt-6 max-w-xl text-base text-slate-300 sm:text-lg">把整个展会装进你的眼睛</p>
+      <button class="mt-10 rounded-full border border-emerald-500/70 bg-emerald-500/10 px-8 py-3 text-sm text-emerald-300 transition hover:bg-emerald-500/20">
+        立即体验AI
+      </button>
+    </section>
+
+    <section class="py-14 sm:py-16">
+      <div class="grid gap-4 sm:grid-cols-3">
+        <article class="rounded-2xl border border-slate-800 p-6">
+          <h2 class="text-sm text-emerald-400">信息过载</h2>
+          <p class="mt-3 text-sm text-slate-300">找不到关键展商</p>
+        </article>
+        <article class="rounded-2xl border border-slate-800 p-6">
+          <h2 class="text-sm text-emerald-400">路线混乱</h2>
+          <p class="mt-3 text-sm text-slate-300">时间总被动浪费</p>
+        </article>
+        <article class="rounded-2xl border border-slate-800 p-6">
+          <h2 class="text-sm text-emerald-400">沟通割裂</h2>
+          <p class="mt-3 text-sm text-slate-300">现场决策难同步</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="py-14 sm:py-16">
+      <div class="grid gap-4 sm:grid-cols-3">
+        <article class="rounded-2xl border border-slate-800 p-6">
+          <h3 class="text-base text-white">Lite</h3>
+          <p class="mt-4 text-2xl text-emerald-400">¥199</p>
+        </article>
+        <article class="rounded-2xl border border-slate-800 p-6">
+          <h3 class="text-base text-white">Pro</h3>
+          <p class="mt-4 text-2xl text-emerald-400">¥599</p>
+        </article>
+        <article class="rounded-2xl border border-slate-800 p-6">
+          <h3 class="text-base text-white">Ultra</h3>
+          <p class="mt-4 text-2xl text-emerald-400">¥1299</p>
+        </article>
+      </div>
+      <button class="mt-8 rounded-full border border-slate-700 px-8 py-3 text-sm text-slate-200 transition hover:border-emerald-500/70 hover:text-emerald-300">
+        查看套装
+      </button>
+    </section>
+
+    <section class="py-14 sm:py-16">
+      <div class="grid gap-8 lg:grid-cols-2">
+        <div class="space-y-3">
+          <p class="text-sm text-slate-400">展位 W2206</p>
+          <p class="text-sm text-slate-400">2026.3.26-28 北京</p>
+          <p class="text-sm text-slate-400">支持PWA一键安装</p>
+        </div>
+        <div class="rounded-2xl border border-slate-800 p-5">
+          <div class="space-y-3 text-sm">
+            <div class="w-fit rounded-xl bg-slate-900 px-4 py-2 text-slate-200">今天先看哪区？</div>
+            <div class="ml-auto w-fit rounded-xl bg-emerald-500/15 px-4 py-2 text-emerald-300">优先看智能装备</div>
+            <div class="w-fit rounded-xl bg-slate-900 px-4 py-2 text-slate-200">已规划最快路线</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
 
-    // Children of groups (atom clusters)
-    if (obj.isGroup) {
-      // Cluster orbit
-      if (obj.userData.orbitAngle !== undefined) {
-        obj.userData.orbitAngle += obj.userData.orbitSpeed || 0.002;
-        const angle = obj.userData.orbitAngle;
-        const r = obj.userData.orbitR;
-        obj.position.set(Math.cos(angle) * r, obj.position.y + Math.sin(t * 0.5 + angle) * 0.01, Math.sin(angle) * r);
-      }
-      obj.children.forEach(child => {
-        if (child.userData.vel) {
-          child.position.add(child.userData.vel);
-          const d = child.position.length();
-          if (d > 3) child.userData.vel.negate();
-        }
-      });
-    }
-  });
-
-  controls.update();
-  composer.render();
-}
-
-/* ══════════════════════════════════════════
-   INIT
-══════════════════════════════════════════ */
-goToStage(0);
-animate();
-
-/* Resize */
-window.addEventListener('resize', () => {
-  const w = window.innerWidth, h = window.innerHeight;
-  camera.aspect = w / h;
-  camera.updateProjectionMatrix();
-  renderer.setSize(w, h);
-  composer.setSize(w, h);
-});
-</script>
 </body>
 </html>
