返回赛题列表
薛定谔的表单
入门赛博朋克风格的 404 互动页面，包含一个"永远无法提交"的表单——测试模型的纯前端状态管理能力与表单拦截意识。
规则说明▼
phase1：要求模型根据提示词直接输出HTML文件
phase2 step1：在新的对话窗口，要求模型自行撰写PRD
phase2 step2：在同一个对话窗口，要求模型根据自己生成的PRD输出HTML文件
Prompt▼
phase1：▼
设计一个名为"赛博异乡人"的 404 互动页面。
1. **场景设定：** 一个幽暗、霓虹灯闪烁的赛博朋克风格街道（简笔画结合极简色块）。一个迷失的小角色（简笔画风格）站在一个霓虹灯招牌（写着 404）下面。
2. **核心互动（陷阱）：** 页面上有一个看起来很正规的表单，提示用户输入"丢失的文件 ID"或"坐标"。表单下面有一个醒目的提交按钮，文字是"提交申请"。
3. **关键要求（防爆）：**
* 点击提交按钮后，**绝对不能**发生表单的默认 action 提交跳转（禁止页面刷新）。
* 小角色和招牌的状态必须发生实时变化。
* 当用户输入内容并点击提交后，小角色的头部要有从困惑（？）转为绝望（X）的动画。招牌上的 404 文字要闪烁，并变成红色的"ID NOT FOUND - CANNOT LEAVE"。
* 在提交按钮下方，必须平滑地弹出一个纯前端生成的、写着刚刚用户所输内容的"申请被驳回"提示层。
4. **叙事感与细节：** 整个过程要通过 JS 状态变量和 DOM 操作在单文件内完成。每次提交（哪怕是空提交），小角色的动作和反馈文字都要不同（例如："这是第N次尝试了……（N为计数器）"）。
* 请输出完整的、闭合的、无外部依赖的单文件 HTML 代码。
phase2(2 steps)▼
phase2 step1：▼
以下是一个设计需求：
"设计一个名为'赛博异乡人'的 404 互动页面。一个幽暗、霓虹灯闪烁的赛博朋克风格街道，迷失的简笔画小角色站在 404 霓虹灯招牌下。页面上有一个表单让用户输入'丢失的文件 ID'，点击提交后绝对不能发生表单跳转，而是通过 JS 状态变量和 DOM 操作让小角色和招牌发生实时变化，弹出'申请被驳回'提示层。每次提交反馈文字都不同，带有计数器机制。整个过程在单文件内完成，无外部依赖。"
请你根据这个需求，撰写一份详细的产品需求文档（PRD），不要写代码，只输出 PRD。
phase2 step2：▼
根据你自己的 PRD 文档，请输出完整的单文件 HTML（包含内联 CSS 和 JS）。要求完美还原 PRD 中描述的所有功能与视觉设计。