feat: the order page in the Site's look, and no search box
All checks were successful
Build and deploy / Validate source (push) Successful in 4s
Build and deploy / Integration suite on a real stack (push) Successful in 2m37s
Build and deploy / Secret scan and release gate (push) Successful in 5s
Build and deploy / Publish images (push) Successful in 59s
All checks were successful
Build and deploy / Validate source (push) Successful in 4s
Build and deploy / Integration suite on a real stack (push) Successful in 2m37s
Build and deploy / Secret scan and release gate (push) Successful in 5s
Build and deploy / Publish images (push) Successful in 59s
"Meus pedidos" was still the prototype's plain page. It now has the Site's stripe, header and footer, and its type, colours and cards: each order shows its status, a progress line through production (or the correction the team asked for), the items with metres and price, where it goes, and on request the history, the files to download and the correction form. Carts waiting for payment are listed with a button to pay. Sign-in and account creation are side by side. The header, stripe, menu, footer and tokens moved from index.html's inline style to site-shell.css, which both pages load. The header's search box, which did nothing, is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Cauê Faleiros
@@ -7,79 +7,14 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/site-shell.css">
|
||||
<style>
|
||||
:root{
|
||||
/* tokens do site institucional */
|
||||
--font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif;
|
||||
--font-color-base:#03060b; --font-color-title:#03060b;
|
||||
--font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600;
|
||||
--font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem;
|
||||
--font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem;
|
||||
--line-height:1.5;
|
||||
--white:#fff; --black:#03060b;
|
||||
--gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636;
|
||||
--primary-color:#ffa81a; --secondary-color:#ff7f0a;
|
||||
--white-transparency:#ffffffb3; --transition:all .4s ease;
|
||||
/* apelidos usados nesta pagina, mapeados nos tokens acima */
|
||||
--marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1);
|
||||
--tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6;
|
||||
--laranja:var(--primary-color); --laranja2:var(--secondary-color);
|
||||
--vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A;
|
||||
--sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05);
|
||||
--sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;font-size:62.5%}
|
||||
body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base);
|
||||
font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height);
|
||||
-webkit-font-smoothing:antialiased}
|
||||
h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title);
|
||||
font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15}
|
||||
.w{max-width:1020px;margin:0 auto;padding:0 22px}
|
||||
section{padding:clamp(34px,5vw,56px) 0}
|
||||
section+section{border-top:1px solid var(--linha)}
|
||||
.prova+section{border-top:0}
|
||||
|
||||
/* tarja rotativa, como no site */
|
||||
.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px;
|
||||
font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em}
|
||||
.tarja a{color:#111;text-decoration:none}
|
||||
|
||||
/* topo */
|
||||
.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60}
|
||||
.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
|
||||
.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none}
|
||||
.logo img{height:26px;width:auto;display:block}
|
||||
.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black);
|
||||
letter-spacing:-.03em}
|
||||
.logotexto i{font-style:normal;color:var(--laranja)}
|
||||
.busca{flex:1;max-width:420px;position:relative}
|
||||
.busca input{width:100%;padding:9px 14px 9px 36px;border:1px solid var(--linha);border-radius:22px;
|
||||
font-family:inherit;font-size:15px;background:var(--cinza);color:var(--tx)}
|
||||
.busca input:focus{outline:none;border-color:var(--laranja);background:#fff}
|
||||
.busca .lupa{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fraco);font-size:15px}
|
||||
.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15px}
|
||||
.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
|
||||
.acts a:hover{color:var(--laranja)}
|
||||
|
||||
/* menu */
|
||||
.menu{background:#fff;border-bottom:1px solid var(--linha)}
|
||||
.menu .w{display:flex;gap:0;flex-wrap:wrap}
|
||||
.mi{position:relative}
|
||||
.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600;
|
||||
font-size:15px;color:var(--tx);text-decoration:none;white-space:nowrap}
|
||||
.mi:hover>a{color:var(--laranja)}
|
||||
.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)}
|
||||
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha);
|
||||
border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70;
|
||||
box-shadow:0 10px 26px rgba(0,0,0,.09)}
|
||||
.mi:hover .sub,.mi:focus-within .sub{display:block}
|
||||
.sub a{display:block;padding:8px 17px;font-size:15px;color:var(--fraco);text-decoration:none}
|
||||
.sub a:hover{color:var(--laranja);background:var(--cinza)}
|
||||
@media(max-width:820px){
|
||||
.menu .w{overflow-x:auto;flex-wrap:nowrap}
|
||||
.sub{display:none!important}
|
||||
.busca{display:none}
|
||||
}
|
||||
|
||||
.hero{background:#000;color:#fff;position:relative;overflow:hidden}
|
||||
.hero .fundo{position:absolute;inset:0;pointer-events:none}
|
||||
@@ -702,18 +637,6 @@ h2 em{font-style:normal;color:var(--laranja)}
|
||||
.nota{background:var(--cinza);border-radius:11px;padding:14px 18px;margin-top:15px;font-size:15px;color:var(--fraco)}
|
||||
.nota b{color:var(--tx);font-family:"Inter",sans-serif}
|
||||
|
||||
footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:15px}
|
||||
.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px}
|
||||
.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;
|
||||
font-weight:700;font-size:15px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap}
|
||||
.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
|
||||
footer a{color:#8D9AB0;text-decoration:none}
|
||||
footer a:hover{color:var(--laranja2)}
|
||||
.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
|
||||
.fcont{margin-left:auto;text-align:right;font-size:15px;line-height:1.7}
|
||||
@media(max-width:720px){.fcont{margin-left:0;text-align:left}}
|
||||
.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
|
||||
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570}
|
||||
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/site-v2.css">
|
||||
@@ -727,10 +650,6 @@ footer a:hover{color:var(--laranja2)}
|
||||
|
||||
<header class="topo"><div class="w">
|
||||
<a class="logo" href="https://www.dropstaratacado.com.br" aria-label="Dropstar Atacado"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar"></a>
|
||||
<div class="busca">
|
||||
<span class="lupa"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg></span>
|
||||
<input type="search" placeholder="Buscar" aria-label="Buscar">
|
||||
</div>
|
||||
<div class="acts">
|
||||
<a href="/portal.html"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span class="actTx">Minha conta</span></a>
|
||||
<a href="/carrinho" id="cartLink" aria-label="Carrinho, 0 itens"><span class="cartIc"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><b class="cartN" id="cartN" hidden>0</b></span><span class="actTx">Carrinho</span></a><span class="cartEnvio" id="cartEnvio" aria-live="polite"></span>
|
||||
|
||||
116
web/portal.css
Normal file
116
web/portal.css
Normal file
@@ -0,0 +1,116 @@
|
||||
/* Meus pedidos: the Site's look (tokens and shell from site-shell.css and
|
||||
site-v2.css) for the order page. */
|
||||
[hidden]{display:none!important}
|
||||
body{background:var(--cinza)}
|
||||
.topo .acts a[aria-current="page"]{color:var(--laranja-escuro)}
|
||||
.ped{padding-top:26px;padding-bottom:64px;min-height:70vh}
|
||||
.volta{display:inline-block;margin-bottom:14px;font-size:15px;color:var(--texto2);text-decoration:none}
|
||||
.volta:hover{color:var(--laranja-escuro)}
|
||||
.pedCab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
|
||||
.pedCab h1{font-size:34px;font-weight:800;margin-top:4px}
|
||||
.conta{margin-top:6px;font-size:15px;color:var(--fraco)}
|
||||
.conta:empty{display:none}
|
||||
.pedAcoes{display:flex;gap:10px}
|
||||
.pedAviso{margin-bottom:14px;padding:12px 16px;border-radius:var(--raio2);background:var(--aviso-fundo);border:1px solid var(--aviso-linha);font-size:15px}
|
||||
.pedMsg{margin-bottom:14px;font-size:15px;color:var(--laranja-escuro)}
|
||||
.pedMsg:empty{display:none}
|
||||
|
||||
/* Buttons, as on the Site. */
|
||||
.bPri{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:var(--raio2);background:var(--laranja);color:var(--preto);font-family:"Inter",sans-serif;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer}
|
||||
.bPri:hover:not(:disabled){background:#FFB53D}
|
||||
.bSec{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 16px;border:1px solid #D6D6D6;border-radius:var(--raio2);background:#fff;color:var(--preto);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer}
|
||||
.bSec:hover:not(:disabled){border-color:var(--preto)}
|
||||
.bSec .ic{width:18px;height:18px}
|
||||
.bLink{margin-top:14px;padding:0;border:0;background:none;color:var(--laranja-escuro);font-family:"Inter",sans-serif;font-weight:700;font-size:15px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
|
||||
button:disabled{opacity:.6;cursor:default}
|
||||
|
||||
/* Sign in / create account. */
|
||||
.acesso{margin-bottom:26px}
|
||||
.acessoIntro{margin-bottom:12px;font-size:15px;color:var(--texto2)}
|
||||
.acessoIntro:empty{display:none}
|
||||
.acessoGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
|
||||
.bloco{display:flex;flex-direction:column;padding:22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
|
||||
.bloco h2{font-size:21px;font-weight:800}
|
||||
.bloco .nota2{margin:4px 0 12px;font-size:14.5px;color:var(--fraco)}
|
||||
.bloco label,.correcaoForm label{margin:10px 0 5px;font-size:14px;font-weight:600;color:var(--texto2)}
|
||||
.bloco label .obs{font-weight:400;color:var(--fraco)}
|
||||
.bloco input,.correcaoForm textarea{width:100%;height:46px;padding:0 13px;border:1px solid #D6D6D6;border-radius:var(--raio2);font:inherit;font-size:16px;background:#fff}
|
||||
.correcaoForm textarea{height:auto;padding:10px 13px;resize:vertical}
|
||||
.bloco input:focus,.correcaoForm textarea:focus{outline:none;border-color:var(--laranja);box-shadow:0 0 0 3px rgba(255,168,26,.2)}
|
||||
.bloco .bPri{margin-top:16px}
|
||||
.bloco .nota2:last-child{margin:12px 0 0}
|
||||
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
|
||||
.duas>div{display:flex;flex-direction:column}
|
||||
|
||||
/* Orders. */
|
||||
.grupo{margin-bottom:22px}
|
||||
.grupo:empty{display:none}
|
||||
.tituloGrupo{margin-bottom:12px;font-size:20px;font-weight:800}
|
||||
.pedido{margin-bottom:14px;padding:20px 22px;border:1px solid var(--linha);border-radius:var(--raio);background:#fff}
|
||||
.pedido.pendente{border-color:var(--aviso-linha)}
|
||||
.pedido.correcao{border-color:#F3B7A9}
|
||||
.pedTopo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
|
||||
.pedTopo>div{flex:1;min-width:160px}
|
||||
.pedTopo h3{font-size:19px;font-weight:800}
|
||||
.pedTopo .data{font-size:14.5px;color:var(--fraco)}
|
||||
.pedTopo .valor{font-family:"Inter",sans-serif;font-size:19px;font-weight:800}
|
||||
.pedido.pendente .bPri{margin-top:14px}
|
||||
.pedido .nota2{margin-top:10px;font-size:15px;color:var(--fraco)}
|
||||
.estado{padding:5px 11px;border-radius:999px;font-family:"Inter",sans-serif;font-size:14px;font-weight:700;background:var(--cinza);color:var(--texto2);white-space:nowrap}
|
||||
.est-fin{background:var(--verde-fundo);color:var(--verde)}
|
||||
.est-cor{background:#FDE8E6;color:#B42318}
|
||||
.est-imp,.est-fil,.est-tra,.est-rec{background:var(--aviso-fundo);color:var(--laranja-escuro)}
|
||||
|
||||
/* Progress through production. */
|
||||
.trilha{display:flex;list-style:none;margin:18px 0 6px;padding:0}
|
||||
.trilha li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:14px;color:var(--fraco)}
|
||||
.trilha li::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#E0E0E0;z-index:0}
|
||||
.trilha li:first-child::before{display:none}
|
||||
.trilha li.feito::before,.trilha li.atual::before{background:var(--verde)}
|
||||
.trilha .marca{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #D0D0D0;background:#fff;font-family:"Inter",sans-serif;font-weight:700;font-size:14px}
|
||||
.trilha .marca .ic{width:16px;height:16px;stroke-width:3}
|
||||
.trilha li.feito{color:var(--verde)}
|
||||
.trilha li.feito .marca{background:var(--verde-fundo);border-color:var(--verde-fundo);color:var(--verde)}
|
||||
.trilha li.atual{color:var(--preto)}
|
||||
.trilha li.atual .marca{background:var(--laranja);border-color:var(--laranja)}
|
||||
.trilha b{font-weight:600}
|
||||
.trilha li.atual b{font-weight:800}
|
||||
.pedAlerta{display:flex;gap:10px;align-items:flex-start;margin:16px 0 4px;padding:12px 14px;border-radius:var(--raio2);background:#FDE8E6;color:#7A1C10;font-size:15px}
|
||||
.pedAlerta .ic{flex:none;width:20px;height:20px;margin-top:1px;color:#B42318}
|
||||
|
||||
.itensPed{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--linha)}
|
||||
.itensPed li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linha);font-size:15.5px}
|
||||
.itensPed .nome{flex:1;font-weight:600}
|
||||
.itensPed .qt{color:var(--fraco)}
|
||||
.itensPed b{min-width:96px;text-align:right;font-family:"Inter",sans-serif}
|
||||
.itensPed .frete .nome{font-weight:400;color:var(--texto2)}
|
||||
.entregaPed{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--texto2)}
|
||||
.entregaPed .ic{width:19px;height:19px;color:var(--laranja-escuro)}
|
||||
|
||||
/* Details. */
|
||||
.detalhe:empty{display:none}
|
||||
.detalhe{margin-top:14px;padding-top:4px;border-top:1px dashed var(--linha)}
|
||||
.secao{margin-top:14px}
|
||||
.secao h4{margin-bottom:8px;font-size:16px;font-weight:800}
|
||||
.historico{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--linha)}
|
||||
.historico li{position:relative;padding:0 0 12px 12px;font-size:15px}
|
||||
.historico li::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--laranja)}
|
||||
.historico li b{margin-right:8px}
|
||||
.historico li span{color:var(--fraco)}
|
||||
.historico .motivo{margin-top:4px;padding:8px 10px;border-radius:8px;background:#FDE8E6;font-size:14.5px}
|
||||
.arquivo{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linha)}
|
||||
.arquivo>div{flex:1;min-width:0;display:flex;flex-direction:column}
|
||||
.arquivo b{overflow-wrap:anywhere;font-size:15px}
|
||||
.arquivo span{font-size:14px;color:var(--fraco)}
|
||||
.correcaoForm{display:flex;flex-direction:column;padding:16px;border-radius:var(--raio2);background:var(--cinza)}
|
||||
.correcaoForm input[type=file]{font-size:15px}
|
||||
.correcaoForm .bPri{margin-top:14px;align-self:flex-start}
|
||||
|
||||
.vazio{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 22px;border:1px dashed #D6D6D6;border-radius:var(--raio);background:#fff;font-size:16px;color:var(--texto2)}
|
||||
|
||||
@media (max-width:600px){
|
||||
.pedCab h1{font-size:28px}
|
||||
.trilha b{font-size:12.5px}
|
||||
.duas{grid-template-columns:1fr}
|
||||
.pedido{padding:16px}
|
||||
}
|
||||
113
web/portal.html
113
web/portal.html
@@ -1,11 +1,102 @@
|
||||
<!doctype html><html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Dropstar · Meus pedidos DTF</title>
|
||||
<style>
|
||||
*{box-sizing:border-box}body{margin:0;background:#f6f7f9;color:#20252d;font:15px/1.5 system-ui,sans-serif}header{background:white;border-bottom:1px solid #ddd;padding:20px max(20px,calc((100% - 1100px)/2));display:flex;gap:24px;align-items:center;flex-wrap:wrap}.brand{color:#ef8500;font-size:24px;font-style:italic;font-weight:900}a{color:#8a4e00}main{max-width:1100px;margin:24px auto;padding:0 20px}h1{font-size:28px}h2{font-size:21px}h3{font-size:17px}.notice{background:#fff1d4;border-left:4px solid #ffa900;padding:12px 16px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.card{background:white;border:1px solid #ddd;border-radius:10px;padding:20px;margin:16px 0}.card p{overflow-wrap:anywhere}.muted{color:#596471}label{display:block;margin:10px 0}input,textarea,button{font:inherit;border:1px solid #9aa0a8;border-radius:6px;padding:10px}input:not([type=file]),textarea{width:100%}button{background:#ffa900;border-color:#ffa900;cursor:pointer}button:disabled{opacity:.6}form{margin:10px 0}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}#message{min-height:24px;color:#9b3800}li{margin:8px 0}.tag{background:#eef2f6;padding:5px 10px;border-radius:6px}details{margin:12px 0}[hidden]{display:none!important}
|
||||
</style></head><body>
|
||||
<header><a class="brand" href="/">DROPSTAR</a><a href="/">Enviar arte</a><span>Minha conta · DTF</span><button id="logout" hidden>Sair</button></header>
|
||||
<main><h1>Meus pedidos DTF</h1><p class="notice" id="dev-notice" hidden>Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.</p><p id="message" role="status"></p>
|
||||
<div id="account"></div><section id="auth" class="grid">
|
||||
<form id="login" class="card"><h2>Entrar</h2><label>E-mail <input id="email" type="email" autocomplete="username" required></label><label>Senha <input id="password" type="password" autocomplete="current-password" required></label><button>Entrar</button></form>
|
||||
<form id="register" class="card"><h2>Criar conta</h2><label>CNPJ <input id="cnpj" required></label><label>WhatsApp <input id="phone" required></label><label>E-mail <input id="register-email" type="email" autocomplete="email" required></label><label>Senha (12 caracteres ou mais) <input id="register-password" type="password" minlength="12" maxlength="128" autocomplete="new-password" required></label><button>Criar conta</button><p class="muted">Pedidos desta sessão serão associados à sua conta. Guarde sua senha: a recuperação por e-mail ainda não está disponível.</p></form>
|
||||
</section><div class="actions"><h2>Acompanhamento</h2><button id="refresh">Atualizar pedidos</button></div><p id="guest" class="muted"></p><section id="quotes"></section><section id="orders"></section></main>
|
||||
<script src="/privacy.js"></script><script src="/upload.js"></script><script src="/portal.js"></script></body></html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Meus pedidos · DTF Dropstar</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/site-shell.css">
|
||||
<link rel="stylesheet" href="/site-v2.css">
|
||||
<link rel="stylesheet" href="/portal.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="tarja">
|
||||
ENVIE SEU ARQUIVO DTF PELO SITE · DTF TÊXTIL COM O MENOR PREÇO DO METRO EM FRANCA-SP
|
||||
</div>
|
||||
|
||||
<header class="topo"><div class="w">
|
||||
<a class="logo" href="https://www.dropstaratacado.com.br" aria-label="Dropstar Atacado"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar"></a>
|
||||
<div class="acts">
|
||||
<a href="/portal.html" aria-current="page"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span class="actTx">Minha conta</span></a>
|
||||
<a href="/carrinho"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg><span class="actTx">Carrinho</span></a>
|
||||
</div>
|
||||
</div></header>
|
||||
|
||||
<main class="ped w">
|
||||
<a class="volta" href="/#envio">‹ Enviar outra arte</a>
|
||||
<div class="pedCab">
|
||||
<div>
|
||||
<p class="et">DTF Dropstar</p>
|
||||
<h1>Meus pedidos</h1>
|
||||
<p class="conta" id="account"></p>
|
||||
</div>
|
||||
<div class="pedAcoes">
|
||||
<button type="button" class="bSec" id="refresh">Atualizar</button>
|
||||
<button type="button" class="bSec" id="logout" hidden>Sair</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="pedAviso" id="dev-notice" hidden>Ambiente de desenvolvimento local. Pagamentos e notificações são simulados. Use apenas dados de teste.</p>
|
||||
<p class="pedMsg" id="message" role="status"></p>
|
||||
|
||||
<section class="acesso" id="auth" aria-label="Entrar ou criar conta">
|
||||
<p class="acessoIntro" id="guest"></p>
|
||||
<div class="acessoGrid">
|
||||
<form class="bloco" id="login">
|
||||
<h2>Entrar</h2>
|
||||
<p class="nota2">Já comprou com seu CNPJ? Entre para ver todos os seus pedidos.</p>
|
||||
<label for="email">E-mail</label>
|
||||
<input id="email" type="email" autocomplete="username" required>
|
||||
<label for="password">Senha</label>
|
||||
<input id="password" type="password" autocomplete="current-password" required>
|
||||
<button class="bPri">Entrar</button>
|
||||
</form>
|
||||
<form class="bloco" id="register">
|
||||
<h2>Criar conta</h2>
|
||||
<p class="nota2">Os pedidos feitos neste navegador passam para a sua conta.</p>
|
||||
<div class="duas">
|
||||
<div><label for="cnpj">CNPJ</label><input id="cnpj" inputmode="numeric" autocomplete="off" required></div>
|
||||
<div><label for="phone">WhatsApp</label><input id="phone" inputmode="numeric" autocomplete="tel" required></div>
|
||||
</div>
|
||||
<label for="register-email">E-mail</label>
|
||||
<input id="register-email" type="email" autocomplete="email" required>
|
||||
<label for="register-password">Senha <span class="obs">12 caracteres ou mais</span></label>
|
||||
<input id="register-password" type="password" minlength="12" maxlength="128" autocomplete="new-password" required>
|
||||
<button class="bPri">Criar conta</button>
|
||||
<p class="nota2">Guarde sua senha: a recuperação por e-mail ainda não está disponível.</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="grupo" id="quotes" aria-label="Aguardando pagamento"></section>
|
||||
<section class="grupo" id="orders" aria-label="Pedidos"></section>
|
||||
</main>
|
||||
|
||||
<footer><div class="w">
|
||||
<div class="frow">
|
||||
<span class="fmarca"><img src="https://cdn.vnda.com.br/dropstar/2025/12/17/logo-header-15125700-16129080.png?v=1766009286" alt="Dropstar">DTF</span>
|
||||
<div class="flinks">
|
||||
<a href="https://www.dropstaratacado.com.br" target="_blank" rel="noopener">Loja de atacado</a>
|
||||
<a href="https://www.dropstaratacado.com.br/p/termos" target="_blank" rel="noopener">Trocas e privacidade</a>
|
||||
<a href="https://www.dropstaratacado.com.br/p/atendimento" target="_blank" rel="noopener">Fale conosco</a>
|
||||
<a href="https://www.instagram.com/dropstar.ofc/" target="_blank" rel="noopener">Instagram</a>
|
||||
</div>
|
||||
<div class="fcont">
|
||||
<a href="https://wa.me/message/NJ76CLIOUGXLB1" target="_blank" rel="noopener">16 99428-0056</a>
|
||||
· arquivos 16 99230-2546<br>
|
||||
<a href="mailto:atendimentodropstar@gmail.com">atendimentodropstar@gmail.com</a><br>
|
||||
Segunda a sexta, 07h às 17h
|
||||
</div>
|
||||
</div>
|
||||
<div class="fbase">
|
||||
<span>© Dropstar Atacado · CNPJ 55.786.635/0001-58 · Franca-SP</span>
|
||||
<span>Visa · Master · Elo · Amex · Pix · Boleto</span>
|
||||
<span>têxtil 57 cm · UV 28,5 cm</span>
|
||||
</div>
|
||||
</div></footer>
|
||||
|
||||
<script src="/privacy.js"></script><script src="/upload.js"></script><script src="/portal.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
184
web/portal.js
184
web/portal.js
@@ -1,62 +1,168 @@
|
||||
/* Meus pedidos: the customer's orders, their progress and files, sign-in and
|
||||
the artwork correction the team may ask for. */
|
||||
const $=id=>document.getElementById(id);
|
||||
const node=(tag,text)=>{const el=document.createElement(tag);if(text!==undefined)el.textContent=text;return el;};
|
||||
const node=(tag,text,className)=>{const el=document.createElement(tag);if(text!==undefined&&text!==null)el.textContent=text;if(className)el.className=className;return el;};
|
||||
const money=c=>(c/100).toLocaleString('pt-BR',{style:'currency',currency:'BRL'});
|
||||
const quando=d=>new Date(d).toLocaleString('pt-BR',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'});
|
||||
const dia=d=>new Date(d).toLocaleDateString('pt-BR');
|
||||
const metros=m=>Number(m).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2})+' m';
|
||||
// Lucide shapes (ISC licence), the same as on the Site.
|
||||
const ICONES={
|
||||
baixar:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>',
|
||||
local:'<path d="M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
|
||||
caminhao:'<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/>',
|
||||
ok:'<path d="M20 6 9 17l-5-5"/>',
|
||||
alerta:'<path d="M12 7v6"/><path d="M12 17h.01"/>',
|
||||
relogio:'<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>',
|
||||
};
|
||||
function icone(nome){
|
||||
const span=document.createElement('span');span.className='icw';
|
||||
span.innerHTML='<svg class="ic" viewBox="0 0 24 24" aria-hidden="true" focusable="false">'+ICONES[nome]+'</svg>';
|
||||
return span.firstChild;
|
||||
}
|
||||
const PRODUTO={file:'DTF Têxtil · folha montada',avulsa:'DTF Têxtil · artes avulsas',
|
||||
uvfile:'DTF UV · folha montada',uv:'DTF UV · artes avulsas'};
|
||||
// The order's way through production, as the customer sees it.
|
||||
const TRILHA=['rec','tra','fil','imp','fin'];
|
||||
let scope,states={},environment='';
|
||||
|
||||
async function api(path,body){const r=await fetch('/api'+path,{headers:{'Content-Type':'application/json'},...(body===undefined?{}:{method:'POST',body:JSON.stringify(body)})});const d=await r.json();if(!r.ok){const error=new Error(typeof d.detail==='string'?d.detail:'Confira os campos informados.');error.status=r.status;throw error;}return d;}
|
||||
function button(text,fn){const b=node('button',text);b.onclick=async()=>{b.disabled=true;try{await fn();}catch(e){$('message').textContent=e.message;}finally{b.disabled=false;}};return b;}
|
||||
const aviso=text=>{$('message').textContent=text||'';};
|
||||
function button(text,fn,className='bSec'){const b=node('button',text,className);b.type='button';b.onclick=async()=>{b.disabled=true;try{await fn();}catch(e){aviso(e.message);}finally{b.disabled=false;}};return b;}
|
||||
function forgetCheckout(){for(const k of ['dtf-quote','dtf-request-key','dtf-request-body'])localStorage.removeItem(k);}
|
||||
|
||||
function trilha(state){
|
||||
const ol=node('ol',null,'trilha');
|
||||
const atual=state==='cor'?-1:TRILHA.indexOf(state);
|
||||
TRILHA.forEach((s,i)=>{
|
||||
const li=node('li',null,i<atual||state==='fin'?'feito':i===atual?'atual':'');
|
||||
const marca=node('span',null,'marca');
|
||||
if(i<atual||state==='fin')marca.append(icone('ok'));else marca.textContent=String(i+1);
|
||||
li.append(marca,node('b',states[s]||s));
|
||||
ol.append(li);
|
||||
});
|
||||
return ol;
|
||||
}
|
||||
function entrega(snapshot){
|
||||
const d=snapshot.destination, p=node('p',null,'entregaPed');
|
||||
p.append(icone(d?'caminhao':'local'),node('span',d?'Entrega pela Jadlog · '+d.city+'/'+d.state:'Retirada em Franca · Av. Major Elias Motta, 1281'));
|
||||
return p;
|
||||
}
|
||||
function itens(snapshot){
|
||||
const ul=node('ul',null,'itensPed');
|
||||
for(const item of snapshot.items){
|
||||
const li=node('li');
|
||||
li.append(node('span',PRODUTO[item.mode]||item.mode,'nome'),node('span',metros(item.billed_metres),'qt'),node('b',money(item.total_cents)));
|
||||
ul.append(li);
|
||||
}
|
||||
const f=snapshot.freight;
|
||||
if(f&&f.total_cents){const li=node('li',null,'frete');li.append(node('span','Frete','nome'),node('span',f.days?'até '+f.days+' dias úteis':'','qt'),node('b',money(f.total_cents)));ul.append(li);}
|
||||
return ul;
|
||||
}
|
||||
|
||||
async function load(){
|
||||
try{
|
||||
const session=await api('/session');scope=session.cart_scope;environment=session.environment;
|
||||
$('dev-notice').hidden=environment!=='local';
|
||||
const account=await api('/account/me');
|
||||
$('auth').hidden=!!account.customer;$('logout').hidden=!account.customer;
|
||||
$('account').textContent=account.customer?'Conta: '+account.customer.mail:'';
|
||||
$('guest').textContent=account.customer?'':'Você está vendo apenas os pedidos desta sessão. Crie uma conta para acessar seus pedidos em outro navegador.';
|
||||
$('account').textContent=account.customer?'Conta '+account.customer.mail:'';
|
||||
$('guest').textContent=account.customer?'':'Você está vendo os pedidos feitos neste navegador. Entre ou crie uma conta para ver seus pedidos em qualquer lugar.';
|
||||
const data=await api('/customer/orders');states=data.states;
|
||||
$('quotes').replaceChildren();
|
||||
for(const quote of data.quotes){
|
||||
const card=node('article');card.className='card';card.append(node('h3','Cotação '+quote.id.slice(0,8)));
|
||||
card.append(node('p',quote.approved?'Total aprovado: '+money(quote.approved.total_cents):'Aguardando conferência de metragem e nota.'));
|
||||
const link=node('a','Abrir cotação no Site');link.href='/pagamento?quote='+quote.id;card.append(link);$('quotes').append(card);
|
||||
const quotes=$('quotes');quotes.replaceChildren();
|
||||
if(data.quotes.length){
|
||||
quotes.append(node('h2','Aguardando pagamento','tituloGrupo'));
|
||||
for(const quote of data.quotes){
|
||||
const card=node('article',null,'pedido pendente');
|
||||
const topo=node('div',null,'pedTopo');
|
||||
const nome=node('div');nome.append(node('h3','Carrinho de '+dia(quote.created_at)),node('span',quote.approved?'Pronto para pagar':'Em conferência pela equipe','data'));
|
||||
topo.append(nome);
|
||||
if(quote.approved)topo.append(node('b',money(quote.approved.total_cents),'valor'));
|
||||
card.append(topo);
|
||||
if(quote.approved){const link=node('a','Ir para o pagamento','bPri');link.href='/pagamento?quote='+quote.id;card.append(link);}
|
||||
else card.append(node('p','A equipe confere a metragem e a nota da arte. Você recebe o valor para pagar em seguida.','nota2'));
|
||||
quotes.append(card);
|
||||
}
|
||||
}
|
||||
$('orders').replaceChildren();
|
||||
if(!data.orders.length)$('orders').append(node('p','Nenhum pedido pago nesta conta ou sessão.'));
|
||||
const orders=$('orders');orders.replaceChildren();
|
||||
orders.append(node('h2','Pedidos','tituloGrupo'));
|
||||
if(!data.orders.length){
|
||||
const vazio=node('div',null,'vazio');
|
||||
vazio.append(node('p','Nenhum pedido pago ainda.'));
|
||||
const link=node('a','Enviar uma arte','bPri');link.href='/#envio';vazio.append(link);
|
||||
orders.append(vazio);
|
||||
}
|
||||
const aberto=new URLSearchParams(location.search).get('order');
|
||||
for(const order of data.orders){
|
||||
const card=node('article');card.className='card';card.id='order-'+order.id;
|
||||
card.append(node('h3','Pedido #'+order.number),node('p',states[order.state]+' · '+money(order.snapshot.total_cents)+(environment==='local'?' · pagamento de teste':'')));
|
||||
card.append(node('p',new Date(order.created_at).toLocaleString('pt-BR')));
|
||||
const content=node('div');
|
||||
card.append(button('Ver detalhes e arquivos',()=>details(order.id,content)),content);$('orders').append(card);
|
||||
if(new URLSearchParams(location.search).get('order')===order.id)await details(order.id,content);
|
||||
const card=node('article',null,'pedido'+(order.state==='cor'?' correcao':''));card.id='order-'+order.id;
|
||||
const topo=node('div',null,'pedTopo');
|
||||
const nome=node('div');nome.append(node('h3','Pedido #'+order.number),node('span',quando(order.created_at),'data'));
|
||||
topo.append(nome,node('span',states[order.state],'estado est-'+order.state),node('b',money(order.snapshot.total_cents)+(environment==='local'?' · teste':''),'valor'));
|
||||
card.append(topo);
|
||||
if(order.state==='cor'){
|
||||
const p=node('p',null,'pedAlerta');p.append(icone('alerta'),node('span','A equipe precisa de uma correção na sua arte. Abra os detalhes para ver o motivo e enviar o arquivo corrigido.'));
|
||||
card.append(p);
|
||||
}else card.append(trilha(order.state));
|
||||
card.append(itens(order.snapshot),entrega(order.snapshot));
|
||||
const content=node('div',null,'detalhe');
|
||||
const ver=button('Ver detalhes e arquivos',async()=>{
|
||||
if(content.childElementCount){content.replaceChildren();ver.textContent='Ver detalhes e arquivos';return;}
|
||||
await details(order.id,content,order.created_at);ver.textContent='Fechar detalhes';
|
||||
},'bLink');
|
||||
card.append(ver,content);orders.append(card);
|
||||
if(aberto===order.id){await details(order.id,content,order.created_at);ver.textContent='Fechar detalhes';card.scrollIntoView({block:'start'});}
|
||||
}
|
||||
}catch(error){$('message').textContent=error.message;}
|
||||
}catch(error){aviso(error.message);}
|
||||
}
|
||||
async function details(id,container){
|
||||
|
||||
async function details(id,container,criado){
|
||||
const order=await api('/customer/orders/'+id);container.replaceChildren();
|
||||
for(const [i,item] of order.snapshot.items.entries())container.append(node('p',(i+1)+'. '+item.mode+' · '+item.billed_metres+' m · nota '+item.grade+' · '+money(item.total_cents)));
|
||||
const history=node('ol');
|
||||
for(const h of order.history)history.append(node('li',new Date(h.created_at).toLocaleString('pt-BR')+' · '+states[h.to_state]+(h.reason?' — '+h.reason:'')));
|
||||
container.append(history);
|
||||
for(const file of order.files){
|
||||
const row=node('p',(file.kind==='final'?'Arquivo final':'Correção')+' · item '+(file.item_index+1)+' · '+file.name+' · '+(file.expired?'expirado':!file.active?'substituído':'disponível até '+new Date(file.expires_at).toLocaleDateString('pt-BR')));
|
||||
if(file.active&&!file.expired)row.append(button('Baixar',async()=>{const d=await api('/customer/orders/'+id+'/files/'+file.id+'/download');const link=node('a');link.href=d.url;link.download=d.name;link.referrerPolicy='no-referrer';link.click();}));
|
||||
container.append(row);
|
||||
const hist=node('div',null,'secao');hist.append(node('h4','Andamento'));
|
||||
const ol=node('ol',null,'historico');
|
||||
// Payment is where the order starts: the first step is not a movement.
|
||||
if(criado){const li=node('li');li.append(node('b',states.rec||'Arte recebida'),node('span',quando(criado)));ol.append(li);}
|
||||
for(const h of order.history){
|
||||
const li=node('li');li.append(node('b',states[h.to_state]),node('span',quando(h.created_at)));
|
||||
if(h.reason)li.append(node('p',h.reason,'motivo'));
|
||||
ol.append(li);
|
||||
}
|
||||
hist.append(ol);container.append(hist);
|
||||
if(order.files.length){
|
||||
const arq=node('div',null,'secao');arq.append(node('h4','Arquivos'));
|
||||
for(const file of order.files){
|
||||
const row=node('div',null,'arquivo');
|
||||
const info=node('div');
|
||||
info.append(node('b',file.name),node('span',(file.kind==='final'?'Arquivo final':'Correção')+' · item '+(file.item_index+1)+' · '+
|
||||
(file.expired?'expirado':!file.active?'substituído':'disponível até '+dia(file.expires_at))));
|
||||
row.append(info);
|
||||
if(file.active&&!file.expired){
|
||||
const b=button('Baixar',async()=>{const d=await api('/customer/orders/'+id+'/files/'+file.id+'/download');const link=node('a');link.href=d.url;link.download=d.name;link.referrerPolicy='no-referrer';link.click();});
|
||||
b.prepend(icone('baixar'));row.append(b);
|
||||
}
|
||||
arq.append(row);
|
||||
}
|
||||
container.append(arq);
|
||||
}
|
||||
if(order.state==='cor'){
|
||||
const form=node('form');form.append(node('h3','Enviar arte corrigida'));
|
||||
const inputs=order.snapshot.items.map((item,index)=>{const label=node('label','Item '+(index+1)+' · '+item.mode);const input=node('input');input.type='file';input.multiple=true;input.dataset.item=index;label.append(input);form.append(label);return input;});
|
||||
const note=node('textarea');note.placeholder='Descreva a correção';note.required=true;note.maxLength=1000;form.append(note);
|
||||
const submit=node('button','Enviar correção');submit.type='submit';form.append(submit);
|
||||
const form=node('form',null,'secao correcaoForm');form.append(node('h4','Enviar arte corrigida'));
|
||||
const inputs=order.snapshot.items.map((item,index)=>{
|
||||
const label=node('label',(index+1)+'. '+(PRODUTO[item.mode]||item.mode));
|
||||
const input=node('input');input.type='file';input.multiple=true;input.dataset.item=index;
|
||||
form.append(label,input);return input;
|
||||
});
|
||||
const nl=node('label','O que foi corrigido');const note=node('textarea');note.required=true;note.maxLength=1000;note.rows=3;
|
||||
form.append(nl,note);
|
||||
const submit=node('button','Enviar correção','bPri');submit.type='submit';form.append(submit);
|
||||
form.onsubmit=async event=>{event.preventDefault();submit.disabled=true;try{
|
||||
const files=[];for(const [index,input] of inputs.entries())for(const file of input.files)files.push({item_index:index,upload_id:await dtfUpload(file,{api,scope:scope+':correction:'+id+':'+order.version,progress:text=>$('message').textContent=text})});
|
||||
const files=[];for(const [index,input] of inputs.entries())for(const file of input.files)files.push({item_index:index,upload_id:await dtfUpload(file,{api,scope:scope+':correction:'+id+':'+order.version,progress:text=>aviso(text)})});
|
||||
if(!files.length)throw new Error('Selecione pelo menos um arquivo corrigido.');
|
||||
await api('/customer/orders/'+id+'/corrections',{version:order.version,files,note:note.value});
|
||||
$('message').textContent='Correção enviada. Aguarde a conferência da equipe.';await details(id,container);
|
||||
}catch(error){$('message').textContent=error.message;}finally{submit.disabled=false;}};
|
||||
aviso('Correção enviada. Aguarde a conferência da equipe.');await details(id,container,criado);
|
||||
}catch(error){aviso(error.message);}finally{submit.disabled=false;}};
|
||||
container.append(form);
|
||||
}
|
||||
}
|
||||
|
||||
async function migrateGuestCart(previous,next){
|
||||
if(previous===next)return;
|
||||
const database=await new Promise((resolve,reject)=>{const r=indexedDB.open('dtf-local-cart',1);r.onupgradeneeded=()=>r.result.createObjectStore('cart');r.onsuccess=()=>resolve(r.result);r.onerror=()=>reject(r.error);});
|
||||
@@ -65,13 +171,13 @@ async function migrateGuestCart(previous,next){
|
||||
}
|
||||
async function authenticate(path,body){
|
||||
const previous=scope,guest=!(await api('/account/me')).customer;
|
||||
await api(path,body);forgetCheckout();$('message').textContent='Acesso confirmado.';
|
||||
await api(path,body);forgetCheckout();aviso('Acesso confirmado.');
|
||||
const next=(await api('/session')).cart_scope;
|
||||
if(guest)try{await migrateGuestCart(previous,next);}catch{$('message').textContent='Acesso confirmado. Não foi possível transferir o carrinho salvo neste navegador.';}
|
||||
if(guest)try{await migrateGuestCart(previous,next);}catch{aviso('Acesso confirmado. Não foi possível transferir o carrinho salvo neste navegador.');}
|
||||
await load();$('password').value='';$('register-password').value='';
|
||||
}
|
||||
$('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){$('message').textContent=e.message;}};
|
||||
$('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){$('message').textContent=e.message;}};
|
||||
$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){$('message').textContent='Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.';}};
|
||||
$('login').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/login',{email:$('email').value,password:$('password').value});}catch(e){aviso(e.message);}};
|
||||
$('register').onsubmit=async event=>{event.preventDefault();try{await authenticate('/account/register',{customer:{cnpj:$('cnpj').value,zap:$('phone').value,mail:$('register-email').value},password:$('register-password').value});}catch(e){aviso(e.message);}};
|
||||
$('logout').onclick=async()=>{try{await window.dtfForgetPrivateData();await api('/account/logout',{});location.reload();}catch(error){aviso('Não foi possível limpar os dados deste navegador. Feche as abas do Site e limpe os dados do site nas configurações do navegador.');}};
|
||||
$('refresh').onclick=load;
|
||||
load();
|
||||
|
||||
@@ -8,7 +8,6 @@ const rs=v=>'R$ '+v.toFixed(2).replace('.',',');
|
||||
// Ícones (Lucide, licença ISC) desenhados no próprio HTML: nada a carregar, e a
|
||||
// cor vem do texto em volta. Os que ficam no HTML estático são os mesmos.
|
||||
const ICONES={
|
||||
busca:'<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
|
||||
conta:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
|
||||
sacola:'<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>',
|
||||
enviar:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m17 8-5-5-5 5"/><path d="M12 3v12"/>',
|
||||
|
||||
80
web/site-shell.css
Normal file
80
web/site-shell.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* Site DTF — what every page shares: the tokens, the base type, the stripe,
|
||||
header, category menu and footer. The Site (index.html) and the order page
|
||||
(portal.html) both load it before their own styles. */
|
||||
:root{
|
||||
/* tokens do site institucional */
|
||||
--font-family-base:"Roboto",sans-serif; --font-family-title:"Inter",sans-serif;
|
||||
--font-color-base:#03060b; --font-color-title:#03060b;
|
||||
--font-weight-base:400; --font-weight-title:700; --font-weight-subtitle:600; --font-weight-button:600;
|
||||
--font-size-title:3rem; --font-size-subtitle:2rem; --font-size-button:1.4rem;
|
||||
--font-size-small:1.2rem; --font-size-base:1.4rem; --font-size-medium:1.6rem; --font-size-big:1.8rem;
|
||||
--line-height:1.5;
|
||||
--white:#fff; --black:#03060b;
|
||||
--gray-1:#f9f9f9; --gray-2:#c3c3c3; --gray-3:#707070; --gray-4:#363636;
|
||||
--primary-color:#ffa81a; --secondary-color:#ff7f0a;
|
||||
--white-transparency:#ffffffb3; --transition:all .4s ease;
|
||||
/* apelidos usados nesta pagina, mapeados nos tokens acima */
|
||||
--marinho:var(--black); --papel:var(--white); --cinza:var(--gray-1);
|
||||
--tx:var(--font-color-base); --fraco:var(--gray-3); --linha:#e6e6e6;
|
||||
--laranja:var(--primary-color); --laranja2:var(--secondary-color);
|
||||
--vermelho:#D94A28; --verde:#2E9E5B; --verde-ml:#00A650; --verde-claro:#57D68A;
|
||||
--sombra:0 1px 2px rgba(3,6,11,.05), 0 4px 14px rgba(3,6,11,.05);
|
||||
--sombra-alta:0 2px 6px rgba(3,6,11,.07), 0 10px 30px rgba(3,6,11,.11)}
|
||||
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;font-size:62.5%}
|
||||
body{background:var(--white);color:var(--font-color-base);font-family:var(--font-family-base);
|
||||
font-size:var(--font-size-base);font-weight:var(--font-weight-base);line-height:var(--line-height);
|
||||
-webkit-font-smoothing:antialiased}
|
||||
h1,h2,h3{font-family:var(--font-family-title);color:var(--font-color-title);
|
||||
font-weight:var(--font-weight-title);letter-spacing:normal;line-height:1.15}
|
||||
.w{max-width:1020px;margin:0 auto;padding:0 22px}
|
||||
|
||||
/* tarja rotativa, como no site */
|
||||
.tarja{background:var(--laranja);color:#111;text-align:center;padding:8px 16px;
|
||||
font-family:"Inter",sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.02em}
|
||||
.tarja a{color:#111;text-decoration:none}
|
||||
|
||||
/* topo */
|
||||
.topo{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:60}
|
||||
.topo .w{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
|
||||
.logo{display:flex;align-items:center;text-decoration:none;white-space:nowrap;flex:none}
|
||||
.logo img{height:26px;width:auto;display:block}
|
||||
.logotexto{font-family:"Inter",sans-serif;font-weight:700;font-size:19px;color:var(--black);
|
||||
letter-spacing:-.03em}
|
||||
.logotexto i{font-style:normal;color:var(--laranja)}
|
||||
.acts{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15px}
|
||||
.acts a{color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:6px}
|
||||
.acts a:hover{color:var(--laranja)}
|
||||
|
||||
/* menu */
|
||||
.menu{background:#fff;border-bottom:1px solid var(--linha)}
|
||||
.menu .w{display:flex;gap:0;flex-wrap:wrap}
|
||||
.mi{position:relative}
|
||||
.mi>a{display:block;padding:13px 16px;font-family:"Inter",sans-serif;font-weight:600;
|
||||
font-size:15px;color:var(--tx);text-decoration:none;white-space:nowrap}
|
||||
.mi:hover>a{color:var(--laranja)}
|
||||
.mi.on>a{color:var(--laranja);box-shadow:inset 0 -2px 0 var(--laranja)}
|
||||
.sub{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--linha);
|
||||
border-radius:0 0 9px 9px;min-width:224px;padding:7px 0;z-index:70;
|
||||
box-shadow:0 10px 26px rgba(0,0,0,.09)}
|
||||
.mi:hover .sub,.mi:focus-within .sub{display:block}
|
||||
.sub a{display:block;padding:8px 17px;font-size:15px;color:var(--fraco);text-decoration:none}
|
||||
.sub a:hover{color:var(--laranja);background:var(--cinza)}
|
||||
@media(max-width:820px){
|
||||
.menu .w{overflow-x:auto;flex-wrap:nowrap}
|
||||
.sub{display:none!important}
|
||||
}
|
||||
|
||||
footer{background:#000;color:#8D9AB0;padding:26px 0 20px;font-size:15px}
|
||||
.frow{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;padding-bottom:18px}
|
||||
.fmarca{display:flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;
|
||||
font-weight:700;font-size:15px;color:var(--laranja);letter-spacing:.06em;white-space:nowrap}
|
||||
.fmarca img{height:22px;width:auto;display:block;filter:brightness(0) invert(1)}
|
||||
footer a{color:#8D9AB0;text-decoration:none}
|
||||
footer a:hover{color:var(--laranja2)}
|
||||
.flinks{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
|
||||
.fcont{margin-left:auto;text-align:right;font-size:15px;line-height:1.7}
|
||||
@media(max-width:720px){.fcont{margin-left:0;text-align:left}}
|
||||
.fbase{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;
|
||||
justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px;color:#5A6570}
|
||||
@@ -340,8 +340,6 @@ section+section{border-top:0}
|
||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .checkout{max-width:1040px;margin-top:8px}
|
||||
html:is([data-rota="pagamento"],[data-rota="pix"]) .pagGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
|
||||
.ic{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
|
||||
.busca .lupa{display:flex;font-size:0}
|
||||
.busca .lupa .ic{width:18px;height:18px}
|
||||
.acts a .ic{width:23px;height:23px}
|
||||
.cartIc{position:relative;display:inline-flex}
|
||||
.acts #cartLink{gap:11px}
|
||||
|
||||
Reference in New Issue
Block a user