## 角色定义与任务概述 你是一位世界顶级的前端架构师和创意开发者，专注于打造具有视觉冲击力的沉浸式网站体验。你的任务是从零开始设计并实现一个复杂、动态、视觉效果震撼的单页网站。**仅输出完整的代码实现，不进行任何解释或对话。** 代码需要达到生产级质量，可以直接部署运行。 ## 项目主题：赛博朋克2078 - 神经网络城市可视化平台 你将创建一个以"神经网络城市"为核心概念的未来主义网站，融合数据可视化、交互式3D元素、粒子系统和赛博朋克美学风格。网站展示一个虚构的2078年超级都市，包含实时数据流动、神经网络连接、智能系统监控等元素，营造出高度发达的数字文明氛围。 ## 视觉设计规范 **整体风格定位为赛博朋克与未来科技主义的结合**，采用以下视觉特征： - **色彩体系**：以霓虹粉（#ff00ff）、电光蓝（#00ffff）、激光紫（#8800ff）为主色调，辅以深空黑（#0a0a0a）和金属灰作为背景。关键UI元素使用高饱和度的渐变色和发光效果。 - **Typography**：标题使用具有科技感的无衬线字体（如Orbitron或Rajdhani），正文使用清晰易读的系统字体。所有文字应带有轻微的霓虹发光效果或投影。 - **深度感设计**：通过视差滚动、多层次背景、模糊遮罩等手法营造空间深度。界面元素应有层次分明的悬浮感。 - **glitch效果**：适当位置添加赛博朋克特色的glitch（故障艺术）效果，如文字抖动、色彩分离、信号干扰等。 - **边框与容器**：使用锐角切边、发光边框、半透明磨砂玻璃效果构建界面框架。按钮和卡片应具有悬停时的发光反馈。 ## 功能模块与技术实现要求 ### 模块一：沉浸式开场动画 页面加载时展示一个震撼的视觉引入序列。首先以全黑背景开始，随后一个发光的神经网络节点从屏幕中心向外扩散，节点之间建立连接线，形成完整的神经网络图形。随着动画推进，视角逐渐拉远，最终揭示整个城市俯瞰图。动画时长约3-4秒，包含平滑的缓动效果，最终自动过渡到主界面。 ### 模块二：三维城市概览视图 利用Three.js创建交互式3D城市俯瞰场景。城市由程序化生成的摩天大楼组成，建筑高度错落有致，表面带有LED灯光纹理。城市上空有飞行载具的粒子流，街道上有流动的光带。场景支持鼠标拖拽旋转和滚轮缩放。右上角显示实时时间（2078年格式）和城市状态指标。 ### 模块三：神经网络数据流可视化 页面中央展示一个动态的神经网络可视化区域。使用D3.js或自定义Canvas实现，展示节点之间的数据传输脉冲。脉冲沿着连线流动，节点在接收数据时会产生发光闪烁效果。可视化区域外围环绕着不断变化的数据统计数字，如"神经元活跃度"、"数据吞吐量"、"延迟指标"等。 ### 模块四：智能系统状态监控面板 设计一个专业的监控仪表板区域，包含以下组件： - **CPU/内存负载仪表**：使用SVG或Canvas绘制动态仪表盘，指针实时摆动，背景带有网格线 - **网络流量图表**：采用类似示波器的波形显示，实时更新，带有发光线条 - **服务器状态网格**：一个微型网格展示多个虚拟服务器的运行状态，正常为绿色，异常为红色 - **日志滚动窗口**：展示系统日志信息，使用等宽字体，文字带有CRT显示器的扫描线效果 ### 模块五：交互式时间线导航 设计一个横向滚动的年代时间线，从2078年回溯到关键历史节点。每个时间节点是一个可点击的胶囊状按钮，悬停时展开显示该节点的详细信息。点击节点后，3D城市视图平滑过渡到对应的历史时期建筑风格。当前选中的时间节点应有显著的霓虹边框效果。 ### 模块六：全息投影式数据卡片 创建一组悬浮的数据展示卡片，采用全息投影风格的视觉效果。卡片呈45度角倾斜放置，带有透明渐变边缘。当鼠标移动到卡片上方时，卡片会轻微浮起并增强发光效果，同时显示隐藏的详细信息。卡片内容包括：人口统计、能量消耗、网络节点分布、AI意识同步率等。 ### 模块七：搜索与命令控制台 在页面底部固定一个命令输入框，模拟未来的脑机接口。输入框支持自然语言命令（如"显示能源分布"、"切换到东城区视图"、"开始系统诊断"等）。输入时显示霓虹光标跟随，输入完成后按回车执行。命令执行时应有数据传输的视觉反馈，包括：扫描线扫过屏幕、确认音效动画、结果展示弹窗等。 ## 交互体验设计 - **页面滚动**：实现平滑的滚动行为，页面各模块在滚动时触发入场动画。背景中的粒子层应以较慢的速度独立移动，创造视差效果。 - **悬停交互**：所有可交互元素必须有视觉反馈，包括：颜色变化、发光增强、微小位移、边框高亮等。悬停时可能有短暂的粒子爆发效果。 - **转场动画**：模块之间的切换应使用平滑的淡入淡出、滑动或缩放效果。避免生硬的跳转。 - **响应式设计**：确保在桌面端（1920px+）、平板端（768px-1919px）和移动端（<768px）都有良好的展示效果。移动端应自动调整为单列布局，3D场景改为陀螺仪控制。 - **加载状态**：如果某些资源需要较长时间加载，显示一个科技风格的加载动画（如旋转的圆环或进度条）。 ## 外部CDN资源引入要求 必须通过CDN引入以下库以实现复杂效果（使用稳定版本）： - **Three.js**：用于3D城市渲染和粒子系统 - **GSAP (GreenSock)**：用于高性能动画和时间线控制 - **D3.js**：用于神经网络连接和复杂数据可视化 - **Font Awesome**：图标资源 - **Google Fonts**：引入Orbitron、Rajdhani等科技字体 - **Particles.js**：背景粒子效果 - **Tween.js**：平滑过渡动画 所有CDN链接应置于HTML文件头部，确保优先加载。 ## 代码结构与质量标准 - **HTML结构**：语义化标签，清晰的模块划分，使用`
`和`
`合理组织内容 - **CSS架构**：采用现代CSS特性（CSS Variables、Flexbox、Grid、Backdrop Filter等）。样式代码置于`