feat: rebuild the Site product page around a buy box
All checks were successful
Build and deploy / Validate source (push) Successful in 10s
Build and deploy / Integration suite on a real stack (push) Successful in 2m46s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m46s
All checks were successful
Build and deploy / Validate source (push) Successful in 10s
Build and deploy / Integration suite on a real stack (push) Successful in 2m46s
Build and deploy / Secret scan and release gate (push) Successful in 6s
Build and deploy / Publish images (push) Successful in 1m46s
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
181
web/index.html
181
web/index.html
@@ -748,7 +748,7 @@ footer a:hover{color:var(--laranja2)}
|
||||
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:#5A6570}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/site-v2.css?v=4">
|
||||
<link rel="stylesheet" href="/site-v2.css?v=5">
|
||||
<script src="/site-pages.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
@@ -924,33 +924,33 @@ footer a:hover{color:var(--laranja2)}
|
||||
|
||||
<!-- painel focado -->
|
||||
<div class="foco" id="foco">
|
||||
<button class="voltar" id="bVoltar"><span>‹</span>Trocar de produto</button>
|
||||
<button class="voltar" id="bVoltar"><span>‹</span>Todos os produtos</button>
|
||||
<div class="focoGrid">
|
||||
<div class="cat" id="catFoco">
|
||||
<div class="cabfoco" style="padding:20px 22px 14px;margin:0">
|
||||
<div><h3 id="fTit">—</h3><span class="lg" id="fLg" style="display:block"></span></div>
|
||||
<span class="pr2" id="fPreco"></span>
|
||||
<p id="fSub"></p>
|
||||
</div>
|
||||
<div class="in" style="padding:0 22px 22px">
|
||||
<div class="foco2" id="foco2">
|
||||
<div class="fila">
|
||||
<div class="trocouCam" id="trocouCam" style="display:none"></div>
|
||||
<div class="caminhos" id="tipoEnvio" hidden>
|
||||
<div class="caminhos tipoEnvio" id="tipoEnvio" hidden>
|
||||
<button type="button" class="cam on" data-tipo="folha">
|
||||
<span class="mk2"></span>
|
||||
<div><b>Já é uma folha montada</b>
|
||||
<div><b>Folha já montada</b>
|
||||
<span>a imagem ocupa a largura inteira do filme de
|
||||
<span id="larguraFolhaPronta">57</span> cm</span>
|
||||
<em id="tipoFolhaPreco">—</em></div>
|
||||
</button>
|
||||
<button type="button" class="cam" data-tipo="avulsa">
|
||||
<span class="mk2"></span>
|
||||
<div><b>São artes separadas</b>
|
||||
<div><b>Artes separadas</b>
|
||||
<span>você informa a largura de cada uma e nós montamos a folha</span>
|
||||
<em id="tipoAvulsaPreco">—</em></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="in" style="padding:0 22px 22px">
|
||||
<div class="foco2" id="foco2">
|
||||
<div class="fila">
|
||||
<div class="trocouCam" id="trocouCam" style="display:none"></div>
|
||||
<div class="trocouCam" id="avisoTipo" style="display:none"></div>
|
||||
<div class="caminhos" id="caminhos">
|
||||
<button class="cam on" data-cam="auto">
|
||||
@@ -976,7 +976,71 @@ footer a:hover{color:var(--laranja2)}
|
||||
<div id="lista"></div>
|
||||
<div class="resumoA" id="rA" style="display:none"></div>
|
||||
<input type="file" id="inp" hidden>
|
||||
<div class="aoVivo" id="aoVivo"></div>
|
||||
<aside class="req" id="req">
|
||||
<h3 class="reqcab">Dicas sobre a arte</h3>
|
||||
|
||||
<details>
|
||||
<summary>Como pagar o menor metro</summary>
|
||||
<ul>
|
||||
<li class="s"><b>300 DPI no tamanho que vai imprimir.</b> É a nota máxima
|
||||
e o menor preço da tabela</li>
|
||||
<li class="s"><b>O tamanho manda mais que o arquivo.</b> A mesma arte passa
|
||||
em 20 cm e não passa em 40. Reduzir um pouco costuma pular uma faixa
|
||||
de preço inteira</li>
|
||||
<li class="s"><b>Larguras parecidas rendem mais.</b> Se as suas artes têm
|
||||
medidas próximas, cabem mais por fileira e a folha encolhe</li>
|
||||
</ul>
|
||||
<p class="obs2">Resolução é a única coisa que mexe no preço — porque é a
|
||||
única que a gente não consegue melhorar por você.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>O que arrumamos sem cobrar</summary>
|
||||
<ul>
|
||||
<li class="s"><b>Artes coladas.</b> Separamos com 5 mm, sem você refazer nada</li>
|
||||
<li class="s"><b>Encaixe mal aproveitado.</b> Remanejamos e a sua folha
|
||||
encolhe — você paga menos metro do que enviou</li>
|
||||
<li class="s"><b>Peça passando da largura.</b> Remanejamos em vez de cortar</li>
|
||||
<li class="s"><b>Margem.</b> Não precisa deixar. Só respeitar a largura do filme</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manda em PNG e sai na hora</summary>
|
||||
<ul>
|
||||
<li class="s"><b>PNG ou JPG</b> com fundo transparente entram direto, sem passar
|
||||
por ninguém, e não têm limite de comprimento. Só que a gente lê a resolução
|
||||
<b>do arquivo</b>: se a arte foi ampliada antes de exportar, isso não aparece
|
||||
para nós — e sai serrilhado no filme do mesmo jeito</li>
|
||||
<li class="s"><b>PDF é o que conferimos melhor.</b> Nele medimos a resolução de
|
||||
cada imagem dentro da folha, uma por uma. Se a sua arte é boa, é onde a nota
|
||||
aparece com mais precisão</li>
|
||||
<li class="a"><b>PDF grande.</b> Sem UserUnit, a página passa do limite de 508 cm
|
||||
do formato; divida a folha ou mande PNG. Envie um PDF de uma página por folha.</li>
|
||||
<li class="a"><b>TIFF, PSD, AI e CDR</b> a gente aceita, mas ninguém consegue
|
||||
conferir sozinho: alguém abre na mão, sai mais devagar e o metro vai pela
|
||||
tabela, sem desconto de nota</li>
|
||||
<li class="a">Em <b>artes avulsas</b> só PNG e JPG: a montagem precisa
|
||||
enxergar a sua arte para encaixar pela forma</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>O que só você resolve</summary>
|
||||
<ul>
|
||||
<li class="n"><b>Fundo branco ou colorido.</b> Precisa ser transparente de
|
||||
verdade — branco parecendo transparente sai branco no filme</li>
|
||||
<li class="n"><b>Pontinho de recorte.</b> A impressora enxerga qualquer
|
||||
resíduo e imprime. Não existe pequeno demais</li>
|
||||
<li class="n"><b>Cópias sobrepostas.</b> Duas iguais com 1 mm de diferença
|
||||
saem duplicadas</li>
|
||||
<li class="n"><b>Menos de 96 DPI.</b> Abaixo disso não imprimimos: sai
|
||||
serrilhado a ponto de não valer o filme</li>
|
||||
<li class="n"><b>Degradê de transparência</b>, comum em arte de IA. O branco
|
||||
por baixo sai irregular e sai assim mesmo</li>
|
||||
</ul>
|
||||
</details>
|
||||
</aside>
|
||||
</div>
|
||||
<aside class="mont" id="mont">
|
||||
<div class="montcab"><b id="montcabTit">Montagem ao vivo</b>
|
||||
@@ -986,79 +1050,32 @@ footer a:hover{color:var(--laranja2)}
|
||||
<span id="vMt">—</span></div>
|
||||
<div id="vArea"></div>
|
||||
<div id="vUso"></div>
|
||||
<p class="montpe">Prévia aproximada. No servidor o encaixe é refeito do zero —
|
||||
o resultado sai igual ou melhor, nunca pior.</p>
|
||||
<p class="montpe">Prévia. O encaixe final é refeito no servidor e nunca sai pior.</p>
|
||||
<div class="compra" id="compra">
|
||||
<div class="aoVivo" id="aoVivo"></div>
|
||||
<div id="compraVals" hidden>
|
||||
<div class="cNota"><span>Nota da arte</span><i><i id="cNotaBar"></i></i><b id="cNota">—</b></div>
|
||||
<div class="cLin"><span>Preço do metro</span><span><s id="cTabela"></s><b id="cMetro">—</b></span></div>
|
||||
<div class="cLin"><span>Metragem cobrada</span><b id="cMetragem">—</b></div>
|
||||
<p class="cObs" id="cObs"></p>
|
||||
<div class="cTot"><span>Total</span><b id="cTotal">—</b></div>
|
||||
<div id="qmsg" style="display:none"></div>
|
||||
<div class="ciente" id="ciente">
|
||||
<h4 id="cienteTit">Ressalva de resolução</h4>
|
||||
<div id="cienteTxt"></div>
|
||||
<label><input type="checkbox" id="cienteOk">
|
||||
<span>Li e entendi. Quero imprimir assim mesmo.</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="cAdd" id="bAdd" disabled>Adicionar ao carrinho</button>
|
||||
<p class="cPe">Revisão de 5 pontos e reencaixe grátis</p>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="req" id="req">
|
||||
<h3 class="reqcab">O que devo saber<br>sobre a arte</h3>
|
||||
|
||||
<details open>
|
||||
<summary>Como pagar o menor metro</summary>
|
||||
<ul>
|
||||
<li class="s"><b>300 DPI no tamanho que vai imprimir.</b> É a nota máxima
|
||||
e o menor preço da tabela</li>
|
||||
<li class="s"><b>O tamanho manda mais que o arquivo.</b> A mesma arte passa
|
||||
em 20 cm e não passa em 40. Reduzir um pouco costuma pular uma faixa
|
||||
de preço inteira</li>
|
||||
<li class="s"><b>Larguras parecidas rendem mais.</b> Se as suas artes têm
|
||||
medidas próximas, cabem mais por fileira e a folha encolhe</li>
|
||||
</ul>
|
||||
<p class="obs2">Resolução é a única coisa que mexe no preço — porque é a
|
||||
única que a gente não consegue melhorar por você.</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>O que arrumamos sem cobrar</summary>
|
||||
<ul>
|
||||
<li class="s"><b>Artes coladas.</b> Separamos com 5 mm, sem você refazer nada</li>
|
||||
<li class="s"><b>Encaixe mal aproveitado.</b> Remanejamos e a sua folha
|
||||
encolhe — você paga menos metro do que enviou</li>
|
||||
<li class="s"><b>Peça passando da largura.</b> Remanejamos em vez de cortar</li>
|
||||
<li class="s"><b>Margem.</b> Não precisa deixar. Só respeitar a largura do filme</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manda em PNG e sai na hora</summary>
|
||||
<ul>
|
||||
<li class="s"><b>PNG ou JPG</b> com fundo transparente entram direto, sem passar
|
||||
por ninguém, e não têm limite de comprimento. Só que a gente lê a resolução
|
||||
<b>do arquivo</b>: se a arte foi ampliada antes de exportar, isso não aparece
|
||||
para nós — e sai serrilhado no filme do mesmo jeito</li>
|
||||
<li class="s"><b>PDF é o que conferimos melhor.</b> Nele medimos a resolução de
|
||||
cada imagem dentro da folha, uma por uma. Se a sua arte é boa, é onde a nota
|
||||
aparece com mais precisão</li>
|
||||
<li class="a"><b>PDF grande.</b> Sem UserUnit, a página passa do limite de 508 cm
|
||||
do formato; divida a folha ou mande PNG. Envie um PDF de uma página por folha.</li>
|
||||
<li class="a"><b>TIFF, PSD, AI e CDR</b> a gente aceita, mas ninguém consegue
|
||||
conferir sozinho: alguém abre na mão, sai mais devagar e o metro vai pela
|
||||
tabela, sem desconto de nota</li>
|
||||
<li class="a">Em <b>artes avulsas</b> só PNG e JPG: a montagem precisa
|
||||
enxergar a sua arte para encaixar pela forma</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>O que só você resolve</summary>
|
||||
<ul>
|
||||
<li class="n"><b>Fundo branco ou colorido.</b> Precisa ser transparente de
|
||||
verdade — branco parecendo transparente sai branco no filme</li>
|
||||
<li class="n"><b>Pontinho de recorte.</b> A impressora enxerga qualquer
|
||||
resíduo e imprime. Não existe pequeno demais</li>
|
||||
<li class="n"><b>Cópias sobrepostas.</b> Duas iguais com 1 mm de diferença
|
||||
saem duplicadas</li>
|
||||
<li class="n"><b>Menos de 96 DPI.</b> Abaixo disso não imprimimos: sai
|
||||
serrilhado a ponto de não valer o filme</li>
|
||||
<li class="n"><b>Degradê de transparência</b>, comum em arte de IA. O branco
|
||||
por baixo sai irregular e sai assim mesmo</li>
|
||||
</ul>
|
||||
</details>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1072,16 +1089,9 @@ footer a:hover{color:var(--laranja2)}
|
||||
</div>
|
||||
<div class="qbar"><i id="qbi" style="width:0%"></i></div>
|
||||
<div class="qitens" id="qitens"></div>
|
||||
<div class="ciente" id="ciente">
|
||||
<h4 id="cienteTit">Ressalva de resolução</h4>
|
||||
<div id="cienteTxt"></div>
|
||||
<label><input type="checkbox" id="cienteOk">
|
||||
<span>Li e entendi. Quero imprimir assim mesmo.</span></label>
|
||||
</div>
|
||||
<div class="qbts">
|
||||
<button class="qb chama" id="qOk">Seguir para o pedido</button>
|
||||
</div>
|
||||
<div id="qmsg" style="margin-top:12px;font-size:12.5px;display:none"></div>
|
||||
</div>
|
||||
|
||||
<!-- prévia da montagem -->
|
||||
@@ -1279,6 +1289,7 @@ footer a:hover{color:var(--laranja2)}
|
||||
<script src="/site-packing.js"></script>
|
||||
<script src="/site-cart.js"></script>
|
||||
<script src="/site-flow.js"></script>
|
||||
<script src="/site-compra.js"></script>
|
||||
<script src="/privacy.js"></script>
|
||||
<script src="/upload.js"></script>
|
||||
<script src="/checkout.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user