chore: sincroniza projeto para gitea

2025-11-29 21:31:52 -03:00
parent 33d8645eb4
commit 7e7a0f8867
129 changed files with 24999 additions and 6757 deletions
--- a/MELHORIAS-UX-CATALOGO.md
+++ b/MELHORIAS-UX-CATALOGO.md
@@ -0,0 +1,392 @@
+# 🎨 Melhorias de UX - Catálogo v2.1
+
+## 📋 Resumo das Alterações
+
+Todas as melhorias visuais e funcionais solicitadas foram implementadas com sucesso!
+
+---
+
+## ✨ Melhorias Implementadas
+
+### 1. **Badges Reposicionados** ✅
+
+**Antes:**
+- Badges sobrepostos na foto
+- Difícil ver a imagem do produto
+- Visual poluído
+
+**Depois:**
+- Badges posicionados **abaixo da foto**
+- Container próprio `.produto-badges`
+- Foto do produto limpa e visível
+- Visual organizado e profissional
+
+**Exemplo:**
+```
+┌────────────────┐
+│                │
+│   [FOTO]       │
+│                │
+└────────────────┘
+🏷️ PROMOÇÃO  ✨ NOVO
+```
+
+**Código:**
+```javascript
+// site/script.js - linha 352
+<div class="produto-badges">
+    ${!temEstoque ? '<span class="badge-esgotado">ESGOTADO</span>' : ''}
+    ${mostrarBadgePromocao ? '<span class="badge-promocao">🏷️ PROMOÇÃO</span>' : ''}
+    ${mostrarBadgeNovidade ? '<span class="badge-novidade">✨ NOVO</span>' : ''}
+</div>
+```
+
+---
+
+### 2. **Preços no Modal Corrigidos** ✅
+
+**Problema:**
+- Modal exibia sempre preço normal
+- Preço promocional não aparecia
+
+**Solução:**
+- Preços promocionais agora aparecem no modal
+- Preço normal riscado quando em promoção
+- Preço promocional destacado em vermelho
+
+**Exemplo:**
+```
+Modal do Produto:
+─────────────────
+Bermuda Moletom
+Fakini
+
+R$ 99,90  (riscado)
+R$ 79,90  (vermelho, maior)
+```
+
+**Código:**
+```javascript
+// site/script.js - linha 741-756
+if (emPromocao) {
+    const precoNormalFormatado = `R$ ${precoNormal.toFixed(2).replace('.', ',')}`;
+    modalPreco.innerHTML = `
+        <span class="modal-preco-original">${precoNormalFormatado}</span>
+        <span class="modal-preco-promocional">${precoFormatado}</span>
+    `;
+} else {
+    modalPreco.textContent = precoFormatado;
+}
+```
+
+---
+
+### 3. **Navegação de Fotos no Viewer** ✅
+
+**Problema:**
+- Não dava para navegar entre múltiplas fotos
+- Difícil ver toda a galeria
+
+**Solução:**
+- Botões de navegação (← →)
+- Contador de fotos (1 / 5)
+- Navegação por teclado (setas)
+- Loop circular (última → primeira)
+
+**Recursos:**
+- **Botões visuais:** Esquerda/Direita
+- **Teclado:** ← → para navegar, ESC para fechar
+- **Contador:** Mostra posição atual
+- **Auto-hide:** Botões só aparecem com 2+ fotos
+
+**Exemplo:**
+```
+┌──────────────────────────────┐
+│  [←]                    [→]  │
+│                              │
+│        [FOTO AMPLIADA]       │
+│                              │
+│         3 / 7                │
+└──────────────────────────────┘
+```
+
+**Código:**
+```javascript
+// site/script.js - linha 990-1012
+function navegarImagemViewer(direction) {
+    if (viewerImages.length <= 1) return;
+    
+    currentImageIndex += direction;
+    
+    // Loop circular
+    if (currentImageIndex < 0) {
+        currentImageIndex = viewerImages.length - 1;
+    } else if (currentImageIndex >= viewerImages.length) {
+        currentImageIndex = 0;
+    }
+    
+    const viewerImg = document.getElementById('produtoImageViewerImg');
+    const counter = document.querySelector('.viewer-counter');
+    
+    if (viewerImg) {
+        viewerImg.src = viewerImages[currentImageIndex];
+    }
+    
+    if (counter) {
+        counter.textContent = `${currentImageIndex + 1} / ${viewerImages.length}`;
+    }
+}
+```
+
+---
+
+## 📁 Arquivos Modificados
+
+### Frontend - Site Público
+
+1. **`site/index.html`**
+   - Adicionados botões de navegação no viewer
+   - Adicionado contador de fotos
+
+2. **`site/script.js`**
+   - Badges reposicionados
+   - Preços promocionais no modal
+   - Lógica de navegação de fotos
+   - Navegação por teclado
+
+3. **`site/styles.css`**
+   - Novo container `.produto-badges`
+   - Estilos dos badges reposicionados
+   - Botões de navegação do viewer
+   - Contador de fotos
+   - Preços promocionais no modal
+
+---
+
+## 🎯 Funcionalidades por Recurso
+
+### Badges
+
+**Estados:**
+- **Esgotado:** Cinza escuro
+- **Promoção:** Gradiente laranja→vermelho
+- **Novidade:** Gradiente roxo→azul
+
+**Comportamento:**
+- Aparecem apenas quando aplicável
+- Respeitam configurações do admin
+- Animação suave de entrada
+
+### Preços
+
+**No Card:**
+```
+R$ 99,90  (riscado, cinza)
+R$ 79,90  (vermelho, maior)
+```
+
+**No Modal:**
+```
+R$ 99,90  (riscado, menor)
+R$ 79,90  (vermelho, destaque)
+```
+
+**No Carrinho:**
+```
+Usa preço promocional se disponível
+```
+
+### Navegação de Fotos
+
+**Métodos:**
+1. Clique nos botões ← →
+2. Teclas de seta do teclado
+3. Clique nas miniaturas (modal)
+
+**Indicadores:**
+- Contador: "3 / 7"
+- Miniatura ativa destacada
+- Botões só aparecem com 2+ fotos
+
+---
+
+## 🎨 CSS Principais
+
+```css
+/* Badges Container */
+.produto-badges {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.6rem;
+    min-height: 28px;
+}
+
+/* Botões de Navegação */
+.viewer-prev, .viewer-next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+}
+
+/* Contador */
+.viewer-counter {
+    position: absolute;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0.6rem 1.2rem;
+    border-radius: 20px;
+}
+
+/* Preços Promocionais */
+.modal-preco-original {
+    text-decoration: line-through;
+    color: #9ca3af;
+}
+
+.modal-preco-promocional {
+    font-size: 1.4rem;
+    color: #dc2626;
+}
+```
+
+---
+
+## 🎮 Como Usar
+
+### Para o Cliente (Site Público)
+
+**Visualizar Produtos:**
+1. Acesse o catálogo
+2. Veja badges abaixo das fotos
+3. Clique no produto para detalhes
+
+**Navegar Fotos no Modal:**
+1. Clique na foto principal
+2. Clique em "Ver maior"
+3. Use ← → ou clique nas setas
+4. ESC para fechar
+
+**Ver Promoções:**
+- Preço riscado + preço novo em vermelho
+- Badge 🏷️ PROMOÇÃO destacado
+
+### Para o Admin
+
+**Marcar Promoções:**
+1. Acesse Site / Catalogo
+2. Digite preço promocional
+3. Badge aparece automaticamente
+
+**Adicionar Fotos:**
+1. Clique no botão "Fotos"
+2. Upload de imagens
+3. Navegação funciona automaticamente
+
+---
+
+## 📊 Comparativo Antes/Depois
+
+| Aspecto | Antes | Depois |
+|---------|-------|--------|
+| **Badges** | Em cima da foto | Abaixo da foto |
+| **Foto** | Coberta por badges | Limpa e visível |
+| **Preço Modal** | Sempre normal | Promocional quando aplicável |
+| **Navegação** | Sem navegação | Setas + teclado + contador |
+| **UX** | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
+
+---
+
+## 🐛 Correções de Bugs
+
+### Bug 1: Modal não mostrava preço promocional
+- **Causa:** Faltava lógica no `abrirProdutoModal()`
+- **Correção:** Adicionado cálculo de preço promocional
+- **Linha:** `site/script.js:741-756`
+
+### Bug 2: Viewer sem navegação
+- **Causa:** Faltavam controles
+- **Correção:** Botões + lógica + teclado
+- **Linha:** `site/script.js:936-1026`
+
+### Bug 3: Badges sobrepostas
+- **Causa:** Position absolute na foto
+- **Correção:** Container próprio fora da foto
+- **Linha:** `site/script.js:352-358`
+
+---
+
+## ✅ Checklist de Testes
+
+- [x] Badges aparecem abaixo da foto
+- [x] Foto do produto totalmente visível
+- [x] Preço promocional no modal
+- [x] Preço normal riscado quando em promo
+- [x] Botões ← → no viewer
+- [x] Contador de fotos funciona
+- [x] Navegação por teclado (← → ESC)
+- [x] Loop circular de fotos
+- [x] Botões se escondem com 1 foto
+- [x] Visual responsivo
+
+---
+
+## 🎯 Melhorias Futuras
+
+- [ ] Swipe gesture em mobile
+- [ ] Zoom na foto ampliada
+- [ ] Autoplay da galeria
+- [ ] Transições animadas entre fotos
+- [ ] Thumbnails no viewer
+
+---
+
+## 📝 Notas Técnicas
+
+**Performance:**
+- Navegação instantânea
+- Imagens pré-carregadas
+- CSS otimizado
+
+**Acessibilidade:**
+- Labels ARIA nos botões
+- Navegação por teclado
+- Contraste adequado
+
+**Compatibilidade:**
+- Chrome ✅
+- Firefox ✅
+- Safari ✅
+- Edge ✅
+- Mobile ✅
+
+---
+
+## 🎊 Resultado Final
+
+**Experiência do Usuário:**
+- ⭐⭐⭐⭐⭐ Visual limpo e organizado
+- ⭐⭐⭐⭐⭐ Navegação intuitiva
+- ⭐⭐⭐⭐⭐ Informações claras
+- ⭐⭐⭐⭐⭐ Performance fluida
+
+**Feedback Esperado:**
+- "Muito mais fácil ver as fotos!"
+- "Adorei os badges organizados"
+- "Fica claro quando está em promoção"
+- "Navegação super intuitiva"
+
+---
+
+**Data de Implementação:** 24 de outubro de 2025  
+**Versão:** v2.1  
+**Status:** ✅ Completo e Testado  
+**Desenvolvido para:** Liberi Kids - Catálogo Online 🛍️✨