# Fit Food Ultracongelados — site e sistema

Duas entregas de front-end, prontas para a equipe de desenvolvimento implantar:
uma proposta de **site** (visão do cliente) e um protótipo navegável do **sistema
interno** (frente de caixa + administrativo).

HTML, CSS e JavaScript puros. **Sem build, sem framework, sem dependência** — é só
abrir os arquivos no navegador.

---

## Como abrir

| O quê | Arquivo |
|---|---|
| Página inicial das duas entregas | [`index.html`](index.html) |
| Site — visão do cliente | [`site/index.html`](site/index.html) |
| Sistema — tela de entrada | [`sistema/login.html`](sistema/login.html) |

No sistema, o login oferece dois caminhos:

- **Gestão de caixa** → painel de pedidos, atendimento, clientes, entregas e caixa
- **Gestão completa** → tudo, inclusive cardápio, estoque, produção, logística,
  fiscal, financeiro, marketing e relatórios

Usuário e senha vêm preenchidos — é protótipo, nada é enviado.

---

## O que tem em cada pasta

### `site/` — proposta do site

Quatro páginas (home, cardápio, planos, como funciona) com o catálogo real de 88
itens. Destaques:

- Vitrine de **planos** na capa, cada card levando para a calculadora já no tamanho
  escolhido
- Bloco **"compre também"** na tela do produto — bebida, suco e sobremesa
- **Montagem do plano com foto**: o cliente escolhe sabor a sabor, com contador fixo
- Cardápio que **respeita o catálogo da cidade** (Itaporã, Maracaju e Ponta Porã só
  vendem planos e complementos)
- Menu **"Minha conta"**: trocar de cidade, meus pedidos, entrar, WhatsApp

Detalhes em [`site/LEIA-ME.md`](site/LEIA-ME.md).

### `sistema/` — protótipo do sistema interno

**39 telas**: 1 de entrada, 5 de gestão de caixa e 32 de gestão completa.

```
sistema/
├─ login.html                  escolha do perfil + acesso
├─ pdv/                        GESTÃO DE CAIXA (5 telas)
│  └─ painel · novo-pedido · clientes · entregas · caixa
├─ admin/                      GESTÃO COMPLETA (32 telas)
│  ├─ operação      visão geral · pedidos · clientes · carrinhos · cupons
│  ├─ catálogo      produtos · categorias · complementos · banners
│  ├─ estoque       preços e saldos · histórico · transferências · produção
│  ├─ logística     rotas e coletas · frota
│  ├─ fiscal        NFC-e e NF-e · MDF-e
│  ├─ financeiro    caixas · entradas e saídas · conciliação · contas ·
│  │                cobranças PIX · custos e preços
│  ├─ relatórios    vendas · produtos · clientes · operação
│  └─ administração marketing · unidades · funcionários · integrações ·
│                   configurações
└─ assets/
   ├─ css/sistema.css          todo o visual, em um arquivo
   ├─ js/ui.js                 casca, tabela viva, gráficos, janela, recado
   ├─ js/pedido.js             status, nota, pagamento, impressão, cancelamento
   ├─ js/cliente.js            cadastro, completude e endereços
   ├─ js/caixa.js              abertura, lançamento, conferência, fechamento
   ├─ js/rota.js               montagem de rota e mapa numerado
   ├─ js/dados.js              dados de demonstração
   └─ js/catalogo.js           catálogo real exportado do site (88 itens)
```

O [`sistema/LEIA-ME.md`](sistema/LEIA-ME.md) traz o **mapa item a item** do backlog:
cada pedido do cliente com a tela onde ele ficou, mais a lista do que é engenharia de
back-end e não desenho de interface.

---

## Colocar no ar para visualização

É tudo estático: HTML, CSS, JS e imagens. Não precisa de PHP, banco nem build.

### Docker Swarm + Traefik (é o que está em uso)

Stack pronto no [`docker-compose.yml`](docker-compose.yml) da raiz, publicando em
**https://fitfood.gtw.digital**. Dois serviços: um clona o repositório num volume
e mantém em dia; o outro serve com Caddy. O Traefik cuida do domínio e do
certificado.

Tudo pelo Portainer — sem SSH, sem clone manual, sem pasta no host. O passo a
passo está em [`deploy/PORTAINER.md`](deploy/PORTAINER.md).

> O Traefik roteia, mas **não serve arquivo** — não existe file server nele.
> Por isso o Caddy: um binário, 15 linhas de configuração, nada instalado no
> host.

### Em qualquer outro servidor

Como é estático, funciona em qualquer lugar que sirva arquivo: basta copiar o
conteúdo do repositório para a pasta pública. Todos os caminhos são relativos,
então roda em subpasta de qualquer profundidade.

---

## Para quem for implantar

**1. A casca é montada por JavaScript.** Cada página do sistema tem só isto no corpo:

```html
<div id="casca"></div>
<script src="../assets/js/catalogo.js"></script>
<script src="../assets/js/dados.js"></script>
<script src="../assets/js/ui.js"></script>
<script>
  FFUI.casca({ area: 'admin', ativo: 'produtos' });
  document.getElementById('conteudo').innerHTML = /* … */;
</script>
```

O mapa de navegação inteiro está em duas constantes no topo do `ui.js`:
`NAV_ADMIN` e `NAV_PDV`.

**2. Um componente resolve quase toda lista.** `FFUI.tabelaViva()` entrega busca,
filtros, ordenação por coluna, filtro por letra, paginação (20/50/100/500) e
exportação para CSV. Trocar essa função por uma que fale com a API liga a maioria das
telas de uma vez.

**3. Os dados estão separados do layout.** Nada está escrito no HTML: tudo vem de
`window.FF` (`dados.js`) e `window.FF_CATALOGO` (`catalogo.js`). Substituir esses dois
arquivos por respostas da API com o mesmo formato transforma o protótipo em sistema.

**4. O que falta ligar está marcado.** Todo botão sem back-end carrega
`data-demo="mensagem"`. Procurar por `data-demo` lista tudo.

---

## Notas

- **Nenhum dado real.** Nomes, telefones e valores são plausíveis, mas inventados.
  Nenhum cliente da Fit Food aparece aqui.
- **As fotos dos produtos aparecem nas duas pastas.** É proposital: cada entrega
  funciona sozinha, sem depender da outra.
- **Fontes** (Bricolage Grotesque, Instrument Sans, JetBrains Mono) vêm do Google
  Fonts via `<link>`. Para hospedar por conta própria, é só trocar o link.
- **Acessibilidade**: navegação por teclado com foco visível, `aria-*` nos controles,
  `prefers-reduced-motion` respeitado.
- **Responsivo**: menu vira gaveta abaixo de 1000 px; tabelas rolam dentro do cartão.
- **Impressão**: `@media print` esconde menu, filtros e paginação em todas as telas.