<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lar dos Animais - Pedidos</title>
<style>
:root {
--primary: #2ecc71;
--secondary: #e67e22;
--dark: #2c3e50;
--light: #ecf0f1;
}
body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--light); }
header { background: var(--dark); color: white; padding: 1rem; text-align: center; }
.nav-tabs { display: flex; cursor: pointer; background: #ddd; }
.tab { flex: 1; padding: 15px; text-align: center; font-weight: bold; }
.tab.active { background: white; border-top: 4px solid var(--primary); }
.container { padding: 20px; max-width: 800px; margin: auto; }
.view { display: none; }
.view.active { display: block; }
/* Form Estilos */
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px; }
input, select, button { width: 100%; padding: 10px; margin: 10px 0; box-sizing: border-box; }
button { border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
.btn-add { background: var(--primary); color: white; }
.btn-order { background: var(--secondary); color: white; font-size: 1.1rem; }
/* Grid de Produtos */
.product-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; padding: 10px 0; }
.cart-controls { display: flex; gap: 10px; align-items: center; }
.qty-btn { width: 30px; height: 30px; padding: 0; }
/* Estilos para autenticação admin */
.admin-auth { margin-bottom: 20px; padding: 15px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107; }
.admin-auth input { margin: 5px 0; }
.admin-auth button { background: var(--secondary); color: white; margin-top: 5px; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.auth-message { font-size: 0.9rem; margin-top: 5px; color: #856404; }
.btn-logout { background: #e74c3c; color: white; margin-top: 10px; }
/* Loading */
.loading { opacity: 0.6; pointer-events: none; }
.btn-order.loading { background: #95a5a6; }
</style>
</head>
<body>
<header>
<h1>🐾 Loja Lar dos Animais</h1>
</header>
<div class="nav-tabs">
<div class="tab active" onclick="switchView('cliente')">🛒 Versão Cliente</div>
<div class="tab" onclick="switchView('admin')">⚙️ Versão Admin</div>
</div>
<div class="container">
<div id="admin" class="view">
<!-- Área de Autenticação Admin -->
<div class="card admin-auth" id="authArea">
<h3>🔐 Acesso Administrativo</h3>
<input type="password" id="adminPassword" placeholder="Digite a senha de acesso">
<button onclick="authenticateAdmin()">Acessar Painel</button>
<div id="authMessage" class="auth-message"></div>
</div>
<!-- Painel Admin (só aparece após autenticação) -->
<div id="adminPanel" class="admin-panel">
<div class="card">
<h3>Cadastrar Novo Produto</h3>
<input type="text" id="prodNome" placeholder="Nome do Produto (ex: Ração Golden 15kg)">
<input type="number" id="prodPreco" placeholder="Preço (R$)">
<button class="btn-add" onclick="adicionarProduto()">Salvar Produto</button>
</div>
<div class="card">
<h3>Produtos Cadastrados</h3>
<div id="listaAdmin"></div>
</div>
<button class="btn-logout" onclick="logoutAdmin()">🚪 Sair do Painel Admin</button>
</div>
</div>
<div id="cliente" class="view active">
<div class="card">
<h3>Cardápio de Produtos</h3>
<div id="listaProdutos"></div>
</div>
<div class="card" id="carrinho-area">
<h3>Seu Pedido</h3>
<div id="itensCarrinho"></div>
<hr>
<p><strong>Total: R$ <span id="totalPedido">0,00</span></strong></p>
<input type="text" id="nomeCliente" placeholder="Seu Nome">
<input type="text" id="whatsappCliente" placeholder="Seu WhatsApp (com DDD)">
<input type="text" id="endCliente" placeholder="Endereço de Entrega">
<button class="btn-order" onclick="enviarWhatsApp()">🚀 Enviar Pedido via WhatsApp</button>
</div>
</div>
</div>
<script>
// SENHA DO ADMIN
const ADMIN_SENHA = "721590";
let adminAutenticado = false;
let produtos = JSON.parse(localStorage.getItem('larDosAnimais_prods')) || [];
let carrinho = {};
// Alternar entre abas
function switchView(view) {
document.querySelectorAll('.view, .tab').forEach(el => el.classList.remove('active'));
document.getElementById(view).classList.add('active');
event.currentTarget.classList.add('active');
// Se for a aba admin, verificar se já está autenticado para mostrar o painel
if(view === 'admin') {
if(adminAutenticado) {
document.getElementById('authArea').style.display = 'none';
document.getElementById('adminPanel').classList.add('active');
} else {
document.getElementById('authArea').style.display = 'block';
document.getElementById('adminPanel').classList.remove('active');
}
}
renderizar();
}
// Autenticar Admin
function authenticateAdmin() {
const senha = document.getElementById('adminPassword').value;
const msgDiv = document.getElementById('authMessage');
if(senha === ADMIN_SENHA) {
adminAutenticado = true;
msgDiv.innerHTML = '<span style="color: green;">✅ Acesso concedido!</span>';
document.getElementById('authArea').style.display = 'none';
document.getElementById('adminPanel').classList.add('active');
renderizar();
} else {
msgDiv.innerHTML = '<span style="color: red;">❌ Senha incorreta! Tente novamente.</span>';
document.getElementById('adminPassword').value = '';
}
}
// Logout do Admin
function logoutAdmin() {
adminAutenticado = false;
document.getElementById('adminPanel').classList.remove('active');
document.getElementById('authArea').style.display = 'block';
document.getElementById('authArea').style.opacity = '1';
document.getElementById('adminPassword').value = '';
document.getElementById('authMessage').innerHTML = '';
renderizar();
}
// Lógica Admin
function adicionarProduto() {
if(!adminAutenticado) {
alert("Você precisa estar autenticado como admin para adicionar produtos!");
return;
}
const nome = document.getElementById('prodNome').value;
const preco = document.getElementById('prodPreco').value;
if(nome && preco && parseFloat(preco) > 0) {
produtos.push({ id: Date.now(), nome, preco: parseFloat(preco) });
localStorage.setItem('larDosAnimais_prods', JSON.stringify(produtos));
document.getElementById('prodNome').value = '';
document.getElementById('prodPreco').value = '';
renderizar();
alert("Produto adicionado com sucesso!");
} else {
alert("Preencha nome e preço válido!");
}
}
function excluirProduto(id) {
if(!adminAutenticado) {
alert("Você precisa estar autenticado como admin para excluir produtos!");
return;
}
if(confirm("Tem certeza que deseja excluir este produto?")) {
produtos = produtos.filter(p => p.id !== id);
localStorage.setItem('larDosAnimais_prods', JSON.stringify(produtos));
// Remover do carrinho se existir
if(carrinho[id]) {
delete carrinho[id];
localStorage.setItem('larDosAnimais_cart', JSON.stringify(carrinho));
}
renderizar();
}
}
// Lógica Cliente
function alterarQtd(id, delta) {
const atual = carrinho[id] || 0;
const novaQtd = Math.max(0, atual + delta);
if(novaQtd === 0) delete carrinho[id];
else carrinho[id] = novaQtd;
localStorage.setItem('larDosAnimais_cart', JSON.stringify(carrinho));
renderizar();
}
function renderizar() {
// Render Admin (apenas se autenticado)
const listaAdmin = document.getElementById('listaAdmin');
if(adminAutenticado) {
if(produtos.length > 0) {
listaAdmin.innerHTML = produtos.map(p => `
<div class="product-item">
<span>${p.nome} - R$ ${p.preco.toFixed(2)}</span>
<button onclick="excluirProduto(${p.id})" style="width:auto; background:red; color:white; padding:5px 10px;">Excluir</button>
</div>
`).join('');
} else {
listaAdmin.innerHTML = '<p style="text-align:center; color:#999;">Nenhum produto cadastrado.</p>';
}
} else {
listaAdmin.innerHTML = '<p style="text-align:center; color:#999;">🔒 Autentique-se para gerenciar produtos.</p>';
}
// Render Cliente
const listaProds = document.getElementById('listaProdutos');
if(produtos.length > 0) {
listaProds.innerHTML = produtos.map(p => `
<div class="product-item">
<span><strong>${p.nome}</strong><br>R$ ${p.preco.toFixed(2)}</span>
<div class="cart-controls">
<button class="qty-btn" onclick="alterarQtd(${p.id}, -1)">-</button>
<span>${carrinho[p.id] || 0}</span>
<button class="qty-btn" onclick="alterarQtd(${p.id}, 1)">+</button>
</div>
</div>
`).join('');
} else {
listaProds.innerHTML = '<p style="text-align:center; color:#999;">Nenhum produto disponível no momento.</p>';
}
// Calcular Total
let total = 0;
let resumoHTML = '';
for(let id in carrinho) {
const prod = produtos.find(p => p.id == id);
if(prod) {
total += prod.preco * carrinho[id];
resumoHTML += `<p>${carrinho[id]}x ${prod.nome}</p>`;
}
}
document.getElementById('totalPedido').innerText = total.toFixed(2);
document.getElementById('itensCarrinho').innerHTML = resumoHTML || '<p>Nenhum item selecionado</p>';
}
// Função para limpar o carrinho e os campos
function limparCarrinhoECampos() {
carrinho = {};
localStorage.setItem('larDosAnimais_cart', JSON.stringify(carrinho));
document.getElementById('nomeCliente').value = '';
document.getElementById('whatsappCliente').value = '';
document.getElementById('endCliente').value = '';
renderizar();
}
// Função principal para enviar mensagem para loja E para o cliente
async function enviarWhatsApp() {
const nome = document.getElementById('nomeCliente').value;
let whatsapp = document.getElementById('whatsappCliente').value;
const endereco = document.getElementById('endCliente').value;
// Validações
if(!nome) {
alert("Por favor, preencha seu nome.");
document.getElementById('nomeCliente').focus();
return;
}
if(!whatsapp) {
alert("Por favor, informe seu WhatsApp para que possamos retornar o contato.");
document.getElementById('whatsappCliente').focus();
return;
}
if(Object.keys(carrinho).length === 0) {
alert("Por favor, adicione itens ao carrinho.");
return;
}
// Limpar número do WhatsApp (remover espaços, traços, parênteses)
whatsapp = whatsapp.replace(/\D/g, '');
// Validar se o número tem pelo menos 10 dígitos
if(whatsapp.length < 10 || whatsapp.length > 13) {
alert("Por favor, informe um número de WhatsApp válido (com DDD). Ex: 21999999999");
document.getElementById('whatsappCliente').focus();
return;
}
// Adicionar código do Brasil se necessário (55)
if(!whatsapp.startsWith('55')) {
whatsapp = '55' + whatsapp;
}
// Desabilitar botão durante o envio
const btnEnviar = document.querySelector('.btn-order');
btnEnviar.classList.add('loading');
btnEnviar.textContent = '⏳ Enviando...';
try {
// Calcular total do pedido
let total = 0;
let produtosTexto = '';
for(let id in carrinho) {
const prod = produtos.find(p => p.id == id);
if(prod) {
const subtotal = prod.preco * carrinho[id];
total += subtotal;
produtosTexto += `- ${carrinho[id]}x ${prod.nome} (R$ ${subtotal.toFixed(2)})\n`;
}
}
// Formatar data e hora atual
const agora = new Date();
const dataHora = agora.toLocaleString('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
// Número da loja (fixo)
const numeroLoja = "5521976475824";
// ==================== MENSAGEM PARA A LOJA ====================
const mensagemLoja = `*🆕 NOVO PEDIDO - LAR DOS ANIMAIS* 🐾\n\n` +
`*📋 DADOS DO CLIENTE:*\n` +
`👤 *Nome:* ${nome}\n` +
`📞 *WhatsApp:* ${whatsapp}\n` +
`📍 *Endereço:* ${endereco || "Não informado"}\n\n` +
`*🛍️ PRODUTOS SOLICITADOS:*\n` +
`─────────────────────\n` +
`${produtosTexto}` +
`─────────────────────\n` +
`💰 *TOTAL DO PEDIDO:* R$ ${total.toFixed(2)}\n\n` +
`⏱️ *Pedido realizado em:* ${dataHora}\n\n` +
`✅ *Aguardando confirmação da loja.*\n` +
`📱 *Entre em contato com o cliente pelo WhatsApp informado acima.*`;
// ==================== MENSAGEM PARA O CLIENTE ====================
const mensagemCliente = `*🐾 LAR DOS ANIMAIS - CONFIRMAÇÃO DE PEDIDO* 🐾\n\n` +
`Olá *${nome}*, recebemos seu pedido com sucesso!\n\n` +
`*📋 RESUMO DO SEU PEDIDO:*\n` +
`─────────────────────\n` +
`${produtosTexto}` +
`─────────────────────\n` +
`💰 *Total:* R$ ${total.toFixed(2)}\n` +
`📍 *Endereço de entrega:* ${endereco || "A confirmar"}\n\n` +
`*⏱️ Próximos passos:*\n` +
`• Em breve nossa equipe entrará em contato para confirmar a disponibilidade dos produtos.\n` +
`• Prazo de entrega e forma de pagamento serão informados no contato.\n\n` +
`*💚 Agradecemos pela preferência!*\n` +
`*Lar dos Animais - Cuidando de quem você ama* 🐕🐱\n\n` +
`_Este é uma mensagem automática. Por favor, aguarde nosso contato._`;
// URL da loja (envia a mensagem para a loja)
const urlLoja = `https://api.whatsapp.com/send?phone=${numeroLoja}&text=${encodeURIComponent(mensagemLoja)}`;
// URL do cliente (envia a mensagem para o cliente)
const urlCliente = `https://api.whatsapp.com/send?phone=${whatsapp}&text=${encodeURIComponent(mensagemCliente)}`;
// Abrir primeiro a mensagem para a loja, depois para o cliente
window.open(urlLoja, '_blank');
// Pequeno delay para abrir a segunda guia (evita bloqueio de popup)
setTimeout(() => {
window.open(urlCliente, '_blank');
}, 500);
// Pequeno delay para mostrar mensagem de sucesso e limpar o carrinho
setTimeout(() => {
// Perguntar se deseja limpar o carrinho
if(confirm("✅ Pedido enviado com sucesso!\n\n📱 Mensagem enviada para a LOJA e para o seu WHATSAPP.\n\nDeseja limpar seu carrinho e começar um novo pedido?")) {
limparCarrinhoECampos();
}
}, 1000);
} catch (error) {
console.error("Erro ao enviar mensagem:", error);
alert("Ocorreu um erro ao enviar o pedido. Tente novamente.");
} finally {
// Reativar botão após 2 segundos
setTimeout(() => {
btnEnviar.classList.remove('loading');
btnEnviar.textContent = '🚀 Enviar Pedido via WhatsApp';
}, 2000);
}
}
// Carregar carrinho salvo
const carrinhoSalvo = localStorage.getItem('larDosAnimais_cart');
if(carrinhoSalvo) {
carrinho = JSON.parse(carrinhoSalvo);
}
// Inicializar
renderizar();
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário