网页时间倒流器

做一个单文件 HTML 作品：**网页时间倒流器（DOM Time Machine）**。 页面是一个普通的表单 / 控制台——有输入框、滑块、复选框、按钮等。用户可以正常操作。 但右上角有一根**红色的"时间倒流"摇杆**：当你按住它，整个页面所有的 DOM 状态（你刚输入的文字、刚拖动的滑块、刚勾选的复选框、刚出现的提示框、甚至你的鼠标轨迹）都会**倒放**回几秒前——文字一个一个被吞回去，滑块自己滑回原位，复选框自动取消勾选，鼠标光标按你刚才走过的路径反向画回去。 把网页变成一段可以倒带的录像。 可以使用外部 CDN 资源，直接输出完整可运行的单文件 HTML。

做一个单文件 HTML 作品：**网页时间倒流器（DOM Time Machine）**。 要求如下： ```` ### 页面布局 页面是一个**虚构产品的设置面板 / 控制台界面**——你可以自定义这个产品（比如"咖啡机控制面板"、"潜艇驾驶舱"、"宠物 AI 配置器"，由你设计），但必须包含至少： - 3 个文本输入框（含 placeholder） - 2 个滑块（不同范围） - 4 个复选框（不同的小功能开关） - 2 个单选按钮组 - 1 个下拉选择 - 2 个按钮（点击会触发某种页面变化，例如弹出 toast、改变背景色、切换深浅色等） 页面的**右上角**放置一根明显的、**红色的、像汽车手刹**的"时间倒流"摇杆。 ### 操作规则 - 用户在页面上正常交互——输入文字、拖滑块、勾选复选框、点按钮——所有操作都被**记录到一个时间线**里 - 用户**按住摇杆**时，时间开始**倒流**：所有这些操作按相反顺序、相反方向**逆向播放** - 松开摇杆，时间停止在当前位置；继续按住摇杆继续倒流；按摇杆的"反向"键则可以"快进回当前" ### 倒流时必须正确还原的状态 - **文字输入**：一个字一个字被"吞回去"（不能瞬间清空） - **滑块**：从最新位置缓慢滑回历史位置 - **复选框 / 单选**：自动取消勾选 / 切换回上一个选项 - **下拉选择**：自动切换回历史选项 - **按钮触发的副作用**：如果按钮曾经弹出过 toast / 改变了背景色 / 加了一个新元素，倒流时这些副作用都要被"撤销" - **鼠标光标自身的轨迹**：倒流时，**屏幕上自己绘制一条从当前位置回退到历史位置的鼠标光标**（不是真实劫持系统鼠标，而是在页面上画一个虚拟光标按历史轨迹走回来） ### 视觉与 UX - 倒流过程中应有明显的视觉指示：屏幕加上 VHS 录像带式的轻微噪点、扫描线、暗角、画面色调偏冷 - 摇杆的物理感要足——按下去有阻尼、松开有回弹、按住时摇杆本身在轻微震动 - 时间线最好可视化为一个**时间轴 / 事件列表**显示在屏幕角落，让用户看到自己的操作历史 - 历史最长保留 **30 秒**或最近 **100 个操作**（取你认为合适的容量） ### 技术约束 - 输出一个完整的单文件 HTML，所有自己写的 CSS 和 JS 内联 - 可以使用 CDN 引入动效库（GSAP / Anime.js） - 推荐使用**命令模式（Command Pattern）**或**事件溯源（Event Sourcing）**记录每个操作，倒流时按反向序列重放 - 简体中文界面 ````