应用
玻璃木屋浏览旅程
Glass cabin journey
- 实际运行录屏
- 包含占位
- 未实测
- 公开使用有限制
同一 HTML 的稳定默认封面和 Playwright 可视光标录屏：Ridge → Creek Cabin → 11 月 12 日到达/15 日离开 → 未预订摘要，13.8 秒。无木屋真实媒体；光标为录制覆盖层，非真人手动录屏。
已按减少动态效果偏好显示静态封面。
简介
用三部深色手机界面呈现木屋浏览、详情查看和入住时间选择。宽屏并列展示，平板与手机切换单屏；日历和时间编辑替换正文槽位，统一由页面纵向滚动。R1材质层级为：菜单轻毛玻璃加独立边框，主卡实色底加内阴影，编辑器深色实底加边框与分隔线。详情标题采用统一白色加独立青色小标签；详情按钮动作组在首次露出时做一次380ms入场，不循环、不因切屏或编辑重播。保留厚边设备框和现有流程。没有素材时使用明确标注的中立占位，不影响本地演示结构。
英文摘要
An original three-screen cabin journey presents browsing, selected-cabin details and date/time selection through dark phone interfaces. R1 separates lightly frosted navigation with its own border, solid main cards with inset shading, and opaque dark editors with borders and dividers. Details pairs a uniform white heading with a separate cyan label; the Details action group receives one 380ms entrance response on first exposure, without looping or replay on screen changes or edits. Wide displays show all three views; smaller displays use a screen selector. In-flow editors share the document's vertical scroll. System fonts, optional null media slots and visibly labeled placeholders allow a media-free local demo. All selection and review behavior remains local and does not create a booking.
技术、适配与难度
难度: 进阶 · 3/5
中等偏高，3/5，摘自详情的编辑判断；共享状态、可访问日历、R1 材质和动效降级未经本站实测认证。
技术栈
- HTML · 语言 · 必需
原生语义结构；单文件 index.html。
- CSS · 样式 · 必需
内嵌响应式 CSS，系统字体，无外部框架。
- JavaScript · 语言 · 必需
内存共享状态、日历、时间编辑、动效偏好；无后端或持久化。
设计适配范围
按视口适配 · 桌面 / 平板 / 手机
设计最小宽度：320px
- 768px · 单屏设备常规 380×780px；更窄时宽度取 380px 与视口减 40px 的较小值。
- 1304px · 仅当扣除内边距和滚动条后容纳 1240px 设备组时三屏并列，否则单屏。
文档为唯一纵向滚动容器，放大内容允许设备增高。200% 字日历、其他浏览器及实际屏幕阅读器未验收；适配要求并非完整认证。
能力标签
- 独立 HTML
- 原生前端
- 多屏状态
- 无障碍日历
- 玻璃效果与动效
- 响应式 CSS
- 无障碍控件
适用工具说明
通用提示词
能力标签描述实现需求；未据此确认任何特定 AI 工具、模型或版本的兼容性。
适合谁
- 学习多视图共享状态与响应式屏幕切换
- 练习可访问日历和时间编辑
- 研究 R1 菜单、主卡、编辑器三类材质与动效降级
不适合谁
- 真实房源可售、订单、付款或时区业务
- 把示例价格与日期当成真实预订条件
- 没有后端的正式住宿交易产品
前置条件
- 能本地打开独立 index.html
- 能核验共享状态、日期边界、键盘与响应式行为
- 添加可选媒体时记录实际来源和适用条件
资源条件
两张木屋静图及一个舞台装饰视频为可选 null 输入；默认系统字体和 CSS，不请求外部资源。本站 MP4 是界面操作预览，不是舞台运行媒体。
Ridge Cabin 静图
图片可选待补- 作用范围
- cabin_photography
- 输入条件与格式
- 默认 null；仅接受用户明确提供的本地文件或内嵌图像，记录来源条件；选中木屋图片复用于详情和日期。
- 回退方案: 占位
- 显示 Design placeholder。
- 缺失影响
- 缺少真实木屋场景质感，不阻塞选择演示。
Creek Cabin 静图
图片可选待补- 作用范围
- cabin_photography
- 输入条件与格式
- 默认 null；仅接受用户明确提供的本地文件或内嵌图像，记录来源条件；选中木屋图片复用于详情和日期。
- 回退方案: 占位
- 显示 Design placeholder。
- 缺失影响
- 缺少真实木屋场景质感，不阻塞选择演示。
可选舞台装饰视频
视频可选待补- 作用范围
- decorative_stage
- 输入条件与格式
- 默认 null；仅明确提供本地媒体时启用静音内联循环，处理失败和减少动态，记录使用条件。
- 回退方案: 静态颜色
- 保留静态舞台；暂停或减少动态时不播放装饰媒体。
- 缺失影响
- 不提供视频时少一层背景动态，不阻塞演示。
默认演示行为
Browse 选择共享至 Details/Dates；Menu、Choose dates、Change cabin 为本地操作。日期空初值，固定 2026 年 11 月；先到达后离开，倒序到达会清空离开日。默认时间 14:00/12:00；Review 只显示 Demo selection only — nothing is booked，无订单、总额、付款或真实可售判断。
UNSPECIFIED 边界
- 真实木屋静图与舞台视频及使用条件
- 真实房源库存和物业时区
- 价格、税费、取消政策
- 订单、支付与真实外部去向
正文
使用方法
复制英文执行正文，生成内嵌 HTML/CSS/JavaScript 的 index.html。默认不需要木屋图片、视频、外部字体或库；两张静图和舞台视频槽均为 null。
本地演示流程
浏览木屋后共享到详情与日期屏。日期初值为空，固定从 2026 年 11 月开月；离开日须晚于到达日，时间默认 14:00 到达、12:00 离开。Review 仅产生未预订的本地摘要，示例价格不用于总额、订单或付款。
当前预览与 R1
R1 区分轻毛玻璃菜单、实色内阴影主卡和深色实底编辑器；标题为统一白色配青色小标签，详情动作组仅首次露出反馈一次。封面为同一 HTML 完成入场后的验收默认截图；视频从默认三屏选择 Creek Cabin、11 月 12 日到达、15 日离开并显示摘要。Playwright 可视光标仅注入录制上下文。历史稿的未生成状态已由成品报告补充；本站验证状态仍为未测试。
公开使用条件
公开使用有限制
有限制公开：可展示当前学习演示包并完整复制英文正文，须遵守所列使用条件。来源条件 UNKNOWN 保留；本次确认不构成法律清权或全面功能认证。
审核范围: 当前 YY-007 v2-independent 英文执行正文、双语详情、资源及使用条件，同一独立 HTML 成品的静态封面与 Playwright 操作视频；仅为学习演示公开包。
- 正文允许个人商用、允许修改、不允许再分发、不要求署名；第三方资源条件不由此政策代替。
- 原资源、依赖与保留设计参数的来源条件仍为 UNKNOWN；未使用原媒体，不宣称已清权、本站原创或获得原来源授权。
- 木屋、价格、容量、日期和时间均为本地演示；保留 Design demo、Design placeholder 和未产生预订说明。不得暗示真实可售库存、物业时区、订单或付款；主观 ≥90% 目标未测量。
- 封面和 MP4 来自同一运行 HTML；视频由 Playwright 驱动，光标只在录制上下文注入。不得称真人手动录屏、全面实测通过或主观质量目标已经达标。
正文使用与修改范围
正文允许个人商用、允许修改、不允许再分发、不要求署名；第三方资源条件不由此政策代替。原资源、依赖与保留设计参数的来源条件仍为 UNKNOWN；未使用原媒体，不宣称已清权、本站原创或获得原来源授权。公开包须保持演示及占位说明；第三方实际素材按各自适用条件核验。
预期结果
一个本地三屏木屋界面：宽屏并列、窄屏选择单屏，共享木屋/日期/时间，正常流编辑器与单层文档滚动，输出无预订的摘要；缺媒体保留明确占位。
常见失败
- 并列设备宽度未扣除内边距和滚动条导致溢出
- 隐藏屏仍可被键盘聚焦
- 日期用 UTC 解析引起跨日或闰月错误
- 无效离开日被静默交换
- 编辑后共享状态丢失或一次入场反复播放
- 把本地摘要描述成成功预订
版本与实测范围
编号: YY-007 · 素材版本 / 修订: v2-independent · R1
未实测
- 本脚本仅创建内容与媒体证据，不运行功能实测；上游生成和录制报告不自动提升本站 verification。
- 未提供真实木屋静图或舞台视频；无真实库存、订单、付款或物业时区。
- 可选媒体失败路径及原生不支持 backdrop-filter 的另一浏览器未实测。
- 上游只检查 Browse 的 320px/200% 字体及普通字 320px 日历；200% 日历、屏幕阅读器语音、跨浏览器和主观 ≥90% 目标未验证。
更新日期: 2026年10月12日
关联资源
暂无可显示的关联资源。你仍可阅读正文和参考来源。