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

feat: redesign the Montagem page, with thumbnails, check chips and a DPI price scale
All checks were successful
Build and deploy / Validate source (push) Successful in 6s
Details
Build and deploy / Integration suite on a real stack (push) Successful in 2m31s
Details
Build and deploy / Secret scan and release gate (push) Successful in 6s
Details
Build and deploy / Publish images (push) Successful in 1m0s
Details

Browse Source 
The product page is rebuilt around mockup 1. The two ways to send are
cards under the title; the PNG/CDR route choice is gone (it never changed
the price, and the picker now takes every allowed format). Each file card
has a thumbnail, its size, check chips with a plain sentence for any
problem, a "Ver detalhes da conferência" link and a copies stepper; a CDR
file says "Conferência manual · preço cheio" and asks for the length. The
buy box shows the price scale in DPI with the customer's step, the metre
and 10 cm length, the total and what the resolution saved, and "Sai em N
partes" only above 20 m. Folha já montada gets "Ampliar" instead of zoom.
Pricing, grade and checks are unchanged.

Fixes on top: the card thumbnail is a small image made once, not the full
preview re-parsed on every repaint; sizes from 1 GB up read in GB; a failed
upload is shown with "Tentar de novo" instead of retrying silently on every
cart change. The browser suites wait for the product and the reloaded page
instead of racing them, and the artwork suite delays imagemDaArte, which
the packing now uses, fixing the CI failure of f4aacb5.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
2026-09-29 16:36:41 -03:00
parent f4aacb5776
commit 8dddf0fa25
13 changed files with 335 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tests/artwork_browser_test.mjs
View File

@@ -115,7 +115,7 @@ try{
await call('Runtime.enable');await call('Page.enable'); await call('Runtime.enable');await call('Page.enable');
await call('Emulation.setDeviceMetricsOverride',{width:1440,height:1100,deviceScaleFactor:1,mobile:false}); await call('Emulation.setDeviceMetricsOverride',{width:1440,height:1100,deviceScaleFactor:1,mobile:false});
await call('Page.navigate',{url:`http://127.0.0.1:${server.address().port}/`}); await call('Page.navigate',{url:`http://127.0.0.1:${server.address().port}/`});
await waitFor(()=>evaluate(`typeof sel==='function' && typeof AUTO!=='undefined'`),'Site scripts'); await waitFor(()=>evaluate(`typeof sel==='function' && typeof pintaEntrega==='function'`),'Site scripts');
// Observe the actual engine, without replacing its placement or rendering. // Observe the actual engine, without replacing its placement or rendering.
await evaluate(`(()=>{ await evaluate(`(()=>{
const original=encaixar; const original=encaixar;
@@ -149,6 +149,9 @@ try{
// Navigation links must reach the chooser, never preselect a product. // Navigation links must reach the chooser, never preselect a product.
assert.equal(await evaluate(`document.querySelectorAll('[data-modo-cta]').length`),0); assert.equal(await evaluate(`document.querySelectorAll('[data-modo-cta]').length`),0);
await click('[data-modo="file"]'); await click('[data-modo="file"]');
// Opening a product paints on the next frame; on a busy runner the check
// must wait for it rather than race it.
await waitFor(()=>evaluate(`!$('tipoEnvio').hidden`),'by-metre product open');
// By-metre opens declaring a mounted sheet; switching is explicit and priced. // By-metre opens declaring a mounted sheet; switching is explicit and priced.
assert.deepEqual(await evaluate(`({shown:!$('tipoEnvio').hidden, assert.deepEqual(await evaluate(`({shown:!$('tipoEnvio').hidden,
on:[...document.querySelectorAll('#tipoEnvio .cam.on')].map(b=>b.dataset.tipo)})`), on:[...document.querySelectorAll('#tipoEnvio .cam.on')].map(b=>b.dataset.tipo)})`),
@@ -293,13 +296,14 @@ try{
await fill('[data-cm]',10);await fill('[data-q]',4);await packed(4); await fill('[data-cm]',10);await fill('[data-q]',4);await packed(4);
} }
// An older image load must not overwrite a newer edit, even before debounce. // An older image load must not overwrite a newer edit, even before debounce.
await evaluate(`(()=>{window.realLoad=carregarImagem;window.delayed=[]; // The packing loads each artwork's image through imagemDaArte.
carregarImagem=f=>new Promise(resolve=>delayed.push(()=>realLoad(f).then(resolve))); await evaluate(`(()=>{window.realLoad=imagemDaArte;window.delayed=[];
imagemDaArte=a=>new Promise(resolve=>delayed.push(()=>realLoad(a).then(resolve)));
})()`); })()`);
await fill('[data-q]',5); await fill('[data-q]',5);
await waitFor(()=>evaluate('delayed.length===1'),'delayed preview'); await waitFor(()=>evaluate('delayed.length===1'),'delayed preview');
await fill('[data-q]',7); await fill('[data-q]',7);
await evaluate(`carregarImagem=realLoad;delayed[0]()`); await evaluate(`imagemDaArte=realLoad;delayed[0]()`);
await packed(7); await packed(7);
const timeoutCleanup=await evaluate(`(async()=>{ const timeoutCleanup=await evaluate(`(async()=>{
const realLoader=carregarPdfJs, realTimer=setTimeout, realWorker=temWorker; const realLoader=carregarPdfJs, realTimer=setTimeout, realWorker=temWorker;

3
tests/browser_test.mjs
View File

@@ -62,12 +62,13 @@ try{
await site.call('Page.setBypassCSP',{enabled:false}); await site.call('Page.setBypassCSP',{enabled:false});
await site.call('Page.reload'); await site.call('Page.reload');
await waitFor(()=>site.eval('typeof window.dtfCheckout === "function"'),'reload after security probe'); await waitFor(()=>site.eval('typeof window.dtfCheckout === "function"'),'reload after security probe');
// The check above can still pass on the page being replaced; wait for the new one's cards.
await waitFor(()=>site.eval(`!!document.querySelector('[data-modo="file"]') && document.readyState==='complete'`),'product cards after reload');
await site.click('[data-modo="file"]'); await site.click('[data-modo="file"]');
// Each product has its own page; the home's parts are not on it. // Each product has its own page; the home's parts are not on it.
assert.deepEqual(await site.eval(`({path:location.pathname,page:document.documentElement.dataset.rota, assert.deepEqual(await site.eval(`({path:location.pathname,page:document.documentElement.dataset.rota,
cards:getComputedStyle($('cards')).display,cart:getComputedStyle($('carr')).display})`), cards:getComputedStyle($('cards')).display,cart:getComputedStyle($('carr')).display})`),
{path:'/arquivo-por-metro',page:'produto',cards:'none',cart:'none'}); {path:'/arquivo-por-metro',page:'produto',cards:'none',cart:'none'});
await site.click('[data-cam="tabela"]');
const root=await site.call('DOM.getDocument'); const root=await site.call('DOM.getDocument');
const input=await site.call('DOM.querySelector',{nodeId:root.root.nodeId,selector:'#inp'}); const input=await site.call('DOM.querySelector',{nodeId:root.root.nodeId,selector:'#inp'});
await site.call('DOM.setFileInputFiles',{nodeId:input.nodeId,files:[resolve('tests/fixtures/local-test.cdr')]}); await site.call('DOM.setFileInputFiles',{nodeId:input.nodeId,files:[resolve('tests/fixtures/local-test.cdr')]});

33
web/checkout.js
View File

@@ -112,12 +112,21 @@
return window.dtfUpload(file,{api,scope:session.cart_scope,progress:()=>{}, return window.dtfUpload(file,{api,scope:session.cart_scope,progress:()=>{},
onBytes:n=>{e.sent=n;pintaEnvio();}}); onBytes:n=>{e.sent=n;pintaEnvio();}});
})(); })();
e.promise.then(()=>{e.done=true;pintaEnvio();}, e.promise.then(()=>{e.done=true;falhas.delete(k);pintaEnvio();},
error=>{e.failed=error;envios.delete(k);pintaEnvio();}); error=>{envios.delete(k);falhas.set(k,{file,error});pintaEnvio();});
envios.set(k,e); envios.set(k,e);
} }
return e.promise; return e.promise;
} }
// A failed upload is shown and waits for the customer, never retried behind
// their back: a file the check refused would fail again on every change.
const falhas=new Map();
function tentaDeNovo() {
const arquivos=[...falhas.values()].map(f=>f.file);
falhas.clear();
arquivos.forEach(f=>enviar(f).catch(()=>{}));
pintaEnvio();
}
const arquivosDoCarrinho=()=>[...pedido,...(busy&&itemAtual?[itemAtual]:[])].flatMap(it=>it.localFiles||[]); const arquivosDoCarrinho=()=>[...pedido,...(busy&&itemAtual?[itemAtual]:[])].flatMap(it=>it.localFiles||[]);
const gb=n=>(n/1073741824).toLocaleString('pt-BR',{maximumFractionDigits:1})+' GB'; const gb=n=>(n/1073741824).toLocaleString('pt-BR',{maximumFractionDigits:1})+' GB';
const mb=n=>n>=1073741824 ? gb(n) : Math.round(n/1048576)+' MB'; const mb=n=>n>=1073741824 ? gb(n) : Math.round(n/1048576)+' MB';
@@ -149,6 +158,20 @@
function pintaEnvio() { function pintaEnvio() {
const e=estadoEnvio(), texto=textoEnvio(e); const e=estadoEnvio(), texto=textoEnvio(e);
const el=document.getElementById('envioArq'); const el=document.getElementById('envioArq');
const falhou=arquivosDoCarrinho().map(f=>falhas.get(chaveArquivo(f))).filter(Boolean);
const topo=document.getElementById('cartEnvio');
if (falhou.length) {
if (el) {
el.replaceChildren(document.createTextNode('Não foi possível enviar '+falhou[0].file.name+': '+
(falhou[0].error?.message||'erro no envio').replace(/\.$/,'')+(falhou.length>1?' (e mais '+(falhou.length-1)+')':'')+'. '));
const b=document.createElement('button'); b.type='button'; b.className='envioDeNovo'; b.textContent='Tentar de novo';
b.onclick=tentaDeNovo; el.append(b);
el.classList.remove('ok'); el.classList.add('erro');
}
if (topo) topo.textContent='· falha no envio';
return;
}
if (el) el.classList.remove('erro');
if (el) { if (el) {
el.replaceChildren(); el.replaceChildren();
if (e && e.fase!=='pronto') { if (e && e.fase!=='pronto') {
@@ -160,7 +183,6 @@
el.classList.toggle('ok', e?.fase==='pronto'); el.classList.toggle('ok', e?.fase==='pronto');
} }
// Visible on every page while it runs. // Visible on every page while it runs.
const topo=document.getElementById('cartEnvio');
if (topo) topo.textContent = !e || e.fase==='pronto' ? '' : e.fase==='verificando' ? '· verificando' : '· enviando '+e.pct+'%'; if (topo) topo.textContent = !e || e.fase==='pronto' ? '' : e.fase==='verificando' ? '· verificando' : '· enviando '+e.pct+'%';
if (busy && texto) { if (busy && texto) {
message(texto); message(texto);
@@ -173,7 +195,10 @@
if (e && e.fase==='enviando') { event.preventDefault(); event.returnValue=''; } if (e && e.fase==='enviando') { event.preventDefault(); event.returnValue=''; }
}); });
// Only what is in the cart: the item on the product page may still change. // Only what is in the cart: the item on the product page may still change.
window.addEventListener('dtf-cart-changed',()=>{ arquivosDoCarrinho().forEach(f=>{ enviar(f).catch(()=>{}); }); pintaEnvio(); }); window.addEventListener('dtf-cart-changed',()=>{
arquivosDoCarrinho().forEach(f=>{ if(!falhas.has(chaveArquivo(f))) enviar(f).catch(()=>{}); });
pintaEnvio();
});
async function upload(file) { async function upload(file) {
return enviar(file); return enviar(file);
} }

88
web/index.html
View File

@@ -234,8 +234,6 @@ h1 em{font-style:normal;color:var(--laranja)}
font-family:"Inter",sans-serif;font-weight:700} font-family:"Inter",sans-serif;font-weight:700}
/* upload */ /* upload */
/* o cliente escolhe o caminho antes de subir · a declaração orienta,
mas quem decide o preço é o arquivo que chegar */
.caminhos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px} .caminhos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
@media(max-width:620px){.caminhos{grid-template-columns:1fr}} @media(max-width:620px){.caminhos{grid-template-columns:1fr}}
.caminhos>*{min-width:0} .caminhos>*{min-width:0}
@@ -254,7 +252,6 @@ h1 em{font-style:normal;color:var(--laranja)}
.cam span{display:block;font-size:10.5px;color:var(--fraco);line-height:1.45} .cam span{display:block;font-size:10.5px;color:var(--fraco);line-height:1.45}
.cam em{display:block;margin-top:6px;font-style:normal;font-family:"Inter",sans-serif; .cam em{display:block;margin-top:6px;font-style:normal;font-family:"Inter",sans-serif;
font-weight:700;font-size:12px;color:var(--verde-ml);line-height:1.3} font-weight:700;font-size:12px;color:var(--verde-ml);line-height:1.3}
.cam em.cheio{color:var(--vermelho)}
.trocouCam{margin-top:-4px;margin-bottom:11px;padding:10px 12px;border-radius:9px; .trocouCam{margin-top:-4px;margin-bottom:11px;padding:10px 12px;border-radius:9px;
background:#FFF6E8;border:1px solid #F0D9AE;font-size:11.5px;color:#7A5A16;line-height:1.5} background:#FFF6E8;border:1px solid #F0D9AE;font-size:11.5px;color:#7A5A16;line-height:1.5}
.trocouCam b{color:#B07A18;font-family:"Inter",sans-serif;font-weight:700} .trocouCam b{color:#B07A18;font-family:"Inter",sans-serif;font-weight:700}
@@ -301,12 +298,6 @@ h1 em{font-style:normal;color:var(--laranja)}
/* repetição do FILE */ /* repetição do FILE */
.rep{background:var(--cinza);border-radius:9px;padding:12px 14px;margin-top:8px} .rep{background:var(--cinza);border-radius:9px;padding:12px 14px;margin-top:8px}
.somaF{margin-top:10px;padding:11px 13px;border-radius:9px;background:#F1FBF5;
border:1px solid #BFE6CE;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.somaF span{font-size:11.5px;color:#2A6B45}
.somaF b{font-family:"Inter",sans-serif;font-weight:700;font-size:15px;color:#1F5C3A;
margin-left:auto}
.somaF em{flex-basis:100%;font-style:normal;font-size:10.5px;color:#4A7A5E}
.rep .l1{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px} .rep .l1{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}
.rep .l1 b{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rep .l1 b{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep .l1 button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:15px;flex:none} .rep .l1 button{border:0;background:none;color:var(--fraco);cursor:pointer;font-size:15px;flex:none}
@@ -317,33 +308,10 @@ h1 em{font-style:normal;color:var(--laranja)}
.progF{margin:9px 0 4px;padding:9px 11px;border-radius:7px;background:#FFF6E8; .progF{margin:9px 0 4px;padding:9px 11px;border-radius:7px;background:#FFF6E8;
border:1px solid #F0D9AE;font-size:11px;color:#7A5A16;line-height:1.5} border:1px solid #F0D9AE;font-size:11px;color:#7A5A16;line-height:1.5}
.progF b{font-family:"Inter",sans-serif;font-weight:700;color:#B07A18} .progF b{font-family:"Inter",sans-serif;font-weight:700;color:#B07A18}
.rep .cps{display:grid;grid-template-columns:120px 1fr;gap:10px;align-items:end}
.rep label{display:block;font-size:10px;color:var(--fraco);margin-bottom:3px} .rep label{display:block;font-size:10px;color:var(--fraco);margin-bottom:3px}
.rep input{width:100%;padding:7px 9px;border:1px solid var(--linha);border-radius:6px; .rep input{width:100%;padding:7px 9px;border:1px solid var(--linha);border-radius:6px;
font-family:inherit;font-size:13px;background:#fff;color:var(--tx)} font-family:inherit;font-size:13px;background:#fff;color:var(--tx)}
.rep input:focus{outline:none;border-color:var(--laranja)} .rep input:focus{outline:none;border-color:var(--laranja)}
.rep .conta{font-size:11.5px;color:var(--fraco);line-height:1.4}
.rep .conta b{color:var(--tx);font-family:"Inter",sans-serif}
.med{background:#fff;border:1px solid var(--linha);border-radius:8px;padding:10px 12px;margin-top:9px}
.med b{display:block;font-family:"Inter",sans-serif;font-size:15px;font-weight:700;color:var(--tx)}
.med span{display:block;font-size:11px;color:var(--fraco);margin-top:2px}
.med em{display:block;font-style:normal;font-size:11.5px;color:#B07A18;margin-top:7px;line-height:1.45}
.med.alerta{border-color:#E8A796;background:#FFF3F0}
.med.alerta b{color:#8C3B22}
.med.alerta em{color:#8C3B22}
.med.pede{border-color:var(--laranja);background:#FFFAF2}
.med.pede b{font-size:12.5px;color:#B07A18}
.conf{margin-top:9px;padding:9px 11px;border-radius:7px;background:#F1FBF5;
border:1px solid #BFE6CE;line-height:1.5}
.conf b{display:block;font-family:"Inter",sans-serif;font-size:11.5px;color:#1F5C3A;
margin-bottom:3px}
.conf span{display:block;font-size:10.5px;color:#2A6B45}
.med .troca{margin-top:9px;padding:9px 11px;border-radius:7px;background:#F1FBF5;
border:1px solid #BFE6CE;font-size:11.5px;color:#1F5C3A;line-height:1.5}
.med .troca b{display:inline;font-size:11.5px;color:#1F5C3A;font-weight:700}
.med input{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--linha);
border-radius:6px;font-family:inherit;font-size:13px;background:#fff;color:var(--tx)}
.med input:focus{outline:none;border-color:var(--laranja)}
/* fila de artes ao lado da montagem */ /* fila de artes ao lado da montagem */
.foco2{display:grid;grid-template-columns:minmax(340px,1fr) 320px;gap:20px; .foco2{display:grid;grid-template-columns:minmax(340px,1fr) 320px;gap:20px;
@@ -929,55 +897,39 @@ footer a:hover{color:var(--laranja2)}
<div class="cat" id="catFoco"> <div class="cat" id="catFoco">
<div class="cabfoco" style="padding:20px 22px 14px;margin:0"> <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> <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 class="caminhos tipoEnvio" id="tipoEnvio" hidden> <div class="caminhos tipoEnvio" id="tipoEnvio" hidden>
<button type="button" class="cam on" data-tipo="folha"> <button type="button" class="cam on" data-tipo="folha">
<span class="mk2"></span> <span class="mk2"></span>
<div><b>Folha já montada</b> <div><b>Folha já montada</b><em id="tipoFolhaPreco">—</em>
<span>a imagem ocupa a largura inteira do filme de <span>Você manda a folha pronta, com
<span id="larguraFolhaPronta">57</span> cm</span> <span id="larguraFolhaPronta">57</span> cm de largura</span></div>
<em id="tipoFolhaPreco">—</em></div>
</button> </button>
<button type="button" class="cam" data-tipo="avulsa"> <button type="button" class="cam" data-tipo="avulsa">
<span class="mk2"></span> <span class="mk2"></span>
<div><b>Artes separadas</b> <div><b>Artes separadas</b><em id="tipoAvulsaPreco">—</em>
<span>você informa a largura de cada uma e nós montamos a folha</span> <span>Você manda cada arte e nós montamos a folha</span></div>
<em id="tipoAvulsaPreco">—</em></div>
</button> </button>
</div> </div>
</div> </div>
<div class="in" style="padding:0 22px 22px"> <div class="in" style="padding:0 22px 22px">
<div class="foco2" id="foco2"> <div class="foco2" id="foco2">
<div class="fila"> <div class="fila">
<div class="trocouCam" id="trocouCam" style="display:none"></div>
<div class="trocouCam" id="avisoTipo" style="display:none"></div> <div class="trocouCam" id="avisoTipo" style="display:none"></div>
<div class="caminhos" id="caminhos"> <div class="recusa" id="recusa" style="display:none"></div>
<button class="cam on" data-cam="auto"> <div id="lista"></div>
<span class="mk2"></span>
<div><b>PNG, JPG ou PDF</b>
<span>Conferimos sozinhos e a nota desconta no metro</span>
<em id="camA">—</em></div>
</button>
<button class="cam" data-cam="tabela">
<span class="mk2"></span>
<div><b>CDR, AI, PSD ou TIFF</b>
<span>Ninguém consegue conferir · alguém abre na mão</span>
<em id="camB" class="cheio">—</em></div>
</button>
</div>
<div class="zona" id="zona" tabindex="0" role="button"> <div class="zona" id="zona" tabindex="0" role="button">
<div class="ico">↑</div> <div class="ico">↑</div>
<b id="zTit">Arraste aqui</b><span id="zSub"></span> <b id="zTit">Arraste aqui</b><span id="zSub"></span>
<span id="zLimite">Até 5 GB por arquivo.</span> <span id="zLimite">Até 5 GB por arquivo.</span>
<span class="bt">ou escolher no computador</span> <span class="bt">ou escolher no computador</span>
<span class="zOutra"><b id="zOutra">Adicionar outra folha</b> ou arraste aqui</span>
<span class="zManual" id="zManual">Tem <b>CDR, AI, PSD ou TIFF</b>? Pode mandar também.
Alguém abre na mão e o metro sai pelo preço cheio.</span>
</div> </div>
<div class="recusa" id="recusa" style="display:none"></div>
<div id="lista"></div>
<div class="resumoA" id="rA" style="display:none"></div> <div class="resumoA" id="rA" style="display:none"></div>
<input type="file" id="inp" hidden> <input type="file" id="inp" hidden>
<aside class="req" id="req"> <aside class="req" id="req">
<h3 class="reqcab">Dicas sobre a arte</h3> <h3 class="reqcab">Dúvidas:</h3>
<details> <details>
<summary>Como pagar o menor metro</summary> <summary>Como pagar o menor metro</summary>
@@ -1047,17 +999,22 @@ footer a:hover{color:var(--laranja2)}
<div class="zoomB"><button id="zMenos" title="Diminuir">−</button> <div class="zoomB"><button id="zMenos" title="Diminuir">−</button>
<span id="zTxt">100%</span> <span id="zTxt">100%</span>
<button id="zMais" title="Aumentar">+</button></div> <button id="zMais" title="Aumentar">+</button></div>
<button type="button" class="ampliar" id="bAmpliar" hidden>Ampliar</button>
<span id="vMt">—</span></div> <span id="vMt">—</span></div>
<div id="vArea"></div> <div id="vArea"></div>
<div id="vUso"></div> <div id="vUso"></div>
<div class="compra" id="compra"> <div class="compra" id="compra">
<div class="aoVivo" id="aoVivo"></div> <div class="aoVivo" id="aoVivo"></div>
<div id="compraVals" hidden> <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="cEscada">
<div class="cLin"><span>Preço do metro</span><span><s id="cTabela"></s><b id="cMetro">—</b></span></div> <span>Preço do metro pela resolução</span>
<div class="cLin"><span>Metragem cobrada</span><b id="cMetragem">—</b></div> <ol id="cEscada"></ol>
</div>
<div class="cLin"><span id="cMetroLbl">Metro</span><b id="cMetro">—</b></div>
<div class="cLin"><span>Metragem <small>(a cada 10 cm)</small></span><b id="cMetragem">—</b></div>
<p class="cObs" id="cObs"></p> <p class="cObs" id="cObs"></p>
<div class="cTot"><span>Total</span><b id="cTotal">—</b></div> <div class="cTot"><span>Total</span><b id="cTotal">—</b></div>
<p class="cEco" id="cEco"></p>
<div id="qmsg" style="display:none"></div> <div id="qmsg" style="display:none"></div>
<div class="ciente" id="ciente"> <div class="ciente" id="ciente">
<h4 id="cienteTit">Ressalva de resolução</h4> <h4 id="cienteTit">Ressalva de resolução</h4>
@@ -1067,10 +1024,15 @@ footer a:hover{color:var(--laranja2)}
</div> </div>
</div> </div>
<button type="button" class="cAdd" id="bAdd" disabled>Adicionar ao carrinho</button> <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> <p class="cPe">Revisamos e reencaixamos antes de imprimir, sem custo.<span id="cPartes"></span></p>
</div> </div>
</aside> </aside>
<dialog class="ampliaDlg" id="ampliaDlg" aria-labelledby="ampliaTit">
<div class="ampliaCab"><b id="ampliaTit">Sua folha</b>
<button type="button" id="ampliaFecha" aria-label="Fechar">×</button></div>
<div id="ampliaArea"></div>
</dialog>
</div> </div>
</div> </div>
</div> </div>

2
web/site-cart.js
View File

@@ -120,7 +120,7 @@ function carrinho(){
previa(); previa();
if(nota<90){ if(nota<90){
const piso=pisoEscada(), ganho=(base-piso)*cob; const piso=pisoEscada(), ganho=(base-piso)*cob;
if(ganho>0.5) qm('<b>Dá para chegar ao melhor preço.</b> Corrigindo os pontos e chegando a 90, '+ if(ganho>0.5) qm('<b>Dá para pagar menos.</b> Com a arte em 300 DPI, '+
'o metro cai para '+rs(piso)+' — são '+rs(ganho)+' a menos neste pedido.','var(--verde)'); 'o metro cai para '+rs(piso)+' — são '+rs(ganho)+' a menos neste pedido.','var(--verde)');
} }
} }

23
web/site-compra.js
View File

@@ -1,4 +1,4 @@
/* Site DTF — the product page's buy box: grade, price per metre, billed length, /* Site DTF — the product page's buy box: price ladder, price per metre, billed length,
total and the add-to-cart button, beside the live sheet. It shows the item total and the add-to-cart button, beside the live sheet. It shows the item
the other site-*.js files already priced (itemAtual) and never computes a the other site-*.js files already priced (itemAtual) and never computes a
price of its own, so the box and the cart always agree. */ price of its own, so the box and the cart always agree. */
@@ -10,18 +10,29 @@
add.disabled=!it || !itemPodeEnviar(it); add.disabled=!it || !itemPodeEnviar(it);
if(!it) return; if(!it) return;
const semNota=!it.nota; const semNota=!it.nota;
$('cNota').textContent = semNota ? 'sem nota' : it.nota; // The price ladder in resolution: nota = DPI ÷ 3, so 90 is 270 DPI.
$('cNotaBar').style.width=(semNota?0:it.nota)+'%'; const faixas=FAIXAS[it.modo], ativa=faixas.findIndex(([min])=>it.nota>=min);
$('cNotaBar').className = semNota ? '' : it.nota>=85 ? 'ok' : it.nota>=50 ? 'av' : 'er'; $('cEscada').innerHTML=faixas.map(([min,v],i)=>
$('cTabela').textContent = TABELA[it.modo]-it.unit>0.001 ? rs(TABELA[it.modo]) : ''; '<li'+(i===ativa?' class="on" aria-current="true"':'')+'><span>'+
(min? min*3+'+'+(i? '' : ' DPI') : semNota? 'cheio' : 'menos')+'</span>'+
'<b>'+rs(v).slice(3)+'</b></li>').join('');
const analisadas=ehFolha(it.modo) && folhas.length && folhas.every(x=>x.an);
$('cMetroLbl').textContent = semNota ? 'Metro · preço cheio'
: analisadas && folhas.every(x=>x.an.vetor) ? 'Metro · arte vetorial'
: analisadas ? 'Metro · '+Math.min(...folhas.map(x=>x.an.dpi))+' DPI'
: 'Metro';
$('cMetro').textContent=rs(it.unit); $('cMetro').textContent=rs(it.unit);
$('cMetragem').textContent=fmtM(it.cob)+' m'; $('cMetragem').textContent=fmtM(it.cob)+' m';
const economia=(TABELA[it.modo]-it.unit)*it.cob;
$('cEco').textContent = economia>0.005 ? rs(economia)+' a menos pela resolução da arte' : '';
const partes=ehFolha(it.modo) ? Math.ceil(it.metros/20) : 1;
$('cPartes').textContent = partes>1 ? ' Sai em '+partes+' partes de até 20 m.' : '';
const sobraCm=Math.round((it.cob-it.metros)*100); const sobraCm=Math.round((it.cob-it.metros)*100);
$('cObs').textContent = $('cObs').textContent =
it.cob===MINIMO_M && it.metros<MINIMO_M it.cob===MINIMO_M && it.metros<MINIMO_M
? (ehFolha(it.modo) ? 'Pedido mínimo de 1 m.' ? (ehFolha(it.modo) ? 'Pedido mínimo de 1 m.'
: 'Pedido mínimo de 1 m: ainda cabem '+sobraCm+' cm de artes sem custo.') : 'Pedido mínimo de 1 m: ainda cabem '+sobraCm+' cm de artes sem custo.')
: sobraCm>0 ? fmtM(it.metros)+' m de folha, arredondado a cada 10 cm.' : ''; : '';
$('cTotal').textContent=rs(it.total); $('cTotal').textContent=rs(it.total);
} }
add.addEventListener('click',()=>adicionaAoCarrinho()); add.addEventListener('click',()=>adicionaAoCarrinho());

26
web/site-config.js
View File

@@ -5,28 +5,19 @@
const $=id=>document.getElementById(id); const $=id=>document.getElementById(id);
const rs=v=>'R$ '+v.toFixed(2).replace('.',','); const rs=v=>'R$ '+v.toFixed(2).replace('.',',');
const fmt=b=>b<1048576?(b/1024).toFixed(0)+' KB':(b/1048576).toFixed(1).replace('.',',')+' MB'; const fmt=b=>b<1048576?(b/1024).toFixed(0)+' KB'
:b<1073741824?(b/1048576).toFixed(1).replace('.',',')+' MB':(b/1073741824).toFixed(1).replace('.',',')+' GB';
// ── modos // ── modos
const MODOS={ const MODOS={
file: {tit:'Arquivo por metro', lg:'DTF têxtil · 57 cm', larg:57, file: {tit:'Arquivo por metro', lg:'DTF têxtil · 57 cm', larg:57, multi:true, folha:true,
preco:'R$ 14,90 a R$ 19,90 /m conforme a nota', multi:true, folha:true, zt:'Arraste sua folha montada aqui', zs:'PNG, JPG ou PDF · 57 cm de largura'},
sub:'Sua folha montada. Revisamos, corrigimos e reencaixamos antes de imprimir.', avulsa:{tit:'Artes avulsas', lg:'DTF têxtil · 57 cm', larg:57, multi:true,
zt:'Arraste suas folhas montadas',
zs:'uma ou várias · PNG, JPG, TIFF ou PDF · PSD, AI e CDR passam por tratamento'},
avulsa:{tit:'Artes avulsas', lg:'DTF têxtil · 57 cm', larg:57,
preco:'R$ 24,90 a R$ 29,90 /m conforme a nota', multi:true,
sub:'Cada arte num arquivo. Montamos a folha com o melhor encaixe.',
zt:'Arraste suas artes aqui', zt:'Arraste suas artes aqui',
zs:'PNG ou JPG com fundo transparente · informe a largura de cada uma'}, zs:'PNG ou JPG com fundo transparente · informe a largura de cada uma'},
uvfile:{tit:'Arquivo por metro · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5, uvfile:{tit:'Arquivo por metro · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5, multi:true, folha:true,
preco:'R$ 69,90 a R$ 85,90 /m conforme a nota', multi:true, folha:true, zt:'Arraste sua folha de UV aqui', zs:'PNG, JPG ou PDF · 28,5 cm de largura'},
sub:'Sua folha de UV montada. Revisamos, corrigimos e reencaixamos antes de imprimir.', uv: {tit:'Artes avulsas · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5, multi:true,
zt:'Arraste suas folhas de UV',
zs:'uma ou várias · PNG, JPG, TIFF ou PDF · PSD, AI e CDR passam por tratamento'},
uv: {tit:'Artes avulsas · UV', lg:'Adesivo UV · 28,5 cm', larg:28.5,
preco:'R$ 83,90 a R$ 99,90 /m conforme a nota', multi:true,
sub:'Cada arte de UV num arquivo. Montamos a folha com o melhor encaixe.',
zt:'Arraste suas artes de UV', zt:'Arraste suas artes de UV',
zs:'PNG ou JPG com fundo transparente · informe a largura de cada arte'} zs:'PNG ou JPG com fundo transparente · informe a largura de cada arte'}
}; };
@@ -77,7 +68,6 @@ let pedido=[]; // itens já fechados · o pagamento
// ao que a expedição já recebe hoje, sem criar processo novo. // ao que a expedição já recebe hoje, sem criar processo novo.
let entrega={tipo:'retira', cep:'', valor:0, cotado:true, end:{}}; let entrega={tipo:'retira', cep:'', valor:0, cotado:true, end:{}};
let cliente={cnpj:'', zap:'', mail:''}; let cliente={cnpj:'', zap:'', mail:''};
let caminho='auto'; // o que o cliente diz que vai mandar
// CNPJ com os dois dígitos verificadores · máscara sem conta não vale nada // CNPJ com os dois dígitos verificadores · máscara sem conta não vale nada
function cnpjOk(v){ function cnpjOk(v){

35
web/site-flow.js
View File

@@ -1,4 +1,4 @@
/* Site DTF — Carousel, path selector, delivery choice and input masks. /* Site DTF — Carousel, delivery choice and input masks.
Extracted verbatim from the single inline script in web/index.html. Extracted verbatim from the single inline script in web/index.html.
Loaded as classic scripts in the order listed there: they share one global Loaded as classic scripts in the order listed there: they share one global
scope and run top to bottom, exactly as the original did. */ scope and run top to bottom, exactly as the original did. */
@@ -73,31 +73,6 @@ $('pVolta').addEventListener('click',()=>{
$('cPro').addEventListener('click',()=>ir(atual()+1)); $('cPro').addEventListener('click',()=>ir(atual()+1));
})(); })();
// A declaração de formato só orienta: filtra o seletor e mostra o preço esperado.
// Se o arquivo que chegar contrariar, o arquivo ganha e o site avisa.
const AUTO=/[.](png|jpe?g|webp|pdf)$/i;
function pintaCaminhos(){
if(!$('caminhos')) return;
const ehF=modo&&ehFolha();
$('caminhos').style.display = ehF? '' : 'none';
if(!ehF) return;
document.querySelectorAll('#caminhos .cam').forEach(b=>b.classList.toggle('on', b.dataset.cam===caminho));
$('camA').textContent='a partir de '+rs(pisoEscada());
$('camB').textContent=rs(TABELA[modo])+' fixo';
$('inp').accept = caminho==='auto' ? '.png,.jpg,.jpeg,.pdf'
: '.tif,.tiff,.psd,.psb,.ai,.cdr';
$('zSub').textContent = caminho==='auto'
? 'PNG, JPG ou PDF · conferência automática, nota na tela'
: 'CDR, AI, PSD ou TIFF · sem conferência, metro pela tabela';
}
document.querySelectorAll('#caminhos .cam').forEach(b=>b.addEventListener('click',()=>{
caminho=b.dataset.cam; avisoCam(''); pintaCaminhos();
}));
function avisoCam(txt){
const el=$('trocouCam'); if(!el) return;
el.innerHTML=txt; el.style.display = txt? '' : 'none';
}
function pintaEntrega(){ function pintaEntrega(){
document.querySelectorAll('.opE').forEach(b=> document.querySelectorAll('.opE').forEach(b=>
b.classList.toggle('on', b.dataset.ent===entrega.tipo)); b.classList.toggle('on', b.dataset.ent===entrega.tipo));
@@ -150,6 +125,14 @@ $('zMenos').addEventListener('click',()=>{
if(zoomI>0){ zoomI--; pintaZoom(); previaAoVivo(); } if(zoomI>0){ zoomI--; pintaZoom(); previaAoVivo(); }
}); });
pintaZoom(); pintaZoom();
// A ready sheet has nothing to zoom: "Ampliar" shows the same preview bigger.
$('bAmpliar').addEventListener('click',()=>{
const previas=$('vArea').querySelector('.folhaPrevias'); if(!previas) return;
$('ampliaArea').replaceChildren(previas.cloneNode(true));
$('ampliaDlg').showModal();
});
$('ampliaFecha').addEventListener('click',()=>$('ampliaDlg').close());
$('ampliaDlg').addEventListener('click',e=>{ if(e.target===$('ampliaDlg')) $('ampliaDlg').close(); });
document.querySelectorAll('.opE').forEach(b=>b.addEventListener('click',()=>{ document.querySelectorAll('.opE').forEach(b=>b.addEventListener('click',()=>{
entrega.tipo=b.dataset.ent; entrega.tipo=b.dataset.ent;

16
web/site-modes.js
View File

@@ -15,7 +15,7 @@ function abrir(m){
avisoTipo(''); avisoTipo('');
pintaModo(); pintaModo();
$('lista').innerHTML=''; $('rA').style.display='none'; recusa([]); $('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
recemChegada=null; caminho='auto'; avisoCam(''); pintaCaminhos(); recemChegada=null;
$('vMt').textContent='—'; previaAoVivo(); agendaAvaliacao(); $('vMt').textContent='—'; previaAoVivo(); agendaAvaliacao();
limpaPaineis(); // o carrinho só some se o pedido estiver vazio limpaPaineis(); // o carrinho só some se o pedido estiver vazio
vaiPara(PAGINAS[m]); vaiPara(PAGINAS[m]);
@@ -25,10 +25,13 @@ function pintaModo(){
const c=MODOS[m]; const c=MODOS[m];
$('cards').style.display='none'; $('foco').classList.add('on'); $('cards').style.display='none'; $('foco').classList.add('on');
$('fTit').textContent=c.tit; $('fLg').textContent=c.lg; $('fTit').textContent=c.tit; $('fLg').textContent=c.lg;
$('fPreco').textContent=c.preco; $('fSub').textContent=c.sub;
$('zTit').textContent=c.zt; $('zSub').textContent=c.zs; $('zTit').textContent=c.zt; $('zSub').textContent=c.zs;
$('zManual').hidden=!ehFolha(m);
$('zOutra').textContent = ehFolha(m) ? 'Adicionar outra folha' : 'Adicionar mais artes';
$('zona').classList.remove('compacta');
$('inp').multiple=c.multi; $('inp').multiple=c.multi;
$('inp').accept = ehFolha(m) ? '.png,.jpg,.jpeg,.pdf' // The file decides the price: PNG, JPG and PDF are checked here, the others by hand.
$('inp').accept = ehFolha(m) ? '.png,.jpg,.jpeg,.pdf,.tif,.tiff,.psd,.psb,.ai,.cdr'
: '.png,.jpg,.jpeg,.webp'; : '.png,.jpg,.jpeg,.webp';
$('catFoco').className='cat '+(ehFolha(m)?'file':'av'); $('catFoco').className='cat '+(ehFolha(m)?'file':'av');
$('larguraFolhaPronta').textContent=String(c.larg).replace('.',','); $('larguraFolhaPronta').textContent=String(c.larg).replace('.',',');
@@ -46,8 +49,8 @@ function pintaTipoEnvio(){
if(el.hidden) return; if(el.hidden) return;
const folha = ehFolha() ? modo : PAR[modo]; const folha = ehFolha() ? modo : PAR[modo];
const avulsa = ehFolha() ? PAR[modo] : modo; const avulsa = ehFolha() ? PAR[modo] : modo;
$('tipoFolhaPreco').textContent='a partir de '+rs(pisoEscada(folha)); $('tipoFolhaPreco').textContent=rs(pisoEscada(folha))+' a '+rs(TABELA[folha]).slice(3)+' /m';
$('tipoAvulsaPreco').textContent='a partir de '+rs(pisoEscada(avulsa))+' · montagem inclusa'; $('tipoAvulsaPreco').textContent='+ '+rs(MONTAGEM[avulsa])+' /m';
$('larguraFolhaPronta').textContent=String(MODOS[folha].larg).replace('.',','); $('larguraFolhaPronta').textContent=String(MODOS[folha].larg).replace('.',',');
const atual = ehFolha() ? 'folha' : 'avulsa'; const atual = ehFolha() ? 'folha' : 'avulsa';
el.querySelectorAll('.cam').forEach(b=>{ el.querySelectorAll('.cam').forEach(b=>{
@@ -89,8 +92,7 @@ function trocaTipo(destino){
modo=destino; modo=destino;
history.replaceState(history.state,'',PAGINAS[modo]); document.title=tituloPagina(); history.replaceState(history.state,'',PAGINAS[modo]); document.title=tituloPagina();
$('lista').innerHTML=''; $('rA').style.display='none'; recusa([]); $('lista').innerHTML=''; $('rA').style.display='none'; recusa([]);
caminho='auto'; avisoCam(''); pintaModo(); limpaPaineis(); agendaAvaliacao(); previaAoVivo();
pintaModo(); pintaCaminhos(); limpaPaineis(); agendaAvaliacao(); previaAoVivo();
} }
$('bVoltar').addEventListener('click',()=>{ $('bVoltar').addEventListener('click',()=>{
itemAtual=null; modo=null; $('atual').style.display='none'; $('carrLin').innerHTML=''; pintaPedido(); itemAtual=null; modo=null; $('atual').style.display='none'; $('carrLin').innerHTML=''; pintaPedido();

3
web/site-packing.js
View File

@@ -286,6 +286,7 @@ function previaAoVivo(){
clearTimeout(tMont); clearTimeout(tMont);
montagemLayout=null; montagemLayout=null;
$('vArea').montagemVersao=($('vArea').montagemVersao||0)+1; $('vArea').montagemVersao=($('vArea').montagemVersao||0)+1;
if(!ehFolha()) $('bAmpliar').hidden=true;
if(ehFolha()){ if(ehFolha()){
$('vUso').innerHTML=''; $('vUso').innerHTML='';
const tot=folhaTotalM(); const tot=folhaTotalM();
@@ -319,7 +320,9 @@ function previaAoVivo(){
figura.append(pilha,legenda); painel.append(figura); figura.append(pilha,legenda); painel.append(figura);
}); });
$('vArea').replaceChildren(painel); $('vArea').replaceChildren(painel);
$('bAmpliar').hidden=false;
}else{ }else{
$('bAmpliar').hidden=true;
$('vArea').innerHTML = medidas.length $('vArea').innerHTML = medidas.length
? '<div class="semmont"><b>'+(medidas.length>1 ? '<div class="semmont"><b>'+(medidas.length>1
? medidas.length+' folhas · '+fmtM(tot)+' m' ? medidas.length+' folhas · '+fmtM(tot)+' m'

160
web/site-pdf.js
View File

@@ -356,6 +356,15 @@ function textoProgresso(x){
if(x.med && x.med.grande) return 'gerando a prévia e conferindo a arte… '+x.pct+'%'; if(x.med && x.med.grande) return 'gerando a prévia e conferindo a arte… '+x.pct+'%';
return x.pct<50?'lendo o arquivo…':x.pct<70?'medindo a folha…':'conferindo a arte…'; return x.pct<50?'lendo o arquivo…':x.pct<70?'medindo a folha…':'conferindo a arte…';
} }
// The file card's thumbnail (52 x 96 px, drawn at twice that for sharp screens).
function miniatura(fonte){
const w=fonte.naturalWidth||fonte.width, h=fonte.naturalHeight||fonte.height;
if(!(w>0 && h>0)) return null;
const s=Math.min(1,104/w,192/h), cv=document.createElement('canvas');
cv.width=Math.max(1,Math.round(w*s)); cv.height=Math.max(1,Math.round(h*s));
cv.getContext('2d').drawImage(fonte,0,0,cv.width,cv.height);
return cv.toDataURL('image/webp',0.8);
}
// Moves one sheet's progress bar in place: repainting the whole list and the // Moves one sheet's progress bar in place: repainting the whole list and the
// preview on every step made "Sua folha" flicker while a large file was read. // preview on every step made "Sua folha" flicker while a large file was read.
function pintaProgressoFolha(x){ function pintaProgressoFolha(x){
@@ -364,66 +373,79 @@ function pintaProgressoFolha(x){
if(!barra){ pintaFolha(); return; } if(!barra){ pintaFolha(); return; }
barra.style.width=x.pct+'%'; if(texto) texto.textContent=textoProgresso(x); barra.style.width=x.pct+'%'; if(texto) texto.textContent=textoProgresso(x);
} }
// What the check found, as chips: ok (verde), av (atenção), er (resolva você),
// fix (arrumamos de graça), nt (a equipe confere). Details stay one click away.
function chipsDaFolha(a){
const chip=(k,t)=>'<li class="chip '+k+'">'+t+'</li>';
const dpi = a.vetor ? chip('ok','Arte vetorial')
: chip(a.dpi>=DPI_AVISA?'ok':a.dpi>=DPI_RECUSA?'av':'er', a.dpi+' DPI');
if(a.grande) return dpi+chip('nt','Peças, resíduos e fundo: a equipe confere');
return dpi+
(a.fundoChapado? chip('er','Fundo chapado') : chip('ok','Fundo transparente'))+
(a.residuos? chip('er',a.residuos+' resíduo'+(a.residuos>1?'s':'')) : chip('ok','Sem resíduos'))+
(a.encostadas? chip('fix',a.encostadas+' peças coladas · separamos grátis') : chip('ok','Peças separadas'));
}
function avisosDaFolha(a){
if(a.grande) return '';
return (a.fundoChapado? '<p class="avisoF"><b>O fundo não é transparente.</b> '+
'Branco parecendo transparente sai branco no filme. Exporte com fundo transparente.</p>' : '')+
(a.residuos? '<p class="avisoF"><b>'+a.residuos+' pontinho'+(a.residuos>1?'s soltos serão impressos':' solto será impresso')+
'.</b> A impressora imprime qualquer resíduo de recorte. Apague no arquivo e envie de novo.</p>' : '');
}
function detalhesDaFolha(a,i,aberto){
const linhas = a.grande
? ['Resolução '+a.dpi+' DPI, lida do arquivo',
'Arquivo grande: peças, resíduos e fundo são conferidos pela equipe']
: [a.artes+' peça'+(a.artes===1?'':'s')+' · '+a.aproveitamento+'% da folha com arte',
'Resolução '+a.dpi+' DPI · '+(a.fonteDpi==='imagens'? 'medida imagem por imagem dentro do PDF'
: a.fonteDpi==='vetor'? 'arte vetorial, sem imagem embutida' : 'lida do arquivo'),
'Conferido numa grade de '+n1(a.grade)+' mm'];
return '<details class="confDet" data-det="'+i+'"'+(aberto?' open':'')+'>'+
'<summary>Ver detalhes da conferência</summary>'+
linhas.map(l=>'<span>'+l+'</span>').join('')+'</details>';
}
function pintaFolha(){ function pintaFolha(){
invalidaItemAtual(); invalidaItemAtual();
const L=larguraFilme(); const L=larguraFilme();
pintaTipoEnvio(); // trava o seletor enquanto houver folha pintaTipoEnvio(); // trava o seletor enquanto houver folha
$('zona').classList.toggle('compacta', folhas.length>0);
if(!folhas.length){ $('lista').innerHTML=''; agendaAvaliacao(); previaAoVivo(); return; } if(!folhas.length){ $('lista').innerHTML=''; agendaAvaliacao(); previaAoVivo(); return; }
$('lista').innerHTML = folhas.map((x,i)=>{ const tot=folhaTotalM();
$('lista').innerHTML = '<div class="listaCab"><h4>Seus arquivos</h4><span>'+
folhas.length+' folha'+(folhas.length>1?'s':'')+(tot>0? ' · '+fmtM(tot)+' m' : '')+'</span></div>'+
folhas.map((x,i)=>{
const lido=!!x.med, larga=lido && x.med.larg>L, suspeito=lido && x.med.foraDoPadrao; const lido=!!x.med, larga=lido && x.med.larg>L, suspeito=lido && x.med.foraDoPadrao;
const sub=(x.m||0)*(x.rep||1); const sub=(x.m||0)*(x.rep||1), a=lido && x.an;
let medida=''; let medida='', manual='';
if(lido){ if(lido){
const a=x.an; medida='<div class="repMed"><b>'+n1(x.med.larg)+' × '+n1(x.med.alt)+' cm</b>'+
const conferido = a && a.grande '<span>'+escapeHTML(extDe(x.f.name))+' · '+fmt(x.f.size)+'</span></div>'+
? '<div class="conf"><b>Arquivo grande · '+a.dpi+' DPI</b>'+ (a? '<ul class="chips">'+chipsDaFolha(a)+'</ul>'+avisosDaFolha(a)+detalhesDaFolha(a,i,x.detAberto) : '')+
'<span>nota pela resolução · peças, resíduos e fundo conferidos pela equipe</span></div>' (suspeito? '<p class="avisoF"><b>Este PDF passa do tamanho que o formato comporta.</b> '+
: a
? '<div class="conf"><b>Conferido de verdade</b>'+
'<span>'+a.artes+' peça'+(a.artes===1?'':'s')+' · '+a.aproveitamento+
'% da folha virou arte · '+
(a.residuos? a.residuos+' resíduo'+(a.residuos>1?'s':'') : 'sem resíduo')+' · '+
(a.fundoChapado? 'fundo chapado' : 'fundo transparente')+'</span>'+
'<span>resolução '+a.dpi+' DPI · '+
(a.fonteDpi==='imagens'? 'medida imagem por imagem dentro do PDF'
: a.fonteDpi==='vetor'? 'arte vetorial, sem imagem embutida'
: 'lida do arquivo')+
' · grade de '+n1(a.grade)+' mm</span></div>'
: '';
medida='<div class="med'+(larga||suspeito?' alerta':'')+'">'+
'<b>'+n1(x.med.larg)+' × '+n1(x.med.alt)+' cm</b>'+
'<span>'+x.med.fonte+' · '+fmtM(x.m)+' m de folha</span>'+
conferido+
(suspeito? '<em><b>Este PDF passa do tamanho que o formato comporta.</b> '+
'A especificação para em 508 cm e o seu tem '+n1(x.med.alt)+' cm. '+ 'A especificação para em 508 cm e o seu tem '+n1(x.med.alt)+' cm. '+
'Ele abre certo só em quem o gerou — aqui vai precisar de tratamento. '+ 'Ele abre certo só em quem o gerou — aqui vai precisar de tratamento. '+
'Manda em <b>PNG ou TIFF</b>, ou divide em partes de até 5 m, que sai na hora.</em>':'')+ 'Manda em <b>PNG ou TIFF</b>, ou divide em partes de até 5 m, que sai na hora.</p>':'')+
(larga? '<em><b>Esta folha não roda neste filme.</b> Ela tem '+n1(x.med.larg)+ (larga? '<p class="avisoF"><b>Esta folha não roda neste filme.</b> Ela tem '+n1(x.med.larg)+
' cm de largura e o filme aqui tem '+n1(L)+' cm. Não dá para reduzir: '+ ' cm de largura e o filme aqui tem '+n1(L)+' cm. Não dá para reduzir: '+
'encolher a folha encolheria cada arte junto.'+ 'encolher a folha encolheria cada arte junto.'+
(x.med.larg<=57.5 (x.med.larg<=57.5
? ' Ela cabe no <b>DTF têxtil de 57 cm</b> — troque de produto ali em cima.' ? ' Ela cabe no <b>DTF têxtil de 57 cm</b> — troque de produto ali em cima.'
: ' Remonte a folha em '+n1(L)+' cm e suba de novo.')+'</em>':'')+ : ' Remonte a folha em '+n1(L)+' cm e suba de novo.')+'</p>':'');
'</div>';
}else if(x.measurementError){ }else if(x.measurementError){
medida='<div class="med alerta"><b>Este PDF não pode ser orçado</b><span>'+ medida='<span class="repPeso">'+escapeHTML(extDe(x.f.name))+' · '+fmt(x.f.size)+'</span>'+
escapeHTML(x.measurementError)+'</span></div>'; '<p class="avisoF"><b>Este PDF não pode ser orçado.</b> '+escapeHTML(x.measurementError)+'</p>';
}else{ }else{
const teto=TABELA[modo], piso=pisoEscada(); const teto=TABELA[modo], piso=pisoEscada();
const dif=(x.m>0)? (teto-piso)*cobrar(x.m*(x.rep||1)) : 0; const dif=(x.m>0)? (teto-piso)*cobrar(x.m*(x.rep||1)) : 0;
medida='<div class="med pede">'+ medida='<span class="chipSo">Conferência manual · preço cheio</span>'+
'<b>'+escapeHTML(extDe(x.f.name))+' não abre no navegador</b>'+ '<p class="repTxt">O navegador não abre '+escapeHTML(extDe(x.f.name))+', então alguém da equipe '+
'<span>Sem conseguir conferir o arquivo, não temos como dar nota — e sem nota '+ 'confere antes de imprimir e o metro sai pela tabela, <b>'+rs(teto)+'</b>. '+
'o metro sai pela tabela, <b>'+rs(teto)+'</b>. Alguém vai abrir esse arquivo na mão '+ 'Exportando em <b>PNG ou PDF</b>, o metro pode cair até <b>'+rs(piso)+'</b>'+
'antes de imprimir.</span>'+ (dif>0.5? ' — <b>'+rs(dif)+' a menos</b> só nesta folha' : '')+'.</p>';
'<div class="troca">Exportando a mesma folha em <b>PNG ou PDF</b>, a conferência é '+ manual='<div class="campo"><label for="comp'+i+'">Comprimento</label>'+
'automática e o metro pode cair até <b>'+rs(piso)+'</b>'+ '<span class="un"><input type="number" id="comp'+i+'" min="0.5" max="60" step="0.01" data-comp="'+i+'" '+
(dif>0.5? ' — <b>'+rs(dif)+' a menos</b> só nesta folha' : '')+'.</div>'+ 'placeholder="0,00" value="'+(x.m? x.m.toFixed(2):'')+'"><i>m</i></span></div>';
'<span style="margin-top:9px">Informe o comprimento para seguir:</span>'+
'<input type="number" min="0.5" max="60" step="0.01" data-comp="'+i+'" '+
'placeholder="metros" value="'+(x.m? x.m.toFixed(2):'')+'">'+
'</div>';
} }
const barra = x.pct!=null const barra = x.pct!=null
? '<div class="prog"><i style="width:'+x.pct+'%"></i></div>'+ ? '<div class="prog"><i style="width:'+x.pct+'%"></i></div>'+
@@ -433,36 +455,41 @@ function pintaFolha(){
'. Seguimos com o preço de tabela — se quiser a nota e o desconto, exporte a mesma '+ '. Seguimos com o preço de tabela — se quiser a nota e o desconto, exporte a mesma '+
'folha em <b>PNG</b>, que a conferência é bem mais leve.</div>' 'folha em <b>PNG</b>, que a conferência é bem mais leve.</div>'
: ''; : '';
return '<div class="rep" data-folha="'+i+'"><div class="l1"><b>'+ // A small thumbnail made once: the list is rebuilt on every change, and the
(folhas.length>1? (i+1)+'. ':'')+escapeHTML(x.f.name)+'</b>'+ // full preview of a file up to 150 MB would be re-parsed each time.
'<span style="color:var(--fraco);font-size:10.5px">'+fmt(x.f.size)+'</span>'+ const mini = x.miniSrc
'<button data-rmf="'+i+'">×</button></div>'+ ? '<img src="'+escapeHTML(x.miniSrc)+'" alt="">'
barra+medida+ : '<span>'+escapeHTML(extDe(x.f.name))+'</span>';
(x.m>0 ? const copias = x.m>0 || manual ?
'<div class="cps" style="margin-top:10px">'+ '<div class="cps">'+manual+
'<div><label>quantas vezes repetir</label>'+ (x.m>0 ?
'<input type="number" min="1" max="200" data-repf="'+i+'" value="'+x.rep+'"></div>'+ '<div class="campo"><label for="repf'+i+'">Cópias</label>'+
'<div class="conta"><b>'+fmtM(sub)+' m</b>'+ '<span class="passo"><button type="button" data-passo="-1" data-i="'+i+'" aria-label="Menos uma cópia">−</button>'+
(x.rep>1? ' · '+x.rep+' × '+fmtM(x.m)+' m':'')+'</div>'+ '<input type="number" id="repf'+i+'" min="1" max="200" data-repf="'+i+'" value="'+x.rep+'">'+
'</div>' : '')+ '<button type="button" data-passo="1" data-i="'+i+'" aria-label="Mais uma cópia">+</button></span></div>'+
'<div class="conta">'+(x.rep>1? x.rep+' × '+fmtM(x.m)+' m = ' : '')+'<b>'+fmtM(sub)+' m</b></div>' : '')+
'</div>' : '';
return '<div class="rep" data-folha="'+i+'">'+
'<div class="repTopo"><div class="miniF">'+mini+'</div><div class="repInfo">'+
'<div class="l1"><b>'+(folhas.length>1? (i+1)+'. ':'')+escapeHTML(x.f.name)+'</b>'+
'<button data-rmf="'+i+'" aria-label="Remover '+escapeHTML(x.f.name)+'">×</button></div>'+
(lido || x.measurementError ? '' : '<span class="repPeso">'+escapeHTML(extDe(x.f.name))+' · '+fmt(x.f.size)+'</span>')+
barra+medida+
'</div></div>'+copias+
'</div>'; '</div>';
}).join(''); }).join('');
// total do pedido, quando há mais de uma folha
const tot=folhaTotalM(), partes=Math.ceil(tot/20);
if(folhas.length>1 && tot>0){
$('lista').innerHTML += '<div class="somaF">'+
'<span>'+folhas.length+' folhas neste pedido</span>'+
'<b>'+fmtM(tot)+' m no total</b>'+
(partes>1? '<em>vai em '+partes+' partes de até 20 m</em>':'')+'</div>';
}else if(partes>1 && tot>0){
$('lista').innerHTML += '<div class="somaF"><span>folha longa</span>'+
'<b>'+fmtM(tot)+' m</b><em>vai em '+partes+' partes de até 20 m</em></div>';
}
$('lista').querySelectorAll('[data-rmf]').forEach(b=>b.addEventListener('click',()=>{ $('lista').querySelectorAll('[data-rmf]').forEach(b=>b.addEventListener('click',()=>{
folhas.splice(+b.dataset.rmf,1); pintaFolha(); folhas.splice(+b.dataset.rmf,1); pintaFolha();
})); }));
$('lista').querySelectorAll('[data-det]').forEach(d=>d.addEventListener('toggle',()=>{
folhas[+d.dataset.det].detAberto=d.open;
}));
$('lista').querySelectorAll('[data-passo]').forEach(b=>b.addEventListener('click',()=>{
const el=$('repf'+b.dataset.i);
el.value=Math.max(1,Math.min(200,(+el.value||1)+(+b.dataset.passo)));
el.dispatchEvent(new Event('change'));
}));
$('lista').querySelectorAll('[data-repf]').forEach(el=>el.addEventListener('change',e=>{ $('lista').querySelectorAll('[data-repf]').forEach(el=>el.addEventListener('change',e=>{
folhas[+el.dataset.repf].rep=Math.max(1,Math.min(200,+e.target.value||1)); pintaFolha(); folhas[+el.dataset.repf].rep=Math.max(1,Math.min(200,+e.target.value||1)); pintaFolha();
})); }));
@@ -501,6 +528,7 @@ function pintaProgressoArte(a){
} }
function pintaArtes(){ function pintaArtes(){
invalidaItemAtual(); invalidaItemAtual();
$('zona').classList.toggle('compacta', artes.length>0);
$('lista').innerHTML=artes.map((a,i)=>{ $('lista').innerHTML=artes.map((a,i)=>{
let barra='', dica='', calc='<span>informe a largura para ver a qualidade</span>'; let barra='', dica='', calc='<span>informe a largura para ver a qualidade</span>';
if(a.lendo!=null){ if(a.lendo!=null){

20
web/site-upload.js
View File

@@ -48,21 +48,6 @@ function sel(fs){
} }
if(!fs.length) return; if(!fs.length) return;
if(ehFolha()){ if(ehFolha()){
const auto=fs.filter(f=>AUTO.test(f.name)).length;
const manual=fs.length-auto;
if(caminho==='auto' && manual){
caminho='tabela';
avisoCam('<b>Trocamos o caminho para você.</b> Você marcou conferência automática, '+
'mas '+(manual>1? manual+' arquivos vieram':'o arquivo veio')+' em formato que não '+
'abrimos. O metro vai pela tabela, '+rs(TABELA[modo])+'.');
pintaCaminhos();
}else if(caminho==='tabela' && auto){
caminho='auto';
avisoCam('<b>Boa notícia.</b> Você marcou o caminho sem conferência, mas '+
(auto>1? 'os arquivos vieram':'o arquivo veio')+' em formato que a gente confere. '+
'Vamos avaliar e o metro pode cair até '+rs(pisoEscada())+'.');
pintaCaminhos();
}
const novas=fs.map(f=>({f, med:null, rep:1, m:0, semAnalise:null})); const novas=fs.map(f=>({f, med:null, rep:1, m:0, semAnalise:null}));
folhas=folhas.concat(novas); // soma, não substitui folhas=folhas.concat(novas); // soma, não substitui
pintaFolha(); pintaFolha();
@@ -87,7 +72,7 @@ function sel(fs){
if(pct-mostrado>=1){ mostrado=pct; x.pct=pct; pintaProgressoFolha(x); } if(pct-mostrado>=1){ mostrado=pct; x.pct=pct; pintaProgressoFolha(x); }
}).then(cv=>{ }).then(cv=>{
if(cv && folhas.includes(x)){ if(cv && folhas.includes(x)){
x.previewSrc=cv.toDataURL('image/webp',0.85); x.previewSrc=cv.toDataURL('image/webp',0.85); x.miniSrc=miniatura(cv);
try{ try{
const an=analisarFolha(cv, md.larg); const an=analisarFolha(cv, md.larg);
x.an={...an, dpi:md.dpiFolha, fonteDpi:'arquivo', grande:false}; x.an={...an, dpi:md.dpiFolha, fonteDpi:'arquivo', grande:false};
@@ -96,7 +81,7 @@ function sel(fs){
}).catch(()=>{}).finally(()=>{ x.pct=null; pintaFolha(); }); }).catch(()=>{}).finally(()=>{ x.pct=null; pintaFolha(); });
}else if(md && RENDERIZA.test(x.f.name)){ }else if(md && RENDERIZA.test(x.f.name)){
carregarImagem(x.f).then(img=>{ carregarImagem(x.f).then(img=>{
if(img){ x.previewSrc=img.src; try{ x.an=analisarFolha(img, md.larg); if(x.an) x.an.fonteDpi='arquivo'; } if(img){ x.previewSrc=img.src; x.miniSrc=miniatura(img); try{ x.an=analisarFolha(img, md.larg); if(x.an) x.an.fonteDpi='arquivo'; }
catch(e){} } catch(e){} }
x.pct=null; pintaFolha(); x.pct=null; pintaFolha();
}); });
@@ -112,6 +97,7 @@ function sel(fs){
: ''); : '');
} }
if(r && r.tela){ if(r && r.tela){
x.miniSrc=miniatura(r.tela);
try{ try{
x.an=analisarFolha(r.tela, md.larg); x.an=analisarFolha(r.tela, md.larg);
// vetor puro não tem resolução · nota máxima, e está certo // vetor puro não tem resolução · nota máxima, e está certo

154
web/site-v2.css
View File

@@ -104,35 +104,48 @@ section+section{border-top:0}
.voltar:hover{color:var(--laranja-escuro)} .voltar:hover{color:var(--laranja-escuro)}
.focoGrid{grid-template-columns:minmax(0,1fr);gap:20px} .focoGrid{grid-template-columns:minmax(0,1fr);gap:20px}
.cat,.cat.file{border:0;background:transparent;box-shadow:none;overflow:visible} .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; .cabfoco,.cat.file .cabfoco{padding:0 0 24px!important;background:transparent;border:0;display:flex;flex-direction:column;gap:20px}
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{display:flex;flex-direction:column-reverse;gap:4px}
.cabfoco>div:first-child{grid-area:t;display:flex;flex-direction:column-reverse;gap:4px} .cabfoco .lg{font-size:12.5px;font-weight:800;color:var(--laranja-escuro);letter-spacing:.06em;text-transform:uppercase}
.cabfoco .lg{font-size:12px;color:#707070;letter-spacing:.05em} .cabfoco h3{font-size:36px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.cabfoco h3{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.1} .tipoEnvio{margin:0}
.cabfoco p{grid-area:s;margin-top:6px;font-size:15px;color:var(--texto2)} .tipoEnvio:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:calc(100% - 452px)}
.cabfoco .pr2{grid-area:p;margin-top:4px;font-size:14px;font-weight:600;color:var(--fraco);white-space:normal} .tipoEnvio .cam,.tipoEnvio .cam.on{padding:14px 16px;min-height:0;border-radius:12px;border:1px solid var(--linha);background:#F9F9F9;box-shadow:none;align-items:flex-start}
.tipoEnvio{grid-area:e;margin:0} .tipoEnvio .cam.on{padding:13px 15px;border:2px solid var(--preto);background:#fff}
.tipoEnvio:not([hidden]){display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:#EFEFEF} .tipoEnvio .cam .mk2{display:none}
.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 div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px;align-items:baseline}
.tipoEnvio .cam.on{background:#fff;box-shadow:0 1px 2px rgba(3,6,11,.14)} .tipoEnvio .cam b{margin:0;font-size:15px;font-weight:700;color:var(--texto2)}
.tipoEnvio .cam .mk2,.tipoEnvio .cam span,.tipoEnvio .cam em{display:none} .tipoEnvio .cam.on b{color:var(--preto);font-weight:800}
.tipoEnvio .cam b{margin:0;font-size:13.5px;font-weight:600;white-space:nowrap} .tipoEnvio .cam em{margin:0;font-size:13px;font-weight:500;color:var(--fraco);white-space:nowrap}
.tipoEnvio .cam.on b{font-weight:800} .tipoEnvio .cam.on em{font-weight:600;color:var(--preto)}
.tipoEnvio .cam div>span{grid-column:1/-1;font-size:13px;color:var(--fraco);line-height:1.4}
.tipoEnvio .cam.on div>span{color:var(--texto2)}
.tipoEnvio .cam:disabled{cursor:default} .tipoEnvio .cam:disabled{cursor:default}
.tipoEnvio .cam:disabled:not(.on){opacity:.5} .tipoEnvio .cam:disabled:not(.on){opacity:.55}
@media(max-width:1100px){.tipoEnvio:not([hidden]){max-width:none}}
.cat .in{padding:0!important} .cat .in{padding:0!important}
.foco2{grid-template-columns:minmax(0,1fr) 420px;gap:32px} .foco2{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
.fila{display:flex;flex-direction:column;gap:12px} .fila{display:flex;flex-direction:column;gap:12px}
.fila>*{margin:0} .fila>*{margin:0}
.cam{border-radius:var(--raio2)} .cam{border-radius:var(--raio2)}
.cam.on{border-color:var(--laranja);background:var(--aviso-fundo)} .cam.on{border-color:var(--laranja);background:var(--aviso-fundo)}
#larguraFolhaPronta{display:inline} #larguraFolhaPronta{display:inline;font-size:inherit;color:inherit}
.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{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;display:flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);font-size:20px;box-shadow:none} .zona .ico{grid-row:1/4;display:flex;align-items:center;justify-content:center;width:44px;height:44px;line-height:1;margin:0;border-radius:10px;background:var(--laranja);color:var(--preto);font-size:20px;box-shadow:none}
.zona b{font-size:15px;margin:0} .zona b{font-size:15px;margin:0}
.zona span{max-width:none;margin:0;font-size:13px;color:var(--fraco)} .zona span{max-width:none;margin:0;font-size:13px;color:var(--fraco)}
.zona .bt{display:none} .zona .bt{display:none}
.zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none} .zona:hover,.zona.sobre{border-color:var(--laranja2);box-shadow:none}
.zona .zManual{grid-column:1/-1;margin-top:12px;padding-top:12px;border-top:1px solid var(--aviso-linha);color:var(--texto2);line-height:1.5}
.zona .zManual[hidden]{display:none}
.zona .zManual b{display:inline;font-size:13px}
.zona .zOutra{display:none}
.zona.compacta{display:flex;justify-content:center;align-items:center;min-height:56px;padding:0 20px;border:1.5px dashed #D0D0D0;background:#fff;cursor:pointer}
.zona.compacta>*{display:none}
.zona.compacta .zOutra{display:inline;font-size:14px;color:var(--fraco)}
.zona.compacta .zOutra b{display:inline;font-size:14px;font-weight:600;color:var(--preto)}
.zona.compacta .zOutra b::before{content:"+";margin-right:8px;font-weight:700}
.zona.compacta:hover,.zona.compacta.sobre{border-color:var(--laranja2)}
#lista{display:flex;flex-direction:column;gap:10px} #lista{display:flex;flex-direction:column;gap:10px}
#lista:empty{display:none} #lista:empty{display:none}
.art{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)} .art{margin:0;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--linha)}
@@ -141,14 +154,69 @@ section+section{border-top:0}
.art label{font-size:12px} .art label{font-size:12px}
.art input{height:42px;font-size:15px;font-weight:600;border-radius:8px} .art input{height:42px;font-size:15px;font-weight:600;border-radius:8px}
.art .cps{grid-template-columns:repeat(2,minmax(0,160px))} .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)} .listaCab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.listaCab h4{margin:0;font-size:18px;font-weight:700}
.listaCab span{font-size:13px;color:var(--fraco)}
.rep{margin:0;padding:20px;border-radius:14px;background:#fff;border:1px solid var(--linha);display:flex;flex-direction:column;gap:16px}
.repTopo{display:flex;gap:16px;align-items:flex-start}
.miniF{flex:none;width:52px;height:96px;border-radius:6px;border:1px solid #D6D6D6;background:#F4F4F2;display:flex;align-items:center;justify-content:center;overflow:hidden}
.miniF img{width:100%;height:100%;object-fit:contain;display:block}
.miniF span{font-size:11px;font-weight:800;color:var(--texto2)}
.repInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rep .l1{margin:0}
.rep .l1 b{font-size:14px;font-weight:600;color:var(--preto)}
.rep .l1 button{width:32px;height:32px;margin:-6px -6px -6px 0;border-radius:8px;font-size:18px}
.rep .l1 button:hover{background:#F1F1F1;color:var(--preto)}
.repMed{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.repMed b{font-family:"Inter",sans-serif;font-size:22px;font-weight:700;letter-spacing:-.01em}
.repMed span,.repPeso{font-size:13px;color:var(--fraco)}
.chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2}
.chip::before{font-weight:800}
.chip.ok{background:var(--verde-fundo);color:var(--verde)}.chip.ok::before{content:"✓"}
.chip.av{background:#FFF1DB;color:#8A4B00}.chip.av::before{content:"!"}
.chip.er{background:#FDE8E6;color:#B3261E}.chip.er::before{content:"×"}
.chip.fix{background:#E8F0FB;color:#1F4E8C}.chip.fix::before{content:"✓"}
.chip.nt{background:#F1F1F1;color:var(--texto2)}
.chipSo{align-self:flex-start;padding:5px 10px;border-radius:999px;background:#F1F1F1;color:var(--texto2);font-size:13px;font-weight:600}
.avisoF{margin:4px 0 0;padding:10px 12px;border-radius:10px;background:#FDE8E6;font-size:13px;line-height:1.5;color:var(--preto)}
.avisoF b{color:#B3261E}
.repTxt{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--texto2)}
.repTxt b{color:var(--preto)}
.confDet{font-size:13px}
.confDet summary{display:inline;cursor:pointer;list-style:none;color:var(--laranja-escuro);font-weight:500}
.confDet summary::-webkit-details-marker{display:none}
.confDet summary:hover{text-decoration:underline}
.confDet[open] summary{display:inline-block;margin-bottom:6px}
.confDet span{display:block;color:var(--texto2);line-height:1.6}
.rep .cps{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;margin:0;padding-top:16px;border-top:1px solid #EFEFEF}
.rep .campo{display:flex;align-items:center;gap:12px}
.rep .campo label{margin:0;font-size:14px;font-weight:600;color:var(--preto)}
.passo{display:inline-flex;border:1px solid #D6D6D6;border-radius:10px;overflow:hidden}
.passo button{width:44px;height:44px;border:0;background:#F9F9F9;font-size:18px;color:var(--preto);cursor:pointer}
.passo button:hover{background:#EFEFEF}
.rep .passo input{width:56px;height:44px;padding:0;border:0;border-radius:0;text-align:center;font-size:16px;font-weight:700;-moz-appearance:textfield;appearance:textfield}
.passo input::-webkit-inner-spin-button,.passo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.rep .un{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:1px solid #D6D6D6;border-radius:10px}
.rep .un input{width:64px;padding:0;border:0;font-size:16px;font-weight:700;text-align:right}
.rep .un i{font-style:normal;font-size:14px;color:var(--fraco)}
.rep .conta{margin-left:auto;font-size:14px;color:var(--texto2)}
.rep .conta b{font-family:"Inter",sans-serif;font-size:16px;color:var(--preto)}
.calc{font-size:13px;margin-top:8px} .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{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.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{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} .dica button:hover{background:var(--verde);color:#fff;box-shadow:none}
.req{position:static;padding:16px 20px 6px;border-radius:12px;box-shadow:none} .req{position:static;padding:8px 0 0;border:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.reqcab{font-size:15px;margin-bottom:6px} .reqcab{margin:0;font-size:13px;font-weight:400;color:var(--fraco)}
.req details,.req details:first-of-type{border:0}
.req summary{display:inline;padding:0;font-size:13px;font-weight:500;color:var(--laranja-escuro)}
.req summary::before{display:none}
.req summary:hover{text-decoration:underline}
.req details[open]{order:1;flex-basis:100%;padding:14px 16px 4px;border-radius:12px;background:var(--cinza)}
.req details[open] summary{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:var(--preto);text-decoration:none}
.req li{font-size:13px}
.req .obs2{font-size:12px}
/* The buy box */ /* 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{position:sticky;top:var(--topo-passos,128px);padding:20px;border-radius:16px;background:#fff;box-shadow:none;display:flex;flex-direction:column;gap:12px}
@@ -160,12 +228,36 @@ section+section{border-top:0}
.compra .aoVivo.pronto{display:none} .compra .aoVivo.pronto{display:none}
#compraVals{display:flex;flex-direction:column;gap:10px;font-size:15px} #compraVals{display:flex;flex-direction:column;gap:10px;font-size:15px}
#compraVals[hidden]{display:none} #compraVals[hidden]{display:none}
.cNota{display:flex;align-items:center;gap:12px} .cat.file .zoomB{display:none}
.cNota span,.cLin>span:first-child{color:var(--texto2)} .ampliar{margin-left:auto;height:32px;padding:0 12px;border-radius:8px;border:1px solid #D6D6D6;background:#fff;font-size:12.5px;font-weight:600;color:var(--preto);cursor:pointer}
.cNota>i{flex:1;height:6px;border-radius:999px;background:#EFEFEF;overflow:hidden} .ampliar:hover{border-color:var(--preto)}
.cNota>i i{display:block;height:100%;border-radius:999px;background:#C9CCD1} .ampliar[hidden]{display:none}
.cNota>i i.ok{background:var(--verde)}.cNota>i i.av{background:var(--laranja)}.cNota>i i.er{background:var(--vermelho)} .cat.file #vArea{max-height:340px}
.cNota b{font-family:"Inter",sans-serif;font-weight:800} .cEscada{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.cEscada>span{font-size:13px;font-weight:600}
.cEscada ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.cEscada li{padding:8px 2px;border-radius:8px;background:#F4F4F2;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;gap:2px}
.cEscada li span{font-size:11px;color:var(--fraco);white-space:nowrap}
.cEscada li b{font-size:13px;font-weight:500;color:var(--texto2)}
.cEscada li.on{background:var(--verde-fundo);border-color:var(--verde)}
.cEscada li.on span,.cEscada li.on b{font-weight:700;color:var(--verde)}
.cEscada li.on:last-child{background:#F1F1F1;border-color:var(--preto)}
.cEscada li.on:last-child span,.cEscada li.on:last-child b{color:var(--preto)}
.cLin>span:first-child{color:var(--texto2)}
.cLin small{font-size:12px;color:var(--fraco)}
.cEco{margin:-6px 0 0;text-align:right;font-size:13px;font-weight:600;color:var(--verde)}
.cEco:empty{display:none}
#cPartes{display:block}
.ampliaDlg{width:min(960px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:16px;box-shadow:0 20px 60px rgba(3,6,11,.3)}
.ampliaDlg::backdrop{background:rgba(3,6,11,.55)}
.ampliaCab{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--linha);background:#fff}
.ampliaCab b{font-size:16px;font-weight:800}
.ampliaCab button{width:40px;height:40px;border:0;border-radius:8px;background:#F1F1F1;font-size:20px;cursor:pointer}
#ampliaArea .folhaPrevias{display:grid;gap:16px;padding:16px;background:#F8F9FA}
#ampliaArea .folhaPrevia{margin:0;background:#fff;border:1px solid var(--linha);border-radius:8px;overflow:hidden}
#ampliaArea .folhaPilha{display:flex;flex-direction:column;align-items:center;gap:4px}
#ampliaArea .folhaPilha img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 180px)!important}
#ampliaArea figcaption{padding:8px 12px;font-size:13px;color:var(--texto2);border-top:1px solid var(--linha)}
.cLin{display:flex;align-items:baseline;gap:8px} .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>span:last-child,.cLin>b{margin-left:auto;display:flex;gap:8px;align-items:baseline}
.cLin s{font-size:13px;color:#707070} .cLin s{font-size:13px;color:#707070}
@@ -184,8 +276,14 @@ section+section{border-top:0}
.cPe{margin:0;font-size:13px;color:var(--fraco);text-align:center} .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:1100px){.foco2{grid-template-columns:1fr}.mont{position:static}}
@media(max-width:620px){.montcab b{font-size:15px} @media(max-width:620px){.montcab b{font-size:15px}
.cabfoco,.cat.file .cabfoco{grid-template-columns:1fr;grid-template-areas:"t" "s" "p" "e"} .cabfoco h3{font-size:28px}
.tipoEnvio:not([hidden]){display:grid;grid-template-columns:1fr 1fr;margin-top:14px}} .tipoEnvio .cam div{grid-template-columns:1fr}
.tipoEnvio .cam div>span{display:none}
.rep{padding:16px}
.repTopo{gap:12px}
.miniF{width:40px;height:80px}
.repMed b{font-size:20px}
.rep .conta{margin-left:0}}
/* The quality, preview, cart and checkout panels sit directly in #envio, /* The quality, preview, cart and checkout panels sit directly in #envio,
outside .w; they share the page column so nothing runs edge to edge. */ outside .w; they share the page column so nothing runs edge to edge. */
@@ -231,6 +329,8 @@ html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;ma
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start} html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.envioArq{font-size:13px;color:var(--texto2);margin-top:14px;line-height:1.5} .envioArq{font-size:13px;color:var(--texto2);margin-top:14px;line-height:1.5}
.envioArq.ok{color:var(--verde)} .envioArq.ok{color:var(--verde)}
.envioArq.erro{color:#B42318}
.envioDeNovo{margin-left:4px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.envioBarra{height:6px;border-radius:999px;background:#EDEDED;overflow:hidden;margin-bottom:6px} .envioBarra{height:6px;border-radius:999px;background:#EDEDED;overflow:hidden;margin-bottom:6px}
.envioBarra i{display:block;height:100%;background:var(--laranja);border-radius:999px;transition:width .4s} .envioBarra i{display:block;height:100%;background:var(--laranja);border-radius:999px;transition:width .4s}
.cartEnvio{font-size:13px;font-weight:700;color:var(--laranja-escuro);margin-left:6px} .cartEnvio{font-size:13px;font-weight:700;color:var(--laranja-escuro);margin-left:6px}