docs: README 加入线上地址与界面章节,截图按新布局重拍,补 .gitignore (#1)
- README 顶部加线上地址 https://password.yangyq.net/ - 新增「界面」章节:左设置/右操作的双栏逻辑、两按钮实测 241×42 宽高差 0px - 截图全部重拍(旧图还是改动前的布局):dark/light 2400×1640、mobile 780×2490 - 新增 .gitignore,忽略 node_modules(本地跑判据的落点,43MB,之前没被忽略) 验证(不只看文字): - 截图像素级检查:深浅背景色正确、颜色多样性足够,排除白屏 - _sp_shot_verify.js 26 条:断言被截图的页面状态正确(主题/左右栏/按钮尺寸/无历史模块) - _sp_readme_check.js 10 条:README 事实性断言与产品逐条对账 - _sp_readme_render.js 9 条:最小 GFM 渲染后三张图 naturalWidth 均 > 0
This commit is contained in:
+12
@@ -0,0 +1,12 @@
|
||||
# 本地校验用的依赖(脚本在仓库外的 _tooling/,这里只是 npm install 的落点)
|
||||
node_modules/
|
||||
package-lock.json
|
||||
|
||||
# 编辑器 / 系统垃圾
|
||||
.vscode/
|
||||
.idea/
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# 临时产物
|
||||
*.log
|
||||
@@ -2,7 +2,9 @@
|
||||
|
||||
一个干净、纯本地的密码生成器。单文件 `index.html`,双击即用,也可丢到任意静态托管上。
|
||||
|
||||

|
||||
**在线使用 → https://password.yangyq.net/**
|
||||
|
||||

|
||||
|
||||
## 特点
|
||||
|
||||
@@ -17,12 +19,28 @@
|
||||
- **自定义排除** — 想避开 `@`、空格或某个符号,直接填进去。
|
||||
- **强度与熵** — 按 `长度 × log₂(字符池)` 算真实熵,分五档给出评价,同时显示字符池规模。
|
||||
- **批量候选** — 一次出 5 个,点任意一条即复制。
|
||||
- **不保留记录** — 不记历史,`localStorage` 只存偏好设置与主题,不存密码。
|
||||
|
||||
## 界面
|
||||
|
||||
设置与主操作分居左右两栏 —— 不调设置的人,视线直接落到右侧的密码和「复制密码」上。
|
||||
「复制密码」与「换一个」严格等大(实测 241×42,宽高差 0px),用渐变与实心填充区分主次。
|
||||
|
||||
浅色主题:
|
||||
|
||||

|
||||
|
||||
移动端自动转为上下单列,设置在输出之上:
|
||||
|
||||
<img src="./docs/mobile.png" alt="移动端" width="320">
|
||||
|
||||
## 使用
|
||||
|
||||
直接打开 `index.html` 即可。
|
||||
直接用浏览器打开 `index.html` 即可,无需服务器。
|
||||
|
||||
想用 http 协议(例如需要真实剪贴板权限时):
|
||||
已经部署的在线版本:<https://password.yangyq.net/>
|
||||
|
||||
想在本地用 http 协议(例如需要真实剪贴板权限时):
|
||||
|
||||
```bash
|
||||
python -m http.server 8000
|
||||
@@ -56,6 +74,7 @@ Chrome / Edge / Firefox / Safari 的近两年版本,以及移动端浏览器
|
||||
|
||||
```
|
||||
index.html 全部内容:结构、样式、脚本
|
||||
docs/ README 用的界面截图
|
||||
```
|
||||
|
||||
## 开发校验
|
||||
@@ -75,6 +94,16 @@ node _sp_visual_falsify.js # 反向注入,证明几何判据有牙齿(6
|
||||
把「按钮等大」「两栏左右」这类几何 bug 注进去根本影响不到被测判据,
|
||||
会表现成"注入后仍全绿",看着像判据没牙齿,其实是靶子选错。
|
||||
|
||||
重拍 README 截图:
|
||||
|
||||
```bash
|
||||
node _sp_shots.js # 输出到仓库 docs/:dark.png / light.png / mobile.png
|
||||
node _sp_shot_verify.js # 断言被截图的那个页面状态是对的(26 条)
|
||||
```
|
||||
|
||||
> 截图脚本与判据脚本分开,是因为判据脚本的截图(`_sp_shots` 目录)尺寸与时机跟着判据走,
|
||||
> 会带 toast、焦点框、320px 极端视口;README 需要的是干净的产品图。混在一起改判据就会把图搞脏。
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 383 KiB After Width: | Height: | Size: 380 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 411 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 318 KiB After Width: | Height: | Size: 314 KiB |
Reference in New Issue
Block a user