tiago/App-Estoque-LiberiKids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sincroniza projeto para gitea

Browse Source
This commit is contained in:
Tiago
2025-11-29 21:31:52 -03:00
parent 33d8645eb4
commit 7e7a0f8867
129 changed files with 24999 additions and 6757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
site/README.md
View File

@@ -1,163 +0,0 @@
# 🛍️ Catálogo Web - Liberi Kids
Catálogo online da **Liberi Kids - Moda Infantil** com carrinho de compras integrado ao WhatsApp.
## 🎯 Funcionalidades
### ✅ Catálogo de Produtos
- **Carregamento automático** dos produtos cadastrados no sistema
- **Filtros inteligentes** por categoria, tamanho e gênero
- **Design responsivo** para desktop e mobile
- **Imagens otimizadas** com fallback para produtos sem foto
### 🛒 Carrinho de Compras
- **Adicionar/remover produtos** com animações suaves
- **Controle de quantidade** individual por item
- **Cálculo automático** do total
- **Persistência visual** do estado do carrinho
### 📱 Integração WhatsApp
- **Envio automático** do pedido para a vendedora Maiara
- **Formatação profissional** da mensagem
- **Detalhes completos** do pedido (produtos, quantidades, valores)
- **Timestamp** e informações de origem
### 🎨 Interface Moderna
- **Design gradient** com cores atrativas
- **Animações CSS** suaves e profissionais
- **Tipografia** Google Fonts (Poppins)
- **Ícones** Font Awesome
- **Layout responsivo** para todos os dispositivos
## 🚀 Como Usar
### 1. Acesso ao Catálogo
```
http://localhost:5000/catalogo
```
### 2. Configuração do WhatsApp
Edite o arquivo `script.js` e altere o número da vendedora:
```javascript
const CONFIG = {
WHATSAPP_NUMBER: '5511999999999', // Número da Maiara
VENDEDORA_NOME: 'Maiara'
};
```
### 3. Fluxo de Compra
1. **Navegar** pelos produtos no catálogo
2. **Filtrar** por categoria, tamanho ou gênero
3. **Adicionar** produtos ao carrinho
4. **Revisar** itens no carrinho lateral
5. **Finalizar** pedido via WhatsApp
## 📋 Estrutura de Arquivos
```
site/
├── index.html # Página principal do catálogo
├── styles.css # Estilos CSS responsivos
├── script.js # JavaScript com todas as funcionalidades
└── README.md # Esta documentação
```
## 🔧 Integração com o Sistema
### API Utilizada
- **Endpoint:** `/api/catalogo/produtos`
- **Método:** GET
- **Retorna:** Produtos em estoque formatados para o catálogo
### Dados dos Produtos
```json
{
"id": 1,
"nome": "Camiseta Infantil",
"preco_venda": 29.90,
"tamanho": "M",
"genero": "unissex",
"estacao": "verao",
"categoria": "camiseta",
"imagem": "/uploads/produto1.jpg",
"estoque": 5,
"descricao": "Camiseta confortável..."
}
```
## 🎨 Personalização
### Cores do Tema
- **Primária:** `#667eea` (Azul gradient)
- **Secundária:** `#764ba2` (Roxo gradient)
- **Sucesso:** `#10b981` (Verde)
- **Erro:** `#ef4444` (Vermelho)
- **WhatsApp:** `#25d366` (Verde WhatsApp)
### Responsividade
- **Desktop:** Layout completo com 3-4 colunas
- **Tablet:** Layout adaptado com 2-3 colunas
- **Mobile:** Layout single-column otimizado
## 📱 Funcionalidades do WhatsApp
### Formato da Mensagem
```
🛍️ NOVO PEDIDO - LIBERI KIDS
👋 Olá Maiara! Gostaria de fazer um pedido:
📦 ITENS DO PEDIDO:
1. Camiseta Infantil
• Tamanho: M
• Gênero: Unissex
• Quantidade: 2x
• Preço unitário: R$ 29,90
• Subtotal: R$ 59,80
📊 RESUMO DO PEDIDO:
• Total de itens: 2
• Valor total: R$ 59,80
📱 Pedido feito através do catálogo online
🕐 07/10/2024 17:30:15
Aguardo retorno para confirmar o pedido! 😊
```
## 🔄 Sincronização Automática
### Produtos Novos
- **Automático:** Novos produtos aparecem no catálogo imediatamente
- **Estoque:** Apenas produtos com estoque > 0 são exibidos
- **Ordem:** Produtos mais recentes aparecem primeiro
### Atualizações em Tempo Real
- **Preços:** Atualizados automaticamente
- **Estoque:** Produtos sem estoque são ocultados
- **Imagens:** Carregamento otimizado com fallback
## 🛡️ Segurança e Performance
### Otimizações
- **Lazy loading** de imagens
- **Debounce** nos filtros
- **Cache** de produtos carregados
- **Compressão** de imagens
### Tratamento de Erros
- **Fallback** para produtos sem imagem
- **Retry** automático em caso de erro de rede
- **Mensagens** de erro amigáveis
- **Loading states** informativos
## 📞 Suporte
Para dúvidas ou problemas com o catálogo:
- **WhatsApp:** (11) 99999-9999
- **E-mail:** contato@liberikids.com.br
---
**Liberi Kids - Moda Infantil** 👶✨

306
site/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Liberi Kids - Moda Infantil | Catálogo Online</title>
<meta name="description" content="Descubra as melhores roupas infantis na Liberi Kids. Moda moderna, confortável e estilosa para crianças.">
<meta name="description" content="Descubra as melhores roupas infantis na Laberi Kids. Moda moderna, confortável e estilosa para crianças.">
<!-- Favicon -->
<link rel="icon" type="image/png" href="assets/LogoLiberiKids.png">
@@ -20,99 +20,174 @@
</head>
<body>
<div class="page-wrapper">
<!-- Header Simples -->
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo">
<img src="assets/LogoLiberiKids.png" alt="Liberi Kids" class="logo-img">
<div class="header-card">
<div class="brand-block">
<img src="assets/LogoLiberiKids.png" alt="Liberi Kids - Moda Infantil" class="brand-logo">
<div class="brand-copy">
<span class="brand-eyebrow">Catálogo Online</span>
<span class="brand-name">Liberi Kids - Moda Infantil</span>
</div>
</div>
<div class="header-actions">
<button class="cart-btn" onclick="toggleCart()">
<i class="fas fa-shopping-cart"></i>
<button class="filter-btn header-action" onclick="toggleFilterPanel()" aria-label="Abrir filtros">
<i class="fas fa-sliders-h"></i>
<span>Filtrar peças</span>
</button>
<div class="user-area" id="userArea">
<div id="userNotLogged" class="user-not-logged">
<button class="user-btn header-action" onclick="showLoginModal()" title="Clique para fazer login">
<i class="fas fa-user"></i>
<span>Entrar</span>
</button>
</div>
<div id="userLogged" class="user-logged" style="display: none;">
<button class="user-btn header-action" onclick="showLoginModal()" title="Clique para ver opções da conta">
<i class="fas fa-user-check"></i>
<span class="user-greeting">Olá, <strong id="userName"></strong></span>
</button>
</div>
</div>
<button class="cart-btn header-action" onclick="toggleCart()" aria-label="Abrir carrinho">
<i class="fas fa-shopping-bag"></i>
<span>Ver carrinho</span>
<span class="cart-count">0</span>
</button>
</div>
</div>
</div>
<!-- Filtros Simples -->
<section class="filters">
<div class="container">
<div class="filter-options">
<select id="marcaFilter">
<option value="">Todas as Marcas</option>
</select>
<select id="tamanhoFilter">
<option value="">Todos os Tamanhos</option>
<option value="P">P (2-4 anos)</option>
<option value="M">M (4-6 anos)</option>
<option value="GG">GG (8-10 anos)</option>
</select>
<select id="generoFilter">
<option value="">Todos</option>
<option value="menino">Menino</option>
<option value="menina">Menina</option>
<option value="unissex">Unissex</option>
</select>
</div>
</div>
</section>
</header>
<!-- Produtos -->
<section id="produtos" class="produtos">
<div class="container">
<h2>Nossos Produtos</h2>
<div class="loading" id="loading">
<i class="fas fa-spinner fa-spin"></i>
<p>Carregando produtos...</p>
<main class="main-content">
<section class="filter-panel" id="filterPanel" aria-label="Filtros do catálogo">
<div class="container">
<div class="filter-card">
<div class="filter-card-header">
<div class="filter-card-title">
<h3>Filtros</h3>
</div>
<button class="filter-close" type="button" onclick="toggleFilterPanel()" aria-label="Fechar filtros">
<i class="fas fa-times"></i>
</button>
</div>
<div class="filter-content">
<div class="filter-group">
<span class="filter-label">Tamanho</span>
<div class="filter-chip-group" id="tamanhoFilterChips" role="group" aria-label="Filtrar por tamanho">
<button class="filter-chip active" data-filter="tamanho" data-value="">Todos</button>
</div>
</div>
<div class="filter-group">
<span class="filter-label">Gênero</span>
<div class="filter-chip-group" id="generoFilterChips" role="group" aria-label="Filtrar por gênero">
<button class="filter-chip active" data-filter="genero" data-value="">Todos</button>
</div>
</div>
<div class="filter-group">
<span class="filter-label">Destaques</span>
<div class="filter-chip-group" id="destaquesFilterChips" role="group" aria-label="Filtrar por destaques">
<button class="filter-chip active" data-filter="destaque" data-value="">Todos</button>
<button class="filter-chip" data-filter="destaque" data-value="promocao">🏷️ Promoção</button>
<button class="filter-chip" data-filter="destaque" data-value="novo">✨ Novo</button>
</div>
</div>
</div>
</div>
</div>
<div class="produtos-grid" id="produtosGrid">
<!-- Produtos serão carregados dinamicamente -->
</div>
<div class="no-products" id="noProducts" style="display: none;">
<i class="fas fa-search"></i>
<h3>Nenhum produto encontrado</h3>
<p>Tente ajustar os filtros ou volte mais tarde para ver novos produtos.</p>
</div>
</div>
</section>
</section>
<section id="produtos" class="produtos">
<div class="container">
<div class="loading" id="loading">
<i class="fas fa-spinner fa-spin"></i>
<p>Carregando produtos...</p>
</div>
<div class="produtos-grid" id="produtosGrid">
<!-- Produtos serão carregados dinamicamente -->
</div>
<div class="no-products" id="noProducts" style="display: none;">
<i class="fas fa-search"></i>
<h3>Nenhum produto encontrado</h3>
<p>Tente ajustar os filtros ou volte mais tarde para ver novas peças.</p>
</div>
</div>
</section>
</main>
</div>
<!-- Carrinho Lateral -->
<div class="cart-sidebar" id="cartSidebar">
<h3><i class="fas fa-shopping-cart"></i> Seu Carrinho</h3>
<button onclick="toggleCart()" class="close-cart">
<!-- Modal do Carrinho -->
<div class="auth-modal" id="cartModal">
<div class="auth-modal-content cart-modal-content">
<button class="auth-modal-close" onclick="toggleCart()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="cart-content" id="cartContent">
<div class="empty-cart">
<i class="fas fa-shopping-cart"></i>
<p>Seu carrinho está vazio</p>
<span>Adicione produtos para começar!</span>
<div class="auth-modal-header">
<h2><i class="fas fa-shopping-cart"></i> Seu Carrinho</h2>
</div>
</div>
<div class="cart-footer" id="cartFooter" style="display: none;">
<div class="cart-total">
<strong>Total: R$ <span id="cartTotal">0,00</span></strong>
<div class="cart-content" id="cartContent">
<div class="empty-cart">
<i class="fas fa-shopping-cart" style="font-size: 3rem; color: #cbd5e0; margin-bottom: 1rem;"></i>
<p>Seu carrinho está vazio</p>
<span>Adicione produtos para começar!</span>
</div>
</div>
<div class="cart-footer" id="cartFooter" style="display: none;">
<div class="cart-total">
<strong>Total: R$ <span id="cartTotal">0,00</span></strong>
</div>
<button class="auth-btn checkout-btn" onclick="finalizarPedido()">
<i class="fab fa-whatsapp"></i>
Finalizar Pedido
</button>
</div>
<button class="checkout-btn" onclick="finalizarPedido()">
<i class="fab fa-whatsapp"></i>
Finalizar Pedido
</button>
</div>
</div>
<!-- Overlay -->
<div class="overlay" id="overlay" onclick="toggleCart()"></div>
<!-- Modal do Produto -->
<div class="produto-modal" id="produtoModal">
<div class="produto-modal-content">
<button class="produto-modal-close" onclick="fecharProdutoModal(event)">
<i class="fas fa-times"></i>
</button>
<div class="produto-modal-image" id="produtoModalImage">
<!-- Imagem será inserida aqui -->
</div>
<div class="produto-modal-info">
<h2 class="produto-modal-nome" id="produtoModalNome"></h2>
<p class="produto-modal-marca" id="produtoModalMarca"></p>
<div class="produto-modal-preco" id="produtoModalPreco"></div>
<p class="produto-modal-descricao" id="produtoModalDescricao"></p>
<div class="produto-modal-variacoes" id="produtoModalVariacoes">
<h4>Tamanhos e Cores Disponíveis</h4>
<div class="variacoes-grid" id="produtoModalVariacoesGrid">
<!-- Variações serão inseridas aqui -->
</div>
</div>
<button class="produto-modal-botao" id="produtoModalBotao" onclick="adicionarAoCarrinhoModal()">
<i class="fas fa-cart-plus"></i>
Adicionar ao Carrinho
</button>
</div>
</div>
</div>
<!-- Visualizador de Imagem -->
<div class="produto-image-viewer" id="produtoImageViewer">
<button class="produto-image-viewer-close" type="button" onclick="fecharImagemExpandida()" aria-label="Fechar imagem ampliada">
<i class="fas fa-times"></i>
</button>
<button class="viewer-prev" type="button" onclick="navegarImagemViewer(-1)" aria-label="Imagem anterior">
<i class="fas fa-chevron-left"></i>
</button>
<button class="viewer-next" type="button" onclick="navegarImagemViewer(1)" aria-label="Próxima imagem">
<i class="fas fa-chevron-right"></i>
</button>
<div class="viewer-counter"></div>
<img src="" alt="Visualização ampliada do produto" id="produtoImageViewerImg">
</div>
<!-- WhatsApp Flutuante -->
<div class="whatsapp-float" onclick="abrirWhatsApp()">
@@ -123,7 +198,94 @@
</div>
</div>
<!-- Modal de Login -->
<div class="auth-modal" id="loginModal">
<div class="auth-modal-content">
<button class="auth-modal-close" onclick="closeLoginModal()">
<i class="fas fa-times"></i>
</button>
<div class="auth-modal-header">
<h2>Entrar na sua conta</h2>
<p>Use seu WhatsApp cadastrado na loja</p>
</div>
<form id="loginForm" onsubmit="handleLogin(event)">
<div class="form-group">
<label for="loginPhone">WhatsApp (apenas números)</label>
<input type="tel" id="loginPhone" placeholder="11999999999" required>
<small>Use o mesmo número cadastrado</small>
</div>
<div class="form-group">
<label for="loginPassword">Senha</label>
<input type="password" id="loginPassword" placeholder="Digite sua senha" required>
</div>
<button type="submit" class="auth-btn" id="loginBtn">
<i class="fas fa-sign-in-alt"></i> Entrar
</button>
</form>
<div class="auth-footer">
<p>Primeira vez aqui? <a href="#" onclick="showRegisterModal()">Cadastre-se</a></p>
</div>
</div>
</div>
<!-- Modal de Cadastro -->
<div class="auth-modal" id="registerModal">
<div class="auth-modal-content">
<button class="auth-modal-close" onclick="closeRegisterModal()">
<i class="fas fa-times"></i>
</button>
<div class="auth-modal-header">
<h2>Criar sua conta</h2>
<p>Cadastre-se para fazer pedidos online</p>
</div>
<form id="registerForm" onsubmit="handleRegister(event)">
<div class="form-group">
<label for="registerName">Nome Completo *</label>
<input type="text" id="registerName" required>
</div>
<div class="form-group">
<label for="registerEmail">E-mail</label>
<input type="email" id="registerEmail">
</div>
<div class="form-group">
<label for="registerWhatsapp">WhatsApp (apenas números) *</label>
<input type="tel" id="registerWhatsapp" placeholder="11999999999" required>
</div>
<div class="form-group">
<label for="registerPassword">Senha *</label>
<input type="password" id="registerPassword" placeholder="Crie uma senha" required>
<small>Mínimo 6 caracteres</small>
</div>
<div class="form-group">
<label for="registerAddress">Endereço *</label>
<textarea id="registerAddress" rows="3" placeholder="Rua, número, bairro, cidade, CEP" required></textarea>
</div>
<button type="submit" class="auth-btn" id="registerBtn">
<i class="fas fa-user-plus"></i> Criar Conta
</button>
</form>
<div class="auth-footer">
<p>Já tem conta? <a href="#" onclick="showLoginModal()">Faça login</a></p>
</div>
</div>
</div>
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<!-- Usando script.js como principal - remova supabase-integration.js para evitar conflitos -->
<!-- <script src="supabase-integration.js"></script> -->
<script src="script.js"></script>
</body>
</html>

17
site/logo.svg
View File

@@ -1,17 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<!-- Fundo circular -->
<circle cx="200" cy="200" r="180" fill="#f8f9fa" stroke="#333" stroke-width="8"/>
<!-- Lupa -->
<circle cx="200" cy="180" r="120" fill="none" stroke="#333" stroke-width="6"/>
<line x1="290" y1="270" x2="340" y2="320" stroke="#8B4513" stroke-width="12" stroke-linecap="round"/>
<!-- Texto Liberi -->
<text x="200" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="36" font-weight="bold" fill="#FF69B4">Liberi</text>
<!-- Texto KIDS -->
<text x="200" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#87CEEB">KIDS</text>
<!-- Texto "moda infantil" -->
<text x="200" y="320" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-style="italic" fill="#333">moda infantil</text>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 895 B

2136
site/script.js
View File

File diff suppressed because it is too large Load Diff

3467
site/styles.css
View File

File diff suppressed because it is too large Load Diff