292 lines
14 KiB
HTML
292 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<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 Laberi Kids. Moda moderna, confortável e estilosa para crianças.">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="assets/LogoLiberiKids.png">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
|
<!-- Font Awesome para ícones -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<header class="header">
|
|
<div class="container">
|
|
<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="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>
|
|
</header>
|
|
|
|
<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>
|
|
</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>
|
|
|
|
<!-- 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 class="auth-modal-header">
|
|
<h2><i class="fas fa-shopping-cart"></i> Seu Carrinho</h2>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</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()">
|
|
<i class="fab fa-whatsapp"></i>
|
|
<div class="whatsapp-tooltip">
|
|
<strong>Maiara</strong><br>
|
|
Fale conosco!
|
|
</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>
|