diff --git a/docs/design-authority/pages/PTY-002-readiness-review/experiments/README.md b/docs/design-authority/pages/PTY-002-readiness-review/experiments/README.md index a786511e..c84a28ee 100644 --- a/docs/design-authority/pages/PTY-002-readiness-review/experiments/README.md +++ b/docs/design-authority/pages/PTY-002-readiness-review/experiments/README.md @@ -12,9 +12,18 @@ Open `layout-experiments.html` in a browser. The selector switches between: - **C / container plus compact rule**: uses the same container model, then switches the command rail to a two-row grid when the contained canvas is narrow enough to protect labels and hit targets. +- **D / PTY-002 approved base plus container**: uses the approved PTY-002 + composition itself, with its warning frames, summary slots and command rail + geometry. The experiment only adds engine text to those authored slots; it + does not draw a second card, button frame or command icon over the master. + This isolates the base-image mismatch from the layout question. The representative captures are under `captures/`. The intended review case is `844x390` with English at 130%; `1280x720` shows how the same rules expand. +Compare D first: A-C intentionally retain the older PTY-001 clean master to +make the source of the overlap visible. D is the corrected reference for the +next Owner review: approved static geometry remains visible and dynamic copy +is aligned to the existing top, summary, warning and bottom label slots. For a local preview from the repository root: diff --git a/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-1280x720.png b/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-1280x720.png new file mode 100644 index 00000000..8dda709b Binary files /dev/null and b/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-1280x720.png differ diff --git a/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-760x360.png b/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-760x360.png new file mode 100644 index 00000000..862362e1 Binary files /dev/null and b/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-760x360.png differ diff --git a/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-844x390.png b/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-844x390.png new file mode 100644 index 00000000..49e27564 Binary files /dev/null and b/docs/design-authority/pages/PTY-002-readiness-review/experiments/captures/variant-d-844x390.png differ diff --git a/docs/design-authority/pages/PTY-002-readiness-review/experiments/layout-experiments.html b/docs/design-authority/pages/PTY-002-readiness-review/experiments/layout-experiments.html index 72427546..0cb6e777 100644 --- a/docs/design-authority/pages/PTY-002-readiness-review/experiments/layout-experiments.html +++ b/docs/design-authority/pages/PTY-002-readiness-review/experiments/layout-experiments.html @@ -15,6 +15,7 @@ main { min-height: 0; display: grid; place-items: center; padding: 16px; } .canvas { position: relative; width: min(100%, calc((100vh - 76px) * 1.7777778)); aspect-ratio: 16 / 9; overflow: hidden; container-type: size; background: #c1a472; box-shadow: 0 0 0 1px #c49e5b, 0 14px 40px #0b1519; } .master { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; } + .master.approved-master { display: none; } .overlay { position: absolute; inset: 0; font-size: clamp(8px, 1.3cqw, 16px); color: #28241e; } .top { position: absolute; left: 14%; right: 7%; top: 2.5%; height: 9%; display: flex; align-items: center; gap: 2%; padding: 0 2%; } .top .slot { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @@ -70,8 +71,38 @@ .variant-c .command-rail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); } .variant-c .command { width: auto; min-width: 0; } .variant-c .command.primary { width: auto; } + .variant-d .master:not(.approved-master) { display: none; } + .variant-d .master.approved-master { display: block; } + .variant-d .actor img { visibility: hidden; } + .variant-d .top { left: 0; right: 0; top: 0; height: 13%; display: block; padding: 0; } + .variant-d .top .slot { position: absolute; top: 25%; height: 46%; text-align: left; } + .variant-d .top .slot:nth-child(1) { left: 20%; width: 13%; } + .variant-d .top .slot:nth-child(2) { left: 40%; width: 13%; } + .variant-d .top .slot:nth-child(3) { left: 61%; width: 13%; } + .variant-d .top .slot:nth-child(4) { left: 82%; width: 13%; } + .variant-d .summary { left: 4%; width: 73%; top: 62%; height: 19%; border: 0; border-radius: 0; background: transparent; padding: 0; display: block; } + .variant-d .summary .lead { display: none; } + .variant-d .summary .facts { position: absolute; top: 17%; left: 3%; right: 3%; height: 32%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; font-size: .74em; } + .variant-d .risk-hint { display: none; } + .variant-d .warnings { right: 1%; top: 56%; width: 21%; height: 23%; gap: 0; } + .variant-d .warning { min-height: 0; height: 33.333%; padding: 0 7% 0 20%; background: transparent; border: 0; color: #514331; font-size: .66em; line-height: 1.1; } + .variant-d .command-rail { left: 0; right: 0; bottom: 0; height: 16%; display: block; } + .variant-d .command { position: absolute; top: 0; bottom: 0; min-width: 0; border: 0; border-radius: 0; background: transparent; color: #28241e; display: block; padding: 0; font-size: .78em; } + .variant-d .command:nth-child(1) { left: 19%; width: 8%; } + .variant-d .command:nth-child(2) { left: 28%; width: 9%; } + .variant-d .command:nth-child(3) { left: 40%; width: 21%; } + .variant-d .command:nth-child(4) { left: 71%; width: 10%; } + .variant-d .command.primary { background: transparent; } + .variant-d .command img { display: none; } + .variant-d .command span { position: absolute; left: 4%; right: 4%; bottom: 25%; font-size: .82em; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 560px) { .variant-c .summary { top: 58%; height: 22%; } + .variant-d .summary { top: 61%; height: 20%; } + .variant-d .summary .facts { top: 14%; left: 2%; right: 2%; height: 34%; font-size: .68em; } + .variant-d .warnings { right: 1%; top: 56%; width: 22%; height: 24%; } + .variant-d .warning { font-size: .60em; padding-left: 19%; } + .variant-d .command-rail { height: 17%; } + .variant-d .command { font-size: .68em; } .variant-c .command-rail { height: 22%; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); row-gap: 4%; } .variant-c .command.primary { grid-column: span 1; } .summary .facts { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 4%; } @@ -88,11 +119,13 @@ +
+
READY冻结
@@ -130,7 +163,7 @@ const canvas = document.getElementById('canvas'); const params = new URLSearchParams(location.search); const initial = params.get('variant'); - if (initial && ['a','b','c'].includes(initial)) select.value = initial; + if (initial && ['a','b','c','d'].includes(initial)) select.value = initial; function applyVariant() { canvas.className = `canvas variant-${select.value}`; history.replaceState(null, '', `?variant=${select.value}`);