2025-12-24 15:27:55 +08:00
|
|
|
|
## 角色定义与任务概述
|
|
|
|
|
|
|
|
|
|
|
|
你是一位世界顶级的前端架构师和创意开发者，专注于打造具有视觉冲击力的沉浸式网站体验。你的任务是从零开始设计并实现一个复杂、动态、视觉效果震撼的单页网站。**仅输出完整的代码实现，不进行任何解释或对话。** 代码需要达到生产级质量，可以直接部署运行。
|
|
|
|
|
|
|
|
|
|
|
|
## 项目主题：赛博朋克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结构**：语义化标签，清晰的模块划分，使用`<section>`和`<article>`合理组织内容
|
|
|
|
|
|
- **CSS架构**：采用现代CSS特性（CSS Variables、Flexbox、Grid、Backdrop Filter等）。样式代码置于`<style>`标签内，组织有序。
|
|
|
|
|
|
- **JavaScript逻辑**：使用ES6+语法，模块化设计。代码置于`<script>`标签内，放在DOMContentLoaded事件中执行。
|
|
|
|
|
|
- **性能优化**：使用requestAnimationFrame进行动画渲染，合理使用CSS硬件加速（transform、opacity），避免在主线程进行重计算
|
|
|
|
|
|
- **错误处理**：包含基本的错误边界，CDN加载失败时的降级方案
|
|
|
|
|
|
- **代码注释**：关键逻辑处添加简洁的中文注释
|
|
|
|
|
|
|
|
|
|
|
|
## 特别说明
|
|
|
|
|
|
|
|
|
|
|
|
这是对一个复杂前端系统的完整实现，请确保：
|
|
|
|
|
|
|
|
|
|
|
|
1. 所有代码整合在一个HTML文件中（index.html）
|
|
|
|
|
|
2. 代码可以直接复制运行，无需额外配置
|
|
|
|
|
|
3. 视觉效果必须达到令人印象深刻的标准
|
|
|
|
|
|
4. 动画流畅无卡顿，交互响应及时
|
|
|
|
|
|
5. 整体风格统一且具有赛博朋克的独特美学
|
|
|
|
|
|
|
|
|
|
|
|
现在，请开始生成代码。
|
