blyzer/dtf-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rebuild the Site product page around a buy box
All checks were successful
Build and deploy / Validate source (push) Successful in 10s
Details
Build and deploy / Integration suite on a real stack (push) Successful in 2m46s
Details
Build and deploy / Secret scan and release gate (push) Successful in 6s
Details
Build and deploy / Publish images (push) Successful in 1m46s
Details

Browse Source 
Artworks on the left; on the right a box that stays in view with the live
sheet, the grade, the price per metre, the metres charged, the total, the
resolution note and "Adicionar ao carrinho". The separate quality and
preview panels, the second sheet preview, the per-row mini sheets, the
summary box and the repeated findings list are gone: each piece of
information now appears once.

Each artwork row carries at most one hint (resolution first, otherwise a
width that saves film), the ready-sheet/loose-artwork choice is a toggle
beside the title, the upload area is one bar and the tips are collapsed.
The box only shows the item the page already priced, so it always matches
the cart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
2026-09-24 18:02:45 -03:00
parent b81ff8d03d
commit cbbbdb351a
6 changed files with 230 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
web/site-v2.css
View File

@@ -93,28 +93,98 @@ section+section{border-top:0}
.passos a.feito span{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
.passos i{width:48px;height:2px;background:#E0E0E0}
/* Montagem: artworks on the left, the live sheet fixed on the right. */
.voltar{height:40px;padding:0 14px;border-radius:8px;border:1px solid #D6D6D6;font-size:14px;margin-bottom:16px}
/* Product page (Montagem): artworks on the left; on the right a buy box that
stays in view with the live sheet, the grade, the price, the total and the
add-to-cart button. The old quality and preview panels are not shown: their
parts live in the buy box, and the rest repeated it (the findings list too:
each row already says what was checked). */
#qual,#prev,#rA,.qb2,#qitens{display:none!important}
.voltar{height:auto;padding:0;border:0;background:none;box-shadow:none;font-size:14px;font-weight:500;color:var(--fraco);margin:24px 0 14px}
.voltar:hover{color:var(--laranja-escuro)}
.focoGrid{grid-template-columns:minmax(0,1fr);gap:20px}
.foco2{grid-template-columns:minmax(0,1fr) 440px;gap:28px}
.mont{top:var(--topo-passos,128px)}
.req{position:static;padding:22px 24px}
.req .reqcab br{display:none}
@media(max-width:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
.cat,.cat.file{border:1px solid var(--linha);border-width:1px;border-radius:16px}
.cabfoco,.cat.file .cabfoco{background:#fff}
.cabfoco h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
.cabfoco .pr2{font-size:15px;font-weight:700;color:var(--texto2)}
.zona{border:2px dashed #F2B25A;background:var(--aviso-fundo);border-radius:var(--raio)}
.zona .ico{background:var(--laranja);color:var(--preto)}
.zona:hover,.zona.drag{border-color:var(--laranja2)}
.cat,.cat.file{border:0;background:transparent;box-shadow:none;overflow:visible}
.cabfoco,.cat.file .cabfoco{padding:0 0 20px!important;background:transparent;border:0;display:grid;
grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t e" "s e" "p e";column-gap:24px;align-items:end}
.cabfoco>div:first-child{grid-area:t;display:flex;flex-direction:column-reverse;gap:4px}
.cabfoco .lg{font-size:12px;color:#707070;letter-spacing:.05em}
.cabfoco h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cabfoco p{grid-area:s;margin-top:6px;font-size:15px;color:var(--texto2)}
.cabfoco .pr2{grid-area:p;margin-top:4px;font-size:14px;font-weight:600;color:var(--fraco);white-space:normal}
.tipoEnvio{grid-area:e;margin:0}
.tipoEnvio:not([hidden]){display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:#EFEFEF}
.tipoEnvio .cam,.tipoEnvio .cam.on{border:0;box-shadow:none;background:transparent;padding:0 14px;min-height:40px;border-radius:8px;align-items:center}
.tipoEnvio .cam.on{background:#fff;box-shadow:0 1px 2px rgba(3,6,11,.14)}
.tipoEnvio .cam .mk2,.tipoEnvio .cam span,.tipoEnvio .cam em{display:none}
.tipoEnvio .cam b{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap}
.tipoEnvio .cam.on b{font-weight:800}
.tipoEnvio .cam:disabled{cursor:default}
.tipoEnvio .cam:disabled:not(.on){opacity:.5}
.cat .in{padding:0!important}
.foco2{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
.fila{display:flex;flex-direction:column;gap:12px}
.fila>*{margin:0}
.cam{border-radius:var(--raio2)}
.cam.on{border-color:var(--laranja);background:var(--aviso-fundo)}
#larguraFolhaPronta{display:inline}
.mont{border-radius:var(--raio)}
.req{border-radius:var(--raio)}
.qual,.prev{border-radius:16px;border-color:var(--linha)}
.qb.chama,.pb.p{background:var(--laranja);color:var(--preto);border-color:var(--laranja);font-family:"Inter",sans-serif;font-weight:800;border-radius:var(--raio2)}
.zona{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:center;text-align:left;padding:16px 20px;margin:0;border:2px dashed #F2B25A;background:var(--aviso-fundo);border-radius:var(--raio)}
.zona .ico{grid-row:1/4;width:44px;height:44px;line-height:44px;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);box-shadow:none}
.zona b{font-size:15px;margin:0}
.zona span{max-width:none;margin:0;font-size:13px;color:var(--fraco)}
.zona .bt{display:none}
.zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none}
#lista{display:flex;flex-direction:column;gap:10px}
#lista:empty{display:none}
.art{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
.art.nova{background:#fff;box-shadow:0 0 0 2px rgba(255,168,26,.45)}
.art .l1 b{font-size:15px;font-weight:700}
.art label{font-size:12px}
.art input{height:42px;font-size:15px;font-weight:600;border-radius:8px}
.art .cps{grid-template-columns:repeat(2,minmax(0,160px))}
.rep{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
.calc{font-size:13px;margin-top:8px}
.dica{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border:0;border-radius:8px;background:var(--verde-fundo);font-size:13px;color:#14532D}
.dica.av{background:var(--aviso-fundo);color:#5A3A00}
.dica button{display:inline-flex;width:auto;margin:0 0 0 auto;flex:none;height:34px;align-items:center;padding:0 12px;border-radius:7px;border:1px solid var(--verde);background:#fff;color:var(--verde);box-shadow:none;font-size:13px}
.dica button:hover{background:var(--verde);color:#fff;box-shadow:none}
.req{position:static;padding:16px 20px 6px;border-radius:12px;box-shadow:none}
.reqcab{font-size:15px;margin-bottom:6px}
/* The buy box */
.mont{position:sticky;top:var(--topo-passos,128px);padding:20px;border-radius:16px;background:#fff;box-shadow:none;display:flex;flex-direction:column;gap:12px}
.mont>*{margin:0}
.montcab b{font-size:17px;font-weight:800}
.montpe{font-size:12px;text-align:center}
.compra{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid #EFEFEF}
.compra .aoVivo{margin:0}
.compra .aoVivo.pronto{display:none}
#compraVals{display:flex;flex-direction:column;gap:10px;font-size:15px}
#compraVals[hidden]{display:none}
.cNota{display:flex;align-items:center;gap:12px}
.cNota span,.cLin>span:first-child{color:var(--texto2)}
.cNota>i{flex:1;height:6px;border-radius:999px;background:#EFEFEF;overflow:hidden}
.cNota>i i{display:block;height:100%;border-radius:999px;background:#C9CCD1}
.cNota>i i.ok{background:var(--verde)}.cNota>i i.av{background:var(--laranja)}.cNota>i i.er{background:var(--vermelho)}
.cNota b{font-family:"Inter",sans-serif;font-weight:800}
.cLin{display:flex;align-items:baseline;gap:8px}
.cLin>span:last-child,.cLin>b{margin-left:auto;display:flex;gap:8px;align-items:baseline}
.cLin s{font-size:13px;color:#707070}
.cObs{margin:-4px 0 0;font-size:13px;color:var(--verde)}
.cObs:empty{display:none}
.cTot{display:flex;align-items:baseline;padding-top:12px;border-top:1px solid #EFEFEF}
.cTot span{font-family:"Inter",sans-serif;font-weight:700}
.cTot b{margin-left:auto;font-family:"Inter",sans-serif;font-size:30px;font-weight:900;letter-spacing:-.01em}
#qmsg{font-size:13px;line-height:1.45}
.compra .ciente{margin:0;padding:12px 14px}
.compra .ciente h4{font-size:13.5px}
.compra .ciente p,.compra .ciente .lista{font-size:13px}
.cAdd{height:54px;border-radius:var(--raio2);border:0;background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;cursor:pointer}
.cAdd:hover:not(:disabled){background:#FFB53D}
.cAdd:disabled{background:#EDEDED;color:#8A8D92;cursor:not-allowed}
.cPe{margin:0;font-size:13px;color:var(--fraco);text-align:center}
@media(max-width:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
@media(max-width:620px){.montcab b{font-size:15px}
.cabfoco,.cat.file .cabfoco{grid-template-columns:1fr;grid-template-areas:"t" "s" "p" "e"}
.tipoEnvio:not([hidden]){display:grid;grid-template-columns:1fr 1fr;margin-top:14px}}
/* The quality, preview, cart and checkout panels sit directly in #envio,
outside .w; they share the page column so nothing runs edge to edge. */