style(plan): prettier no rascunho UI do C139 + re-render PNGs
This commit is contained in:
Francisco Solla
parent
65a5881b2d
commit
72d189cfd7
1 changed files with 359 additions and 83 deletions
|
|
@ -10,62 +10,97 @@
|
|||
<main class="mx-auto max-w-5xl p-8">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Mesa (coordenação/assessores) na lista de Contatos — atualizar ficha e contatar pessoas.
|
||||
Cenas: desktop 1280px (lista + linha nova) e mobile 390px (cards + sheet de edição).
|
||||
Acento único = CTA primário (vermelho do app). Chips dentro do input; células = inputs.
|
||||
Cenas: desktop 1280px (lista + linha nova) e mobile 390px (cards + sheet de edição). Acento
|
||||
único = CTA primário (vermelho do app). Chips dentro do input; células = inputs.
|
||||
</p>
|
||||
|
||||
<!-- ============ CENA: DESKTOP ============ -->
|
||||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Desktop — /campanha/contatos (1280px)
|
||||
</h2>
|
||||
<section data-shot="desktop" class="mt-4 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900">
|
||||
<section
|
||||
data-shot="desktop"
|
||||
class="mt-4 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900"
|
||||
>
|
||||
<!-- app header -->
|
||||
<div class="flex h-14 items-center justify-between border-b border-zinc-300 bg-white px-4">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<p class="text-sm font-semibold">Contatos</p>
|
||||
<p class="text-xs text-zinc-500">Fichas da campanha — atualize dados e fale com as pessoas</p>
|
||||
<p class="text-xs text-zinc-500">
|
||||
Fichas da campanha — atualize dados e fale com as pessoas
|
||||
</p>
|
||||
</div>
|
||||
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600">SR</span>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- omnibox: chips DENTRO do input -->
|
||||
<div class="border-b border-zinc-300 bg-white px-4 py-2">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="flex min-h-9 flex-1 items-center gap-1 rounded-lg border border-zinc-300 px-2">
|
||||
<div
|
||||
class="flex min-h-9 flex-1 items-center gap-1 rounded-lg border border-zinc-300 px-2"
|
||||
>
|
||||
<span class="text-xs text-zinc-400">⌕</span>
|
||||
<span class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100">
|
||||
<span
|
||||
class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100"
|
||||
>
|
||||
Gênero: Feminino <span class="text-zinc-400">✕</span>
|
||||
</span>
|
||||
<span class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100">
|
||||
<span
|
||||
class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100"
|
||||
>
|
||||
Estado: BA <span class="text-zinc-400">✕</span>
|
||||
</span>
|
||||
<span class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100">
|
||||
<span
|
||||
class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100"
|
||||
>
|
||||
Sem e-mail <span class="text-zinc-400">✕</span>
|
||||
</span>
|
||||
<input
|
||||
class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
|
||||
placeholder="Buscar contato — nome, e-mail ou telefone…"
|
||||
/>
|
||||
<span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-500">✕</span>
|
||||
<span
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-500"
|
||||
>✕</span
|
||||
>
|
||||
</div>
|
||||
<button class="flex h-9 shrink-0 items-center gap-1 rounded-lg bg-red-600 px-3 text-xs font-medium text-white">
|
||||
<button
|
||||
class="flex h-9 shrink-0 items-center gap-1 rounded-lg bg-red-600 px-3 text-xs font-medium text-white"
|
||||
>
|
||||
+ Criar contato
|
||||
</button>
|
||||
<button class="flex h-9 shrink-0 items-center gap-1 rounded-lg bg-zinc-900 px-3 text-xs font-medium text-zinc-100">
|
||||
<button
|
||||
class="flex h-9 shrink-0 items-center gap-1 rounded-lg bg-zinc-900 px-3 text-xs font-medium text-zinc-100"
|
||||
>
|
||||
Colunas
|
||||
</button>
|
||||
</div>
|
||||
<!-- sugestões (dropdown aberto) -->
|
||||
<div class="mt-2 rounded-lg border border-zinc-300 bg-white p-1 shadow-sm">
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">⌕ Buscar: “maria”</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">
|
||||
⌕ Buscar: “maria”
|
||||
</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Lideranças: Sim</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Dobradinhas: Sim</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">
|
||||
Dobradinhas: Sim
|
||||
</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Assessores: Sim</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Equipe: Sim</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Gênero: Masculino</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Gênero: Não binário</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Gênero: Não informado</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Cidade: Salvador</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">
|
||||
Gênero: Masculino
|
||||
</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">
|
||||
Gênero: Não binário
|
||||
</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">
|
||||
Gênero: Não informado
|
||||
</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">
|
||||
Cidade: Salvador
|
||||
</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Sem telefone</p>
|
||||
<p class="flex items-center gap-1 px-2 py-1.5 text-xs text-zinc-600">Ordenar: Cidade</p>
|
||||
</div>
|
||||
|
|
@ -88,60 +123,180 @@
|
|||
<tbody class="divide-y divide-zinc-200">
|
||||
<!-- linha 1: telefone único -->
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Maria dos Santos" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Feminino" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="(71) 99999-0001" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="maria@email.com" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Salvador" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="BA" /></td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Maria dos Santos"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Feminino"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="(71) 99999-0001"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="maria@email.com"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Salvador"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="BA"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex justify-end gap-1">
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">✆</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">✉</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">🗑</span>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✆</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✉</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>🗑</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- linha 2: dois telefones empilhados, sem e-mail -->
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="João Pereira" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Masculino" /></td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="João Pereira"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Masculino"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="(75) 98888-0002" />
|
||||
<input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="(75) 97777-0009" />
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="(75) 98888-0002"
|
||||
/>
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="(75) 97777-0009"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-dashed border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-400 outline-none" value="Sem e-mail" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Feira de Santana" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="BA" /></td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-dashed border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-400 outline-none"
|
||||
value="Sem e-mail"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Feira de Santana"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="BA"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex justify-end gap-1">
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">✆</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300">✉</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">🗑</span>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✆</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300"
|
||||
>✉</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>🗑</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- linha 3: linkada a liderança + dobradinha, sem telefone -->
|
||||
<tr class="bg-white">
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Ana Lima" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Não binário" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-dashed border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-400 outline-none" value="Sem telefone" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="ana@email.com" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="Salvador" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none" value="BA" /></td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Ana Lima"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Não binário"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-dashed border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-400 outline-none"
|
||||
value="Sem telefone"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="ana@email.com"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="Salvador"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
value="BA"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex justify-end gap-1">
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300">✆</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">✉</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">🗑</span>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300"
|
||||
>✆</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✉</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>🗑</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex items-center justify-between border-t border-zinc-300 px-4 py-2 text-xs text-zinc-500">
|
||||
<div
|
||||
class="flex items-center justify-between border-t border-zinc-300 px-4 py-2 text-xs text-zinc-500"
|
||||
>
|
||||
<span>Mostrando 3 de 435 contatos</span>
|
||||
<span>‹ 1 · 2 · 3 ›</span>
|
||||
</div>
|
||||
|
|
@ -152,15 +307,24 @@
|
|||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Desktop — linha nova (após “+ Criar contato”)
|
||||
</h2>
|
||||
<section data-shot="desktop-novo" class="mt-4 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900">
|
||||
<section
|
||||
data-shot="desktop-novo"
|
||||
class="mt-4 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900"
|
||||
>
|
||||
<div class="flex h-14 items-center justify-between border-b border-zinc-300 bg-white px-4">
|
||||
<p class="text-sm font-semibold">Contatos</p>
|
||||
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600">SR</span>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
<div class="border-b border-zinc-300 bg-white px-4 py-2">
|
||||
<div class="flex min-h-9 items-center gap-1 rounded-lg border border-zinc-300 px-2">
|
||||
<span class="text-xs text-zinc-400">⌕</span>
|
||||
<input class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500" placeholder="Buscar contato…" />
|
||||
<input
|
||||
class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
|
||||
placeholder="Buscar contato…"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto bg-white">
|
||||
|
|
@ -179,16 +343,54 @@
|
|||
<tbody>
|
||||
<!-- linha nova em rascunho -->
|
||||
<tr class="border-b-2 border-red-600 bg-red-50">
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none" placeholder="Nome" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none" placeholder="Gênero" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none" placeholder="(71) 9…" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none" placeholder="email@…" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none" placeholder="Cidade" /></td>
|
||||
<td class="px-4 py-2"><input class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none" placeholder="UF" /></td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
placeholder="Nome"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
placeholder="Gênero"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
placeholder="(71) 9…"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
placeholder="email@…"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
placeholder="Cidade"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input
|
||||
class="w-full rounded-md border border-red-300 bg-white px-2 py-1.5 text-sm outline-none"
|
||||
placeholder="UF"
|
||||
/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<div class="flex justify-end gap-1">
|
||||
<button class="flex h-8 items-center rounded-lg bg-zinc-900 px-3 text-xs font-medium text-zinc-100">Salvar</button>
|
||||
<button class="flex h-8 items-center rounded-lg border border-zinc-300 px-3 text-xs font-medium text-zinc-600">Descartar</button>
|
||||
<button
|
||||
class="flex h-8 items-center rounded-lg bg-zinc-900 px-3 text-xs font-medium text-zinc-100"
|
||||
>
|
||||
Salvar
|
||||
</button>
|
||||
<button
|
||||
class="flex h-8 items-center rounded-lg border border-zinc-300 px-3 text-xs font-medium text-zinc-600"
|
||||
>
|
||||
Descartar
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -201,9 +403,18 @@
|
|||
<td class="px-4 py-2.5 text-zinc-700">BA</td>
|
||||
<td class="px-4 py-2.5">
|
||||
<div class="flex justify-end gap-1">
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">✆</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">✉</span>
|
||||
<span class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs">🗑</span>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✆</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✉</span
|
||||
>
|
||||
<span
|
||||
class="flex size-8 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>🗑</span
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -216,17 +427,25 @@
|
|||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Mobile — cards (390px, omnibox edge-to-edge sem borda)
|
||||
</h2>
|
||||
<section data-shot="mobile" class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900">
|
||||
<section
|
||||
data-shot="mobile"
|
||||
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900"
|
||||
>
|
||||
<!-- app header -->
|
||||
<div class="flex h-14 items-center justify-between border-b border-zinc-300 bg-white px-4">
|
||||
<p class="text-sm font-semibold">Contatos</p>
|
||||
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600">SR</span>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-200 text-xs text-zinc-600"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
<!-- omnibox sem moldura, edge-to-edge -->
|
||||
<div class="border-b border-zinc-300 bg-white px-3 py-1.5">
|
||||
<div class="flex min-h-9 items-center gap-1">
|
||||
<span class="text-xs text-zinc-400">⌕</span>
|
||||
<span class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100">
|
||||
<span
|
||||
class="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-100"
|
||||
>
|
||||
Gênero: Feminino <span class="text-zinc-400">✕</span>
|
||||
</span>
|
||||
<input
|
||||
|
|
@ -244,8 +463,12 @@
|
|||
<p class="truncate text-xs text-zinc-500">(71) 99999-0001</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs">✆</span>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs">✉</span>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✆</span
|
||||
>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✉</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 text-xs">
|
||||
|
|
@ -260,13 +483,20 @@
|
|||
<p class="truncate text-xs text-zinc-500">(75) 98888-0002</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs">✆</span>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300">✉</span>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✆</span
|
||||
>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300"
|
||||
>✉</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 text-xs">
|
||||
<span class="rounded-full bg-zinc-200 px-2 py-0.5 text-zinc-700">Masculino</span>
|
||||
<span class="rounded-full bg-zinc-200 px-2 py-0.5 text-zinc-700">Feira de Santana · BA</span>
|
||||
<span class="rounded-full bg-zinc-200 px-2 py-0.5 text-zinc-700"
|
||||
>Feira de Santana · BA</span
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex flex-col gap-2 bg-white px-4 py-3">
|
||||
|
|
@ -276,8 +506,13 @@
|
|||
<p class="truncate text-xs text-zinc-500">ana@email.com</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300">✆</span>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs">✉</span>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs text-zinc-300"
|
||||
>✆</span
|
||||
>
|
||||
<span class="flex size-9 items-center justify-center rounded-lg bg-zinc-100 text-xs"
|
||||
>✉</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 text-xs">
|
||||
|
|
@ -288,8 +523,16 @@
|
|||
</ul>
|
||||
<!-- FAB de criação (substitui o de ações rápidas; FAB de IA permanece) -->
|
||||
<div class="relative h-20 bg-zinc-100">
|
||||
<div class="absolute bottom-4 right-4 flex size-14 items-center justify-center rounded-full bg-red-600 text-2xl text-white">+</div>
|
||||
<div class="absolute bottom-4 right-20 flex size-14 items-center justify-center rounded-full bg-zinc-900 text-xs text-zinc-100">IA</div>
|
||||
<div
|
||||
class="absolute bottom-4 right-4 flex size-14 items-center justify-center rounded-full bg-red-600 text-2xl text-white"
|
||||
>
|
||||
+
|
||||
</div>
|
||||
<div
|
||||
class="absolute bottom-4 right-20 flex size-14 items-center justify-center rounded-full bg-zinc-900 text-xs text-zinc-100"
|
||||
>
|
||||
IA
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -297,7 +540,10 @@
|
|||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Mobile — bottom sheet de edição (toque no card)
|
||||
</h2>
|
||||
<section data-shot="mobile-edicao" class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900">
|
||||
<section
|
||||
data-shot="mobile-edicao"
|
||||
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-100 text-zinc-900"
|
||||
>
|
||||
<!-- lista desfocada atrás (representação) -->
|
||||
<div class="h-24 bg-zinc-100 opacity-40">
|
||||
<div class="flex h-14 items-center border-b border-zinc-300 bg-white px-4">
|
||||
|
|
@ -313,20 +559,50 @@
|
|||
<div class="mx-auto mb-3 h-1 w-10 rounded-full bg-zinc-300"></div>
|
||||
<p class="mb-3 text-sm font-semibold">Editar contato</p>
|
||||
<div class="flex flex-col gap-2.5">
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="Maria dos Santos" />
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="Feminino" />
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="(71) 99999-0001" />
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="Maria dos Santos"
|
||||
/>
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="Feminino"
|
||||
/>
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="(71) 99999-0001"
|
||||
/>
|
||||
<p class="text-xs font-medium text-zinc-500">+ Adicionar telefone</p>
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="maria@email.com" />
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="maria@email.com"
|
||||
/>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="Salvador" />
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="BA" />
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="Salvador"
|
||||
/>
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="BA"
|
||||
/>
|
||||
</div>
|
||||
<input class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none" value="40000-000" placeholder="CEP" />
|
||||
<input
|
||||
class="rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm outline-none"
|
||||
value="40000-000"
|
||||
placeholder="CEP"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button class="flex h-10 flex-1 items-center justify-center rounded-lg border border-zinc-300 text-sm font-medium text-zinc-600">Cancelar</button>
|
||||
<button class="flex h-10 flex-1 items-center justify-center rounded-lg bg-red-600 text-sm font-medium text-white">Salvar</button>
|
||||
<button
|
||||
class="flex h-10 flex-1 items-center justify-center rounded-lg border border-zinc-300 text-sm font-medium text-zinc-600"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
class="flex h-10 flex-1 items-center justify-center rounded-lg bg-red-600 text-sm font-medium text-white"
|
||||
>
|
||||
Salvar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue