diff --git a/docs/plans/cards-time-de-voce-ajuste-lateral-ui-design.html b/docs/plans/cards-time-de-voce-ajuste-lateral-ui-design.html index 05e0489e..c8926ba1 100644 --- a/docs/plans/cards-time-de-voce-ajuste-lateral-ui-design.html +++ b/docs/plans/cards-time-de-voce-ajuste-lateral-ui-design.html @@ -24,10 +24,20 @@ --team-blue: #0061a5; --measure: #0f766e; } - * { box-sizing: border-box; } - body { margin: 0; font-family: Arial, Helvetica, sans-serif; } - button, input { font: inherit; } - button:focus-visible, input:focus-visible, [tabindex]:focus-visible { + * { + box-sizing: border-box; + } + body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + } + button, + input { + font: inherit; + } + button:focus-visible, + input:focus-visible, + [tabindex]:focus-visible { outline: 2px solid var(--pt-red); outline-offset: 2px; } @@ -40,7 +50,8 @@ background: #cfe7f7; container-type: inline-size; } - .tcard-base, .tcard-front { + .tcard-base, + .tcard-front { position: absolute; inset: 0; z-index: 1; @@ -49,7 +60,9 @@ object-fit: cover; pointer-events: none; } - .tcard-front { z-index: 4; } + .tcard-front { + z-index: 4; + } .person { --person-x: 50%; position: absolute; @@ -102,12 +115,20 @@ overflow: hidden; } .tcard-banner.red { - top: 11.25%; width: 64.167%; height: 8.194%; - --rot: -3.5deg; background: var(--team-red); color: var(--team-yellow); + top: 11.25%; + width: 64.167%; + height: 8.194%; + --rot: -3.5deg; + background: var(--team-red); + color: var(--team-yellow); } .tcard-banner.blue { - top: 21.736%; width: 47.13%; height: 12.222%; - --rot: -4.1deg; background: var(--team-blue); color: white; + top: 21.736%; + width: 47.13%; + height: 12.222%; + --rot: -4.1deg; + background: var(--team-blue); + color: white; } .tcard-banner span { font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; @@ -147,8 +168,12 @@ height: 42.5%; border-left: 2px solid var(--measure); } - .edge-tick.left { left: 26.481%; } - .edge-tick.right { left: 81.296%; } + .edge-tick.left { + left: 26.481%; + } + .edge-tick.right { + left: 81.296%; + } .control-button { display: inline-flex; width: 44px; @@ -217,7 +242,8 @@ height: 3px; border-radius: 999px; } - .track .span::before, .track .span::after { + .track .span::before, + .track .span::after { content: ''; position: absolute; top: 50%; @@ -229,8 +255,12 @@ background: currentColor; box-shadow: 0 0 0 1px currentColor; } - .track .span::before { left: 0; } - .track .span::after { left: 100%; } + .track .span::before { + left: 0; + } + .track .span::after { + left: 100%; + } .track .center { position: absolute; top: 10px; @@ -241,26 +271,38 @@ -
+
Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
-

Gate visual · S20

+

+ Gate visual · S20 +

Card “Time de você”: o rosto alcança toda a área livre

- O enquadramento automático continua no centro. Ao arrastar, usar as setas ou o teclado, o rosto - pode chegar às duas bordas da janela da foto; o corpo pode sair dela e tocar de leve os ombros - vizinhos, sem cobrir os rostos dos candidatos. Nenhum controle novo. + O enquadramento automático continua no centro. Ao arrastar, usar as setas ou o teclado, o + rosto pode chegar às duas bordas da janela da foto; o corpo pode sair dela e tocar de leve + os ombros vizinhos, sem cobrir os rostos dos candidatos. Nenhum controle novo.

- 1280px · desktop - 390px · mobile - sem controle novo - arte oficial intocada + 1280px · desktop + 390px · mobile + sem controle novo + arte oficial intocada
@@ -270,109 +312,252 @@ Cena 1 · desktop 1280 — envelope de posições + composer pronto

- As marcações verdes ficam fora da UI final: servem apenas ao gate. Nas três prévias, escala e altura - são idênticas; muda somente a posição horizontal do visitante. + As marcações verdes ficam fora da UI final: servem apenas ao gate. Nas três prévias, + escala e altura são idênticas; muda somente a posição horizontal do visitante.

-
+
-

/cards?model=time-de-voce · viewport 1280

+

+ /cards?model=time-de-voce · viewport 1280 +

-
@@ -382,32 +567,169 @@
-

Cena 2 · mobile 390 — drawer, dois extremos

-

O drawer preserva o fluxo e todos os controles existentes. As duas miniaturas mostram os extremos da mesma prévia; a nota “Arraste para ajustar” permanece visível.

+

+ Cena 2 · mobile 390 — drawer, dois extremos +

+

+ O drawer preserva o fluxo e todos os controles existentes. As duas miniaturas mostram os + extremos da mesma prévia; a nota “Arraste para ajustar” permanece visível. +

-
+
-
-

O que muda no toque

+

+ O que muda no toque +

  • O arrasto continua igual; apenas deixa de parar cedo demais.
  • As quatro setas e o teclado chegam ao mesmo envelope.
    • @@ -420,17 +742,65 @@
    -

    Cena 3 · regra visual — documentação, não é UI nova

    +

    + Cena 3 · regra visual — documentação, não é UI nova +

    -

    Anotação do gate · não portar para a tela

    Rosto dentro da área livre; corpo pode ultrapassar

    Não é UI nova
    +
    +
    +

    + Anotação do gate · não portar para a tela +

    +

    + Rosto dentro da área livre; corpo pode ultrapassar +

    +
    + Não é UI nova +
    -
    -
    TIME DE
    MARIA
    +
    +
    + +
    +
    +
    +
    +
    + +
    TIME DE
    +
    MARIA
    +
    + +
    -

    Com rosto detectado

    A caixa do rosto é a âncora. Ela pode ocupar qualquer posição horizontal dentro da janela x=286 · y=439 · w=592 · h=577. O corpo não é recortado por essa janela e pode avançar sobre os ombros.

    -

    Sem rosto detectado

    A âncora passa a ser a silhueta visível. Vale o limite de hoje como piso: o alcance nunca fica pior e não aparece aviso, erro ou controle adicional.

    -

    Barreira da composição

    O corpo pode tocar os vizinhos; os rostos dos candidatos não podem ser cobertos. Não é liberdade até as bordas do card e não muda a arte-mestre.

    +
    +

    Com rosto detectado

    +

    + A caixa do rosto é a âncora. Ela pode ocupar qualquer posição horizontal dentro da + janela x=286 · y=439 · w=592 · h=577. O corpo + não é recortado por essa janela e pode avançar sobre os ombros. +

    +
    +
    +

    Sem rosto detectado

    +

    + A âncora passa a ser a silhueta visível. Vale o limite de hoje como piso: o + alcance nunca fica pior e não aparece aviso, erro ou controle adicional. +

    +
    +
    +

    Barreira da composição

    +

    + O corpo pode tocar os vizinhos; os rostos dos candidatos não podem ser cobertos. + Não é liberdade até as bordas do card e não muda a arte-mestre. +

    +
    @@ -438,20 +808,88 @@
    -

    Cena 4 · antes × depois — curso lateral mensurável

    -
    +

    + Cena 4 · antes × depois — curso lateral mensurável +

    +
    -

    Antes · trava artificial

    curso 248px

    A foto inteira precisava permanecer presa à janela.

    −124pxcentro+124px

    Parte do gesto era consumida pelo espaço transparente ao redor da pessoa. O visitante via a foto parar antes do ponto desejado.

    -

    Depois · rosto nas bordas

    curso ≈488px

    A posição responde à âncora do rosto, não ao canvas do recorte.

    ≈−244px · bordacentro≈+244px · borda

    O automático abre no mesmo centro de hoje. Só quem ajusta percebe a diferença: aproximadamente o dobro do curso horizontal.

    +
    +
    +

    Antes · trava artificial

    + curso 248px +
    +

    + A foto inteira precisava permanecer presa à janela. +

    +
    + +
    +
    + −124pxcentro+124px +
    +

    + Parte do gesto era consumida pelo espaço transparente ao redor da pessoa. O + visitante via a foto parar antes do ponto desejado. +

    +
    +
    +
    +

    Depois · rosto nas bordas

    + curso ≈488px +
    +

    + A posição responde à âncora do rosto, não ao canvas do recorte. +

    +
    + +
    +
    + ≈−244px · bordacentro≈+244px · borda +
    +

    + O automático abre no mesmo centro de hoje. Só quem ajusta percebe a diferença: + aproximadamente o dobro do curso horizontal. +

    +
diff --git a/docs/plans/cards-time-de-voce-ajuste-lateral.md b/docs/plans/cards-time-de-voce-ajuste-lateral.md index 95511499..0a115cdf 100644 --- a/docs/plans/cards-time-de-voce-ajuste-lateral.md +++ b/docs/plans/cards-time-de-voce-ajuste-lateral.md @@ -45,7 +45,7 @@ O enquadramento automático da S18 está certo e fica: a proporção da cabeça - **Vou apresentar dados?** Não — nenhuma métrica de produto entra nesta tela. - **Decisões desbloqueadas:** nenhuma — a medida de posição é geometria efêmera no aparelho, não vira dado de campanha. -- **Forma:** *adiada ao plano de implementação* — restrição de produto: nada de telemetria de foto/posição; a privacidade do funil fica como está. +- **Forma:** _adiada ao plano de implementação_ — restrição de produto: nada de telemetria de foto/posição; a privacidade do funil fica como está. ## Dados da decisão (literais)