130 lines
4.8 KiB
HTML
130 lines
4.8 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 Liberi 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 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>
|
|
|
|
<div class="header-actions">
|
|
<button class="cart-btn" onclick="toggleCart()">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
</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>
|
|
|
|
</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">
|
|
<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>
|
|
</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="checkout-btn" onclick="finalizarPedido()">
|
|
<i class="fab fa-whatsapp"></i>
|
|
Finalizar Pedido
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay -->
|
|
<div class="overlay" id="overlay" onclick="toggleCart()"></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>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|