Update History
这里记录 test.html 的更新。每轮修改前都会保存上一版本，并提供对应历史 HTML。
2026-08-12 02:00:53 UTC+8UPDATE #037
新增可交互的 TEST SESSION PROGRESS 检查清单
把原先分散的测试步骤变成一个会自动记录进度的会话级检查清单，让访客真正跑完核心流程时能直接看到 0/4 到 4/4 的完成状态，而不是只阅读说明。
- 新增
RUN DIAGNOSTICS、RESIZE VIEWPORT、INSPECT VISITOR MAP 与 USE REPORT TOOL 四项会话任务。
- 使用原生
<progress> 表示任务完成度，并同时提供 0/4 文本，避免只依赖视觉颜色表达状态。
- 点击 RUN TEST、窗口宽度变化至少 40px、地图进入主要视口以及使用报告按钮时会自动完成对应任务。
- 地图查看状态使用
IntersectionObserver 异步判断可见性；不支持时保留安全的焦点回退逻辑。
- 进度只写入当前标签页的
sessionStorage，不会上传，也不会跨长期浏览会话跟踪访客；可用 RESET SESSION 随时清零。
- 新增
SESSION 快速导航入口，并适配 DARK / LIGHT、移动端和 reduced-motion。
index.html 与 test.html 继续使用完全相同的当前页面 blob。
DOWNLOAD PREVIOUS HTML
2026-08-12 01:02:07 UTC+8UPDATE #036
新增实时 ACCESSIBILITY PREFERENCES 信号面板
把浏览器通过用户偏好 Media Queries 暴露的无障碍与界面偏好变成常驻可见的诊断面板，让访客无需打开开发者工具即可确认当前系统偏好。
- 新增
REDUCED MOTION、CONTRAST、FORCED COLORS 与 SYSTEM SCHEME 四项实时信号。
- 使用
matchMedia() 读取 prefers-reduced-motion、prefers-contrast、forced-colors 和 prefers-color-scheme。
- 系统或浏览器偏好变化时自动刷新；同时提供
REFRESH SIGNALS 手动重新读取。
- 面板只读取当前浏览器状态，不会修改系统设置、不上传偏好数据，也没有新增第三方依赖。
- 状态摘要使用
role="status"，并继续适配现有 DARK / LIGHT 主题、强制配色和移动端布局。
- 快速导航新增
ACCESSIBILITY 入口；index.html 与 test.html 继续保持完全相同。
DOWNLOAD PREVIOUS HTML
2026-08-11 23:59:29 UTC+8UPDATE #035
新增本地 DIAGNOSTIC REPORT 导出工具
把页面已有的环境、性能、地图状态与诊断日志真正变成可带走的测试结果。访客现在可以在页面内预览关键状态，然后复制整份诊断报告或下载为 TXT 文件。
- 新增
DIAGNOSTIC REPORT 可见面板，实时预览网络、视口、DOM Ready、完整 Load、地图状态和测试次数。
REFRESH REPORT 会重新读取当前页面数据；COPY REPORT 会复制完整文本报告。DOWNLOAD .TXT 使用浏览器本地 Blob 与 object URL 生成文件，不需要服务器、付费依赖或第三方导出服务。- 报告同时汇总浏览器环境、Performance Timeline 结果、访客地图国家级状态和当前 diagnostics.log。
- 报告不会包含完整 IP 地址或原始经纬度；所有汇总与文件生成都只发生在当前浏览器中。
- 导出/复制完成后的反馈使用
role="status"，无需抢走键盘焦点即可向辅助技术通知结果。
- 快速导航新增
REPORT 入口，并保持现有 DARK / LIGHT、移动端与其他测试功能不变。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 23:03:23 UTC+8UPDATE #034
新增可视化 PAGE PERFORMANCE TIMELINE
把本次页面导航的真实加载过程变成常驻可见的时间线，访客现在无需打开开发者工具即可查看 DOM Ready、完整 Load、传输量与 Performance Timeline 资源数量。
- 使用浏览器
PerformanceNavigationTiming 读取当前导航的 Response、DOMContentLoaded 与 Load 时间。
- 新增横向 LOAD PHASE VISUALIZATION，用 RESPONSE、DOM READY、LOAD 三个标记直观显示加载阶段相对位置。
- 同时显示当前页面及可报告资源的传输量和 Resource Timing 条目数量；缓存或跨源限制导致字节不可见时会安全显示
N/A。
- 新增
RE-MEASURE，可在地图等异步资源继续加载后刷新资源数量与已报告传输量。
- 所有性能数据只在当前浏览器本地读取，不新增外部请求、分析 SDK 或持久化存储。
- 快速导航新增
PERFORMANCE 入口，并同步适配现有 DARK / LIGHT 主题与移动端布局。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 22:00:04 UTC+8UPDATE #033
新增浏览器与设备信息仪表板
把此前主要藏在诊断日志里的客户端环境信息变成常驻可见卡片，访客打开页面后即可直接查看浏览器愿意公开的平台与设备能力信号。
- 新增平台、逻辑处理器、近似内存、最大触控点数、浏览器语言和本地时区六项信息卡。
- 逻辑处理器使用
navigator.hardwareConcurrency；内存在浏览器支持时使用经过隐私粗化的 navigator.deviceMemory。
- 触控能力使用
navigator.maxTouchPoints；不支持的可选 API 会显示 N/A，不会阻塞页面。
- 新面板只在本地读取浏览器信号，不新增外部请求、第三方依赖或持久化存储。
- 快速导航会动态增加
DEVICE 入口，面板同时适配 DARK / LIGHT 主题和手机布局。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 21:02:03 UTC+8UPDATE #032
新增可见的键盘快捷操作面板
为越来越多的测试功能增加一套明确可见的键盘操作层。页面左下角现在有 SHORTCUTS 入口，可打开快捷键说明对话框，并直接通过组合键运行常用动作。
- 新增
Alt+Shift+R 运行诊断、Alt+Shift+M 跳到访客地图、Alt+Shift+H 打开更新历史、Alt+Shift+T 返回顶部。
- 快捷键在输入框、文本区域、选择控件和可编辑内容中不会触发，减少误操作。
- 使用原生
<dialog> 展示说明；打开后焦点进入对话框，Escape 可关闭，并提供显式关闭按钮。
- 相关操作元素通过
aria-keyshortcuts 向辅助技术公开已实现的快捷键。
- 样式支持现有 DARK / LIGHT 主题与 reduced-motion 设置，不引入第三方脚本或外部依赖。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 20:00:56 UTC+8UPDATE #031
新增明显可见的滚动进度与一键返回顶部控件
针对测试页面内容逐步增长，在页面右下角加入固定的阅读进度控件。访客滚动页面时可以实时看到当前位置，并可随时一键返回顶部。
- 右下角新增
PAGE 0–100% 浮动控件，底部进度条随页面滚动实时变化。 - 点击控件会返回页面顶部；用户启用 reduced motion 时自动取消平滑滚动动画。
- 滚动计算采用轻量的 50ms 节流，避免在高频
scroll 事件中持续修改 DOM。 - 控件最小高度超过 WCAG 2.2 的 24×24 CSS px 最小目标要求，并保留明显键盘焦点。
- 修正上一轮 SYSTEM STATUS 脚本会覆盖 Latest Update 卡的问题，状态检测功能本身保持不变。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 18:59:01 UTC+8UPDATE #030
新增实时 SYSTEM STATUS 浏览器能力面板
在响应式视口指示器与诊断终端之间加入一整块明显可见的状态面板，让访客无需阅读终端日志就能直接确认页面运行所依赖的几项核心浏览器能力。
- 实时显示 JavaScript、网络连接、本地存储和本地 SVG 世界地图资源四项状态，并使用绿/红状态点区分可用与异常。
- 新增
REFRESH STATUS 按钮，可随时重新检测；网络 online/offline 变化也会自动刷新状态。 - 状态摘要使用
role="status" 与礼貌级 live region，让动态变化可被辅助技术感知。 - 状态面板会自动适配桌面、平板与手机布局，不新增第三方依赖，也不改变现有 IP 地图和诊断逻辑。
- 快速导航会新增
STATUS 入口，Latest Update 卡也会显示本轮 UPDATE #030。 index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 18:03:29 UTC+8UPDATE #029
新增明显可见的 AUTO / DARK / LIGHT 主题切换
在页面顶部加入三段式主题控制，让访客可以即时切换深色和浅色外观；AUTO 会根据系统颜色偏好自动选择主题，同时手动选择会保存在当前浏览器中。
- 顶部新增
AUTO、DARK、LIGHT 三个主题按钮，并用 aria-pressed 表示当前选择。 - 浅色主题会同步调整页面背景、终端、地图面板、卡片与文字颜色，而不会改变诊断、访问计数或 IP 地图逻辑。
AUTO 使用浏览器的 prefers-color-scheme 结果，并在系统主题变化时自动跟随。- 手动选择使用浏览器本地存储保存，不引入第三方依赖或外部脚本。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 17:02:42 UTC+8UPDATE #028
新增实时响应式视口模式指示器
在 Test Flow 与诊断终端之间加入明显可见的 CURRENT VIEWPORT MODE 面板。拖动浏览器宽度时，MOBILE、TABLET、DESKTOP 三个区间会由 CSS Media Queries 自动切换高亮，方便直接测试响应式断点。
- 新增 MOBILE（< 640px）、TABLET（640–1023px）、DESKTOP（≥ 1024px）三个可视区间。
- 高亮完全由 CSS
@media 驱动，不增加新的 JavaScript 或外部依赖。 - 组件在窄屏下自动改为单列，避免自身引入横向滚动。
- Latest Update 卡同步更新到 UPDATE #028，并展示本轮归档文件。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 15:58:16 UTC+8UPDATE #027
新增明显可见的四步 Test Flow 快速测试指南
在首屏与诊断终端之间加入一整块高对比度 Test Flow，让第一次打开页面的访客能直接按顺序完成核心测试，而不是只看到一组分散的按钮和指标。
- 新增 Run diagnostics、Resize viewport、Inspect visitor map、Review history 四步流程。
- 流程使用有序列表表达测试顺序，并通过响应式 CSS Grid 在桌面与手机上自动重排。
- 快速导航新增
FLOW 锚点，可随时跳回测试指南。 - Latest Update 卡同步更新到 UPDATE #027，直接展示本轮变化和对应归档。
index.html 与 test.html 保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 15:04:44 UTC+8UPDATE #026
首页新增明显可见的 Latest Update 状态卡
在首屏操作区下方加入一张高对比度更新状态卡，让访客无需打开历史页就能立即看到最近一次改动、更新时间和对应的修改前归档版本。
- 新增
NEW UPDATE 状态标识和 UPDATE #026 摘要。 - 直接展示本轮时间戳与归档文件
test+20260811-150444.html。 - 提供
VIEW FULL HISTORY 入口，继续保留完整更新历史。 - 新增独立的
assets/latest-update.css，桌面端三栏布局、移动端自动堆叠，不改动现有地图与诊断 JavaScript。 index.html 与 test.html 继续保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 14:03:15 UTC+8UPDATE #025
新增悬浮快速导航栏，让长页面更容易浏览
在页面顶部新增一条明显可见的胶囊式快速导航，可直接跳到诊断终端、指标卡、访客地图和更新历史。导航使用原生 nav landmark，并保留键盘焦点样式、移动端横向滚动和 reduced-motion 兼容。
- 新增
DIAGNOSTICS、METRICS、VISITOR MAP、UPDATES 四个入口。 - 导航滚动时保持在页面顶部，减少长页面来回滚动成本。
- 为目标区块加入额外 scroll margin，避免跳转后标题被悬浮导航遮挡。
index.html 与 test.html 继续保持完全相同的当前页面内容。
DOWNLOAD PREVIOUS HTML
2026-08-11 13:15:41 UTC+8UPDATE #024
重做 IP 世界访客地图，移除 Google GeoChart 依赖
针对世界访客地图长期空白或无法显示的问题，更换整套地图渲染方式。地图轮廓现在作为仓库内的 SVG 文件随页面一起部署，不再依赖 Google Charts / gstatic；网络统计失败时地图本体仍会正常显示。
- 新增本地
assets/world.svg 世界地图底图，不需要地图 CDN 或 API Key。 - 本次访客只显示国家/地区和粗化到 5° 网格的近似标记，不保存完整 IP 或原始坐标。
- 历史国家访问量改为渐进加载：读取到一个国家就立即更新一个统计气泡，不再等待全部国家请求结束才绘图。
- 加入
RETRY MAP DATA，统计接口超时或限流后可直接重试。 - 总访问次数、诊断终端、网络状态、COPY LOG、历史版本等已有功能继续保留。
index.html 与 test.html 在同一提交中同步为完全相同的当前页面。
DOWNLOAD PREVIOUS HTML