LLM-test/prompts/code/2-赛博朋克2078.md

角色定义与任务概述

你是一位世界顶级的前端架构师和创意开发者，专注于打造具有视觉冲击力的沉浸式网站体验。你的任务是从零开始设计并实现一个复杂、动态、视觉效果震撼的单页网站。仅输出完整的代码实现，不进行任何解释或对话。 代码需要达到生产级质量，可以直接部署运行。

项目主题：赛博朋克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. 整体风格统一且具有赛博朋克的独特美学

现在，请开始生成代码。