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

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
Details
Build and deploy / Integration suite on a real stack (push) Successful in 2m37s
Details
Build and deploy / Secret scan and release gate (push) Successful in 5s
Details
Build and deploy / Publish images (push) Successful in 59s
Details

Browse Source 
"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
2026-09-30 16:13:35 -03:00
parent 0b55ebce7f
commit 223854e392
7 changed files with 444 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
web/index.html
View File

@@ -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>